/* =========================================================================
   meinJüchen — Stadtmagazin am Niederrhein · „Jüchen-Blau" (Redesign 2026-07)
   Design-System: dunkle Royalblau-Bühne im Hero · helle blau-getönte
   Lese-Ebene darunter · Petrol als Wasser-/Status-Akzent ·
   Gräfte-Spiegellinie als Signatur · Typo Archivo (EINE Variable-Familie).
   Token-NAMEN bleiben (--tinte/--stein/--park/--gracht), nur Werte neu.
   ========================================================================= */

/* ---------- Schrift (self-hosted, latin) ----------
   EINE Familie für alles: Archivo Variable 100–900 (Wahl 2026-07-16, ersetzt
   Instrument Serif + Inter Tight): Headlines extra-fett, plakativ-städtisch,
   Display und Fließtext können sich nicht mehr beißen. Kursiv-Akzente laufen
   über Farbe statt Schräge (keine Italic-Datei nötig). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/archivo-var.woff2") format("woff2")}

/* ---------- Token ---------- */
:root{
  /* Farbe — „Jüchen-Blau": Royalblau-Familie + Petrol, blau getöntes Papier */
  --stein:    #F3F5FB;  /* Papier: kühles, blau getöntes Hell */
  --stein-2:  #E7EBF6;  /* getöntes Band/Fläche */
  --karte:    #FCFDFF;  /* Karten heben sich vom Papier */
  --tinte:    #16224E;  /* Text: tiefes Marineblau */
  --leise:    #4E587A;  /* gedämpfter Text  ~6:1 auf --stein */
  --park:     #1A3691;  /* Marken-Hue: Jüchen-Royalblau (Text ≥4,5:1 UND Fläche) */
  --park-tief:#132768;  /* Hover/Active */
  --gracht:   #157F7E;  /* Petrol abgedunkelt — Gräfte-Wasser, Fokus (≥3:1 auf Papier) */
  --petrol:   #2AC5C4;  /* Petrol Fläche/Glow — NIE als Text auf hell */
  --sand:     #96610F;  /* Amber-Funke, sparsam (kontrastfest als Text) */

  /* Opacity-Staffel aus dem Marken-Hue (eine Quelle, viele Anwendungen) */
  --linie:    color-mix(in srgb, var(--park) 14%, transparent);
  --linie-kr: color-mix(in srgb, var(--park) 26%, transparent);
  --park-12:  color-mix(in srgb, var(--park) 10%, transparent);
  --park-50:  color-mix(in srgb, var(--park) 50%, transparent);

  --radius:   7px;
  --radius-l: 14px;
  --mw:       1140px;
  --pad:      clamp(1.1rem, 4vw, 2rem);
  --ease:     cubic-bezier(.2,.7,.2,1);   /* Signatur-Easing */
  --schatten: 0 1px 2px rgba(22,34,78,.05), 0 8px 26px -16px rgba(22,34,78,.28);

  /* --serif = Display-Rolle (Token-Name bleibt aus Kompatibilität) — beide Rollen: Archivo */
  --serif: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / Boden ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);
  line-height:1.62;
  color:var(--tinte);
  background:var(--stein);
  /* dezenter Papier-Grain als durchgehende Bindungs-Textur */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(26,54,145,.02), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--park);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--park-tief)}
/* Überschriften brechen nur, wenn ein Wort sonst aus der Seite ragen würde — und dann OHNE
   Trennstrich. Automatische Silbentrennung ist hier bewusst AUS: sie trennt nicht nur im
   Notfall, sondern wann immer die Zeile dadurch schöner umbricht. Im Hero stand deshalb
   „Dein Jü-chen," — der Ortsname mitten durchgeschnitten, und das ist der Markenname.
   overflow-wrap allein greift erst, wenn es wirklich nicht anders geht (dort war der Fall:
   „Nachbarschaftshilfe" schob die Seite bei 375 px um 31 px nach rechts). */
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0;
  hyphens:manual;overflow-wrap:break-word}
/* Zahlen-/Wert-Displays eine Stufe fetter als der 600er-Bestand (Archivo trägt es) */
.cw-wert,.kat .anz,.rubrik-kachel .rk-zahl,.fakten-grid .f-zahl,.termin-datum b,.hg-fakt b,.karte .hub-live b{font-weight:700}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--gracht);outline-offset:2px;border-radius:3px}
/* Auf dunklen Bühnen (Hero/Mitmach/Datumstrip) braucht der Fokus die helle Petrol-Stufe */
.hero-graecht :focus-visible,.mitmach :focus-visible,.datumstrip :focus-visible,.tor :focus-visible{outline-color:#49D8D7}

.wrap{max-width:var(--mw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--park);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--radius) 0;z-index:60}
.skip:focus{left:0}

/* ---------- Kicker / Ressort-Label (Struktur, kein Deko) ---------- */
.kicker{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--park);display:inline-flex;align-items:center;gap:.55rem}
.kicker::before{content:"";width:1.6rem;height:1px;background:var(--linie-kr)}

/* ---------- Gräfte-Spiegellinie (Signatur) ----------
   Dünne Linie + gespiegelter weicher Verlauf darunter = Schloss im Wasser. */
.gracht-linie{position:relative;height:1px;background:var(--linie-kr);margin:0;border:0}
.gracht-linie::after{content:"";position:absolute;left:0;right:0;top:1px;height:22px;
  background:linear-gradient(var(--park-12),transparent);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);
  opacity:.7;pointer-events:none}

/* Dieselbe Signatur unter der ersten Überschrift JEDER Seite. Vorher trug sie nur 18 von 46
   Seiten — die Marke war damit auf den meisten Unterseiten gar nicht zu sehen. Als
   Pseudo-Element, damit keine Seite angefasst werden muss und nichts im Markup dazukommt. */
main > .ressort:first-of-type > h1{position:relative;padding-bottom:.9rem}
main > .ressort:first-of-type > h1::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linie-kr);
  box-shadow:0 1px 22px -6px var(--park-50);pointer-events:none}

/* ---------- Knöpfe (eigene Sprache: „Stempel", kein Pill+Lift+Pfeil) ---------- */
.knopf{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;
  font-size:.98rem;line-height:1;padding:.85rem 1.25rem;border-radius:var(--radius);
  border:1px solid var(--park);background:transparent;color:var(--park);cursor:pointer;
  text-decoration:none;transition:box-shadow .18s var(--ease)}
/* WICHTIG: weder color noch background mit-animieren. Eine Transition, deren Wert nur über ein
   beim Theme-Wechsel gewechseltes Custom-Property (--park) kommt, friert in Chromium auf dem alten
   Wert ein: der Abend-Knopf blieb dunkelgrün (Text-Kontrast 2,2:1) und beim --voll-Knopf fror der
   Hintergrund ein (dunkler Text auf dunklem Grün). Ohne diese Transitionen lösen die Tokens sofort
   korrekt auf — wie ein normaler Link. Nur box-shadow (theme-unabhängig) wird noch animiert; Hover-
   Farbe/Fläche wechseln instant (visuell unkritisch). */
.knopf:hover{background:var(--park-12);color:var(--park-tief)}
.knopf--voll{background:var(--park);color:#fff;box-shadow:var(--schatten)}
.knopf--voll:hover{background:var(--park-tief);color:#fff}
.knopf:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.textlink{font-weight:600;color:var(--park);text-decoration:none;
  border-bottom:2px solid var(--linie-kr);padding-bottom:1px;transition:border-color .18s var(--ease)}
.textlink:hover{border-color:var(--park)}
.textlink::after{content:" →";color:var(--park-50)}

/* ---------- Datum-Strip ---------- */
.datumstrip{background:#0C1533;color:#DEE4F4;font-size:.78rem;letter-spacing:.02em}
.datumstrip .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.45rem;flex-wrap:wrap;background:#0C1533}
.datumstrip b{font-weight:600;color:#fff}
.datumstrip .ort-hint{color:#9DACD0}
.datumstrip a.wetter-link{color:#B9C5E4;text-decoration:none}
.datumstrip a.wetter-link:hover{color:#fff}

/* ---------- Kopfleiste: nur der Masthead bleibt sticky; der Datum-Strip scrollt mit weg
   (spart mobil ~90px Bildschirmhöhe). display:contents am Wrapper → der Masthead wird vom
   <body> getragen und klebt die ganze Seite, nicht nur innerhalb der kurzen Kopfleiste. ---------- */
.kopfleiste{display:contents}
/* Anker-Sprünge (#tanken, #abfahrten, #notdienst …) nicht unter die sticky Kopfleiste schieben.
   --kopf-h misst app.js an der echten Kopfleiste (ResizeObserver) und schreibt sie hier hinein.
   Vorher standen drei geschätzte Stufen in den Media-Queries — bei tatsächlich 147 px Kopfhöhe
   und 120 px Annahme landete jeder Ankersprung 27 px zu hoch. Der Rückfallwert greift, solange
   noch nicht gemessen wurde oder JS aus ist. */
html{scroll-padding-top:var(--kopf-h, 4.5rem)}

/* ---------- Masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--stein) 94%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--linie)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.marke{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.marke .m1{font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.04em;color:var(--leise)}
.marke .m2{font-family:var(--serif);font-weight:600;font-size:1.62rem;letter-spacing:-.01em;color:var(--tinte)}
.marke .m2 i{font-style:normal;color:var(--park)}
.marke:hover .m2 i{color:var(--park-tief)}

.hauptnav{display:flex;gap:.12rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hauptnav a{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--tinte);
  text-decoration:none;padding:.5rem .7rem;border-radius:var(--radius);position:relative;white-space:nowrap}
.hauptnav a:hover{background:var(--park-12);color:var(--park-tief)}
.hauptnav a[aria-current="page"]{color:var(--park)}
.hauptnav a[aria-current="page"]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.16rem;height:2px;background:var(--park)}

/* ---------- Sektionen ---------- */
.ressort{padding-block:clamp(2.6rem,6vw,4.4rem)}
.ressort-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.6rem}
.ressort-kopf h2{font-size:clamp(1.55rem,3.2vw,2.3rem)}
.ressort-kopf .mehr{flex:none}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--leise);max-width:60ch;margin:.4rem 0 0}

/* ---------- Hero / Leitbild ---------- */
.leitbild{padding-block:clamp(2rem,5vw,3.4rem) clamp(2.4rem,6vw,4rem)}
.leitbild .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.leitbild h1{font-size:clamp(2.5rem,1.6rem + 4vw,4.5rem);letter-spacing:-.02em}
.leitbild h1 i{font-style:normal;color:var(--park);font-weight:800}
.leitbild .unter{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);color:var(--leise);max-width:46ch;margin:1.1rem 0 1.7rem}
.leitbild .aktionen{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.leitbild .fakt{margin-top:1.9rem;display:flex;gap:1.7rem;flex-wrap:wrap;font-size:.92rem;color:var(--leise)}
.leitbild .fakt b{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--tinte);display:block;line-height:1}

/* Hero-Bild mit Gräfte-Spiegelung */
.gracht-bild{position:relative;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--schatten);
  border:1px solid var(--linie)}
.gracht-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gracht-bild figcaption{position:absolute;left:.8rem;bottom:.8rem;background:color-mix(in srgb,var(--tinte) 82%,transparent);
  color:#F2EFE6;font-size:.76rem;padding:.32rem .6rem;border-radius:var(--radius);backdrop-filter:blur(2px)}

/* ---------- Karten-Raster (variabel, kein starres 3er-Grid) ---------- */
.raster{display:grid;gap:1.1rem}
.raster.r-2{grid-template-columns:repeat(2,1fr)}
.raster.r-3{grid-template-columns:repeat(3,1fr)}
.raster.r-4{grid-template-columns:repeat(4,1fr)}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);
  padding:1.2rem;display:flex;flex-direction:column;gap:.5rem;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.karte:hover{border-color:var(--linie-kr);box-shadow:var(--schatten)}
.karte h3{font-size:1.18rem}
.karte .meta{font-size:.85rem;color:var(--leise);display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.karte .tag{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.04em;
  color:var(--park);background:var(--park-12);padding:.16rem .5rem;border-radius:100px;align-self:flex-start}

/* ---------- Ressort: Essen & Trinken (Kategorie-Kacheln) ---------- */
.kat-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem}
.kat{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);
  padding:1.1rem 1.2rem;text-decoration:none;color:var(--tinte);min-height:128px;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.kat:hover{border-color:var(--linie-kr);box-shadow:var(--schatten)}
.kat .anz{font-family:var(--serif);font-weight:600;font-size:2.3rem;line-height:.9;color:var(--park)}
.kat .lab{font-weight:600}
.kat .lab small{display:block;font-weight:400;color:var(--leise);font-size:.82rem;margin-top:.15rem}

/* ---------- Ortsteile-Rückgrat (Signatur-Struktur) ---------- */
.doerfer{background:var(--stein-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.doerfer .liste{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.dorf{font-family:var(--sans);font-size:.92rem;color:var(--tinte);background:var(--karte);
  border:1px solid var(--linie);border-radius:100px;padding:.4rem .85rem;white-space:nowrap;text-decoration:none}
.dorf.ist{background:var(--park);color:#fff;border-color:var(--park)}
a.dorf{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
a.dorf:hover{border-color:var(--linie-kr);box-shadow:var(--schatten);color:var(--tinte)}

/* Kategorie-Wolke (Vereine-Teaser) */
.kategorie-wolke{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}

/* ---------- Mitmachen-Band ---------- */
.mitmach{background:var(--tinte);color:#E6EAF6}
.mitmach h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.mitmach .lead{color:#AFBBDC}
.mitmach .knopf{border-color:#4A5C97;color:#E2E9FA}
.mitmach .knopf:hover{background:rgba(255,255,255,.08);color:#fff}
.mitmach .knopf--voll{background:#fff;color:var(--tinte);border-color:#fff}
.mitmach .knopf--voll:hover{background:#E7EBF6}

/* ---------- Gastro-Guide (Liste + Filter) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.4rem 0}
.filterbar .such{flex:1 1 220px;min-width:200px}
.filterbar input[type=search]{width:100%;font:inherit;padding:.7rem .9rem;border:1px solid var(--linie-kr);
  border-radius:var(--radius);background:var(--karte);color:var(--tinte)}
.chip{font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--tinte);background:var(--karte);
  border:1px solid var(--linie-kr);border-radius:100px;padding:.5rem .9rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--park);color:#fff;border-color:var(--park)}
.lokal-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:.4rem}
.lokal{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column}
.lokal-kopf{display:flex;gap:.85rem;align-items:center;padding:1rem 1.1rem .4rem}
.lokal-mono{flex:none;width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;color:#fff;background:var(--park);font-size:1.05rem}
.lokal h3{font-size:1.12rem}
.lokal .sub{font-size:.82rem;color:var(--leise)}
.lokal-body{padding:.3rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem}
.lokal .zeile{display:flex;gap:.5rem;color:var(--leise)}
.lokal .zeile svg{flex:none;width:16px;height:16px;margin-top:.18rem;color:var(--park-50)}
.lokal .fehlt{color:var(--leise);font-style:italic}
.lokal .aktionen{margin-top:auto;padding:.7rem 1.1rem;border-top:1px solid var(--linie);display:flex;gap:.4rem;flex-wrap:wrap}
/* min-height 44px: Auf dem Handy sind „Karte / Anrufen / Website" die meistgetippten Ziele
   der ganzen Seite. Bei .35rem Innenabstand waren sie rund 30 px hoch — zu klein für einen
   Daumen und unter der empfohlenen Mindestgröße. */
.lokal .aktionen a{font-size:.84rem;font-weight:600;text-decoration:none;color:var(--park);
  border:1px solid var(--linie-kr);border-radius:var(--radius);padding:.35rem .7rem;
  min-height:44px;display:inline-flex;align-items:center}
.lokal .aktionen a:hover{background:var(--park-12)}
.keine-treffer{padding:2rem;text-align:center;color:var(--leise);display:none}

/* ---------- Hinweis-/Quelle-Box ---------- */
.notiz{background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--sand);
  border-radius:var(--radius);padding:.9rem 1.1rem;font-size:.9rem;color:var(--leise)}
.notiz b{color:var(--tinte)}

/* ---------- Termine ---------- */
.termin{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--linie)}
.termin .wann{font-family:var(--serif);color:var(--park);font-weight:600;min-width:7rem}
.termin h3{font-size:1.15rem}
.termin .wo{font-size:.86rem;color:var(--leise)}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1rem;max-width:640px}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld label{font-weight:600;font-size:.92rem}
.feld input,.feld select,.feld textarea{font:inherit;padding:.7rem .85rem;border:1px solid var(--linie-kr);
  border-radius:var(--radius);background:var(--karte);color:var(--tinte)}
.feld textarea{min-height:130px;resize:vertical}
.feld .hilfe{font-size:.8rem;color:var(--leise)}
.form-status{padding:.9rem 1.1rem;border-radius:var(--radius);font-weight:600;display:none}
.form-status.ok{display:block;background:var(--park-12);color:var(--park-tief);border:1px solid var(--linie-kr)}
.form-status.err{display:block;background:#fbeae5;color:#9a3412;border:1px solid #f1c4b4}

/* ---------- Footer ---------- */
.fuss{background:var(--stein-2);border-top:1px solid var(--linie);margin-top:clamp(2.5rem,6vw,4rem);
  padding-block:clamp(2.2rem,5vw,3.2rem);font-size:.9rem}
.fuss .spalten{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.fuss h4{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--leise);margin:0 0 .8rem}
.fuss a{color:var(--tinte);text-decoration:none}
.fuss a:hover{color:var(--park)}
.fuss .disclaimer a{color:var(--park);text-decoration:underline;text-underline-offset:2px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.fuss .marke .m2{font-size:1.35rem}
.fuss .disclaimer{color:var(--leise);max-width:38ch;margin-top:.6rem}
.fuss-unten{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--leise);font-size:.82rem}
.fuss-unten a{color:var(--leise)}
.fuss-unten .credit a{color:var(--park);font-weight:600}

/* ---------- Reveal (sparsam, interaktions-getriggert) ----------
   Nur mit JS verstecken — ohne JS bleibt alles serverseitig sichtbar. */
.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(14px)}
html.js .reveal.an{opacity:1;transform:none}

/* ========================================================================
   v2 — Premium-Ausbau: Typo-Skala, Tiefe, Dorf-Wähler, 3-Achsen-Filter
   ======================================================================== */
:root{
  --t-xs:.78rem; --t-s:.9rem; --t-base:1.05rem; --t-m:1.18rem;
  --t-l:clamp(1.3rem,1.1rem + .9vw,1.6rem);
  --t-xl:clamp(1.7rem,1.3rem + 1.8vw,2.4rem);
  --t-2xl:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);
  /* Schatten-Treppe, in Marken-Hue getönt (nicht Neutralgrau) */
  --s1:0 1px 2px color-mix(in srgb,var(--tinte) 8%,transparent);
  --s2:0 2px 6px -2px color-mix(in srgb,var(--tinte) 12%,transparent), 0 10px 28px -18px color-mix(in srgb,var(--tinte) 30%,transparent);
  --s3:0 16px 50px -24px color-mix(in srgb,var(--tinte) 36%,transparent);
  --linie-tinte:color-mix(in srgb,#fff 14%,transparent);
}

/* Redaktionelle Kursiv-Stimme (sparsam) */
/* „Redaktions-Stimme": früher kursiv (Serif) — bei Archivo trägt die FARBE den Akzent */
.redaktion-italic{font-family:var(--serif);font-style:normal;font-weight:800;color:var(--park)}

/* Headline-Feinschliff (Feature-Settings; Instrument Serif ignoriert unbekannte Sets schadlos) */
.leitbild h1,.dorf-titel{font-feature-settings:"ss01","dlig"}

/* Sanfte Cross-Document-Übergänge (premium, von Alt-Browsern ignoriert) */
@view-transition{navigation:auto}
.dorf-titel{view-transition-name:dorf-titel}

/* Animierter Link-Unterstrich ohne Reflow */
.textlink{border-bottom:0;background-image:linear-gradient(var(--park),var(--park));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .25s var(--ease)}
.textlink:hover{background-size:100% 2px;color:var(--park)}

/* Tiefe für Karten: Schatten-Treppe + 1px-Hebung (kein scale, kein bounce) */
.karte,.lokal,.kat,.dorf-kachel{box-shadow:var(--s1)}
.karte,.lokal,.kat{transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.karte:hover,.lokal:hover,.kat:hover{box-shadow:var(--s2);transform:translateY(-2px)}
.knopf--voll:hover{box-shadow:var(--s2);transform:translateY(-1px)}

/* ---- Dorf-Wähler ---- */
/* (Regel für .doerfer .gracht-svg entfernt — die Klasse kam in keiner Seite mehr vor.) */
.dorf-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.dorf-grid li{display:flex}
.dorf-kachel{display:flex;flex-direction:column;gap:.22rem;width:100%;text-decoration:none;color:var(--tinte);
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);padding:.85rem 1rem;
  transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.dorf-kachel:hover{border-color:var(--linie-kr);box-shadow:var(--s2);transform:translateY(-2px)}
.dorf-kachel .dk-name{font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.1}
.dorf-kachel .dk-zahl{font-size:.82rem;color:var(--leise)}
.dorf-kachel .dk-zahl b{color:var(--park);font-weight:700}
.dorf-kachel.leer{background:transparent;border-style:dashed;box-shadow:none}
.dorf-kachel.leer .dk-name{color:var(--leise);font-weight:500}
.dorf-kachel.leer:hover{transform:none;box-shadow:none}

/* ---- Brotkrumen ---- */
.brotkrumen{font-size:.85rem;color:var(--leise);margin-bottom:.5rem}
.brotkrumen a{color:var(--park);text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}

/* ---- 3-Achsen-Filter (Vereine) ---- */
.chips-zeile{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.sub-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--linie-kr)}
.subchip{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--tinte);background:transparent;
  border:1px solid var(--linie-kr);border-radius:100px;padding:.4rem .8rem;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.subchip:hover{background:var(--park-12)}
.subchip[aria-pressed="true"]{background:var(--park);color:#fff;border-color:var(--park)}
.ort-select{font:inherit;padding:.7rem .9rem;border:1px solid var(--linie-kr);border-radius:var(--radius);
  background:var(--karte);color:var(--tinte);cursor:pointer;flex:0 1 auto}
.treffer-status{font-size:.85rem;color:var(--leise);margin:1rem 0 .2rem;font-weight:600}

/* ---- Teilen-Block ---- */
.teilen{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;padding:1.05rem 1.2rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--s1)}
.teilen-label{font-weight:600;font-size:.92rem;margin-right:.3rem}
.teilen-btn{font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--park);background:transparent;
  border:1px solid var(--linie-kr);border-radius:100px;padding:.45rem .9rem;cursor:pointer;text-decoration:none;
  transition:background .15s var(--ease)}
.teilen-btn:hover{background:var(--park-12)}

/* ---- Inhaltsseiten (Über/Quellen/Neu hier): Lesefluss ---- */
.fliesstext{max-width:720px}
.fliesstext h2{font-size:var(--t-l);margin:2rem 0 .6rem}
.fliesstext p{margin:0 0 1rem;color:var(--tinte)}
.fliesstext .lead{color:var(--leise)}
.werte-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}
.werte-grid>div{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);padding:1.1rem 1.2rem}
.werte-grid h3{font-size:1.05rem;margin:0 0 .4rem}
.werte-grid.ja h3{color:var(--park)}
.werte-grid p{font-size:.92rem;color:var(--leise);margin:0}
.service-liste{display:grid;gap:.7rem;margin:1.2rem 0}
.service-zeile{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:.9rem 1.1rem}
.service-zeile .st{font-weight:600}
.service-zeile .sd{font-size:.85rem;color:var(--leise)}
.legende{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.85rem;color:var(--leise);margin:.6rem 0}
.legende .pkt{display:inline-flex;align-items:center;gap:.4rem}
.legende .dot{width:.7rem;height:.7rem;border-radius:50%}
@media (max-width:560px){ .werte-grid{grid-template-columns:1fr} }

@media (max-width:560px){
  .dorf-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .ort-select{width:100%}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  html{scroll-padding-top:var(--kopf-h, 5rem)}
  .leitbild .grid{grid-template-columns:1fr}
  .gracht-bild{order:-1}
  .fuss .spalten{grid-template-columns:1fr 1fr}
  .raster.r-3,.raster.r-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  html{scroll-padding-top:var(--kopf-h, 7.5rem)}
  .masthead .wrap{flex-wrap:wrap;gap:.25rem .8rem}
  /* Die sechs Ressorts passen bei 390 px nicht nebeneinander (gemessen: 58 px Überhang).
     Die Leiste ist scrollbar, sah aber aus wie abgeschnitten — nichts deutete darauf hin,
     dass rechts noch etwas kommt. Der weiche Auslauf am rechten Rand ist genau dieser
     Hinweis, und scroll-snap lässt die Einträge sauber einrasten. */
  .hauptnav{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:.2rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hauptnav::-webkit-scrollbar{display:none}
  .hauptnav a{padding:.45rem .55rem;font-size:.9rem;scroll-snap-align:start}
  .ressort-kopf{flex-direction:column;align-items:flex-start;gap:.6rem}
  .raster.r-2,.raster.r-3,.raster.r-4{grid-template-columns:1fr}
  .fuss .spalten{grid-template-columns:1fr}
  .termin{grid-template-columns:1fr;gap:.3rem}
}

/* ========================================================================
   v3 — Branchenbuch · Ortsteil-Karte · Fakten · FAQ · Offen-Status ·
        Schnell-Hilfe · Tageszeit-Nuance · Dark-Mode „Abend am Niederrhein"
   ======================================================================== */

/* GEO Antwort-zuerst */
.geo-antwort{font-size:1.02rem;color:var(--tinte);background:var(--karte);border:1px solid var(--linie);
  border-left:3px solid var(--park);border-radius:var(--radius);padding:.85rem 1.1rem;margin:.2rem 0 1.4rem;max-width:72ch;box-shadow:var(--s1)}

/* Rubrik-Grid (Branchenbuch-Hub) */
.rubrik-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:.9rem}
.rubrik-kachel{display:flex;flex-direction:column;gap:.25rem;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-l);padding:1.05rem 1.2rem;text-decoration:none;color:var(--tinte);box-shadow:var(--s1);
  transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.rubrik-kachel:hover{border-color:var(--linie-kr);box-shadow:var(--s2);transform:translateY(-2px)}
.rubrik-kachel .rk-zahl{font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1;color:var(--park)}
.rubrik-kachel .rk-name{font-weight:600;font-size:1.08rem}
.rubrik-kachel .rk-bsp{font-size:.83rem;color:var(--leise)}

/* Ortsteil-Karte (schematische SVG) */
.karte-rahmen{position:relative;overflow:hidden;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-l);padding:1rem;box-shadow:var(--s1)}
/* dezente Niederrhein-Stimmung hinter dem Umriss (stark übertönt, Punkte bleiben klar) */
.karte-rahmen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center bottom;background-size:cover;
  background-image:linear-gradient(to top, color-mix(in srgb,var(--karte) 78%,transparent), color-mix(in srgb,var(--karte) 94%,transparent)), url("/assets/img/karte-stimmung.webp");
  background-image:linear-gradient(to top, color-mix(in srgb,var(--karte) 78%,transparent), color-mix(in srgb,var(--karte) 94%,transparent)), image-set(url("/assets/img/karte-stimmung.avif") type("image/avif"), url("/assets/img/karte-stimmung.webp") type("image/webp"))}
.karte-rahmen>*{position:relative;z-index:1}
/* im Dark-Mode das helle Motiv stärker abdunkeln, damit es nicht milchig wird */
[data-theme="abend"] .karte-rahmen::before{
  background-image:linear-gradient(to top, color-mix(in srgb,var(--karte) 88%,transparent), color-mix(in srgb,var(--karte) 97%,transparent)), url("/assets/img/karte-stimmung.webp");
  background-image:linear-gradient(to top, color-mix(in srgb,var(--karte) 88%,transparent), color-mix(in srgb,var(--karte) 97%,transparent)), image-set(url("/assets/img/karte-stimmung.avif") type("image/avif"), url("/assets/img/karte-stimmung.webp") type("image/webp"))}
.orts-karte{display:block;width:100%;height:auto;overflow:visible}
.orts-karte .ok-grenze{fill:color-mix(in srgb,var(--park) 6%,transparent);stroke:var(--gracht);stroke-width:1.4;stroke-linejoin:round;opacity:.6}
.orts-karte .ok-punkt circle{fill:var(--park);opacity:.78;transition:opacity .15s var(--ease),fill .15s var(--ease)}
.orts-karte .ok-punkt:hover circle,.orts-karte .ok-punkt:focus-visible circle{opacity:1;fill:var(--park-tief)}
.orts-karte .ok-punkt:focus-visible{outline:none}
.orts-karte .ok-punkt:focus-visible circle{stroke:var(--gracht);stroke-width:3px}
.orts-karte .ok-label{font-family:var(--sans);font-weight:600;font-size:11px;fill:var(--tinte);opacity:0;
  paint-order:stroke;stroke:var(--karte);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none;
  transition:opacity .15s var(--ease)}
.orts-karte .ok-punkt:hover .ok-label,.orts-karte .ok-punkt:focus-visible .ok-label{opacity:1}
/* Beschriftete Karte: Ortsnamen permanent sichtbar (mobil lesbar, Halo gegen den Umriss) */
.orts-karte--beschriftet .ok-label--fest{opacity:1;font-size:13.5px;font-weight:700;letter-spacing:.01em}

.orts-karte .ok-ort{fill:var(--sand);opacity:.85;stroke:var(--karte);stroke-width:1}
.karte-hinweis{font-size:.82rem;color:var(--leise);margin:.7rem 0 0}

/* Jüchen in Zahlen */
.fakten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.fakten-grid>div{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);
  padding:1rem 1.1rem;box-shadow:var(--s1)}
.fakten-grid .f-zahl{display:block;font-family:var(--serif);font-weight:600;font-size:1.45rem;color:var(--park);line-height:1.12}
.fakten-grid .f-lab{display:block;font-size:.8rem;color:var(--leise);margin-top:.2rem}

/* FAQ (details/summary) */
.faq{display:grid;gap:.6rem;max-width:760px}
.faq-item{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--s1)}
.faq-item summary{cursor:pointer;font-weight:600;padding:.85rem 2.2rem .85rem 1.1rem;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:1.1rem;color:var(--park);font-weight:700;font-size:1.2rem;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin:0;padding:0 1.1rem 1rem;color:var(--leise)}

/* Beleg-/Konfidenz-Badge + zarter Dorf-Link in Karten */
.aktionen .beleg-badge{font-size:.68rem;font-weight:600;color:var(--leise);border:1px solid var(--linie);
  border-radius:100px;padding:.18rem .55rem;margin-left:auto;align-self:center}
.aktionen .beleg-badge.ist-geprueft{color:var(--park-tief);border-color:color-mix(in srgb,var(--sand) 55%,transparent)}
.aktionen .zart{border:0;color:var(--leise);padding:.35rem .25rem}
.aktionen .zart:hover{background:transparent;color:var(--park)}
.lokal .fehlt .dorf-link,.lokal .dorf-link{color:var(--park)}

/* Offen-jetzt-Status (JS-gesetzt) */
.offen-zeile .offen-text{font-size:.85rem}
.offen-status{font-weight:600;font-size:.78rem;padding:.1rem .5rem;border-radius:100px;margin-left:.45rem;white-space:nowrap}
.offen-status.ist-offen{color:var(--park-tief);background:color-mix(in srgb,var(--park) 16%,transparent)}
.offen-status.ist-zu{color:var(--leise);background:var(--stein-2)}

/* Wolke-Label */
.kategorie-wolke .wolke-label{font-size:.85rem;color:var(--leise);align-self:center;margin-right:.2rem}

/* Dorf: Branchen-Block */
.dorf-rubrik-titel{font-family:var(--serif);font-weight:600;font-size:1.18rem;margin:1.5rem 0 .7rem;display:flex;align-items:center;gap:.55rem}
.dorf-rubrik-titel .dr-zahl{font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--park);background:var(--park-12);border-radius:100px;padding:.12rem .55rem}
.lokal .lokal-h{font-size:1.12rem;font-family:var(--serif);font-weight:600;line-height:1.12;margin:0}

/* „Jetzt in Jüchen"-Statusstreifen (Startseite) */
.jetzt-streifen{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);
  box-shadow:var(--s1);padding:.95rem 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;align-items:center;margin-top:1.6rem}
.jetzt-streifen .js-uhr{font-weight:600;color:var(--tinte)}
.jetzt-streifen .js-info{color:var(--leise);font-size:.93rem}
.jetzt-streifen .js-info b{color:var(--park);font-weight:700}
.jetzt-streifen a{margin-left:auto;font-weight:600;text-decoration:none;color:var(--park);white-space:nowrap}

/* Wetter-Seite */
.wetter-icon{width:1em;height:1em;display:block}
.wetter-jetzt{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--s1);padding:1.3rem 1.5rem;margin-top:1.2rem}
.wj-haupt{display:flex;align-items:center;gap:1rem}
.wj-icon{font-size:3.4rem;line-height:1;flex:none}
.wj-temp{font-family:var(--serif);font-weight:600;font-size:2.8rem;line-height:1;display:block}
.wj-text{color:var(--leise);font-size:.95rem}
.wj-werte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:.6rem 1.4rem}
.wj-werte li{display:flex;flex-direction:column}
.wj-werte li span{font-size:.78rem;color:var(--leise)}
.wj-werte li b{font-size:1.02rem}
.wetter-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}
.wt-tag{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--s1);
  padding:.85rem .5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.wt-tag.ist-heute{border-color:var(--linie-kr);box-shadow:var(--s2)}
.wt-label{font-weight:600;font-size:.85rem}
.wt-icon{font-size:1.9rem;line-height:1}
.wt-temp{font-size:.95rem}
.wt-temp .wt-min{color:var(--leise)}
.wt-regen{font-size:.72rem;color:var(--park);font-weight:600}
@media (max-width:720px){ .wetter-tage{grid-template-columns:repeat(4,1fr)} }
@media (max-width:430px){ .wetter-tage{grid-template-columns:repeat(3,1fr)} .wj-temp{font-size:2.4rem} }

/* Schnell-Hilfe-Leiste (global, vor dem Footer) */
.schnellhilfe{background:var(--stein-2);border-top:1px solid var(--linie)}
.schnellhilfe .wrap{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;align-items:center;padding-block:.7rem;font-size:.85rem}
.schnellhilfe .sh-label{font-weight:700;color:var(--tinte);display:inline-flex;gap:.4rem;align-items:center}
.schnellhilfe a{color:var(--tinte);text-decoration:none;font-weight:600}
.schnellhilfe a:hover{color:var(--park)}
.schnellhilfe a .sh-num{color:var(--park)}
.schnellhilfe .sh-notruf{color:var(--tinte);font-weight:600}
.schnellhilfe .sh-notruf b{color:var(--park);font-weight:700}

/* Dark-Mode-Toggle */
.theme-toggle{background:transparent;border:1px solid var(--linie-kr);border-radius:100px;color:var(--leise);
  font:inherit;font-size:.82rem;font-weight:600;padding:.4rem .85rem;cursor:pointer;display:inline-flex;gap:.4rem;align-items:center}
.theme-toggle:hover{color:var(--park);border-color:var(--park)}


/* ===== Tageszeit-Nuance (nur Farbe, keine Bewegung) — verschiebt die Gräfte-Linie im Petrol-/Blauraum ===== */
[data-tagzeit="morgen"]{--gracht:#128C8B}
[data-tagzeit="abend"]{--gracht:#2F6BA8}
[data-tagzeit="nacht"]{--gracht:#14708F}

/* ===== Dark-Mode „Nacht am Niederrhein" (opt-in via theme.js) ===== */
[data-theme="abend"]{
  --stein:#0E1730; --stein-2:#141F3E; --karte:#182545;
  --tinte:#E9EDF9; --leise:#A6B2D4;
  --park:#7FA3F0; --park-tief:#A7C0F5; --gracht:#49D8D7; --petrol:#2AC5C4; --sand:#E9B45C;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.7);
  --s1:0 1px 2px rgba(0,0,0,.35);
  --s2:0 2px 6px -2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
}
[data-theme="abend"][data-tagzeit="abend"]{--gracht:#5FC0EA}
/* Text auf Akzent-Flächen wird dunkel, weil --park im Dark heller ist */
[data-theme="abend"] .lokal-mono,
[data-theme="abend"] .knopf--voll,
[data-theme="abend"] .chip[aria-pressed="true"],
[data-theme="abend"] .subchip[aria-pressed="true"],
[data-theme="abend"] .dorf.ist,
[data-theme="abend"] .skip{color:var(--stein)}
/* Im Abendmodus muss der Mitmach-Block HELLER als die Seite sein, nicht dunkler.
   Vorher stand er auf #0A1128 gegen die Seite (#0E1730) — gemessene 1,05:1, also praktisch
   unsichtbar: die Sektion verlor ihre Kante und löste sich in der Seite auf. Jetzt hebt sie
   sich wieder ab (Text-Kontrast darauf bleibt weit über 4,5:1). */
[data-theme="abend"] .mitmach{background:#1B2A55;border-block:1px solid rgba(127,163,240,.22)}
[data-theme="abend"] .mitmach .knopf{border-color:#3D4E85;color:#D3DCF2}
[data-theme="abend"] .mitmach .knopf--voll{background:var(--park);color:var(--stein);border-color:var(--park)}
[data-theme="abend"] .form-status.err{background:#3a201a;color:#f0b9a6;border-color:#5e3328}

/* ========================================================================
   Welle A — Cockpit & Alltag: Angebote-Hub · Live-Kacheln · Sprit/ÖPNV/Müll
   ======================================================================== */

/* ---- Angebote-Hub (Supermarkt-Prospekte) ---- */
.angebot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1rem;margin-top:1.4rem}
.angebot-karte{display:flex;flex-direction:column;gap:.9rem;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-l);padding:1.1rem 1.2rem;box-shadow:var(--s1);
  transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.angebot-karte:hover{border-color:var(--linie-kr);box-shadow:var(--s2);transform:translateY(-2px)}
.ak-kopf{display:flex;gap:.8rem;align-items:center}
.ak-logo{flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:1.02rem;color:#fff;background:var(--park)}
.ak-name{font-size:1.14rem;font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
.ak-sub{font-size:.82rem;color:var(--leise);margin:.12rem 0 0}
.ak-aktionen{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto}
.ak-prospekt{padding:.55rem .95rem;font-size:.9rem}
.ak-karte{font-size:.84rem;font-weight:600;text-decoration:none;color:var(--park);
  border:1px solid var(--linie-kr);border-radius:var(--radius);padding:.5rem .75rem}
.ak-karte:hover{background:var(--park-12)}
.ak-kein{font-size:.8rem;color:var(--leise);font-style:italic}
[data-theme="abend"] .ak-logo{color:var(--stein)}

/* ---- Cockpit (Startseite: tägliche Live-Kacheln) ---- */
.cockpit{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.8rem;margin:1.7rem 0 0}
.cw{display:flex;flex-direction:column;gap:.3rem;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius-l);padding:.9rem 1rem;text-decoration:none;color:var(--tinte);box-shadow:var(--s1);
  transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
a.cw:hover{border-color:var(--linie-kr);box-shadow:var(--s2);transform:translateY(-2px)}
.cw-top{display:flex;align-items:center;gap:.5rem;color:var(--park)}
.cw-top svg{width:18px;height:18px;flex:none}
.cw-label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.cw-wert{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.05;color:var(--tinte)}
.cw-wert sup{font-size:.62em;font-weight:600}
.cw-sub{font-size:.78rem;color:var(--leise);line-height:1.3}
.cw-sub b{color:var(--park);font-weight:700}
.cw .ist-offen-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--park);margin-right:.35rem;vertical-align:.02em}
.cw.cw-leer{border-style:dashed;box-shadow:none;background:transparent}
/* Quellenhinweis unter einer Live-Zahl in den Hub-Karten (Notdienst) */
.karte .hub-quelle{margin:.15rem 0 0;font-size:.74rem;color:var(--leise);line-height:1.3}

/* Spielplatz-Liste auf den Dorfseiten — schlicht, ein Tap-Ziel je Zeile */
.dorf-spielpl{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;max-width:640px}
.dorf-spielpl li{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;min-height:44px;padding:.35rem 0;border-bottom:1px solid var(--linie)}
.dorf-spielpl li:last-child{border-bottom:0}

/* Veranstalter-Profil: Chronik der vergangenen Termine an einem Ort.
   Datum links, Titel rechts, auf schmalen Schirmen untereinander. Bewusst schlicht —
   die Chronik belegt nur, dass an einem Ort regelmäßig etwas passiert, sie ist keine zweite Bühne. */
.chronik{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.1rem;max-width:680px}
.chronik li{display:flex;gap:.2rem 1rem;flex-wrap:wrap;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--linie)}
.chronik li:last-child{border-bottom:0}
.chronik-datum{flex:0 0 13.5rem;color:var(--leise);font-size:.88rem;font-variant-numeric:tabular-nums}
.chronik-titel{flex:1 1 12rem;font-weight:600}
.chronik-quelle{margin:1.2rem 0 0;font-size:.82rem;line-height:1.5;color:var(--leise);max-width:62ch}
@media (max-width:520px){.chronik-datum{flex-basis:100%}}

/* Namens-Wert (Notdienst-Apotheke): Textzeile statt Zahl — darf umbrechen, aber nicht überlaufen */
.cw-name{font-family:var(--serif);font-weight:700;font-size:1.02rem;line-height:1.18;color:var(--tinte);
  overflow-wrap:anywhere}
.cockpit-stand{font-size:.76rem;color:var(--leise);margin:.7rem 0 0}
.cockpit-stand a{color:var(--leise)}
/* Entfernung der Notdienst-Apotheke (service.php) */
.nd-km{white-space:nowrap}

/* ---- ÖPNV-Abfahrtstafel ---- */
.abfahrten{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem;max-width:640px}
.abfahrt{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem 1rem;align-items:center;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--s1);padding:.7rem .95rem}
.ab-linie{font-family:var(--sans);font-weight:700;font-size:.86rem;color:#fff;background:var(--park);
  border-radius:var(--radius);padding:.28rem .55rem;min-width:3rem;text-align:center;white-space:nowrap}
.ab-richtung{font-weight:600;line-height:1.2}
.ab-richtung small{display:block;font-weight:400;color:var(--leise);font-size:.78rem}
.ab-zeit{text-align:right;white-space:nowrap}
.ab-zeit b{font-size:1.02rem}
.ab-zeit .ab-spaet{color:var(--sand);font-weight:700}
.ab-zeit small{display:block;color:var(--leise);font-size:.76rem}
[data-theme="abend"] .ab-linie{color:var(--stein)}

/* ---- Sprit-Tabelle ---- */
.sprit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:1.2rem}
.sprit-best{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--s1);padding:1rem 1.1rem;display:flex;flex-direction:column;align-items:flex-start}
.sprit-best .sb-sorte{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.sprit-best .sb-preis{font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1;color:var(--park);margin:.2rem 0}
.sprit-best .sb-preis sup{font-size:.6em}
.sprit-best .sb-wo{font-size:.82rem;color:var(--leise)}
.sprit-best .sb-adr{font-size:.8rem;color:var(--leise);margin-top:.1rem}
.sprit-best .sb-route{font-size:.82rem;font-weight:600;color:var(--park);text-decoration:none;margin-top:.45rem}
.sprit-best .sb-route:hover{text-decoration:underline}
.sprit-zeilen{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.sprit-zeilen b{color:var(--park);font-weight:700}
.sprit-zeilen sup{font-size:.62em}

/* ---- Müll-Termine ---- */
.muell-liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem;max-width:520px}
.muell-zeile{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--s1);padding:.75rem 1rem}
.muell-zeile .mz-tonne{font-weight:600}
.muell-zeile .mz-wann{font-size:.85rem;color:var(--park);font-weight:700}

/* ---- Lazy-Live-Widgets (async nachgeladen, damit die Seite sofort erscheint) ---- */
.widget-lazy{margin-top:1.2rem;min-height:2.4rem}
.widget-lazy .lade{color:var(--leise);font-size:.92rem;padding:.5rem 0}
.widget-lazy .lade a{font-weight:600}

/* ========================================================================
   Dunkle Gräfte-Bühne (Hero) — der eine orchestrierte Moment
   Schloss Dyck im dunklen Wasser der Gräfte, Cockpit glüht als Glas-Kacheln.
   ======================================================================== */
.hero-graecht{position:relative;overflow:hidden;isolation:isolate;color:#EEF2FB;
  padding-block:clamp(2.2rem,5vw,3.8rem) clamp(2.6rem,6vw,4.4rem);
  background:
    radial-gradient(125% 95% at 80% 14%, #1E3A8F 0%, transparent 56%),
    radial-gradient(90% 60% at 12% 88%, rgba(42,197,196,.14) 0%, transparent 55%),
    linear-gradient(168deg,#0A1128 0%,#0C1533 46%,#14245C 100%);}
/* Schloss als atmosphärischer Backdrop rechts, ins Dunkel gefadet + blau gedämpft */
.hg-bild{position:absolute;inset:0 0 0 auto;width:min(66%,780px);z-index:0;pointer-events:none}
.hg-bild img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:brightness(.44) saturate(.55) contrast(1.05);
  -webkit-mask-image:linear-gradient(to left,#000 16%,transparent 92%);
          mask-image:linear-gradient(to left,#000 16%,transparent 92%)}
/* Nacht-Schleier über dem Bild — blaue Stimmung + Textlesbarkeit links */
.hero-graecht::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(9,14,36,.97) 26%,rgba(10,17,44,.62) 56%,rgba(20,36,92,.3) 100%)}
/* Wasser-Schimmer (Gräfte-Spiegelung) am unteren Rand — jetzt Petrol, Signatur bleibt */
.hero-graecht::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(transparent,rgba(42,197,196,.13));
  -webkit-mask-image:repeating-linear-gradient(transparent 0 6px,#000 6px 7px);
          mask-image:repeating-linear-gradient(transparent 0 6px,#000 6px 7px)}
.hg-bildlabel{position:absolute;right:1rem;bottom:.85rem;z-index:2;font-size:.72rem;letter-spacing:.04em;color:#A9BBD9;
  background:rgba(7,11,28,.5);border:1px solid rgba(73,216,215,.2);padding:.25rem .6rem;border-radius:100px;backdrop-filter:blur(2px)}

.hg-inner{position:relative;z-index:1;display:grid;gap:clamp(1.7rem,4vw,2.6rem)}
.hg-text{max-width:42ch}
.hg-kicker{color:#49D8D7}
.hg-kicker::before{background:rgba(73,216,215,.55)}
.hg-titel{font-family:var(--serif);font-weight:800;color:#F5F7FD;letter-spacing:-.015em;
  font-size:clamp(2.7rem,1.5rem + 4.6vw,4.9rem);line-height:1;
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hg-titel i{font-style:normal;font-weight:800;color:#49D8D7}
.hg-unter{color:#BFCBE8;font-size:clamp(1.05rem,1rem + .5vw,1.28rem);max-width:46ch;margin:1.1rem 0 1.6rem}
.hg-aktionen{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-graecht .knopf--voll{background:linear-gradient(135deg,#1A3691,#2E4CB4);border-color:rgba(133,160,220,.4);
  box-shadow:0 12px 26px -12px rgba(42,197,196,.55)}
.hero-graecht .knopf--voll:hover{background:linear-gradient(135deg,#132768,#1A3691)}
.knopf--geist{border-color:rgba(238,242,251,.42);color:#EEF2FB;background:transparent}
.knopf--geist:hover{background:rgba(238,242,251,.1);color:#fff;border-color:rgba(238,242,251,.72)}
.hg-fakt{margin:1.6rem 0 0;font-size:.92rem;color:#A6B6D9}
.hg-fakt b{font-family:var(--serif);color:#EEF2FB;font-weight:400;font-size:1.18em}

/* Cockpit auf dem Wasser — glühende Glas-Kacheln */
.hg-cockpit-label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#49D8D7;margin:0 0 .8rem;display:flex;align-items:center;gap:.55rem}
.hg-cockpit-label::before{content:"";width:1.6rem;height:1px;background:rgba(73,216,215,.55)}
.cockpit--hero{grid-template-columns:repeat(4,1fr);margin-top:0}
.cockpit--hero .cw{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(133,160,220,.26);color:#EEF2FB;border-radius:var(--radius-l);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 32px -20px rgba(0,0,0,.8);backdrop-filter:blur(7px)}
.cockpit--hero a.cw:hover{transform:translateY(-3px);border-color:rgba(73,216,215,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(73,216,215,.22),0 16px 38px -16px rgba(0,0,0,.85),0 0 30px -8px rgba(42,197,196,.4)}
.cockpit--hero .cw-top{color:#7FD9D9}
.cockpit--hero .cw-label{color:#B4C2E2}
.cockpit--hero .cw-wert{color:#F5F7FD}
.cockpit--hero .cw-wert sup{color:#49D8D7}
.cockpit--hero .cw-sub{color:#A6B6D9}
.cockpit--hero .cw-name{color:#F5F7FD}
.cockpit--hero .ist-offen-dot{background:#49D8D7;box-shadow:0 0 9px rgba(73,216,215,.85)}

@media (max-width:980px){ .cockpit--hero{grid-template-columns:repeat(3,1fr)} .hg-bild{width:100%;opacity:.55} }
@media (max-width:560px){ .cockpit--hero{grid-template-columns:repeat(2,1fr)} .hg-titel{font-size:clamp(2.4rem,2rem + 4vw,3.2rem)} }

/* ========================================================================
   v7 — Übersichtlichkeit: Header-Suche · Türen-Band · Dorf-Karte auf Start ·
        Vor-Ort-Duo · gebündelte Filter-Chips
   ======================================================================== */

/* Nur für Screenreader (Label der Header-Suche) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header-Suche: Desktop EINE ruhige Pille (Feld + Lupe innen), mobil ein Lupen-Link zu /suche.php.
   Fokus-Ring liegt auf der Pille (:focus-within) statt eckig ums Input — ein Rahmen, nicht drei. */
.kopf-suche{display:flex;align-items:center;flex:none;background:var(--karte);
  border:1px solid var(--linie-kr);border-radius:100px;padding-right:.15rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.kopf-suche:hover{border-color:var(--park-50)}
.kopf-suche:focus-within{border-color:var(--park);box-shadow:0 0 0 3px var(--park-12)}
.kopf-suche input[type=search]{font:inherit;font-size:.9rem;width:11.8rem;
  padding:.44rem .2rem .44rem .95rem;border:0;background:transparent;color:var(--tinte);
  border-radius:100px 0 0 100px}
.kopf-suche input[type=search]:focus-visible{outline:none} /* Ring übernimmt :focus-within auf der Pille */
.kopf-suche input[type=search]::placeholder{color:var(--leise)}
.kopf-suche button{font:inherit;display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:0;border-radius:100px;cursor:pointer;background:transparent;color:var(--park);
  transition:background .18s var(--ease)}
.kopf-suche button:hover{background:var(--park-12);color:var(--park-tief)}
.kopf-suche button:focus-visible{outline:3px solid var(--gracht);outline-offset:-2px}
.kopf-suche svg{width:17px;height:17px}
.kopf-suche-link{display:none;place-items:center;padding:.5rem;border-radius:100px;color:var(--park)}
.kopf-suche-link svg{width:20px;height:20px}
.kopf-suche-link:hover{background:var(--park-12);color:var(--park-tief)}
@media (max-width:1150px){
  .kopf-suche{display:none}
  .kopf-suche-link{display:grid}
}

/* Türen-Band: die 6 Ressorts als kompakter Zeitungs-Streifen (statt 6 großer Karten) */
.tueren-band{display:grid;grid-template-columns:repeat(6,1fr);margin-top:1.4rem;
  border-block:1px solid var(--linie);background:transparent}
.tuer{display:flex;flex-direction:column;gap:.3rem;padding:1.05rem .95rem 1.15rem;text-decoration:none;
  color:var(--tinte);border-left:1px solid var(--linie);
  transition:background .18s var(--ease),box-shadow .18s var(--ease)}
.tuer:first-child{border-left:0}
.tuer:hover{background:var(--park-12);color:var(--tinte)}
.tuer svg{width:22px;height:22px;color:var(--park)}
.tuer .tb-name{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.15;
  display:flex;align-items:baseline;gap:.4rem}
.tuer .tb-name::after{content:"→";font-family:var(--sans);font-weight:400;font-size:.85em;
  color:var(--park-50);transition:transform .18s var(--ease)}
.tuer:hover .tb-name::after{transform:translateX(3px)}
.tuer .tb-live{font-size:.82rem;color:var(--leise);line-height:1.35}
.tuer .tb-live b{color:var(--park);font-weight:700}
/* Schaufenster-Unterlinks (Tür = div, Kopf = Link — verschachtelte <a> wären invalide) */
.tuer .tb-kopf{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:inherit}
.tuer .tb-links{font-size:.78rem;line-height:1.6;color:var(--leise);margin-top:.35rem}
.tuer .tb-links a{color:var(--park);text-decoration:none;font-weight:600;white-space:nowrap}
.tuer .tb-links a:hover{text-decoration:underline}
@media (max-width:980px){ .tueren-band{grid-template-columns:repeat(3,1fr)}
  .tuer:nth-child(4){border-left:0}
  .tuer:nth-child(n+4){border-top:1px solid var(--linie)} }
@media (max-width:560px){ .tueren-band{grid-template-columns:repeat(2,1fr)}
  .tuer{padding:.85rem .8rem .95rem}
  .tuer:nth-child(4){border-left:1px solid var(--linie)}
  .tuer:nth-child(odd){border-left:0}
  .tuer:nth-child(n+3){border-top:1px solid var(--linie)} }

/* Dörfer-Sektion: Karte + kompakte Dorf-Chips nebeneinander */
.dorf-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.6rem;
  align-items:start;margin-top:1.4rem}
.dorf-duo .karte-rahmen{margin:0}
.dorf-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
.dorf-chips .dorf b{color:var(--park);font-weight:700;margin-left:.25rem}
.dorf-chips .dorf.leer{background:transparent;border-style:dashed;color:var(--leise)}
.dorf-chips-hinweis{font-size:.85rem;color:var(--leise);margin:.9rem 0 0}
@media (max-width:860px){ .dorf-duo{grid-template-columns:1fr} }

/* Vor-Ort-Duo: Branchenbuch + Vereine in einer Sektion */
.vorort-duo{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start}
.vorort-duo h3{font-size:1.35rem}
.vorort-duo .vd-lead{font-size:.95rem;color:var(--leise);margin:.3rem 0 .2rem;max-width:52ch}
@media (max-width:860px){ .vorort-duo{grid-template-columns:1fr;gap:1.6rem} }

/* Gebündelte Filter-Chips (jetzt-offen): seltene Arten hinter „Weitere" (ohne JS auf-/zuklappbar) */
.chips-mehr{display:inline-flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.chips-mehr[open]{flex:1 1 100%}
.chips-mehr>summary{list-style:none;cursor:pointer;font-family:var(--sans);font-weight:600;
  font-size:.86rem;color:var(--park);background:transparent;border:1px dashed var(--linie-kr);
  border-radius:100px;padding:.5rem .9rem}
.chips-mehr>summary::-webkit-details-marker{display:none}
.chips-mehr>summary:hover{background:var(--park-12);color:var(--park-tief)}
.chips-mehr .cm-auf{display:none}
.chips-mehr[open] .cm-zu{display:none}
.chips-mehr[open] .cm-auf{display:inline}

/* Live-Zeile in Hub-Karten (Heute-Seite) */
.karte .hub-live{margin:.1rem 0 0;font-size:1.02rem;color:var(--tinte)}
.karte .hub-live b{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--park)}
.karte .hub-live .ist-offen-dot{width:9px;height:9px;display:inline-block;border-radius:50%;
  background:var(--park);box-shadow:0 0 7px color-mix(in srgb,var(--park) 65%,transparent);
  margin-right:.35rem;vertical-align:.05em}

/* ---------- Installierte App: kompakter Kopf ----------
   Im Browser ist der Zeitungs-Kopf richtig: Zeile mit Datum und Wetter, darunter die große
   Wortmarke, darunter die Ressorts. In der installierten App fehlt aber die Browserleiste,
   dafür kommt oben die Statusleiste des Geräts — und dann kostet derselbe Kopf mobil 147 px,
   also fast ein Fünftel des Bildschirms, bevor der erste Inhalt beginnt.
   Deshalb hier: Zeile mit der Zeitungs-Unterzeile weg, Wortmarke kleiner, weniger Luft.
   Datum und Wetter bleiben — das ist der tägliche Grund, die App zu öffnen. */
@media (display-mode: standalone){
  .datumstrip{font-size:.74rem}
  .datumstrip .wrap{padding-block:.3rem}
  .masthead .wrap{padding-block:.35rem}
  .marke .m1{display:none}                 /* „das stadtmagazin für" — im App-Fenster überflüssig */
  .marke .m2{font-size:1.3rem}
  /* Sichere Zone unter der Statusleiste bzw. über dem Home-Indikator respektieren */
  .datumstrip .wrap{padding-top:calc(.3rem + env(safe-area-inset-top, 0px))}
  .fuss{padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px))}
  .schnellhilfe .wrap{padding-left:calc(var(--pad) + env(safe-area-inset-left, 0px));
    padding-right:calc(var(--pad) + env(safe-area-inset-right, 0px))}
}

/* ---------- Jüchen-Lotse: Farbwelt an die Seite koppeln ----------
   Das Chat-Widget bringt eine eigene, warm-braune Dunkelvariante mit (es stammt aus einem
   anderen Projekt). Neben der blauen „Nacht am Niederrhein" wirkte das wie eine fremde Marke
   im eigenen Haus. Hier werden nur die Farb-Variablen des Widgets überschrieben — die
   Widget-Datei selbst bleibt unangetastet, damit sie mit dem Original vergleichbar bleibt.
   Bewusst NICHT über data-accent gelöst: dessen Parser erwartet einen Hex-Wert und würde
   eine var()-Angabe stillschweigend samt Kontrastprüfung überspringen. */
[data-theme="abend"] #cb-root{
  --cb-surface:#16224E; --cb-panel-2:#1B2A55; --cb-text:#E7EBF6; --cb-muted:#9FACD6;
  --cb-bot-bubble:#1B2A55; --cb-chip-bg:#22326A; --cb-input-bg:#1B2A55;
  --cb-placeholder:#8FA0CE; --cb-header-bg:#1B2A55; --cb-header-fg:#E7EBF6; --cb-header-sub:#9FACD6;
  --cb-shadow:0 26px 70px -18px rgba(4,10,28,.78);
}

/* PWA-Install-Hinweis (per JS eingehängt, wegklickbar; nie in der installierten App) */
.pwa-banner{position:fixed;left:1rem;bottom:1rem;z-index:90;display:flex;align-items:center;gap:.8rem;
  max-width:26rem;padding:.8rem 2.3rem .8rem .9rem;border:1px solid var(--linie-kr);border-radius:var(--radius-l);
  background:var(--karte);box-shadow:var(--schatten)}
.pwa-banner img{border-radius:10px;flex:none}
.pwa-banner .pwa-text{display:grid;gap:.1rem;font-size:.88rem;line-height:1.35;color:var(--leise)}
.pwa-banner .pwa-text strong{color:var(--tinte);font-size:.95rem}
.pwa-banner .knopf{padding:.6rem .95rem;font-size:.9rem;flex:none}
.pwa-banner .pwa-zu{position:absolute;top:.15rem;right:.15rem;border:0;background:none;
  color:var(--leise);line-height:0;cursor:pointer;border-radius:var(--radius);
  width:44px;height:44px;display:grid;place-items:center}   /* volles Tap-Ziel */
.pwa-banner .pwa-zu:hover{color:var(--tinte);background:var(--park-12)}
/* Der Hinweis liegt fest am unteren Rand — die Seite lässt darunter Luft, damit er
   am Seitenende nichts verdeckt. app.js schreibt die gemessene Höhe nach --pwa-platz. */
body{padding-bottom:var(--pwa-platz, 0px)}
@media (max-width:640px){
  .pwa-banner{left:.7rem;right:5.4rem;bottom:.7rem;max-width:none;flex-wrap:wrap} /* rechts Platz für den Lotse-Knopf */
  .pwa-banner .knopf{margin-left:auto}
}
@media (prefers-reduced-motion:no-preference){
  .pwa-banner{animation:hg-up .5s var(--ease)}
}

/* Orchestrierte Einblendung (nur wenn Bewegung erwünscht; ohne JS/reduced-motion sofort sichtbar) */
@media (prefers-reduced-motion:no-preference){
  .hg-text>*{opacity:0;animation:hg-up .7s var(--ease) forwards}
  .hg-kicker{animation-delay:.05s}.hg-titel{animation-delay:.14s}.hg-unter{animation-delay:.26s}
  .hg-aktionen{animation-delay:.38s}.hg-fakt{animation-delay:.48s}
  .hg-cockpit-label{opacity:0;animation:hg-up .7s var(--ease) .5s forwards}
  .cockpit--hero .cw{opacity:0;animation:hg-up .6s var(--ease) forwards}
  .cockpit--hero .cw:nth-child(1){animation-delay:.56s}.cockpit--hero .cw:nth-child(2){animation-delay:.62s}
  .cockpit--hero .cw:nth-child(3){animation-delay:.68s}.cockpit--hero .cw:nth-child(4){animation-delay:.74s}
  .cockpit--hero .cw:nth-child(5){animation-delay:.80s}.cockpit--hero .cw:nth-child(6){animation-delay:.86s}
  .cockpit--hero .cw:nth-child(7){animation-delay:.92s}.cockpit--hero .cw:nth-child(8){animation-delay:.98s}

  /* EIN orchestrierter Moment, nicht zwei übereinander.
     Läuft die Tor-Öffnung, spielt die gestaffelte Einblendung komplett HINTER dem
     geschlossenen Tor ab: der Vorhang ist bis 1,15 s deckend, die Staffel ist bei 1,2 s
     durch — der Nutzer sieht sie also nie und wartet trotzdem darauf. Deshalb ist beim
     Tor-Auftritt das Öffnen selbst die Inszenierung: dahinter steht der Hero fertig da
     und wird enthüllt. Ohne Tor (also bei fast jedem Aufruf) spielt die Staffel normal. */
  html.mj-tor-an .hg-text>*,
  html.mj-tor-an .hg-cockpit-label,
  html.mj-tor-an .cockpit--hero .cw{animation:none;opacity:1}
}
@keyframes hg-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ========================================================================
   Mitmach-Module: Kalender · Pinnwand · Job-Börse · Notdienst · Umwelt
   ======================================================================== */

/* Aktions-Knopfreihe oben auf Kalender/Brett/Jobs */
.kal-aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}

/* Termin-Datum-Block (Kalenderkarten, statt Initialen-Mono) */
.termin-datum{flex:none;width:46px;height:46px;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--park-12);color:var(--park-tief);line-height:1}
.termin-datum b{font-family:var(--serif);font-weight:600;font-size:1.12rem}
.termin-datum span{font-size:.6rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:.1rem}

/* Schwarzes-Brett-Tags (Art) — getönte Marken-Hue, kontrastgeprüft */
.tag--ich-suche{background:color-mix(in srgb,var(--sand) 18%,transparent);color:#7c4f10}
.tag--ich-biete{background:var(--park-12);color:var(--park-tief)}
.tag--ich-verschenke{background:color-mix(in srgb,var(--gracht) 20%,transparent);color:var(--park-tief)}
[data-theme="abend"] .tag--ich-suche{color:var(--sand)}
[data-theme="abend"] .tag--ich-biete,[data-theme="abend"] .tag--ich-verschenke{color:var(--park-tief)}

/* Notdienst-Apotheke (service.php) */
.notdienst-jetzt{background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--park);
  border-radius:var(--radius-l);box-shadow:var(--s1);padding:1.1rem 1.3rem;margin-bottom:1.2rem}
.nd-label{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--park);margin:0 0 .6rem}
.nd-stand{font-weight:600;color:var(--leise);letter-spacing:0;text-transform:none}
.nd-karte{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;justify-content:space-between;padding:.4rem 0}
.nd-name{display:block;font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.12}
.nd-adr{display:block;font-size:.9rem;color:var(--leise)}
.nd-akt{display:flex;gap:.5rem;flex-wrap:wrap}
.nd-morgen{font-size:.9rem;color:var(--leise);margin:.6rem 0 0;border-top:1px solid var(--linie);padding-top:.7rem}
.nd-morgen b{color:var(--tinte)}

/* Umwelt: Pollen/UV/Luft (wetter.php) */
.umwelt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:1.2rem}
.umwelt-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--s1);
  padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem}
.uk-label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.uk-wert{font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.1;color:var(--tinte);display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.uk-stufe{font-family:var(--sans);font-weight:600;font-size:.76rem;color:var(--park-tief);background:var(--park-12);border-radius:100px;padding:.12rem .6rem;letter-spacing:0}
.uk-sub{font-size:.82rem;color:var(--leise)}

/* ========================================================================
   Tor-Öffnung (Intro): zwei Schloss-Tor-Flügel öffnen sich beim ersten
   Seitenaufruf der Sitzung. Wird nur per JS-Klasse mj-tor-an aktiviert
   (theme.js, nicht bei reduced-motion / nicht ohne JS). pointer-events:none
   → blockiert nie Klicks; verschwindet nach ~1,5 s vollständig.
   ======================================================================== */
.tor{display:none}
html.mj-tor-an .tor{display:block;position:fixed;inset:0;z-index:200;pointer-events:none;
  background:#0A1128;animation:tor-ende .5s var(--ease) 1.15s forwards}
.tor-fluegel{position:absolute;top:0;bottom:0;width:51%;
  background:radial-gradient(120% 90% at 50% 12%,#1E3A8F 0%,transparent 60%),linear-gradient(165deg,#0A1128,#14245C);
  box-shadow:0 0 60px rgba(0,0,0,.5)}
.tor-l{left:0;border-right:1px solid rgba(73,216,215,.2);animation:tor-l 1s var(--ease) .35s forwards}
.tor-r{right:0;border-left:1px solid rgba(73,216,215,.2);animation:tor-r 1s var(--ease) .35s forwards}
.tor-siegel{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center;
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,7vw,3.4rem);color:#F5F7FD;letter-spacing:-.01em;
  animation:tor-siegel .55s var(--ease) .55s forwards}
.tor-siegel i{font-style:normal;color:#49D8D7}
@keyframes tor-l{to{transform:translateX(-100%)}}
@keyframes tor-r{to{transform:translateX(100%)}}
@keyframes tor-siegel{to{opacity:0;transform:scale(1.05)}}
@keyframes tor-ende{to{opacity:0;visibility:hidden}}

/* ---------- Interner Bereich: gemeinsame Navigation (Übersicht · Moderation · Statistik) ---------- */
.intern-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:.4rem 0 1.6rem;
  padding:.32rem;background:var(--karte);border:1px solid var(--linie);border-radius:100px;box-shadow:var(--s1)}
.intern-nav a{font-family:var(--sans);font-weight:600;font-size:.9rem;text-decoration:none;color:var(--tinte);
  padding:.45rem .95rem;border-radius:100px;line-height:1;transition:background .15s var(--ease,ease),color .15s}
.intern-nav a:hover{background:var(--park-12);color:var(--park)}
.intern-nav a[aria-current="page"]{background:var(--park);color:#fff}
.intern-nav .intern-ab{margin-left:auto;color:var(--leise)}
.intern-nav .intern-ab:hover{background:transparent;color:var(--park);text-decoration:underline}

/* Tiere: Tags für Vermisst/Gefunden + Gassi-Treff-Rhythmus (kontrastgeprüft, beide Themes) */
.tag--vermisst{background:color-mix(in srgb,#c0392b 15%,transparent);color:#8f2d18}
.tag--gefunden,.tag--regelmaessig{background:var(--park-12);color:var(--park-tief)}
.tag--zugelaufen{background:color-mix(in srgb,var(--sand) 18%,transparent);color:#7c4f10}
.tag--einmalig{background:color-mix(in srgb,var(--gracht) 20%,transparent);color:var(--park-tief)}
[data-theme="abend"] .tag--vermisst{color:#f0a594}
[data-theme="abend"] .tag--zugelaufen{color:var(--sand)}
[data-theme="abend"] .tag--gefunden,[data-theme="abend"] .tag--regelmaessig,[data-theme="abend"] .tag--einmalig{color:var(--park-tief)}
/* Nachbarschaftshilfe: anbieten (Grün) / suchen (Sand) */
.tag--hilfe-anbieten{background:var(--park-12);color:var(--park-tief)}
.tag--hilfe-suchen{background:color-mix(in srgb,var(--sand) 18%,transparent);color:#7c4f10}
[data-theme="abend"] .tag--hilfe-anbieten{color:var(--park-tief)}
[data-theme="abend"] .tag--hilfe-suchen{color:var(--sand)}

/* ---------- Reduced Motion: ALLE Bewegung aus ---------- */
@media (prefers-reduced-motion:reduce){
  .tor{display:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .karte:hover,.lokal:hover,.kat:hover,.dorf-kachel:hover,.knopf--voll:hover{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}