/* ==========================================================================
   Friedhöfe in Karlsruhe · Stadt-Theme
   Nach dem Vorbild von karlsruhe.de: weiße Seite, Arial, Karlsruhe-Grün
   #048500 nur als Akzent, eckige Flächen, ruhige Bewegung.
   Wird nach base.css und grafik.css geladen und überschreibt nur Tokens
   und die Stellen, an denen base.css dunkle Flächen oder Rundungen setzt.
   ========================================================================== */

:root{
  /* ---- Flächen: die Seite ist weiß ---- */
  --papier:#FFFFFF;
  --papier-2:#F5F5F5;
  --weiss:#FFFFFF;
  --linie:#CBCBCB;
  --linie-2:#DEDEDE;

  /* ---- Text: schwarz auf weiß wie auf karlsruhe.de ---- */
  --tinte:#000000;
  --text:#212529;
  --leise:#575758;

  /* ---- Akzent: Karlsruhe-Grün, sparsam eingesetzt ---- */
  --gruen:#048500;
  --gruen-dunkel:#036C00;
  --gruen-hell:#EDF5EC;
  --gruen-licht:#048500;

  /* base.css nutzt Sand als zweite Akzentfarbe und als Hover-Farbe.
     Auf dieser Seite gibt es nur einen Akzent, deshalb überall Grün. */
  --sand:#036C00;
  --sand-hell:#EDF5EC;
  --sand-licht:#048500;
  --wasser:#6c757d;

  /* ---- Dunkelflächen entfallen ---- */
  --nacht:#FFFFFF;
  --nacht-2:#F5F5F5;
  --nacht-linie:rgba(0,0,0,.12);

  /* ---- Schrift: eine Familie, wie im Vorbild ---- */
  --sans:Arial,Helvetica,"Helvetica Neue",sans-serif;
  --serif:Arial,Helvetica,"Helvetica Neue",sans-serif;
  --mono:Arial,Helvetica,"Helvetica Neue",sans-serif;

  --r-karte:0px;
  --nav-h:76px;
}

/* ---------- Grundtypografie ---------- */
body{background:#fff;font-weight:400}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(30px,3.6vw,44px);line-height:1.15}
h2{font-size:clamp(24px,2.4vw,32px)}
h3{font-size:clamp(19px,1.5vw,22px)}
a{color:var(--gruen);text-decoration:underline}
a:hover{color:var(--gruen-dunkel)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:0}
.lead{font-size:clamp(17px,1.25vw,19px);color:var(--text)}

/* Eyebrow: Versalien in Arial statt Mono */
.eyebrow{font:700 12px/1.3 var(--sans);letter-spacing:.09em;color:var(--gruen)}
.eyebrow::before{width:18px}
.mono{font-family:var(--sans);font-size:.85em;letter-spacing:0}

/* ---------- Kopfleiste: weiß, fest, grüne Markierung ---------- */
.kopfleiste::before{
  background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--linie);
  box-shadow:none}
.kopfleiste.auf-dunkel::before,.kopfleiste.on-light::before{background:#fff;border-bottom:1px solid var(--linie)}
.marke,.kopfleiste.auf-dunkel .marke{color:#000}
.marke svg{color:var(--gruen)}
.marke__titel{font-weight:700}
.marke__unter{color:var(--leise)}
.hauptnav a,.kopfleiste.auf-dunkel .hauptnav a{color:#000;font-weight:400;text-decoration:none;border-bottom:3px solid transparent;border-radius:0;background:none}
.hauptnav a:hover,.kopfleiste.auf-dunkel .hauptnav a:hover{color:var(--gruen);background:none;border-bottom-color:var(--gruen)}
.hauptnav a[aria-current="page"],.kopfleiste.auf-dunkel .hauptnav a[aria-current="page"]{color:var(--gruen);font-weight:700;background:none;border-bottom-color:var(--gruen)}
.suchknopf,.burger,.kopfleiste.auf-dunkel .suchknopf,.kopfleiste.auf-dunkel .burger{color:#000;background:#fff;border:1px solid var(--linie);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.suchknopf:hover,.burger:hover{color:var(--gruen);border-color:var(--gruen)}

/* ---------- Seitenkopf: hell statt dunkel ---------- */
.kopf{position:static;border-bottom:1px solid var(--linie)}
.kopf--karte,.kopf--dunkel,.kopf--struktur{
  color:var(--text);
  background-color:#fff;
  background-image:none}
.kopf--karte h1,.kopf--dunkel h1,.kopf--karte h2,.kopf--dunkel h2{color:#000}
.kopf--karte .eyebrow,.kopf--dunkel .eyebrow{color:var(--gruen)}
.kopf--karte .lead,.kopf--dunkel .lead{color:var(--text)}
.kopf--karte a:not(.btn),.kopf--dunkel a:not(.btn){color:var(--gruen)}
.kopf--karte .pfad,.kopf--dunkel .pfad{color:var(--leise)}
.kopf--karte .pfad a,.kopf--dunkel .pfad a{color:var(--leise)}
/* Grüner Balken links als einziges Farbelement des Kopfs */
.kopf__text{border-left:4px solid var(--gruen);padding-left:clamp(16px,1.6vw,24px)}

/* Die weichen Farbwolken entfallen: die Seite bleibt ruhig */
.aura{display:none}

/* ---------- Flächen ---------- */
.abschnitt--weiss{background:#fff;border-top:1px solid var(--linie-2)}
.abschnitt--papier2{background:var(--papier-2)}
.flaeche-nacht,.buehne-sektion{background:var(--papier-2);color:var(--text)}
.flaeche-nacht h2,.buehne-sektion h2{color:#000}

/* ---------- Kacheln: eckig, ein Rahmen, kein Schweben ---------- */
.kachel{border:1px solid var(--linie);border-radius:0;transition:border-color .2s,background .2s}
.kachel:hover{transform:none;border-color:var(--gruen);background:var(--gruen-hell)}
.kachel--nacht{background:var(--papier-2);color:var(--text);border-color:var(--linie)}
.kachel--nacht h2,.kachel--nacht h3{color:#000}
.kachel__meta{font-family:var(--sans);letter-spacing:.04em;color:var(--leise)}
.kachel__fuss{color:var(--gruen);font-weight:700}

/* ---------- Schaltflächen: eckig, Vollton, kein Glanz ---------- */
.btn{border-radius:2px;font-weight:700;min-height:46px}
.btn::before{display:none}
.btn:hover::before{animation:none}
.btn--voll{background:var(--gruen);border-color:var(--gruen);color:#fff}
.btn--voll:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff;--lift:0}
.btn--sand{background:var(--gruen);border-color:var(--gruen);color:#fff}
.btn--sand:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff;--lift:0}
.btn--linie{background:#fff;border-color:#000;color:#000}
.btn--linie:hover{background:#fff;border-color:var(--gruen);color:var(--gruen);--lift:0}
.kopf--dunkel .btn--linie,.kopf--karte .btn--linie,.flaeche-nacht .btn--linie,
.buehne-sektion .btn--linie,.fusszeile .btn--linie,.kachel--nacht .btn--linie{
  background:#fff;border-color:#000;color:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.kopf--dunkel .btn--linie:hover,.kopf--karte .btn--linie:hover,.flaeche-nacht .btn--linie:hover,
.buehne-sektion .btn--linie:hover,.fusszeile .btn--linie:hover,.kachel--nacht .btn--linie:hover{
  background:#fff;border-color:var(--gruen);color:var(--gruen)}

/* ---------- Kästen, Tabellen, Formulare ---------- */
.kasten{border-radius:0;border:1px solid var(--linie)}
.kasten--gruen{background:var(--gruen-hell);border-color:var(--gruen)}
.tabelle{border-radius:0}
.tabelle table th{background:var(--papier-2);color:#000;font-family:var(--sans);letter-spacing:0;text-transform:none;font-weight:700;font-size:15px}
.tabelle table td,.tabelle table th{border-color:var(--linie-2)}
input,select,textarea,.suche__feld{border-radius:0!important}
.suche__feld{border:1px solid #000;background:#fff}
.suche__feld:focus-within{border-color:var(--gruen);box-shadow:0 0 0 2px rgba(4,133,0,.18)}

/* ---------- Fußzeile: hell ---------- */
.fusszeile{background:var(--papier-2);color:var(--text);border-top:3px solid var(--gruen)}
.fusszeile h2,.fusszeile h3,.fusszeile b,.fusszeile strong{color:#000}
.fusszeile a{color:var(--gruen)}
.fusszeile a:hover{color:var(--gruen-dunkel)}

/* ---------- Bewegung: nur noch dezent ---------- */
.reveal{transition-duration:.45s}
.magnet{transform:none!important}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}}

/* ==========================================================================
   Karten und Grafiken auf hellem Grund
   grafik.css zeichnet für dunkle Flächen (helle Linien). Hier die Umkehrung:
   dunkle Linien auf Weiß, Akzentpunkte in Karlsruhe-Grün.
   ========================================================================== */

/* ---- Umkreiskarte im Seitenkopf ---- */
.uk-land{fill:#FAFAFA}
.uk-kreis{stroke:#B9B9B9;stroke-width:.25}
.uk-kreis.hervor{fill:rgba(4,133,0,.10);stroke:var(--gruen)}
.uk-fluss{stroke:#9DB6C2;stroke-width:.35}
.uk-rhein{stroke:#7FA3B3;stroke-width:.9}
.uk-ring{stroke:#C9C9C9;stroke-width:.25}
.uk-ringtext{fill:var(--leise)}
.uk-welle{stroke:var(--gruen)}
.uk-p{fill:var(--gruen)}
.uk-p--ka{fill:#000}
.uk-stadt circle{fill:#000}
.uk-stadt text{fill:#000;stroke:#fff;stroke-width:.6px;font-weight:700}
.uk-stadt--2 text{fill:var(--leise);stroke:#fff}
.uk-mitte__ring{stroke:var(--gruen);stroke-width:.45}
.uk-mitte__punkt{fill:var(--gruen)}
.uk-mitte text{fill:#000;stroke:#fff;stroke-width:.8px;font-weight:700}

/* ---- Gebietskarten (Stadtteile, Bestattungswälder, Friedhofsseiten) ---- */
.gk-umriss{fill:rgba(4,133,0,.06);stroke:var(--gruen);stroke-width:1.6px}
.gk-neben{stroke:#C4C4C4;stroke-width:1px}
.gk-p circle{fill:var(--gruen);stroke:#fff;stroke-width:1.2px}
.gk-p text{fill:#fff}
.gk-p--hervor circle{fill:#000}
.gk-p:hover circle,.gk-p:focus circle{fill:var(--gruen-dunkel)}
.gk-ka circle{fill:#000;stroke:#fff}
.gk-ka text,.gk-richtung text{fill:#000;font-weight:700}
.gk-richtung path{stroke:#000}
.gk-richtung .gk-richtung__kopf{fill:#000}
.gebiet--hell .gk-neben{stroke:#C4C4C4}

/* ---- Umrisse der Friedhofsflächen ---- */
.uf-flaeche{fill:rgba(4,133,0,.12);stroke:var(--gruen)}
.uf-raster line{stroke:#DDD}

/* ---- Die weiche Rundung zwischen den Flächen entfällt ---- */
main.ueber-kopf,.ueber-kopf>section:first-child{border-radius:0!important}
.ueber-kopf{box-shadow:none!important}

/* ---------- Seitenkopf kompakter: keine bildschirmfüllende Bühne ---------- */
.kopf{padding:calc(var(--nav-h) + clamp(28px,3vw,44px)) 0 clamp(32px,3.6vw,52px)}
.kopf--start{padding-bottom:clamp(40px,4.4vw,64px)}
.kopf__raster{align-items:start}
.kopf__grafik{max-width:520px;margin-left:auto}
main.ueber-kopf{border-radius:0;box-shadow:none;background:#fff}

/* Kennzahlen unter dem Titel: schwarz auf weiß, Label in Grau */
.faktenzeile{gap:10px 34px;border-top:1px solid var(--linie-2);padding-top:18px}
.faktenzeile b{font:700 clamp(22px,2vw,28px)/1.1 var(--sans);color:#000}
.faktenzeile span{font:400 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.flaeche-nacht .sektionskopf p{color:var(--leise)}

/* Schaltflächen nebeneinander statt untereinander */
.btn-reihe{gap:10px}
.btn-reihe .btn{flex:0 1 auto}

/* Friedhofspunkte in den Stadtteil-Kacheln */
.mini-punkt{fill:var(--gruen);stroke:#fff;stroke-width:.12;paint-order:stroke}

/* ---------- Zugang zu Bestattungswäldern ---------- */
.zugang{display:inline-block;font-size:14px;line-height:1.3;padding:2px 8px;border:1px solid var(--linie);white-space:nowrap}
.zugang--ja{border-color:var(--gruen);color:var(--gruen);font-weight:700}
.zugang--nein{border-color:#000;color:#000;font-weight:700}
.zugang--zuschlag{border-color:var(--leise);color:#000}
.zugang--offen{color:var(--leise)}
.zugang-kasten{margin:0 0 30px;border-left:4px solid var(--linie)}
.zugang-kasten h2{font-size:20px;margin-bottom:.4em}
.zugang-kasten--nein{border-left-color:#000;background:var(--papier-2)}
.zugang-kasten--ja{border-left-color:var(--gruen);background:var(--gruen-hell)}
.zugang-kasten--zuschlag{border-left-color:var(--leise)}
@media (max-width:640px){.zugang{white-space:normal}}

/* ---------- Friedhofsvorstellungen auf den Stadtteil-Seiten ---------- */
.vorstellungen{border-top:1px solid var(--linie)}
.vorstellung{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--linie)}
.vorstellung__meta{margin:0 0 6px;font-size:14px;color:var(--leise)}
.vorstellung h2{font-size:clamp(21px,1.8vw,26px);margin:0 0 10px}
.vorstellung h2 a{color:#000;text-decoration:none}
.vorstellung h2 a:hover{color:var(--gruen);text-decoration:underline}
.vorstellung__zugang{margin:0}
.vorstellung__text p{margin:0 0 12px}
.vorstellung__text .merkmale{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 12px}
.vorstellung__text .merkmale li{margin:0;font-size:14px;padding:3px 9px;background:var(--papier-2);border:1px solid var(--linie-2)}
.vorstellung__weiter{font-weight:700}
.vorstellung__weiter a{text-decoration:none}
.vorstellung__weiter a:hover{text-decoration:underline}
@media (max-width:760px){.vorstellung{grid-template-columns:minmax(0,1fr);gap:6px}}

/* Kopfleiste bleibt in jedem Zustand weiß (base.css färbt sie beim
   Scrollen und im sparsamen Modus beige bzw. dunkel) */
.kopfleiste.scrolled::before,
.kopfleiste.on-light::before,
html.sparsam .kopfleiste::before,
html.sparsam .kopfleiste.on-light::before,
html.sparsam .kopfleiste.scrolled:not(.auf-dunkel)::before{
  background:#fff;border-bottom-color:var(--linie);box-shadow:none}
.kopfleiste.scrolled::before{box-shadow:0 2px 0 0 var(--gruen)}

/* ---------- Im Trauerfall: ruhige Schrittliste statt Scroll-Bühne ---------- */
.buehne{display:none}
.buehne-raster{grid-template-columns:minmax(0,1fr)!important;gap:0}
.schritte{counter-reset:schritt;border-top:1px solid var(--linie);max-width:860px}
.schritt,.schritt:first-child,.schritt:last-child{min-height:0!important;padding:20px 0 20px 64px;border-bottom:1px solid var(--linie);position:relative;justify-content:flex-start}
.schritt::before{counter-increment:schritt;content:counter(schritt);position:absolute;left:0;top:20px;width:40px;height:40px;display:grid;place-items:center;background:var(--gruen);color:#fff;font:700 18px/1 var(--sans)}
.schritt__nr{display:none}
.schritt h3,.schritt.an h3{color:#000;font-size:clamp(19px,1.5vw,22px);margin-bottom:6px}
.schritt p,.schritt.an p{color:var(--text);max-width:none}
.schritt__norm,.schritt .schritt__norm{color:var(--leise)!important;font-family:var(--sans)}

/* ---------- Leitsatz: Aussage statt Plakat ---------- */
.satz{font:400 clamp(20px,1.9vw,26px)/1.45 var(--sans);max-width:52ch;border-left:4px solid var(--gruen);padding-left:clamp(16px,1.6vw,24px)}
.satz .w,.satz .w.hot{color:#000}
.satz .w.hot.akzent{color:var(--gruen)}

/* Gebührenbalken: Vollton, Grabgebühren grün, Bestattungsgebühren schwarz */
.balken__fuell{background:var(--gruen);border-radius:0}
.balken__zeile--hervor .balken__fuell{background:#000}
.balken__spur,.balken__bahn{border-radius:0}