/* Lagebild: Karte links, Bedienung rechts. Auf schmalen Schirmen untereinander. */

.lage {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: .75rem;
	padding: .75rem;
	align-items: start;
}
@media (max-width: 1000px) { .lage { grid-template-columns: 1fr; } }

.karte-spalte { position: sticky; top: 55px; }
#karte {
	height: calc(100dvh - 190px);
	min-height: 340px;
	border: 1px solid var(--rand);
	border-radius: 4px;
	background: var(--oliv);
}
.kartenhinweis { margin: .4rem 0 0; }

.missionskopf {
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	background: var(--oliv); border: 1px solid var(--rand);
	border-radius: 4px; padding: .5rem .7rem; margin-bottom: .5rem;
}
.missionskopf .hinweis { margin-left: .5rem; }
.uhr { font: 700 20px var(--mono); letter-spacing: .05em; margin-left: auto; }
.uhr.knapp { color: var(--gelb); }
.uhr.aus { color: var(--rot); }
.steuerung { display: flex; gap: .3rem; flex-wrap: wrap; width: 100%; }

.seiten-spalte { display: grid; gap: .75rem; }
.seiten-spalte .tafel > .inhalt { max-height: 46vh; overflow: auto; }

.liste { display: grid; gap: .35rem; margin-top: .5rem; }
.zeile {
	display: flex; align-items: center; gap: .5rem;
	background: var(--oliv-tief); border: 1px solid var(--rand);
	border-radius: 3px; padding: .35rem .5rem; font-size: 13px;
}
.zeile .weit { flex: 1; min-width: 0; }
.zeile .weit b { display: block; }
.zeile small { color: var(--creme-matt); font: 11px var(--mono); }
.zeile.alt { opacity: .5; }
.zeile.notfall { border-color: var(--rot); background: rgba(180,71,47,.2); }

.protokoll .zeile { font: 12px var(--mono); }

details summary { cursor: pointer; margin-top: .6rem; }

dialog {
	background: var(--oliv); color: var(--creme);
	border: 1px solid var(--rand); border-radius: 4px;
	width: min(320px, 92vw);
}
dialog::backdrop { background: rgba(0,0,0,.6); }

/* Karte im Militärton statt bunt - eine Graustufen-Ebene darüber wäre
   teuer, deshalb nur leicht entsättigt und abgedunkelt. */
.leaflet-tile-pane { filter: saturate(.55) brightness(.78) contrast(1.05); }
.leaflet-container { background: var(--oliv-tief); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	background: var(--oliv); color: var(--creme);
}
.spieler-punkt {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--gruen); color: #10160C;
	border: 2px solid var(--creme); font: 700 11px var(--mono);
}
.spieler-punkt.alt { background: var(--creme-matt); }
.spieler-punkt.raus { background: var(--rot); color: var(--creme); }

.schalter {
	display: flex; align-items: center; gap: .5rem;
	margin: .45rem 0; font-size: 13px; color: var(--creme); cursor: pointer;
}
.schalter input { width: auto; accent-color: var(--gruen); }

/* Handy-Übersicht */
.geraeteraster {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .6rem; margin-top: .5rem;
}
.karte-geraet {
	background: var(--oliv-tief); border: 1px solid var(--rand);
	border-radius: 4px; overflow: hidden;
}
.karte-geraet img {
	width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
	background: var(--anthrazit); cursor: zoom-in;
}
.karte-geraet .kein-bild {
	width: 100%; aspect-ratio: 16/9; display: grid; place-items: center;
	background: var(--anthrazit); color: var(--creme-matt); font: 11px var(--mono);
}
.karte-geraet .text { padding: .45rem .55rem; }
.karte-geraet b { display: block; font-size: 14px; }
.karte-geraet small { color: var(--creme-matt); font: 11px var(--mono); }
.balken {
	height: 5px; background: var(--anthrazit); border-radius: 3px;
	margin: .35rem 0; overflow: hidden;
}
.balken i { display: block; height: 100%; background: var(--gruen); }
.balken.knapp i { background: var(--gelb); }
.balken.leer i { background: var(--rot); }

.handy-punkt {
	display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--gelb); color: #1A1505;
	border: 2px solid var(--anthrazit); font: 700 9px var(--mono);
}
.handy-punkt.alt { background: var(--creme-matt); }
.minibild {
	width: 46px; height: 30px; object-fit: cover; border-radius: 2px;
	border: 1px solid var(--rand); cursor: zoom-in;
}

.warnzeile {
	background: rgba(201,162,39,.16); border: 1px solid var(--gelb);
	color: var(--gelb); border-radius: 3px;
	padding: .35rem .5rem; margin: .35rem 0; font-size: 12px;
}

/* Wegpunktnummern auf der Karte. Ohne eigenen Stil setzt Leaflet einen
   weissen Kasten mit Rahmen darum - auf einer taktischen Karte fehl am Platz. */
.leaflet-tooltip.wegpunkt {
	background: transparent; border: 0; box-shadow: none;
	color: #E8E6D6; font: 700 11px var(--mono); padding: 0;
}
.leaflet-tooltip.wegpunkt::before { display: none; }

/* Kennzahlen der Auswertung. Bewusst gross gesetzt - man liest sie einmal
   nach dem Einsatz, nicht im Betrieb. */
.kennzahlen {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: .6rem; margin: .8rem 0;
}
.kennzahlen div {
	border: 1px solid var(--rand); border-top: 3px solid var(--gelb);
	padding: .7rem .8rem; background: var(--oliv);
}
.kennzahlen b { display: block; font-size: 22px; color: var(--creme); line-height: 1.1; }
.kennzahlen small {
	display: block; margin-top: .25rem; font-size: 11px; color: var(--creme-matt);
	text-transform: uppercase; letter-spacing: .05em;
}

/* Assistent. Ein Schritt zur Zeit, damit nichts verschachtelt wirkt. */
.schrittleiste {
	display: flex; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0;
	flex-wrap: wrap;
}
.schrittleiste li {
	flex: 1 1 auto; min-width: 90px; text-align: center;
	padding: .5rem .3rem; font-size: 12px; letter-spacing: .05em;
	color: var(--creme-matt); border-bottom: 3px solid var(--rand);
	text-transform: uppercase;
}
.schrittleiste li.jetzt { color: var(--creme); border-bottom-color: var(--gelb); }
.schrittleiste li.fertig { color: var(--gruen); border-bottom-color: var(--gruen); }
.assistentkarte {
	height: 320px; margin: .6rem 0; border: 1px solid var(--rand);
}

/* Meldungen aus dem Feld heben sich vom Funk der Zentrale ab - eine Kante
   links reicht, damit man die Richtung im Vorbeischauen sieht. */
.zeile.herein { border-left: 3px solid var(--gelb); padding-left: .5rem; }

/* Teamseite. Eine Karte je Gerät statt einer Tabellenzeile - beim Aufbau
   steht man mit dem Tablet in der Hand davor und braucht alles groß genug
   zum Abtippen. */

/* --- Eingabefelder ------------------------------------------------------
   In eg.css ist `label` 12px mattgrau - kleiner und blasser als der Text im
   Feld darunter, und kleiner als der Erklaerabsatz daneben. Auf einem Event
   sucht die Einsatzleitung damit erst, was wo einzutragen ist. Hier steht der
   Titel deshalb gross und hell obenan; die Erklaerung steckt hinter einem
   Fragezeichen und ist beim Vorbereiten einen Klick entfernt. */

label {
	font-size: 16px; font-weight: 700; line-height: 1.3;
	color: var(--creme); margin: 1rem 0 .3rem;
}
label.schalter {
	font-size: 15px; font-weight: 500; color: var(--creme);
	display: flex; align-items: center; gap: .5rem; margin: .6rem 0;
}
label.schalter input { width: auto; }

/* Ein Feld: Titel, Fragezeichen, Eingabe. */
.feld { position: relative; margin: 1.15rem 0 0; }
.feld:first-child { margin-top: .5rem; }
.feld > label { margin: 0 0 .3rem; padding-right: 2.2rem; }

.warum { position: absolute; top: -.1rem; right: 0; }
.warum > summary {
	/* `details summary` weiter oben setzt margin-top: .6rem - das schoebe das
	   Fragezeichen unter die Zeile des Titels. */
	margin: 0; list-style: none; cursor: help; user-select: none;
	width: 1.5rem; height: 1.5rem; border-radius: 50%;
	border: 1px solid var(--rand); background: var(--oliv);
	color: var(--creme-matt); font: 700 13px var(--schrift);
	display: grid; place-items: center;
}
.warum > summary::-webkit-details-marker { display: none; }
.warum > summary::marker { content: ""; }
.warum > summary:hover { border-color: var(--gelb); color: var(--gelb); }
.warum[open] > summary {
	background: var(--badge); color: var(--creme); border-color: var(--creme-matt);
}
/* Der Erklaertext steht als Geschwister des <details> im Textfluss, nicht
   als Ueberlagerung: in der Seitenspalte der Missionsseite hat `.inhalt`
   overflow:auto, und daran wurde ein ueberlagerndes Kaestchen abgeschnitten.
   Aufgeklappt schiebt der Text das Feld nach unten - das ist gewollt und
   passiert nur auf Klick. */
.erklaerung {
	margin: .35rem 0 .45rem;
	background: var(--oliv); color: var(--creme-matt);
	border: 1px solid var(--rand); border-left: 2px solid var(--badge);
	border-radius: 3px; padding: .5rem .7rem;
	font-size: 13px; line-height: 1.5;
}
.erklaerung b { color: var(--creme); }
@supports selector(:has(*)) {
	/* Ohne :has() bleibt der Text sichtbar - lieber zu viel Erklaerung als
	   eine Schaltflaeche, die nichts tut. */
	.feld .erklaerung { display: none; }
	.feld:has(> .warum[open]) .erklaerung { display: block; }
}

/* Das Tabu ist die Stelle, an der Schluss ist - die bleibt sichtbar. */
.feld.grenze > label { color: var(--gelb); }
.feld.grenze .warum > summary { border-color: var(--gelb); color: var(--gelb); }

/* Mehrere schmale Felder nebeneinander (Tempo min/max/Radius). */
.feldreihe { display: flex; gap: .6rem; align-items: flex-end; }
.feldreihe > .feld { flex: 1; min-width: 0; }

/* Speichern-Zeile unter einem Formular. */
.abschluss {
	display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
	margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--rand);
}

/* Spaltentitel ueber wiederholten Zeilen (Person / Handy / Team). */
.zeilenkopf {
	display: flex; gap: .4rem; padding: 0 .5rem; margin: .6rem 0 .3rem;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--creme-matt);
}


/* --- Mithoeren ----------------------------------------------------------
   Zeigt in der Missionskopfzeile, was der Leitstand gerade hoert. Die Lampe
   ist die eigentliche Auskunft: gruen heisst, der Ton laeuft; gelb heisst,
   der Browser wartet noch auf einen Klick; grau heisst, die Verbindung ist
   weg und du bekommst nichts mit. */
.mithoeren {
	display: flex; align-items: center; gap: .4rem;
	font: 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
	color: var(--creme-matt); white-space: nowrap;
	border: 1px solid var(--rand); border-radius: 3px; padding: .3rem .5rem;
}
.mithoeren .lampe {
	width: .55rem; height: .55rem; border-radius: 50%;
	background: var(--gruen); flex: 0 0 auto;
}
.mithoeren.spielt { color: var(--creme); border-color: var(--gruen); }
.mithoeren.spielt .lampe { animation: puls 1.1s ease-in-out infinite; }
.mithoeren.alarm {
	color: #F3C7BC; border-color: var(--rot); background: rgba(180,71,47,.18);
}
.mithoeren.alarm .lampe { background: var(--rot); animation: puls .5s steps(1) infinite; }
.mithoeren.stumm { color: var(--gelb); border-color: var(--gelb); }
.mithoeren.stumm .lampe { background: var(--gelb); }
@keyframes puls { 50% { opacity: .25; } }
.mithoeren.weg { color: var(--creme-matt); border-color: var(--rand); }
.mithoeren.weg .lampe { background: var(--rand); }

/* Ein Handy in Ruhe oder Aus ist kein Fehler - es meldet sich absichtlich
   selten. Deshalb nicht rot wie ein offline gefallenes Geraet, sondern
   zurueckgenommen. */
/* --- Zustand eines Handys ----------------------------------------------
   Vier Zustaende, mehr gibt es auf dieser Seite nicht: online, Pause, aus,
   offline. Die Bedeutung traegt das Wort, nicht die Farbe - die Geraete
   laufen im Schwarzweissbetrieb. */
.karte-geraet .lage {
	display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
	margin: .2rem 0 .35rem;
	font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase;
	color: var(--creme);
}
.karte-geraet .lage .punkt {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--creme-matt); flex: 0 0 auto;
}
.karte-geraet .lage small {
	text-transform: none; letter-spacing: 0; margin-left: auto;
}
.karte-geraet.lage-da    { border-color: var(--gruen); }
.karte-geraet.lage-da    .lage .punkt { background: var(--gruen); }
.karte-geraet.lage-weg   { border-color: var(--rot); }
.karte-geraet.lage-weg   .lage { color: #F3C7BC; }
.karte-geraet.lage-weg   .lage .punkt { background: var(--rot); }
.karte-geraet.lage-pause { border-color: var(--gelb); }
.karte-geraet.lage-pause .lage { color: var(--gelb); }
.karte-geraet.lage-pause .lage .punkt { background: var(--gelb); }
.karte-geraet.lage-aus   { border-color: var(--rand); opacity: .68; }

.karte-geraet .erklaerung-klein {
	display: block; margin-top: .3rem; font: 11px/1.35 var(--schrift);
	color: var(--creme-matt); text-transform: none;
}
.knopfreihe-geraet {
	display: flex; gap: .3rem; align-items: center; margin-top: .5rem;
}
.knopfreihe-geraet .mehr { margin-left: auto; padding: .2rem .4rem; }
.mehrreihe { display: flex; gap: .3rem; margin-top: .4rem; }
/* `display: flex` sticht das hidden-Attribut aus - ohne diese Zeile steht das
   Menü offen, und die Vereinfachung wäre keine. */
.mehrreihe[hidden] { display: none; }
.zeile small.uebernahme {
	display: block; color: var(--gelb); font: 11px/1.4 var(--schrift);
	text-transform: none; letter-spacing: 0; margin-top: .2rem;
}

/* Sammelschalter unter der Handyliste. */
.sammelschalter {
	display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
	margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rand);
}
.zeile small.offline {
	display: block; color: #F3C7BC; font: 11px var(--mono);
}

/* --- Demoleiste ---------------------------------------------------------
   Steht ueber allem: Wer den QR-Code aus dem Expose gescannt hat, soll nach
   zwei Sekunden wissen, dass er in einer Vorfuehrung steht und wie er
   zwischen Leitstand und Feldansicht wechselt. */
.demoleiste {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	padding: .5rem .9rem;
	background: var(--oliv-hell); border-bottom: 1px solid var(--gelb);
	position: sticky; top: 41px; z-index: 400;
}
.marke-demo {
	font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
	color: #1A1505; background: var(--gelb);
	border-radius: 3px; padding: .3rem .5rem;
}
.demoleiste .hinweis { font-size: 12px; }
@media (max-width: 700px) { .demoleiste { position: static; } }
/* Im Demozugang ausgeblendet - die Routen dahinter sind gesperrt. Bewusst
   ausgeblendet und nicht entfernt: leitstand.js schreibt in einige dieser
   Anzeigen, und ohne sie bricht der Takt mitten in der Liste ab. */
.verborgen { display: none; }

/* Knopfreihe in einer Tabellenzeile - Speichern, Steckbrief, Löschen. */
.zeilenknoepfe { white-space: nowrap; }
.zeilenknoepfe > * { vertical-align: middle; }
.zeilenknoepfe a.knopf {
	display: inline-block; text-decoration: none; line-height: 1;
	padding: .28rem .45rem; font-size: 14px;
}
/* Ein freigegebener Steckbrief hebt den Stift hervor - sonst sieht man einer
   Zeile nicht an, ob dort schon etwas steht. */
.zeilenknoepfe a.knopf.steht { border-color: var(--gruen); color: var(--gruen); }

/* --- Teams -------------------------------------------------------------
   Dieselbe Zeile im Assistenten und auf der Missionsseite: Wer sie beim
   Aufbau gesehen hat, erkennt sie im Einsatz wieder. */
.teamzeile {
	background: var(--oliv); border: 1px solid var(--rand);
	border-left: 3px solid var(--gruen); border-radius: 3px;
	padding: .5rem .6rem; margin-bottom: .4rem;
}
.teamzeile .kopf { display: flex; align-items: baseline; gap: .5rem; }
.teamzeile .kopf b { font-size: 15px; }
.teamzeile .kopf small { color: var(--creme-matt); font: 11px var(--mono); }
.teamzeile .kopf button { margin-left: auto; }
.teamzeile .zugang {
	display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
	margin-top: .45rem;
}
.teamzeile code {
	font: 13px var(--mono); color: var(--creme);
	background: var(--oliv-tief); border: 1px solid var(--rand);
	padding: .2rem .4rem; border-radius: 3px; cursor: pointer;
	word-break: break-all;
}
.teamzeile code:hover { border-color: var(--gelb); }
.teamzeile code.kopiert { border-color: var(--gruen); color: var(--gruen); }
.teamzeile .qrfach { margin-top: .5rem; text-align: center; }
.teamzeile .qrfach img {
	width: 150px; height: 150px; background: #fff; padding: 5px;
}
.teamzeile .qrfach small { display: block; color: var(--creme-matt); font-size: 11px; }

/* --- Kopfzeile: Emblem als Heimweg, Rest hinter einem Knopf -------------
   Im Einsatz braucht die Einsatzleitung die Lagekarte. Spieler, Handys und
   Zugang sind Vorbereitung und haben oben nichts verloren. */
.kopf .heim {
	display: flex; align-items: center; gap: .75rem;
	text-decoration: none; color: inherit; border-radius: 3px;
	padding: .15rem .3rem; margin: -.15rem -.3rem;
}
.kopf .heim:hover { background: var(--oliv-hell); }

.kopf nav.menue { margin-left: auto; position: relative; }
.kopf nav.menue > button {
	font-size: 20px; line-height: 1; padding: .25rem .6rem;
	background: transparent; border: 1px solid var(--rand); color: var(--creme);
}
.kopf nav.menue > button:hover,
.kopf nav.menue > button[aria-expanded="true"] { background: var(--badge); }
.kopf nav.menue > div {
	position: absolute; right: 0; top: calc(100% + .4rem); z-index: 600;
	min-width: 12rem; display: flex; flex-direction: column;
	background: var(--oliv); border: 1px solid var(--rand); border-radius: 4px;
	box-shadow: 0 10px 24px rgba(0,0,0,.5); padding: .3rem;
}
.kopf nav.menue > div[hidden] { display: none; }
.kopf nav.menue a {
	display: block; text-decoration: none; font-size: 14px;
	padding: .5rem .7rem; border: 0; border-radius: 3px; color: var(--creme);
}
.kopf nav.menue a:hover { background: var(--oliv-hell); }
.kopf nav.menue a.aktiv { color: var(--gelb); }
/* Abmelden ist die einzige Zeile, die man nicht aus Versehen treffen soll. */
.kopf nav.menue a.letzte {
	margin-top: .3rem; padding-top: .6rem;
	border-top: 1px solid var(--rand); color: var(--creme-matt);
}

/* --- Aufstellung im Assistenten ----------------------------------------
   Eine Zeile je Person, darunter ein Fach für den Steckbrief. Zugeklappt,
   weil sechs Personen sonst dreissig Felder wären. */
.aufstellungszeile { margin-bottom: .35rem; }
.steckbrieffach {
	margin: .3rem 0 .8rem 1rem; padding: .6rem .8rem;
	background: var(--oliv); border-left: 2px solid var(--gelb);
	border-radius: 0 3px 3px 0;
}
.steckbrieffach[hidden] { display: none; }
.steckbrieffach .feld { margin-top: .7rem; }
.steckbrieffach .feld:first-child { margin-top: 0; }
.steckbrieffach label { font-size: 14px; }
.neueperson { margin-top: .8rem; }
.neueperson > summary { cursor: pointer; }

/* Handys, die im Assistenten auf ihre Freigabe warten. Gelb, weil es eine
   offene Aufgabe ist - nicht rot, es ist kein Fehler. */
.wartenkasten {
	margin: .6rem 0; padding: .6rem .7rem;
	background: var(--oliv); border: 1px solid var(--gelb); border-radius: 3px;
}
.wartenkasten > b {
	display: block; margin-bottom: .45rem; color: var(--gelb);
	font-size: 13px; letter-spacing: .04em;
}
.wartenkasten .zeile { background: var(--oliv-tief); }
.zeile small.jetzt { display: block; color: var(--gruen); font: 11px var(--mono); }


/* --- Adresssuche im Assistenten --------------------------------------- */
.adresssuche { display: flex; gap: .4rem; margin-bottom: .5rem; }
.adresssuche input { flex: 1; min-width: 0; }
#adresstreffer { margin-bottom: .5rem; }
#adresstreffer[hidden] { display: none; }
button.adresstreffer {
	display: block; width: 100%; text-align: left;
	font: 400 13px/1.4 var(--schrift);
	background: var(--oliv); border: 1px solid var(--rand);
	padding: .45rem .6rem; margin-bottom: .25rem; cursor: pointer;
}
button.adresstreffer:hover { border-color: var(--gelb); color: var(--creme); }

/* --- Seitenraster ------------------------------------------------------
   Uebersicht, Spieler und Handys teilen sich denselben Aufbau: Inhalt links,
   Nebenspalte rechts.

   Das stand bis zum 31.08.2026 als **Inline-Style** im HTML - und war damit
   von keiner Medienabfrage erreichbar. Auf einem 360-Pixel-Schirm bekam die
   erste Spalte dadurch fast keine Breite: Die Missionsliste brach auf ein
   Wort je Zeile um, und die 320 Pixel breite Nebenspalte legte sich darueber.
   Ein Layout gehoert ins Stylesheet, sonst laesst es sich nicht anpassen. */
.seitenraster {
	max-width: 1100px; margin: 1rem auto; padding: 0 1rem;
	display: grid; gap: 1rem; align-items: start;
}
.seitenraster.zwei { grid-template-columns: minmax(0, 1fr) 320px; }
.seitenraster.breit { max-width: 1200px; }

/* Tabellen sind das Zweite, was schmale Schirme sprengt: Sie schrumpfen
   nicht unter ihren Inhalt. Sie bekommen deshalb ihr eigenes Schiebefeld,
   statt die ganze Seite breit zu machen. */
.tafel .inhalt > table { width: 100%; }
.tafel .inhalt { overflow-x: auto; }

/* --- Telefon ----------------------------------------------------------
   Beim Alleingang ist das Telefon zugleich Leitstand und Spielgeraet: Man
   startet die Mission, steckt es weg, laeuft los - und will unterwegs
   herankommen, ohne sich durch eine bildschirmfuellende Karte zu scrollen.

   Diese Regeln stehen bewusst am DATEIENDE. Sie haben dieselbe Spezifitaet
   wie die Grundregeln daruber; wer sie weiter oben einsetzt, schreibt einen
   Block, der nie greift. */
@media (max-width: 700px) {
	.lage { padding: .5rem; gap: .5rem; }

	/* Nicht klebend und nur halbhoch: Sonst steht die Karte fest und die
	   Bedienung darunter ist auf einem 5-Zoll-Schirm unerreichbar. */
	.karte-spalte { position: static; }
	#karte { height: 45dvh; min-height: 200px; }

	.missionskopf { padding: .45rem .55rem; gap: .4rem; }
	.missionskopf .hinweis { margin-left: 0; }
	.uhr { font-size: 17px; margin-left: 0; }

	/* Fingerkuppe statt Mauszeiger. 40 px ist die Untergrenze, unter der
	   man draussen mit klammen Haenden danebentippt. */
	button, .knopf { min-height: 40px; }

	.tafel > .inhalt { padding: .6rem; }
	.tafel > h2 { padding: .45rem .6rem; }

	/* Eine Spalte. Die Nebenspalte rutscht darunter, statt sich
	   darueberzulegen. */
	.seitenraster { padding: 0 .5rem; margin: .5rem auto; gap: .6rem; }
	.seitenraster.zwei { grid-template-columns: minmax(0, 1fr); }


	/* Nichts laeuft seitlich heraus: Eine Seite, die sich quer schieben
	   laesst, verliert im Gehen jedes Mal die Spalte. */
	.lage, .tafel, .liste, .zeile, .feldreihe { min-width: 0; }
	.zeilenknoepfe { white-space: normal; }
	.feldreihe { flex-wrap: wrap; }
	.feldreihe > .feld { flex: 1 1 9rem; }
}

/* Sehr schmal - altes Handy im Hochformat. */
@media (max-width: 400px) {
	.kopf { padding: .4rem .55rem; gap: .5rem; }
	.kopf .rolle { display: none; }
	#karte { height: 40dvh; }
}