:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #111111;
	--muted: #5c5c5c;
	--line: #d8d8d8;

	/* Akzent = naechster darstellbarer Punkt zu 555 nm, dem Maximum der
	   photopischen Hellempfindlichkeit. Der Reiz selbst liegt auf dem
	   Spektralfarbzug bei oklch(0.8905 0.3373 135.96) und ist auf keinem
	   Display erreichbar. Hue 135.96 stimmt exakt, nur das Chroma ist
	   aufs jeweilige Gamut gedeckelt -- sRGB schafft 78%, P3 87%.
	   Hex-Basis statt oklch(), damit auch alte Engines den Wert kriegen. */
	--akzent: #80ff00;        /* oklch(0.8905 0.2645 135.96) */
	--akzent-rand: #6cda00;   /* oklch(0.7900 0.2347 135.96) */
	--akzent-fg: #111111;     /* 14.6:1 auf --akzent, AAA */

	--ok: #0a6b2d;
	--fehler: #a11212;
	--karte: #fafafa;
}

/* P3-Displays: identisches L und H, nur mehr Chroma. Das @supports faengt
   Safari 10-15.3 ab -- kennt color-gamut, aber noch kein oklch(). */
@media (color-gamut: p3) {
	@supports (color: oklch(0.89 0.26 136)) {
		:root {
			--akzent: oklch(0.8905 0.2950 135.96);
			--akzent-rand: oklch(0.7900 0.2754 135.96);
		}
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #101010;
		--fg: #eaeaea;
		--muted: #9a9a9a;
		--line: #2e2e2e;
		--ok: #57d98a;
		--fehler: #ff8a8a;
		--karte: #181818;
	}
}

body {
	margin: 0 auto;
	padding: 1rem 1rem 4rem;
	max-width: 44rem;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow-wrap: anywhere;
}

h1 { font-size: 1.6rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; border-bottom: 2px solid var(--akzent); display: inline-block; }
a { color: inherit; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
pre { overflow-x: auto; background: var(--karte); padding: .5rem; border-radius: 6px; }
iframe { max-width: 100%; }

.hinweis { color: var(--muted); font-size: .9rem; }
.ok, .fehler { padding: .7rem .9rem; border-radius: 8px; font-weight: 600; }
.ok { color: var(--ok); border: 1px solid var(--ok); }
.fehler { color: var(--fehler); border: 1px solid var(--fehler); }
.leer { color: var(--muted); }

/* ---- Formular: grosse Ziele, damit es auch auf fremden Geraeten geht ---- */
form { margin: 1rem 0 2rem; }
label { display: block; margin: .9rem 0 .25rem; font-weight: 600; font-size: .9rem; }

input[type=password],
input[type=text],
input:not([type]),
textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem;
	font: inherit;
	font-size: 16px; /* verhindert Auto-Zoom auf iOS */
	color: var(--fg);
	background: var(--karte);
	border: 1px solid var(--line);
	border-radius: 8px;
}

textarea { resize: vertical; }

button {
	font: inherit;
	padding: .7rem 1.1rem;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--karte);
	color: var(--fg);
	cursor: pointer;
}

button.senden {
	margin-top: 1.1rem;
	width: 100%;
	padding: 1rem;
	font-size: 1.05rem;
	font-weight: 700;
	background: var(--akzent);
	color: var(--akzent-fg);
	border-color: var(--akzent-rand);
}

.geozeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 0; }
.geozeile span { color: var(--muted); font-size: .85rem; }

/* ---- Verlauf ---- */
.eintrag {
	border: 1px solid var(--line);
	border-left: 4px solid var(--akzent);
	border-radius: 8px;
	padding: .8rem .9rem;
	margin: .8rem 0;
	background: var(--karte);
}

.eintrag header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	font-size: .85rem;
	color: var(--muted);
}

.eintrag header strong { color: var(--fg); }

.kanal {
	background: var(--akzent);
	color: var(--akzent-fg);
	padding: .1rem .5rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.eintrag .text { margin: .6rem 0; font-size: 1.05rem; white-space: pre-wrap; }

.meta {
	margin: 0;
	padding-top: .5rem;
	border-top: 1px dashed var(--line);
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .15rem .7rem;
	font-size: .78rem;
	color: var(--muted);
}

.meta dt { font-weight: 600; }
.meta dd { margin: 0; }

.fuss { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }

/* ---- Terminbuchung ---- */
.tag { margin: 1.4rem 0; }
.tag h3 {
	margin: 0 0 .5rem;
	font-size: .95rem;
	color: var(--muted);
	font-weight: 600;
}

.slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* Grosse Ziele – das wird oft am Telefon in der Hand angetippt. */
.slot {
	display: block;
	padding: .7rem 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--karte);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.slot:hover, .slot:focus {
	background: var(--akzent);
	color: var(--akzent-fg);
	border-color: var(--akzent-rand);
}

.gewaehlt {
	border-left: 4px solid var(--akzent);
	background: var(--karte);
	padding: .8rem .9rem;
	border-radius: 8px;
	font-size: 1.05rem;
}

.gewaehlt small { color: var(--muted); font-size: .8rem; }

.arten { border: 1px solid var(--line); border-radius: 8px; margin: 1.1rem 0 0; padding: .6rem .9rem 1rem; }
.arten legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }

.wahl {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: .5rem 0 0;
	font-weight: 400;
	cursor: pointer;
}

.wahl input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.wahl span { font-size: .95rem; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots verlockend. */
.falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.meta.gross { font-size: .95rem; color: var(--fg); gap: .4rem .9rem; border-top: none; }
.meta.gross dt { color: var(--muted); }

.absage { margin-top: 2rem; border-top: 1px dashed var(--line); padding-top: .8rem; }
.absage label { font-weight: 400; font-size: .85rem; color: var(--muted); }

.eintrag.storniert { opacity: .55; border-left-color: var(--line); }
.eintrag form.inline { margin: .6rem 0 0; }
.sperren { font-size: .9rem; padding-left: 1.2rem; }
.sperren code { color: var(--muted); }