/* ==========================================================================
   Friedhöfe Karlsruhe · Modernes Verzeichnis-Design
   Anmutung wie friedhoefe-stuttgart.de, gebaut nach den Designstandards:
   Display-Serif + Sans, Mono-Eyebrows, Creme und tiefes Grün, Karten mit
   großen Radien, Pill-Knöpfe mit Verlauf und vier Schattenlagen, haftender
   Seitenkopf mit darübergleitender Sektion. Wird als letztes geladen und
   ersetzt die Stadt-Anmutung aus stadt.css.
   ========================================================================== */

:root{
  --creme:#F6F2EB;
  --creme-2:#EEE8DD;
  --karte:#FFFDF9;
  --minze:#E4EEE7;
  --minze-2:#D3E4D9;
  --linie:#E4DCCF;
  --linie-2:#ECE5DA;
  --tinte:#1C2B24;
  --text:#4A534E;
  --leise:#6F7771;
  --gruen:#2F5D4E;
  --gruen-dunkel:#234639;
  --gruen-hell:#E4EEE7;
  --gruen-licht:#8FC1AC;
  --bernstein:#B3742C;
  --bernstein-hell:#F3E6D3;

  --sand:var(--gruen-dunkel);
  --sand-hell:var(--minze);
  --sand-licht:var(--gruen);
  --nacht:#1F3B31;
  --papier:var(--creme);
  --papier-2:var(--creme-2);
  --weiss:var(--karte);

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --nav-h:78px;
  --wrap:1220px;
  --gutter:clamp(18px,4vw,40px);
  --r-karte:22px;
  --r-klein:14px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --sektion:clamp(48px,5vw,76px);
}

html{scroll-padding-top:calc(var(--nav-h) + 20px)}
body{background:var(--creme);color:var(--text);font:400 clamp(16px,1.05vw,17px)/1.68 var(--sans)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--tinte);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,64px);line-height:1.06;margin:0 0 .45em}
h2{font-size:clamp(28px,3vw,42px);line-height:1.12}
h3{font-size:clamp(20px,1.6vw,24px);line-height:1.2}
a{color:var(--gruen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--gruen-dunkel)}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px;border-radius:6px}
.lead{font-size:clamp(18px,1.4vw,20px);line-height:1.62;color:var(--text);max-width:58ch}
.wrap,.hk-container{width:min(var(--wrap),100%);max-width:none;margin-inline:auto;padding-inline:var(--gutter)}

/* Eyebrow: Mono, Versalien, kurzer Bernstein-Strich */
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font:500 11.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gruen)}
.eyebrow::before{display:block;content:"";width:24px;height:1.5px;background:var(--bernstein);opacity:1}
.sektionskopf{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px)}
.sektionskopf p{font-size:clamp(16.5px,1.2vw,18.5px);color:var(--text)}

/* ==========================================================================
   Kopfleiste: freischwebende Glaspille (§1)
   Die Leiste selbst ist nur noch ein Rahmen ohne eigene Fläche. Das Glas
   sitzt auf .hk__pille: Weichzeichner, heller Saum oben, feiner Ring und
   ein weicher Abwurf. Drei Zustände wie vorgeschrieben: über dem Kopf,
   gescrollt (deckender) und ohne backdrop-filter.
   ========================================================================== */
:root{--pillen-h:62px;--pillen-luft:14px;--nav-h:calc(var(--pillen-h) + 2 * var(--pillen-luft))}

.hk{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  pointer-events:none;background:none;transition:height .35s var(--ease-out)}
.hk::before{content:none}
.hk__pille{pointer-events:auto;position:relative;isolation:isolate;height:var(--pillen-h);
  width:min(1320px,calc(100% - 2 * var(--gutter)));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(10px,1.8vw,28px);
  padding-inline:clamp(12px,1.3vw,20px);border-radius:999px;
  transition:height .35s var(--ease-out)}
.hk__pille::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(246,242,235,.5) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(185%);backdrop-filter:blur(18px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(28,43,36,.07),
    0 0 0 1px rgba(28,43,36,.09),0 18px 38px -22px rgba(28,43,36,.5);
  transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
/* Lichtsaum: das, was Glas von einer grauen Fläche unterscheidet */
.hk__pille::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 46%)}

.hk.scrolled{--pillen-h:54px;--pillen-luft:10px}
.hk.scrolled .hk__pille::before{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(246,242,235,.9) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(28,43,36,.12),0 20px 44px -22px rgba(28,43,36,.62)}

/* Über dunklem Grund misst app.js .auf-dunkel und die Pille dreht sich um */
.hk.auf-dunkel .hk__pille::before{background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(31,59,49,.42) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.18),0 18px 38px -22px rgba(0,0,0,.6)}
.hk.auf-dunkel .hk-marke,.hk.auf-dunkel .hk-nav a{color:#fff}
.hk.auf-dunkel .hk-marke__zusatz{color:rgba(255,255,255,.72)}
.hk.auf-dunkel .hk-nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.hk.auf-dunkel .hk-nav a[aria-current="page"]{color:#fff}
.hk.auf-dunkel .hk-rund{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hk__pille::before{background:rgba(246,242,235,.97)}
  .hk.auf-dunkel .hk__pille::before{background:rgba(31,59,49,.94)}
}
html.sparsam .hk__pille::before{background:rgba(246,242,235,.98)}
html.sparsam .hk.auf-dunkel .hk__pille::before{background:rgba(31,59,49,.96)}

.hk-marke{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;min-height:44px;color:var(--tinte);text-decoration:none}
.hk-marke:hover{color:var(--tinte)}
.hk-marke__bild{width:clamp(32px,2.6vw,38px);height:clamp(32px,2.6vw,38px);flex:0 0 auto}
.hk-marke__text{display:flex;flex-direction:column;line-height:1}
.hk-marke__name{font:600 clamp(17px,1.4vw,20px)/1.05 var(--serif);letter-spacing:-.015em;white-space:nowrap}
.hk-marke__zusatz{margin-top:4px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gruen);white-space:nowrap}
/* Unabhängigkeitshinweis oben auf der Startseite (sichtbar ohne Scrollen) */
.kopf__hinweis{margin:0 0 16px;max-width:58ch;padding-left:12px;border-left:3px solid var(--gruen);font-size:14.5px;line-height:1.5;color:var(--leise)}

.hk-nav{margin-left:auto;min-width:0}
.hk-nav ul{display:flex;align-items:center;gap:clamp(2px,.4vw,6px);list-style:none;margin:0;padding:0}
.hk-nav li{margin:0}
.hk-nav a{position:relative;display:block;padding:9px clamp(9px,.9vw,15px);border-radius:999px;color:var(--tinte);
  font:500 clamp(14px,1vw,15.5px)/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.hk-nav a:hover{background:rgba(47,93,78,.1);color:var(--gruen-dunkel)}
.hk-nav a[aria-current="page"]{background:rgba(47,93,78,.13);color:var(--gruen-dunkel);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(47,93,78,.18)}

.hk-aktionen{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hk-rund{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(28,43,36,.14);
  background:rgba(255,255,255,.62);color:var(--tinte);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hk-rund:hover{border-color:var(--gruen);color:var(--gruen);background:#fff}
.hk-rund svg{width:19px;height:19px}
.hk-burger{display:none}

/* Pill-Knopf rechts */
.hk-cta{--lift:0px;display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:6px 20px 7px;border-radius:999px;
  background:linear-gradient(180deg,#3A6D5E 0%,#264D42 100%);color:#fff;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(28,43,36,.18),0 10px 22px -12px rgba(28,43,36,.55);
  transform:translateY(var(--lift));transition:transform .3s var(--ease-out),box-shadow .3s}
.hk-cta:hover{--lift:-2px;color:#fff}
.hk-cta__klein{font:500 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.hk-cta__gross{font:600 15px/1.2 var(--sans)}

@media (max-width:1180px){
  .hk-nav{display:none}
  .hk-aktionen{margin-left:auto}
  .hk-burger{display:grid}
}
@media (max-width:640px){
  :root{--pillen-h:58px;--pillen-luft:10px}
  .hk-cta{display:none}
  .hk-marke__zusatz{font-size:8px;letter-spacing:.04em;margin-top:3px}
}
/* Schmale Geräte: die Wortmarke gibt nach, die Schalter bleiben 40 px */
@media (max-width:420px){
  .hk__pille{gap:8px;padding-inline:9px}
  .hk-marke{gap:9px;overflow:hidden}
  .hk-marke__bild{width:30px;height:30px}
  .hk-marke__name{font-size:15px;white-space:normal;line-height:1.05}
  .hk-marke__zusatz{font-size:7.5px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
  .hk-aktionen{gap:6px}
  .hk-rund{width:40px;height:40px}
}
@media (max-width:360px){
  .hk-marke__name{font-size:14px}
  .hk-marke__zusatz{font-size:7px;letter-spacing:0}
}

/* Schublade: deckend, nie Glas */
.schublade{background:var(--creme);color:var(--tinte);padding:0 0 30px;overflow-y:auto}
.schublade__kopf{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);border-bottom:1px solid var(--linie)}
.schublade__zu{position:static;width:44px;height:44px;padding:10px;border:1px solid var(--linie);border-radius:50%;background:var(--karte);color:var(--tinte)}
.schublade__gruppe{border-bottom:1px solid var(--linie);margin:0 var(--gutter)}
.schublade__gruppe summary{padding:18px 0;font:600 21px/1.2 var(--serif);color:var(--tinte);cursor:pointer}
.schublade__gruppe[open] summary{color:var(--gruen)}
.schublade__gruppe ul{list-style:none;margin:0;padding:0 0 14px}
.schublade__gruppe li{margin:0}
.schublade__gruppe a{display:block;padding:10px 0;color:var(--text);font-size:17px;text-decoration:none;border:0}
.schublade__cta{margin:24px var(--gutter) 0;width:calc(100% - 2 * var(--gutter))}
.schublade__fuss{padding:18px var(--gutter) 0;font-size:14px;color:var(--leise)}

/* ==========================================================================
   Seitenkopf: haftet, die nächste Sektion schwebt mit Rundung darüber (§2)
   ========================================================================== */
.kopf,.kopf--karte,.kopf--dunkel,.kopf--struktur{
  position:sticky;top:min(0px,calc(100svh - var(--kopf-h,100svh)));overflow:clip;
  padding:calc(var(--nav-h) + clamp(40px,5.4vw,84px)) 0 clamp(60px,7vw,108px);
  color:var(--text);border-bottom:0;
  background-color:var(--minze);
  background-image:radial-gradient(70% 90% at 88% 0%,rgba(143,193,172,.45),transparent 60%),linear-gradient(180deg,var(--minze) 0%,#EDF1E9 55%,var(--creme) 100%)}
.kopf--karte h1,.kopf--dunkel h1,.kopf--karte h2{color:var(--tinte)}
.kopf--karte .lead,.kopf--dunkel .lead{color:var(--text)}
.kopf--karte a:not(.btn),.kopf--dunkel a:not(.btn){color:var(--gruen)}
.kopf__text{border-left:0;padding-left:0;max-width:680px}
.kopf__raster{align-items:center;gap:clamp(28px,5vw,80px)}
.kopf__grafik{max-width:560px;margin-left:auto;width:100%}
.aura{display:none}

main.ueber-kopf,main.ueber-kopf>section:first-child{border-radius:30px 30px 0 0!important}
main.ueber-kopf{position:relative;z-index:1;background:var(--creme)!important;box-shadow:0 -24px 60px rgba(28,43,36,.16)!important}

/* Brotkrumen im Kopf */
.pfad{margin:0 0 22px;font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.kopf--karte .pfad,.kopf--dunkel .pfad{color:var(--leise)}
.kopf--karte .pfad a,.kopf--dunkel .pfad a,.pfad a{color:var(--gruen);text-decoration:none}
.pfad a:hover{text-decoration:underline}

/* Kartenfeld der Startseite wie das Bild der Vorlage */
.bildfeld{position:relative;padding:clamp(18px,2.2vw,30px);border-radius:28px;background:var(--karte);border:1px solid var(--linie);
  box-shadow:0 30px 60px -36px rgba(28,43,36,.45)}
.bildfeld .umkreis{margin:0}
.bildfeld__marke{position:absolute;left:clamp(-18px,-1.4vw,-8px);bottom:clamp(20px,3vw,40px);display:flex;align-items:center;gap:12px;max-width:250px;
  padding:12px 18px 12px 14px;border-radius:18px;background:var(--karte);border:1px solid var(--linie);box-shadow:0 18px 36px -22px rgba(28,43,36,.5)}
.bildfeld__marke b{font:600 34px/1 var(--serif);color:var(--gruen)}
.bildfeld__marke span{font-size:13px;line-height:1.35;color:var(--text)}
.umkreis__legende{color:var(--leise);font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* Kennzahlen als Häkchenzeile */
.faktenzeile{gap:12px 28px;margin-top:28px;padding-top:0;border-top:0}
.faktenzeile li{flex-direction:row;align-items:baseline;gap:8px}
.faktenzeile li::before{content:"";align-self:center;width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.3 2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.faktenzeile b{font:600 18px/1.2 var(--sans);color:var(--tinte)}
.faktenzeile span{font:500 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}

/* ==========================================================================
   Flächen und Karten
   ========================================================================== */
.abschnitt{padding-block:var(--sektion)}
.abschnitt--weiss,.abschnitt--papier2,.flaeche-nacht,.buehne-sektion{background:var(--minze);color:var(--text)}
.flaeche-nacht h2,.buehne-sektion h2{color:var(--tinte)}

.kachel{position:relative;border:1px solid var(--linie);border-radius:var(--r-karte);background:var(--karte);padding:clamp(22px,2.2vw,30px);
  transition:transform .45s var(--ease-out),border-color .3s,box-shadow .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{transform:translateY(-4px);border-color:var(--minze-2);box-shadow:0 26px 50px -34px rgba(28,43,36,.45);background:var(--karte)}
}
.kachel h2,.kachel h3{font-family:var(--serif);color:var(--tinte)}
.kachel p{color:var(--text)}
.kachel__meta{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bernstein)}
.kachel__fuss{color:var(--gruen);font-weight:600}
.kachel__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:14px;background:var(--minze);color:var(--gruen)}
.kachel__icon svg{width:24px;height:24px}
.mini-umriss path{fill:var(--minze);stroke:var(--gruen)}
.mini-punkt{fill:var(--bernstein);stroke:var(--karte)}

.kasten{border:1px solid var(--linie);border-radius:var(--r-karte);background:var(--karte)}
.kasten dt{font:500 10.5px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.kasten--gruen{background:var(--minze);border-color:var(--minze-2)}
.rand .kasten{padding:clamp(20px,2vw,26px)}
.rand .kasten h2{font-size:22px;margin-bottom:10px}
@media (min-width:961px){.rand{position:sticky;top:calc(var(--nav-h) + 24px);grid-template-columns:minmax(0,1fr)}}

.tabelle{border:1px solid var(--linie);border-radius:var(--r-karte);background:var(--karte);overflow:hidden}
.tabelle table th{background:var(--creme-2);color:var(--tinte);font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tabelle table td,.tabelle table th{border-color:var(--linie-2)}
.tabelle tbody tr:hover td{background:#FBF8F2}

.merkmale li,.vorstellung__text .merkmale li{border-radius:999px;background:var(--minze);border:1px solid var(--minze-2);color:var(--gruen-dunkel);font-weight:600;font-size:13px;padding:4px 12px}

.vorstellungen{border-top:0;display:grid;gap:16px}
.vorstellung{border:1px solid var(--linie);border-radius:var(--r-karte);background:var(--karte);padding:clamp(22px,2.4vw,32px)}
.vorstellung h2{font-size:clamp(22px,2vw,28px)}
.vorstellung h2 a{color:var(--tinte)}
.vorstellung__meta{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bernstein)}

.zugang{border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;border-width:1px}
.zugang--ja{background:var(--minze);border-color:var(--minze-2);color:var(--gruen-dunkel)}
.zugang--nein{background:var(--bernstein-hell);border-color:#E6CFAE;color:#7A4A12}
.zugang--zuschlag{background:var(--creme-2);border-color:var(--linie);color:var(--tinte)}
.zugang--offen{background:transparent;border-color:var(--linie);color:var(--leise);font-weight:500}
.zugang-kasten{border-radius:var(--r-karte);border-left-width:1px}
.zugang-kasten--nein{background:var(--bernstein-hell);border-color:#E6CFAE}
.zugang-kasten--ja{background:var(--minze);border-color:var(--minze-2)}

/* Schritte als Karten mit runder Nummer */
.schritte{display:grid;gap:14px;border-top:0}
.schritt,.schritt:first-child,.schritt:last-child{padding:22px 26px 22px 88px;border:1px solid var(--linie);border-radius:var(--r-karte);background:var(--karte)}
.schritt::before{left:24px;top:22px;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#3A6D5E,#264D42);font:600 18px/1 var(--serif)}
.schritt h3,.schritt.an h3{color:var(--tinte)}
.schritt__norm,.schritt .schritt__norm{font-family:var(--mono)!important;font-size:12px!important}

.satz{font:400 clamp(22px,2.4vw,32px)/1.35 var(--serif);max-width:34ch;border-left:0;padding:0;background:none;color:var(--tinte)}
.satz .w,.satz .w.hot{color:var(--tinte)}
.satz .w.hot.akzent{color:var(--gruen)}

.abschluss{border:1px solid var(--linie);border-radius:28px;background:var(--karte)}
.abschluss__zeichen{background:var(--minze);color:var(--gruen)}

.balken__fuell{background:linear-gradient(90deg,var(--gruen) 0%,#4E8573 100%);border-radius:999px}
.balken__zeile--hervor .balken__fuell{background:linear-gradient(90deg,var(--bernstein) 0%,#D29A57 100%)}

/* Inhaltsverzeichnis */
.hk-inhalt{margin:0 0 40px;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--karte)}
.hk-inhalt summary{display:flex;align-items:center;gap:10px;padding:14px 18px;font:600 17px/1.3 var(--sans);color:var(--tinte);cursor:pointer;list-style:none}
.hk-inhalt summary::-webkit-details-marker{display:none}
.hk-inhalt summary svg{width:20px;height:20px;color:var(--gruen)}
.hk-inhalt__plus{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--minze);transition:transform .25s var(--ease-out)}
.hk-inhalt__plus svg{width:14px!important;height:14px!important}
.hk-inhalt[open] .hk-inhalt__plus{transform:rotate(45deg)}
.hk-inhalt ol{margin:0;padding:0 18px 18px 46px}
.hk-inhalt a{color:var(--text);text-decoration:none}
.hk-inhalt a:hover{color:var(--gruen);text-decoration:underline}

/* ==========================================================================
   Knöpfe (§8): Verlauf, vier Schattenlagen, Lichtstreifen, Pill
   ========================================================================== */
.btn{--lift:0px;border-radius:999px;min-height:50px;padding:13px 24px;font:600 15.5px/1.1 var(--sans);text-decoration:none;box-shadow:none;transform:translateY(var(--lift))}
.btn::before{display:block}
.btn--voll,.btn--sand{color:#fff;border:0;background:linear-gradient(180deg,#3A6D5E 0%,#264D42 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(28,43,36,.18),0 12px 24px -12px rgba(28,43,36,.55)}
.btn--voll:hover,.btn--sand:hover{--lift:-2px;color:#fff;background:linear-gradient(180deg,#43796A 0%,#2A5448 100%)}
.btn--linie,.kopf--karte .btn--linie,.kopf--dunkel .btn--linie,.fusszeile .btn--linie,.kachel--nacht .btn--linie{
  background:var(--karte);border:1px solid var(--linie);color:var(--tinte);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn--linie:hover,.kopf--karte .btn--linie:hover,.kopf--dunkel .btn--linie:hover{--lift:-2px;background:var(--karte);border-color:var(--gruen);color:var(--gruen)}
/* Ausnahmeliste dunkle Flächen: Fußzeile */
.hk-fuss .btn--linie{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.magnet{transform:translateY(var(--lift,0px))}

/* Suche als Pill */
.suche__feld{border:1px solid var(--linie);border-radius:999px!important;background:var(--karte);padding:6px 6px 6px 20px;
  box-shadow:0 14px 34px -24px rgba(28,43,36,.45)}
.suche__feld:focus-within{border-color:var(--gruen);box-shadow:0 0 0 4px rgba(47,93,78,.14),0 14px 34px -24px rgba(28,43,36,.45)}
.suche__feld .btn{border-radius:999px;min-height:46px}

/* Häufige Fragen */
.faq summary,.fragen summary{font-family:var(--serif);color:var(--tinte)}

/* ==========================================================================
   Karten-Grafiken auf Creme (Beschriftungen dunkel)
   ========================================================================== */
.uk-land{fill:#F2EEE6}
.uk-kreis{stroke:#CFC6B8}
.uk-kreis.hervor{fill:rgba(47,93,78,.10);stroke:var(--gruen)}
.uk-p{fill:var(--gruen)}
.uk-p--ka{fill:var(--bernstein)}
.uk-welle{stroke:var(--bernstein)}
.uk-mitte__ring{stroke:var(--gruen)}
.uk-mitte__punkt{fill:var(--bernstein)}
.gk-umriss{fill:rgba(47,93,78,.08);stroke:var(--gruen)}
.gk-p circle{fill:var(--gruen);stroke:var(--karte)}
.gk-p--hervor circle{fill:var(--bernstein)}
.gk-ka circle{fill:var(--tinte)}
.ug-raster{stroke:rgba(92,80,70,.10)}
.ug-kreis{stroke:rgba(92,80,70,.28)}
.ug-flaeche{fill:rgba(47,93,78,.10)}
.ug-linie{stroke:var(--gruen)}
.ug-mitte{fill:var(--bernstein)}
.ug-mass path,.ug-nord path{stroke:var(--leise)}
.ug-nord path{fill:var(--leise)}
.ug-mass text,.ug-nord text{fill:var(--leise);font-family:var(--mono)}

/* ==========================================================================
   Fußzeile: tiefes Grün
   ========================================================================== */
.hk-fuss{background-color:var(--nacht);background-image:radial-gradient(60% 80% at 100% 0%,rgba(143,193,172,.16),transparent 60%);color:rgba(255,255,255,.78);margin-top:0}
.hk-fuss a{color:#fff}
.hk-fuss__werkzeug{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px 0 26px;border-bottom:1px solid rgba(255,255,255,.12)}
.hk-fuss__aktionen{display:flex;gap:10px}
.hk-fuss button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:500 15px/1 var(--sans);cursor:pointer}
.hk-fuss button:hover{background:rgba(255,255,255,.14)}
.hk-fuss button svg{width:15px;height:15px}
.hk-fuss__stand{margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hk-fuss__kacheln{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:34px 0;padding:0}
.hk-fuss__kacheln li{margin:0}
.hk-fuss__kacheln a{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#fff;font:600 17px/1.2 var(--serif);text-decoration:none;hyphens:auto;transition:background .25s,border-color .25s}
.hk-fuss__kacheln a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff}
.hk-fuss__kacheln svg{width:26px;height:26px;flex:0 0 auto;color:var(--gruen-licht)}
.hk-fuss__hinweis{margin:0 0 26px;font-size:14px;color:rgba(255,255,255,.6)}
.hk-fuss__hinweis a{color:rgba(255,255,255,.8)}
.hk-fuss__unten{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 40px;border-top:1px solid rgba(255,255,255,.12)}
.hk-fuss__links{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0}
.hk-fuss__links li{margin:0}
.hk-fuss__links a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px}
.hk-fuss__links a:hover{color:#fff;text-decoration:underline}

@media (max-width:960px){
  .hk-fuss__kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bildfeld__marke{left:12px;bottom:12px;max-width:220px}
  .schritt,.schritt:first-child,.schritt:last-child{padding:20px 20px 20px 76px}
  .schritt::before{left:18px;top:20px;width:40px;height:40px}
}
@media (max-width:640px){
  .hk-fuss__werkzeug,.hk-fuss__unten{flex-wrap:wrap}
  .btn-reihe .btn{width:100%}
  .bildfeld__marke b{font-size:28px}
}

/* ==========================================================================
   Bewegung (§6) und Sparbetrieb (§7)
   ========================================================================== */
.reveal{transition-duration:1s}
@media (prefers-reduced-motion:reduce){
  .reveal,.kachel,.btn,.hk-cta{transition:none!important}
  .kachel:hover,.btn:hover,.hk-cta:hover{transform:none!important}
}
html.sparsam *,html.sparsam *::before,html.sparsam *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto!important}
@media print{.hk,.hk-fuss__kacheln,.hk-fuss__aktionen,.abschluss{display:none!important}.kopf{position:static}}

/* Feinschliff */
.bildfeld .umkreis__legende{display:none}
.sektionskopf .eyebrow,.sektionskopf p.eyebrow{font-size:11.5px;line-height:1.3;color:var(--gruen)}
.satz{font-size:clamp(21px,2vw,27px);line-height:1.42;max-width:40ch}

/* Karten der Unterseiten im selben Bildfeld wie auf der Startseite */
.kopf__grafik>.gebiet,.kopf__grafik>.umriss{position:relative;overflow:hidden;aspect-ratio:auto;padding:clamp(14px,1.8vw,24px);
  border-radius:28px;background:var(--karte);border:1px solid var(--linie);box-shadow:0 30px 60px -36px rgba(28,43,36,.45)}
.kopf__grafik>.umriss svg{display:block;width:100%;height:auto;aspect-ratio:1}

/* ==========================================================================
   Sechs Glasfelder: der frühere Schnellzugriff, jetzt unter dem Kopf
   Glas braucht einen dunklen Grund (§9), deshalb liegt das Band in tiefem
   Grün mit driftenden Farbwolken darunter. Es ist die erste Sektion und
   bekommt die Rundung, mit der main.ueber-kopf über den Kopf schiebt.
   ========================================================================== */
.glasband{position:relative;overflow:clip;padding-block:clamp(40px,4.6vw,68px);
  background-color:var(--nacht);
  background-image:radial-gradient(80% 90% at 10% 0%,rgba(143,193,172,.18),transparent 62%)}
.glasband .wrap{position:relative;z-index:1}
.glasband__kopf{max-width:640px;margin-bottom:clamp(22px,2.6vw,34px)}
.glasband__kopf .eyebrow{color:var(--gruen-licht)}
.glasband__kopf .eyebrow::before{background:var(--bernstein)}
.glasband__kopf h2{color:#fff;font-size:clamp(25px,2.5vw,36px);margin:0}

.glasband__aura{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glasband__aura i{position:absolute;display:block;width:46vw;height:46vw;max-width:560px;max-height:560px;
  border-radius:50%;filter:blur(94px);mix-blend-mode:screen;opacity:.5;will-change:transform}
.glasband__aura i:nth-child(1){left:-8%;top:-40%;background:#3E8C6E;animation:glasdrift 17s var(--ease-out) infinite alternate}
.glasband__aura i:nth-child(2){right:-6%;top:-20%;background:#2B6B57;animation:glasdrift 21s var(--ease-out) infinite alternate-reverse}
.glasband__aura i:nth-child(3){left:38%;bottom:-55%;background:#8A6A33;opacity:.34;animation:glasdrift 19s var(--ease-out) infinite alternate}
@keyframes glasdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7%,9%,0) scale(1.18)}}

.glasfelder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  list-style:none;margin:0;padding:0}
.glasfelder li{margin:0}
.glasfeld{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;min-height:94px;
  padding:18px 46px 18px 18px;border-radius:24px;color:#fff;text-decoration:none;
  transition:transform .4s var(--ease-out)}
.glasfeld::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);backdrop-filter:blur(16px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 0 1px rgba(255,255,255,.15),0 20px 40px -26px rgba(0,0,0,.7);
  transition:background .3s,box-shadow .3s}
.glasfeld::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 52%)}
.glasfeld__icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:16px;
  background:rgba(255,255,255,.14);color:var(--gruen-licht);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.glasfeld__icon svg{width:23px;height:23px}
.glasfeld__text{font:600 clamp(16px,1.25vw,18.5px)/1.25 var(--serif);color:#fff;hyphens:auto}
.glasfeld__pfeil{position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:19px;line-height:1;color:var(--gruen-licht);opacity:.75;transition:transform .35s var(--ease-out),opacity .3s}
@media (hover:hover) and (pointer:fine){
  .glasfeld:hover{transform:translateY(-3px);color:#fff}
  .glasfeld:hover::before{background:linear-gradient(160deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.1) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 0 0 1px rgba(255,255,255,.24),0 26px 48px -26px rgba(0,0,0,.75)}
  .glasfeld:hover .glasfeld__pfeil{transform:translate(4px,-50%);opacity:1}
}
.glasfeld:focus-visible{outline-offset:4px}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glasfeld::before{background:rgba(255,255,255,.13)}
}
html.sparsam .glasband__aura{display:none}
html.sparsam .glasfeld::before{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){
  .glasband__aura i{animation:none}
  .glasfeld,.glasfeld__pfeil{transition:none}
  .glasfeld:hover{transform:none}
}
@media (max-width:960px){.glasfelder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .glasfelder{grid-template-columns:minmax(0,1fr);gap:10px}
  .glasfeld{min-height:76px;padding:14px 42px 14px 14px;border-radius:20px}
  .glasfeld__icon{width:42px;height:42px;border-radius:14px}
}

/* ==========================================================================
   Weichere Kanten
   stadt.css hatte alles auf 0 gesetzt, das war die eckige Anmutung von
   karlsruhe.de. Hier die Gegenwerte: deutlich gerundet, aber nur Knöpfe,
   Marken und Schalter sind volle Pillen.
   ========================================================================== */
:root{--r-karte:26px;--r-klein:20px;--r-feld:16px}

main.ueber-kopf,main.ueber-kopf>section:first-child{border-radius:34px 34px 0 0!important}
.kachel,.kasten,.tabelle,.vorstellung,.faq details,.fragen details,.zugang-kasten{border-radius:var(--r-karte)}
.hk-inhalt,.statistik{border-radius:var(--r-klein)}
.schritt,.schritt:first-child,.schritt:last-child{border-radius:var(--r-karte)}
.kachel__icon{border-radius:18px}
.bildfeld,.abschluss,.suchdialog__box,.buehne,.kartenbox,.kopf__grafik>.gebiet,.kopf__grafik>.umriss{border-radius:30px}
.bildfeld__marke{border-radius:20px}
.hk-fuss__kacheln a{border-radius:22px}
.treffer{border-radius:22px}
.treffer a{border-radius:14px}
.filter{border-radius:var(--r-karte)}
input,select,textarea{border-radius:var(--r-feld)!important}
.suche__feld,.suche__feld input{border-radius:999px!important}
.filter input,.filter select{border-radius:var(--r-feld)!important}
.az a{border-radius:var(--r-feld)}
.balken__spur,.balken__bahn,.balken__fuell{border-radius:999px}
.skip{border-radius:14px}

/* Lange deutsche Komposita brechen, statt aus der Seite zu laufen
   (gemessen bei 320 px an "Verbraucherstreitbeilegung" im Impressum) */
h1,h2,h3,h4,.glasfeld__text,.kachel h3{overflow-wrap:break-word;hyphens:auto}
.text p,.text li{overflow-wrap:break-word}
.text a[href^="mailto:"],.text a[href^="tel:"]{overflow-wrap:anywhere}

/* Gebühren: Haftungshinweis direkt über Tabellen und Vergleichen, Kennzeichnung älterer Satzungen */
.gewaehr{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--leise);font-style:italic}
.reveal > .gewaehr:first-child{margin:0 0 12px}
.stand-alt{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#F3E3D3;color:#7A4A1E;font:600 12px/1.4 var(--sans);vertical-align:middle;white-space:nowrap}

/* Weiterführende Links in der Seitenspalte (lib/links.mjs) */
.linkliste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px}
.linkliste .quelle{white-space:nowrap}
/* Ab vier Kästen wird die Spalte höher als der Bildschirm: dann nicht haften,
   sonst sind die unteren Kästen erst am Ende des Inhalts zu sehen. */
.rand:has(> .kasten:nth-child(4)){position:static}