/* ---------------------------------------------------------------------------
   Lageplan – Karte
   Aufbau wie eine Karten-App: Vollbild-Karte, darüber schwebende Bedienung,
   links (auf dem Telefon unten) ein Panel für Suche, Detail und Weg.
   Bewusst hell gehalten – die Karte selbst soll das Farbigste im Bild sein.
--------------------------------------------------------------------------- */

:root {
	--rot: #C1002B;
	--rot-dunkel: #9E0023;
	--grau: #A9AAAC;
	--tinte: #16181C;
	--gedaempft: #5B6068;
	--linie: #E3E5E8;
	--flaeche: #FFFFFF;
	--grund: #F4F5F7;
	--blau: #1D6FB8;
	--gelb: #D97706;
	--gruen: #2E8B57;
	--rund: 12px;
	--schatten: 0 2px 8px rgba(16, 18, 22, .10), 0 8px 28px rgba(16, 18, 22, .10);
	--kopf-hoehe: 60px;
	--panel-breite: 360px;
	--schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

body.karte-seite {
	font-family: var(--schrift);
	color: var(--tinte);
	background: var(--grund);
	-webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }

/*
 * Die Spalten stehen auf `minmax(0, 1fr)`, nicht auf `1fr`.
 *
 * `1fr` heißt „mindestens so breit wie der breiteste Inhalt“. Die Tagesleiste
 * einer Messe mit 30 Tagen ist über 2000 px breit – mit `1fr` wurde die ganze
 * Seite auf dem Telefon so breit: Die Karte lag mittig in 2028 px, also
 * außerhalb des Bildschirms, und mit ihr Standort- und Zoomknöpfe. Zu sehen
 * war nur eine graue Fläche. Mit drei Testtagen fiel es nie auf.
 */
.app {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: var(--panel-breite) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "kopf kopf" "panel buehne";
}

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

.kopf {
	grid-area: kopf;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 10px 14px;
	padding-top: max(10px, env(safe-area-inset-top));
	padding-left: max(14px, env(safe-area-inset-left));
	padding-right: max(14px, env(safe-area-inset-right));
	background: var(--flaeche);
	border-bottom: 1px solid var(--linie);
	z-index: 40;
}

.kopf-menue { display: none; }

/* Der Rückweg zur Übersicht. Auf dem Telefon gab es vorher keinen: Der
   Seitenfuß mit „Übersicht“ und „Anmelden“ ist dort ausgeblendet. */
.kopf-heim {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-left: -6px;
	border-radius: 10px;
	color: var(--tinte);
}
.kopf-heim:hover { background: var(--grund); }
.kopf-heim svg { width: 22px; height: 22px; fill: currentColor; }

.kopf-titel {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	/* Eine Messe kann 30 Tage dauern: Die Tagesleiste daneben würde den Namen
	   sonst auf „Inno…“ zusammenquetschen. Sie scrollt lieber. */
	min-width: 150px;
	flex: 0 1 auto;
}
.kopf-titel strong {
	font-size: 15px;
	font-weight: 650;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kopf-titel span {
	font-size: 12px;
	color: var(--gedaempft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tageswahl fürs Telefon – auf dem großen Bildschirm stehen dort die Knöpfe. */
.kopf-tagwahl { display: none; flex: none; position: relative; }
.kopf-tagwahl select {
	appearance: none;
	-webkit-appearance: none;
	/* 16 px: Darunter zoomt Safari auf dem iPhone beim Antippen die ganze
	   Seite heran – und zoomt danach nicht wieder heraus. */
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--tinte);
	background: var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235B6068' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center / 20px;
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: 8px 32px 8px 14px;
	max-width: 52vw;
	cursor: pointer;
}
.kopf-tagwahl select:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.kopf-tagwahl.heute select { background-color: var(--rot); border-color: var(--rot); color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }

/* Die Suche sitzt in der Schublade bzw. oben in der Spalte. */
.kopf-suche {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	margin: 12px 12px 4px;
	background: var(--grund);
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: 0 10px;
	transition: border-color .15s, box-shadow .15s;
}
.kopf-suche:focus-within {
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgba(193, 0, 43, .12);
}
.kopf-suche svg { width: 18px; height: 18px; fill: var(--gedaempft); flex: none; }
.kopf-suche input {
	flex: 1;
	border: 0;
	background: none;
	padding: 9px 8px;
	/* 16 px, nicht weniger: Bei kleinerer Schrift zoomt Safari auf dem iPhone
	   beim Antippen die ganze Seite heran und bleibt dort stehen – die Karte
	   ist danach halb aus dem Bild. */
	font-size: 16px;
	outline: none;
	min-width: 0;
}
.kopf-suche input::-webkit-search-cancel-button { display: none; }
#suche-leeren {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--gedaempft);
	cursor: pointer;
	padding: 0 4px;
}

.kopf-tage {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-left: auto;
	flex: 0 1 auto;
	min-width: 0;
}
.kopf-tage::-webkit-scrollbar { display: none; }

.tag-chip {
	border: 1px solid var(--linie);
	background: var(--flaeche);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.tag-chip:hover { border-color: var(--grau); }
.tag-chip.aktiv {
	background: var(--rot);
	border-color: var(--rot);
	color: #fff;
	font-weight: 600;
}
.tag-chip .zahl { opacity: .65; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ---------- Panel ---------- */

.panel {
	grid-area: panel;
	background: var(--flaeche);
	border-right: 1px solid var(--linie);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	z-index: 30;
}
.panel-griff { display: none; }
.panel-inhalt {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

.panel-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}
.panel-kopf h2 { font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); font-weight: 650; }
.panel-kopf .zurueck {
	border: 1px solid var(--linie);
	background: var(--flaeche);
	border-radius: 8px;
	padding: 5px 9px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
}
.panel-kopf .zurueck:hover { border-color: var(--grau); }

.leer {
	color: var(--gedaempft);
	font-size: 14px;
	line-height: 1.5;
	padding: 14px 4px;
}
.leer strong { display: block; color: var(--tinte); margin-bottom: 4px; }

/* Hinweis der Disposition über der Liste */
.ansage {
	background: #FFF8E6;
	border: 1px solid #F3E2B4;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
}

/* Trefferliste */
.treffer {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	text-align: left;
	border: 1px solid transparent;
	border-bottom-color: var(--linie);
	background: none;
	padding: 10px 8px;
	cursor: pointer;
	border-radius: 8px;
}
.treffer:hover { background: var(--grund); }
.treffer.aktiv { background: rgba(193, 0, 43, .06); border-color: rgba(193, 0, 43, .25); }
.treffer .fahne {
	flex: none;
	width: 30px; height: 30px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	background: var(--grau);
}
.treffer .text { min-width: 0; flex: 1; }
.treffer .name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.treffer .unten { display: block; font-size: 12px; color: var(--gedaempft); margin-top: 2px; line-height: 1.4; }
.treffer .offen { color: var(--gelb); font-weight: 600; }

/* Detail */
.detail h3 { font-size: 18px; margin: 2px 0 6px; line-height: 1.25; }
.detail .kat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 999px;
	color: #fff;
	background: var(--grau);
}
.detail .ort { font-size: 13px; color: var(--gedaempft); margin: 8px 0; }
.detail .notiz {
	font-size: 13px;
	background: var(--grund);
	border-radius: 8px;
	padding: 9px 10px;
	margin: 10px 0;
	line-height: 1.5;
}

.schichten { margin: 12px 0 4px; }
.schichten h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); margin: 0 0 6px; }
.schicht {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 7px 0;
	border-top: 1px solid var(--linie);
	font-size: 14px;
}
.schicht .zeit { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; min-width: 88px; }
.schicht .wer { min-width: 0; }
.schicht .firma { display: block; color: var(--gedaempft); font-size: 12px; }
.schicht.ist-offen .wer { color: var(--gelb); font-weight: 600; }

.tasten { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.taste {
	flex: 1 1 auto;
	border: 1px solid var(--linie);
	background: var(--flaeche);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.taste:hover { border-color: var(--grau); }
.taste.stark { background: var(--rot); border-color: var(--rot); color: #fff; }
.taste.stark:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.taste svg { width: 17px; height: 17px; fill: currentColor; }

/* Weg */
.weg-kopf {
	display: flex;
	gap: 14px;
	align-items: baseline;
	background: var(--grund);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
}
.weg-kopf .gross { font-size: 22px; font-weight: 700; line-height: 1; }
.weg-kopf .klein { font-size: 12px; color: var(--gedaempft); }
.weg-schritt {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--linie);
	font-size: 14px;
	line-height: 1.45;
}
.weg-schritt .nr {
	flex: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--rot);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.weg-hinweis {
	font-size: 13px;
	color: var(--gedaempft);
	background: #FFF8E6;
	border: 1px solid #F3E2B4;
	border-radius: 8px;
	padding: 9px 10px;
	margin: 10px 0;
	line-height: 1.5;
}
.schalter {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--gedaempft);
	margin: 10px 0 0;
	cursor: pointer;
}

/* ---------- Bühne (Karte) ---------- */

.buehne {
	grid-area: buehne;
	position: relative;
	overflow: hidden;
	background: #EAECEF;
	touch-action: none;
	cursor: grab;
	user-select: none;
}
.buehne.zieht { cursor: grabbing; }

.welt {
	position: absolute;
	top: 0; left: 0;
	transform-origin: 0 0;
}

/*
 * `will-change: transform` nur WÄHREND einer Bewegung.
 *
 * Dauerhaft gesetzt legt der Browser die ganze Karte in eine eigene GPU-Ebene:
 * Er rastert sie einmal und skaliert danach nur noch dieses fertige Bild. Beim
 * Hineinzoomen wird deshalb alles unscharf – auch die Beschriftung der Pins,
 * die eigentlich gegengerechnet wird und gestochen scharf bleiben müsste, und
 * sogar die Geländekarte, die als SVG gar nicht unscharf werden kann.
 *
 * Beim Schieben und Zoomen ist die eigene Ebene trotzdem richtig – ohne sie
 * ruckelt es. Also: an, solange die Hand auf der Karte ist, und danach wieder
 * aus, damit der Browser einmal scharf neu zeichnet.
 */
.buehne.bewegt .welt { will-change: transform; }
.grundbild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}
/* Die Grundrisse sind beim Bauen schon auf Wände, Türen, Treppen und Stützen
   reduziert (werkzeug/grundrisse-bauen.py). Deshalb genügt hier ein leichtes
   Zurücknehmen, damit die Pins darüber die Hauptrolle behalten. */
.welt.ist-grundriss .grundbild { filter: contrast(.92) brightness(1.02); }

.zeichnung {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
/* Wie im Editor: Die Marker-Ebene darf nur dort Klicks annehmen, wo wirklich
   ein Pin sitzt – sonst käme kein Klick mehr bei den Hallenflächen an, die als
   SVG darunter liegen. */
.marker { position: absolute; inset: 0; pointer-events: none; }
.marker > * { pointer-events: auto; }

/* Hallenflächen auf dem Geländeplan */
.halle {
	fill: rgba(120, 126, 134, .16);
	stroke: rgba(90, 96, 104, .55);
	stroke-width: .12;
	cursor: pointer;
	transition: fill .15s;
}
.halle:hover { fill: rgba(120, 126, 134, .3); }
.halle.belegt {
	fill: rgba(193, 0, 43, .2);
	stroke: rgba(193, 0, 43, .75);
}
.halle.belegt:hover { fill: rgba(193, 0, 43, .34); }
.halle.hervor {
	fill: rgba(193, 0, 43, .38);
	stroke: var(--rot);
	stroke-width: .25;
}

/* Route */
.route-linie {
	fill: none;
	stroke: var(--rot);
	stroke-width: .5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .9;
	filter: drop-shadow(0 0 .35px rgba(255,255,255,.9));
}
.route-luft {
	fill: none;
	stroke: var(--rot);
	stroke-width: .45;
	stroke-dasharray: 1.2 1.1;
	stroke-linecap: round;
	opacity: .75;
}

/* ---------- Pins ---------- */
/* Pins skalieren gegen den Zoom, damit sie immer gleich groß aussehen.
   --ps ist der Kehrwert des Zooms und wird beim Zeichnen gesetzt. */

.pin {
	position: absolute;
	transform: translate(-50%, -100%) scale(var(--ps, 1));
	transform-origin: 50% 100%;
	cursor: pointer;
	z-index: 2;
	/* Ein Pin ist ein <button>. Ohne diese Zeile zeichnet der Browser seinen
	   eigenen Knopf dahinter – auf dem Telefon stand hinter jedem Pin ein
	   weißer Kasten mit Rahmen, und dicht beieinander wurde daraus ein Stapel
	   Karteikarten. */
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}
.pin-kopf {
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 13px 13px 13px 3px;
	background: var(--grau);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.35);
	border: 1.5px solid #fff;
	white-space: nowrap;
	transform: rotate(-45deg);
}
.pin-kopf > span { transform: rotate(45deg); display: block; line-height: 1; }
.pin.offen .pin-kopf { background: var(--gelb); }
.pin.gewaehlt { z-index: 5; }
.pin.gewaehlt .pin-kopf {
	box-shadow: 0 0 0 3px rgba(193, 0, 43, .35), 0 2px 6px rgba(0,0,0,.4);
	transform: rotate(-45deg) scale(1.18);
}
.pin.blass { opacity: .3; }
.pin-fahne {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 8px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--schatten);
	pointer-events: none;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sonderpin .pin-kopf {
	background: var(--flaeche);
	color: var(--tinte);
	border-radius: 13px;
	border: 1.5px solid var(--linie);
	transform: none;
	font-size: 14px;
}
.sonderpin .pin-kopf > span { transform: none; }

/* Hallen-Zähler auf dem Geländeplan */
.zaehler {
	position: absolute;
	transform: translate(-50%, -50%) scale(var(--ps, 1));
	background: var(--rot);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
	cursor: pointer;
	white-space: nowrap;
}
.zaehler.leer { background: var(--flaeche); color: var(--gedaempft); border-color: var(--linie); font-weight: 600; }
/* Der Zähler führt in die Halle – er liegt vor den Pins. Sonst verdeckt ihn
   ein Außenposten, der zufällig auf der Halle sitzt, und der Weg hinein ist
   nicht mehr anklickbar. */
.zaehler { z-index: 4; }

/* Standort (GPS) */
.standort {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 6;
}
.standort .genauigkeit {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(29, 111, 184, .16);
	border: 1px solid rgba(29, 111, 184, .35);
}
.standort .punkt {
	position: absolute;
	left: 50%; top: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--blau);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.standort .keil {
	position: absolute;
	left: 50%; top: 50%;
	width: 0; height: 0;
	margin: -22px 0 0 -9px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 14px solid var(--blau);
	transform-origin: 50% 22px;
	opacity: .85;
}

/* ---------- Bereichsfilter (Supervisor-Sicht) ---------- */

/* Die Leiste über der Trefferliste: „Alle“ und je ein Bereich aus dem
   eingelesenen Einsatzplan. Sie steht bewusst im Panel und nicht über der
   Karte – dort wäre sie auf dem Telefon der dritte Balken über einem ohnehin
   schmalen Streifen. */
.bereiche {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px 2px;
}
.b-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--linie);
	background: var(--flaeche);
	color: var(--tinte);
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	max-width: 100%;
}
.b-chip:hover { border-color: var(--grau); }
.b-chip.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.b-chip .zahl {
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	font-weight: 700;
	color: var(--gedaempft);
	background: var(--grund);
	border-radius: 999px;
	padding: 1px 6px;
}
.b-chip.aktiv .zahl { background: rgba(255,255,255,.22); color: #fff; }
.b-chip.nur-sv { margin-left: auto; }

/* Die Positionsnummer aus dem Einsatzplan – vor dem Namen, in Ziffernbreite,
   damit die Liste beim Überfliegen eine Kante hat. */
.treffer .nummer {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--gedaempft);
	background: var(--grund);
	border: 1px solid var(--linie);
	border-radius: 5px;
	padding: 0 5px;
	margin-right: 6px;
}

/* ---------- Ebenen-Umschalter ---------- */

.ebenen {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	max-width: min(60%, 320px);
	z-index: 20;
}
.ebenen-reihe {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(6px);
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: 4px;
	box-shadow: var(--schatten);
}
.ebene-chip {
	border: 0;
	background: none;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var(--gedaempft);
	white-space: nowrap;
}
.ebene-chip:hover { background: var(--grund); color: var(--tinte); }
.ebene-chip.aktiv { background: var(--rot); color: #fff; }
.ebene-chip .zahl {
	display: inline-block;
	margin-left: 6px;
	background: rgba(0,0,0,.1);
	border-radius: 999px;
	padding: 0 6px;
	font-size: 11px;
}
.ebene-chip.aktiv .zahl { background: rgba(255,255,255,.25); }

.zurueck-gelaende {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.94);
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--schatten);
}
.zurueck-gelaende:hover { border-color: var(--grau); }

/* ---------- Knöpfe rechts ---------- */

.knoepfe {
	position: absolute;
	right: 12px;
	bottom: max(12px, env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 20;
}
.knopf {
	width: 42px; height: 42px;
	border-radius: 11px;
	border: 1px solid var(--linie);
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(6px);
	box-shadow: var(--schatten);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--tinte);
}
.knopf:hover { border-color: var(--grau); }
/* `display: grid` oben würde das hidden-Attribut überstimmen. */
.knopf[hidden] { display: none; }
.knopf svg { width: 20px; height: 20px; fill: currentColor; }
.knopf.an { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf.sucht { animation: pulsen 1.2s ease-in-out infinite; }
/* Standort von vornherein unmöglich (etwa ohne https): Der Knopf bleibt
   bedienbar – er erklärt beim Antippen, woran es liegt –, tritt aber zurück. */
.knopf.geht-nicht { opacity: .5; }
@keyframes pulsen { 50% { opacity: .5; } }

/* ---------- Legende ---------- */

.legende {
	position: absolute;
	left: 12px;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 20;
}
.legende-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(6px);
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--schatten);
}
.legende-punkt {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rot), var(--blau));
}
.legende-liste {
	margin-top: 6px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: var(--rund);
	box-shadow: var(--schatten);
	padding: 8px;
	max-height: 44vh;
	overflow-y: auto;
	min-width: 210px;
}
.legende-zeile {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	border: 0;
	background: none;
	padding: 7px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	text-align: left;
}
.legende-zeile:hover { background: var(--grund); }
.legende-zeile .farbe { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.legende-zeile.aus { opacity: .4; }
.legende-zeile .zahl { margin-left: auto; color: var(--gedaempft); font-size: 12px; }

/* ---------- Hinweisleiste ---------- */

.hinweis-leiste {
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translateX(-50%);
	background: var(--tinte);
	color: #fff;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	box-shadow: var(--schatten);
	z-index: 25;
	max-width: 84%;
	text-align: center;
}

.quelle {
	position: absolute;
	right: 62px;
	bottom: 4px;
	margin: 0;
	font-size: 10px;
	color: var(--gedaempft);
	background: rgba(255,255,255,.7);
	padding: 2px 6px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 10;
}

/* ---------- Telefon ----------
   Dort wird die Karte zu 90 % benutzt: im Stehen, mit einer Hand, zwischen
   zwei Hallen. Deshalb:
     – oben nur EINE schmale Zeile (Rückweg, Titel, Tag),
     – die Suche unten in der Schublade, wo der Daumen ist,
     – die Schublade in drei Stufen (zu / halb / ganz), zu ziehen am Griff,
     – Knöpfe und Legende wandern mit der Schublade nach oben,
     – nichts, was man antippen soll, unter 40 px. */

@media (max-width: 780px) {
	.app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas: "kopf" "buehne";
	}

	.kopf {
		gap: 8px;
		padding: 8px 10px;
		padding-top: max(8px, env(safe-area-inset-top));
		padding-left: max(10px, env(safe-area-inset-left));
		padding-right: max(10px, env(safe-area-inset-right));
	}
	.kopf-titel { flex: 1 1 auto; min-width: 0; }
	.kopf-titel strong { font-size: 16px; }
	/* Den Zeitraum der Messe braucht hier niemand – welcher Tag gilt, steht
	   daneben in der Tagesauswahl. Eine Zeile Kopf ist ein Streifen mehr Karte. */
	.kopf-titel span { display: none; }
	.kopf-tage { display: none; }
	.kopf-tagwahl:not([hidden]) { display: block; }

	/* Die Schublade. Wie weit sie offen ist, setzt karte.js (blattSetzen) als
	   Verschiebung in Pixeln – die Stufen hängen an Maßen, die erst im Browser
	   feststehen (Höhe von Suche und Kurzzeile, Kerbe unten am iPhone). Der
	   Wert hier gilt nur, bis das Skript läuft. */
	.panel {
		position: fixed;
		left: 0; right: 0;
		bottom: 0;
		top: calc(var(--kopf-unten, 60px) + 8px);
		border-right: 0;
		border-top: 1px solid var(--linie);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -4px 24px rgba(16, 18, 22, .14);
		transform: translateY(calc(100% - 112px - env(safe-area-inset-bottom)));
		transition: transform .28s cubic-bezier(.2, .8, .2, 1);
		z-index: 50;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.panel.zieht { transition: none; }
	.panel-oben { flex: none; touch-action: none; cursor: grab; }
	.panel-griff { display: grid; place-items: center; height: 22px; }
	.panel-griff span { width: 40px; height: 5px; border-radius: 3px; background: #D3D6DB; }
	.kopf-suche { margin: 0 12px 6px; }
	.kopf-suche input { padding: 11px 8px; }
	.panel-kurz:not([hidden]) { display: flex; }
	/* Offen steht dasselbe ausführlich in der Liste darunter. */
	.panel.offen .panel-kurz { display: none; }
	.panel-inhalt { padding-top: 4px; }

	/* Knöpfe und Legende stehen über der Schublade und fahren mit ihr –
	   sonst liegen sie genau unter dem Daumen, der die Schublade bedient. */
	.knoepfe,
	.legende {
		bottom: calc(var(--blatt, 112px) + 12px);
		transition: bottom .28s cubic-bezier(.2, .8, .2, 1), opacity .2s;
	}
	.app.blatt-zieht .knoepfe,
	.app.blatt-zieht .legende { transition: none; }
	.app.blatt-voll .knoepfe,
	.app.blatt-voll .legende { opacity: 0; pointer-events: none; }
	.knoepfe { right: max(10px, env(safe-area-inset-right)); }
	.legende { left: max(10px, env(safe-area-inset-left)); }
	.knopf { width: 46px; height: 46px; border-radius: 14px; }
	/* Zoomen geht auf dem Telefon mit zwei Fingern (und Doppeltipp). Plus und
	   Minus würden nur den schmalen Streifen Karte zustellen. */
	#knopf-plus, #knopf-minus { display: none; }
	.legende-knopf { padding: 11px 16px; font-size: 14px; }
	.legende-liste { max-height: 40vh; }
	.legende-zeile { padding: 10px 8px; font-size: 14px; }
	.quelle { display: none; }

	.ebenen { top: 10px; left: 10px; right: 10px; max-width: none; }
	.ebenen-reihe { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
	.ebenen-reihe::-webkit-scrollbar { display: none; }
	.ebene-chip { padding: 9px 14px; font-size: 14px; }
	.zurueck-gelaende { padding: 10px 15px; font-size: 14px; }

	/* Die Bereichsleiste: eine Zeile zum Wischen statt vier Zeilen Knöpfe,
	   die die Liste aus der halb offenen Schublade schieben. */
	.bereiche {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 6px 12px 10px;
		margin: 0 -12px;
	}
	.bereiche::-webkit-scrollbar { display: none; }
	.b-chip { flex: none; padding: 9px 13px; font-size: 14px; }
	.b-chip.nur-sv { margin-left: 0; }

	.treffer { padding: 12px 8px; }
	.treffer .name { font-size: 15px; }
	.treffer .unten { font-size: 13px; }
	.panel-kopf .zurueck { width: 40px; height: 40px; padding: 0; font-size: 17px; }
	.taste { min-height: 48px; font-size: 15px; }
	.schicht { font-size: 15px; padding: 10px 0; }
	.hinweis-leiste { top: 10px; font-size: 14px; }
}

/* Finger statt Maus: Pins und Zähler bekommen eine unsichtbar größere
   Trefferfläche. Sichtbar bleiben sie gleich groß – sonst deckt auf dem
   Gelände ein Pin den nächsten zu. */
@media (pointer: coarse) {
	.pin::before,
	.zaehler::before {
		content: '';
		position: absolute;
		inset: -9px;
	}
	.zaehler { padding: 5px 11px; font-size: 13px; }
	.tag-chip { padding: 9px 14px; }
}

/* Telefon quer (und kleine Tablets quer): wenig Höhe. Die Kopfzeile wird
   einzeilig, die Spalte schmaler – sonst bleibt für die Karte ein Briefschlitz. */
@media (min-width: 781px) and (max-height: 520px) {
	:root { --panel-breite: 300px; }
	.kopf { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
	.kopf-titel span { display: none; }
	.tag-chip { padding: 5px 10px; }
	.knoepfe { gap: 4px; bottom: 8px; }
	.knopf { width: 38px; height: 38px; }
	.legende { bottom: 8px; }
	.kopf-suche { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   Einteilen auf der Karte

   Dieselbe Karte wie für alle anderen, nur mit Formularen im Panel. Alles hier
   greift erst, wenn die Seite als Einteilen-Modus ausgeliefert wurde.
   =========================================================================== */

/* Die Leiste ganz oben: Rückweg, Hinweis, Tag kopieren. */
.e-leiste {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 16px;
	background: var(--tinte);
	color: #fff;
	font-size: 13px;
	position: relative;
	z-index: 40;
}
.e-leiste a { color: #fff; text-decoration: none; opacity: .85; }
.e-leiste a:hover { opacity: 1; }
.e-titel { font-weight: 600; }
.e-tipp { color: rgba(255,255,255,.6); font-size: 12px; }
.e-knopf {
	margin-left: auto;
	padding: 6px 13px;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.e-knopf:hover { background: rgba(255,255,255,.12); }

/* Die Karte sitzt unter der Leiste. Gerechnet wird die Höhe nicht – die
   Leiste darf auf schmalen Fenstern umbrechen, ohne dass unten ein grauer
   Streifen übrig bleibt. */
.einteilen-modus { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.einteilen-modus .e-leiste { flex: none; }
.einteilen-modus .app { flex: 1; height: auto; min-height: 0; }

/* Positionen, die noch nicht zur Veranstaltung gehören: blass, aber da. */
.pin.nicht-dabei { opacity: .42; }
.pin.nicht-dabei:hover { opacity: .85; }

.e-nichtdabei {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0 2px;
	padding: 10px 12px;
	background: #FFF6E8;
	border: 1px solid #F0D9AE;
	border-radius: 10px;
	font-size: 13px;
}

/* ---------- Formulare im Panel ---------- */

.e-form { margin-top: 14px; display: grid; gap: 8px; }
.e-form h4 {
	margin: 4px 0 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--gedaempft);
}
.e-form input[type="text"],
.e-form input[type="time"] {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--linie);
	border-radius: 9px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--tinte);
}
.e-form input:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot); }
.e-zeile { display: flex; gap: 8px; }
.e-zeile input { flex: 1; }
.e-tasten { display: flex; gap: 8px; }

.e-aendern {
	margin: 6px 0;
	padding: 10px;
	background: var(--grund);
	border: 1px solid var(--linie);
	border-radius: 10px;
}

/* Die Tage zum Abhaken – der eigentliche Zeitgewinn beim Einteilen. */
.e-tage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.e-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border: 1px solid var(--linie);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}
.e-tag input { margin: 0; accent-color: var(--rot); }
.e-tag.an { border-color: var(--rot); background: rgba(193,0,43,.06); color: var(--rot); font-weight: 600; }
.e-alle {
	padding: 6px 10px;
	border: 1px dashed var(--linie);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 12px;
	color: var(--gedaempft);
	cursor: pointer;
}
.e-alle:hover { color: var(--tinte); border-color: var(--gedaempft); }

/* Ändern und Löschen an einer einzelnen Schicht. */
.schicht { position: relative; }
.e-werkzeuge { display: flex; gap: 2px; margin-left: auto; align-self: center; }
.e-mini {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--linie);
	border-radius: 8px;
	background: var(--flaeche);
	color: var(--tinte);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}
.e-mini svg { width: 15px; height: 15px; fill: currentColor; }
.e-mini:hover { background: var(--grund); border-color: var(--gedaempft); }
.e-mini.loeschen:hover { background: #FDECEE; border-color: #F3C2C9; color: #C1002B; }

@media (max-width: 700px) {
	.e-tipp { display: none; }
	.e-leiste { gap: 10px; padding: 8px 12px; }
}

/* ---------------------------------------------------------------------------
   Hinweis „Als App speichern“.
   Erscheint nur auf dem Telefon, nur wenn die Seite noch nicht als App läuft,
   und nach dem Wegtippen für zwei Wochen nicht wieder. Siehe inc/app.php.
--------------------------------------------------------------------------- */

.app-hinweis {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 14px;
	box-shadow: 0 6px 28px rgba(16, 18, 22, .16);
	font-size: 13px;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.app-hinweis.da { opacity: 1; transform: translateY(0); }
.app-hinweis img { border-radius: 9px; flex: none; }
.app-text { flex: 1; }
.app-ja {
	flex: none;
	padding: 9px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--rot);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.app-ja:hover { background: var(--rot-dunkel); }
.app-zu {
	flex: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gedaempft);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.app-zu:hover { background: var(--grund); color: var(--tinte); }

/* Auf dem Rechner gibt es den Hinweis gar nicht – dort ist eine App vom
   Startbildschirm keine Hilfe. Die Regel ist trotzdem da, falls ein Tablet
   im Querformat hereinkommt. */
@media (min-width: 900px) {
	.app-hinweis { left: auto; right: 16px; max-width: 420px; }
}

/* Auf schmalen Telefonen bekommt der Text die volle Breite und der Knopf
   rutscht darunter – sonst quetscht er den Text auf sechs Zeilen. */
@media (max-width: 560px) {
	.app-hinweis { flex-wrap: wrap; }
	.app-text { flex: 1 1 100%; order: 2; }
	.app-hinweis img { order: 1; }
	.app-ja { order: 3; margin-left: auto; }
	.app-zu { order: 1; margin-left: auto; }
}


/* Hinweis auf eine Lücke im Wegenetz – nur für die Pflege sichtbar. */
.weg-luecke {
	margin: 10px 0 2px;
	padding: 10px 12px;
	background: #FFF6E8;
	border: 1px solid #F0D9AE;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.45;
}
.weg-luecke a { color: var(--rot); font-weight: 600; }

/* Pin-Beschriftungen erst ab Zoom 2,6 (karte.js setzt .mit-fahnen). Über eine
   Klasse statt an jedem einzelnen Pin – das lief vorher bei jeder Bewegung
   der Finger über alle Pins. */
.marker:not(.mit-fahnen) .pin:not(.gewaehlt) .pin-fahne { display: none; }

/* Der Standortpunkt bleibt gleich groß; der Genauigkeitskreis darunter ist
   eine Strecke in Metern und wächst deshalb mit der Karte. */
.standort .punkt { transform: scale(var(--ps, 1)); }

/* ---------- Kurzzeile in der geschlossenen Schublade (Telefon) ---------- */

.panel-kurz {
	display: none;
	align-items: center;
	gap: 8px;
	width: calc(100% - 24px);
	min-height: 44px;
	margin: 0 12px 8px;
	padding: 9px 12px;
	border: 0;
	border-radius: 12px;
	background: var(--grund);
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.panel-kurz .text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-kurz .pfeil { flex: none; color: var(--gedaempft); font-size: 18px; line-height: 1; }
.panel-kurz.mein { background: rgba(193, 0, 43, .08); color: var(--rot-dunkel); }
.panel-kurz.mein strong { color: var(--rot-dunkel); }

/* ---------- „Dein Einsatz“ ----------
   Wer seinen Namen einmal gemerkt hat, sieht hier jeden Tag zuerst, wo er
   steht. Der Name liegt nur auf diesem Gerät (localStorage), nirgends sonst. */

.mein-einsatz {
	margin: 0 0 12px;
	padding: 10px 12px 4px;
	border: 1px solid rgba(193, 0, 43, .25);
	border-radius: 12px;
	background: rgba(193, 0, 43, .035);
}
.mein-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rot);
}
.mein-kopf button {
	margin-left: auto;
	padding: 8px 0 8px 8px;
	border: 0;
	background: none;
	color: var(--gedaempft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}
.mein-einsatz .treffer { border-bottom-color: transparent; padding-left: 0; padding-right: 0; }
.mein-leer { padding: 4px 0 10px; font-size: 14px; color: var(--gedaempft); }

.ich-tipp {
	margin: 0 0 12px;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--grund);
	font-size: 13px;
	line-height: 1.45;
	color: var(--gedaempft);
}
.ich-vorschlag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--gedaempft);
}
.ich-knopf {
	min-height: 38px;
	padding: 7px 13px;
	border: 1px solid rgba(193, 0, 43, .35);
	border-radius: 999px;
	background: var(--flaeche);
	color: var(--rot-dunkel);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Fuß der Liste: Wege und Quellenangabe ----------
   Auf dem Telefon ist das der einzige Weg zu „Anmelden“ – und die Quellen-
   angabe der OpenStreetMap-Daten ist Pflicht, auch auf kleinem Bildschirm. */

.panel-fuss {
	margin: 20px 0 6px;
	padding-top: 12px;
	border-top: 1px solid var(--linie);
	font-size: 12px;
	line-height: 1.6;
	color: var(--gedaempft);
}
.panel-fuss nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 6px; }
.panel-fuss a {
	display: inline-block;
	padding: 8px 0;
	color: var(--tinte);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.panel-fuss a.stark { color: var(--rot); }

/* ---------- Stand der Daten ----------
   Erscheint nur, wenn die Seite ohne Netz aus dem Speicher kommt oder schon
   länger offen ist. Antippen lädt neu. */

.stand {
	position: absolute;
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	z-index: 22;
	max-width: calc(100% - 140px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: #FFF4E0;
	color: #7A4A00;
	font-size: 13px;
	font-weight: 600;
	box-shadow: var(--schatten);
	cursor: pointer;
}
.stand.offline { background: var(--tinte); color: #fff; }
@media (max-width: 780px) {
	/* Oben liegen auf dem Telefon die Ebenen-Chips – der Hinweis steht
	   deshalb unten zwischen Legende und Knöpfen, über der Schublade. */
	.stand { top: auto; bottom: calc(var(--blatt, 112px) + 16px); max-width: calc(100% - 200px); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
	.app.blatt-voll .stand { opacity: 0; pointer-events: none; }
}

/* ---------- App-Hinweis in der Schublade ----------
   Auf der Karte schwebt er nicht über allem (dort verdeckte er die Knöpfe
   und das Ende der Liste), sondern steht ruhig über der Liste. */

.app-platz:empty { display: none; }
.app-hinweis.im-panel {
	position: static;
	margin: 2px 12px 8px;
	opacity: 1;
	transform: none;
	background: var(--grund);
	box-shadow: none;
	flex-wrap: nowrap;
}
.app-hinweis.im-panel .app-text { order: 0; flex: 1; font-size: 13px; }
.app-hinweis.im-panel img { width: 32px; height: 32px; }

/* Für Sperren gibt es hier absichtlich keine Regel: Sie werden auf der Karte
   nicht gezeichnet. Sie sind Handwerkszeug der Wegführung (was steht im Weg),
   kein Aushang für die Mitarbeitenden. Zu sehen sind sie im Wegenetz-Editor. */