/* Energiegemeinschaft Region Liezen — öffentliche Website
   Farben aus dem Logo (Navy #223b51, Grün #5e983f); Grün dunkel #446d2d ist die
   farbtongleich abgedunkelte Fassung für Text auf Weiß (6,0:1). Alle Farben stehen
   NUR hier als Token — auch die Bezirkskarte (SVG) wird von hier eingefärbt.
   Regel (GF 17.09.): keine Farbliterale unterhalb von :root außer #fff, rgba(255,255,255,…) und
   rgba(23,42,59,…) (= Navy tief für Schleier und Verläufe). Neue Farbe = neues Token hier oben. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-bold.woff2") format("woff2");
}

:root {
  --navy: #223b51;
  --navy-tief: #172a3b;
  --gruen: #5e983f;
  --gruen-tief: #446d2d;
  --gruen-hell: #e6f0dd;
  --gruen-linie: #a9c497;
  --text: #142230;
  --mute: #41505e;          /* 8,3:1 auf Weiß */
  --line: #b3bfb8;          /* Karten, Abschnitte: 2,0:1 */
  --feld-linie: #6b7b74;    /* Rahmen von Eingabefeldern: 4,3:1 */
  --bg: #ffffff;
  --bg-alt: #e8eeea;
  --karte-aus: #d9e1dc;
  --karte-linie: #ffffff;
  --schatten: 0 1px 2px rgba(34, 59, 81, .06), 0 8px 24px -12px rgba(34, 59, 81, .18);
  --radius: 6px;
  --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23223b51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");   /* Chevron der Auswahlfelder, navy */
  --gutter: 1rem;
  --breite: 1140px;
  --kopf: 4.25rem;
  --fuss-bg: #172a3b;
  --flaeche-navy: #223b51;   /* Navy-Abschnitte (Kontakt-Aufruf, GEA-Anfrage) — bleibt auch im Dunkelmodus dunkel */
  --flaeche-gruen: #446d2d;  /* Grünes Band (Termine) — bleibt auch im Dunkelmodus dunkel */
  --navy-fest: #223b51;      /* Navy unabhängig vom Modus: Text auf hellen Knöpfen, die auf Navy stehen */
  --fuellung-navy: #223b51;  /* FLÄCHEN mit weißer Schrift: Knöpfe, Marken, Tooltips, Nummernkreise, TOP-Knopf.
                                Getrennt von --navy, weil --navy im Dunkelmodus zur Textfarbe wird (fast weiß)
                                und als Fläche unter weißer Schrift unlesbar wäre (GF 18.09.). */
  --fuellung-navy-tief: #172a3b; /* dieselbe Fläche im Hover */
  --fuellung-gruen: #446d2d; /* grüne Flächen mit weißer Schrift: Mitglied-werden-Knopf, Schalter, Haken im Kästchen */
  --karte-teil: #5e983f;     /* Bezirkskarte: Gründungsgemeinde (Fläche unter weißer Beschriftung) und Legendenkästchen */
  --karte-teil-hover: #446d2d; /* dieselbe Fläche im Hover; auch Hof der Beschriftung */
  --karte-aktiv: #223b51;      /* Gemeindeseite: die eigene Gemeinde (Navy) */
  --karte-aktiv-rand: #ffffff; /* ihr Hof */
  --karte-aktiv-text-hof: #223b51;
  --auf-farbe: #ffffff;      /* Text auf grünen Knöpfen */
  --auf-flaeche: #e8eef3;    /* Text auf Navy- und Grünflächen (Abschnitte, Fußzeile, Termine): 12:1 */
  --auf-flaeche-mute: #c8d3dc;   /* Nebentext dort: 8,5:1 */
  --gruen-auf-flaeche: #9ccb7e;  /* Grün-Akzent auf Navy (Kicker, Effektivpreis) und Knopf auf Navy mit --navy-fest-Schrift (6,2:1;
                                    das Markengrün mit weißer Schrift trug nur 3,5:1 — Befund 18.09.) */
  --fehler: #b4432f;         /* Formularfehler: Rahmen, Text (4,9:1 auf Weiß) */
  --fehler-hell: #fff8f7;    /* Formularfehler: Feldhintergrund */
  --fehler-flaeche: #fbeeeb; /* Formularfehler: Hinweiskasten */
}

/* Kontrast (Entscheidung GF 16.09.2026): Karten mit Schatten, Formularseiten auf grauem Grund mit
   weißen Abschnitten, kräftigere Feldrahmen, Einleitungen in Textfarbe. */
.karte, .beitritt .abschnitt, .ebene, .schritt, .news article, .login:not(.login--modal), .tarif, .gemeinde, .person,
.kennzahl, .portal-funktionen li { box-shadow: var(--schatten); }
.sec--erste:has(.formular) { background: var(--bg-alt); }
.formular input, .formular select, .formular textarea, .login input { border-width: 1.5px; }
.wahl-karte span { border-color: var(--line); }
.fortschritt li { color: var(--navy); background: var(--bg); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #dbe6f0;
    --select-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dbe6f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    --navy-tief: #ffffff;
    --gruen: #7db65c;
    --gruen-tief: #9ccb7e;
    --gruen-hell: #1c2a20;
    --gruen-linie: #2f4a2a;
    --text: #e3e9ee;
    --mute: #9fb0bf;
    --line: #2a3a49;
    --feld-linie: #5a6f82;
    --bg: #0f1a24;
    --bg-alt: #16232e;
    --karte-aus: #253544;
    --karte-linie: #0f1a24;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --fuss-bg: #0a1219;
    --flaeche-navy: #1b2f40;
    --flaeche-gruen: #2f5423;
    --fehler: #e07a66;
    --fehler-hell: #2b1a17;
    --fehler-flaeche: #2b1a17;
    --fuellung-navy: #4a7395;       /* weiß darauf 5,0:1, gegen --bg 3,5:1 */
    --fuellung-navy-tief: #3d6283;       /* Hover dunkler wie im Hellmodus; weiß 6,4:1 */
    --fuellung-gruen: #4a7a31;      /* weiß darauf 5,1:1, gegen --bg 3,5:1 */
    --karte-teil: #4a7a31;          /* weiß darauf 5,1:1; --gruen (#7db65c) trug nur 2,3:1 — Gemeindenamen unlesbar (GF 18.09.) */
    --karte-teil-hover: #5e983f;
    --karte-aktiv: #a9c497;      /* dunkel: helles Grün, hebt sich von Grau und Gründungsgrün ab */
    --karte-aktiv-rand: #ffffff;
    --karte-aktiv-text-hof: #172a3b;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; hyphens: auto; overflow-wrap: anywhere; }   /* „Geschäftsbedingungen“ lief bei 320 px über den Rand (WCAG 1.4.10) */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--gruen-tief); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 3px; border-radius: 2px; }
/* Sprunglink: erstes Element der Seite, sichtbar nur mit Tastaturfokus (WCAG 2.4.1) */
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .6rem 1rem; background: var(--fuellung-navy); color: var(--auf-farbe); font-weight: 700; border-radius: var(--radius); text-decoration: none; }
.skip:focus-visible { top: 1rem; outline-color: var(--auf-farbe); }
ul, ol { padding-left: 1.25rem; margin: 0 0 1em; }
li { margin: .25em 0; }
img, svg { max-width: 100%; height: auto; }
strong { font-weight: 700; }
small { font-size: .875rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--navy); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }

.wrap { width: min(100% - 2 * var(--gutter), var(--breite)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 1.25em; height: 1.25em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.ic--gross { width: 1.75rem; height: 1.75rem; }
.ic--gruen { color: var(--gruen-tief); }
.symbole { display: none; }

/* Abschnittsköpfe: Kicker in Grün, Titel in Navy, Einleitung gedämpft. */
.sec { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.sec--alt { background: var(--bg-alt); }
.sec--navy { background: var(--flaeche-navy); color: var(--auf-flaeche); }
.sec--navy h2, .sec--navy h3 { color: #fff; }
.sec--navy .kicker { color: var(--gruen-auf-flaeche); }
.sec--navy .lead { color: var(--auf-flaeche-mute); }
.sec-kopf { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-kopf--mitte { margin-inline: auto; text-align: center; }
.kicker { display: block; color: var(--gruen-tief); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
.lead { font-size: 1.125rem; color: var(--text); }
.rule { width: 4rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--gruen), var(--navy)); margin: 1.25rem 0 0; }
.sec-kopf--mitte .rule { margin-inline: auto; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .8rem 1.35rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; border: 1.5px solid transparent; line-height: 1.2; transition: background .15s, color .15s, border-color .15s; cursor: pointer; font: inherit; font-weight: 700; }
.btn--gruen { background: var(--fuellung-gruen); color: var(--auf-farbe); }
.btn--gruen:hover { background: var(--fuellung-navy); color: var(--auf-farbe); }
.btn--navy { background: var(--fuellung-navy); color: var(--auf-farbe); }
.btn--navy:hover { background: var(--fuellung-navy-tief); color: var(--auf-farbe); }
.btn--rahmen { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--rahmen:hover { background: var(--fuellung-navy); color: var(--auf-farbe); }
.btn--rahmen-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn--rahmen-hell:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn--hell { background: #fff; color: var(--navy-fest); }   /* feste Farben: steht auf Navy-Flächen, auch im Dunkelmodus */
.btn--hell:hover { background: var(--auf-flaeche); color: var(--navy-fest); }
.btn--klein { padding: .5rem .9rem; font-size: .9375rem; }
@media (max-width: 480px) { .btn:not(.btn--klein) { white-space: normal; text-align: center; } }

/* Karten und Raster */
.karte { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.karte--betont { border-color: var(--gruen-linie); background: var(--gruen-hell); }
.raster { display: grid; gap: 1.25rem; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.karte-ikon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); background: var(--gruen-hell); color: var(--gruen-tief); margin-bottom: 1rem; }
.karte :is(h3, .h3) { margin-bottom: .4rem; }
.karte ul { margin-bottom: 0; }
.haken { list-style: none; padding: 0; }
.haken li { padding-left: 1.6rem; position: relative; }
.haken li::before { content: ""; position: absolute; left: 0; top: .55em; width: .9rem; height: .5rem; border-left: 2px solid var(--gruen-tief); border-bottom: 2px solid var(--gruen-tief); transform: rotate(-45deg) translateY(-.15rem); }

.hinweis { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.15rem; border-left: 3px solid var(--gruen); background: var(--gruen-hell); border-radius: 0 var(--radius) var(--radius) 0; }
.hinweis .ic { color: var(--gruen-tief); margin-top: .2rem; }
.hinweis p { margin: 0; }
.hinweis--gea { border-left-style: dashed; }
.hinweis--gea a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; margin-top: .35rem; }
.hinweis--gea a .ic { width: 1em; height: 1em; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; }
.chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); font-size: .9375rem; color: var(--navy); }
.chips .ic { color: var(--gruen-tief); }
.chip--betont { background: var(--gruen-hell); border-color: var(--gruen-linie); font-weight: 700; }

.marke { display: inline-block; padding: .2rem .6rem; border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--fuellung-navy); color: var(--auf-farbe); }
.marke--gruen { background: var(--fuellung-gruen); }
.marke--hell { background: var(--gruen-hell); color: var(--gruen-tief); }

/* Rücksprung auf Unterseiten und Nach-oben-Knopf */
.zurueck { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; font-size: .9375rem; font-weight: 700; color: var(--gruen-tief); text-decoration: none; }
.zurueck:hover { color: var(--navy); }
.ic--zurueck { transform: scaleX(-1); }
.nach-oben { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--fuellung-navy); color: var(--auf-farbe); box-shadow: var(--schatten); text-decoration: none; }
.nach-oben:hover { background: var(--fuellung-gruen); color: var(--auf-farbe); }
.nach-oben .ic { transform: rotate(-90deg); width: 1.35rem; height: 1.35rem; }
/* Wo der Browser scrollgesteuerte Animationen kann, erscheint der Knopf erst nach dem ersten Bildschirm. */
@supports (animation-timeline: scroll()) {
  .nach-oben { opacity: 0; animation: nach-oben-einblenden linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  @keyframes nach-oben-einblenden { from { opacity: 0; visibility: hidden; } 10% { opacity: 0; } to { opacity: 1; visibility: visible; } }
}
@media print { .nach-oben, .zurueck { display: none; } }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.kopf .wrap { display: flex; align-items: center; gap: 1rem; height: var(--kopf); }
.kopf-logo { display: flex; align-items: center; margin-right: auto; flex: 0 0 auto; }
.kopf-logo img { height: 2.75rem; width: auto; max-width: none; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: .875rem; padding: .5rem .5rem; border-radius: 4px; white-space: nowrap; }
.nav a:hover { background: var(--bg-alt); color: var(--gruen-tief); }
.kopf-aktion { display: flex; align-items: center; gap: .6rem; }
.nav-schalter { display: none; }
.nav-mobil { display: none; }
.nav .nav-mobil .ic { margin-right: .4rem; color: var(--gruen-tief); }
/* WhatsApp in der Fußzeile: weißes Symbol, beim Überfahren WhatsApp-Grün */
.fuss-whatsapp a { display: inline-flex; padding: .15rem 0; color: #fff; }
.fuss-whatsapp .ic { width: 1.75rem; height: 1.75rem; stroke-width: 1.6; transition: color .15s; }
.fuss-whatsapp a:hover .ic, .fuss-whatsapp a:focus-visible .ic { color: #25d366; }
.nav-knopf { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--navy); align-items: center; justify-content: center; cursor: pointer; }
button.nav-knopf { padding: 0; font: inherit; }   /* site.js macht aus dem Label einen Knopf; Aussehen bleibt */
.nav-knopf svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }
.nav-knopf .zu { display: none; }

@media (max-width: 1200px) {
  .kopf .wrap { gap: .75rem; }
  .nav-knopf { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: var(--kopf); flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1rem; display: none; box-shadow: var(--schatten); }
  .nav a { padding: .8rem .5rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.0625rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav-schalter:checked ~ .nav { display: flex; }
  /* Länger als der Bildschirm (Handy quer, kleine Fenster): das Menü scrollt selbst, statt unter dem Rand zu enden —
     die Kopfzeile klebt, die Seite darunter würde sonst scrollen, das Menü nicht (GF 18.09.). dvh = ohne Browserleisten. */
  .nav { max-height: calc(100vh - var(--kopf)); max-height: calc(100dvh - var(--kopf)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav .nav-mobil { display: block; }
  .nav-schalter:checked ~ .nav-knopf .auf { display: none; }
  .nav-schalter:checked ~ .nav-knopf .zu { display: block; }
  /* Login bleibt neben „Mitglied werden“ sichtbar; erst am Handy wandert er ins Menü (dort als „Login – Mitgliederportal“) */
}
/* Sparrechner ist ein Knopf in der Kopfzeile (GF 17.09.); der Menüeintrag erscheint nur, wenn der Knopf am Handy keinen Platz hat */
.nav .nav-sparrechner { display: none; }
@media (max-width: 760px) {
  .kopf-sparrechner { display: none; }
  .nav .nav-sparrechner { display: block; }
}
@media (max-width: 560px) {
  .kopf-logo img { height: 2.25rem; }
  .kopf-aktion .btn { padding: .55rem .8rem; font-size: .875rem; }
  .kopf-aktion .btn--rahmen { display: none; }
}
/* Sehr schmal (320 px = Reflow-Grenze WCAG 1.4.10): das Logo schrumpft, statt den Menüknopf hinauszuschieben (Prüfung 18.09.) */
@media (max-width: 400px) {
  .kopf .wrap { gap: .5rem; }
  .kopf-logo { flex: 1 1 auto; min-width: 0; }
  .kopf-logo img { width: 100%; height: 2.25rem; object-fit: contain; object-position: left center; }
  .kopf-aktion .btn { padding: .5rem .6rem; font-size: .8125rem; }
  h1 { font-size: 1.75rem; }   /* „Geschäftsbedingungen“ (20 Zeichen) passt so in 288 px, ohne harten Umbruch */
}

/* ---------- Aufmacher ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero h1 span { color: var(--gruen-tief); }
.hero .lead { margin-bottom: 1.5rem; max-width: 34rem; }
.hero-aktionen, .knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; }   /* zwei Knöpfe nebeneinander: Flex statt Grundlinie, sonst versetzt das Symbol am Anfang den Knopf um 2 px */
.hero-karte { position: relative; }
.hero-karte svg { width: 100%; height: auto; display: block; }
.hero-legende { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--mute); }
.hero-legende li { display: flex; align-items: center; gap: .5rem; }
.hero-legende i { width: .9rem; height: .9rem; border-radius: 2px; background: var(--karte-aus); border: 1px solid var(--line); }
.hero-legende i.teil { background: var(--karte-teil); border-color: var(--karte-teil-hover); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-karte { order: -1; }
}

/* ---------- Tooltip ----------
   Ein Baustein für die ganze Seite, rein in CSS, ohne Verzug: sofort beim Überfahren, beim
   Fokus per Tastatur und beim Antippen (tabindex="0"). Zwei Bauarten mit demselben Aussehen:
   [data-tip] erzeugt den Kasten aus dem Attribut; .tip ist ein eigenes Element, verankert in
   Prozent (Karte). Navy-Kasten, Pfeil, kleine Schrift, kein Zeilenumbruch bis 18 rem. */
[data-tip] { position: relative; cursor: help; }
abbr[data-tip] { text-decoration: underline dotted; text-decoration-color: var(--gruen); text-underline-offset: 3px; }
[data-tip]::after, .tip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--fuellung-navy); color: var(--auf-farbe);
  padding: .45rem .7rem; border-radius: var(--radius); box-shadow: var(--schatten);
  font-size: .8125rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none;
  width: max-content; max-width: min(18rem, 80vw); white-space: normal; text-align: left;
  display: none;   /* nicht visibility: ein unsichtbarer Kasten zählt sonst als Überlauf → Scrollbalken */
}
[data-tip]::after { content: attr(data-tip); left: 50%; bottom: calc(100% + .55rem); transform: translateX(-50%); }
[data-tip]::before, .tip::after {
  content: ""; position: absolute; z-index: 31; pointer-events: none;
  border: .4rem solid transparent; border-top-color: var(--navy);
}
/* Der Pfeil von [data-tip] hängt am Element selbst und braucht eigenes Ein-/Ausblenden;
   der Pfeil von .tip ist Teil des Kastens und folgt dessen Deckkraft. */
[data-tip]::before { left: 50%; bottom: calc(100% - .2rem); transform: translateX(-50%); display: none; }
[data-tip]:hover::after, [data-tip]:hover::before, [data-tip]:focus::after, [data-tip]:focus::before { display: block; }
[data-tip].tip-aus::after, [data-tip].tip-aus::before, .bezirkskarte.tips-aus .tip { display: none; }   /* Esc (site.js), WCAG 1.4.13 */
.tip { transform: translate(-50%, calc(-100% - .7rem)); }
.tip::after { left: 50%; top: 100%; transform: translateX(-50%); }
.tip b { display: block; font-weight: 700; }
.tip--unten { transform: translate(-50%, .7rem); }
.tip--unten::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--navy); }
.tip--links { transform: translate(-12%, calc(-100% - .7rem)); }
.tip--links::after { left: 12%; }
.tip--rechts { transform: translate(-88%, calc(-100% - .7rem)); }
.tip--rechts::after { left: 88%; }
.tip--unten.tip--links { transform: translate(-12%, .7rem); }
.tip--unten.tip--rechts { transform: translate(-88%, .7rem); }

/* Erklärbilder — HTML + Inline-SVG-Piktogramme statt Bilddateien: Text bricht um, Farben folgen dem Dunkelmodus */
.grafik { margin: 2rem 0; }
.wrap > .grafik:first-child { margin-top: 0; }
.grafik figcaption { font-size: .9375rem; color: var(--mute); margin-top: .85rem; line-height: 1.55; max-width: 60rem; }
.piktogramm { width: 3.5rem; height: 3.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Drei Ebenen als ineinander liegende Rahmen */
.ring { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; background: var(--bg); min-width: 0; }
.ring--2 { background: var(--bg-alt); margin-top: .9rem; }
.ring--3 { background: var(--gruen-hell); border-color: var(--gruen-linie); margin-top: .9rem; }
.ring-kopf { display: flex; justify-content: space-between; gap: .5rem 1.5rem; align-items: baseline; flex-wrap: wrap; }
.ring-kopf > span:first-child { color: var(--mute); font-size: .9375rem; }
.ring-kopf b { display: inline-block; color: var(--navy); font-size: 1.0625rem; margin-right: .6rem; }
.ring-wert { white-space: nowrap; font-size: .8125rem; color: var(--mute); }
.ring-wert b { color: var(--gruen-tief); font-size: 1.25rem; margin-right: .4rem; }
.ring--gea { border: 2px dashed var(--gruen); background: transparent; margin-top: .9rem; }   /* optionale Ebene im Haus */
.ring-optional { display: inline-block; font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-tief); border: 1px solid var(--gruen-linie); border-radius: 999px; padding: .1rem .5rem; margin-right: .6rem; vertical-align: .1em; background: var(--bg); }
.ring-kern { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; background: var(--bg); border: 1px solid var(--gruen-linie); border-radius: var(--radius); }
.ring-kern .piktogramm { color: var(--gruen-tief); flex: 0 0 auto; }
.ring-kern b { display: block; color: var(--navy); }
.ring-kern small { display: block; color: var(--mute); font-size: .875rem; }
@media (max-width: 560px) { .ring { padding: .75rem .6rem .6rem; } .ring--2, .ring--3 { margin-top: .6rem; } }
/* Stromfluss Erzeuger → Netz → Verbraucher */
.fluss { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: stretch; }
.fluss-gruppe { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1rem; background: var(--bg); text-align: center; display: flex; flex-direction: column; }
.fluss-gruppe .fluss-titel { margin: 0 0 .85rem; font-weight: 700; line-height: 1.2; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); }
.fluss-gruppe--netz { background: var(--gruen-hell); border-color: var(--gruen-linie); }
.fluss-ikonen { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; flex: 1; align-items: flex-start; }
.fluss-ikon { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--navy); font-size: .875rem; font-weight: 700; }
.fluss-gruppe p { margin: .85rem 0 0; font-size: .9375rem; color: var(--mute); }
.fluss-pfeil { align-self: center; color: var(--gruen); display: flex; }
.fluss-pfeil svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .fluss { grid-template-columns: minmax(0, 1fr); } .fluss-pfeil { justify-self: center; transform: rotate(90deg); } }

/* Bezirkskarte: die Klassen stehen in assets/bezirkskarte.svg, die Farben hier.
   Die Tooltips liegen als HTML über der Grafik; Lage und Hover-Regel je Gemeinde schreibt
   skripte/website/bezirkskarte-bauen.py zwischen die Marker. */
.bezirkskarte { position: relative; }
.bezirkskarte .g { fill: var(--karte-aus); stroke: var(--karte-linie); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s; }
.bezirkskarte .g.teil { fill: var(--karte-teil); }
.bezirkskarte .g.teil:hover { fill: var(--karte-teil-hover); }
@media (max-width: 640px) { .bezirkskarte .labels { display: none; } }
/* KARTE:ANFANG (erzeugt) */
#tip-61253 { left: 62.4%; top: 36.6%; } .bezirkskarte:has(#g61253:hover) #tip-61253 { display: block; }
#tip-61254 { left: 16.9%; top: 69.2%; } .bezirkskarte:has(#g61254:hover) #tip-61254 { display: block; }
#tip-61203 { left: 39.7%; top: 53.9%; } .bezirkskarte:has(#g61203:hover) #tip-61203 { display: block; }
#tip-61204 { left: 14.4%; top: 19.4%; } .bezirkskarte:has(#g61204:hover) #tip-61204 { display: block; }
#tip-61205 { left: 72.3%; top: 9.4%; } .bezirkskarte:has(#g61205:hover) #tip-61205 { display: block; }
#tip-61206 { left: 51.1%; top: 31.9%; } .bezirkskarte:has(#g61206:hover) #tip-61206 { display: block; }
#tip-61207 { left: 14.2%; top: 35.0%; } .bezirkskarte:has(#g61207:hover) #tip-61207 { display: block; }
#tip-61255 { left: 23.9%; top: 39.7%; } .bezirkskarte:has(#g61255:hover) #tip-61255 { display: block; }
#tip-61256 { left: 63.7%; top: 54.8%; } .bezirkskarte:has(#g61256:hover) #tip-61256 { display: block; }
#tip-61215 { left: 23.4%; top: 21.6%; } .bezirkskarte:has(#g61215:hover) #tip-61215 { display: block; }
#tip-61213 { left: 17.9%; top: 55.0%; } .bezirkskarte:has(#g61213:hover) #tip-61213 { display: block; }
#tip-61217 { left: 13.0%; top: 66.4%; } .bezirkskarte:has(#g61217:hover) #tip-61217 { display: block; }
#tip-61257 { left: 36.7%; top: 69.7%; } .bezirkskarte:has(#g61257:hover) #tip-61257 { display: block; }
#tip-61258 { left: 77.4%; top: 23.0%; } .bezirkskarte:has(#g61258:hover) #tip-61258 { display: block; }
#tip-61222 { left: 43.8%; top: 45.8%; } .bezirkskarte:has(#g61222:hover) #tip-61222 { display: block; }
#tip-61259 { left: 43.3%; top: 32.1%; } .bezirkskarte:has(#g61259:hover) #tip-61259 { display: block; }
#tip-61260 { left: 20.5%; top: 72.4%; } .bezirkskarte:has(#g61260:hover) #tip-61260 { display: block; }
#tip-61261 { left: 25.4%; top: 54.7%; } .bezirkskarte:has(#g61261:hover) #tip-61261 { display: block; }
#tip-61236 { left: 6.4%; top: 63.4%; } .bezirkskarte:has(#g61236:hover) #tip-61236 { display: block; }
#tip-61263 { left: 48.7%; top: 57.2%; } .bezirkskarte:has(#g61263:hover) #tip-61263 { display: block; }
#tip-61264 { left: 64.7%; top: 18.4%; } .bezirkskarte:has(#g61264:hover) #tip-61264 { display: block; }
#tip-61265 { left: 8.6%; top: 82.5%; } .bezirkskarte:has(#g61265:hover) #tip-61265 { display: block; }
#tip-61243 { left: 48.3%; top: 41.2%; } .bezirkskarte:has(#g61243:hover) #tip-61243 { display: block; }
#tip-61267 { left: 32.6%; top: 40.2%; } .bezirkskarte:has(#g61267:hover) #tip-61267 { display: block; }
#tip-61266 { left: 26.4%; top: 83.7%; } .bezirkskarte:has(#g61266:hover) #tip-61266 { display: block; }
#tip-61247 { left: 57.5%; top: 53.7%; } .bezirkskarte:has(#g61247:hover) #tip-61247 { display: block; }
#tip-61251 { left: 90.4%; top: 18.3%; } .bezirkskarte:has(#g61251:hover) #tip-61251 { display: block; }
#tip-61252 { left: 34.1%; top: 40.3%; } .bezirkskarte:has(#g61252:hover) #tip-61252 { display: block; }
#tip-61262 { left: 29.9%; top: 63.0%; } .bezirkskarte:has(#g61262:hover) #tip-61262 { display: block; }
/* KARTE:ENDE */
.bezirkskarte .labels text { font: 700 21px "Lato", system-ui, sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--karte-teil-hover); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }

/* ---------- Kennzahlen ---------- */
.kennzahlen { padding: 0 0 clamp(2rem, 4vw, 3rem); background: var(--bg); }
.kennzahlen-rahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.kennzahl { padding: 1.5rem 1rem; text-align: center; border-right: 1px solid var(--line); }
.kennzahl:last-child { border-right: 0; }
.kennzahl b { display: block; font-size: 2rem; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl span { display: block; color: var(--mute); font-size: .9375rem; margin-top: .3rem; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 700px) {
  .kennzahlen-rahmen { grid-template-columns: minmax(0, 1fr); }
  .kennzahl { border-right: 0; border-bottom: 1px solid var(--line); }
  .kennzahl:last-child { border-bottom: 0; }
}

/* ---------- Nächste Termine: schmales farbiges Band vor dem Aufmacher ---------- */
.termine { background: var(--flaeche-gruen); color: #fff; padding: .6rem 0; }
.termine .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.termine-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-right: auto; }
.termine-kopf b { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.termine-kopf span { color: var(--auf-flaeche); font-size: .9375rem; }   /* --auf-flaeche-mute trug auf dem Grün nur 3,97:1 (Prüfung 18.09.) */
.termine-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.termine-liste li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .75rem; background: var(--bg); color: var(--gruen-tief); border-radius: 999px; font-size: .9375rem; white-space: nowrap; }
.termine-liste time { font-weight: 700; font-variant-numeric: tabular-nums; }
.termine-liste span { color: var(--navy); }

/* ---------- Fotoband ---------- */
.fotoband { position: relative; margin: 0 auto; }
.fotoband picture, .fotoband img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.fotoband figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(180deg, rgba(23, 42, 59, 0) 0%, rgba(23, 42, 59, .75) 100%); border-radius: 0 0 var(--radius) var(--radius); }
.fotoband figcaption span { color: #fff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(.9rem, 2.2vw, 1.25rem); }
/* Bildunterschrift unter dem Foto (Personen, Urheber) — kein Schleier, keine Versalien */
.fotoband figcaption.unterschrift { position: static; padding: .6rem 0 0; background: none; border-radius: 0; color: var(--mute); font-size: .8125rem; line-height: 1.5; }
/* hebt die Schleier-Regel für span auf (weiß, fett, Versalien) — sonst wäre der Urheber auf Weiß unsichtbar */
.fotoband figcaption.unterschrift .urheber { color: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: inherit; white-space: nowrap; }
.sec--erste { padding-top: clamp(2.5rem, 6vw, 4rem); }
.sec--erste .sec-kopf { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Handlungsaufruf auf Navy */
.cta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: center; }
.cta-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.cta-aktionen--links { justify-content: flex-start; }
.cta .btn--gruen { background: var(--gruen-auf-flaeche); color: var(--navy-fest); }
.cta .btn--gruen:hover { background: var(--auf-flaeche); color: var(--navy-fest); }   /* wie .btn--hell:hover — modusfeste Farben, weil der Knopf auf der modusfesten Navy-Fläche steht */
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } .cta-aktionen { justify-content: flex-start; } }
.chips--gemeinden li { padding: .5rem .9rem .5rem .6rem; }
.chips--gemeinden a, .gemeinde b a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.chips--gemeinden a:hover, .gemeinde b a:hover { color: var(--gruen-tief); text-decoration: underline; }
.chips--gemeinden .silhouette { width: 1.6rem; height: 1.6rem; fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 1.5; }
.hero-karte--gross { max-width: 62rem; margin: 0 auto; }

/* ---------- Aufbau (drei Ebenen) ---------- */
.ebenen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; counter-reset: ebene; }
.ebene { position: relative; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: grid; grid-template-rows: auto 1fr auto auto; }
.ebene p { margin: 0; }
/* Zeilen quer über alle Kacheln ausrichten: Titel, Text, Zahl, Fußzeile auf gleicher Höhe */
@supports (grid-template-rows: subgrid) { .ebene { grid-row: span 4; grid-template-rows: subgrid; } }
.ebene::before { counter-increment: ebene; content: counter(ebene); position: absolute; top: -.9rem; left: 1.25rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--fuellung-navy); color: var(--auf-farbe); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.ebene :is(h3, .h3) { margin: .25rem 0 .6rem; }
.ebene .stand { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--mute); white-space: nowrap; }
.ebene .stand .ic { color: var(--gruen-tief); }
.ebene .stand b { color: var(--navy); }
.ebene--betont { border-color: var(--gruen-linie); background: var(--gruen-hell); }
/* Preisliste (GEA): zweispaltig, Beträge rechts in Grün */
.preise { width: 100%; border-collapse: collapse; margin: .25rem 0 .75rem; }
.preise td { padding: .5rem 0; border-bottom: 1px solid var(--gruen-linie); vertical-align: top; font-size: .9375rem; }
.preise td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.preise td b { color: var(--gruen-tief); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.preise tr:last-child td { border-bottom: 0; }
.ebene-fakt { display: flex; align-items: baseline; gap: .6rem; margin-top: 1.25rem; }
.ebene-fakt b { font-size: 1.75rem; line-height: 1; color: var(--gruen-tief); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.ebene-fakt span { color: var(--mute); font-size: .9375rem; }

/* ---------- Vorteile ---------- */
.vorteil-zahlen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.vorteil-zahl { text-align: center; padding: 1rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--gruen-linie); }
.vorteil-zahl b { display: block; font-size: 2.25rem; color: var(--gruen-tief); line-height: 1; }
.vorteil-zahl span { display: block; font-size: .875rem; color: var(--mute); margin-top: .35rem; overflow-wrap: anywhere; hyphens: auto; }

/* ---------- Schritte ---------- */
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; counter-reset: schritt; }
.schritte--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }   /* vier Schritte in einer Reihe (GEA) */
.schritt { position: relative; padding: 1.5rem 1.5rem 1.5rem 4.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: 1.35rem; top: 1.45rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fuellung-gruen); color: var(--auf-farbe); font-weight: 700; display: grid; place-items: center; }
.schritt ul { padding-left: 1.1rem; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px; padding: .1em .4em; white-space: nowrap; }

/* Tabellenhülle (Impressum u. a.): waagrecht scrollbar, Kopf gedämpft */
.tabelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.tabelle thead th { background: var(--bg-alt); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }

/* ---------- Tarife ----------
   Schalter Privat/Unternehmen: zwei versteckte Radios vor dem Inhalt, Geschwister-Selektoren
   blenden .nur-privat / .nur-firma um — kein Skript nötig. */
.schalter-zeile { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.tarif-schalter { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: .25rem; background: var(--bg-alt); }
.netzebene-schalter { display: none; flex-wrap: wrap; align-items: center; gap: .25rem; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .25rem .25rem .9rem; background: var(--bg-alt); }
.netzebene-titel { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-right: .35rem; }
.netzebene-schalter label { padding: .4rem .8rem; border-radius: 999px; font-weight: 700; font-size: .875rem; color: var(--mute); cursor: pointer; white-space: nowrap; }
#kunde-firma:checked ~ .schalter-zeile .netzebene-schalter { display: inline-flex; }
#kunde-privat:checked ~ input[name="netzebene"] { visibility: hidden; }   /* sonst landet die Tastatur auf Radios ohne sichtbaren Knopf */
#ne-ne7n:focus-visible ~ .schalter-zeile label[for="ne-ne7n"], #ne-ne7g:focus-visible ~ .schalter-zeile label[for="ne-ne7g"], #ne-ne6:focus-visible ~ .schalter-zeile label[for="ne-ne6"],
#ne-ne5:focus-visible ~ .schalter-zeile label[for="ne-ne5"], #ne-ne4:focus-visible ~ .schalter-zeile label[for="ne-ne4"] { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
#ne-ne7n:checked ~ .schalter-zeile label[for="ne-ne7n"], #ne-ne7g:checked ~ .schalter-zeile label[for="ne-ne7g"], #ne-ne6:checked ~ .schalter-zeile label[for="ne-ne6"],
#ne-ne5:checked ~ .schalter-zeile label[for="ne-ne5"], #ne-ne4:checked ~ .schalter-zeile label[for="ne-ne4"] { background: var(--fuellung-gruen); color: var(--auf-farbe); }
/* Netzebenen-abhängige Werte: nur der gewählte Wert wird gezeigt, und nur bei Unternehmen */
.ne { display: none; }
#kunde-firma:checked ~ #ne-ne7n:checked ~ * .ne-ne7n, #kunde-firma:checked ~ #ne-ne7g:checked ~ * .ne-ne7g, #kunde-firma:checked ~ #ne-ne6:checked ~ * .ne-ne6,
#kunde-firma:checked ~ #ne-ne5:checked ~ * .ne-ne5, #kunde-firma:checked ~ #ne-ne4:checked ~ * .ne-ne4 { display: inline; }
.tarif-schalter label { padding: .5rem 1.25rem; border-radius: 999px; font-weight: 700; color: var(--mute); cursor: pointer; transition: background .15s, color .15s; }
#kunde-privat:checked ~ .schalter-zeile label[for="kunde-privat"],
#kunde-firma:checked ~ .schalter-zeile label[for="kunde-firma"] { background: var(--fuellung-navy); color: var(--auf-farbe); }
#kunde-privat:focus-visible ~ .schalter-zeile label[for="kunde-privat"],
#kunde-firma:focus-visible ~ .schalter-zeile label[for="kunde-firma"] { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
#kunde-privat:checked ~ * .nur-firma, #kunde-privat:checked ~ .nur-firma { display: none; }
#kunde-firma:checked ~ * .nur-privat, #kunde-firma:checked ~ .nur-privat { display: none; }

.tarif-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.tarif { position: relative; display: grid; grid-template-rows: auto auto auto auto auto auto; row-gap: .25rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
@supports (grid-template-rows: subgrid) { .tarif { grid-row: span 6; grid-template-rows: subgrid; } }
.tarif--betont { border-color: var(--gruen-linie); background: var(--gruen-hell); }
.tarif .marke { position: absolute; top: -.75rem; left: 1.25rem; }
.tarif :is(h3, .h3) { margin: 0; font-size: 1.25rem; }
.tarif > small { color: var(--mute); }
.tarif .preis { margin-top: 1rem; line-height: 1.1; }
.tarif .preis b { font-size: 2.5rem; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tarif .preis > span { color: var(--mute); font-weight: 700; }
.tarif .preis em { display: block; font-style: normal; color: var(--mute); font-size: .875rem; margin-top: .35rem; line-height: 1.3; }
.tarif .preis--klein { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.tarif .preis--klein b { font-size: 1.5rem; }
.tarif .ermaessigung { display: inline-block; justify-self: start; margin-top: 1rem; padding: .35rem .75rem; border-radius: 999px; background: var(--fuellung-gruen); color: var(--auf-farbe); font-weight: 700; font-size: .875rem; }
.tarif .ermaessigung--keine { background: var(--bg-alt); color: var(--mute); border: 1px solid var(--line); }
#kunde-firma:checked ~ #ne-ne6:checked ~ * .ermaessigung:has(.nein.ne-ne6), #kunde-firma:checked ~ #ne-ne5:checked ~ * .ermaessigung:has(.nein.ne-ne5),
#kunde-firma:checked ~ #ne-ne4:checked ~ * .ermaessigung:has(.nein.ne-ne4) { background: var(--bg-alt); color: var(--mute); border: 1px solid var(--line); }
.tarif .effektiv { margin-top: 1.1rem; padding: .9rem 1rem 1rem; border-radius: var(--radius); background: var(--flaeche-navy); color: var(--auf-flaeche); line-height: 1.1; align-self: end; }
.tarif .effektiv em { display: block; font-style: normal; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--auf-flaeche-mute); margin-bottom: .6rem; }
.tarif .effektiv em small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--auf-flaeche-mute); font-size: .8125rem; margin-top: .2rem; line-height: 1.3; }
.tarif .effektiv b { font-size: 2.5rem; color: var(--gruen-auf-flaeche); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tarif .effektiv > span { color: var(--auf-flaeche); font-weight: 700; }
.tarif .effektiv > small { display: block; color: var(--auf-flaeche-mute); font-size: .8125rem; margin-top: .4rem; }
.tarif .effektiv .effektiv-nein { display: none; font-size: .9375rem; line-height: 1.4; color: var(--auf-flaeche); }
#kunde-firma:checked ~ #ne-ne6:checked ~ * .effektiv-nein.ne-ne6, #kunde-firma:checked ~ #ne-ne5:checked ~ * .effektiv-nein.ne-ne5, #kunde-firma:checked ~ #ne-ne4:checked ~ * .effektiv-nein.ne-ne4 { display: block; }
.tarif .effektiv span b { font-size: 2.5rem; color: var(--gruen-auf-flaeche); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tarif .effektiv span > span { color: var(--auf-flaeche); font-weight: 700; }
.quelle { display: block; margin-top: .4rem; font-size: .8125rem; }
/* Kurzfassung auf der Startseite: Titel · effektiver Preis · eine Zeile · Ermäßigung */
.tarif-kacheln--kompakt .tarif { grid-template-rows: auto auto auto auto auto; }
@supports (grid-template-rows: subgrid) { .tarif-kacheln--kompakt .tarif { grid-row: span 5; } }
.tarif-kacheln--kompakt .effektiv { margin-top: 1rem; align-self: start; }
.tarif-zeile { margin: .9rem 0 0; font-size: .9375rem; color: var(--mute); }
.tarif-zeile b { color: var(--navy); }
.tarif-kacheln--kompakt .ermaessigung { align-self: end; }
.tarif-punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.tarif-punkte li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.tarif-punkte .ic { color: var(--gruen-tief); margin-top: .25rem; }
.tarif-punkte strong { color: var(--navy); }

/* ---------- Gemeinden ----------
   Fünf Zeilen je Kachel — Silhouette · Name · Typ · Vertretung · Funktion — über subgrid quer
   ausgerichtet, damit lange Namen die Nachbarn nicht verschieben. */
.gemeinden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.gemeinde { display: grid; grid-template-rows: auto auto auto auto auto; row-gap: .15rem; margin: 0; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); border-top: 3px solid var(--gruen); text-align: center; }
@supports (grid-template-rows: subgrid) { .gemeinde { grid-row: span 5; grid-template-rows: subgrid; } }
.gemeinde .silhouette { display: block; width: 6rem; height: 6rem; margin: 0 auto .75rem; fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 1.2; stroke-linejoin: round; }
.gemeinde b { display: block; color: var(--navy); font-size: 1.05rem; line-height: 1.25; }
.gemeinde small { display: block; color: var(--mute); }
.gemeinde .vertretung { display: block; margin-top: .75rem; font-size: .9375rem; line-height: 1.35; }
.gemeinde .funktion { font-size: .8125rem; align-self: start; }
.gemeinde-mehr { display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem; font-size: .875rem; font-weight: 700; color: var(--gruen-tief); }
.gemeinde-mehr .ic { width: 1em; height: 1em; }
/* Gemeindeseiten /gemeinden/<kennung> (20.09.2026): Faktenkasten links, Text rechts; Karte mit hervorgehobener Gemeinde */
.gemeinde-seite { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .gemeinde-seite { grid-template-columns: minmax(0, 1fr); } }
.gemeinde-fakten { position: sticky; top: 5.5rem; }
@media (max-width: 860px) { .gemeinde-fakten { position: static; } }
.gemeinde-fakten .silhouette { display: block; width: 7rem; height: 7rem; margin: 0 auto .75rem; fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 1.2; stroke-linejoin: round; }
.gemeinde-fakten h2 { text-align: center; margin: 0 0 1rem; }
.gemeinde-fakten dl { margin: 0; display: grid; gap: .65rem; }
.gemeinde-fakten dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.gemeinde-fakten dd { margin: .1rem 0 0; color: var(--text); line-height: 1.45; }
.gemeinde-text > h2:first-child { margin-top: 0; }
.termine-ort { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.termine-ort li { padding: .75rem 1rem; border-left: 3px solid var(--gruen); background: var(--gruen-hell); border-radius: 0 var(--radius) var(--radius) 0; }
.termine-ort time { font-weight: 700; color: var(--navy); margin-right: .35rem; }
.chips--alle li.aktiv { background: var(--gruen-hell); border-color: var(--gruen-linie); font-weight: 700; }
.chips--alle a[aria-current="page"] { color: var(--gruen-tief); }
/* Die eigene Gemeinde: Navy-Fläche (dunkel: helles Grün) mit weißem Hof, der über den Nachbarn liegt (paint-order + zuletzt
   gezeichnet, siehe karte_verlinkt), Name in Weiß mit Navy-Hof — auch auf hellem Grund lesbar. Hover ändert sie nicht mehr. */
.bezirkskarte .g.aktiv, .bezirkskarte--links a:hover .g.aktiv { fill: var(--karte-aktiv); stroke: var(--karte-aktiv-rand); stroke-width: 6; paint-order: stroke; }
.bezirkskarte .labels text.aktiv { fill: #fff; stroke: var(--karte-aktiv-text-hof); font-size: 24px; }
.bezirkskarte--links a { cursor: pointer; }
.bezirkskarte--links a:hover .g:not(.teil), .bezirkskarte--links a:focus-visible .g:not(.teil) { fill: var(--gruen-linie); }
.bezirkskarte--links a:focus-visible { outline: none; }
.bezirkskarte--links a:focus-visible .g { stroke: var(--gruen-tief); stroke-width: 2.5; }

/* ---------- Vorstand ----------
   Funktionsträger: vier Zeilen (Silhouette der Gemeinde · Funktion · Name · Gemeinde) über
   subgrid quer ausgerichtet, gleiche Bauart wie die Gemeindekacheln. */
.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.person { display: grid; grid-template-rows: auto auto auto auto; row-gap: .3rem; margin: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); border-top: 3px solid var(--navy); }
@supports (grid-template-rows: subgrid) { .person { grid-row: span 4; grid-template-rows: subgrid; } }
.person .silhouette { display: block; width: 3.75rem; height: 3.75rem; margin-bottom: .6rem; fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 1.2; stroke-linejoin: round; }
.person .funktion { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-tief); }
.person :is(h3, .h3) { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.person p { margin: 0; color: var(--mute); font-size: .9375rem; align-self: start; }
.liste-2 { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.liste-2 li { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.liste-2 li span { display: block; color: var(--mute); font-size: .875rem; }
@media (max-width: 600px) { .liste-2 { columns: 1; } }

/* ---------- Aktuelles ---------- */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.news li { display: flex; margin: 0; }
.news article { flex: 1; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: flex; flex-direction: column; }
.news time { font-size: .875rem; color: var(--gruen-tief); font-weight: 700; }
.news :is(h3, .h3) { margin: .5rem 0 .5rem; font-size: 1.1rem; }
.news p { color: var(--mute); font-size: .9375rem; flex: 1; }
.news :is(h3, .h3) a { color: var(--navy); text-decoration: none; }
.news :is(h3, .h3) a:hover { color: var(--gruen-tief); text-decoration: underline; }
.news .weiter { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .9375rem; margin-top: .75rem; text-decoration: none; }
.news .weiter:hover { text-decoration: underline; }
.news .weiter .ic { width: 1em; height: 1em; }
/* Volltext einer Meldung */
.text { max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; }
.text p { margin: 0 0 1rem; }
.text p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-gruppe { margin-bottom: 2.5rem; }
.faq-gruppe :is(h3, .h3) { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.faq-gruppe :is(h3, .h3) .ic { color: var(--gruen-tief); }
details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); margin-bottom: .6rem; }
details[open] { border-color: var(--gruen-linie); }
summary { cursor: pointer; padding: .9rem 3rem .9rem 1.15rem; font-weight: 700; color: var(--navy); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 1.15rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--gruen-tief); border-bottom: 2px solid var(--gruen-tief); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details .antwort { padding: 0 1.15rem 1.15rem; color: var(--text); }
details .antwort p:last-child, details .antwort ul:last-child, details .antwort ol:last-child { margin-bottom: 0; }

/* ---------- Portal ---------- */
.portal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: stretch; }   /* beide Spalten gleich hoch */
.portal-funktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); grid-auto-rows: 1fr; gap: 1rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 901px) { .portal-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* zwei Spalten, drei Reihen: so hoch wie die Anmeldung */
.portal-funktionen li { padding: 1.1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: .9375rem; }
.login-hilfe { margin: 1rem 0 0; font-size: .9375rem; text-align: center; }
.login[aria-disabled="true"] .login-hilfe a { pointer-events: auto; opacity: 1; }
.modal.modal--ziel { display: none; }          /* doppelte Klasse: muss die spätere .modal-Regel (display: grid) schlagen */
.modal.modal--ziel:target { display: grid; }
@media (max-width: 700px) { .modal.modal--ziel:target { display: block; } }
.modal-inhalt--schmal { width: min(100%, 30rem); }
.modal--text .modal-inhalt { width: min(100%, 52rem); }
/* Rechtstexte (Datenschutzerklärung): ruhige Lesespalte, Zwischenüberschriften, Stand-Zeile */
.rechtstext { max-width: 52rem; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext :is(h3, .h3) { margin: 1.75rem 0 .5rem; font-size: 1.2rem; }
.rechtstext :is(h4, .h4) { margin: 1.1rem 0 .35rem; font-size: 1rem; color: var(--navy); }
.rechtstext p, .rechtstext li { font-size: .9375rem; line-height: 1.6; }
.rechtstext ul { padding-left: 1.25rem; margin: .25rem 0 .75rem; }
.rechtstext li { margin: .2rem 0; }
.rechtstext-stand { color: var(--mute); font-size: .875rem !important; }
.rechtstext-stand a { display: inline-flex; align-items: center; gap: .3rem; }
.rechtstext-stand .ic { width: 1em; height: 1em; }
.modal--text .rechtstext :is(h3, .h3):first-of-type { margin-top: .5rem; }
.modal-zu { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.modal .login--modal { border: 0; padding: 0; background: transparent; box-shadow: none; }
.modal .login--modal .fussnote { margin-bottom: .25rem; }
.portal-funktionen b { display: flex; align-items: center; gap: .5rem; color: var(--navy); margin-bottom: .25rem; }
.portal-funktionen .ic { color: var(--gruen-tief); }
.login { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 1.5rem; }
.login label { display: block; font-weight: 700; color: var(--navy); font-size: .9375rem; margin: .75rem 0 .3rem; }
.login input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--feld-linie); border-radius: var(--radius); font: inherit; background: var(--bg-alt); color: var(--text); }
.login .btn { width: 100%; justify-content: center; margin-top: 1rem; }
.login[aria-disabled="true"] input, .login[aria-disabled="true"] .btn { opacity: .55; pointer-events: none; }
@media (max-width: 860px) { .portal { grid-template-columns: 1fr; } }

/* ---------- Formular (Beitrittsanfrage) ---------- */
.formular-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .formular-raster { grid-template-columns: 1fr; } }
.formular label { display: block; font-weight: 700; color: var(--navy); font-size: .9375rem; margin-bottom: 1.15rem; }
.formular label small { display: block; font-weight: 400; color: var(--mute); margin: .1rem 0 .3rem; }
.formular label small.feld-info, .formular label small.iban-stand { margin: .3rem 0 0; font-size: .8125rem; line-height: 1.5; }   /* Hinweis unter dem Feld, gleiche Zeile wie .iban-stand daneben */
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="date"], .formular input[type="number"], .formular textarea { width: 100%; margin-top: .3rem; padding: .7rem .8rem; border: 1px solid var(--feld-linie); border-radius: var(--radius); font: inherit; font-weight: 400; background: var(--bg); color: var(--text); }
/* Alle einzeiligen Felder gleich hoch — ein <select> ist sonst höher als ein <input> mit gleichem Padding */
.formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .formular select, .login input, .modal input:not([type="checkbox"]):not([type="radio"]) { height: 2.9rem; line-height: 1.3; }
.formular select, .modal select { padding-top: 0; padding-bottom: 0; padding-right: 2.75rem; appearance: none; -webkit-appearance: none;
  background-image: var(--select-pfeil); background-repeat: no-repeat; background-position: right .95rem center; background-size: 1rem; cursor: pointer;
  text-overflow: ellipsis; transition: border-color .12s, box-shadow .12s; }
.formular select:hover:not(:disabled), .modal select:hover:not(:disabled) { border-color: var(--gruen-tief); }
.formular select:focus-visible, .modal select:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen-tief) 18%, transparent); }
.formular select option, .modal select option { font-weight: 400; color: var(--text); background: var(--bg); padding: .45rem .6rem; }
.formular select option:checked { font-weight: 700; }
.formular input[type="date"] { display: block; }
.formular input:focus-visible, .formular textarea:focus-visible, .formular select:focus-visible, .modal input:focus-visible, .login input:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 1px; border-color: var(--gruen-tief); }
.formular .code-feld { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.formular label + label, .feld-zeile + .feld-zeile, .feld-zeile + label, label + .feld-zeile { margin-top: .25rem; }
.formular .feld-zeile > label { margin-top: 0; }   /* nebeneinander liegende Etiketten bleiben auf einer Höhe */
.feld-zeile { row-gap: .25rem; }
.feld-zeile--plz { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
@media (max-width: 560px) { .feld-zeile { grid-template-columns: 1fr; } }
.formular fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem .25rem; margin: 0 0 1rem; }
.formular legend { font-weight: 700; color: var(--navy); font-size: .9375rem; padding: 0 .4rem; }
.formular .wahl { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--text); margin-bottom: .6rem; min-width: 0; }   /* Text immer in einem <span>: jedes weitere Kind würde zur eigenen Spalte */
.formular .wahl > span { min-width: 0; }
.beginn-block { padding: .8rem 1rem .2rem; border: 1.5px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; }   /* Beginn der Teilnahme / Rücktritt (Verbraucher) */
.beginn-block.feld-fehler { border-color: var(--fehler); background: var(--fehler-hell); }
.formular .wahl input { margin-top: .15rem; }
.formular input[type="checkbox"], .formular input[type="radio"], .modal input[type="checkbox"], .modal input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: 0; padding: 0; border: 1.5px solid var(--feld-linie);
  border-radius: 4px; background: var(--bg); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, border-color .12s; vertical-align: -.25em; }
.formular input[type="radio"], .modal input[type="radio"] { border-radius: 50%; }
.formular input[type="checkbox"]:checked, .formular input[type="radio"]:checked, .modal input[type="checkbox"]:checked, .modal input[type="radio"]:checked { background: var(--fuellung-gruen); border-color: var(--fuellung-gruen); }
.formular input[type="checkbox"]::after, .modal input[type="checkbox"]::after { content: ""; width: .35rem; height: .65rem; margin-top: -.15rem; border: solid var(--auf-farbe); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .12s; }
.formular input[type="checkbox"]:checked::after, .modal input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.formular input[type="radio"]::after, .modal input[type="radio"]::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--auf-farbe); transform: scale(0); transition: transform .12s; }
.formular input[type="radio"]:checked::after, .modal input[type="radio"]:checked::after { transform: scale(1); }
.formular input[type="checkbox"]:focus-visible, .formular input[type="radio"]:focus-visible, .modal input[type="checkbox"]:focus-visible, .modal input[type="radio"]:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.formular .wahl:hover input:not(:checked), .modal .wahl:hover input:not(:checked) { border-color: var(--gruen-tief); }
.pflicht { color: var(--gruen-tief); }
.formular .hp, .hp { display: none !important; }   /* Honigtopf — muss auch gegen .formular label gewinnen */
.hinweis--fehler { border-left-color: var(--fehler); background: var(--fehler-flaeche); }
.ablauf { padding-left: 1.25rem; margin: 0; }
.ablauf li { margin: .5rem 0; }
.h3 { font-size: 1.2rem; }
.h4 { font-size: 1.05rem; }
.fussnote { font-size: .875rem; color: var(--mute); line-height: 1.5; }   /* Kleingedrucktes unter Kacheln, Formularen, Preisen */

/* ---------- Beitrittserklärung: Fortschritt, Abschnitte, Mitgliedsart, Zählpunkte, Fenster ---------- */
.fortschritt { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: none; }
.fortschritt li { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .4rem; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--mute); background: var(--bg); }
.fortschritt li b { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); color: var(--navy); font-size: .8125rem; }
.fortschritt li.fertig { border-color: var(--gruen-linie); color: var(--gruen-tief); background: var(--gruen-hell); }
.fortschritt li.fertig b { background: var(--fuellung-gruen); color: var(--auf-farbe); }
.beitritt fieldset { min-inline-size: 0; }   /* sonst so breit wie der breiteste Inhalt, unabhängig vom Fenster */
.beitritt .abschnitt { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem 1rem; margin: 0 0 1.25rem; background: var(--bg); }
.beitritt .abschnitt.fertig { border-color: var(--gruen-linie); }
.beitritt .abschnitt.feld-fehler-rahmen { border-color: var(--fehler); }
.beitritt .abschnitt > legend { float: left; width: 100%; display: flex; align-items: center; gap: .75rem; font-size: 1.35rem; font-weight: 700; color: var(--navy); padding: 0 0 .75rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }   /* float macht die Legende zur normalen Überschrift im Kasten, der Rahmen bleibt geschlossen */
.beitritt .abschnitt > legend + * { clear: both; }
.beitritt .abschnitt > legend b { width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--fuellung-navy); color: var(--auf-farbe); font-size: .95rem; }
.beitritt .abschnitt.fertig > legend b { background: var(--fuellung-gruen); }
.beitritt fieldset.unter { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem .25rem; margin: 0 0 1rem; }
.beitritt fieldset.unter legend { font-weight: 700; color: var(--navy); font-size: .9375rem; padding: 0 .4rem; }
.formular select { width: 100%; margin-top: .3rem; padding: .7rem .8rem; border: 1px solid var(--feld-linie); border-radius: var(--radius); font: inherit; font-weight: 400; background-color: var(--bg); color: var(--text); }   /* background-color, nicht background – sonst fällt der Chevron (--select-pfeil, weiter oben) weg */
.feld-zeile--3 { grid-template-columns: 1fr 1fr 1fr; }
.feld-zeile--strasse { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 700px) { .feld-zeile--3, .feld-zeile--strasse { grid-template-columns: 1fr; } }
.formular .feld-fehler input, .formular .feld-fehler select, .feld-fehler input, .feld-fehler select { border-color: var(--fehler); background-color: var(--fehler-hell); }
.mitgliedsart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.mitgliedsart--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .75rem; }
@media (max-width: 640px) { .mitgliedsart { grid-template-columns: 1fr; } }
.wahl-karte { position: relative; display: block; margin: 0; font-weight: 400; }
.wahl-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-karte span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.wahl-karte span .ic { grid-row: 1 / 3; width: 1.6rem; height: 1.6rem; color: var(--gruen-tief); }
.wahl-karte span b { color: var(--navy); }
.wahl-karte span small { color: var(--mute); }
.wahl-karte input:checked + span { border-color: var(--gruen-tief); background: var(--gruen-hell); box-shadow: inset 0 0 0 1px var(--gruen-tief); }
.wahl-karte input:focus-visible + span { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.iban-stand { display: block; min-height: 1.5em; line-height: 1.5; font-size: .8125rem; font-weight: 400; color: var(--mute); margin-top: .3rem; }
.iban-stand.ok { color: var(--gruen-tief); }
.iban-stand.nein { color: var(--fehler); font-weight: 700; }
/* Blöcke im Zählpunkt-Modal: Kopfzeile mit Titel (und Knopf rechts), Trennlinie, darunter die Felder */
.modal .block { padding: 1rem 0 .25rem; border-top: 1px solid var(--line); }
.modal .block:first-of-type { border-top: 0; padding-top: 0; }
.modal .block-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.modal .block-kopf h4 { margin: 0; font-size: 1rem; color: var(--navy); }
.modal .mitgliedsart { margin-bottom: .5rem; }
.modal-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
/* Felder nebeneinander: Etikett oben bündig, Eingabefeld unten bündig – auch bei ungleich langen Untertiteln */
.feld-zeile > label { display: flex; flex-direction: column; gap: .3rem; }
.feld-zeile > label > small { margin: 0; }
.formular .feld-zeile > label > input, .formular .feld-zeile > label > select, .formular .feld-zeile > label > textarea { margin-top: auto; }   /* Feld nach unten, Titel bleibt oben */
.feld-zeile > label > .iban-stand, .feld-zeile > label > .feld-info { margin-top: 0; }
/* Feld mit Statushaken: gültig → grüner Rahmen und Haken rechts im Feld, kein Text */
.feld-status { position: relative; display: block; }
.feld-status > .ic { display: none; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--gruen-tief); stroke-width: 2.5; pointer-events: none; }
.feld-status.ok > .ic { display: block; }
.formular .feld-status.ok > input { border-color: var(--gruen-tief); padding-right: 2.6rem; }
/* Schieberegler (Teilnahmefaktor): Regler in Grün, Wert rechts als Abzeichen */
.regler { display: flex; align-items: center; gap: .75rem; margin: -.5rem 0 1rem; }
.regler input[type="range"] { flex: 1; min-width: 0; height: 2.75rem; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; touch-action: pan-y; cursor: pointer; }
/* Schiene und großer Griff (Fingerziel ≥ 44 px), je Browser-Familie getrennt */
.regler input[type="range"]::-webkit-slider-runnable-track { height: .5rem; border-radius: 999px; background: var(--karte-aus); }
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -.625rem; border-radius: 50%; background: var(--gruen-tief); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--gruen-tief); }
.regler input[type="range"]::-moz-range-track { height: .5rem; border-radius: 999px; background: var(--karte-aus); }
.regler input[type="range"]::-moz-range-progress { height: .5rem; border-radius: 999px; background: var(--gruen-tief); }
.regler input[type="range"]::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--gruen-tief); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--gruen-tief); }
.regler input[type="range"]:focus-visible { outline: none; }
.regler input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gruen); }
.regler input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--gruen); }
.regler-knopf { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border: 1.5px solid var(--feld-linie); border-radius: 50%; background: var(--bg); color: var(--navy); font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.regler-knopf:hover { border-color: var(--gruen-tief); color: var(--gruen-tief); }
.regler-knopf:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
.regler output { min-width: 4rem; text-align: center; padding: .45rem .6rem; border-radius: var(--radius); background: var(--gruen-hell); border: 1.5px solid var(--gruen-linie); color: var(--gruen-tief); font-weight: 700; font-variant-numeric: tabular-nums; }
.formular label.wahl-karte { margin: 0; }   /* im Kartenraster kein Abstand nach oben – sonst ist die erste Karte höher als die anderen */
/* Karten-Modal (Verortung): Karte füllt die Höhe, Markierung verschiebbar */
.modal-inhalt--karte { width: min(100%, 52rem); }
.karte-feld { height: min(60vh, 34rem); min-height: 18rem; border: 1px solid var(--line); border-radius: var(--radius); margin: .75rem 0 1rem; background: var(--bg-alt); }
.karte-hinweis { margin: 0; font-size: .9375rem; }
.karte-hinweis b { color: var(--navy); }
.modal--karte .modal-aktionen { margin-top: 0; }
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--gruen-tief); }
@media (max-width: 700px) { .karte-feld { height: calc(100vh - 17rem); } }
.zp-adresse { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.zp-ok { width: 1.1em; height: 1.1em; color: var(--gruen-tief); stroke-width: 2.5; vertical-align: -.15em; flex: 0 0 auto; }
.zp-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.zp-leer { padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--mute); font-size: .9375rem; }
.zp-karte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--gruen-linie); border-left: 4px solid var(--gruen); border-radius: var(--radius); background: var(--gruen-hell); }
.zp-karte b { display: block; color: var(--navy); }
.zp-karte .code { display: inline-block; margin: .2rem 0; }
.zp-karte small { display: block; color: var(--mute); }
.zp-aktionen { display: flex; gap: .4rem; }

/* Modal: der Kasten selbst scrollt, der Kopf mit dem Schließen-Kreuz bleibt oben stehen */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(23, 42, 59, .55); display: grid; place-items: start center; overflow: hidden; padding: 2rem 1rem; }
.modal-inhalt { width: min(100%, 44rem); max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: var(--radius); box-shadow: var(--schatten); padding: 0 1.5rem 1.5rem; }
.modal-kopf { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 1.25rem 0 .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .modal { padding: 0; display: block; } .modal-inhalt { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; padding: 0 var(--gutter) 2rem; } }   /* Vollbild: Kasten scrollt, Kopf bleibt oben */
.modal-kopf { display: flex; justify-content: space-between; align-items: center; }
.modal-kopf h3 { margin: 0; }
.modal-zu { border: 0; background: var(--bg-alt); color: var(--navy); width: 2.25rem; height: 2.25rem; border-radius: 50%; padding: 0; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.modal-zu .ic--x { width: 1.1rem; height: 1.1rem; stroke-width: 2.25; vertical-align: 0; }
.modal .hinweis { margin-top: 1rem; }
body.modal-offen { overflow: hidden; }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.kontakt-seite .kontakt { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } .kontakt-seite .kontakt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } }
.formular .feld-fehler textarea, .feld-fehler textarea { border-color: var(--fehler); background: var(--fehler-hell); }
.feld-fehler .etikett { color: var(--fehler); }
.regler.feld-fehler output { border-color: var(--fehler); background: var(--fehler-hell); color: var(--fehler); }
.zp-liste.feld-fehler .zp-leer { border-color: var(--fehler); color: var(--fehler); background: var(--fehler-hell); }
.formular .wahl.feld-fehler input:not(:checked) { border-color: var(--fehler); background: var(--fehler-hell); }
.formular .wahl.feld-fehler span { color: var(--fehler); }
.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.kontakt address { font-style: normal; }
.kontakt .karte :is(h3, .h3) { display: flex; align-items: center; gap: .6rem; }
.kontakt .karte :is(h3, .h3) .ic { color: var(--gruen-tief); }
.kontakt a { word-break: break-word; }
.kontakt ul { list-style: none; padding: 0; margin: 0; }
.kontakt li { padding: .35rem 0; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--fuss-bg); color: var(--auf-flaeche-mute); padding: 3.5rem 0 2rem; font-size: .9375rem; }
.fuss .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.fuss h2 { color: #fff; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: .35rem 0; }
.fuss a { color: var(--auf-flaeche); text-decoration: none; }
.fuss-unten a { text-decoration: underline; text-underline-offset: 2px; }   /* Link im Fließtext: nicht nur über Farbe erkennbar (WCAG 1.4.1) */
.fuss a:hover { color: var(--gruen-auf-flaeche); }
.fuss-logo img { width: 15rem; max-width: 100%; height: auto; margin-bottom: 1rem; }
.fuss-claim { color: var(--gruen-auf-flaeche); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8125rem; }
.fuss .wrap.fuss-unten { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .875rem; color: var(--auf-flaeche-mute); }
@media (max-width: 860px) { .fuss .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss .wrap { grid-template-columns: 1fr; } }

/* ---------- Unterseiten (Impressum) ---------- */
.seite { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.seite .wrap { max-width: 48rem; }
.seite h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.seite h2:first-of-type { margin-top: 0; }
.seite :is(h3, .h3) { margin-top: 1.5rem; }
.tabelle td.leer { color: var(--mute); font-style: italic; }
@media (max-width: 700px) {   /* Tabelle als Karten statt Querscrollen: Zeile = Kasten, Spaltenname vor dem Wert */
  .tabelle { overflow: visible; border: 0; background: transparent; }
  .tabelle table, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: .5rem .9rem; margin-bottom: .6rem; box-shadow: var(--schatten); }
  .tabelle td { border: 0; padding: .3rem 0; }
  .tabelle td[data-l]::before { content: attr(data-l); display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
  .tabelle td.leer { padding: .5rem 0; }
}
.seite table { font-size: .9375rem; }
.seite .karte { margin: 1rem 0; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
dl.daten dt { color: var(--mute); }
dl.daten dd { margin: 0; }
@media (max-width: 520px) { dl.daten { grid-template-columns: 1fr; gap: 0; } dl.daten dd { margin-bottom: .6rem; } }

/* ---------- Platzhalter für dynamische Inhalte ----------
   Elemente mit data-dyn="…" werden später vom Betriebssystem befüllt. Sie sehen
   heute aus wie alles andere; nur [hidden] blendet aus, was noch keine Daten hat. */
[hidden] { display: none !important; }

/* Abstände als Klassen — Inline-Stile lässt die CSP (style-src 'self') nicht zu. */
.m-0 { margin: 0; }
.mt-1 { margin-top: 1.25rem; }
.mt-2 { margin-top: 1.5rem; }
.chips.mt-2 { margin-bottom: 0; }
.mt-3 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 1.25rem; }
.mb-3 { margin-bottom: 2.5rem; }
.text-mitte { text-align: center; }

/* ---------- Sparrechner (Tarifseite, Modal mit drei Schritten) ---------- */
.spar-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; box-shadow: var(--schatten); border-color: var(--gruen-linie); background: var(--gruen-hell); }
.spar-cta > div { flex: 1 1 24rem; }
.spar-cta .h3 { margin: .1rem 0 .4rem; }
.spar-cta p { margin: 0; color: var(--mute); }
.spar-cta .btn { flex: 0 0 auto; }
.sparrechner { display: block; }
.spar-frage { margin: .25rem 0 .9rem; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.spar-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.wahl-karte-knopf { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .85rem; align-items: center; text-align: left; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); font: inherit; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.wahl-karte-knopf .ic { grid-row: 1 / 3; width: 1.75rem; height: 1.75rem; color: var(--gruen-tief); }
.wahl-karte-knopf b { color: var(--navy); font-size: 1.0625rem; }
.wahl-karte-knopf small { color: var(--mute); font-size: .875rem; }
.wahl-karte-knopf:hover { border-color: var(--gruen-tief); }
.wahl-karte-knopf.aktiv { border-color: var(--gruen-tief); background: var(--gruen-hell); box-shadow: inset 0 0 0 1px var(--gruen-tief); }
.wahl-karte-knopf:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 2px; }
#spar-ne { border-top: 1px solid var(--line); padding-top: 1rem; }
#spar-ne select { max-width: 24rem; }
.spar-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0 0 1.25rem; padding: .6rem .9rem; border-radius: var(--radius); background: var(--gruen-hell); border: 1px solid var(--gruen-linie); font-size: .9375rem; color: var(--navy); font-weight: 700; }
.spar-aendern { border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 700; color: var(--gruen-tief); text-decoration: underline; cursor: pointer; padding: 0; margin-left: auto; }
.sparrechner .feld-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0 1.5rem; }
.feld-einheit { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
.feld-einheit > span { flex: 0 0 auto; color: var(--mute); font-weight: 400; font-variant-numeric: tabular-nums; }
.formular .feld-zeile > label > .feld-einheit { margin-top: auto; }
.formular .feld-einheit input[type="text"] { margin-top: 0; flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.spar-nebenzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; margin: -.5rem 0 .6rem; }
.spar-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; color: var(--mute); }
.spar-chips button { border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); color: var(--navy); font: inherit; font-size: .875rem; font-weight: 700; padding: .3rem .75rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.spar-chips button:hover { border-color: var(--gruen-tief); color: var(--gruen-tief); }
.tarif-schalter--klein button { border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 700; color: var(--mute); padding: .35rem .9rem; border-radius: 999px; cursor: pointer; }
.tarif-schalter--klein button.aktiv { background: var(--bg); color: var(--navy); box-shadow: var(--schatten); }
.spar-vorbelegt { margin: 0 0 1.25rem; font-size: .8125rem; color: var(--mute); }
.spar-ergebnis { margin-top: .5rem; padding: 1.1rem 1.25rem 1.2rem; border-radius: var(--radius); background: var(--flaeche-navy); color: var(--auf-flaeche); }
.spar-ergebnis-titel { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--auf-flaeche-mute); }
.spar-bandbreite { display: block; margin: .35rem 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.15; color: var(--gruen-auf-flaeche); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.spar-erklaerung { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--auf-flaeche); }
.spar-erklaerung b { color: var(--gruen-auf-flaeche); }
.sparrechner .fussnote { margin-top: .9rem; }