/* ============================================================
   FLAG SCOUT — Dark Mode auf Basis Corporate Design
   FAHNENGÄRTNER (CD-Manual 2024)

   Rot .............. Pantone 186 C / #d40032
   Schrift .......... Gotham Pro Medium + Regular
                      → hier Montserrat als freie Entsprechung
   Werbebotschaft ... Lumios Marker
                      → hier Caveat Brush als freie Entsprechung
   RWR-Balken ....... rot-weiß-rot, verankert das Layout unten
   Rundungen ........ oben links + unten rechts (Key Visuals)
   ============================================================ */

/* --- Eigene Lizenzen? Dann Originalschriften selbst hosten und
       die Google-Fonts in index.php entfernen: -----------------
@font-face{font-family:'Gotham Pro';src:url('fonts/GothamPro-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Gotham Pro';src:url('fonts/GothamPro.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Lumios Marker';src:url('fonts/LumiosMarker.woff2') format('woff2');font-display:swap;}
------------------------------------------------------------- */

:root{
  /* CI-Farben */
  --fg-red:#D40032;            /* Pantone 186 C */
  --fg-red-lift:#EE1B44;       /* aufgehellt für Hover auf Dunkel */
  --fg-red-dim:rgba(212,0,50,.14);
  --fg-white:#FFFFFF;

  /* Dark-Mode-Träger (neutral, damit das Rot sauber bleibt) */
  --bg:#131316;
  --surface:#1B1B20;
  --surface-2:#24242B;
  --line:#33333D;
  --text:#F4F4F6;
  --muted:#9A9AA6;

  /* Maße */
  --round-ci:18px;             /* Key-Visual-Rundung */
  --rwr-h:6px;                 /* langer RWR-Balken */

  /* Bootstrap-Overrides */
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-link-color:var(--fg-red-lift);
  --bs-link-hover-color:var(--fg-white);
}

/* ---------- Grundlage ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Gotham Pro','Montserrat',-apple-system,system-ui,sans-serif;
  font-weight:400;
  min-height:100vh;
  padding-bottom:calc(var(--rwr-h) + 16px);   /* Platz für den Fußbalken */
}

/* Der lange RWR-Balken: verankert das Layout am unteren Rand.
   CI: dezent gehalten, hier 6px für Bildschirmauflösung. */
.rwr-anchor{
  position:fixed; left:0; right:0; bottom:0; height:var(--rwr-h); z-index:1030;
  background:linear-gradient(
    to bottom,
    var(--fg-red) 0 33.33%,
    var(--fg-white) 33.33% 66.66%,
    var(--fg-red) 66.66% 100%);
}

/* Der kurze RWR-Balken: lenkt den Lesefluss, gibt Überschriften Gewicht.
   CI: orientiert sich an der Versalhöhe, Abstand ein Versal-O davor. */
.rwr-short::before{
  content:""; display:inline-block; vertical-align:baseline;
  width:2.1em; height:.62em; margin-right:.9ch;
  background:linear-gradient(
    to bottom,
    var(--fg-red) 0 33.33%,
    var(--fg-white) 33.33% 66.66%,
    var(--fg-red) 66.66% 100%);
}

/* ---------- Marke ---------- */
.brand{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%;
}

/* Platzhalter-Wortmarke. Ersetzen durch die echte Negativ-Datei:
   <img src="assets/logo-negativ.svg" class="brand-logo" alt="FAHNENGÄRTNER">
   CI: bei jeder Logoverwendung 5 mm Schutzbereich je Seite. */
.brand-logo{height:65px; width:auto; display:block; padding:4px;}

.wordmark{
  font-family:'Gotham Pro','Montserrat',sans-serif;
  font-weight:700; line-height:.96; letter-spacing:.02em;
  text-transform:uppercase; font-size:19px; color:var(--fg-white);
  padding:4px 6px 4px 11px;             /* Schutzbereich */
  border-left:3px solid var(--fg-red);
}
.wordmark span{display:block;}
.wordmark span:last-child{font-weight:400; letter-spacing:.11em; font-size:.92em;}

.app-title{
  font-family:'Gotham Pro','Montserrat',sans-serif;
  font-weight:500; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin:0;
}

/* Primäre Werbebotschaft — CI: Lumios Marker, max. 12 Zeichen.
   Bewusst genau einmal auf der Seite eingesetzt. */
.claim{
  font-family:'Lumios Marker','Caveat Brush',cursive;
  font-size:30px; line-height:1; color:var(--fg-red-lift);
  margin:0; transform:rotate(-2deg); transform-origin:left center;
}

/* Sekundäre Werbebotschaft — CI: Gotham Pro Medium, Versalien. */
.claim-sub{
  font-family:'Gotham Pro','Montserrat',sans-serif;
  font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 0;
}

/* ---------- Karten ---------- */
/* CI Seite 19: äußerer Rahmen nicht abgerundet,
   innerer Bereich mit Bild und Text oben links / unten rechts abgerundet. */
.scout-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  border-top:3px solid var(--fg-red);
}
.scout-card .card-body{padding:22px 20px;}

/* ---------- Formular ---------- */
.form-label-xs{
  font-family:'Gotham Pro','Montserrat',sans-serif;
  font-weight:500; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text);
  display:flex; align-items:center; margin-bottom:8px;
}
.req{color:var(--fg-red-lift); margin-left:.4ch;}

.form-control{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:0; padding:.72rem .9rem; font-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{
  background:var(--bg); color:var(--text);
  border-color:var(--fg-red); box-shadow:0 0 0 3px var(--fg-red-dim);
}
.form-control::placeholder{color:#5A5A66;}
.form-text{color:var(--muted); font-size:12px;}

/* Gast / Anmelden */
.btn-outline-mode{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:0; font-weight:500; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding:.62rem;
}
.btn-outline-mode:hover{color:var(--text); border-color:var(--muted); background:transparent;}
.btn-check:checked + .btn-outline-mode{
  background:var(--fg-red); border-color:var(--fg-red); color:var(--fg-white);
}

/* ---------- GPS-Panel (Key Visual) ---------- */
.gps-panel{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--round-ci) 0 var(--round-ci) 0;   /* CI-Rundung */
  padding:16px;
  font-variant-numeric:tabular-nums;
}
.gps-label{
  font-size:10px; letter-spacing:.2em; color:var(--muted);
  font-weight:500; text-transform:uppercase;
}
.gps-status{
  font-size:10px; letter-spacing:.16em; font-weight:500;
  display:flex; align-items:center; gap:7px; text-transform:uppercase;
}
.gps-status .dot{width:7px; height:7px; border-radius:50%; background:var(--muted);}
.gps-status.searching{color:var(--fg-red-lift);}
.gps-status.searching .dot{background:var(--fg-red-lift); animation:rwr-pulse 1.1s infinite;}
.gps-status.lock{color:var(--fg-white);}
.gps-status.lock .dot{background:var(--fg-white); box-shadow:0 0 0 3px rgba(255,255,255,.14);}
.gps-status.err{color:var(--fg-red-lift);}
.gps-status.err .dot{background:var(--fg-red-lift);}
@keyframes rwr-pulse{0%,100%{opacity:1}50%{opacity:.2}}

.coords{
  font-size:21px; font-weight:500; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; color:var(--fg-white);
}
.coords .ph{color:#4E4E5A; font-weight:400; font-size:15px;}
.gps-meta{display:flex; gap:20px; margin-top:10px; font-size:11.5px; color:var(--muted);}
.gps-meta b{color:var(--text); font-weight:500;}

.btn-gps{
  background:transparent; border:1px solid var(--fg-red); color:var(--fg-red-lift);
  border-radius:0; font-weight:500; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; padding:.7rem;
}
.btn-gps:hover,.btn-gps:focus{background:var(--fg-red); color:var(--fg-white); border-color:var(--fg-red);}
.btn-gps:disabled{border-color:var(--line); color:var(--muted); background:transparent;}

/* Hilfetext bei gesperrtem Standort — CI-Aufzählungszeichen › */
.gps-help{
  background:var(--fg-red-dim); border-left:3px solid var(--fg-red);
  padding:13px 15px; font-size:12.5px; line-height:1.55; color:var(--text);
}
.gps-help ol{list-style:none; padding:0; margin:8px 0 0;}
.gps-help li{padding-left:1.1em; text-indent:-1.1em; margin-bottom:4px; color:var(--muted);}
.gps-help li::before{content:"› "; color:var(--fg-red-lift); font-weight:700;}

/* ---------- Foto-Upload ---------- */
.drop{
  border:1px dashed var(--line);
  border-radius:var(--round-ci) 0 var(--round-ci) 0;
  padding:26px 16px; text-align:center; cursor:pointer;
  background:var(--bg); color:var(--text); transition:.15s;
}
.drop:hover,.drop:active{border-color:var(--fg-red); background:var(--surface-2);}
.drop-title{font-weight:500; font-size:15px;}
.drop-sub{font-size:11.5px; color:var(--muted); margin-top:5px;}

/* Thumbnails = Key Visuals, daher CI-Rundung.
   CI: dünne graue Linie K=50 als Begrenzung. */
.thumb{
  background:var(--bg); border:1px solid rgba(127,127,127,.5);
  border-radius:var(--round-ci) 0 var(--round-ci) 0;
  overflow:hidden; position:relative;
}
.thumb img{width:100%; height:112px; object-fit:cover; display:block;}
.thumb .tag2{
  font-size:10px; letter-spacing:.06em; padding:7px 10px;
  font-variant-numeric:tabular-nums; text-transform:uppercase; font-weight:500;
}
.thumb .tag2.has{color:var(--fg-white);}
.thumb .tag2.no{color:var(--muted);}
.thumb .rm{
  position:absolute; top:7px; right:7px; width:25px; height:25px;
  background:var(--fg-red); color:var(--fg-white); border:none;
  border-radius:50%; font-size:15px; line-height:1; cursor:pointer;
}

/* ---------- Bot-Prüfung / Einwilligung ---------- */
.turnstile-ph{
  background:var(--bg); border:1px dashed var(--line);
  padding:12px; text-align:center; font-size:11.5px;
  color:var(--muted); letter-spacing:.06em;
}
.consent .form-check-input{
  background:var(--bg); border:1px solid var(--line); border-radius:0;
  width:19px; height:19px; margin-top:.15rem;
}
.consent .form-check-input:checked{background-color:var(--fg-red); border-color:var(--fg-red);}
.consent .form-check-input:focus{box-shadow:0 0 0 3px var(--fg-red-dim); border-color:var(--fg-red);}
.consent .form-check-label{color:var(--muted); font-size:12.5px; line-height:1.5;}
.consent a{color:var(--fg-red-lift); text-decoration:underline;}

/* ---------- Hauptaktion ---------- */
.btn-flag{
  background:var(--fg-red); color:var(--fg-white); border:none;
  border-radius:var(--round-ci) 0 var(--round-ci) 0;   /* Signatur-Rundung */
  font-family:'Gotham Pro','Montserrat',sans-serif;
  font-weight:500; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; padding:.9rem;
}
.btn-flag:hover,.btn-flag:focus{background:var(--fg-red-lift); color:var(--fg-white);}
.btn-flag:disabled{background:var(--surface-2); color:var(--muted); opacity:1;}

.alert-danger{
  background:var(--fg-red-dim); border:none; border-left:3px solid var(--fg-red);
  border-radius:0; color:var(--text); font-size:13px;
}

/* ---------- Bestätigung ---------- */
.ok-badge{
  width:58px; height:58px; border-radius:var(--round-ci) 0 var(--round-ci) 0;
  background:var(--fg-red); display:flex; align-items:center; justify-content:center;
}
.result-title{
  font-weight:500; font-size:15px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-white);
}

/* ---------- Fußleiste (CI: Balken schafft Bereich für wichtige Infos) ---------- */
.legal{
  font-size:10.5px; color:#6E6E7A; line-height:1.6; letter-spacing:.02em;
  text-align:center; margin-top:22px;
}
.legal a{color:#8A8A96; text-decoration:none;}
.legal a:hover{color:var(--fg-red-lift);}

/* ---------- Barrierefreiheit ---------- */
:focus-visible{outline:2px solid var(--fg-red-lift); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* Honeypot */
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}

/* ============================================================
   ÜBERSICHT / BONUS
   ============================================================ */

.saldo{
  font-size:30px; font-weight:500; color:var(--fg-white);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.saldo-sub{
  font-size:22px; font-weight:500; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1;
}

/* Zeile je Meldung */







.scout-id{
  font-weight:500; font-size:13.5px; color:var(--fg-white);
  letter-spacing:.04em;
}
.scout-meta{
  font-size:11.5px; color:var(--muted); margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.scout-note{
  font-size:12px; color:var(--text); margin-top:5px;
  padding-left:.9em; text-indent:-.9em;
}
.scout-note::before{content:"› "; color:var(--fg-red-lift); font-weight:700;}
.scout-bonus{
  flex:0 0 auto; font-size:13px; font-weight:500; color:var(--fg-white);
  font-variant-numeric:tabular-nums; padding-top:1px;
}

/* Statusanzeige */
.badge-ci{
  flex:0 0 auto; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; padding:3px 8px; white-space:nowrap;
}
.st-neu{background:var(--surface-2); color:var(--muted);}
.st-active{background:rgba(72, 137, 235, 0.808); color:var(--fg-white);}
.st-ok {background:rgba(255,255,255,.1); color:var(--fg-white);}
.st-no {background:var(--surface-2); color:var(--muted); text-decoration:line-through;}
.st-top{background:var(--fg-red); color:var(--fg-white);}

/* Buchungszeile */
.buch-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.buch-row:first-child{padding-top:0;}
.buch-row:last-child{border-bottom:none; padding-bottom:0;}
.buch-typ{font-size:13px; font-weight:500; color:var(--text);}
.buch-meta{font-size:11px; color:var(--muted); margin-top:2px;}
.buch-betrag{
  font-size:14px; font-weight:500; color:var(--fg-white);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.buch-betrag.minus{color:var(--muted);}

/* Duplikatshinweis bei der Erfassung */
.dupe-hint{
  background:var(--fg-red-dim); border-left:3px solid var(--fg-red);
  padding:12px 14px; font-size:12.5px; line-height:1.55; color:var(--text);
}
.dupe-hint b{color:var(--fg-white);}

.min-w-0{min-width:0;}

/* ---------- Meldungskarte mit Fotostreifen und Karte ---------- */
.scout-item .card-body{padding:16px 16px 14px;}

.thumb-strip{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.thumb-strip::-webkit-scrollbar{height:5px;}
.thumb-strip::-webkit-scrollbar-thumb{background:var(--line);}
.strip-item{
  flex:0 0 auto; display:block; line-height:0;
  border:1px solid rgba(127,127,127,.5);
  border-radius:12px 0 12px 0; overflow:hidden;
  transition:border-color .15s;
}
.strip-item:hover{border-color:var(--fg-red);}
.strip-item img{width:88px; height:88px; object-fit:cover; display:block;}

/* Aufklappbare Karte */
.map-box{border-top:1px solid var(--line); padding-top:10px;}
.map-box summary{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer; list-style:none; font-size:12px; color:var(--text);
  padding:4px 0; user-select:none;
}
.map-box summary::-webkit-details-marker{display:none;}
.map-box summary i{color:var(--fg-red-lift);}
.map-box summary:hover{color:var(--fg-white);}
.map-coords{color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.map-box[open] summary{margin-bottom:8px;}

.map-inner{
  border:1px solid var(--line);
  border-radius:var(--round-ci) 0 var(--round-ci) 0;
  overflow:hidden;
}
.map-inner iframe{
  display:block; width:100%; height:220px; border:0;
  filter:grayscale(.25) contrast(1.05) brightness(.92);   /* fügt sich in den Dark Mode ein */
}
.map-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 12px; background:var(--bg); font-size:11px; color:var(--muted);
}
.map-foot a{color:var(--fg-red-lift); text-decoration:none; white-space:nowrap;}
.map-foot a:hover{color:var(--fg-white);}


/* ---------- Fortschritt beim Absenden ---------- */
.progress-box{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--round-ci) 0 var(--round-ci) 0; padding:14px;
}
.progress-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; font-weight:500; color:var(--text); margin-bottom:9px;
}
.progress-head i{color:var(--fg-red-lift);}
.progress-pct{
  font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--fg-white); white-space:nowrap;
}
.progress-track{height:6px; background:var(--surface-2); overflow:hidden;}
.progress-fill{
  height:100%; width:0; background:var(--fg-red);
  transition:width .25s ease-out;
}
/* Serverphase: Dauer unbekannt, daher laufende Streifen statt Prozent */
.progress-fill.indeterminate{
  background-image:linear-gradient(115deg,
    var(--fg-red) 0 25%, var(--fg-red-lift) 25% 50%,
    var(--fg-red) 50% 75%, var(--fg-red-lift) 75% 100%);
  background-size:32px 100%;
  animation:progress-stripes .9s linear infinite;
}
@keyframes progress-stripes{from{background-position:0 0} to{background-position:32px 0}}
.progress-meta{
  font-size:11px; color:var(--muted); margin-top:8px;
  font-variant-numeric:tabular-nums; min-height:1.2em;
}
.verify-banner{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--fg-red-dim); border-left:3px solid var(--fg-red);
  padding:12px 14px; font-size:12.5px; color:var(--text); line-height:1.5;
}
.verify-banner i{color:var(--fg-red-lift); margin-top:2px;}
.verify-banner a{color:var(--fg-red-lift);}