/* ============================================================================
   Bürgerfest – Bundespolizeidirektion Hannover
   Look: hell & familienfreundlich mit malerischem Arcane-Anklang –
   Poster-Typo (Oswald) wie auf dem Flyer, atmosphärisches Licht im Header,
   Themenwelten in Corporate-Design-Farben mit weichen Verläufen.
   ============================================================================ */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/baloo2.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/oswald.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/caveat.woff2") format("woff2");
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/dancingscript.woff2") format("woff2");
}

:root {
  /* ---- FARBEN AUS DEM DRUCK (Banner, Poster, Flyer, 75-Jahre-Logo) ----
     Pixelgenau aus den Druckdateien gemessen – bitte nicht frei verändern,
     sonst laufen App und Drucksachen auseinander.
       #02243E  Banner-/Flyergrund (tiefes Navy)
       #0A395C  Textkästen im Banner
       #004370  Navy der Logo-Schrift „Sicherheit seit 1951"
       #D8B500  Gold des 75-Jahre-Logos und des Datumsbands
       #CAA922  wärmeres Druck-Gold auf Banner und Flyer
       #313131  Anthrazit-Panel des Anwohnerflyers
       #D0D4D8  kühles Hellgrau des Postergrunds                        */
  --navy:        #0A395C;   /* Flächen und Kopfzeile */
  --navy-dark:   #02243E;   /* Banner-Grund */
  --navy-soft:   #004370;   /* Logo-Navy, weichere Akzente */
  --rot:         #A32D2D;   /* KEINE CD-Farbe: allein für Notfall und Warnung */
  --gold:        #D8B500;   /* 75-Jahre-Gold */
  --gold-warm:   #CAA922;   /* Druck-Gold auf Banner und Flyer */
  --gold-hell:   #E9C93A;
  --gold-dark:   #8a6a12;
  --anthrazit:   #313131;   /* Panel-Ton des Anwohnerflyers */
  --gruen:       #3B6D11;
  --orange:      #EA8A2C;
  --creme:       #EEF1F4;   /* kühles Hellgrau statt des Duderstädter Cremes */
  --karte:       #FFFFFF;
  --text:        #12283F;
  --muted:       #5d646c;
  --hint:        #969ba1;
  --linie:       #DCE2E8;
  --linie-gold:  #EBDCA8;
  --radius:      14px;
  --tap:         48px;
  --maxw:        520px;
  --font-fun:    "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head:   "Oswald", "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  /* Caveat zuerst: lockere Handschrift mit offenen Formen, deutlich lesbarer als die
     verbundene Kalligrafie von Dancing Script (bleibt als Rückfall). */
  --font-hand:   "Caveat", "Dancing Script", "Segoe Script", "Bradley Hand", cursive;
  /* Pinsel-Kante als Bildmaske: wellige/gerissene Ober- und Unterkante direkt am Foto
     (eine Ebene → beim Seitenübergang sauber, keine separaten Pinsel-Ebenen mehr). */
  --brush-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 9 C160 3 300 15 520 8 C740 1 900 15 1200 8 L1200 111 C900 118 740 105 520 112 C300 118 160 106 0 111 Z'/%3E%3C/svg%3E");
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--creme); touch-action: pan-x pan-y; }   /* Seiten-Pinch-Zoom aus, Scrollen bleibt */
html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body { background: transparent; }

/* ---- SEITENGRUND: Verlauf von Dunkelblau ins Weißgold ----
   Löst den früheren animierten Farbschleier ab (vier wandernde Farbwolken) – der
   gerichtete Verlauf verträgt sich damit nicht, und eine Dauer-Animation im
   Hintergrund kostet auf schwächeren Geräten unnötig Leistung.

   ZWEI SPIELARTEN, umschaltbar über eine Klasse am <html>-Element:

     Standard (Variante B): der Verlauf liegt FEST IM BILDSCHIRM. Oben bleibt das
       Dunkelblau stehen, egal wie weit gescrollt wurde – die Kacheln stehen dadurch
       dauerhaft in einem satten Rahmen.

     <html class="verlauf-seite"> (Variante A): der Verlauf gehört zur SEITE und
       scrollt mit. Die App wird von oben nach unten einmal heller.
       Zum Umschalten genügt die Klasse in index.html am <html>-Tag.

   Auf UNTERSEITEN läuft immer die helle Fassung: dort steht der Seitentitel als
   dunkles Navy direkt auf dem Grund und wäre auf dem dunklen Blau nicht mehr lesbar.
   Erkannt wird die Startseite daran, dass nur sie das Flyer-Banner trägt. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Unterseiten: helle Fassung, läuft ebenfalls ins Weißgold aus */
  background: linear-gradient(180deg,
    #DDE4EC  0%,
    #E4E7E6 34%,
    #EFEBDC 68%,
    #FFFDF4 100%);
}
/* Startseite: die kräftige Fassung. Die Stufen sind nach vorn gezogen, weil das
   Flyer-Banner dort rund ein Viertel der Höhe einnimmt – ohne die Verschiebung wäre
   das Blau schon hinter dem Banner verbraucht und der Inhalt begänne grau. */
html:has(header.appbar.imghead) body::before {
  background: linear-gradient(180deg,
    #16375A  0%,
    #2E5379 22%,
    #5B7B9C 38%,
    #9FB0BF 52%,
    #D3D6D2 66%,
    #EDE6CE 82%,
    #FFFDF4 100%);
}
/* Variante A: Verlauf an der Seite statt am Bildschirm */
html.verlauf-seite body::before { position: absolute; min-height: 100%; }
html { background: #FFFDF4; }
}
.kontrast body::before, body.kontrast::before { animation: none; background: #fff; }

#app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; position: relative; }

/* ---- Kopfzeile im Flyer-Look, mit malerischem Licht (Arcane-Anklang) ---- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background:
    radial-gradient(90% 130% at 85% -20%, rgba(242,194,48,.22), transparent 55%),
    radial-gradient(70% 100% at 12% 8%, rgba(28,74,143,.55), transparent 60%),
    radial-gradient(120% 90% at 50% 115%, rgba(163,45,45,.18), transparent 55%),
    linear-gradient(180deg, var(--navy-dark), var(--navy) 60%);
  color: #fff;
  padding: calc(4px + var(--safe-top)) 14px 12px;
  border-bottom: 1px solid rgba(242,194,48,.45);
  box-shadow: 0 2px 18px rgba(0,36,60,.25);
}
.skyline-row { margin: 0 -14px 4px; color: rgba(255,255,255,.16); }
.skyline { display: block; width: 100%; height: 22px; }
.appbar-row { display: flex; align-items: center; gap: 10px; }
.appbar .wappen {
  height: 48px; width: auto; flex: none; display: block;
  object-fit: contain; background: #fff;
  border-radius: 9px; padding: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.appbar .titles { flex: 1; min-width: 0; }
.appbar .jahre { color: var(--gold-hell); font-weight: 700; font-size: 11px; letter-spacing: .5px; }
/* overflow-wrap: ein einzelnes langes Wort (etwa der volle Behördenname) würde sonst aus
   seinem Kasten herauslaufen und unter dem Suchknopf landen. */
.appbar .kicker { font-size: 12px; line-height: 1.25; letter-spacing: .2px; color: #D5E0F0; font-weight: 600; overflow-wrap: anywhere; }
.appbar .title {
  font-family: var(--font-head); font-size: 18px; font-weight: 600;
  line-height: 1.1; letter-spacing: 2px; margin-top: 6px; white-space: nowrap;
  text-transform: uppercase;
}
.appbar .title.big {
  font-size: 25px; margin-top: 10px; letter-spacing: 2.5px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 22px rgba(242,194,48,.28);
}
.badge-70 {
  background: linear-gradient(160deg, #F8D670, var(--gold-hell) 55%, #D9A61F);
  color: #4a3305;
  font-family: var(--font-fun); font-size: 13px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap; flex: none;
  transform: rotate(-3deg);
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 14px rgba(242,194,48,.35);
}
.appbar .backbtn, .appbar .iconbtn {
  background: rgba(255,255,255,.14); border: none; color: #fff;
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  font-size: 20px; display: none; align-items: center; justify-content: center;
  text-decoration: none;
}
.appbar .iconbtn { display: flex; }
.appbar.has-back .backbtn { display: flex; }
.appbar.has-back .skyline-row { display: none; }
.chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.12); font-size: 12px; padding: 5px 10px; border-radius: 8px;
}
.chip.gold { background: rgba(242,194,48,.2); color: var(--gold-hell); font-weight: 600; }

/* ---- Start-Kopf: generierte Flyer-Grafik ---- */
.appbar.imghead {
  position: static; padding: calc(var(--safe-top)) 0 0;
  background: #0A1A33; border-bottom: 1px solid rgba(242,194,48,.5);
}
/* Der Flyer-Kopf bleibt beim Scrollen oben stehen; der Inhalt schiebt sich dahinter.
   Sticky liefert nebenbei den Positionierungs-Kontext für den Titel-Überzug und den
   Suchknopf (beide absolut), den vorher position:relative gab.
   Wer den Flyer lieber wegscrollen lassen will: <html class="flyer-scrollt">. */
.appbar.imghead { position: sticky; top: 0; z-index: 45; }
html.flyer-scrollt .appbar.imghead { position: relative; top: auto; z-index: auto; }
.appbar.imghead .hdr { display: block; width: 100%; }
/* Der Suchknopf liegt auf dem Flyer und überschneidet dort den Jubiläums-Schriftzug.
   Deshalb kräftiger hinterlegt: so wirkt er wie ein Knopf und nicht wie ein Fehler. */
.appbar.imghead .iconbtn {
  position: absolute; top: calc(10px + var(--safe-top)); right: 10px;
  background: rgba(2,36,62,.78);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
/* (Die frühere Wappen-Auflage ist entfallen – das Wappen steckt seit dem Banner vom
   17.08.2026 fest oben links im Bild.) */
/* Titel über dem Banner. Das Bild hält seine obere Hälfte frei – dieser Block sitzt
   genau darin und skaliert mit der Bildbreite, damit er auf jedem Gerät gleich sitzt. */
.appbar.imghead .hdr-text {
  position: absolute; left: 0; right: 0;
  top: calc(var(--safe-top) + 2%); height: 42%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1%; padding: 0 9vw; text-align: center; pointer-events: none;
}
/* Claim und Behördenname bleiben EINZEILIG und skalieren mit der Breite mit.
   Ein Umbruch würde den Textblock höher machen, als die freie Fläche des Banners ist –
   dann würde die oberste Zeile oben abgeschnitten. */
.appbar.imghead .hdr-claim,
.appbar.imghead .hdr-kicker { white-space: nowrap; }
.appbar.imghead .hdr-claim {
  font-family: var(--font-head); color: var(--gold);
  font-size: clamp(9px, 2.4vw, 13.5px); letter-spacing: .18em; text-transform: uppercase;
}
.appbar.imghead .hdr-kicker {
  color: rgba(255,255,255,.78);
  font-size: clamp(7.5px, 2.5vw, 12.5px); letter-spacing: .08em; text-transform: uppercase;
}
.appbar.imghead .hdr-title {
  font-family: var(--font-head); color: #fff; font-weight: 600;
  font-size: clamp(26px, 8.4vw, 44px); line-height: 1.02; letter-spacing: .04em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.appbar.imghead .hdr-date {
  color: #fff; font-size: clamp(10px, 2.9vw, 16px); letter-spacing: .05em;
  border-top: 1px solid rgba(216,181,0,.55); padding-top: .5%; margin-top: .4%;
}
.textgross .appbar.imghead .hdr-title { font-size: clamp(28px, 9.2vw, 48px); }

/* ---- Seiten-Container ---- */
main { padding: 14px 14px 96px; }
.page-title { font-family: var(--font-head); font-size: 24px; font-weight: 500; margin: 4px 2px 12px; text-transform: uppercase; letter-spacing: 1px; }
.page-lead  { color: var(--muted); font-size: 14px; margin: -6px 2px 14px; }
.group-intro { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -2px 2px 12px; }
.textgross .group-intro { font-size: 16px; }
section + section { margin-top: 18px; }
.section-title { font-family: var(--font-head); font-size: 15px; font-weight: 500; margin: 0 2px 10px; color: var(--navy); text-transform: uppercase; letter-spacing: 1.2px; }

/* ---- Karten ---- */
.card {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.pitem-card {
  --wf: var(--navy);
  border-left: 4px solid var(--wf);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative; overflow: hidden;
  min-height: 148px; display: flex; align-items: center;   /* alle Punkte gleich hoch (am größten orientiert) */
}
.pitem-card.past { opacity: .55; }
/* gedimmtes Hintergrundbild je Programmpunkt (Text bleibt lesbar) */
.pitem-card .pbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pitem-card .pbg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Option A (kontraststark): heller, deckender Schleier – Foto als ruhige Textur,
   Schrift dunkel, fett & mit weißem Saum. Overrides nur auf Programmkarten mit Foto. */
.pitem-card .pbg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(251,248,241,.97) 0%, rgba(251,248,241,.95) 48%, rgba(251,248,241,.8) 72%, rgba(251,248,241,.6) 100%); }
.pitem-card > .pbg + .pitem .info .h { color: #00243C; font-weight: 800; font-size: 17px;
  text-shadow: 0 1px 2px rgba(255,255,255,.98), 0 0 7px rgba(255,255,255,.92); }
.pitem-card > .pbg + .pitem .info .s { color: #17263F; font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,255,255,.96), 0 0 5px rgba(255,255,255,.82); }
.pitem-card > .pbg + .pitem .time .hh { color: var(--navy-dark);
  text-shadow: 0 1px 2px rgba(255,255,255,.96); }
.pitem-card > .pbg + .pitem .time .ee { text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.pitem-card > .pitem { position: relative; z-index: 1; flex: 1; min-width: 0; }

/* ---- Angebote, die mehrfach am Tag laufen (Kurse) ----
   Bewusst andere Optik als ein Einzeltermin: statt einer Uhrzeit steht links das
   Wiederhol-Zeichen, die Startzeiten liegen als Chips unter dem Titel. */
.kurse-title { display: flex; align-items: center; gap: 7px; }
.kurse-title .ti { font-size: 17px; color: var(--navy); opacity: .75; }
.kurs-card { min-height: 0; }
.kurs-card .pitem { cursor: pointer; }
.kurs-card .time .hh { font-size: 21px; line-height: 1.1; }
.kzrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kz {
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px; line-height: 1;
  padding: 5px 8px; border-radius: 8px; color: var(--navy-dark);
  background: rgba(255,255,255,.82); border: 1px solid rgba(0,36,60,.16);
}
.kz.weg { opacity: .42; text-decoration: line-through; }
.kz.nx { background: var(--wf, var(--navy)); border-color: transparent; color: #fff;
  box-shadow: 0 2px 7px rgba(0,36,60,.22); }
/* Läuft GERADE – kräftiger als der nächste Termin, mit ruhigem Puls. Die Reihenfolge
   der Regeln zählt: .laeuft steht nach .nx und .weg und gewinnt damit. */
.kz.laeuft {
  background: var(--rot, #C62828); border-color: transparent; color: #fff;
  box-shadow: 0 0 0 3px rgba(198,40,40,.18), 0 2px 8px rgba(0,36,60,.25);
  text-decoration: none; opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .kz.laeuft { animation: kzpuls 2.4s ease-in-out infinite; }
  @keyframes kzpuls {
    0%, 100% { box-shadow: 0 0 0 3px rgba(198,40,40,.18), 0 2px 8px rgba(0,36,60,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(198,40,40,.07), 0 2px 8px rgba(0,36,60,.25); }
  }
}
.knx.laeuft-jetzt { color: var(--rot, #C62828); }
.knx.laeuft-jetzt .dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--rot, #C62828); flex: none;
  box-shadow: 0 0 0 3px rgba(198,40,40,.20);
}
.knx { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--navy-dark);
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 2px rgba(255,255,255,.96); }
.kanm { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #17263F;
  display: flex; align-items: flex-start; gap: 6px;
  text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.knx .ti, .kanm .ti { flex: none; font-size: 15px; opacity: .8; }

/* Kursblock auf der Stationsseite */
.kurs-box { margin-top: 12px; padding: 12px 13px; border-radius: var(--radius);
  background: #fff; border: 1px solid rgba(0,36,60,.1);
  border-left: 4px solid var(--wf, var(--navy)); box-shadow: var(--shadow); }
.kurs-box .kb-head { font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--navy); display: flex; align-items: center; gap: 7px; }
.kurs-box .kz:not(.nx) { background: rgba(0,36,60,.05); }
.kurs-box .knx, .kurs-box .kanm { text-shadow: none; }
.kb-themen { margin: 10px 2px 0; padding: 0; list-style: none; }
.kb-themen li { position: relative; padding: 0 0 0 20px; margin-bottom: 7px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.kb-themen li::before { content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--wf, var(--navy)); }

/* Programm-Detail: Foto-Kopf, läuft nach unten weich ins Layout aus */
.prog-hero { margin: -14px -14px 10px; }
/* Kopf-Diashow (z. B. 4. EHu): Bilder liegen übereinander und blenden weich um */
.prog-hero.hero-slide { position: relative; height: 214px; }
.hero-slide img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide img { transition: none; } }
/* Waffenverbotszone: Plakat + Hinweisbox */
.wvz-bild { margin: 4px 0 16px; }
.wvz-bild img { display: block; width: 100%; max-width: 430px; margin: 0 auto; border-radius: 14px;
  box-shadow: 0 4px 14px -6px rgba(8,40,70,.35); }
.note-box { display: flex; gap: 10px; align-items: flex-start; background: #FDF6E7; border: 1px solid #ecd9a8;
  color: #6d5416; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-top: 14px; }
.note-box .ti { flex: none; font-size: 18px; margin-top: 1px; color: #B98E2F; }
.prog-hero img {
  display: block; width: 100%; height: 214px; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* Vollhöhen-Kopf: das Foto wird komplett gezeigt statt auf einen 214-px-Streifen
   beschnitten – für Motive, bei denen der Bildrand mit erzählt (z. B. die zweite
   Trainerin im Hintergrund bei der Selbstbehauptung). Der weiche Auslauf nach
   unten bleibt, greift aber erst ganz am Rand, damit nichts ausgewaschen wirkt. */
.prog-hero.hero-voll img {
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
/* Panorama-Kopf (z. B. UE): das sehr breite Bild schwenkt langsam von links nach
   rechts und wieder zurück – wirkt wie ein Kameraschwenk über das Gelände */
.pano-hero img { animation: panoSweep 42s ease-in-out infinite alternate; }
@keyframes panoSweep {
  from { object-position: 0% 50%; }
  to   { object-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .pano-hero img { animation: none; object-position: center; } }

/* Deutschlandkarte mit Ausbildungsorten (Reiter „Wo du ausgebildet wirst") */
.dekarte { position: relative; margin: 4px 0 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--linie); background: #0e2a44; }
.dekarte img { display: block; width: 100%; }
.dekarte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.karr-tag.akad { background: color-mix(in srgb, #E7B84B 22%, #fff);
  border-color: color-mix(in srgb, #E7B84B 55%, var(--linie)); font-weight: 700; }
/* Ortsnamen als Schalter – blenden die Beschriftung auf der Karte ein */
.karr-tag.tipp { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease,
  background .18s ease, border-color .18s ease; }
.karr-tag.tipp:active { transform: scale(.97); }
.karr-tag.tipp.an { background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 3px 10px rgba(8,56,92,.28); }
.karr-tag.tipp.an i { color: #fff; }
.karr-tag.akad.tipp.an { background: #E7B84B; border-color: #E7B84B; color: #3a2c05; }
.karr-tag.akad.tipp.an i { color: #3a2c05; }

/* Beschriftungen auf der Karte: standardmäßig unsichtbar, blenden weich ein */
.dekarte .delabel { opacity: 0; transform: scale(.82) translateY(6px);
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; }
.dekarte .delabel.an { opacity: 1; transform: none; }
/* die zugehörige Nadel wächst dezent mit */
.dekarte .depin { transition: transform .34s cubic-bezier(.2,.9,.3,1.2); }
.dekarte .depin.an { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .dekarte .delabel, .dekarte .depin { transition: none; }
}


/* Klappbare Legenden auf dem Lageplan (Themenwelten, Vorführbereiche, weitere Stationen) */
.legbox { border-top: 1px solid var(--linie); }
.legbox:first-of-type { border-top: none; }
.legbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 12px 2px; }
.legbox > summary::-webkit-details-marker { display: none; }
.legbox .lb-t { font-family: var(--font-head); font-weight: 600; font-size: 15px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy); }
.legbox .lb-n { font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 12%, #fff); border-radius: 999px;
  padding: 1px 8px; line-height: 1.6; }
.legbox .lb-chev { margin-left: auto; color: var(--muted); font-size: 20px; transition: transform .2s; }
.legbox[open] .lb-chev { transform: rotate(180deg); }
.legbox .lb-body { padding-bottom: 6px; }
.textgross .legbox .lb-t { font-size: 18px; }

/* „Nächste Events“ – zusammenklappbarer Block auf der Startseite.
   Die Kopfzeile sieht aus wie eine Abschnittsüberschrift, ist aber antippbar. */
.nextbox { margin: 2px 0 4px; }
.nextbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 4px 2px 10px; }
.nextbox > summary::-webkit-details-marker { display: none; }
.nextbox .nb-t { font-family: var(--font-head); font-weight: 600; font-size: 15px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy); }
.nextbox .nb-n { font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 12%, #fff); border-radius: 999px;
  padding: 1px 8px; line-height: 1.6; }
/* Der Pfeil war ein blasses Graustufen-Zeichen ohne Rahmen und wurde nicht als Knopf
   gelesen. Jetzt ein runder Knopf im selben Stil wie die Glocken darunter – damit ist
   auf den ersten Blick zu sehen, dass sich der Block zuklappen lässt. */
.nextbox .nb-chev {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--linie); background: #fff; color: var(--navy);
  font-size: 20px; line-height: 32px; text-align: center;
  box-shadow: 0 1px 3px rgba(2,36,62,.10);
  transition: transform .22s ease, background .18s, color .18s;
}
.nextbox[open] .nb-chev { transform: rotate(180deg); }
/* Zugeklappt kräftiger: dann ist der Knopf der einzige Weg zurück zum Programm. */
.nextbox:not([open]) .nb-chev { background: var(--navy); color: #fff; border-color: var(--navy); }
.nextbox > summary:active .nb-chev { background: color-mix(in srgb, var(--navy) 12%, #fff); }
.textgross .nextbox .nb-chev { width: 40px; height: 40px; line-height: 38px; font-size: 23px; }
.nextbox .nb-body > .pitem-card { margin-bottom: 10px; }
.textgross .nextbox .nb-t { font-size: 18px; }

/* Foto-Kachel „Vor dem Losfahren" auf der Startseite – führt zur Waffenverbotszone.
   Fällt ins Auge, ohne zu belehren. Ohne Bild (onerror) bleibt eine ruhige Navy-Fläche. */
.vorab { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden;
  border-radius: var(--radius); text-decoration: none; margin: 2px 0 16px;
  min-height: 112px; padding: 14px 14px 14px 16px;
  background: linear-gradient(100deg, var(--navy-dark, #00243C) 0%, var(--navy, #08385C) 62%, transparent 100%),
              var(--navy, #08385C);
  box-shadow: 0 4px 14px rgba(8,56,92,.18); }
.vorab-img { position: absolute; inset: 0; z-index: 0; }
.vorab-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.vorab.nobg .vorab-img { display: none; }
/* dunkler Verlauf über dem Foto, damit die Schrift immer sitzt */
.vorab::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,36,60,.86) 0%, rgba(0,36,60,.72) 38%, rgba(8,56,92,.28) 62%, transparent 84%); }
.vorab.nobg::after { background: none; }
.vorab-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px;
  flex: 0 1 auto; max-width: 62%; min-width: 0; }
.vorab-kicker { font-family: var(--font-head); font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gold, #E7B84B); font-weight: 600; }
.vorab-titel { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .3px; }
.vorab-sub { font-size: 12.5px; color: rgba(255,255,255,.86); line-height: 1.4; }
.vorab-chev { position: relative; z-index: 2; flex: none; margin-left: auto; font-size: 22px;
  color: #fff; text-shadow: 0 1px 5px rgba(0,20,40,.75); }
.vorab:active { transform: scale(.995); }
.textgross .vorab-titel { font-size: 20px; }
.textgross .vorab-sub { font-size: 15px; }

/* Antippbarer Hinweis auf der Startseite (Waffenverbot/Hunde) */
.note-tap { text-decoration: none; cursor: pointer; }
.note-tap:active { transform: scale(.995); }
.note-more { display: block; margin-top: 6px; font-weight: 700; color: var(--navy);
  font-size: 12.5px; letter-spacing: .2px; }
.note-more i { font-size: 13px; vertical-align: -1px; }

/* Farbpunkt in der Sammel-Pin-Auswahl (Themenwelt der Station) */
.lpco-prog .stpunkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-right: 2px; }

/* Emblem/Wappen unter dem Programm-Detailtext (z. B. BFC-Vereinswappen) */
.prog-wappen { margin: 18px auto 6px; text-align: center; }
.prog-wappen img { width: 120px; max-width: 42%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.prog-wappen figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---- Live-Karte ---- */
.live {
  background: #fff; border: 1px solid var(--linie-gold);
  border-left: 5px solid var(--rot); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px; margin-bottom: 12px;
}
.live .lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); animation: puls 1.6s infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live .dot { animation: none; } }
.live .lbl-txt { font-size: 11px; font-weight: 700; color: var(--rot); letter-spacing: .4px; }
.live .lbl-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.live .h { font-family: var(--font-head); font-size: 18px; font-weight: 500; cursor: pointer; letter-spacing: .3px; }
.live .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---- Nächste Termine (Startseite) – Weltfarbe über --wf ---- */
/* (Die schlichte Termin-Zeile .event ist entfallen – die Bereichsseiten nutzen
   seit v53 dieselbe Karte mit Foto wie das Programm.) */
.alllink {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 8px 0 2px; margin-bottom: 12px;
}

/* ---- Kachel-Raster (immer 2 nebeneinander) ---- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
/* Goldrand im Flyer-Gold: bindet die Kacheln sichtbar an das Kopfbanner.
   Das Textfeld unter dem Bild ist zart golden hinterlegt und läuft ins Weiße aus. */
.tile {
  background: linear-gradient(180deg,
    rgba(216,181,0,.16) 0%, rgba(216,181,0,.07) 45%, #fff 100%);
  border: 1.5px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(216,181,0,.35), 0 6px 18px rgba(2,36,62,.10);
  padding: 15px 13px; text-align: left; text-decoration: none; color: var(--text);
  display: block; min-height: 104px;
}
/* Kacheln ohne Foto: Verlauf umgekehrt, damit die Reihe einheitlich wirkt */
.tile:not(.photo) {
  background: linear-gradient(180deg,
    #fff 0%, rgba(216,181,0,.06) 62%, rgba(216,181,0,.14) 100%);
}
.tile:active { transform: scale(.98); }
.tile i { font-size: 26px; }
.tile .n { font-family: var(--font-head); font-size: 15px; font-weight: 500; margin-top: 7px; line-height: 1.3; letter-spacing: .4px; }
.tile .d { font-size: 11px; color: var(--muted); }
.tile.blau i   { color: var(--navy-soft); }
.tile.rot i    { color: var(--rot); }
.tile.gold i   { color: var(--gold-dark); }
.tile.gruen i  { color: var(--gruen); }
.tile.orange i { color: var(--orange); }
.tile.photo { padding: 0 0 11px; }
.tile.photo .timg { aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  margin-bottom: 8px; border-bottom: 1px solid rgba(216,181,0,.55); }
.tile.photo .timg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.photo { -webkit-touch-callout: none; user-select: none; }

/* ---- Foto-Anpassung (Langdruck auf Kachel) ---- */
.cropsheet {
  position: fixed; inset: 0; z-index: 220; background: rgba(0,36,60,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px; touch-action: none; overscroll-behavior: none;
}
.cropsheet .cs-head {
  color: #fff; font-family: var(--font-head); font-size: 18px; letter-spacing: 1.5px;
  text-transform: uppercase; display: flex; align-items: center; gap: 14px;
  width: min(92vw, 460px); justify-content: space-between; margin-bottom: 14px;
}
.cropsheet .cs-head .x { background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 11px; font-size: 19px; }
.cropsheet .cs-frame {
  width: min(88vw, 420px); aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: #000;
  outline: 3px solid var(--gold-hell); outline-offset: 2px;
  cursor: grab;
}
.cropsheet .cs-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.cropsheet .cs-hint { color: #B9C9E6; font-size: 13px; margin: 12px 0 16px; text-align: center; }
.cropsheet .cs-btns { display: flex; gap: 10px; width: min(92vw, 460px); }
.cropsheet .cs-btns .btn { flex: 1; }
.tile.photo .n, .tile.photo .d { padding: 0 12px; }
.tile.frei { border-style: dashed; background: transparent; color: var(--hint); }
.tabbar { border-top: 1px solid rgba(216,181,0,.45); }
.tile.frei i { color: var(--hint); }
.tile.frei .n { color: var(--hint); }

/* ---- Programmliste ---- */
.pitem { display: flex; gap: 12px; align-items: flex-start; }
.pitem .mk-num { flex: none; align-self: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rot); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; }
.pitem .time { text-align: center; min-width: 48px; padding-top: 2px; }
/* Karten-Texte sitzen über gedimmten Bildern → kräftiger, dunkler, mit hellem Schriftsaum */
.pitem .time .hh { font-family: var(--font-head); font-weight: 700; color: var(--wf-ink, var(--wf, var(--navy))); font-size: 17px;
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.7); }
.pitem .time .ee { font-size: 11px; color: var(--muted); font-weight: 600;
  text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.pitem .info { flex: 1; min-width: 0; cursor: pointer; }
.pitem .info .h { font-weight: 800; font-size: 16.5px; color: var(--navy); letter-spacing: .1px;
  text-shadow: 0 1px 2px rgba(255,255,255,.98), 0 0 8px rgba(255,255,255,.85); }
.pitem .info .s { font-size: 12.5px; color: #223349; font-weight: 700; margin-top: 3px;
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.7); }
.pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; margin-top: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.pill.navy { background: #E7EEF6; color: var(--navy); }
.pill.info { background: #FBEFD6; color: #7a5a12; }
.pill + .pill { margin-left: 6px; }
.bell {
  flex: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--linie);
  background: #fff; color: var(--navy); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.bell.on { background: var(--navy); color: var(--gold-hell); border-color: var(--navy); }
.bell.sm { width: 36px; height: 36px; font-size: 17px; }

/* ---- Themenwelten ---- */
.welt-card {
  border: 1px solid var(--linie); border-left: 6px solid var(--wf);
  background: #fff; border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px; margin-bottom: 12px; cursor: pointer;
}
.welt-card:active { transform: scale(.99); }
.wc-head { display: flex; align-items: center; gap: 9px; }
.wc-head i { font-size: 22px; color: var(--wf); }
.wc-name { font-family: var(--font-head); font-weight: 500; font-size: 16px; flex: 1; color: var(--wf-ink, var(--wf)); letter-spacing: .4px; }
.wc-cnt {
  background: var(--wf-ink, var(--wf)); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 24px; height: 24px; border-radius: 999px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wc-text { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* ---- Pinselstriche (SVG, mit Borsten-Striemen) ---- */
.brush { display: block; width: 100%; color: var(--wf); pointer-events: none; }

/* ---- Welt-Kopf mit Foto: Striche oben/unten, Titel geht ins Bild über ---- */
.welt-photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 14px; background: var(--wf);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--wf) 38%, transparent);
}
.wp-img { position: relative; }
.wp-img img { display: block; width: 100%; height: 240px; object-fit: cover;
  -webkit-mask: var(--brush-mask) center / 100% 100% no-repeat; mask: var(--brush-mask) center / 100% 100% no-repeat; }
.wp-title {
  position: relative; background: var(--wf-ink, var(--wf)); color: #fff; margin-top: -14px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px 12px;
  text-shadow: 0 1px 2px rgba(0,20,40,.35);
}
.wp-title i { font-size: 30px; filter: drop-shadow(0 1px 3px rgba(0,20,40,.4)); }

/* ---- Themenwelten-Übersicht: Foto-Karten ---- */
.wfc {
  position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 14px; cursor: pointer; background: var(--wf);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--wf) 30%, transparent);
}
.wfc:active { transform: scale(.99); }
.wfc .wc-photo { position: relative; }
.wfc .wc-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask: var(--brush-mask) center / 100% 100% no-repeat; mask: var(--brush-mask) center / 100% 100% no-repeat; }
.wfc .wc-bar {
  position: relative; background: var(--wf-ink, var(--wf)); color: #fff; margin-top: -14px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px 11px;
  text-shadow: 0 1px 2px rgba(0,20,40,.3);
}
.wfc .wc-bar i.ic { font-size: 24px; }
.wfc .wc-bar .n { flex: 1; font-family: var(--font-head); font-weight: 500; font-size: 17px; letter-spacing: .4px; }
.wfc .wc-bar .cnt {
  background: rgba(255,255,255,.22); min-width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; padding: 0 8px;
}

/* ---- Anfahrtskarte (Luftbild + Vektor-Overlay) ---- */
.anfahrt-wrap { position: relative; }
.anfahrt-wrap img { display: block; width: 100%; }
.anfahrt-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mapfs .stage .anfahrt-overlay { position: absolute; inset: 0; }

/* ---- Aufbau-Animation (gestaffelt) & Seitenübergänge ---- */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .5s cubic-bezier(.22,.75,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
/* Ruhige Überblendung: alte Seite geht zügig aus, neue Seite sanft ein –
   ohne Nachziehen/Morphen der vorherigen Folie. */
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in  .24s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } to { opacity: 1; } }
.appbar { view-transition-name: appbar; }
/* Startseiten-Kopf ist ein großes Bild – eigener Name, damit er NICHT in die
   kompakte Leiste morpht (sonst schob sich der alte Kopf kurz von oben ins Bild). */
.appbar.imghead { view-transition-name: appbar-home; }
.tabbar { view-transition-name: tabbar; }

.welt-hero {
  background:
    radial-gradient(120% 160% at 88% -30%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(130% 120% at 0% 120%, rgba(0,20,40,.28), transparent 60%),
    var(--wf-ink, var(--wf));
  color: #fff; border-radius: var(--radius);
  padding: 16px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 13px;
  border: 1px solid color-mix(in srgb, var(--wf) 60%, #000);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--wf) 38%, transparent);
  text-shadow: 0 1px 2px rgba(0,20,40,.35);
}
.welt-hero i { font-size: 34px; filter: drop-shadow(0 1px 3px rgba(0,20,40,.4)); }
.wh-name { font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: .5px; }
.wh-sub { font-size: 12.5px; opacity: .85; }

/* ---- Liste ---- */
.row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.row .ic { width: 40px; height: 40px; border-radius: 12px; background: #E7EEF6; color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.row .ic.welt { background: color-mix(in srgb, var(--wf) 15%, #fff); color: var(--wf); }
.row .ic.gruen2 { background: #EAF3DE; color: var(--gruen); }
.row .ic .ic-sym { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: 1px; }
.row.notruf .ic { background: #FCEBEB; color: var(--rot); }
.row .body { flex: 1; min-width: 0; }
/* Behördennamen sind lang und haben keine Trennstellen
   („Bundespolizeiinspektion Kriminalitätsbekämpfung Hamburg"): ohne diesen Umbruch
   schiebt ein einziges Wort die ganze Seite auf schmalen Geräten zur Seite. */
.row .body .h { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.row .body .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.row .go { color: var(--hint); font-size: 20px; flex: none; }
/* Teileinheit-Zeile mit Foto – Look wie die Programmpunkte (Foto rechts sichtbar,
   heller Verlauf, dunkle fette Schrift). Antippen wechselt direkt ins Detail. */
.row.rowimg { position: relative; overflow: hidden; min-height: 84px; border-color: var(--linie-gold); }
.row.rowimg .row-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.row.rowimg .row-veil { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(251,248,241,.96) 0%, rgba(251,248,241,.9) 46%, rgba(251,248,241,.78) 72%, rgba(251,248,241,.58) 100%); }
.row.rowimg > .ic, .row.rowimg > .body, .row.rowimg > .go { position: relative; z-index: 1; }
.row.rowimg .body .h { color: #00243C; font-weight: 800; text-shadow: 0 1px 2px rgba(255,255,255,.95); }
.row.rowimg .body .s { color: #17263F; font-weight: 600; text-shadow: 0 1px 2px rgba(255,255,255,.88); }
.row.rowimg .go { color: var(--navy-soft); }
.row .tel { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--rot); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; }

/* ---- Kinder Kommissar-Anwärter ---- */
.karl {
  background: color-mix(in srgb, var(--wf) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--wf) 40%, #fff);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; color: #7a4712;
}
.karl i { font-size: 30px; color: var(--wf); flex: none; }

/* Einstellungsberatung vor Ort – Mail und Durchwahlen zum Antippen */
.karr-beratung {
  background: color-mix(in srgb, var(--kc) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--kc) 28%, #fff);
  border-left: 4px solid var(--kc);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.karr-beratung .kb-head { font-weight: 700; color: var(--kc); display: flex; align-items: center; gap: 8px; }
.karr-beratung .kb-head i { font-size: 20px; }
.karr-beratung .kb-text { font-size: 14px; line-height: 1.5; margin: 6px 0 10px; }
.karr-beratung .kb-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--kc) 18%, #fff);
  color: inherit; text-decoration: none; font-size: 14px;
}
.karr-beratung .kb-row i { font-size: 18px; color: var(--kc); flex: none; }
/* minmax(0,1fr) statt 1fr: sonst wächst eine Spalte an ihrem längsten Wort auf
   („Dienstpferdevorführung") und schiebt die ganze Seite seitlich aus dem Bild. */
.kinder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* Zusatzangaben je Kinderangebot (Ort · Zeit · Alter) */
.kind-item .ki-meta { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; opacity: .78; }
/* Info-Kachel (nicht antippbar – die Angebote verteilen sich über das Gelände) */
.kind-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--wf) 30%, var(--linie)); border-radius: 14px;
  background: color-mix(in srgb, var(--wf) 14%, #fff);
  padding: 12px 11px; font-size: 13px; font-weight: 700; color: var(--navy);
  /* lange deutsche Wörter dürfen umbrechen statt die Kachel aufzublähen */
  overflow-wrap: anywhere;
}
.kind-item > span { min-width: 0; }
.kind-item > i:first-child { font-size: 22px; color: var(--wf-ink, var(--wf)); flex: none; }
.kind-item span { flex: 1; min-width: 0; }
.kind-item .kip { font-size: 15px; color: var(--wf-ink, var(--wf)); opacity: .55; flex: none; }

/* ---- Maskottchen Karl: Banner (Themenfoto-Stil) + zwei Foto-Buttons ---- */
/* Sticker-Pass: 6 Sticker-Felder in den Themenwelt-Farben */
.stempel-card { background: #fff; border: 1.5px solid color-mix(in srgb, var(--wf) 30%, var(--linie));
  border-radius: 16px; padding: 14px 14px 12px; margin: 2px 0 14px; }
.stempel-card .st-head { font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: .3px;
  color: var(--wf-ink, var(--wf)); margin-bottom: 10px; }
.stempel-card .st-head i { margin-right: 5px; vertical-align: -2px; }
.stempel-card .st-row { display: flex; gap: 9px; justify-content: space-between; margin-bottom: 10px; }
.stempel-card .st-stamp { flex: 1; aspect-ratio: 1 / 1; max-width: 52px; border-radius: 50%;
  border: 2.5px dashed var(--sf); color: var(--sf);
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
  background: color-mix(in srgb, var(--sf) 8%, #fff); transform: rotate(-6deg); }
.stempel-card .st-stamp:nth-child(2n) { transform: rotate(5deg); }
.stempel-card .st-text { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 0 2px; }
.textgross .stempel-card .st-text { font-size: 16px; }

.karl-hero { margin-top: 4px; cursor: default; }
.karl-hero:active { transform: none; }
/* Der wellige Fotorand darf unten KEINEN hellen Strich zeigen: der Bereich hinter der
   Pinselmaske bekommt denselben Orangeton wie die Leiste → gemalte Fläche läuft nahtlos aus */
.karl-hero .wc-photo { background: var(--wf-ink, var(--wf)); }
/* Begrüßungs-Spruch in EINER Zeile – Schrift skaliert mit der Breite, „…" bleibt hinter „dich" */
.karl-hero .wc-bar { gap: 8px; }
.karl-hero .wc-bar i.ic { font-size: 20px; }
.karl-hero .wc-bar .n { font-weight: 600; white-space: nowrap; letter-spacing: .2px; font-size: clamp(11px, 3.5vw, 16px); }
.textgross .karl-hero .wc-bar .n { white-space: normal; font-size: 16px; }
.karl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.karl-btn { position: relative; border: none; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1; background: #fff; box-shadow: 0 4px 14px rgba(8,56,92,.16); }
.karl-btn:active { transform: scale(.98); }
.karl-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter-Symbol, falls (noch) kein Foto vorhanden ist – das Foto liegt darüber und deckt es ab */
.karl-btn .kb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 52px; color: rgba(255,255,255,.9); }
.karl-btn .kb-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 14px;
  background: linear-gradient(transparent, rgba(6,26,48,.55) 45%, rgba(6,26,48,.88)); color: #fff; font-family: var(--font-head);
  font-weight: 600; font-size: 15px; letter-spacing: .3px; text-align: center; }
.karl-btn .kb-label i { font-size: 16px; vertical-align: -2px; margin-right: 3px; }
.textgross .karl-btn .kb-label { font-size: 18px; }

/* ---- Karls Merkspiel (Memory/Paare) ---- */
.mem-top { display: flex; justify-content: space-between; align-items: center; margin: 8px 2px 4px; font-weight: 700; font-size: 14px; color: var(--navy); }
.mem-top i { color: var(--wf-ink, #EA8A2C); margin-right: 4px; }
.mem-moves { color: var(--muted); }
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 4px; }
.mem-card { aspect-ratio: 1 / 1; padding: 0; border: none; background: transparent; cursor: pointer; perspective: 700px; }
/* Vollbild: Kartenraster füllt den ganzen Schirm (Höhe per JS gesetzt), Karten werden hochkant */
html.mem-lock, html.mem-lock body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.mem-screen { display: flex; flex-direction: column; box-sizing: border-box; padding: 4px 8px 8px; margin: 0 -14px; }
.mem-screen .mem-top { flex: none; padding: 0 6px; margin: 6px 0 0; }
.mem-screen .mem-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.mem-screen .mem-card { aspect-ratio: auto; }
.mem-inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .34s cubic-bezier(.2,.7,.3,1.25); }
.mem-card.is-flipped .mem-inner, .mem-card.is-matched .mem-inner { transform: rotateY(180deg); }
.mem-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 2px 7px rgba(8,56,92,.16); }
.mem-back { background: linear-gradient(150deg, #0f6db0, #08385c); color: #fff; }
.mem-back i { font-size: 26px; opacity: .9; }
.mem-front { background: #fff; transform: rotateY(180deg); overflow: hidden; }
.mem-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mem-front i { font-size: 34px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,20,40,.4)); }
/* Icon nur als Fallback: liegt ein Foto davor, wird es versteckt; entfernt onerror das
   Foto, ist das Icon wieder erstes Kind und erscheint automatisch */
.mem-front img + i { display: none; }
.mem-card.is-matched { animation: memPop .42s ease; opacity: .9; }
/* KEIN filter auf .mem-inner (preserve-3d) – das würde den 3D-Flip flachdrücken.
   Treffer = grüner Innenrahmen auf der Vorderseite. */
.mem-card.is-matched .mem-front { box-shadow: inset 0 0 0 3px #82BB42; }
@keyframes memPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.09); } }
.mem-win { text-align: center; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 24px 18px 20px; margin-top: 4px; }
.mem-win .mw-badge { font-size: 48px; color: var(--wf-ink, var(--wf)); line-height: 1; }
.mem-win .mw-title { font-family: var(--font-head); font-weight: 600; font-size: 21px; color: var(--navy); margin-top: 8px; }
.mem-win .mw-score { font-size: 15px; color: var(--text); margin-top: 6px; }
.mem-win .mw-text { font-size: 14px; color: var(--muted); margin: 10px 6px 0; line-height: 1.5; }

/* ---- Wo ist Karl? (Guck-guck) ---- */
.karl-hud { display: flex; justify-content: space-between; align-items: center; margin: 8px 2px 6px; }
.karl-hud span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 18px; color: var(--navy);
  background: #fff; padding: 7px 14px; border-radius: 13px; box-shadow: 0 2px 6px rgba(8,56,92,.1); }
.karl-hud .kh-score i { color: #EA8A2C; }
.karl-hud .kh-time { color: #A32D2D; }
.karl-hud .kh-time i { color: #A32D2D; }
/* Spielwiese: sattes Grün mit weichen Rasenflecken, damit die Erdlöcher darin sitzen */
.karl-field { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 6px; padding: 16px 14px 20px;
  border-radius: 20px; background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.14) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.10) 0 3px, transparent 4px),
    linear-gradient(160deg, #8DBE4E 0%, #6EA637 55%, #5E9530 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.25), inset 0 -6px 16px rgba(0,0,0,.18), 0 4px 14px rgba(8,56,92,.14); }
.karl-hole { position: relative; aspect-ratio: 1 / .84; border: none; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 26%, #2a1a0b 0 38%, #5a3d23 44%, #6f4c2c 100%);
  box-shadow: inset 0 9px 18px rgba(0,0,0,.55), inset 0 -3px 6px rgba(255,220,170,.12), 0 2px 6px rgba(8,56,92,.14); }
.karl-hole:active { transform: scale(.98); }
.kh-crit { position: absolute; left: 19%; width: 62%; bottom: 20%; transform: translateY(150%); z-index: 1;
  transition: transform .19s cubic-bezier(.34,1.56,.64,1); }   /* kleiner Sprung beim Auftauchen */
.karl-hole.up .kh-crit { transform: translateY(0); }   /* Karl guckt mit Pfoten & Krawatte über den Erdhügel */
.kh-crit svg, .kh-crit .kh-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.kh-crit .kh-img { aspect-ratio: 1 / 1; object-fit: contain; }
.kh-mound { position: absolute; left: -5%; right: -5%; bottom: -4%; height: 34%; z-index: 2; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, #8a5f33 0 52%, #5b3d21 100%); box-shadow: 0 -2px 8px rgba(0,0,0,.28); }
.kh-mound::before, .kh-mound::after { content: ""; position: absolute; bottom: 46%; width: 12%; height: 60%;
  background: linear-gradient(#7FB03E, #5E9530); border-radius: 60% 60% 0 0 / 90% 90% 0 0; }   /* Grasbüschel am Rand */
.kh-mound::before { left: 12%; transform: rotate(-12deg); }
.kh-mound::after  { right: 12%; transform: rotate(12deg); }
.karl-hole.hit { animation: karlHit .28s ease; }
@keyframes karlHit { 40% { filter: brightness(1.25) saturate(1.1); } }
.kh-float { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  font-weight: 900; font-size: 24px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.5); animation: khFloat .7s ease-out forwards; }
.kh-float.gold { color: #ffe27a; }
.kh-float.neg { color: #ffc2c2; }
@keyframes khFloat { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -26px); } }
.karl-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.textgross .karl-hint { font-size: 15px; }

/* ---- Kinder-Kommissar-Quiz ---- */
.quiz-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 14px 16px;
  border: none; border-radius: 16px; background: var(--wf-ink, var(--wf)); color: #fff; text-align: left;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--wf) 40%, transparent); cursor: pointer; }
.quiz-cta:active { transform: scale(.99); }
.quiz-cta > i:first-child { font-size: 30px; flex: none; }
.quiz-cta .qc-t { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.quiz-cta .qc-t b { font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: .3px; }
.quiz-cta .qc-t small { font-size: 12.5px; opacity: .92; margin-top: 2px; }
.quiz-cta .qc-go { font-size: 22px; flex: none; opacity: .9; }

/* Spiel-Startbild (Quiz & Snake): großes Foto oben im Themenfoto-Stil, Karte mit Button darunter */
.game-hero { margin: 2px 0 0; }
.game-hero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  -webkit-mask: var(--brush-mask) center / 100% 100% no-repeat; mask: var(--brush-mask) center / 100% 100% no-repeat; }
.game-hero + .quiz-intro { margin-top: -10px; }
.quiz-intro { text-align: center; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 22px 18px 20px; margin-top: 4px; }
.qi-badge, .qd-badge { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--wf) 80%, #fff), var(--wf-ink, var(--wf)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--wf) 45%, transparent); }
.qi-badge i, .qd-badge i { font-size: 44px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,20,40,.3)); }
.quiz-lead { font-size: 15.5px; line-height: 1.5; color: var(--text); margin: 0 4px 14px; }
.quiz-best { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--wf-ink, var(--wf));
  background: color-mix(in srgb, var(--wf) 14%, #fff); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.quiz-best i { color: #E7B84B; }
.btn.quiz-go { background: #95581c; }

.quiz-prog { display: flex; gap: 6px; margin: 2px 2px 8px; }
.quiz-prog .qp { flex: 1; height: 7px; border-radius: 999px; background: var(--linie); }
.quiz-prog .qp.done { background: #2E9E4F; }
.quiz-prog .qp.cur { background: var(--wf); }
.quiz-count { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 2px 12px; text-transform: uppercase; letter-spacing: .4px; }
.qhard { color: var(--wf-ink, var(--wf)); }
.qhard i { font-size: 14px; vertical-align: -1px; }

/* ---- Altersstufen-Auswahl vor dem Quiz ---- */
.quiz-stufen { display: grid; gap: 10px; text-align: left; margin-top: 4px; }
.quiz-stufe {
  --wf: var(--navy);
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 12px; border-radius: 16px; cursor: pointer;
  background: #fff; border: 2px solid rgba(0,36,60,.1);
  border-left: 5px solid var(--wf);
  box-shadow: 0 2px 8px -4px rgba(8,56,92,.3);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  text-align: left; font: inherit; color: inherit;
}
.quiz-stufe:active { transform: scale(.985); }
.quiz-stufe.gew { border-color: var(--wf); box-shadow: 0 4px 14px -6px var(--wf); }
.quiz-stufe .qs-ic { flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wf); color: #fff; }
.quiz-stufe .qs-ic i { font-size: 24px; }
.quiz-stufe .qs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.quiz-stufe .qs-t { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); }
.quiz-stufe .qs-a { font-size: 12.5px; font-weight: 700; color: var(--wf-ink, var(--wf)); }
.quiz-stufe .qs-h { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.quiz-stufe .qs-rek { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 12px; font-weight: 700; color: var(--navy); }
.quiz-stufe .qs-rek i { color: #E7B84B; font-size: 13px; }
.quiz-stufe .qs-go { flex: none; font-size: 20px; color: var(--wf); opacity: .8; }
.qd-stufe { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 10px;
  font-size: 12.5px; font-weight: 700; color: var(--wf-ink, var(--wf)); }

/* Bildfrage: Foto über der Frage, damit auch Leseanfänger mitraten können */
.quiz-bild { margin: -4px 0 14px; text-align: center; }
.quiz-bild img { display: inline-block; max-width: 100%; height: 210px; width: auto;
  object-fit: contain; border-radius: 14px;
  box-shadow: 0 4px 16px -8px rgba(8,56,92,.5); }

.quiz-card { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 18px 16px; }
.quiz-q { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--navy); margin-bottom: 16px; letter-spacing: .2px; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 13px 16px; border: 2px solid var(--linie); border-radius: 14px; background: #fff; color: var(--navy);
  font-size: 16px; font-weight: 600; min-height: 52px; cursor: pointer; transition: transform .08s, border-color .12s; }
.quiz-opt:active { transform: scale(.99); }
.quiz-opt:not([disabled]):hover { border-color: var(--wf); }
.quiz-opt .qic { font-size: 22px; flex: none; }
.quiz-opt.correct { background: #E7F6EC; border-color: #2E9E4F; color: #1B5E2A; }
.quiz-opt.correct .qic { color: #2E9E4F; }
.quiz-opt.wrong { background: #FCEBEA; border-color: #C62828; color: #8E1B1B; }
.quiz-opt.wrong .qic { color: #C62828; }
.quiz-opt.dim { opacity: .55; }
.quiz-opt[disabled] { cursor: default; }
.quiz-fb { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.quiz-fb.ok { background: #E7F6EC; color: #1B5E2A; }
.quiz-fb.no { background: #FFF4E0; color: #7a5a12; }
.btn.quiz-next { background: var(--navy); }

.quiz-diplom { text-align: center; border-radius: 20px; padding: 24px 18px 20px; margin-top: 4px;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--wf) 12%, #fff));
  border: 1px solid color-mix(in srgb, var(--wf) 40%, var(--linie)); box-shadow: 0 6px 20px color-mix(in srgb, var(--wf) 22%, transparent); }
.qd-rang { font-family: var(--font-head); font-weight: 600; font-size: 23px; color: var(--wf-ink, var(--wf)); letter-spacing: .3px; margin-bottom: 6px; }
.qd-stars { color: #E7B84B; font-size: 26px; letter-spacing: 3px; margin-bottom: 6px; }
.qd-stars i { filter: drop-shadow(0 1px 1px rgba(120,90,30,.25)); }
.qd-score { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 8px; }
.qd-text { font-size: 14px; line-height: 1.5; color: var(--text); margin: 0 4px; }
.textgross .quiz-q { font-size: 24px; }
.textgross .quiz-opt { font-size: 19px; }
.textgross .quiz-lead, .textgross .qd-text { font-size: 18px; }

/* ---- Kleines Spiel „Karls Fährte" (Snake) ---- */
.snake-cta { background: var(--navy); }
/* fixer Spielbildschirm: Seite scrollt nicht, Steuerkreuz bleibt immer sichtbar */
html.snake-lock, html.snake-lock body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* bricht aus dem 14px-Innenabstand des <main> aus → volle Breite fürs Spielfeld */
.snake-screen { display: flex; flex-direction: column; box-sizing: border-box; padding: 4px 8px 8px; margin: 0 -14px; }
.snake-top { display: flex; align-items: center; gap: 12px; margin: 0 2px 8px; font-size: 14px; font-weight: 700; color: var(--navy); flex: none; }
.snake-title { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: .5px; margin-right: auto; }
.snake-top .snake-best { color: var(--muted); }
.snake-top i { vertical-align: -1px; }
.snake-top .snake-best i { color: #E7B84B; }
.snake-board { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.snake-stage { position: relative; margin: 0 auto; }
#snakecanvas { display: block; width: 100%; height: 100%; border-radius: 18px; border: 1px solid var(--linie);
  box-shadow: 0 6px 20px rgba(8,56,92,.16); touch-action: none; background: #FBF8F1; }
.snake-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; border-radius: 18px; background: rgba(251,248,241,.93); }
.snake-overlay p { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 0 0 14px; max-width: 300px; }
.so-badge { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  background: radial-gradient(circle at 40% 32%, #b9773a, #8A5A26); box-shadow: 0 4px 14px rgba(120,80,30,.35); }
.so-badge i { font-size: 40px; color: #fff; }
.so-title { font-family: var(--font-head); font-weight: 600; font-size: 26px; color: var(--navy); margin-bottom: 8px; letter-spacing: .5px; }
.btn.snake-go { background: var(--navy); width: auto; padding: 0 22px; }
.btn.snake-go.wide { width: 100%; padding: 0 18px; }
.so-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn.so-menu { background: rgba(255,255,255,.9); color: var(--navy); border: 1px solid var(--linie); }
/* Modus-Auswahl (zwei Schwierigkeitsgrade) im Startbildschirm */
.snake-modes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.snake-mode { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linie); background: #fff;
  box-shadow: 0 3px 10px rgba(8,56,92,.08); }
.snake-mode:active { transform: scale(.99); }
.snake-mode .sm-emoji { font-size: 30px; flex: none; line-height: 1; }
.snake-mode .sm-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.snake-mode .sm-txt b { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .3px; color: var(--navy); }
.snake-mode .sm-txt small { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.snake-mode .sm-go { font-size: 22px; flex: none; color: var(--kinder, #EA8A2C); }
.textgross .snake-mode .sm-txt small { font-size: 14px; }
/* Steuerkreuz „Seitenbalken + Mitte": große rechteckige Flächen, füllen die untere Fläche komplett aus.
   Links/rechts hohe Balken (über beide Reihen), oben/unten in der Mitte. Höhe setzt snakeLayout per JS. */
/* Steuerkreuz: echtes Kreuz, jede Taste liegt dort, wohin ihr Pfeil zeigt.
   Etwas schmaler als der Bildschirm und mittig – so bleibt der Daumenweg zu allen
   vier Tasten gleich kurz, egal ob links- oder rechtshändig gehalten. */
.snake-pad { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  gap: 8px; width: 100%; max-width: 330px; margin: 10px auto 0; flex: none; }
.sp-btn { border: none; border-radius: 18px; color: #fff; font-size: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 9px rgba(8,56,92,.22);
  transition: transform .07s ease, box-shadow .07s ease; }
.sp-btn i { filter: drop-shadow(0 1px 1.5px rgba(0,20,40,.45)); }
/* sichtbare Rückmeldung – die greift auch dort, wo das Gerät nicht vibrieren kann */
.sp-btn:active { transform: scale(.92); box-shadow: 0 1px 4px rgba(8,56,92,.3); }
.sp-up    { grid-area: 1 / 2 / 2 / 3; background: #0A69A5; }
.sp-left  { grid-area: 2 / 1 / 3 / 2; background: #5C5B95; }
.sp-right { grid-area: 2 / 3 / 3 / 4; background: #EA8A2C; }
.sp-down  { grid-area: 3 / 2 / 4 / 3; background: #82BB42; }
/* ---- Karls Würstchenregen (Fangen & Ausweichen) ---- */
#fangcanvas { display: block; width: 100%; height: 100%; border-radius: 18px;
  border: 1px solid var(--linie); box-shadow: 0 6px 20px rgba(8,56,92,.16);
  touch-action: none; background: #BFE3F7; }
.fang-leben { display: inline-flex; gap: 3px; }
.fang-leben i { font-size: 17px; color: #C7522B; }
.fang-leben i.leer { color: rgba(0,36,60,.16); }
/* nur zwei Tasten, groß und weit außen – dazwischen bleibt das Spielfeld frei
   sichtbar, und beide Daumen erreichen ihre Taste ohne Umgreifen */
.fang-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: 100%; max-width: 420px; margin: 10px auto 0; flex: none; }
.fp-left  { background: #5C5B95; }
.fp-right { background: #EA8A2C; }

/* ---- Karls Parcours (Laufen & Springen) ---- */
#laufcanvas { display: block; width: 100%; height: 100%; border-radius: 18px;
  border: 1px solid var(--linie); box-shadow: 0 6px 20px rgba(8,56,92,.16);
  touch-action: none; background: #BFE3F7; cursor: pointer; }
/* eine einzige, sehr große Taste – im Parcours gibt es nur eine Entscheidung */
.lauf-pad { display: flex; width: 100%; max-width: 460px; margin: 10px auto 0; flex: none; }
.lp-jump { flex: 1; background: #0A69A5; flex-direction: column; gap: 2px; font-size: 30px; }
.lp-jump span { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .4px; }

/* Unsichtbarer Haptik-Schalter für iOS (siehe tippTick in app.js).
   Bewusst NICHT display:none – das Element muss gerendert sein, sonst löst Safari
   keinen Impuls aus. position:fixed sorgt dafür, dass es immer im sichtbaren
   Bereich liegt; damit kann ein Fokuswechsel die Seite nicht scrollen lassen. */
.hapt { position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none; z-index: -1; }

/* Karls Pfote in der Mitte – füllt das Loch im Kreuz, ohne anklickbar zu sein */
.sp-mitte { grid-area: 2 / 2 / 3 / 3; display: flex; align-items: center; justify-content: center;
  color: var(--navy); opacity: .18; font-size: 30px; pointer-events: none; }

/* Karriere-Seite */
.karr-p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 2px 8px; }
.karr-sub { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 14px; margin: 12px 2px 6px; }
.karr-sub i { font-size: 18px; }
.karr-ul { list-style: none; margin: 0 0 8px; padding: 0; }
.karr-ul li { position: relative; padding: 5px 2px 5px 26px; font-size: 14px; line-height: 1.5; }
.karr-ul li::before { content: "✓"; position: absolute; left: 5px; top: 5px; color: var(--gruen); font-weight: 700; }
.karr-steps { list-style: none; counter-reset: st; margin: 0 0 8px; padding: 0; }
.karr-steps li { position: relative; padding: 5px 2px 7px 36px; font-size: 14px; line-height: 1.5; min-height: 26px; }
.karr-steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 2px; top: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.karr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 2px 6px; }
.karr-tag { display: inline-flex; align-items: center; gap: 5px; background: #E7EEF6; color: var(--navy);
  font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px; }
.karr-tag i { font-size: 15px; }

/* Fundbüro: Hinweis + Aktualisieren-Knopf */
.fund-refresh { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
  background: #EAF1FA; border: 1px solid var(--linie); border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; }
.fr-txt { font-size: 12.5px; color: var(--navy); display: flex; align-items: center; gap: 7px; flex: 1; min-width: 170px; line-height: 1.35; }
.fr-txt i { font-size: 16px; color: var(--navy-soft); flex: none; }
.fr-btn { flex: none; border: none; background: var(--navy); color: #fff; border-radius: 999px;
  padding: 8px 15px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fr-btn i { font-size: 15px; }
/* Fundsachen-Foto: Vorschaubild in der Zeile + Vollbild-Lightbox */
.fund-thumb { width: 46px; height: 46px; flex: none; border-radius: 11px; object-fit: cover;
  border: 1px solid var(--linie); cursor: zoom-in; background: #EAF1FA; }
.row .ti-zoom-in.go { cursor: zoom-in; }
.fund-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8,24,44,.93);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: flIn .15s ease; }
@keyframes flIn { from { opacity: 0; } }
.fund-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.fund-lightbox .fl-close { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px;
  width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff;
  font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Aufklappbare Abschnitte (Akkordeon) mit dezentem Farbakzent je Abschnitt (--kc) */
.karr-acc { background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--kc, var(--navy));
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.karr-acc > summary { list-style: none; cursor: pointer; padding: 13px 14px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--navy); text-transform: uppercase; letter-spacing: 1px;
  background: color-mix(in srgb, var(--kc, var(--navy)) 8%, #fff); }
.karr-acc > summary::-webkit-details-marker { display: none; }
.karr-acc > summary .ka-t { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.karr-acc > summary .ka-t i { font-size: 18px; color: var(--kc, var(--navy)); }
.karr-acc > summary .ka-chev { flex: none; color: var(--kc, var(--muted)); font-size: 20px; transition: transform .2s; }
.karr-acc[open] > summary .ka-chev { transform: rotate(180deg); }
.karr-acc[open] > summary { border-bottom: 1px solid var(--linie); }
.karr-acc .ka-body { padding: 12px 14px 6px; }
.karr-acc .ka-body > .row:last-child, .karr-acc .ka-body > .karr-ul:last-child,
.karr-acc .ka-body > .kinder-grid:last-child { margin-bottom: 0; }

/* Fließtext in den aufklappbaren Anreise-Reitern */
.anr-text { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 8px; }
.textgross .anr-text { font-size: 17px; }
/* Überschriften der Anreise-Reiter dürfen umbrechen (lange Titel wie „Aus Richtung
   Göttingen, Northeim und Harz") und stehen nicht in Großbuchstaben – besser lesbar. */
.anr-acc > summary { text-transform: none; letter-spacing: .2px; font-size: 14.5px; }
.anr-acc > summary .ka-t { white-space: normal; }

/* Eignungs-Kurzcheck (im Akkordeon) */
.kc-sub { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.kc-qs { display: flex; flex-direction: column; gap: 8px; }
.kc-q { text-align: left; width: 100%; border: 1px solid var(--linie); background: #F7F9FC; border-radius: 12px;
  padding: 10px 12px; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.kc-q::before { content: ""; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--muted); flex: none; }
.kc-q.on { border-color: var(--gruen); background: #EAF3DE; color: #245a12; font-weight: 600; }
.kc-q.on::before { content: "✓"; border-color: var(--gruen); background: var(--gruen); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.kc-result { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.4; }

/* Leistungen-Liste */
.karr-blist { list-style: none; margin: 0 0 4px; padding: 0; }
.karr-blist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; font-size: 14px; line-height: 1.5; }
.karr-blist li i { color: var(--navy); font-size: 18px; flex: none; margin-top: 1px; }

/* ---- Detail-Blatt ---- */
/* Grußwort der Abteilungsführung */
.grusswort { margin-bottom: 22px; }
.grusswort > .section-title { margin-bottom: 12px; }
.gw-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.gw-person { margin: 0; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(8,56,92,.06); }
.gw-person img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%; background: var(--navy-dark); }
.gw-person figcaption { padding: 8px 10px 10px; text-align: center; }
.gw-name { display: block; font-family: var(--font-head); font-weight: 500; font-size: 15px;
  letter-spacing: .3px; color: var(--navy); }
.gw-rolle { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- Vorstellung der Leitung: breite Visitenkarte (bei genau EINER Person) ----
   Klare Aufteilung: links das Porträt mit sauberer Kante, rechts die Textfläche auf
   einem hellen Verlauf. KEINE weichen Auslauf-Masken – die Form lebt von den
   abgerundeten Ecken der Karte, nicht von verschwommenen Übergängen.
   Eine feine goldene Linie trennt Bild und Text. */
.gw-karte {
  position: relative; margin: 0 0 14px; display: flex; align-items: stretch;
  border-radius: var(--radius); overflow: hidden; min-height: 190px;
  background: linear-gradient(150deg, #EDF1F6 0%, #F4F1E6 55%, #FBF7EA 100%);
  border: 1px solid var(--linie);
  box-shadow: 0 4px 16px rgba(2,36,62,.10);
}
.gw-karte .gwk-foto {
  width: 46%; flex: none; background: var(--navy-dark);
  border-right: 2px solid var(--gold);
}
.gw-karte .gwk-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 14%; display: block;
}
.gw-karte .gwk-text {
  flex: 1; min-width: 0; padding: 16px 16px 14px 6px;
  display: flex; flex-direction: column; justify-content: center;
}
.gw-karte .gwk-kicker { font-family: var(--font-head); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #8a6a12; font-weight: 600; }
.gw-karte .gwk-name { font-family: var(--font-head); font-size: 19px; font-weight: 600;
  letter-spacing: .5px; color: var(--navy-dark); margin-top: 2px; line-height: 1.15; }
.gw-karte .gwk-rolle { font-size: 12px; color: #3d4a58; margin-top: 4px; line-height: 1.4; }
.gw-karte .gwk-zitat { font-family: var(--font-hand); font-size: 17px; color: var(--navy);
  margin-top: 10px; line-height: 1.25; }
.gw-karte .gwk-zitat::before { content: "„"; }
.gw-karte .gwk-zitat::after  { content: "”"; }
.textgross .gw-karte .gwk-name  { font-size: 22px; }
.textgross .gw-karte .gwk-rolle { font-size: 14px; }
.textgross .gw-karte .gwk-zitat { font-size: 19px; }
/* Grußwort als handschriftlicher Begrüßungsbrief (Papier-Karte) */
.gw-letter { position: relative; background: linear-gradient(160deg, #FFFDF6, #FBF5E7);
  border: 1px solid var(--linie-gold); border-radius: var(--radius);
  padding: 20px 22px 18px; box-shadow: 0 4px 16px rgba(120,90,30,.12);
  background-image: repeating-linear-gradient(transparent, transparent 33px, rgba(8,56,92,.05) 34px), linear-gradient(160deg, #FFFDF6, #FBF5E7); }
.gw-letter::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 14px; width: 2px;
  background: rgba(163,45,45,.28); border-radius: 2px; }
.gw-letter > * { padding-left: 12px; }
/* Grußwort-Brief: Handschrift nur als GESTE – Anrede und Grußformel handschriftlich,
   der Fließtext in der Lesetype der App.
   Warum: Hannovers Grußwort hat gut 1.100 Zeichen in fünf Absätzen. Als Handschrift
   gesetzt war der Brief 1632 px hoch und über fünf Absätze mühsam zu lesen – gerade
   für ältere Besucher. So bleibt der persönliche Charakter, der Inhalt wird flüssig
   lesbar, und der Brief schrumpft auf rund 660 px.
   Handschrift ist Caveat (locker, offene Formen), NICHT Dancing Script – dessen
   verbundene Kalligrafie liest sich schlechter. */
.gw-hi { font-family: var(--font-hand); font-weight: 700; font-size: 28px; line-height: 1.15;
  color: var(--navy); margin: 0 0 8px; }
.gw-hand { font-size: 14.5px; line-height: 1.6; color: #1c2b3d; margin: 0 0 10px; }
.gw-close { font-family: var(--font-hand); font-weight: 700; font-size: 26px; color: var(--navy);
  margin: 14px 0 4px; }
/* Unterschriftszeile: Namen in Druckbuchstaben, Siegel rechts */
.gw-sign { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 4px; padding-right: 104px; }
.gw-sig { display: flex; flex-direction: column; }
.gw-sig .sig-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--navy); }
.gw-sig .sig-rolle { font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: .2px; }
/* Siegel des Abteilungswappens (geprägte Gold-Medaille, leicht gedreht) */
.gw-seal { position: absolute; right: 16px; bottom: 16px; width: 96px; height: 96px; border-radius: 50%;
  transform: rotate(-8deg); display: flex; align-items: center; justify-content: center; opacity: .96;
  background: radial-gradient(circle at 38% 30%, #fcf5df, #efdcac 55%, #d9bd76 100%);
  border: 1px solid #b8912e;
  box-shadow: 0 3px 9px rgba(120,90,30,.32), inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 5px #cBa64a,
    inset 0 0 0 6px rgba(120,90,30,.35); }
.gw-seal img { width: 60%; height: 60%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }

.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.detail-head .ic { width: 48px; height: 48px; border-radius: 13px; background: #E7EEF6; color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.detail-head .ic.welt { background: color-mix(in srgb, var(--wf) 15%, #fff); color: var(--wf); }
.detail-body { font-size: 15px; line-height: 1.6; }
.kv { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; margin-top: 8px; }
/* Foto einer Teileinheit / des Teileinheitsführers (Detailseite „Die Abteilung") */
.einheit-foto { margin: 0 0 6px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie-gold);
  box-shadow: 0 2px 10px rgba(8,56,92,.09); background: #fff; }
.einheit-foto img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.einheit-foto figcaption { font-size: 12.5px; color: var(--muted); padding: 8px 12px; background: #fff; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); border-radius: 13px; border: none;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 600; margin-top: 14px;
  text-decoration: none;
}
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--linie); }
.btn.merk-btn.on { background: #E7B84B; color: #4a3607; }
/* Vorstellung einer Einsatzhundertschaft: Einheiten-Foto oben, Führer-Porträt links,
   der Vorstellungstext fließt rechts daneben herunter und dann in voller Breite weiter. */
/* Zwei Führungs-Porträts nebeneinander (z. B. Führer + Stellvertreter),
   Vorstellungstext läuft darunter in voller Breite */
.hf-duo { display: flex; gap: 10px; margin-top: 14px; }
.hf-duo .hf-portrait { float: none; width: auto; max-width: none; flex: 1 1 0; margin: 0; }
.hf-duo .hf-portrait figcaption { padding: 7px 6px 9px; }
.hf-duo .hf-name { font-size: 14px; }
.hf-duo .hf-rolle { font-size: 11.5px; }
.hf-duo + .hf-intro { margin-top: 12px; }

.hf-intro { margin-top: 14px; }
.hf-intro::after { content: ""; display: block; clear: both; }
.hf-portrait { float: left; width: 44%; max-width: 162px; margin: 3px 16px 10px 0;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 3px 12px rgba(8,56,92,.12); }
.hf-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; background: var(--navy-dark); }
.hf-portrait figcaption { padding: 8px 10px 10px; text-align: center; }
.hf-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .3px; color: var(--navy); }
.hf-grad { display: block; font-size: 12.5px; color: var(--text); margin-top: 3px; font-weight: 600; }
.hf-rolle { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.hf-intro p { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.textgross .hf-intro p { font-size: 18px; }

/* ---- Zeitstrahl (Jubiläum) ---- */
.tl { border-left: 3px solid var(--gold); margin-left: 8px; padding-left: 16px; }
.tl .yr { font-family: var(--font-head); font-weight: 500; color: var(--navy); font-size: 17px; letter-spacing: .5px; }
.tl .it { position: relative; padding-bottom: 16px; }
.tl .it::before { content: ""; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--creme); }
.tl .tl-t { font-weight: 700; color: var(--navy); margin: 1px 0 3px; font-size: 15px; }
.tl .tl-x { font-size: 14px; line-height: 1.5; }
.tl-img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 10px; margin: 8px 0 4px; background: #0b2038; }
.tl-gallery { position: relative; margin: 8px 0 4px; border-radius: 10px; overflow: hidden; background: #0b2038; }
/* Bildnachweis unter historischen Aufnahmen (Archivlizenzen verlangen die Nennung) */
.tl-credit { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 2px 2px 6px; }
.tl-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
.tl-track::-webkit-scrollbar { display: none; }
.tl-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3/2; }
.tl-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-count { position: absolute; top: 8px; right: 8px; background: rgba(8,24,44,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; letter-spacing: .3px; pointer-events: none; }
.tl-dots { position: absolute; left: 0; right: 0; bottom: 5px; display: flex; justify-content: center; gap: 3px; }
.tl-dot { width: 7px; height: 7px; box-sizing: content-box; padding: 0; border: 4px solid transparent; border-radius: 50%; background: rgba(255,255,255,.55); background-clip: padding-box; box-shadow: 0 0 3px rgba(0,0,0,.55); cursor: pointer; -webkit-appearance: none; appearance: none; }
.tl-dot.on { background: #fff; }
.quellen { display: flex; flex-direction: column; }
.qlink { display: flex; align-items: center; gap: 9px; padding: 9px 2px; color: var(--navy);
  font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linie); }
.qlink:last-child { border-bottom: none; }
.qlink i { color: var(--navy-soft); font-size: 17px; flex: none; }

/* ---- Lageplan-Vorschau ---- */
.mapprev {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--linie); background: #fff; margin-bottom: 12px; cursor: pointer;
}
.mapprev img { display: block; width: 100%; }
.mapprev-badge {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,36,60,.85); color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
  max-width: calc(100% - 20px);
}
.legende { columns: 2; column-gap: 14px; margin-top: 12px; }
.leg { break-inside: avoid; display: flex; gap: 8px; padding: 5px 0; font-size: 13px; align-items: baseline; }
.leg .nr {
  flex: none; min-width: 24px; height: 22px; padding: 0 4px; border-radius: 7px;
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.leg.tap {
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 8px; align-items: center; cursor: pointer;
}
.leg.tap .nr { min-width: 28px; height: 26px; border-radius: 8px; }
.leg.tap .nr i { font-size: 15px; }
.leg.tap .nr.wht { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.leg.tap span:nth-child(2) { flex: 1; font-weight: 600; }
.leg.tap .go { color: var(--hint); font-size: 17px; }

/* ---- Vollbild-Kartenviewer ---- */
.mapfs {
  position: fixed; inset: 0; z-index: 200; background: var(--navy-dark);
  overflow: hidden; touch-action: none; overscroll-behavior: none;
}
/* will-change wird per JS nur WÄHREND der Geste gesetzt (siehe gestureActive in
   js/app.js) – dauerhaft aktiviert würde es die Karte als Bild skalieren und
   Schrift/Symbole unscharf machen. */
.mapfs .stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
/* Solange gewischt oder gezoomt wird, stehen ALLE Animationen in der Karte still.
   Die laufenden Strichlinien (.flowG) zwingen den Browser sonst, die komplette
   – beim Zoomen sehr große – Kartenfläche in jedem Frame neu zu zeichnen; das
   ruckelt und hinterlässt halbfertige, leere Kacheln. */
.mapfs.busy .stage *, .mapfs.busy .stage *::before, .mapfs.busy .stage *::after {
  animation-play-state: paused !important;
}
.mapfs .stage img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.mapfs .pin {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: var(--rot); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  transform-origin: center; cursor: pointer;
}
.mapfs .pin.big { width: 40px; height: 40px; font-size: 20px; }
.mapfs .pin.big i { font-size: 20px; }
.mapfs .pin.brc { background: #44608A; }
.mapfs .pin.wht { background: #fff; color: var(--navy); border-color: var(--navy); }
.mapfs .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #fff;
  padding: calc(10px + var(--safe-top)) 12px 20px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(rgba(0,36,60,.9), transparent);
}
.mapfs .topbar .t { font-family: var(--font-head); font-weight: 500; font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; }
.mapfs .closebtn {
  margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: none;
  background: rgba(255,255,255,.2); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.mapfs .hint {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(58px + var(--safe-top)); z-index: 5;
  background: rgba(0,36,60,.82); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px;
  transition: opacity .4s; white-space: nowrap;
}
.mapfs .ctrls {
  position: absolute; right: 12px; bottom: calc(22px + var(--safe-bottom)); z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.mapfs .ctrls button {
  width: 46px; height: 46px; border-radius: 12px; border: none;
  background: rgba(255,255,255,.94); color: var(--navy); font-size: 24px; font-weight: 700;
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
.mapfs .mapcap {
  position: absolute; left: 12px; right: 70px; bottom: calc(22px + var(--safe-bottom)); z-index: 5;
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(0,36,60,.88); color: #fff; font-size: 13px; line-height: 1.4;
  padding: 10px 13px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.mapfs .mapcap i { flex: none; font-size: 16px; margin-top: 1px; color: var(--gold-hell); }
.mapfs .mapcap span { min-width: 0; }
.mapfs .callout {
  position: absolute; left: 12px; right: 12px; bottom: calc(22px + var(--safe-bottom)); z-index: 6;
  background: #fff; border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.mapfs .callout .num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--rot); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mapfs .callout .body { flex: 1; min-width: 0; }
.mapfs .callout .body .h { font-weight: 700; }
.mapfs .callout .open {
  flex: none; border: none; background: var(--navy); color: #fff; border-radius: 10px;
  min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.mapfs .callout .x { flex: none; border: none; background: #F1EFE8; color: var(--muted); width: 44px; height: 44px; border-radius: 11px; font-size: 16px; }

/* Info-Fenster für Lageplan-Symbole (Vollbild) */
.mapfs .lpco {
  position: absolute; left: 12px; right: 12px; bottom: calc(22px + var(--safe-bottom)); z-index: 7;
  background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  max-height: 54vh; display: flex; flex-direction: column; overflow: hidden;
  animation: lpcoIn .18s ease both;
}
@keyframes lpcoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lpco-head { display: flex; align-items: center; gap: 11px; padding: 12px 12px 9px; }
.lpco-badge { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.lpco-badge i { font-size: 19px; }
.lpco-title { flex: 1; min-width: 0; font-weight: 700; color: var(--navy); font-size: 15.5px; line-height: 1.25; }
.lpco-x { flex: none; border: none; background: #F1EFE8; color: var(--muted); width: 44px; height: 44px; border-radius: 11px; font-size: 16px; }
.lpco-body { padding: 0 14px 12px; overflow: auto; }
.lpco-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.lpco-progs { display: flex; flex-direction: column; }
.lpco-prog { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie); cursor: pointer; }
.lpco-prog .t { flex: none; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 14px; min-width: 46px; }
.lpco-prog .n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.lpco-prog i { flex: none; color: var(--hint); font-size: 18px; }
.lpco-open { margin: 0 12px 12px; border: none; background: var(--navy); color: #fff; border-radius: 11px;
  min-height: 42px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- Suche ---- */
.searchbox { display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--linie); border-radius: 13px; padding: 0 12px; margin-bottom: 14px; }
.searchbox i { color: var(--muted); font-size: 20px; }
.searchbox input { border: none; outline: none; flex: 1; height: 46px; font-size: 16px; background: transparent; color: var(--text); }
.res-group { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 12px 2px 8px; }

/* ---- Einstellungen / Schalter ---- */
.toggle-row { display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.toggle-row .ic { width: 40px; height: 40px; border-radius: 12px; background: #E7EEF6; color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.toggle-row .body { flex: 1; }
.toggle-row .body .h { font-weight: 700; font-size: 15px; }
.toggle-row .body .s { font-size: 12px; color: var(--muted); }
.switch { flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--linie);
  border: none; position: relative; transition: background .15s; }
/* unsichtbare Trefferfläche auf ≥44px vergrößern (Touch) */
.switch::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% + 16px); height: 44px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--navy); }
.switch.on::after { left: 25px; }

/* ---- Rechtliches ---- */
.legal p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.legal .kv2 { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
/* Die Beschriftung darf nicht mitschrumpfen, der Wert schon – sonst schiebt eine lange
   E-Mail-Adresse auf schmalen Geräten die ganze Zeile aus dem Bild. */
.legal .kv2 .k { color: var(--muted); min-width: 120px; flex: 0 0 auto; }
.legal .kv2 > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---- Bottom-Navigation ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: var(--maxw); margin: 0 auto;
  background: #fff; border-top: 1px solid var(--linie);
  display: flex; justify-content: space-around;
  padding: 8px 0 calc(8px + var(--safe-bottom));
}
.tabbar a { text-decoration: none; color: var(--hint); text-align: center; flex: 1; }
.tabbar a i { font-size: 22px; }
.tabbar a .l { font-size: 10px; display: block; margin-top: 1px; }
.tabbar a.on { color: var(--navy); }
.tabbar a .cnt {
  position: absolute; transform: translate(10px,-6px); background: var(--rot); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---- Erinnerungs-Banner ---- */
/* Dankeschön nach der Veranstaltung (ersetzt Countdown-Kachel und Terminliste) */
.danke { border-radius: var(--radius); overflow: hidden; margin: 2px 0 18px;
  background: linear-gradient(160deg, var(--navy-dark, #00243C), var(--navy, #08385C));
  box-shadow: 0 6px 20px rgba(8,56,92,.22); }
.danke-img img { display: block; width: 100%; max-height: 210px; object-fit: cover; }
.danke-txt { padding: 18px 16px 20px; color: #fff; }
.danke-kicker { font-family: var(--font-head); font-size: 11.5px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gold, #E7B84B); font-weight: 600; margin-bottom: 6px; }
.danke-titel { font-family: var(--font-head); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.danke p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 10px; }
.danke .danke-nach { color: var(--gold, #E7B84B); font-weight: 600; margin-bottom: 0; }
.textgross .danke p { font-size: 17px; }


/* Einmaliger Hinweis beim ersten Merken (Erinnerung nur bei geöffneter App) */
.merkhint { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 64px) + 14px);
  z-index: 60; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
  border-radius: 14px; background: var(--navy-dark, #00243C); color: #fff;
  box-shadow: 0 8px 26px rgba(0,20,40,.42); font-size: 13.5px; line-height: 1.45;
  max-width: 560px; margin: 0 auto;
  animation: merkhintIn .3s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes merkhintIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.merkhint.weg { animation: merkhintOut .26s ease both; }
@keyframes merkhintOut { to { opacity: 0; transform: translateY(10px); } }
.merkhint > i { color: var(--gold-hell, #F2C230); font-size: 21px; flex: none; margin-top: 1px; }
.merkhint b { color: var(--gold-hell, #F2C230); }
.merkhint .x { margin-left: auto; background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 50%; flex: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .merkhint, .merkhint.weg { animation-duration: .01s; } }

.reminder {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(78px + var(--safe-bottom));
  z-index: 60; max-width: 420px; width: calc(100% - 28px);
  background: var(--navy); color: #fff; border-radius: 13px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.reminder i { color: var(--gold-hell); font-size: 22px; }
.reminder .x { margin-left: auto; background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }

/* ---- Hinweis-Boxen ---- */
.note {
  background: #FBF1D8; border: 1px solid var(--linie-gold); color: var(--gold-dark);
  border-radius: 13px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
  display: flex; gap: 8px; align-items: flex-start;
}
/* ---- Live-Infos (Durchsagen am Veranstaltungstag, ganz oben auf Start) ---- */
.livenews {
  background: #fff; border: 1px solid var(--linie-gold); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(8,56,92,.09);
}
.livenews .ln-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(100deg, var(--navy-dark), var(--navy-soft));
}
.livenews .ln-head i { font-size: 18px; color: var(--gold-hell); }
.livenews .ln-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border-top: 1px solid #EFE7D2; border-left: 4px solid var(--navy-soft);
}
.livenews .ln-item > i { font-size: 20px; margin-top: 1px; }
.livenews .ln-body { flex: 1; min-width: 0; }
.livenews .ln-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.livenews .ln-art { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.livenews .ln-time { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.livenews .ln-text { font-size: 14px; color: var(--navy-dark); line-height: 1.42; }
.livenews .ln-item.spontan   { border-left-color: var(--rot); }
.livenews .ln-item.spontan   > i, .livenews .ln-item.spontan   .ln-art { color: var(--rot); }
.livenews .ln-item.aenderung { border-left-color: #C77A00; }
.livenews .ln-item.aenderung > i, .livenews .ln-item.aenderung .ln-art { color: #C77A00; }
.livenews .ln-item.news      { border-left-color: var(--navy-soft); }
.livenews .ln-item.news      > i, .livenews .ln-item.news      .ln-art { color: var(--navy-soft); }
.livenews .ln-item.hinweis   { border-left-color: var(--gold-dark); }
.livenews .ln-item.hinweis   > i, .livenews .ln-item.hinweis   .ln-art { color: var(--gold-dark); }
.empty { text-align: center; color: var(--hint); padding: 40px 20px; }
.empty i { font-size: 36px; }

/* ---- Barrierefreiheit: größere Schrift ---- */
.textgross { font-size: 18px; }
.textgross .page-title { font-size: 26px; }
.textgross .row .body .h, .textgross .pitem .info .h, .textgross .tile .n,
.textgross .live .h, .textgross .detail-body, .textgross .legal p,
.textgross .event .body .h, .textgross .wc-name, .textgross .kind-item,
.textgross .gw-hand { font-size: 17px; }
.textgross .gw-hi { font-size: 32px; }
.textgross .gw-close { font-size: 30px; }
.textgross .row .body .s, .textgross .pitem .info .s, .textgross .page-lead,
.textgross .leg, .textgross .chip, .textgross .event .body .s, .textgross .wc-text,
.textgross .karr-p, .textgross .karr-ul li, .textgross .karr-steps li, .textgross .karr-tag { font-size: 15px; }
/* bislang nicht erfasste Textbausteine ergänzen */
.textgross .note, .textgross .kv, .textgross .tl-x, .textgross .karr-blist li,
.textgross .lpco-sub, .textgross .detail-sub { font-size: 16px; }
.textgross .tl-t, .textgross .lpco-title, .textgross .detail-name { font-size: 20px; }
.textgross .tabbar a .l { font-size: 13px; }

/* ---- Screenreader-only (nur für Hilfstechnik sichtbar) ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Detail-Köpfe (Station/Einheit) – als Klassen, damit „Größere Schrift" greift */
.detail-name { font-weight: 700; font-size: 18px; }
.detail-sub { font-size: 13px; }

/* Merkliste-Aktionen (Teilen / Alle entfernen) */
.mk-actions { display: flex; gap: 10px; margin-top: 16px; }
.mk-actions .btn { margin-top: 0; }

/* kompakter Button (Install-Hinweis) */
.btn.sm { width: auto; flex: none; min-height: 40px; padding: 0 16px; margin-top: 0; font-size: 14px; }
.reminder.a2hs { align-items: center; }
.reminder .btn.sm { background: #F2C230; color: #08243C; }

/* ---- Barrierefreiheit: hoher Kontrast ---- */
.kontrast {
  --muted: #26313f; --hint: #3a4452; --linie: #7a7f8a; --linie-gold: #b98f2a;
  --creme: #ffffff;
}
.kontrast .tile, .kontrast .row, .kontrast .card, .kontrast .event, .kontrast .searchbox,
.kontrast .toggle-row, .kontrast .welt-card, .kontrast .kind-item { border-width: 2px; }

/* ---- Countdown auf der Startseite (letzte Tage vor dem Fest) ---- */
.cdbox {
  margin: 2px 0 12px; padding: 14px 16px; border-radius: var(--radius);
  background: linear-gradient(140deg, var(--navy-dark) 0%, #0A395C 100%);
  border: 1px solid var(--linie-gold); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 4px 16px rgba(2,36,62,.18);
}
.cd-kicker { font-family: var(--font-head); font-size: 12.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); }
.cd-zahl { display: flex; align-items: baseline; gap: 9px; }
.cd-n { font-family: var(--font-head); font-weight: 600; font-size: 46px; line-height: 1;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.cd-e { font-size: 17px; font-weight: 600; color: #DCE6F2; }
.cd-heute { font-family: var(--font-head); font-weight: 600; font-size: 26px; color: var(--gold-hell); }
.cd-datum { font-size: 12.5px; color: #B9C9E6; }

/* ---- Höhepunkte: waagerecht wischbarer Streifen ---- */
.section-title.hp-title { margin: 4px 2px 8px; }
.hp-reihe {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  scrollbar-width: none;
}
.hp-reihe::-webkit-scrollbar { display: none; }
.hp-karte {
  position: relative; flex: 0 0 auto; width: 222px; height: 138px;
  border-radius: 14px; overflow: hidden; scroll-snap-align: start; cursor: pointer;
  border: 1px solid var(--linie-gold); background: var(--navy-dark);
}
.hp-karte img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hp-karte .hp-txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 9px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(to top, rgba(2,20,36,.92) 30%, rgba(2,20,36,0));
}
.hp-karte .hp-n { color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.2;
  overflow-wrap: anywhere; }
.hp-karte .hp-z { color: var(--gold-hell); font-size: 11.5px; font-weight: 600; }
.hp-karte:active { transform: scale(.985); }
.textgross .hp-karte { width: 232px; height: 146px; }
.textgross .hp-karte .hp-n { font-size: 15px; }

/* Hinweiszeile unter dem Kinder-Kopfbild: stand auf nowrap in einem Kasten mit
   overflow:hidden – ein längerer Satz wurde dadurch stumm abgeschnitten
   („… gleich" und dann nichts mehr). Jetzt umbrechend, höchstens zwei Zeilen. */
.karl-hero .wc-bar { align-items: flex-start; }
.karl-hero .wc-bar .n {
  white-space: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.karl-hero .wc-bar i.ic { margin-top: 1px; }
/* Lange deutsche Wörter in den Kinder-Kacheln lieber an einer Silbe trennen
   („Kinder-schminken") als hart mittendrin. */
.kind-item { hyphens: auto; }

/* ---- Offline-Vorrat: Knopf unter den Kacheln + kurzer Hinweis ---- */
.offbtn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 0 6px;
  padding: 12px 13px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--linie-gold); border-radius: var(--radius);
  color: var(--navy); box-shadow: 0 2px 10px rgba(2,36,62,.07);
}
.offbtn .off-ic {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: color-mix(in srgb, var(--navy) 9%, #fff); color: var(--navy);
}
.offbtn .off-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offbtn .off-txt { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.offbtn .off-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.offbtn:active { transform: scale(.995); }
.offbtn.laedt { cursor: progress; }
.offbtn.laedt .off-ic { background: color-mix(in srgb, var(--gold) 22%, #fff); color: #7A6200; }
.offbtn.fertig .off-ic { background: color-mix(in srgb, var(--gruen) 14%, #fff); color: var(--gruen); }
.offbtn.fertig .off-ic i::before { content: "\ea5e"; }   /* Häkchen statt Pfeil */
.off-hinweis {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 2px 14px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.off-hinweis .ti { flex: none; font-size: 16px; margin-top: 1px; opacity: .75; }
.textgross .offbtn .off-txt { font-size: 17px; }
.textgross .off-hinweis { font-size: 14.5px; }