/* Feuerwehr Planspiel – Rot #a82d24, Kontrastgelb #f3bb04 */
:root {
  --rot: #a82d24;
  --rot-dunkel: #7e1f18;
  --rot-hell: #f7e6e4;
  --gelb: #f3bb04;
  --gelb-dunkel: #c99a00;
  --gelb-hell: #fff6d6;
  --anthrazit: #1e2227;
  --text: #23272d;
  --gedimmt: #5f6670;
  --rand: #e3ded6;
  --flaeche: #f6f3ee;
  --weiss: #fff;
  --ok: #2e7d32;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(30, 34, 39, .06), 0 6px 20px rgba(30, 34, 39, .08);
  --schatten-hoch: 0 4px 10px rgba(30, 34, 39, .10), 0 18px 40px rgba(30, 34, 39, .14);
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--schrift); color: var(--text); background: var(--flaeche); line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; }
body.vollbild { height: 100vh; overflow: hidden; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
a { color: var(--rot); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; }
.hidden { display: none !important; }
.abstand { flex: 1; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke-width: 2.2; vertical-align: -0.2em; }
.icon.gross { width: 40px; height: 40px; stroke-width: 1.6; }
.icon.gedimmt { color: var(--gedimmt); }

/* ---------- Knöpfe & Formulare ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
  padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--rand);
  background: var(--weiss); color: var(--text); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.knopf:hover { border-color: #c9c1b5; background: #fbfaf8; }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible, .knopf-icon:focus-visible, .palette-knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.knopf.primaer { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.primaer:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf.gelb { background: var(--gelb); border-color: var(--gelb); color: var(--anthrazit); }
.knopf.gefahr { color: var(--rot); }
.knopf.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); }
.knopf.text { border-color: transparent; background: transparent; color: var(--gedimmt); padding-inline: 8px; }
.knopf.text:hover { color: var(--rot); }
.knopf.klein { font-size: 13.5px; padding: 6px 10px; gap: 6px; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.aktiv { background: var(--gelb-hell); border-color: var(--gelb); }

.knopf-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid transparent; background: transparent; color: var(--gedimmt); cursor: pointer;
}
.knopf-icon:hover { background: var(--flaeche); color: var(--text); }
.knopf-icon.gefahr:hover { background: var(--rot-hell); color: var(--rot); }

input, select, textarea {
  font: inherit; font-size: 15px; width: 100%; padding: 8px 10px; color: var(--text);
  border: 1.5px solid var(--rand); border-radius: 8px; background: var(--weiss);
}
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gelb); box-shadow: 0 0 0 3px rgba(243, 187, 4, .3); }
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--gedimmt); margin: 12px 0 4px; }
.einheit { font-weight: 400; }
.feld-check { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--text); font-weight: 500; cursor: pointer; }
.feld-check input { width: 18px; height: 18px; accent-color: var(--rot); }
.fehler { color: var(--rot); font-size: 14px; min-height: 1.3em; margin-top: 8px; }
.hinweis { color: var(--gedimmt); font-size: 14.5px; }
.hinweis.klein, .klein { font-size: 13px; }

/* ---------- Kopfzeile ---------- */
.kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--rot); color: #fff;
  border-bottom: 4px solid var(--gelb); position: relative; z-index: 1000;
}
.marke { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.logo {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--gelb); color: var(--rot); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.logo .icon { width: 24px; height: 24px; stroke-width: 2.4; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-text strong { font-size: 18px; letter-spacing: .2px; }
.marke-text small { font-size: 12.5px; color: #ffe08a; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.kopf-recht { display: inline-flex; gap: 12px; font-size: 13px; padding: 0 6px; }
.kopf-recht a { color: #fff; }
.kopf-benutzer { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; padding: 0 6px; }
.kopf-knopf {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; text-decoration: none;
}
.kopf-knopf:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }

/* ---------- Startseite ---------- */
.start { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 20px 48px; display: grid; gap: 28px; flex: 1; }

.info-block {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; overflow: hidden;
  background: var(--weiss); border-radius: 16px; box-shadow: var(--schatten);
}
.info-text { padding: 36px 40px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--rot);
}
.info-text h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; margin: 12px 0 14px; letter-spacing: -.5px; }
.markiert { background: linear-gradient(transparent 62%, var(--gelb) 62%, var(--gelb) 92%, transparent 92%); padding: 0 2px; }
.lead { font-size: 17px; color: var(--gedimmt); margin: 0 0 24px; max-width: 60ch; }
.optionen { display: grid; gap: 14px; margin-bottom: 24px; }
.option { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--flaeche); }
.option h3 { font-size: 16px; margin-bottom: 2px; }
.option p { margin: 0; font-size: 14.5px; color: var(--gedimmt); }
.option-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--rot); color: #fff; }
.option-icon.gelb { background: var(--gelb); color: var(--anthrazit); }
.info-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bildplätze: zeigen einen Platzhalter, solange kein Bild hinterlegt ist */
figure.bild { margin: 0; position: relative; background: var(--anthrazit); overflow: hidden; }
figure.bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure.bild .platzhalter { display: none; }
figure.bild.leer img { display: none; }
figure.bild.leer .platzhalter {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 600; text-align: center; padding: 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(243, 187, 4, .10) 0 18px, transparent 18px 36px),
    linear-gradient(135deg, #2a2f36, var(--anthrazit));
}
figure.bild.leer .platzhalter .icon { width: 40px; height: 40px; color: var(--gelb); stroke-width: 1.6; }
figure.bild.leer .platzhalter code { font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, .5); }
.info-bild { min-height: 340px; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kachel {
  display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--weiss); border-radius: 16px; box-shadow: var(--schatten);
  border: 2px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: var(--gelb); }
.kachel:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.kachel figure.bild { aspect-ratio: 16 / 9; }
.kachel-inhalt { position: relative; padding: 36px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.kachel-icon {
  position: absolute; top: -30px; left: 28px; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 14px; background: var(--rot); color: #fff;
  border: 4px solid var(--weiss); box-shadow: var(--schatten);
}
.kachel-icon .icon { width: 28px; height: 28px; }
.kachel-gelb .kachel-icon, .kachel-icon.gelb { background: var(--gelb); color: var(--anthrazit); }
.kachel-dunkel .kachel-icon, .kachel-icon.dunkel { background: var(--anthrazit); color: var(--gelb); }
.kachel h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.kachel p { color: var(--gedimmt); margin: 0 0 16px; }
.merkmale { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.merkmale li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.merkmale .icon { color: var(--rot); }
.bald { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 99px; background: var(--gelb-hell); color: #7a5d00; }
.kachel-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 700; color: var(--rot); padding: 10px 18px; border-radius: 8px; background: var(--rot-hell); transition: background .15s, color .15s; }
.kachel:hover .kachel-cta { background: var(--rot); color: #fff; }
.kachel:hover .kachel-cta .icon { transform: translateX(3px); }
.kachel-cta .icon { transition: transform .15s; }

.fuss { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 18px 20px; font-size: 13px; color: var(--gedimmt); border-top: 1px solid var(--rand); background: var(--weiss); }
.fuss a { color: inherit; }
.fuss-links { display: inline-flex; gap: 16px; }

/* ---------- Unterseiten ---------- */
.seite { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 20px 48px; flex: 1; }
.seiten-kopf { margin-bottom: 24px; }
.seiten-kopf h1 { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.seiten-kopf h1 .icon { color: var(--rot); }
.seiten-kopf .lead { margin: 0; }
.karte-box { background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); padding: 24px; }
.karte-box h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 16px; }
.karte-box h2 .icon { color: var(--rot); }

/* Impressum und Datenschutz */
.rechtstext { max-width: 860px; }
.rechtstext .karte-box h2 { margin: 28px 0 10px; font-weight: 700; }
.rechtstext .karte-box h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext ul { margin: 0 0 12px; }
.tabelle-scroll { overflow-x: auto; margin: 0 0 12px; }
.tabelle-scroll table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
.tabelle-scroll th, .tabelle-scroll td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
.tabelle-scroll code { overflow-wrap: anywhere; }
.rechtstext-stand { margin: 20px 0 0; font-size: 13px; color: var(--gedimmt); }

.spielen-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.leer-hinweis { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 12px; color: var(--gedimmt); }
.leer-hinweis p { margin: 0 0 6px; }
.lagen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lagen-liste li { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--rand); border-radius: 10px; padding: 4px 6px 4px 4px; transition: border-color .15s; }
.lagen-liste li:hover { border-color: var(--gelb); }
.lage-eintrag { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.lage-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--rot-hell); color: var(--rot); flex-shrink: 0; }
.lage-text { display: flex; flex-direction: column; min-width: 0; }
.lage-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lage-text small { color: var(--gedimmt); }
.lage-aktionen { display: flex; }

.ablage {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: 0;
  padding: 36px 16px; border: 2.5px dashed #d4ccbf; border-radius: 12px; background: var(--flaeche);
  color: var(--gedimmt); font-weight: 400; font-size: 14.5px; cursor: pointer; transition: border-color .15s, background .15s;
}
.ablage .icon.gross { color: var(--rot); margin-bottom: 6px; }
.ablage strong { color: var(--text); font-size: 16px; }
.ablage:hover, .ablage.ziehen { border-color: var(--gelb); background: var(--gelb-hell); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Vorschau einer Lage */
.vorschau { flex: 1; display: grid; grid-template-columns: 400px 1fr; min-height: 0; height: calc(100vh - 64px); }
.vorschau-info { overflow: auto; padding: 16px 24px 24px; background: var(--weiss); border-right: 1px solid var(--rand); display: flex; flex-direction: column; gap: 16px; }
.vorschau-info > .knopf.text { align-self: flex-start; margin-left: -8px; }
.vorschau #map { min-height: 300px; }
.vorschau-titel h1 { font-size: 26px; font-weight: 800; }
.stichwort { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 6px; background: var(--rot); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .5px; }
.info-zeilen { display: grid; gap: 6px; }
.info-zeile { display: grid; grid-template-columns: 20px 80px 1fr; gap: 8px; align-items: start; font-size: 14.5px; }
.info-zeile .icon { color: var(--rot); margin-top: 2px; }
.info-label { color: var(--gedimmt); font-weight: 600; }
.alarmtext { border-left: 5px solid var(--gelb); background: var(--gelb-hell); border-radius: 0 10px 10px 0; padding: 12px 16px; }
.alarmtext h3, .textblock h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.alarmtext p, .textblock p, .leitung p { margin: 0; white-space: pre-wrap; font-size: 14.5px; }
.textblock h3 .icon, .alarmtext h3 .icon { color: var(--rot); }
.gruppen-zaehler { display: flex; flex-wrap: wrap; gap: 6px; }
.gruppen-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--farbe) 12%, white); color: var(--farbe); }
.gruppen-chip strong { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--farbe); color: #fff; font-size: 12px; }
.leitung { border: 1.5px dashed var(--rand); border-radius: 10px; padding: 10px 14px; }
.leitung summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--gedimmt); }
.leitung p { margin-top: 8px; }
.spielen-hinweis { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--flaeche); margin-top: auto; }
.spielen-hinweis > .icon { color: var(--gelb-dunkel); width: 28px; height: 28px; }
.spielen-hinweis p { margin: 2px 0 0; font-size: 13.5px; color: var(--gedimmt); }
.vorschau-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Editor ---------- */
.editor { flex: 1; display: grid; grid-template-columns: 370px 1fr; min-height: 0; }
.seitenleiste { display: flex; flex-direction: column; min-height: 0; background: var(--weiss); border-right: 1px solid var(--rand); }
.leiste-kopf { padding: 14px 16px 10px; border-bottom: 1px solid var(--rand); }
.lage-titel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 10px; min-width: 0; }
.lage-titel > .icon { color: var(--rot); }
#lage-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speicherstatus { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--gedimmt); }
.speicherstatus.ok { color: var(--ok); }
.speicherstatus.warnung { color: #a06a00; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; }

.reiter { display: flex; border-bottom: 1px solid var(--rand); padding: 0 8px; }
.reiter button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--gedimmt); background: none;
  border: 0; border-bottom: 3px solid transparent; padding: 11px 6px 9px; cursor: pointer;
}
.reiter button:hover:not(:disabled) { color: var(--text); }
.reiter button.aktiv { color: var(--rot); border-bottom-color: var(--rot); }
.reiter button:disabled { opacity: .4; cursor: default; }
.reiter-inhalt { flex: 1; overflow: auto; padding: 4px 16px 24px; }

.abschnitt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--anthrazit); margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid var(--rand); }
.abschnitt:first-child { border-top: 0; padding-top: 8px; margin-top: 8px; }
.abschnitt .icon { color: var(--rot); }
.zaehler { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--gelb); color: var(--anthrazit); font-size: 12px; text-align: center; }
.nur-leitung { padding: 2px 12px 12px; border-radius: 10px; background: var(--gelb-hell); border: 1.5px dashed var(--gelb); }

.gruppe { font-size: 12.5px; font-weight: 700; color: var(--farbe); margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.gruppe::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--farbe) 25%, white); }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.palette-knopf {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 6px;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; color: var(--text);
  background: var(--weiss); border: 1.5px solid var(--rand); border-radius: 9px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.palette-knopf:hover { border-color: var(--farbe); background: color-mix(in srgb, var(--farbe) 6%, white); }
.palette-knopf.aktiv { border-color: var(--gelb); background: var(--gelb-hell); box-shadow: 0 0 0 2px var(--gelb); }
.palette-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-knopf .geo { width: 14px; height: 14px; color: #a7a097; }
.chip { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; background: var(--farbe); color: #fff; }
.chip .icon { width: 16px; height: 16px; }
.chip.gross { width: 42px; height: 42px; border-radius: 10px; }
.chip.gross .icon { width: 22px; height: 22px; }

.osm-werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.osm-werkzeuge .knopf { font-size: 13px; padding: 8px; }

.element-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.element-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.element-liste li:hover { background: var(--flaeche); }
.element-liste li.aktiv { background: var(--gelb-hell); box-shadow: inset 3px 0 0 var(--gelb); }
.element-liste li.leer { cursor: default; color: var(--gedimmt); font-size: 13.5px; padding: 12px 4px; }
.element-liste .chip { width: 26px; height: 26px; }
.liste-text { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 500; }
.liste-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-text small { color: var(--gedimmt); font-size: 12px; }

.details-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.details-kopf > div { flex: 1; display: flex; flex-direction: column; }
.details-kopf strong { font-size: 17px; }
.details-kopf small { color: var(--gedimmt); }
.masse { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 4px 10px; border-radius: 6px; background: var(--flaeche); font-size: 13.5px; font-weight: 600; }
.details-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rand); }

.karte-bereich { position: relative; min-height: 0; }
.karte-bereich #map { position: absolute; inset: 0; }
.ortssuche {
  position: absolute; z-index: 800; top: 14px; left: 14px; width: min(380px, calc(100% - 28px));
  display: flex; align-items: center; background: var(--weiss); border-radius: 10px; box-shadow: var(--schatten-hoch);
}
.ortssuche > .icon { position: absolute; left: 12px; color: var(--gedimmt); }
.ortssuche input { border: 0; padding: 11px 12px 11px 40px; border-radius: 10px; }
.suche-treffer { position: absolute; top: calc(100% + 6px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; background: var(--weiss); border-radius: 10px; box-shadow: var(--schatten-hoch); max-height: 50vh; overflow: auto; }
.suche-treffer button { width: 100%; text-align: left; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.suche-treffer button:hover { background: var(--gelb-hell); }
.suche-treffer .leer { padding: 8px 10px; color: var(--gedimmt); font-size: 13.5px; }

.modus {
  position: absolute; z-index: 800; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 28px);
  padding: 10px 10px 10px 18px; border-radius: 12px; background: var(--anthrazit); color: #fff;
  box-shadow: var(--schatten-hoch); border-left: 6px solid var(--gelb); font-size: 14.5px;
}
.modus strong { color: var(--gelb); }
.modus .knopf { flex-shrink: 0; }
kbd { font-family: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rand); color: var(--gedimmt); }
.modus-setzen, .modus-setzen .leaflet-interactive { cursor: crosshair !important; }

/* ---------- Kartensymbole ---------- */
.sym-icon { background: none; border: 0; }
.sym { position: relative; width: 36px; height: 36px; }
.sym-kreis {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--weiss); color: var(--farbe); border: 3px solid var(--farbe);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .1s;
}
.sym-kreis .icon { width: 19px; height: 19px; stroke-width: 2.4; }
.sym-icon:hover .sym-kreis { transform: scale(1.1); }
.ausgewaehlt .sym-kreis { box-shadow: 0 0 0 4px var(--gelb), 0 2px 8px rgba(0, 0, 0, .4); }
.sym.verdeckt .sym-kreis { opacity: .6; border-style: dashed; }
.sym-anzahl { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--anthrazit); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.sym-verdeckt { position: absolute; bottom: -4px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--anthrazit); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.sym-verdeckt .icon { width: 10px; height: 10px; }
.sym-label { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 700; color: var(--anthrazit); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); pointer-events: none; }
.sym-notiz { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px; border-radius: 6px; background: #fff9c4; border: 1.5px solid #e0c200; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); font-size: 13px; font-weight: 700; transform: translate(-50%, -50%); position: absolute; left: 18px; top: 18px; }
.sym-notiz .icon { color: #8a7500; width: 14px; height: 14px; }
.ausgewaehlt .sym-notiz { box-shadow: 0 0 0 3px var(--gelb), 0 2px 6px rgba(0, 0, 0, .3); }
.tip { display: flex; flex-direction: column; }
.tip small { color: var(--gedimmt); }
.tip-verdeckt { color: var(--rot) !important; font-weight: 600; }
.leaflet-container { font-family: var(--schrift); background: #e8e4dc; }

/* ---------- Dialoge & Meldungen ---------- */
.dialog { border: 0; border-radius: 14px; padding: 24px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--schatten-hoch); border-top: 6px solid var(--rot); }
.dialog::backdrop { background: rgba(30, 34, 39, .55); }
.dialog h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 8px; }
.dialog h2 .icon { color: var(--rot); }
.dialog .aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dialog-breit { width: min(620px, calc(100vw - 32px)); }
#meine-liste { max-height: 60vh; overflow: auto; margin-top: 8px; }
.lagen-liste li.aktuell { border-color: var(--rot); }

#meldungen { position: fixed; z-index: 3000; top: 84px; right: 16px; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.meldung { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--anthrazit); color: #fff; font-size: 14.5px; box-shadow: var(--schatten-hoch); border-left: 5px solid var(--gelb); transition: opacity .4s, transform .4s; }
.meldung .icon { margin-top: 2px; }
.meldung-ok { border-left-color: #66bb6a; }
.meldung-ok .icon { color: #66bb6a; }
.meldung-fehler { border-left-color: #ef5350; }
.meldung-fehler .icon { color: #ef5350; }
.meldung.weg { opacity: 0; transform: translateX(20px); }

/* ---------- Admin ---------- */
.tabelle { overflow-x: auto; padding: 8px 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--gedimmt); padding: 12px 8px; border-bottom: 2px solid var(--rand); }
td { padding: 10px 8px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.tabellen-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.status { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: #e8f5e9; color: var(--ok); }
.status-pending { background: var(--gelb-hell); color: #7a5d00; }
.status-locked { background: var(--rot-hell); color: var(--rot); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .info-block, .kacheln, .spielen-raster { grid-template-columns: 1fr; }
  .info-bild { min-height: 220px; order: -1; }
  .info-text { padding: 26px 22px; }
  body.vollbild { height: auto; overflow: auto; }
  .editor { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .karte-bereich { order: -1; }
  .seitenleiste { border-right: 0; border-top: 1px solid var(--rand); }
  .vorschau { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; }
  .vorschau #map { order: -1; }
}
@media (max-width: 560px) {
  .kopf { padding: 8px 16px; }
  .kopf-knopf span, .kopf-benutzer span { display: none; }
  .start, .seite { padding: 20px 16px 32px; }
  .kachel-inhalt { padding: 34px 20px 22px; }
  .vorschau-aktionen { grid-template-columns: 1fr; }
}

/* ---------- Animation (Karte mit Klasse .animiert) ---------- */
.anim-kontrolle { display: flex; gap: 6px; margin-bottom: 4px !important; }
.anim-knopf, .wind-anzeige {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: 8px; border: 0; background: var(--weiss); color: var(--text);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3); cursor: pointer;
}
.anim-knopf { background: var(--anthrazit); color: #fff; }
.anim-knopf .icon { color: var(--gelb); }
.anim-knopf.aus { background: var(--weiss); color: var(--text); }
.anim-knopf.aus .icon { color: var(--rot); }
.wind-pfeil { color: #1565c0; transition: transform .4s; }
.anim-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }

.sym-effekt { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.sym-kreis { position: relative; }

/* Feuer und Rauch: Symbol wird durch die Animation ersetzt, bleibt aber anklickbar */
.animiert :is(.anim-feuer, .anim-rauch) .sym-kreis { opacity: .6; transition: opacity .15s; }
.animiert .sym-icon:hover :is(.anim-feuer, .anim-rauch) .sym-kreis,
.animiert .ausgewaehlt :is(.anim-feuer, .anim-rauch) .sym-kreis { opacity: 1; }

@keyframes welle { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
@keyframes puls { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.7); opacity: 0; } }
@keyframes blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes flackern { 0%, 100% { opacity: .15; } 20% { opacity: .9; } 25% { opacity: .2; } 60% { opacity: .7; } 65% { opacity: .1; } }
@keyframes lache { from { transform: scale(.8); } to { transform: scale(1.15); } }
@keyframes fluss { to { stroke-dashoffset: -48; } }
@keyframes flaeche-puls { 0%, 100% { fill-opacity: .12; } 50% { fill-opacity: .4; } }
@keyframes glut-flaeche { 0%, 100% { fill-opacity: .3; } 30% { fill-opacity: .5; } 60% { fill-opacity: .25; } 80% { fill-opacity: .45; } }

/* Wasser: Wellen */
.animiert :is(.anim-hydrant, .anim-wasserentnahme) .sym-effekt { border: 3px solid #29b6f6; animation: welle 2.2s ease-out infinite; }

/* Personen und Tiere: Puls nach Dringlichkeit */
.animiert :is(.anim-person, .anim-tiere, .anim-anrufer) .sym-effekt { background: var(--farbe); animation: puls 2.6s ease-in-out infinite; }
.animiert :is(.zustand-vermisst, .zustand-eingeschlossen, .zustand-schwer-verletzt) .sym-effekt { background: #e53935; animation-duration: 1.1s; }
.animiert .zustand-leicht-verletzt .sym-effekt { background: #fb8c00; animation-duration: 1.8s; }
.animiert .zustand-unverletzt .sym-effekt { background: #43a047; animation-duration: 3.2s; }
.animiert .zustand-verstorben .sym-effekt { animation: none; }
:is(.zustand-vermisst, .zustand-eingeschlossen, .zustand-schwer-verletzt) .sym-kreis { border-color: #c62828; color: #c62828; }

/* Gefahrstoff: Warnpuls */
.animiert .anim-gefahrstoff .sym-effekt { background: #ff9800; animation: puls 1.4s ease-in-out infinite; }
.animiert .anim-gefahrstoff.mit-austritt .sym-effekt { background: #9ccc65; }

/* Verkehrsunfall: Warnblinker, ggf. Betriebsstoff-Lache */
/* Blinker am Symbolkreis, damit sie fest sitzen, während die Lache pulsiert */
.animiert .anim-unfall .sym-kreis::before, .animiert .anim-unfall .sym-kreis::after {
  content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%;
  background: #ffb300; box-shadow: 0 0 10px 4px rgba(255, 179, 0, .8); animation: blinken .9s steps(1) infinite;
}
.animiert .anim-unfall .sym-kreis::before { left: -9px; }
.animiert .anim-unfall .sym-kreis::after { right: -9px; }
.anim-unfall.mit-betriebsstoffen .sym-effekt { inset: -14px -20px -10px -12px; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 40% 40%, rgba(60, 40, 90, .55), rgba(20, 20, 30, .35) 60%, transparent 72%); }
.animiert .anim-unfall.mit-betriebsstoffen .sym-effekt { animation: lache 6s ease-in-out infinite alternate; }

/* PV / Batteriespeicher: elektrisches Flackern */
.animiert .anim-pv .sym-effekt { box-shadow: 0 0 14px 6px rgba(243, 187, 4, .85); animation: flackern 2.4s linear infinite; }

/* Flächen und Linien */
.animiert path.form-zufahrt { stroke-dasharray: 16 8; animation: fluss 1.2s linear infinite; }
.animiert path.form-absperrung { stroke-dasharray: 12 12; animation: fluss 2.4s linear infinite; }
.animiert path.form-sperrung { animation: blinken 1.2s steps(1) infinite; }
.animiert path.form-gefahrenbereich { animation: flaeche-puls 2.4s ease-in-out infinite; }
.animiert path.form-ueberflutung { stroke-dasharray: 6 10; animation: fluss 4s linear infinite, flaeche-puls 5s ease-in-out infinite; }
.animiert path.form-brandbereich { animation: glut-flaeche 1.6s ease-in-out infinite; }
.animiert path.form-rauchbereich { fill-opacity: .12; }

@media (prefers-reduced-motion: reduce) {
  .animiert .sym-effekt, .animiert .sym-effekt::before, .animiert .sym-effekt::after, .animiert path.form { animation: none !important; }
}

/* ---------- Editor: Anfahrt ---------- */
.anfahrt { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--flaeche); display: grid; gap: 8px; }
.anfahrt h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.anfahrt h4 .icon { color: var(--rot); }
.anfahrt .knopf { justify-self: start; }
.anfahrt-ergebnis { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.anfahrt-zeile { display: flex; align-items: center; gap: 8px; }
.anfahrt-zeile .icon { color: #1565c0; }
.spielen-hinweis.warnung { background: var(--rot-hell); }
.spielen-hinweis.warnung > .icon { color: var(--rot); }

/* ---------- Spiel ---------- */
.spiel-seite { background: var(--anthrazit); }
.spiel-seite #map { position: fixed; inset: 0; }
.knopf.gross { font-size: 17px; padding: 14px 24px; border-radius: 10px; }
.knopf.gelb:hover { background: #ffc928; border-color: #ffc928; }

.hud-oben {
  position: fixed; z-index: 1000; top: 12px; left: 12px; right: 12px;
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px;
  padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(30, 34, 39, .92); color: #fff;
  box-shadow: var(--schatten-hoch); border-bottom: 3px solid var(--gelb); backdrop-filter: blur(6px);
}
.hud-marke .logo { width: 38px; height: 38px; }
.hud-lage { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-lage strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-lage .stichwort { margin: 0; flex-shrink: 0; }
.hud-uhr { display: flex; flex-direction: column; align-items: center; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .15); border-right: 1px solid rgba(255, 255, 255, .15); }
.hud-uhr strong { font-family: ui-monospace, Consolas, monospace; font-size: 22px; color: var(--gelb); letter-spacing: 1px; line-height: 1.1; }
.hud-uhr small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.hud-rechts { display: flex; align-items: center; gap: 10px; }
.hud-status { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #ffe08a; }
.hud-rechts .knopf { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.hud-rechts .knopf:hover { background: rgba(255, 255, 255, .1); }

.hud-unten {
  position: fixed; z-index: 1000; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 6px; border-radius: 99px; background: rgba(30, 34, 39, .92); box-shadow: var(--schatten-hoch);
  max-width: calc(100vw - 32px); overflow-x: auto;
}
.hud-unten:empty { display: none; }
.hud-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.hud-chip + .hud-chip { border-left: 1px solid rgba(255, 255, 255, .12); border-radius: 0 99px 99px 0; }
.hud-chip .icon { color: var(--gelb); width: 18px; height: 18px; }
.hud-chip .wind-pfeil { color: #64b5f6; }
.spiel-seite .anim-kontrolle { margin-bottom: 70px !important; }
.spiel-seite .leaflet-bottom.leaflet-right { margin-bottom: 70px; }

.spiel-karte {
  position: fixed; z-index: 1001; top: 92px; right: 12px; width: min(380px, calc(100vw - 24px));
  padding: 18px 20px; border-radius: 14px; background: var(--weiss); box-shadow: var(--schatten-hoch);
  border-left: 6px solid var(--rot); animation: einblenden .3s ease-out;
}
.spiel-karte-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.spiel-karte-kopf h2 { font-size: 18px; }
.spiel-karte-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--rot); color: #fff; flex-shrink: 0; }
.spiel-karte p { margin: 6px 0; font-size: 14.5px; }
.spiel-karte .aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-8px); } }
.fortschritt { height: 6px; border-radius: 99px; background: var(--flaeche); overflow: hidden; margin-top: 12px; }
.fortschritt span { display: block; height: 100%; width: 100%; background: var(--gelb); transform-origin: left; animation: fortschritt 4s linear forwards; }
@keyframes fortschritt { from { transform: scaleX(0); } }
.bewertung { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.bewertung li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.bewertung .icon { margin-top: 2px; }
.bewertung-ok { background: #e8f5e9; } .bewertung-ok .icon { color: var(--ok); }
.bewertung-warnung { background: var(--rot-hell); } .bewertung-warnung .icon { color: var(--rot); }
.bewertung-info { background: var(--flaeche); } .bewertung-info .icon { color: #1565c0; }

/* Fahrzeug */
.fahrzeug-icon { background: none; border: 0; }
.fahrzeug { position: relative; width: 44px; height: 44px; }
.fahrzeug-koerper { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 10px; background: var(--rot); color: #fff; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.fahrzeug-koerper .icon { width: 20px; height: 20px; }
.fahrzeug-label { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 5px; background: var(--anthrazit); color: var(--gelb); font-size: 12px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.blaulicht { position: absolute; inset: -14px; border-radius: 50%; opacity: 0; pointer-events: none; }
.einsatzfahrt .blaulicht { animation: blaulicht .7s linear infinite; }
@keyframes blaulicht {
  0%, 20% { opacity: 1; background: radial-gradient(circle at 30% 50%, rgba(33, 150, 243, .9), rgba(33, 150, 243, 0) 45%); }
  21%, 49% { opacity: 0; }
  50%, 70% { opacity: 1; background: radial-gradient(circle at 70% 50%, rgba(33, 150, 243, .9), rgba(33, 150, 243, 0) 45%); }
  71%, 100% { opacity: 0; }
}
.wahl-marker { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 3px dashed var(--gelb); background: rgba(168, 45, 36, .35); color: #fff; animation: puls-rand 1.2s ease-in-out infinite; }
@keyframes puls-rand { 50% { transform: scale(1.12); } }
.nebel-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(14, 18, 26, .78); backdrop-filter: blur(3px); }
.start-karte { width: min(520px, 100%); padding: 32px; border-radius: 18px; background: var(--weiss); box-shadow: var(--schatten-hoch); border-top: 6px solid var(--rot); }
.start-karte h1 { font-size: 28px; font-weight: 800; margin: 10px 0 6px; }
.start-karte .lead { margin-bottom: 18px; }
.start-ablauf { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.start-ablauf li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.start-ablauf .icon { color: var(--rot); }
.start-karte .knopf.gross { width: 100%; margin-top: 4px; }
.start-karte .hinweis { text-align: center; margin: 10px 0 0; }

/* Meldeempfänger */
.overlay.alarm { background: radial-gradient(circle at 50% 40%, rgba(168, 45, 36, .55), rgba(14, 18, 26, .92) 70%); }
.pager-bereich { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pager {
  position: relative; width: min(360px, calc(100vw - 32px)); padding: 26px 22px 24px;
  border-radius: 40px 40px 30px 30px; background: linear-gradient(160deg, #4a5058, #23272c 55%, #17191c);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -4px 0 rgba(0, 0, 0, .4);
}
.pager-clip { position: absolute; top: -14px; left: 50%; width: 120px; height: 22px; transform: translateX(-50%); border-radius: 10px 10px 4px 4px; background: linear-gradient(#2d3136, #1a1c1f); }
.pager-kopf { display: flex; align-items: center; gap: 10px; margin: 0 6px 14px; }
.pager-led { width: 12px; height: 12px; border-radius: 50%; background: #ff1744; box-shadow: 0 0 12px 3px rgba(255, 23, 68, .8); animation: blinken .5s steps(1) infinite; }
.pager-name { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; color: rgba(255, 255, 255, .5); }
.pager-display {
  min-height: 210px; max-height: 50vh; overflow: auto; padding: 14px 16px; border-radius: 10px;
  background: linear-gradient(160deg, #e9b949, #d69e2e); color: #2a1d00;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; line-height: 1.35;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45), 0 0 0 4px #101214;
}
.pager-zeile { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.pager-zeile.pager-oben { padding-bottom: 6px; border-bottom: 2px solid rgba(42, 29, 0, .35); animation: blinken 1s steps(1) infinite; }
.pager-zeile.pager-unten { margin-top: 10px; padding-top: 6px; border-top: 2px solid rgba(42, 29, 0, .35); }
.pager-stichwort { font-size: 30px; font-weight: 900; letter-spacing: 1px; margin: 8px 0 4px; }
.pager-text { margin: 4px 0; white-space: pre-wrap; text-transform: uppercase; }
.pager-text.adresse { font-weight: 800; }
.pager-tasten { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.pager-tasten span { width: 34px; height: 14px; border-radius: 99px; background: linear-gradient(#3a3f45, #202327); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 3px rgba(0, 0, 0, .5); }
.pager-tasten .haupt { width: 54px; background: linear-gradient(#c0392b, #8e2219); }
.pager.vibriert { animation: vibrieren .12s linear infinite; }
@keyframes vibrieren { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.6deg); } 50% { transform: translate(2px, -1px) rotate(.6deg); } 75% { transform: translate(-1px, -1px) rotate(-.3deg); } }

@media (max-width: 760px) {
  .hud-oben { grid-template-columns: auto 1fr auto auto; }
  .hud-rechts .hud-status { display: none; }
  .hud-uhr { border-right: 0; padding-right: 0; }
  .hud-rechts .knopf span, .hud-rechts .knopf { font-size: 0; gap: 0; padding: 8px; }
  .hud-rechts .knopf .icon { font-size: 16px; }
  .spiel-karte { top: auto; bottom: 80px; left: 12px; right: 12px; width: auto; max-height: 45vh; overflow: auto; }
}

/* ---------- Editor: Dialog und Brandverlauf ---------- */
.block-editor { margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--flaeche); border: 1.5px solid var(--rand); display: grid; gap: 8px; }
.block-editor > label { margin: 4px 0 0; }
.block-titel { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.block-titel .icon { color: var(--rot); }
.block-editor .hinweis { margin: 0; }
.block-editor > .knopf { justify-self: start; }
.listen-karte { display: grid; gap: 6px; padding: 10px; border-radius: 9px; background: var(--weiss); border: 1.5px solid var(--rand); }
.listen-karte label { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 12.5px; }
.listen-karte-kopf { display: flex; align-items: center; margin: -4px -4px 0 0; }
.listen-karte-kopf .knopf-icon { width: 28px; height: 28px; }
.nummer { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--rot); }
.stufe-zeile { display: grid; grid-template-columns: auto 80px auto; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.funk-standard { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.funk-standard li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--weiss); border: 1.5px solid var(--rand); font-size: 13.5px; }
.funk-standard li > .icon { flex: none; margin-top: 2px; color: var(--rot); }
.funk-standard span { display: grid; gap: 1px; }
.funk-standard small { color: var(--gedimmt); font-size: 12.5px; }

/* ---------- Spiel: Zeitraffer, Seitenpanel, Gespräch ---------- */
.tempo-knopf { font: inherit; font-weight: 800; font-size: 14px; min-width: 44px; padding: 6px 10px; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; cursor: pointer; }
.tempo-knopf:hover { background: rgba(255, 255, 255, .1); }
.tempo-knopf.aktiv { background: var(--gelb); border-color: var(--gelb); color: var(--anthrazit); }
.spiel-karte.panel-offen { right: 424px; } /* Aufforderung bleibt sichtbar, links neben dem Seitenpanel */
.spiel-karte .hinweis .icon { vertical-align: -3px; }

.seitenpanel {
  position: fixed; z-index: 1002; top: 92px; right: 12px; bottom: 80px; width: min(400px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: 14px; background: var(--weiss); box-shadow: var(--schatten-hoch);
  overflow: hidden; animation: einblenden .25s ease-out; border-top: 5px solid var(--gelb);
}
.panel-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--rand); }
.panel-titel { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.panel-titel > div { display: flex; flex-direction: column; min-width: 0; }
.panel-titel strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-titel small { color: var(--gedimmt); }
.panel-inhalt { flex: 1; overflow: auto; padding: 14px 16px; background: var(--flaeche); }
.panel-fuss { display: grid; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--rand); max-height: 45%; overflow: auto; }
.panel-fuss > .knopf.klein { justify-self: end; }
.panel-fuss .hinweis { margin: 0; }

.chat { display: flex; flex-direction: column; gap: 8px; }
.blase { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.blase-person { align-self: flex-start; background: var(--weiss); border-bottom-left-radius: 4px; }
.blase-ich { align-self: flex-end; background: var(--rot); color: #fff; border-bottom-right-radius: 4px; }
.blase-info { align-self: center; max-width: 95%; display: flex; gap: 8px; align-items: flex-start; background: var(--gelb-hell); border: 1px solid var(--gelb); font-size: 13.5px; font-weight: 600; }
.blase-info .icon { color: var(--gelb-dunkel); margin-top: 2px; }
.blase.tippt { display: flex; gap: 4px; padding: 12px 14px; }
.blase.tippt i { width: 7px; height: 7px; border-radius: 50%; background: #b0a99f; animation: tippen 1s ease-in-out infinite; }
.blase.tippt i:nth-child(2) { animation-delay: .15s; }
.blase.tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.frage-knopf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--rand); background: var(--weiss); color: var(--text); cursor: pointer; }
.frage-knopf:hover:not(:disabled) { border-color: var(--rot); background: var(--rot-hell); }
.frage-knopf:disabled { opacity: .5; cursor: wait; }
.frage-knopf .icon { color: var(--rot); }

.panel-inhalt .info-zeile { grid-template-columns: 20px 90px 1fr; }
.wasser-status { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; }
.wasser-status.ok { display: flex; align-items: center; gap: 8px; color: var(--ok); padding: 10px 12px; border-radius: 10px; background: #e8f5e9; }
.wasser-status .fortschritt { margin-top: 0; }
.wasser-status .fortschritt span { background: #1e88e5; transition: transform .2s linear; }

.meldung-lage { border-left-color: var(--gelb); }
.meldung-lage .icon { color: var(--gelb); }
.spiel-seite #meldungen { top: auto; bottom: 76px; right: auto; left: 16px; }

@media (max-width: 760px) {
  .seitenpanel { top: auto; bottom: 76px; left: 12px; right: 12px; width: auto; height: 60vh; }
}

/* ---------- Spiel: Funkgerät ---------- */
.funkgeraet {
  position: fixed; z-index: 1001; left: 18px; top: 140px; width: 88px; height: 236px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; transition: transform .15s; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}
.funkgeraet:hover { transform: translateY(-3px) rotate(-1.5deg); }
.funkgeraet:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; border-radius: 16px; }
.funk-antenne { position: absolute; top: -44px; right: 14px; width: 13px; height: 54px; border-radius: 7px 7px 3px 3px; background: linear-gradient(90deg, #1b1d20, #3a3f45 50%, #1b1d20); }
.funk-drehknopf { position: absolute; top: -12px; left: 16px; width: 22px; height: 18px; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(90deg, #2a2e33 0 2px, #444a51 2px 4px); }
.funk-koerper {
  position: absolute; inset: 0; border-radius: 16px 16px 22px 22px; padding: 12px 9px;
  background: linear-gradient(160deg, #3d434a, #1f2226 60%, #141618); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
}
.funk-led { align-self: flex-end; width: 9px; height: 9px; border-radius: 50%; background: #2e7d32; box-shadow: 0 0 6px #43a047; }
.funkgeraet.neu .funk-led { background: var(--gelb); box-shadow: 0 0 10px 3px rgba(243, 187, 4, .8); animation: blinken .6s steps(1) infinite; }
.funk-display {
  display: flex; flex-direction: column; padding: 5px 6px; border-radius: 5px; background: linear-gradient(160deg, #a5d6a7, #81c784);
  color: #10301a; font-family: ui-monospace, Consolas, monospace; line-height: 1.15; text-align: left; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 0 0 2px #0d0f11;
}
.funk-display strong { font-size: 10px; letter-spacing: .3px; }
.funk-display small { font-size: 8.5px; }
.funk-lautsprecher { height: 46px; border-radius: 6px; background: repeating-linear-gradient(0deg, #0e1012 0 3px, #2c3035 3px 6px); }
.funk-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.funk-tasten i { height: 12px; border-radius: 3px; background: linear-gradient(#4a5058, #2a2e33); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.funk-ptt { position: absolute; left: -6px; top: 70px; width: 7px; height: 46px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, #0e0f11, #2d3136); }
.funk-label { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; background: var(--anthrazit); color: var(--gelb); font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.funkgeraet.neu .funk-label { background: var(--gelb); color: var(--anthrazit); }
.funk-zeit { display: block; font-size: 11px; font-weight: 700; opacity: .65; margin-bottom: 2px; }

/* ---------- Spiel: Besatzung ---------- */
.einheiten {
  position: fixed; z-index: 1001; left: 12px; top: 410px; width: 230px; padding: 10px 12px; border-radius: 12px;
  background: rgba(30, 34, 39, .92); color: #fff; box-shadow: var(--schatten-hoch); display: grid; gap: 6px;
}
.einheiten h3 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gelb); margin-bottom: 2px; }
.einheit-zeile { display: flex; align-items: center; gap: 10px; }
.einheit-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.einheit-text strong { font-size: 13px; }
.einheit-text small { font-size: 12px; color: rgba(255, 255, 255, .65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-taetig .einheit-text small, .status-unterwegs .einheit-text small { color: #ffe08a; }

.einheit-icon { background: none; border: 0; }
.einheit { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 2.5px solid #fff; font-size: 11px; font-weight: 900; color: #fff; background: #1565c0; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.einheit-gf { background: var(--gelb); color: var(--anthrazit); }
.einheit-at { background: var(--rot); }
.einheit-wt { background: #1565c0; }
.einheit-st { background: #2e7d32; }

/* ---------- Spiel: Kreismenü ---------- */
.kreis { position: absolute; z-index: 1500; width: 0; height: 0; }
.kreis::before {
  content: ""; position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%; border: 2px dashed rgba(243, 187, 4, .8); background: radial-gradient(circle, rgba(30, 34, 39, .35), rgba(30, 34, 39, .05) 70%);
  animation: kreis-auf .2s ease-out;
}
.kreis-mitte {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--gelb);
  background: var(--anthrazit); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--schatten-hoch);
}
.kreis-item {
  position: absolute; left: 0; top: 0; width: 92px; min-height: 66px; padding: 7px 6px;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 14px; border: 2px solid transparent; background: var(--weiss); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: kreis-item .22s ease-out backwards; animation-delay: calc(var(--i) * 30ms);
}
.kreis-item .icon { width: 20px; height: 20px; color: var(--rot); }
.kreis-item small { font-size: 10.5px; font-weight: 600; color: var(--gedimmt); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Das Kästchen unter der Maus liegt über den Nachbarn */
.kreis-item:hover, .kreis-item:focus-visible { z-index: 2; }
.kreis-item:hover:not(:disabled) { border-color: var(--gelb); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.06); }
.kreis-item.primaer { background: var(--rot); color: #fff; }
.kreis-item.primaer .icon, .kreis-item.primaer small { color: #ffe08a; }
.kreis-item:disabled { opacity: .5; cursor: not-allowed; }
@keyframes kreis-auf { from { transform: scale(.4); opacity: 0; } }
@keyframes kreis-item { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

@media (max-width: 760px) {
  .funkgeraet { top: auto; bottom: 150px; left: 12px; transform: scale(.7); transform-origin: bottom left; }
  .einheiten { top: auto; bottom: 76px; left: auto; right: 12px; width: 200px; }
}

/* ---------- Spiel: Tank, Straßensperre, Trupp-Funk ---------- */
.hud-knoepfe { display: flex; gap: 6px; }
.tipps-schalter { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; user-select: none; }
.tipps-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.tipps-schalter .regler { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .25); transition: background .15s; }
.tipps-schalter .regler::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tipps-schalter input:checked + .regler { background: var(--gelb); }
.tipps-schalter input:checked + .regler::after { transform: translateX(14px); }
.tipps-schalter input:focus-visible + .regler { outline: 2px solid #fff; outline-offset: 2px; }
.tipp-karte { display: grid; gap: 12px; width: min(460px, 100%); padding: 28px; border-radius: 18px; background: var(--weiss); box-shadow: var(--schatten-hoch); border-top: 6px solid var(--gelb); }
.tipp-karte h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 800; }
.tipp-karte h2 .icon { flex: none; color: var(--rot); }
.tipp-karte p { margin: 0; }
.tipp-karte .knopf { width: 100%; margin-top: 4px; }
.tipp-karte p.alpha-recht { font-size: 13px; color: var(--gedimmt); }
.overlay.alpha-hinweis, .overlay.handy-hinweis { z-index: 2500; } /* auch über dem Startbildschirm des Spiels */
body.tipp-offen .hud-oben { z-index: 2100; } /* Der Schalter bleibt während eines Tipps erreichbar */
@media (max-width: 560px) { .tipps-label { display: none; } }
#btn-ton { display: grid; place-items: center; min-width: 40px; }
.tank { display: grid; gap: 4px; padding: 8px 10px; margin-bottom: 2px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.tank-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.tank-kopf .icon { color: #64b5f6; }
.tank-kopf small { margin-left: auto; font-size: 11px; color: #81c784; font-weight: 700; text-transform: uppercase; }
.tank-balken { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.tank-balken span { display: block; height: 100%; background: linear-gradient(90deg, #1e88e5, #64b5f6); transform-origin: left; transition: transform .3s linear; }
.tank.knapp .tank-balken span { background: #ef5350; }
.tank.knapp .tank-kopf .icon { color: #ef5350; }

.huetchen-icon { background: none; border: 0; }
.huetchen {
  width: 14px; height: 18px; clip-path: polygon(50% 0, 100% 85%, 100% 100%, 0 100%, 0 85%);
  background: linear-gradient(#ff6d00 0 30%, #fff 30% 45%, #ff6d00 45% 65%, #fff 65% 78%, #ff6d00 78% 88%, #263238 88%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}

.blase-trupp { align-self: flex-start; background: #fff3e0; border: 1px solid #ffb74d; border-bottom-left-radius: 4px; }

/* ---------- Editor: Schieberegler Ausbreitung ---------- */
.slider { width: 100%; padding: 0; border: 0; accent-color: var(--rot); background: none; }
.slider-wert { display: block; font-size: 14px; color: var(--rot); }
.slider-skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--gedimmt); margin-top: -2px; }
.vollbrand-hinweis { margin: 6px 0 0; }
.vollbrand-hinweis .icon { vertical-align: -3px; color: var(--rot); }

/* ---------- Spiel: Brandlage ---------- */
.brandlage { display: grid; gap: 6px; }
.brandlage + h3 { margin-top: 6px; }
.brand-zeile { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.brand-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.brand-kopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-kopf small { margin-left: auto; flex-shrink: 0; font-size: 11px; color: #ffab91; font-weight: 700; text-transform: uppercase; }
.brand-balken { position: relative; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.brand-balken span { display: block; height: 100%; background: linear-gradient(90deg, #ffb300, #e53935); transform-origin: left; transition: transform .3s linear; }
.brand-balken::after { content: ""; position: absolute; left: 75%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .55); } /* Vollbrand */
.brand-info { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.brand-info strong { color: #ffe08a; font-variant-numeric: tabular-nums; }
.brand-zeile.vollbrand .brand-info strong { color: #ef5350; }
.brand-zeile.rueck .brand-balken span { background: linear-gradient(90deg, #42a5f5, #81c784); }
.brand-zeile.rueck .brand-info strong { color: #81c784; }

/* ---------- Spiel: Besatzungsleiste ---------- */
.leiste-teil { display: grid; gap: 6px; }
#leiste-brand:not(:empty) + .leiste-teil { margin-top: 8px; }
.leiste-knopf { justify-content: center; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.leiste-knopf:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Spiel: Sprechblase am Funkgerät ---------- */
.funk-blase {
  position: absolute; left: calc(100% + 14px); top: 40px; width: max-content; max-width: 220px; padding: 9px 13px;
  border-radius: 12px; background: var(--gelb); color: var(--anthrazit); font-size: 13.5px; font-weight: 800; line-height: 1.25; text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: blase-auf .25s ease-out, blase-puls 1.6s ease-in-out .25s infinite;
}
.funk-blase::before { content: ""; position: absolute; left: -8px; top: 14px; border: 8px solid transparent; border-left: 0; border-right-color: var(--gelb); }
@keyframes blase-auf { from { opacity: 0; transform: translateX(-8px) scale(.9); } }
@keyframes blase-puls { 50% { transform: scale(1.04); } }

/* ---------- Spiel: Infofeld oben rechts ---------- */
.infos {
  position: fixed; z-index: 1003; top: 92px; right: 12px; width: min(360px, calc(100vw - 24px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-height: calc(100vh - 180px); overflow: auto;
}
.infos > * { pointer-events: auto; }
.spiel-karte:not(.hidden) ~ .infos { right: 404px; }
.seitenpanel:not(.hidden) ~ .infos { right: 424px; }
.spiel-karte.panel-offen:not(.hidden) ~ .infos { right: 816px; }
/* Zu schmal für drei Spalten: die Aufforderung liegt über dem Seitenpanel */
@media (max-width: 1220px) {
  .spiel-karte.panel-offen { right: 12px; z-index: 1004; }
  .spiel-karte.panel-offen:not(.hidden) ~ .infos { right: 424px; }
}
.info-icons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.info-icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--farbe-info, var(--gelb));
  background: rgba(30, 34, 39, .92); color: var(--farbe-info, var(--gelb)); cursor: pointer; box-shadow: var(--schatten-hoch); animation: einblenden .25s ease-out;
}
.info-icon:hover { transform: scale(1.08); }
.info-icon .icon { width: 18px; height: 18px; }
.info-karte {
  width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--weiss); box-shadow: var(--schatten-hoch);
  border-left: 6px solid var(--farbe-info, var(--gelb)); display: grid; gap: 6px; animation: einblenden .3s ease-out; font-size: 14px;
}
.info-kopf { display: flex; align-items: center; gap: 8px; }
.info-kopf .icon { color: var(--farbe-info, var(--gelb)); }
.info-kopf small { margin-left: auto; color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.info-karte p { margin: 0; }
.info-karte .bewertung { margin: 0; }
.info-karte > .knopf { justify-self: end; }
.info-ok { --farbe-info: #43a047; }
.info-warnung { --farbe-info: #e53935; }
.info-brand { --farbe-info: #fb8c00; }
.info-lage { --farbe-info: #f3bb04; }
.spiel-seite #meldungen { top: auto; bottom: 76px; right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 760px) {
  .infos, .spiel-karte:not(.hidden) ~ .infos, .seitenpanel:not(.hidden) ~ .infos, .spiel-karte.panel-offen:not(.hidden) ~ .infos { right: 12px; top: 84px; max-height: 40vh; }
  .funk-blase { left: calc(100% + 6px); max-width: 160px; }
}
.feld-einheit { font-weight: 400; color: var(--gedimmt); }
.brand-info { flex-wrap: wrap; }
.brand-info > :last-child { white-space: nowrap; margin-left: auto; }
.einheiten > *, .leiste-teil > *, .brandlage > * { min-width: 0; }

/* ---------- Spiel: Lüfter ---------- */
.luefter-icon { background: none; border: 0; }
.luefter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; background: #37474f; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.luefter .icon { width: 18px; height: 18px; animation: luefter-dreht .6s linear infinite; }
@keyframes luefter-dreht { to { transform: rotate(360deg); } }
.rauch-funk em { color: var(--text); }
.rauch-funk .icon { vertical-align: -3px; color: var(--rot); }

/* ---------- Spiel: Trupps an der Wasserentnahme ---------- */
.trupp-knopf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--rand); background: var(--weiss); color: var(--text); cursor: pointer; }
.trupp-knopf:hover:not(:disabled) { border-color: var(--rot); background: var(--rot-hell); }
.trupp-knopf:disabled { opacity: .55; cursor: default; }
.trupp-knopf.empfohlen { border-color: #1565c0; }
.trupp-knopf .einheit { box-shadow: none; }
.trupp-knopf-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.trupp-knopf-text strong { font-size: 14px; }
.trupp-knopf-text small { font-size: 12.5px; color: var(--gedimmt); }
.trupp-knopf.beschaeftigt .trupp-knopf-text small { color: #b26a00; }
.rueckfrage { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: #fff8e1; border: 1.5px solid #ffca28; font-size: 14px; }
.rueckfrage p { margin: 0; }
.rueckfrage .icon { vertical-align: -3px; color: #b26a00; }
.rueckfrage .aktionen { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Spiel: nachrückende Kräfte ---------- */
.fahrzeug.nachrueckend .fahrzeug-koerper { background: #37474f; }
/* Fahrzeugarten: Rettungsdienst weiß mit Leuchtfarbe, Polizei blau */
.fahrzeug.kraft-rtw .fahrzeug-koerper { background: #fff; color: #c62828; border-color: #c62828; }
.fahrzeug.kraft-nef .fahrzeug-koerper { background: #fff; color: #e65100; border-color: #ef6c00; }
.fahrzeug.kraft-pol .fahrzeug-koerper { background: #1565c0; color: #fff; }
.sym.kraft-fw .sym-kreis { color: #a82d24; border-color: #a82d24; }
.sym.kraft-rtw .sym-kreis { background: #fff; color: #c62828; border-color: #c62828; }
.sym.kraft-nef .sym-kreis { background: #fff; color: #e65100; border-color: #ef6c00; }
.sym.kraft-pol .sym-kreis { background: #1565c0; color: #fff; border-color: #fff; }

/* ---------- Spiel: Kräfte nachfordern ---------- */
.nachforderung-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nachforderung-knopf { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 9px; border: 1.5px solid var(--rand); background: var(--weiss); color: var(--text); cursor: pointer; }
.nachforderung-knopf:hover { border-color: var(--rot); background: var(--rot-hell); }
.nachforderung-icon { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: #37474f; color: #fff; }
.nachforderung-icon .icon { width: 16px; height: 16px; }
.kraft-rtw .nachforderung-icon { background: #fff; color: #c62828; border: 2px solid #c62828; }
.kraft-nef .nachforderung-icon { background: #fff; color: #e65100; border: 2px solid #ef6c00; }
.kraft-pol .nachforderung-icon { background: #1565c0; }
.fahrzeug.platzhalter .fahrzeug-koerper { opacity: .6; border-style: dashed; box-shadow: none; }
.fahrzeug-eintreffen { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 6px; border-radius: 5px; background: rgba(30, 34, 39, .8); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-fuss.gross { max-height: 78%; }

/* ---------- Tutorial ---------- */
.tutorial { display: grid; gap: 28px; }
.tutorial .seiten-kopf { margin-bottom: 0; }
.tut-schnellstart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tut-karte { display: grid; gap: 6px; padding: 20px; border-radius: 14px; background: var(--weiss); box-shadow: var(--schatten); border: 1.5px solid transparent; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.tut-karte:hover { border-color: var(--gelb); transform: translateY(-2px); }
.tut-karte .kachel-icon { position: static; width: 44px; height: 44px; margin-bottom: 6px; }
.tut-karte .kachel-icon .icon { width: 22px; height: 22px; }
.tut-karte small { color: var(--gedimmt); }
.tut-teil { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; margin-top: 12px; padding-top: 20px; border-top: 2px solid var(--rand); scroll-margin-top: 16px; }
.tut-teil .icon { color: var(--rot); }
.tut-schritt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; align-items: center; }
.tut-schritt:nth-of-type(even) .tut-text { order: 2; }
.tut-text h3 { font-size: 20px; margin: 4px 0 10px; }
.tut-text p, .tut-text li { color: var(--gedimmt); }
.tut-text ul { padding-left: 20px; margin: 8px 0; display: grid; gap: 4px; }
.tut-text strong { color: var(--text); }
.tut-nummer { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--rot); }
.tut-bild { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--schatten-hoch); border: 1px solid var(--rand); background: var(--weiss); }
.tut-bild img { display: block; width: 100%; height: auto; }
.tut-hinweise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tut-hinweise .option { background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); padding: 18px; }
.tut-abschluss p { color: var(--gedimmt); margin: 0 0 16px; }
@media (max-width: 900px) {
  .tut-schnellstart, .tut-hinweise, .tut-schritt { grid-template-columns: 1fr; }
  .tut-schritt:nth-of-type(even) .tut-text { order: 0; }
}
.demo-titel { display: block; margin-top: 8px; color: var(--text); font-size: 14.5px; }
.demo-titel:empty { display: none; }
.demo-box { margin-bottom: 20px; }
.demo-box p { margin: 0 0 12px; }

/* ---------- Spiel: Einsatzbericht ---------- */
.overlay.bericht { place-items: start center; overflow: auto; }
.bericht-karte { width: min(860px, 100%); margin: 16px 0; padding: 28px; border-radius: 18px; background: var(--weiss); box-shadow: var(--schatten-hoch); border-top: 6px solid var(--rot); display: grid; gap: 22px; }
.bericht-kopf h1 { font-size: 28px; font-weight: 800; margin: 8px 0 4px; }
.bericht-kopf .hinweis { margin: 0; }
.bericht-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bericht-zahl { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--flaeche); border-left: 4px solid var(--rand); }
.bericht-zahl .icon { grid-row: span 2; color: var(--gedimmt); }
.bericht-zahl small { color: var(--gedimmt); font-size: 12.5px; }
.bericht-zahl strong { font-size: 15px; }
.bericht-zahl.ok { border-left-color: var(--ok); } .bericht-zahl.ok .icon { color: var(--ok); }
.bericht-zahl.warnung { border-left-color: var(--rot); } .bericht-zahl.warnung .icon { color: var(--rot); }
.bericht-abschnitt h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 8px; }
.bericht-abschnitt h2 .icon { color: var(--rot); }
.bericht-abschnitt > .hinweis { margin: -2px 0 10px; }
.bericht-abschnitt .bewertung { margin: 0; }
.bericht-text { white-space: pre-wrap; margin: 0; }
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: 14px; }
.ablauf li { display: grid; grid-template-columns: 46px 18px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 6px; }
.ablauf li:nth-child(odd) { background: var(--flaeche); }
.ablauf .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--gedimmt); }
.ablauf-zeit { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gedimmt); }
.ablauf-funk .icon { color: #1565c0; }
.ablauf-warnung .icon, .ablauf-brand .icon { color: var(--rot); }
.ablauf-ok .icon { color: var(--ok); }
.ablauf-auftrag .icon { color: var(--anthrazit); }
.bericht-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .bericht-karte { padding: 20px 16px; }
}
@media print {
  body > *:not(#overlay-bericht) { display: none !important; }
  #overlay-bericht { position: static; display: block; padding: 0; background: none; backdrop-filter: none; }
  .bericht-karte { width: 100%; margin: 0; box-shadow: none; border-top: 0; padding: 0; }
  .bericht-aktionen { display: none; }
  .ablauf li { break-inside: avoid; }
}