/**
 * GEO1 Infosystem - Gestaltung.
 *
 * Ein Stylesheet, keine Abhängigkeiten. Alle Farben, Abstände und Maße stehen
 * als Custom Properties oben.
 *
 * ---------------------------------------------------------------- Zielgerät
 *
 * 32-Zoll-Touchmonitor im Foyer, hochkant 1080x1920, tagsüber benutzt:
 *
 *   - Nur ein helles Farbschema. Ein dunkler Modus wäre in einer hellen Halle
 *     schlechter lesbar und ist nicht vorgesehen.
 *   - Keine Tastatur, also kein Eingabefeld. Bedient wird ausschließlich durch
 *     Antippen; A-Z-Register und Stockwerkleiste ersetzen die Suche.
 *   - Bei 1080p auf 32 Zoll ist ein CSS-Pixel rund 0,37 mm. Bedienflächen sind
 *     im Kioskmodus mindestens 72 px, also etwa 27 mm groß.
 *
 * ------------------------------------------------------------ Designsprache
 *
 * Corporate Design: Hellgrau #EDEDED, Grün #7AB629 (primär) und #91C736
 * (sekundär), Dunkelgrau #3F3F3C (primär) und #4C4C4A (sekundär). Schrift
 * Muli - seit 2020 unter dem Namen Mulish geführt - in Extra Bold für
 * Headlines und Hervorhebungen, Regular für Sublines und Fließtext.
 *
 * Daraus folgen drei Regeln, die im ganzen Stylesheet gelten:
 *
 *   1. Eckig. Alle Radien sind 0, es gibt keine runden Marken, keine Pillen
 *      und keine weichen Übergänge - also auch keine Verläufe und keine
 *      Schlagschatten. Tiefe entsteht durch Flächen und kräftige Konturen.
 *   2. Kräftig. Konturen sind 2 bis 3 px stark, nie haarfein. Abgesetzt wird
 *      mit Flächen, nicht mit zarten Linien.
 *   3. Grün ist Fläche und Schmucklinie, nie Schrift auf hellem Grund. Auf
 *      Weiß erreicht #7AB629 nur 2,5:1 und auf Hellgrau 2,1:1 - als Text wäre
 *      es unlesbar. Umgekehrt trägt eine grüne Fläche dunkelgraue Schrift
 *      (4,3:1 auf #7AB629, 5,3:1 auf dem sekundären #91C736); kleine Schrift
 *      steht deshalb auf Dunkelgrau mit Weiß (10,6:1).
 */

/* -------------------------------------------------------------- Schriftart */

/*
 * Mulish als variable Schrift, lokal eingebettet: das Terminal soll ohne
 * Internetzugang starten. Zwei Schnitte genügen der Designsprache - Regular
 * für Fließtext, Extra Bold für Headlines und Hervorhebungen.
 */
@font-face {
	font-family: "Mulish";
	src: url("../fonts/mulish-latin.woff2") format("woff2");
	font-weight: 400 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Mulish";
	src: url("../fonts/mulish-latin-ext.woff2") format("woff2");
	font-weight: 400 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ Tokens */

:root {
	color-scheme: light;

	/* Flächen */
	--bg: #EDEDED;
	--bg-sunken: #EDEDED;
	--surface: #FFFFFF;
	--surface-2: #EDEDED;
	--surface-3: #EDEDED;

	/* Konturen - kräftig, nie haarfein */
	--border: #3F3F3C;
	--border-strong: #3F3F3C;
	--divider: #EDEDED;
	--line-width: 2px;
	--rule-width: 4px;          /* grüne Schmucklinie */

	/* Schrift. Die Abstufung läuft über Schnitt und Größe, nicht über blasses
	   Grau - das hält den Kontrast hoch, wie es die Designsprache verlangt. */
	--text: #3F3F3C;
	--text-soft: #4C4C4A;
	--text-muted: #4C4C4A;

	/* Grün: Fläche und Linie. --accent-contrast ist die Schrift darauf. */
	--accent: #7AB629;          /* Linien, Schmucklinien, Signalbalken */
	--accent-fill: #91C736;     /* Flächen, die Schrift tragen (5,3:1 mit #3F3F3C) */
	--accent-2: #91C736;
	--accent-hover: #91C736;
	--accent-soft: #EDEDED;
	--accent-line: #7AB629;
	--accent-contrast: #3F3F3C;

	--neutral-soft: #EDEDED;

	--ring: #3F3F3C;

	/* Warnfarbe. Kein Bestandteil des Corporate Designs, sondern ein rein
	   funktionales Signal für löschende Aktionen in der Verwaltung. */
	--danger: #A32B22;
	--danger-hover: #8A2119;
	--danger-text: #A32B22;
	--danger-contrast: #FFFFFF;

	/* Keine Schlagschatten: Tiefe kommt aus Flächen und Konturen. */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;

	/* Eckig, kantig - keine Rundungen */
	--radius-xs: 0;
	--radius-sm: 0;
	--radius: 0;
	--radius-lg: 0;
	--radius-xl: 0;

	--gap: clamp(0.75rem, 1.1vw, 1.15rem);
	--pad: clamp(1rem, 1.9vw, 1.75rem);

	--topbar-height: 4.5rem;
	--tap: 3rem;

	--font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

	--ease: cubic-bezier(0.2, 0.8, 0.3, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Kioskgrößen. Alles, was mit dem Finger getroffen werden muss, wächst hier;
 * die Verwaltung im Browser bleibt bei den Grundwerten oben.
 */
body.kiosk {
	--tap: 4.5rem;            /* 72 px ~ 27 mm auf dem Zielgerät */
	--topbar-height: 6.5rem;
	--gap: 1rem;
	--pad: 1.75rem;
	--line-width: 3px;
	--rule-width: 5px;

	font-size: 1.25rem;       /* 20 px Grundschrift */
}

/* ------------------------------------------------------------------- Basis */

*, *::before, *::after { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;               /* Kiosk: die Seite selbst scrollt nie */
	overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Kein blaues Aufblitzen und keine Textmarkierung beim Tippen */
body.kiosk {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}
body.kiosk button { touch-action: manipulation; }

:focus-visible {
	outline: 3px solid var(--text);
	outline-offset: 2px;
}

/* Bildlaufleisten: eckig und kräftig, am Terminal breiter */
* {
	scrollbar-width: auto;
	scrollbar-color: var(--text-soft) var(--bg);
}
*::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--text-soft); }
body.kiosk *::-webkit-scrollbar { width: 18px; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------- Kopfzeile */

.topbar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--gap);
	min-height: var(--topbar-height);
	padding: 0.7rem var(--pad);
	background: var(--surface);
	/* die grüne Schmucklinie schließt die Kopfzeile ab */
	border-bottom: var(--rule-width) solid var(--accent);
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.4rem 0;
	text-align: start;
}

/* Dunkelgraue Fläche, weißes "GEO", grüne "1" - kräftig und kontrastreich */
.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	padding: 0.5rem 0.7rem;
	background: var(--text);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}
.brand-mark b { color: var(--accent-2); font-weight: 800; }
.kiosk .brand-mark { min-width: 4.5rem; padding: 0.7rem 0.9rem; font-size: 1.25rem; }

.brand-text { display: grid; gap: 0.05rem; }
.brand-title {
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.15;
}
.kiosk .brand-title { font-size: 1.4rem; }

.brand-claim {
	color: var(--text-soft);
	font-size: 0.8em;
	font-weight: 400;
}

/*
 * "Zum Anfang" ist der Ausweg, wenn sich jemand verlaufen hat, und der
 * häufigste Griff beim Nutzerwechsel. Entsprechend groß und kantig.
 */
.homebutton {
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: var(--tap);
	padding: 0 1.75rem;
	border: var(--line-width) solid var(--text);
	background: var(--surface);
	color: var(--text);
	font-size: 1.1rem;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.homebutton svg {
	width: 1.5rem; height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: square;
	stroke-linejoin: miter;
}
.homebutton:hover, .homebutton:active { background: var(--accent-fill); }

/* Sprachumschalter: zwei kantige Segmente */

.langswitch {
	display: flex;
	gap: var(--line-width);
	padding: var(--line-width);
	border: var(--line-width) solid var(--text);
	background: var(--text);
}
.langswitch button {
	min-width: 3rem;
	min-height: calc(var(--tap) - 0.75rem);
	padding: 0 0.9rem;
	border: 0;
	background: var(--surface);
	color: var(--text);
	font-weight: 800;
	font-size: 0.9em;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.langswitch button[aria-pressed="true"] {
	background: var(--accent-fill);
	color: var(--accent-contrast);
}
.kiosk .langswitch button { min-width: 5rem; min-height: 3.75rem; font-size: 1.15rem; }

/* ------------------------------------------------------------------ Layout */

.layout {
	display: grid;
	grid-template-columns: minmax(21rem, 30rem) minmax(0, 1fr);
	gap: var(--gap);
	min-height: 0;
	padding: var(--gap) var(--pad);
}

/*
 * Der Monitor hängt hochkant (1080 breit, 1920 hoch). Für zwei Spalten
 * nebeneinander ist das zu schmal, deshalb füllt das Verzeichnis die ganze
 * Breite und die Detailansicht kommt als Vollbild darüber. Das ist auch das
 * vertrautere Muster: eine Sache zur Zeit, ein großer Weg zurück.
 */
.kiosk .layout { grid-template-columns: minmax(0, 1fr); }

/* feste Höhe, damit die Detailansicht exakt darunter ansetzen kann */
.kiosk .topbar { height: var(--topbar-height); }

.kiosk .detail {
	position: fixed;
	inset: var(--topbar-height) 0 0;
	z-index: 15;
	border: 0;
	transform: translateY(100%);
	transition: transform 0.24s var(--ease-out);
}
body.kiosk.has-detail .detail { transform: none; }
body.kiosk:not(.has-detail) .detail { pointer-events: none; }

.browse,
.detail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border: var(--line-width) solid var(--text);
	background: var(--surface);
	overflow: hidden;
}

/* -------------------------------------------------------- Reiter und Register */

.tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--line-width);
	padding: var(--line-width);
	background: var(--text);       /* die Fugen zwischen den Reitern */
}

.tabs button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--tap);
	padding: 0 0.6rem;
	border: 0;
	background: var(--surface);
	color: var(--text);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.tabs button:hover { background: var(--bg); }
.tabs button[aria-selected="true"] {
	background: var(--accent-fill);
	color: var(--accent-contrast);
}
.kiosk .tabs button { font-size: 1.3rem; }

/* Zähler neben der Reiterbeschriftung - zeigt den Bestand ohne Umweg */
.tab-count {
	min-width: 1.7rem;
	padding: 0.1rem 0.4rem;
	background: var(--text);
	color: #FFFFFF;
	font-size: 0.7em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
.tabs button[aria-selected="true"] .tab-count {
	background: var(--surface);
	color: var(--text);
}

/*
 * Das Register ersetzt das Suchfeld. Es steht an der auffälligsten Stelle und
 * bricht um, statt seitlich zu scrollen: alle Buchstaben müssen gleichzeitig
 * sichtbar sein, sonst sucht man den Buchstaben statt den Namen.
 */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.75rem;
	border-top: var(--line-width) solid var(--text);
	background: var(--bg);
}
.filters:empty { display: none; }

.chip {
	min-height: 2.5rem;
	padding: 0 0.95rem;
	border: var(--line-width) solid var(--text);
	background: var(--surface);
	color: var(--text);
	font-size: 0.88em;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.chip:hover { background: var(--bg); }
.chip.is-active {
	background: var(--accent-fill);
	color: var(--accent-contrast);
}

.kiosk .filters { gap: 0.5rem; padding: 0.85rem; }
.kiosk .chip { min-height: 3.75rem; font-size: 1.2rem; }

/* A-Z: gleich große Tasten in einem Raster, alle gleichzeitig sichtbar */
.kiosk .filters-letters { display: grid; grid-template-columns: repeat(10, 1fr); }
.kiosk .filters-letters .chip { min-height: 4.5rem; padding: 0; font-size: 1.5rem; }
.kiosk .filters-floors .chip { min-width: 6rem; }

/* -------------------------------------------------------------- Ergebnisse */

.results {
	flex: 1;
	min-height: 0;
	padding: 0 0.6rem 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scroll-padding-block-start: 3rem;
}
.kiosk .results { padding: 0 0.85rem 1.5rem; }

/* Zwischenüberschrift mit grüner Schmucklinie */
.group {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 0.5rem 0.5rem;
	background: var(--surface);
	color: var(--text);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.group::after {
	content: "";
	flex: 1;
	height: var(--rule-width);
	background: var(--accent);
}
.kiosk .group { font-size: 0.9rem; }

.list { margin: 0; padding: 0; list-style: none; }

.row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.55rem 0.7rem;
	border: 0;
	border-bottom: var(--line-width) solid var(--divider);
	background: var(--surface);
	cursor: pointer;
	text-align: start;
	transition: background 0.1s var(--ease);
}
.row:hover { background: var(--bg); }
.row:active { background: var(--accent-fill); }

.kiosk .row {
	min-height: 5rem;
	gap: 1rem;
	padding: 0.6rem 0.85rem;
}

/*
 * Ausgewählte Zeile: kräftiger grüner Balken plus hellgraue Fläche. Der Name
 * bleibt dunkelgrau - grüne Schrift wäre auf hellem Grund nicht lesbar.
 */
.row.is-selected {
	background: var(--bg);
	box-shadow: inset 8px 0 0 var(--accent);
}
.row.is-selected .row-title { font-weight: 800; }

/* Initialen statt Platzhalterbild - hilft beim Scannen langer Namenslisten */
.row-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem; height: 2.4rem;
	background: var(--text);
	color: #FFFFFF;
	font-size: 0.78rem;
	font-weight: 800;
}
.row.is-selected .row-avatar { background: var(--text); }
.kiosk .row-avatar { width: 3.25rem; height: 3.25rem; font-size: 1rem; }

.row-main { display: grid; flex: 1; min-width: 0; gap: 0.1rem; }
.row-title {
	font-weight: 800;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row-sub {
	color: var(--text-soft);
	font-size: 0.83em;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kiosk .row-title { font-size: 1.4rem; }
.kiosk .row-sub { font-size: 1.05rem; }

/* Raumnummer als grüne Fläche mit dunkler Schrift */
.row-badge {
	flex: 0 0 auto;
	min-width: 3.5rem;
	padding: 0.35rem 0.6rem;
	background: var(--accent-fill);
	color: var(--accent-contrast);
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	text-align: center;
}
.row-badge.is-muted {
	background: var(--bg);
	color: var(--text-soft);
	box-shadow: inset 0 0 0 var(--line-width) var(--text-soft);
}
.kiosk .row-badge { min-width: 5.5rem; padding: 0.45rem 0.7rem; font-size: 1.35rem; }

.row-chevron {
	flex: 0 0 auto;
	color: var(--text);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
}
.kiosk .row-chevron { font-size: 2rem; }

.list-cards .row { border-bottom: var(--line-width) solid var(--divider); }

/*
 * Räume als Kachelraster: die Raumnummer ist das, wonach am Gebäude gesucht
 * wird. Als Kachel steht sie groß da und ist ein sicheres Ziel für den Daumen.
 */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.tile {
	position: relative;
	display: grid;
	align-content: center;
	gap: 0.2rem;
	width: 100%;
	min-height: 5rem;
	padding: 0.6rem 0.7rem;
	border: var(--line-width) solid var(--text);
	background: var(--surface);
	cursor: pointer;
	text-align: start;
	transition: background 0.1s var(--ease);
}
.tile:hover { background: var(--bg); }
.tile.is-selected { background: var(--accent-fill); }

.tile-number {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.tile-sub {
	color: var(--text-soft);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tile.is-selected .tile-sub { color: var(--accent-contrast); }

/* Kleine Zahl oben rechts: wie viele Personen im Raum sitzen. Kleine Schrift
   steht auf Dunkelgrau, nicht auf Grün - dort wäre der Kontrast zu knapp. */
.tile-count {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	min-width: 1.7rem;
	height: 1.7rem;
	padding: 0 0.35rem;
	background: var(--text);
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.kiosk .grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; }
.kiosk .tile { min-height: 6.5rem; padding: 0.75rem 0.9rem; }
.kiosk .tile-number { font-size: 2rem; }
.kiosk .tile-sub { font-size: 0.95rem; }
.kiosk .tile-count { min-width: 2.2rem; height: 2.2rem; font-size: 1rem; }

/* Ladeplatzhalter: flache Flächen, kein Verlauf */
.skeleton {
	height: 3.5rem;
	margin: 0.4rem 0;
	background: var(--bg);
	animation: blink 1.4s infinite steps(1, end);
}
.kiosk .skeleton { height: 5rem; margin: 0.5rem 0; }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.45; } }

.empty {
	display: grid;
	gap: 0.5rem;
	padding: 3.5rem 1.5rem;
	text-align: center;
}
.empty-title { margin: 0; font-size: 1.1em; font-weight: 800; }
.empty-hint { margin: 0; color: var(--text-soft); font-size: 0.9em; }

/* ------------------------------------------------------------- Detailteil */

.detail-inner {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5rem;
	height: 100%;
	padding: 2rem;
	text-align: center;
}
.placeholder-icon {
	width: 3.5rem; height: 3.5rem;
	margin-bottom: 1rem;
	padding: 1rem;
	box-sizing: content-box;
	background: var(--bg);
	fill: none;
	stroke: var(--text);
	stroke-width: 2;
}
.placeholder-title { margin: 0; font-size: 1.35em; font-weight: 800; }
.placeholder-hint { margin: 0; max-width: 34ch; color: var(--text-soft); font-size: 0.92em; }

.kiosk .placeholder-icon { width: 5rem; height: 5rem; }
.kiosk .placeholder-title { font-size: 2rem; }
.kiosk .placeholder-hint { font-size: 1.25rem; max-width: 30ch; }

.card { padding: 0 0 var(--pad); }

/* Kopf der Detailkarte: flache hellgraue Fläche, unten grün abgeschlossen */
.card-head {
	padding: var(--pad);
	background: var(--bg);
	border-bottom: var(--rule-width) solid var(--accent);
}

/*
 * Der Weg zurück. Beschriftet statt nur ein Kreuz: am Terminal muss ohne
 * Vorwissen erkennbar sein, wie man die Detailansicht wieder verlässt.
 */
.card-back {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	margin-bottom: 1.5rem;
	padding: 0 1.5rem 0 1.15rem;
	border: var(--line-width) solid var(--text);
	background: var(--surface);
	color: var(--text);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.card-back span { font-size: 1.5em; line-height: 0.8; }
.card-back:hover, .card-back:active { background: var(--accent-fill); }
.kiosk .card-back { font-size: 1.2rem; }

/* Auszeichnung als grüne Fläche - grüne Schrift wäre hier nicht lesbar */
.card-eyebrow {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 0.7rem;
	background: var(--accent-fill);
	color: var(--accent-contrast);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kiosk .card-eyebrow { font-size: 1rem; padding: 0.3rem 0.9rem; }

.card-number {
	margin: 0.4rem 0 0;
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.kiosk .card-number { font-size: 5.5rem; }

.card-title {
	margin: 0.4rem 0 0;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
}
.kiosk .card-title { font-size: 2.75rem; }

.card-sub {
	margin: 0.5rem 0 0;
	color: var(--text-soft);
	font-size: 0.95em;
	font-weight: 400;
}
.kiosk .card-sub { font-size: 1.3rem; }

.card-block { padding: 1.75rem var(--pad) 0; }

/* Abschnittstitel mit grüner Schmucklinie */
.card-block-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
}
.card-block-title::after {
	content: "";
	flex: 1;
	height: var(--rule-width);
	background: var(--accent);
}
.kiosk .card-block-title { font-size: 1rem; }

.people { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.person {
	display: grid;
	gap: 0.15rem;
	padding: 0.7rem 0.85rem;
	background: var(--bg);
}
.person.is-highlight { box-shadow: inset 8px 0 0 var(--accent); }
.person-name { font-weight: 800; }
.person-meta { color: var(--text-soft); font-size: 0.86em; font-weight: 400; }

.kiosk .person { padding: 0.9rem 1.1rem; }
.kiosk .person-name { font-size: 1.35rem; }
.kiosk .person-meta { font-size: 1.05rem; }

/* In der Einrichtungsansicht führt jede Person zu ihrem Raum */
.person-button {
	position: relative;
	display: grid;
	gap: 0.15rem;
	width: 100%;
	border: 0;
	background: none;
	text-align: start;
	cursor: pointer;
}
.people-tappable .person { padding: 0; transition: background 0.1s var(--ease); }
.people-tappable .person-button { padding: 0.7rem 0.85rem; }
.kiosk .people-tappable .person-button { min-height: var(--tap); padding: 0.9rem 3.5rem 0.9rem 1.1rem; }
.people-tappable .person:hover { background: var(--accent-fill); }

.person-go {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 1rem;
	translate: 0 -50%;
	color: var(--text);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}

/* Wegbeschreibung: nummerierte Schritte an grüner Führungslinie */
.steps {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.steps li {
	position: relative;
	display: grid;
	grid-template-columns: 2rem 1fr;
	align-items: start;
	gap: 0.85rem;
	padding-bottom: 0.85rem;
	counter-increment: step;
}
.steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 2rem; height: 2rem;
	background: var(--text);
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.steps li::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(1rem - var(--rule-width) / 2);
	top: 2rem;
	bottom: 0;
	width: var(--rule-width);
	background: var(--accent);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }

.kiosk .steps li {
	grid-template-columns: 2.75rem 1fr;
	gap: 1.1rem;
	padding-bottom: 1.1rem;
	font-size: 1.3rem;
}
.kiosk .steps li::before { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.kiosk .steps li::after { inset-inline-start: calc(1.375rem - var(--rule-width) / 2); top: 2.75rem; }

.muted { color: var(--text-soft); }
.kiosk .muted { font-size: 1.15rem; }

/* Karte und Foto nebeneinander - im Hochformat ist dafür genug Breite */
.card-body { display: grid; }

.card-media {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--gap);
	padding: 1.75rem var(--pad) 0;
}
/* Der Lageplan bekommt mehr Breite als das Foto: er trägt die Wegfindung. */
.kiosk .card-media {
	grid-template-columns: 1.25fr 1fr;
	align-items: start;
}

.media-item { margin: 0; }
.media-item img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--line-width) solid var(--text);
	background: var(--bg);
}
.media-item figcaption {
	margin-top: 0.5rem;
	color: var(--text);
	font-size: 0.82em;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.media-item.is-empty {
	display: grid;
	place-items: center;
	min-height: 9.5rem;
	border: var(--line-width) dashed var(--text-soft);
	background: var(--bg);
	color: var(--text-soft);
	font-size: 0.85em;
	text-align: center;
}
.media-item.is-empty figcaption { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.kiosk .media-item figcaption { font-size: 1rem; }

/* -------------------------------------------------------------- Fußzeile */

.statusbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding: 0.6rem var(--pad) max(0.6rem, env(safe-area-inset-bottom));
	border-top: var(--line-width) solid var(--text);
	background: var(--surface);
	color: var(--text-soft);
	font-size: 0.8em;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	margin-top: 0.75rem;
	padding: 0 1.5rem;
	border: var(--line-width) solid var(--text);
	background: var(--accent-fill);
	color: var(--accent-contrast);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.12s var(--ease);
}
.button:hover { background: var(--accent); }

/* ------------------------------------------------------------ Kioskmodus */

.idle {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	background: var(--text);
	color: #FFFFFF;
}
.idle[hidden] { display: none; }

.idle-card { display: grid; justify-items: center; text-align: center; }
.idle-mark {
	margin-bottom: 2rem;
	padding: 0.8rem 1.2rem;
	background: var(--accent-fill);
	color: var(--accent-contrast);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}
.idle-mark b { font-weight: 800; }
.idle-title { margin: 0; font-size: 4rem; font-weight: 800; letter-spacing: -0.02em; }
.idle-hint {
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: var(--rule-width) solid var(--accent);
	font-size: 1.6rem;
	font-weight: 400;
	animation: pulse 2.5s infinite steps(1, end);
}

@keyframes pulse { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.5; } }

/* -------------------------------------------------------- Kleinere Fenster */

/*
 * Das Terminal ist fest 1080x1920 im Hochformat. Diese Regeln sind nur dafür
 * da, dass die Anzeige beim Entwickeln am Notebook und auf einem Telefon
 * benutzbar bleibt - für das Zielgerät ändern sie nichts.
 */
@media (max-width: 45rem) {
	.kiosk { font-size: 1rem; --tap: 3.25rem; --topbar-height: 4.5rem; --pad: 1rem; }
	.kiosk .filters-letters { grid-template-columns: repeat(7, 1fr); }
	.kiosk .filters-letters .chip { min-height: 3rem; font-size: 1.1rem; }
	.kiosk .homebutton span { display: none; }
	.kiosk .homebutton { padding: 0 1rem; }
	.kiosk .brand-claim { display: none; }
	.kiosk .card-number { font-size: 3.5rem; }
	.kiosk .card-title { font-size: 2rem; }
	.kiosk .row-title { font-size: 1.15rem; }
	.kiosk .tabs button { font-size: 1.05rem; }
}

/* Notebook im Querformat: das Verzeichnis daneben statt darunter */
@media (min-width: 75rem) and (orientation: landscape) {
	.kiosk .layout { grid-template-columns: 40rem minmax(0, 1fr); }
	.kiosk .detail {
		position: static;
		border: var(--line-width) solid var(--text);
		transform: none;
	}
	body.kiosk:not(.has-detail) .detail { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}