/* ==================================================================
   DESIGN – Farben, Schriften, Abstände
   ------------------------------------------------------------------
   Fang oben bei den "Tokens" an: Das sind Variablen (--name), die
   überall verwendet werden. Änderst du hier eine Farbe, ändert sie
   sich auf der ganzen Seite.

   Stil: dunkles "Liquid Glass" – halbdurchsichtige, unscharfe Flächen,
   die über der Karte schweben.
   ================================================================== */

:root {
  /* Farben */
  --seite:        #0b1220;                   /* Hintergrund hinter allem */
  --glas:         linear-gradient(180deg, rgb(30 41 62 / .80) 0%, rgb(20 29 47 / .82) 100%);
  --glas-fest:    #121a2b;                   /* undurchsichtige Variante (Handy-Panel) */
  --glas-unschaerfe: blur(28px) saturate(170%);
  --glas-rand:    rgb(255 255 255 / .14);
  --glas-licht:   inset 0 1px 0 rgb(255 255 255 / .16);  /* feine helle Oberkante */
  --flaeche:      rgb(255 255 255 / .06);    /* Karten, Eingabefelder, Chips */
  --flaeche-hover: rgb(255 255 255 / .10);
  --tinte:        #f1f5f9;                   /* Haupttext */
  --leise:        #b6c3d8;                   /* Nebentext, Hilfetexte */
  --linie:        rgb(255 255 255 / .10);    /* Rahmen, Trennlinien */
  --akzent:       #38bdf8;                   /* Hauptknopf, Auswahl, Fokus */
  --akzent-zart:  rgb(56 189 248 / .16);     /* ausgewählte Chips, Hauptknopf */
  --auf-akzent:   #e0f2fe;                   /* Text auf dem Akzent */
  --fehler:       #f87171;
  --schatten:     0 24px 60px -14px rgb(2 6 23 / .55);
  --schatten-klein: 0 6px 20px -6px rgb(2 6 23 / .5);

  /* Schriften */
  --schrift:        -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --schrift-daten:  var(--schrift);

  /* Größen */
  --text-klein: .78rem;
  --text:       .92rem;
  --text-gross: 1.25rem;
  --radius:     10px;
  --radius-gross: 18px;                      /* Panel, Popups */
  --abstand:    16px;
  --panel-breite: 400px;

  color-scheme: dark;
}

/* Glasfläche: Panel, Popups, Kartenknöpfe, Meldung */
#panel, .ebenen-gruppe, .schalter, .meldung,
.maplibregl-popup-content, .maplibregl-ctrl-group, .maplibregl-ctrl-attrib.maplibregl-compact {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  backdrop-filter: var(--glas-unschaerfe);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten-klein), var(--glas-licht);
  color: var(--tinte);
}

/* ---------------- Grundgerüst ---------------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--schrift); font-size: var(--text); color: var(--tinte);
  background: var(--seite); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Die Karte füllt den ganzen Bildschirm, das Panel schwebt rechts darüber */
#karte { position: fixed; inset: 0; }
#karte .maplibregl-canvas { cursor: crosshair; }

#panel {
  position: fixed; z-index: 3;
  top: 12px; right: 12px; bottom: 12px; width: var(--panel-breite);
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--radius-gross); overflow: hidden;
  box-shadow: var(--schatten), var(--glas-licht);
}
.panel-kopf {
  padding: 18px var(--abstand) 14px; border-bottom: 1px solid var(--linie);
  display: grid; gap: 4px;
}
.panel-kopf h1 { margin: 0; font-size: var(--text-gross); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.panel-kopf p { margin: 0; color: var(--leise); font-size: var(--text-klein); }
.panel-inhalt {
  flex: 1; overflow-y: auto; padding: var(--abstand); display: grid; gap: 14px; align-content: start;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .28) transparent;
}
.panel-fuss {
  padding: 12px var(--abstand); border-top: 1px solid var(--linie);
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* ---------------- Kartenwahl und Kartenknöpfe ---------------- */
.ebenen {
  position: absolute; z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(var(--panel-breite) + 72px);  /* Platz für die Zoom-Knöpfe, sonst umbrechen */
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  pointer-events: none;                     /* Lücken zwischen den Schaltern lassen Klicks zur Karte durch */
}
.ebenen > * { pointer-events: auto; }
.ebenen-gruppe { display: flex; border-radius: var(--radius); padding: 3px; }
.ebenen-gruppe button {
  border: 0; background: none; color: var(--tinte); font: inherit; font-weight: 600;
  font-size: var(--text-klein); padding: 7px 12px; border-radius: 7px; cursor: pointer;
}
.ebenen-gruppe button:hover { background: var(--flaeche-hover); }
.ebenen-gruppe button[aria-pressed="true"] { background: var(--akzent-zart); color: var(--auf-akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.schalter {
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--radius); padding: 7px 10px;
  font-size: var(--text-klein); font-weight: 600; cursor: pointer;
}
.schalter input { accent-color: var(--akzent); margin: 0; }
.gz-farbe { width: 12px; height: 12px; border-radius: 3px; background: var(--gz); opacity: 0.8; }
.schalter.flach { background: none; border: 0; box-shadow: none; padding: 0; color: var(--leise); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Zoom-Knöpfe: links neben dem Panel statt darunter */
.maplibregl-ctrl-top-right { right: calc(var(--panel-breite) + 24px); top: 2px; }
.maplibregl-ctrl-group { border-radius: var(--radius); overflow: hidden; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--linie); }
.maplibregl-ctrl-group button:not(:disabled):hover { background-color: var(--flaeche-hover); }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); } /* Symbole sind dunkel */
.maplibregl-ctrl-attrib.maplibregl-compact { border-radius: var(--radius); color: var(--leise); }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { background-color: transparent; filter: invert(1) brightness(1.6); }
.maplibregl-ctrl-attrib a { color: #93c5fd; }
.maplibregl-ctrl-bottom-right { right: calc(var(--panel-breite) + 24px); }
.maplibregl-ctrl-scale { background: rgb(18 26 43 / .75); color: var(--tinte); border-color: var(--leise); }

/* ---------------- Knöpfe ---------------- */
.knopf {
  font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  transition: background .15s, border-color .15s;
}
.knopf:hover { background: var(--flaeche-hover); border-color: rgb(255 255 255 / .22); }
.knopf.haupt { background: var(--akzent-zart); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.haupt:hover { background: rgb(56 189 248 / .28); }
.knopf.klein { padding: 4px 9px; font-size: var(--text-klein); border-radius: 7px; }
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr.bestaetigen { background: #b91c1c; border-color: var(--fehler); color: #fff; }
.knopf.breit { flex: 1; }
.knopf.mittig { text-align: center; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------------- Formular ---------------- */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.feld { display: grid; gap: 5px; grid-column: span 2; min-width: 0; align-content: start; }
.feld.halb { grid-column: span 1; }
.feld > label, .feld > .label {
  font-size: var(--text-klein); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--leise);
}
.feld .pflicht { color: var(--akzent); }
.feld input[type="text"], .feld input[type="datetime-local"], .feld input[type="number"], .feld textarea {
  width: 100%; font: inherit; color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 9px 10px; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.feld input::placeholder, .feld textarea::placeholder { color: rgb(182 195 216 / .6); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: rgb(56 189 248 / .6); box-shadow: 0 0 0 3px rgb(56 189 248 / .18); }
.feld input[type="datetime-local"] { font-size: .85rem; }
.feld textarea { min-height: 72px; resize: vertical; }
.feld .hilfe { font-size: var(--text-klein); color: var(--leise); }
.feld .fehler { font-size: var(--text-klein); color: var(--fehler); font-weight: 600; }
.feld.hat-fehler input { border-color: var(--fehler); }
.zeile { display: flex; gap: 6px; flex-wrap: wrap; }

/* Zwischenüberschriften im Formular */
.abschnitt {
  grid-column: span 2; margin: 8px 0 -4px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: .82rem; font-weight: 600; color: var(--tinte);
}
.hinweis { font-size: var(--text-klein); color: var(--leise); margin: 0; }
.typ-hinweis { grid-column: span 2; padding: 10px; border: 1px dashed var(--linie); border-radius: var(--radius); }

/* Zahl mit − / + */
.zahl { display: flex; align-items: stretch; }
.zahl input { text-align: center; font-variant-numeric: tabular-nums; border-radius: 0 !important; -moz-appearance: textfield; }
.zahl input::-webkit-inner-spin-button { -webkit-appearance: none; }
.zahl button {
  flex: none; width: 38px; font: inherit; font-size: 1.1rem; cursor: pointer;
  background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie);
}
.zahl button:hover { background: var(--flaeche-hover); }
.zahl button:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.zahl button:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }

/* Kilometer-Eingabe */
.km { display: flex; align-items: stretch; }
.km input { text-align: right; font-variant-numeric: tabular-nums; border-radius: var(--radius) 0 0 var(--radius) !important; }
.km span {
  display: grid; place-items: center; padding: 0 10px; font-size: var(--text-klein); color: var(--leise);
  border: 1px solid var(--linie); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: rgb(255 255 255 / .03);
}

/* Koordinaten-Anzeige */
.koordinaten {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--flaeche); border: 1px dashed rgb(255 255 255 / .2); border-radius: var(--radius);
  padding: 9px 10px; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.koordinaten small { display: block; color: var(--leise); font-size: .72rem; margin-top: 2px; }

/* Chips (Auswahl, Mehrfachauswahl, Filter) */
.chips, .wahl, .filter { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { gap: 5px; }
.chip {
  font: inherit; font-size: var(--text-klein); font-weight: 600; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--tinte);
  transition: background .15s, border-color .15s;
}
.chip:hover { background: var(--flaeche-hover); }
.chip[aria-pressed="true"] { background: var(--akzent-zart); border-color: var(--akzent); color: var(--auf-akzent); }
.chip[aria-pressed="true"]::before { content: "✓ "; color: var(--akzent); }
.chip small { color: var(--leise); font-weight: 600; margin-left: 2px; }
.chip .kz {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; margin-right: 6px;
  border-radius: 9px; background: var(--typ); color: #fff; font-size: .62rem; font-weight: 700;
}
.chip.mit-farbe[aria-pressed="true"] { border-color: var(--typ); box-shadow: inset 0 0 0 1px var(--typ); }

/* ---------------- Liste ---------------- */
.liste { display: grid; gap: 8px; }
.eintrag {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; text-align: left;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; font: inherit; color: var(--tinte); width: 100%;
  transition: background .15s, border-color .15s;
}
.eintrag:hover { background: var(--flaeche-hover); border-color: rgb(255 255 255 / .22); }
.eintrag.dringend { border-left: 3px solid var(--typ); }
.eintrag.erledigt { opacity: .55; }
.eintrag .kz-punkt {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--typ); color: #fff; font-size: .66rem; font-weight: 700; margin-top: 2px;
}
.eintrag-text { display: grid; gap: 2px; min-width: 0; }
.eintrag-typ { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.eintrag strong { font-size: .95rem; font-weight: 600; }
.eintrag .info { font-size: .76rem; color: var(--tinte); }
.eintrag .zeit { font-size: .76rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.marke {
  display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px; background: var(--akzent-zart); color: var(--auf-akzent); margin-left: 6px; vertical-align: 2px;
}
.marke.laeuft { background: var(--typ); color: #fff; }
.leer { color: var(--leise); text-align: center; padding: 30px 10px; border: 1px dashed rgb(255 255 255 / .2); border-radius: var(--radius); }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 8px 4px 6px; display: grid; justify-items: center; gap: 1px; min-width: 0;
}
.kennzahl b { font-size: 1.35rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl span {
  font-size: .72rem; font-weight: 600; color: var(--leise);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* immer eine Zeile, nie über den Rand */
}
.kennzahl.warnen { border-color: rgb(248 113 113 / .6); background: rgb(248 113 113 / .10); }
.kennzahl.warnen b, .kennzahl.warnen span { color: var(--fehler); }

/* ---------------- Ereignis-Band oben im Panel ---------------- */
.ereignis {
  border-left: 4px solid var(--ereignis); background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 8px 10px; margin-bottom: 8px;
  display: grid; gap: 3px;
}
.ereignis-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ereignis-zeile strong { font-size: .9rem; font-weight: 600; }
.ereignis-zeile .knopf { margin-left: auto; }
.uebung {
  background: var(--ereignis); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.ereignis-daten { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; font-variant-numeric: tabular-nums; }
/* Ereignisfarben sind dunkel – auf Glas aufhellen, damit sie lesbar bleiben */
.ereignis-daten span:first-child { font-weight: 700; color: color-mix(in srgb, var(--ereignis) 55%, #fff); }
.ereignis-ort { font-size: var(--text-klein); color: var(--leise); }
.ereignis-nb { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-klein); color: var(--leise); }
.ereignis-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.ereignis + .ereignis-knoepfe { margin-top: 8px; }
.knopf.ereignis-neu { flex: 1; border-style: dashed; text-align: center; }

/* Nachbeben-Liste */
.nb-liste { margin-bottom: 12px; font-size: var(--text-klein); }
.nb-liste summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.nb-liste summary small { color: var(--leise); font-weight: 400; }
.nb-eintrag {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--linie); padding: 6px 2px; color: inherit; font: inherit; cursor: pointer;
}
.nb-eintrag b { grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.nb-eintrag small { color: var(--leise); }
.nb-eintrag:hover b { color: var(--akzent); }

/* ---------------- Punkte auf der Karte ---------------- */
.punkt {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--typ, var(--akzent)); border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .45);
  color: #fff; font: 700 10px/1 var(--schrift); letter-spacing: .02em; cursor: pointer;
}
.punkt.entwurf {
  width: 30px; height: 30px; cursor: grab;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .6), 0 2px 8px rgb(0 0 0 / .5);
  animation: puls 1.6s ease-in-out infinite;
}
@keyframes puls { 50% { box-shadow: 0 0 0 9px rgb(255 255 255 / .25), 0 2px 8px rgb(0 0 0 / .5); } }
@media (prefers-reduced-motion: reduce) { .punkt.entwurf { animation: none; } }
.punkt.dringend { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--typ), 0 2px 6px rgb(0 0 0 / .5); }
.punkt.erledigt { opacity: .45; }

/* Epizentrum, Ringe, Nachbeben */
.epizentrum {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ereignis); border: 2px solid #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ereignis) 35%, transparent), 0 0 0 11px color-mix(in srgb, var(--ereignis) 15%, transparent);
  cursor: default; position: relative; display: grid; place-items: center;
}
.epizentrum span {
  position: absolute; top: 22px; white-space: nowrap; background: var(--ereignis); color: #fff;
  font: 700 11px/1 var(--schrift-daten); padding: 3px 6px; border-radius: 999px;
}
.epizentrum.entwurf { cursor: grab; outline: 2px dashed var(--ereignis); outline-offset: 14px; }
/* Beschriftungen direkt auf der Karte bleiben hell – sie liegen auf hellen Kartenkacheln */
.ring-label, .nachbeben span {
  font: 600 10px/1 var(--schrift-daten); color: var(--ereignis); background: rgb(255 255 255 / .85);
  padding: 2px 4px; border-radius: 4px; pointer-events: none;
}
.nachbeben {
  width: var(--groesse, 16px); height: var(--groesse, 16px); border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--ereignis) 55%, transparent); border: 2px solid var(--ereignis);
  display: grid; place-items: center;
}
.nachbeben span { position: absolute; top: calc(100% + 3px); white-space: nowrap; padding: 1px 3px; }
.nachbeben.entwurf { --groesse: 18px; cursor: grab; outline: 2px dashed var(--ereignis); outline-offset: 4px; }

/* ---------------- Popup auf der Karte ---------------- */
.maplibregl-popup-content {
  border-radius: var(--radius-gross); box-shadow: var(--schatten), var(--glas-licht);
  padding: 14px 16px 12px; font-family: var(--schrift); min-width: 220px;
}
.maplibregl-popup-tip { display: none; } /* ein festes Dreieck passt nicht zum unscharfen Glas */
.maplibregl-popup-close-button {
  width: 30px; height: 30px; color: var(--leise); font-size: 18px;
  border-radius: 0 var(--radius-gross) 0 var(--radius);
}
.maplibregl-popup-close-button:hover { background: var(--flaeche-hover); color: #fff; }
.popup h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; padding-right: 14px; }
.popup-typ { margin: 0 0 3px; display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.popup .punkt-mini { width: 9px; height: 9px; border-radius: 50%; background: var(--typ); }
.popup-epi { margin: -2px 0 8px; font-size: .74rem; color: var(--leise); }
.popup dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: var(--text-klein); }
.popup dt { color: var(--leise); }
.popup dd { margin: 0; }
.popup .zeile { justify-content: flex-end; }

/* Meldung unten ("Gespeichert.") */
.meldung {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 9px 16px; border-radius: 999px; font-weight: 600;
}

/* ---------------- Handy: Panel wird zur unteren Leiste ---------------- */
@media (max-width: 760px) {
  body { display: flex; flex-direction: column; }
  #karte { position: relative; inset: auto; flex: 1 1 45%; }
  #panel {
    position: relative; inset: auto; width: 100%; flex: 1 1 55%;
    margin-top: -16px;                       /* runde Ecken überlappen die Karte */
    border-radius: var(--radius-gross) var(--radius-gross) 0 0; border-width: 1px 0 0;
    background: var(--glas-fest);
  }
  .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right { right: 0; }
  .ebenen { right: 56px; gap: 6px; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: 16px; }
  .panel-kopf { padding-top: 14px; }
  .panel-kopf, .panel-inhalt, .panel-fuss {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .kennzahl b { font-size: 1.15rem; }
  .kennzahl span { font-size: .68rem; }
  .ereignis-ort { display: none; }
}