/* ---------------------------------------------------------------
   styles.css — Kreisverkehr

   Farben aus der deutschen Verkehrsbeschilderung:
   Euroblau vom Kennzeichenband, Signalgelb von der Bundesstrasse.
   Mobile zuerst, Bedienung mit einem Daumen.
   --------------------------------------------------------------- */

:root{
  --euroblau:#003399;
  --gelb:#FFCC00;
  --tinte:#14161A;
  --schild:#F7F7F4;
  --grund:#ECEEF1;
  --linie:#C6CBD2;
  --grau:#5C646F;
  --raum:clamp(16px, 4vw, 28px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--grund);
  color:var(--tinte);
  font-family:"Barlow", system-ui, sans-serif;
  font-size:17px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}

button{font:inherit; color:inherit; cursor:pointer;}

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

.kopf{
  padding:calc(var(--raum) + env(safe-area-inset-top)) var(--raum) 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}

.marke{
  font-family:"Archivo", sans-serif; font-weight:800;
  font-size:22px; letter-spacing:-.02em; margin:0;
}

.etappe{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau);
}

/* --- Buehne: das Schild ----------------------------------------- */

.buehne{
  position:sticky; top:0; z-index:10;
  background:var(--grund);
  padding:14px var(--raum) 14px;
  border-bottom:1px solid var(--linie);
}

.schild-rahmen{max-width:520px; margin:0 auto;}

.schild-rahmen svg{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(20,22,26,.18));
}

.info{
  max-width:520px; margin:12px auto 0;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}

.info-ort{
  font-family:"Archivo", sans-serif; font-weight:700;
  font-size:19px; letter-spacing:-.01em;
}

.info-land, .status{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grau);
}

.mehrfach{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--gelb); color:var(--tinte);
  padding:2px 9px; border-radius:3px;
}

.status, .punkte{max-width:520px; margin:6px auto 0;}

.punkte{
  font-size:14.5px; color:var(--grau); margin-top:2px;
}

.status[data-stufe="heimat"]{color:var(--euroblau);}
.status[data-stufe="gefunden"]{color:var(--tinte);}

/* --- Aktionen ---------------------------------------------------- */

.aktionen{
  max-width:520px; margin:12px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

.knopf{
  min-height:48px;
  border:2px solid var(--tinte);
  border-radius:6px;
  background:var(--schild);
  font-family:"Archivo", sans-serif; font-weight:700; font-size:15px;
}

.knopf--stark{background:var(--euroblau); color:var(--schild); border-color:var(--euroblau);}

.knopf:disabled{
  opacity:.38; cursor:not-allowed;
}

.knopf:focus-visible, .tab:focus-visible, input:focus-visible, .eintrag:focus-visible{
  outline:3px solid var(--euroblau); outline-offset:2px;
}

/* --- Suche -------------------------------------------------------- */

.suchfeld{padding:var(--raum) var(--raum) 10px;}

.suchfeld input{
  width:100%;
  font-family:"Archivo", sans-serif; font-weight:500; font-size:17px;
  padding:14px 16px;
  border:2px solid var(--tinte); border-radius:6px;
  background:var(--schild); color:var(--tinte);
}

.zaehler{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grau);
  padding:0 var(--raum) 6px; margin:0;
}

/* --- Katalogliste -------------------------------------------------- */

.liste{
  list-style:none; margin:0;
  padding:0 var(--raum) 32px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:8px;
}

.eintrag{
  width:100%; min-height:60px; text-align:left;
  background:var(--schild);
  border:1px solid var(--linie);
  border-left:5px solid var(--linie);
  border-radius:4px;
  padding:9px 11px;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
}

.eintrag[data-stufe="gefunden"]{border-left-color:var(--gelb);}
.eintrag[data-stufe="heimat"]{border-left-color:var(--euroblau);}

.eintrag[aria-current="true"]{background:var(--tinte); color:var(--schild);}
.eintrag[aria-current="true"] .eintrag-r{color:#AEB6C0;}

.eintrag-k{
  font-family:"Archivo", sans-serif; font-weight:800;
  font-size:18px; letter-spacing:.02em;
}

.eintrag-r{font-size:13.5px; line-height:1.25; color:var(--grau);}

.eintrag-p{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.05em;
  color:var(--grau); margin-top:3px;
}

.eintrag[aria-current="true"] .eintrag-p{color:var(--gelb);}

.leer, .hinweis{padding:0 var(--raum) 32px; color:var(--grau); margin:0;}

/* --- Chronik -------------------------------------------------------- */

.chronik{padding:var(--raum) var(--raum) 32px; display:grid; gap:12px;}

.chronik-karte{
  background:var(--schild);
  border:1px solid var(--linie);
  border-left:5px solid var(--gelb);
  border-radius:6px;
  padding:12px;
  display:grid; gap:10px;
}

.chronik-karte[data-stufe="heimat"]{border-left-color:var(--euroblau);}

.chronik-schild svg{width:100%; max-width:300px; height:auto; display:block;}

.chronik-ort{
  font-family:"Archivo", sans-serif; font-weight:700; font-size:17px;
  margin:0;
}

.chronik-zeile{font-size:14.5px; color:var(--grau); margin:2px 0 0;}

.marke-manuell{
  display:inline-block;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--linie); border-radius:3px;
  padding:1px 7px; color:var(--grau);
}

/* --- Fortschritt ----------------------------------------------------- */

.fortschritt{padding:var(--raum) var(--raum) 32px;}

.gesamt{
  background:var(--tinte); color:var(--schild);
  border-radius:8px; padding:20px; margin-bottom:20px;
}

.gesamt-zahl{
  font-family:"Archivo", sans-serif; font-weight:800;
  font-size:52px; line-height:1; margin:0; letter-spacing:-.03em;
}

.gesamt-zahl span{font-size:24px; color:#8B94A0;}

.gesamt-label{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  margin:6px 0 0;
}

.gesamt-neben{font-size:14.5px; color:#AEB6C0; margin:2px 0 0;}

.land{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  padding:11px 0;
  border-bottom:1px solid var(--linie);
}

.land-name{margin:0; font-weight:500;}

.land-zahl{
  margin:0;
  font-family:"Archivo", sans-serif; font-weight:700; font-size:15px;
}

.balken{
  grid-column:1 / -1;
  height:6px; background:var(--linie); border-radius:3px; overflow:hidden;
  margin-top:5px;
}

.balken span{display:block; height:100%; background:var(--euroblau);}

/* --- Tableiste unten -------------------------------------------------- */

.tableiste{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--schild);
  border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}

.tab{
  min-height:60px;
  border:0; background:transparent;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grau);
  border-top:3px solid transparent;
}

.tab[aria-selected="true"]{color:var(--tinte); border-top-color:var(--euroblau);}

/* --- Fusszeile --------------------------------------------------------- */

.fuss{
  padding:0 var(--raum) 32px; max-width:640px;
  font-size:14.5px; color:var(--grau); line-height:1.5;
}

.fuss strong{color:var(--tinte);}

/* Gleiche Falle wie bei den Streifen, sobald hier ein display steht. */
.knopf--leise[hidden]{display:none;}

.knopf--leise{
  background:transparent; border:1px solid var(--linie);
  color:var(--grau); font-weight:600; font-size:14px;
  min-height:42px; padding:0 14px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

/* --- Karte -------------------------------------------------------- */

.karte-rahmen{
  padding:var(--raum) var(--raum) 12px;
}

#karte{
  width:100%;
  height:min(62vh, 520px);
  background:var(--schild);
  border:1px solid var(--linie);
  border-radius:8px;
}

/* Leaflet zeigt sonst seinen eigenen hellgrauen Untergrund */
.leaflet-container{background:var(--schild);}

.leaflet-tooltip{
  font-family:"Barlow", system-ui, sans-serif;
  font-size:14px;
  border-radius:4px;
  border:1px solid var(--linie);
}

/* --- Kartenlegende ------------------------------------------------ */

.legende{
  list-style:none; margin:0;
  padding:0 var(--raum) 32px;
  display:grid; gap:7px;
  font-size:14.5px; color:var(--grau);
}

.legende li{display:flex; align-items:center; gap:9px;}

.lg{
  width:20px; height:14px; border-radius:2px; flex:none;
  border:1px solid #8A929C; background:var(--schild);
}

.lg--gefunden{background:rgba(0,51,153,.22);}
.lg--heimat{background:rgba(0,51,153,.85);}
.lg--unbekannt{background:rgba(198,203,210,.35); border-style:dashed; border-color:#B9BFC7;}

/* --- Kategorie-Umschalter ------------------------------------------ */

.kategorien{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:var(--raum) var(--raum) 0;
  border:2px solid var(--tinte); border-radius:6px; overflow:hidden;
}

.kat{
  min-height:44px; border:0; background:var(--schild);
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:15px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grau);
}

.kat + .kat{border-left:2px solid var(--tinte);}

.kat[aria-pressed="true"]{background:var(--tinte); color:var(--schild);}

.kat:focus-visible{outline:3px solid var(--euroblau); outline-offset:-3px;}

.suchfeld{padding-top:10px;}

/* --- Scannen: Knopf und Notausgang ---------------------------------- */

.knopf--scan{
  display:block; width:100%; max-width:520px;
  margin:12px auto 0;
  min-height:54px;
  background:var(--gelb); border-color:var(--tinte);
  font-size:16px; letter-spacing:.01em;
}

.knopf--scan:disabled{opacity:.45;}

.notausgang{
  max-width:520px; margin:8px auto 0;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grau);
}

/* --- Sucher ---------------------------------------------------------- */

/* Die Ebenen sind hier ausdruecklich durchnummeriert statt der
   Reihenfolge im HTML ueberlassen. Grund: der Rahmen ist positioniert
   und wird deshalb NACH allen unpositionierten Geschwistern gemalt —
   sein 100vmax grosser Schatten legte sich sonst ueber Statuszeile
   und Knopfleiste, und der Abbrechen-Knopf war unerreichbar. */
.sucher{
  position:fixed; inset:0; z-index:60;
  background:#0A0B0D;
}

.sucher[hidden]{display:none;}

.sucher-bild{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  background:#0A0B0D;
}

/* Die Maske liegt deckungsgleich ueber dem Video. Der Rahmen darin
   muss dieselben Anteile haben wie der Zuschnitt in kamera.js —
   sonst liest die App etwas anderes, als der Spieler anvisiert. */
.sucher-maske{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

.sucher-rahmen{
  position:relative;
  width:88%;                 /* = RAHMEN_ANTEIL in kamera.js */
  aspect-ratio:520 / 110;    /* Masse eines deutschen Kennzeichens */
  box-shadow:0 0 0 100vmax rgba(10,11,13,.62);
  border-radius:8px;
}

/* Der ausgewertete Streifen: hinter dem Euroband, vor der Nummer.
   Er zeigt sichtbar, dass die Erkennungsnummer nicht gelesen wird. */
.sucher-rahmen::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:15%; right:42%;       /* = BAND_ANTEIL / NUMMER_ANTEIL */
  border:2px dashed var(--gelb);
  border-radius:4px;
}

.sucher-band{
  position:absolute; top:0; bottom:0; left:0; width:15%;
  background:rgba(0,51,153,.55);
  border-radius:8px 0 0 8px;
}

.ecke{
  position:absolute; width:22px; height:22px;
  border:3px solid var(--schild);
}
.ecke--lo{top:-2px; left:-2px; border-right:0; border-bottom:0; border-radius:8px 0 0 0;}
.ecke--ro{top:-2px; right:-2px; border-left:0; border-bottom:0; border-radius:0 8px 0 0;}
.ecke--lu{bottom:-2px; left:-2px; border-right:0; border-top:0; border-radius:0 0 0 8px;}
.ecke--ru{bottom:-2px; right:-2px; border-left:0; border-top:0; border-radius:0 0 8px 0;}

.sucher-status{
  position:absolute; z-index:3;
  left:0; right:0; bottom:calc(76px + 20px + env(safe-area-inset-bottom));
  margin:0; padding:14px var(--raum);
  text-align:center;
  color:var(--schild);
  background:linear-gradient(to top, rgba(10,11,13,.9), rgba(10,11,13,0));
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:16px; letter-spacing:.05em;
  min-height:52px;
}

.sucher-status[data-stufe="treffer"]{color:var(--gelb);}
.sucher-status[data-stufe="fehler"]{color:#FF9E8A;}

.sucher-leiste{
  position:absolute; z-index:3;
  left:0; right:0; bottom:0;
  display:flex; gap:10px; justify-content:center;
  padding:12px var(--raum) calc(20px + env(safe-area-inset-bottom));
  background:rgba(10,11,13,.92);
}

.knopf--dunkel{
  min-height:52px; padding:0 26px;
  border:2px solid var(--schild); border-radius:6px;
  background:transparent; color:var(--schild);
  font-family:"Archivo", sans-serif; font-weight:700; font-size:15px;
}

.knopf--dunkel[aria-pressed="true"]{background:var(--gelb); color:var(--tinte); border-color:var(--gelb);}
.knopf--dunkel:focus-visible{outline:3px solid var(--gelb); outline-offset:2px;}

/* Solange gelesen wird, wandert eine Linie durch den Rahmen. Sie ist
   die einzige Animation der App und sagt etwas Wahres: es laeuft. */
.sucher[data-liest="ja"] .sucher-rahmen::before{
  content:"";
  position:absolute; left:15%; right:42%; height:2px;
  background:var(--gelb);
  animation:lauf 1.4s ease-in-out infinite;
}

@keyframes lauf{
  0%,100%{top:8%;} 50%{top:88%;}
}

@media (prefers-reduced-motion:reduce){
  .sucher[data-liest="ja"] .sucher-rahmen::before{display:none;}
}

/* --- Handeintrag ------------------------------------------------------ */

/* Bewusst schmaler und leiser als der Scanknopf: der Notausgang soll
   erreichbar sein, aber nicht einladend. */
.knopf--hand{
  display:block; width:100%; max-width:520px;
  margin:8px auto 0;
  min-height:46px; font-size:14.5px;
  background:transparent; border-width:1px; border-color:var(--linie);
  color:var(--grau);
}

.chronik-marken{margin:6px 0 0; display:flex; flex-wrap:wrap; gap:6px;}

/* --- Medaillen -------------------------------------------------------- */

.abschnitt{
  font-family:"Archivo", sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.01em;
  margin:28px 0 0;
}

.gruppe{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grau);
  margin:18px 0 2px;
}

/* Die Stufe steckt im linken Rand — dieselbe Sprache wie in der
   Katalogliste, wo der Rand den Fundstatus traegt. */
.medaille{
  display:grid; grid-template-columns:1fr auto; gap:1px 10px;
  padding:11px 0 11px 12px;
  border-bottom:1px solid var(--linie);
  border-left:5px solid var(--linie);
}

.medaille[data-stufe="keine"]{border-left-color:var(--linie); opacity:.72;}
.medaille[data-stufe="0"]{border-left-color:#A9713B;}   /* Bronze */
.medaille[data-stufe="1"]{border-left-color:#98A0AA;}   /* Silber */
.medaille[data-stufe="2"]{border-left-color:var(--gelb);}
.medaille[data-stufe="3"]{border-left-color:#5FA8B5;}   /* Platin */
.medaille[data-stufe="4"]{border-left-color:var(--tinte);}

.medaille-name{margin:0; font-weight:600;}

.medaille-stufe{
  margin:0; text-align:right;
  font-family:"Archivo", sans-serif; font-weight:700; font-size:15px;
}

.medaille[data-stufe="keine"] .medaille-stufe{color:var(--grau);}

.medaille-was{
  grid-column:1 / -1; margin:0;
  font-size:13.5px; color:var(--grau);
}

.medaille .balken{margin-top:7px;}

.medaille-rest{
  grid-column:1 / -1; margin:5px 0 0;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--grau);
}

.hinweis--eng{padding:16px 0 0; font-size:13.5px;}

/* --- Streifen: offline und Aktualisierung ------------------------------ */

.streifen{
  margin:0; padding:calc(10px + env(safe-area-inset-top)) var(--raum) 10px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; text-align:center;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}

/* Muss sein: die Regel oben setzt display:flex, und eine Klassenregel
   schlaegt die eingebaute Browserregel fuer [hidden]. Ohne diese Zeile
   sind die Streifen dauerhaft sichtbar, egal was das Skript setzt. */
.streifen[hidden]{display:none;}

.streifen--offline{background:var(--linie); color:var(--tinte);}
.streifen--neu{background:var(--euroblau); color:var(--schild);}

/* Sitzt ein Streifen oben, darf die Kopfzeile den Rand nicht noch
   einmal um die Statusleiste ergaenzen. */
.streifen:not([hidden]) + .kopf,
.streifen:not([hidden]) + .streifen + .kopf{padding-top:var(--raum);}

.streifen-knopf{
  border:2px solid currentColor; border-radius:5px;
  background:transparent; color:inherit;
  font:inherit; padding:5px 14px; min-height:36px;
}

/* --- Als App installiert ---------------------------------------------- */

/* Im Standalone-Modus gibt es keine Browserleiste mehr, die den
   Wischbereich am unteren Rand abfaengt — die Tableiste braucht
   dort etwas mehr Luft. */
@media (display-mode: standalone){
  .tableiste{padding-bottom:max(env(safe-area-inset-bottom), 8px);}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom));}
  /* Nichts markieren beim Tippen: fuehlt sich sonst nach Webseite an */
  .tab, .kat, .knopf, .eintrag, .marke{-webkit-user-select:none; user-select:none;}
}

/* Doppeltipp zoomt sonst mitten im Sammeln herein */
.tab, .kat, .knopf, .knopf--leise, .streifen-knopf{touch-action:manipulation;}

/* --- Technikanzeige --------------------------------------------------- */

.technik{margin-top:8px;}

.technik-zeile{
  display:grid; grid-template-columns:minmax(90px, 34%) 1fr; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--linie);
  font-size:13.5px;
}

.technik-name{
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--grau);
}

/* Adressen und Cache-Namen sind lang und haben keine Leerzeichen */
.technik-wert{font-family:ui-monospace, monospace; font-size:12.5px; overflow-wrap:anywhere;}

/* --- Fund löschen ------------------------------------------------------ */

/* Sitzt am Ende der Karte und bleibt zurueckhaltend: gebraucht wird er
   selten, und ein auffaelliger Knopf laedt zum Verklicken ein. */
.chronik-weg{
  margin-top:10px;
  min-height:38px; padding:0 12px;
  font-size:13.5px;
}


/* --- Fotomodus und Auswahl -------------------------------------------- */

/* Der Live-Sucher ist seit der ersten Fahrt der zweite Weg, nicht der
   erste — entsprechend zurueckhaltend sieht er aus. */
.knopf--zweit{
  display:block; width:100%; max-width:520px;
  margin:8px auto 0; min-height:46px;
  font-size:14.5px;
  background:transparent; border-width:1px; border-color:var(--linie);
}

.wahl{
  max-width:520px; margin:14px auto 0;
  padding:12px; border:2px solid var(--tinte); border-radius:8px;
  background:var(--schild);
}

.wahl[hidden]{display:none;}

.wahl-frage{
  margin:0 0 10px;
  font-family:"Barlow Condensed", sans-serif; font-weight:600;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}

.wahl-knoepfe{display:flex; flex-direction:column; gap:8px;}

.wahl-knopf{
  display:flex; align-items:baseline; gap:12px;
  width:100%; min-height:52px; text-align:left;
}

.wahl-k{
  font-family:"Archivo", sans-serif; font-weight:800; font-size:19px;
  letter-spacing:.02em; min-width:56px;
}

.wahl-r{font-weight:500; font-size:14.5px; color:var(--grau);}