/* =========================================================================
   "Hofheimer Haushalt" – CI angelehnt an hofheim.de
   Primär: Hofheim-Blau, Akzent: Limettengrün + Cyan (Wellen-Swoosh)
   ========================================================================= */
:root {
  --hof-blue:        #004f80;
  --hof-blue-dark:   #003a5d;
  --hof-blue-700:    #0a5b8c;
  --hof-cyan:        #009ee0;
  --hof-green:       #93c01f;   /* nur als Flaeche/Verlauf, nie als Textfarbe */
  --hof-green-dark:  #5c7c12;   /* war #6f9416 — 3.55:1 auf Weiss, zu wenig */
  --hof-green-hover: #46600e;
  --hof-green-hell:  #b6e02f;   /* Gruen fuer Text auf dunklem Blau (5.6:1) */

  --ink:    #1d2a35;
  --muted:  #5d6b78;
  --line:   #e4eaf0;            /* dekorative Kanten */
  --line-ui:#7d8b98;            /* Bedienelemente: 3.5:1, WCAG 1.4.11 */
  --focus:  #005a94;
  --bg:     #f3f7fa;
  --card:   #ffffff;
  --shadow: 0 1px 2px rgba(16,42,67,.06), 0 6px 22px rgba(16,42,67,.07);

  --ok-fg:#2f7d20; --ok-bg:#eaf5e1;
  --warn-fg:#8a5c00; --warn-bg:#fdf3df;   /* war #9a6700 — 4.42:1, knapp darunter */
  --bad-fg:#b23a2e; --bad-bg:#fbe9e6;
  --info-fg:#0a5b8c; --info-bg:#e4f1fb;

  --radius: 14px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---- Barrierefreiheit: Grundlagen -------------------------------------- */

/* Sichtbarer Tastaturfokus auf JEDEM bedienbaren Element. Doppelring, weil ein
   einfarbiger Ring entweder auf Weiss oder auf dem dunkelblauen Hero verschwindet:
   die dunkle Linie traegt auf hellem Grund, der weisse Halo auf dunklem. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.92);
  border-radius: 6px;
}

/* Sprunglink: fuer Sehende unsichtbar, bis er den Fokus bekommt. Erspart
   Tastatur- und Screenreader-Nutzenden das Durchtabben der Navigation. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: #fff; color: var(--hof-blue-dark); font-weight: 700;
  padding: 12px 18px; border-radius: 0 0 10px 10px; box-shadow: var(--shadow);
  transition: top .12s;
}
.skip-link:focus { top: 0; }

/* Nur fuer Screenreader — z. B. Tabellen, die eine Grafik in Worte fassen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch hier
   nicht — betrifft das weiche Scrollen und die Button-Animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--hof-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { color: var(--hof-blue-dark); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }

/* ---- Topbar / Header --------------------------------------------------- */
.topbar { height: 5px; background: linear-gradient(90deg, var(--hof-green) 0%, var(--hof-cyan) 55%, var(--hof-blue) 100%); }
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 46px; width: auto; display: block; }
.brand .brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand .brand-txt b { color: var(--hof-blue-dark); font-size: 1.06rem; letter-spacing: -.01em; }
.brand .brand-txt span { color: var(--hof-green-dark); font-size: .82rem; font-weight: 600; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { color: var(--ink); font-weight: 600; font-size: .96rem; padding: 9px 14px; border-radius: 9px; }
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav a.active { color: var(--hof-blue); background: var(--info-bg); }
.nav a.admin-link { color: var(--muted); font-weight: 500; }
/* Der eine Handlungsaufruf der Seite. Als Knopf abgesetzt, damit er nicht wie
   ein weiterer gleichrangiger Menuepunkt aussieht — er fuehrt nicht zu einer
   Information, sondern zu einer Handlung. */
.nav a.nav-cta {
  background: var(--hof-green-dark); color: #fff; font-weight: 700;
  margin-left: 6px; white-space: nowrap;
}
.nav a.nav-cta::before {
  content: "✚"; margin-right: 7px; color: var(--hof-green-hell); font-size: .95em;
}
.nav a.nav-cta:hover { background: var(--hof-green-hover); }
.nav a.nav-cta.zu::before { content: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-ui); border-radius: 9px;
  width: 44px; height: 42px; font-size: 1.3rem; cursor: pointer; color: var(--hof-blue-dark); }

/* Sieben Menuepunkte passen ab etwa 1100 px nebeneinander. Darunter wird es eng,
   bevor die Mobilnavigation greift — deshalb dazwischen eine Stufe enger. */
@media (max-width: 1180px) and (min-width: 861px) {
  .nav a { font-size: .88rem; padding: 8px 9px; }
  .brand .brand-txt span { display: none; }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: 12px 20px; border-radius: 10px;
  background: var(--hof-blue); color: #fff; transition: transform .04s, background .15s; }
.btn:hover { background: var(--hof-blue-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.green { background: var(--hof-green-dark); }
.btn.green:hover { background: var(--hof-green-hover); }
.btn.ghost { background: #fff; color: var(--hof-blue); border: 1.5px solid var(--hof-blue); }
.btn.ghost:hover { background: var(--info-bg); }
.btn.small { padding: 8px 13px; font-size: .85rem; border-radius: 8px; }
.btn.danger { background: var(--bad-fg); }
/* Gesperrt: nicht ueber die Deckkraft ausgrauen — auf dem dunklen Hero-Grund
   fiel die Schrift damit unter die Kontrastgrenze. Gedaempfte Flaeche, gestrichelte
   Kante, volle Schriftdeckkraft. */
.btn[disabled], .btn[disabled]:hover { cursor: not-allowed; transform: none;
  background: #e4ebf0; color: #3c4f5e; border: 1.5px dashed #8397a6; }

/* ---- Hero -------------------------------------------------------------- */
.hero { background: linear-gradient(135deg, var(--hof-blue-dark) 0%, var(--hof-blue) 55%, var(--hof-blue-700) 100%);
  color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle at center, rgba(147,192,31,.34), transparent 62%); }
.hero .wrap { padding: 56px 20px 60px; position: relative; z-index: 1; max-width: 880px; }
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.18rem; color: #dceaf4; max-width: 640px; }
/* Die drei Ebenen des Portals direkt unter der Einleitung: erst verstehen,
   dann nachvollziehen, dann mitmachen. Ohne sie liest sich die Startseite als
   lose Sammlung von Zahlen (Wunsch der Verwaltung, fb-18). */
.hero .drei-schritte { counter-reset: schritt; list-style: none; margin: 22px 0 0;
  padding: 0; display: grid; gap: 9px; max-width: 640px; }
.hero .drei-schritte li { position: relative; padding-left: 34px; color: #dceaf4; font-size: .97rem; }
.hero .drei-schritte li b { color: #fff; }
.hero .drei-schritte li::before { counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: -1px; width: 23px; height: 23px; border-radius: 50%;
  background: rgba(147,192,31,.24); color: var(--hof-green-hell); font-weight: 800;
  font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.16); }
.kicker { display:inline-block; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.74rem; color: var(--hof-green-hell); background: rgba(147,192,31,.18);
  border:1px solid rgba(147,192,31,.4); padding:5px 11px; border-radius:999px; margin-bottom:16px; }

/* ---- Sections / Cards -------------------------------------------------- */
section { padding: 40px 0; }
.section-head { margin-bottom: 22px; }
.section-head p { max-width: 680px; }
.grid { display: grid; gap: 18px; }
/* Die Kennzahlen-Kacheln standen zu dicht beieinander und verschmolzen optisch
   zu einem Block. Nur die Kachelreihen bekommen mehr Luft, nicht jedes Raster. */
.grid.kpi-reihe { gap: 28px; margin-top: 6px; }
@media (max-width: 720px) { .grid.kpi-reihe { gap: 18px; } }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; }
.card h3 { font-size: 1.05rem; margin-bottom: 4px; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .label { color: var(--muted); font-weight: 600; font-size: .9rem; }
.kpi .value { font-size: 1.9rem; font-weight: 800; color: var(--hof-blue-dark); letter-spacing: -.02em; }
.kpi .value.neg { color: var(--bad-fg); }
.kpi .value.pos { color: var(--ok-fg); }
.kpi .sub { font-size: .82rem; color: var(--muted); }
.kpi .accent { height: 4px; width: 46px; border-radius: 99px; background: var(--hof-green); margin-bottom: 8px; }

/* Chart container */
.chart-card { padding: 22px; }
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.short { height: 240px; }

/* Tables */
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .78rem;
  padding: 4px 10px; border-radius: 999px; }
.badge::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.in_pruefung { color: var(--warn-fg); background: var(--warn-bg); }
.badge.umgesetzt  { color: var(--ok-fg);  background: var(--ok-bg); }
.badge.abgelehnt  { color: var(--bad-fg); background: var(--bad-bg); }
.badge.beschlossen{ color: var(--info-fg);background: var(--info-bg); }
.badge.in_umsetzung{color: #4f6b10; background: var(--ok-bg); }

/* Progress */
.progress { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress > span { display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--hof-green), var(--hof-cyan));
  transition: width .9s cubic-bezier(.22,1,.36,1); }   /* waechst beim Laden auf */

/* Measures list */
.measure { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.measure:last-child { border-bottom: 0; }
.measure .m-title { font-weight: 600; }
.measure .m-meta { color: var(--muted); font-size: .82rem; }
.measure .m-hinweis { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; line-height: 1.5;
  margin-top: 4px; padding-left: 10px; border-left: 3px solid var(--line); max-width: 78ch; }
.measure .m-vol { font-weight: 800; color: var(--hof-blue-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Proposal cards */
.proposal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.proposal .p-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.proposal h3 { margin: 0; font-size: 1.12rem; }
.proposal .p-meta { color: var(--muted); font-size: .82rem; }
.proposal .p-cat { display:inline-block; font-size:.74rem; font-weight:700; color: var(--hof-blue);
  background: var(--info-bg); padding: 3px 9px; border-radius: 999px; }
.proposal .p-response { background: var(--bg); border-left: 3px solid var(--hof-green);
  padding: 10px 14px; border-radius: 8px; font-size: .92rem; }
.proposal .p-response b { color: #4f6b10; }  /* auf --bg reicht green-dark nicht (4.49:1) */
.proposal .p-savings { display:flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.proposal .p-savings b { color: var(--ink); }

/* Filter chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-ui); background: #fff; border-radius: 999px; padding: 7px 14px;
  font-weight: 600; font-size: .86rem; cursor: pointer; color: var(--muted); }
.chip.active { background: var(--hof-blue); color: #fff; border-color: var(--hof-blue); }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--hof-blue-dark); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line-ui); border-radius: 10px;
  font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
textarea { min-height: 120px; resize: vertical; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Alerts */
.alert { border-radius: 10px; padding: 13px 16px; font-size: .92rem; margin-bottom: 14px; }
.alert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.alert.err { background: var(--bad-bg); color: var(--bad-fg); }
.alert.info { background: var(--info-bg); color: var(--info-fg); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Preisschild */
.preisschild { background: linear-gradient(135deg,#fff, #f0f7ff); border:1px solid var(--line); }
.preisschild .ps-out { display:flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.preisschild .ps-big { font-size: 2rem; font-weight: 800; color: var(--hof-blue-dark); letter-spacing:-.02em; }
.preisschild .ps-lbl { font-size:.8rem; color: var(--muted); font-weight:600; }

/* ---- Fusszeile: flach ---------------------------------------------------
   Frueher vier gestapelte Spalten plus ein sechszeiliger Demo-Absatz — auf dem
   Telefon rund zwei Bildschirmhoehen. Jetzt zwei umbrechende Zeilen; der lange
   Demo-Text steckt in einem <details>, weil er im Band ganz oben ohnehin steht. */
.site-footer { background: var(--hof-blue-dark); color: #cfe0ec; margin-top: 30px; }
.site-footer .wrap { padding: 18px 20px 16px; }
.site-footer a { color: #fff; }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.fuss-marke { color: #fff; font-size: .98rem; white-space: nowrap; }
.fuss-seiten, .fuss-recht, .fuss-kontakt { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.fuss-seiten a, .fuss-recht a, .fuss-kontakt a { font-size: .9rem; display: inline-block; padding: 6px 0; }
.fuss-klein { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.15);
  justify-content: space-between; font-size: .82rem; color: #9fb8ca; }
.fuss-klein a { font-size: .82rem; }
.fuss-kontakt { color: #9fb8ca; }
/* KI-Hinweis in der Fusszeile. Heller als der Demo-Absatz darunter, weil er
   nicht weggeklappt werden kann und auch nicht soll. */
.ki-hinweis { display: flex; gap: 10px; align-items: center; justify-content: center;
  margin: 14px auto 0; padding: 10px 16px; border-radius: var(--radius);
  font-size: .82rem; line-height: 1.5; text-align: center;
  color: #d7e6f1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  max-width: 74ch; }
@media (max-width: 560px) { .ki-hinweis { align-items: flex-start; } }
.ki-hinweis b { color: #fff; }
.ki-marke { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 999px; background: var(--hof-cyan); color: #00293f; }


/* Sprungnavigation (Dashboard) ---------------------------------------------- */
.seiten-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.seiten-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--line-ui); border-radius: 999px; background: #fff; font-size: .88rem;
  font-weight: 600; color: var(--hof-blue-dark); }
.seiten-nav a:hover { background: var(--info-bg); text-decoration: none; }
.seiten-nav-titel { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 22px 0 8px;
  text-transform: uppercase; letter-spacing: .06em; }
main h2[id] { scroll-margin-top: 90px; }

/* Einreichungsfenster ------------------------------------------------------ */
.fenster { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 22px; border: 1px solid var(--line); }
.fenster.offen { background: var(--ok-bg); border-color: #b9d9a4; }
.fenster.zu    { background: var(--info-bg); border-color: #bcd9ef; }
.fenster .f-txt { flex: 1; }
.fenster b { display: block; color: var(--hof-blue-dark); margin-bottom: 2px; }
.fenster .f-zeit { font-weight: 700; white-space: nowrap; }
/* Schmale Bildschirme: Zeitraum unter den Text statt daneben — sonst quetscht
   das nicht umbrechende Datum den Text in eine Handbreit und ragt rechts raus. */
@media (max-width: 640px) {
  .fenster { flex-direction: column; gap: 6px; }
  .fenster .f-zeit { white-space: normal; }
}

/* Demo-Vorschlaege. Bewusst NICHT ueber die Deckkraft ausgegraut — das wuerde
   den Text unter die Kontrastgrenze druecken. Stattdessen: gedaempfte Flaeche,
   gestrichelte Kante, entfaerbte Akzente und ein deutliches Kennzeichen.
   Die Schrift selbst behaelt ihren vollen Kontrast. */
.proposal.demo { background: #f7f8f9; border-style: dashed; border-color: var(--line-ui);
  box-shadow: none; }
.proposal.demo .p-cat, .proposal.demo .badge { filter: grayscale(1); }
.proposal.demo .p-response { border-left-color: var(--line-ui); background: #f1f2f4; }
/* Band quer ueber die volle Kartenbreite: muss auf jedem Ausschnitt/Screenshot
   der Karte mit drauf sein, darum oben IN der Karte statt als Plakette daneben.
   Dunkle Schrift auf Gelb: Kontrast weit ueber 4,5:1. */
.proposal.demo { overflow: hidden; }
.demo-band { margin: -20px -20px 2px; padding: 7px 12px; background: #ffd84d; color: #1d1d1d;
  font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; border-bottom: 2px dashed #1d1d1d;
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.06) 14px 28px); }
.demo-flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: #4a5560; background: #e6e9ec; border: 1px solid var(--line-ui);
  padding: 3px 9px; border-radius: 999px; }

/* Steuertermine unter dem Kassenbestand. Die Marke ist dasselbe Dreieck, das
   das Diagramm an die Achse zeichnet — Legende und Grafik muessen dieselbe
   Form zeigen, sonst sucht man sie im Bild vergeblich. */
.termin-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  margin-top: 14px; font-size: .82rem; color: var(--muted); }
.termin-punkt { display: inline-block; vertical-align: -1px; margin-right: 7px;
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor; }
.termin-punkt.kommunal { color: #5c7c12; }
.termin-punkt.anteil   { color: #0a5b8c; }
#kassen-termine .chart-tabelle { margin-top: 6px; }
#kassen-termine .chart-tabelle td { font-size: .86rem; }

/* Pauschale Kuerzung: gehoert zu den Konsolidierungsmassnahmen, ist aber keine
   Position der Anlage 2. Deshalb abgesetzt statt in der Rangliste. */
.pauschal { margin-top: 24px; background: var(--bg); box-shadow: none;
  border-left: 4px solid var(--hof-green); }
.pauschal h3 { margin-bottom: 2px; }
.pauschal .pk-zahlen { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 12px; }
.pauschal .pk-lbl { font-size: .8rem; color: var(--muted); font-weight: 600; }
.pauschal .pk-big { font-size: 1.7rem; font-weight: 800; color: var(--hof-blue-dark);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pauschal p { margin-bottom: 8px; }

/* Zahlentabelle unter einem Diagramm */
.chart-tabelle { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.chart-tabelle summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--hof-blue);
  padding: 6px 2px; }
.chart-tabelle summary:hover { text-decoration: underline; }
.chart-tabelle table { margin-top: 10px; }
.chart-tabelle > table { display: block; overflow-x: auto; }

/* Offene Stellen in Impressum/Datenschutz. Bewusst auffaellig: eine Luecke in
   einer Pflichtangabe soll niemandem durchrutschen. Vor dem Live-Gang muessen
   alle .todo-Stellen ersetzt sein — scripts/todo-check.sh zaehlt sie. */
.todo {
  background: #fff3cd; color: #6b4e00; border: 1px dashed #8a5c00;
  border-radius: 6px; padding: 1px 7px; font-weight: 600; font-size: .93em;
}

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(16,42,67,.5); display: none;
  align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 60; overflow:auto; }
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 16px; max-width: 620px; width: 100%; padding: 26px; box-shadow: var(--shadow); }
.modal .close { float: right; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--muted); }

/* Admin */
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.admin-tabs button { background: none; border: 0; padding: 12px 16px; font: inherit; font-weight: 700;
  color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
.admin-tabs button.active { color: var(--hof-blue); border-bottom-color: var(--hof-green); }
.queue-row { border:1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; background:#fff; }
.queue-row.pending { border-left: 4px solid var(--warn-fg); }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.inline-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

/* Responsive */
@media (max-width: 860px) {
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .inline-grid { grid-template-columns: 1fr 1fr; }
  .fuss-klein { flex-direction: column; }
  .nav { position: absolute; top: 100%; right: 0; left: 0; background: #fff; flex-direction: column;
    align-items: stretch; padding: 8px 16px 16px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; }
  .nav-toggle { display: inline-flex; align-items:center; justify-content:center; }
}

/* Zugang zum Redaktionsbereich. Bewusst zurueckgenommen: die Seite richtet sich
   an Buergerinnen und Buerger, nicht an die Verwaltung. Der Link bleibt
   auffindbar und tastaturbedienbar — nur eben nicht in der Hauptnavigation.
   Er ist KEINE Sicherheitsmassnahme; die liegt in Passwort, Zweitfaktor,
   Rollen und Rate-Limit. Ein versteckter Link schuetzt nichts. */
.site-footer .dienst-link { float: right; opacity: .55; }
.site-footer .dienst-link a { font-size: .78rem; }
.site-footer .dienst-link:hover, .site-footer .dienst-link:focus-within { opacity: 1; }
@media (max-width: 860px) {
  .site-footer .dienst-link { float: none; display: block; margin-top: 10px; }
}

/* ---- Kleine Interaktion: KPI-Kacheln heben sich beim Hover leicht ------
   Rein dekorativ; die reduced-motion-Regel oben schaltet den Übergang aus.
   tabular-nums verhindert Breitenzappeln waehrend der Count-up-Animation. */
.kpi { transition: transform .18s ease, box-shadow .18s ease; }
.kpi:hover, .kpi:focus-within { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(16,42,67,.14); }
.kpi .value { font-variant-numeric: tabular-nums; }
.kpi:hover .accent { width: 64px; transition: width .2s ease; }

/* Spam-Honigtopf: aus dem sichtbaren Bereich geschoben, nicht per Tab
   erreichbar (tabindex=-1 im HTML), vor Screenreadern verborgen (aria-hidden).
   Kein display:none — manche Bots ueberspringen genau das. */
.hp-schutz {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Rechtsangaben, die aus dem Backend gefuellt werden (Impressum/Datenschutz/
   Barrierefreiheit). pre-line, damit mehrzeilige Adressen umbrechen. */
.recht-feld { white-space: pre-line; }
.recht-leer { color: var(--muted); font-style: italic; }

/* ---- Ausgaben-Übersicht („Wohin geht mein Euro?") ---------------------- */
.ausg-kennzahlen { display: flex; flex-wrap: wrap; gap: 32px; }
.ausg-kz-wert { font-size: 2rem; font-weight: 800; color: var(--hof-blue-dark); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.ausg-kz-label { color: var(--muted); font-size: .9rem; max-width: 240px; }
.legende { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 18px; font-size: .84rem; color: var(--muted); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.einf-punkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tiny { font-size: .78rem; line-height: 1.45; }

.ausg-row { border-top: 1px solid var(--line); padding: 4px 0 12px; }
.ausg-row:first-of-type { border-top: 0; }
.ausg-row.hell { background: linear-gradient(90deg, var(--info-bg), transparent 70%);
  border-color: var(--hof-blue); box-shadow: inset 3px 0 0 var(--hof-blue); }
.ausg-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer;
  padding: 10px 6px 6px; border-radius: 8px; }
.ausg-head:hover { background: rgba(0,79,128,.05); }
.ausg-swatch { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.ausg-rang { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
  color: var(--hof-blue-dark); font-weight: 800; font-size: .82rem;
  display: inline-flex; align-items: center; justify-content: center; }
.ausg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ausg-titel { font-weight: 700; color: var(--ink); }
.ausg-kurz { color: var(--muted); font-size: .82rem; }
.ausg-kurz:empty { display: none; }
.ausg-zahlen { flex: none; text-align: right; display: flex; flex-direction: column; }
.ausg-betrag { font-weight: 800; color: var(--hof-blue-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ausg-anteil { color: var(--muted); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ausg-caret { flex: none; color: var(--muted); transition: transform .18s ease; }
.ausg-row.offen .ausg-caret { transform: rotate(180deg); }
/* Schmale Bildschirme: Betrag in eine eigene Zeile unter den Titel, damit
   lange Titel (»Personalaufwendungen«) nicht in die Zahlen laufen. */
@media (max-width: 560px) {
  .ausg-head { flex-wrap: wrap; row-gap: 2px; }
  .ausg-main { flex-basis: calc(100% - 100px); }
  .ausg-titel { overflow-wrap: anywhere; hyphens: auto; }
  .ausg-caret { order: 1; }
  .ausg-zahlen { order: 2; flex-basis: 100%; padding-left: 59px; text-align: left;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
}
.ausg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 6px; }
.badge.zust { background: #eef2f6; color: #3f4d5a; }
.mn-zahl { font-size: .8rem; color: var(--muted); }

/* Aufgeklappte Einzelheiten. Kein Hover-Popup mehr: das war auf Tastatur und
   Touch nur schwer bedienbar und deckte beim Lesen die naechste Zeile zu. */
.ausg-body { display: none; padding: 12px 6px 4px; }
.ausg-row.offen .ausg-body { display: block; }
.ausg-body > p { margin: 0 0 10px; }
.ausg-body .warum { background: var(--bg); border-left: 3px solid var(--hof-green);
  padding: 9px 13px; border-radius: 8px; font-size: .92rem; }
.detail-h { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 16px 0 6px; }
.teile-tab { font-size: .88rem; }
.teile-tab td { padding: 6px 10px; }
.mn-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mn-liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.mn-liste .mn-titel { flex: 1 1 220px; }
.mn-liste .mn-eins { font-weight: 700; color: var(--ok-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn-total { margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: .9rem; }
.mn-hinweis { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---- 100-Euro-Raster ---------------------------------------------------
   Jedes Kaestchen ein Euro. Die Kaestchen selbst sind nicht fokussierbar —
   das Raster ist role="img", die Bedienung laeuft ueber die Legende darunter. */
.euro-karte { margin-bottom: 18px; }
.euro-raster { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px;
  max-width: 560px; margin: 12px 0 14px; }
.euro-raster i { display: block; aspect-ratio: 1/1; border-radius: 2px;
  transition: opacity .18s ease, transform .18s ease; }
.euro-raster i.blass { opacity: .22; }
.euro-raster:hover i:not(.blass), .euro-raster i:not(.blass) { transform: none; }
@media (max-width: 560px) { .euro-raster { grid-template-columns: repeat(10, 1fr); } }

.euro-legende { list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.euro-leg { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; font-size: .86rem; color: var(--ink);
  cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.euro-leg:hover, .euro-leg.hell { background: var(--info-bg); }
.euro-leg .dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.euro-leg-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.euro-leg b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Wer entscheidet? (Balken je Ebene) -------------------------------- */
.ebene { margin-bottom: 14px; }
.ebene-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ebene-wert { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ebene p { margin: 4px 0 0; }
.ebene-fazit { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.bar-track { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 5px; }
.bar-track.gross { height: 16px; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--hof-blue);
  transition: width .9s cubic-bezier(.22,1,.36,1); }
.bar-fill.gruen { background: linear-gradient(90deg, var(--hof-green-dark), var(--hof-green)); }

/* Einfluss-Farben: rot = kaum, amber = teilweise, grün = gut beeinflussbar */
.badge.einf-kaum      { background: var(--bad-bg);  color: var(--bad-fg);  }
.badge.einf-teilweise { background: var(--warn-bg); color: var(--warn-fg); }
.badge.einf-hoch      { background: var(--ok-bg);   color: var(--ok-fg);   }
.ausg-fill.einf-kaum,   .einf-punkt.einf-kaum      { background: var(--bad-fg);  }
.ausg-fill.einf-teilweise, .einf-punkt.einf-teilweise { background: var(--warn-fg); }
.ausg-fill.einf-hoch,   .einf-punkt.einf-hoch      { background: var(--hof-green-dark); }

/* ---- FAQ (Aufklapp-Fragen) -------------------------------------------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item > summary { cursor: pointer; padding: 15px 30px 15px 0; position: relative;
  font-weight: 700; color: var(--hof-blue-dark); list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; position: absolute; right: 4px; top: 12px;
  font-size: 1.4rem; font-weight: 400; color: var(--hof-green-dark); transition: transform .15s; }
.faq-item[open] > summary::after { content: "−"; }
.faq-antwort { padding: 0 0 16px; color: var(--ink); max-width: 760px; white-space: pre-line; }

/* Backend: editierbare Listenzeilen (Ausgaben, FAQ) */
.edit-row { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: #fbfdff; }
.edit-row .inline-grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* Ausgaben: Diagramm */
.ausg-chart-wrap { position: relative; max-width: 380px; margin: 6px auto 0; }

/* ---- Ausgaben: Diagramm+Kennzahlen rechts, Liste links (Desktop) -------- */
/* minmax(0,1fr) statt implizit auto: sonst weitet der breiteste Inhalt die
   Spalte auf und die ganze Seite scrollt auf dem Handy seitlich. */
.ausg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ausg-side-col { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) {
  .ausg-layout { grid-template-columns: 1fr 320px; align-items: start; }
  .ausg-list-col { grid-column: 1; grid-row: 1; }
  .ausg-side-col { grid-column: 2; grid-row: 1; position: sticky; top: 84px; }
}
.ausg-chart-wrap { max-width: 280px; }

/* ---- Dezente Interaktivität (nur im Frontend) -------------------------- */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.reveal.sichtbar { opacity: 1; transform: none; }

.btn { transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

html:not([data-admin]) .grid.cols-2 > .card,
html:not([data-admin]) .grid.cols-3 > .card,
html:not([data-admin]) .proposal {
  transition: transform .18s ease, box-shadow .18s ease;
}
html:not([data-admin]) .grid.cols-2 > .card:hover,
html:not([data-admin]) .grid.cols-3 > .card:hover,
html:not([data-admin]) .proposal:hover {
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,42,67,.13);
}

/* ---- Lesefortschritt ----------------------------------------------------
   Duenner Streifen unter der Kopfzeile. Rein dekorativ (aria-hidden im HTML),
   deshalb bei "Bewegung reduzieren" ohne Uebergang, aber weiterhin sichtbar —
   die Information "wie weit bin ich" ist ja keine Animation. */
.fortschritt-linie {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.fortschritt-linie > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--hof-green), var(--hof-cyan));
}

/* ---- Haushalts-Simulator „Sie sind Kämmerer" --------------------------- */
.hero-schmal .wrap { padding: 38px 20px 42px; }

/* Die Ergebnisleiste klebt unter der Kopfzeile: waehrend man unten an den
   Reglern zieht, muss oben sichtbar bleiben, was das bewirkt. Ohne das
   scrollt man staendig hoch und runter. */
.sim-ergebnis {
  position: sticky; top: 78px; z-index: 30;
  background: var(--hof-blue-dark); color: #fff;
  border-bottom: 3px solid var(--hof-green);
  transition: background .3s ease;
}
.sim-ergebnis.geschafft { background: #2f5d1f; }
.sim-ergebnis-inner { display: grid; grid-template-columns: repeat(3, auto) 1fr;
  gap: 10px 28px; align-items: center; padding: 12px 20px; }
.sim-kz-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #a8c6db; }
.sim-kz-wert { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.sim-kz-wert.neg { color: #ffc7bf; }
.sim-kz-wert.pos { color: var(--hof-green-hell); }
.sim-kz-sub { font-size: .76rem; color: #a8c6db; }
.sim-fortschritt { min-width: 140px; }
.sim-ergebnis .bar-track { background: rgba(255,255,255,.18); margin-bottom: 4px; }
@media (max-width: 860px) {
  .sim-ergebnis { position: static; }
  .sim-ergebnis-inner { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .sim-fortschritt { grid-column: 1 / -1; }
  .sim-kz-wert { font-size: 1.25rem; }
}

.sim-grid { align-items: start; }
.sim-seite { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 861px) { .sim-seite { position: sticky; top: 190px; } }
.sim-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ok-txt { color: var(--ok-fg); font-weight: 700; }

.regler { border-top: 1px solid var(--line); padding: 16px 0 14px; }
.regler:first-child { border-top: 0; padding-top: 6px; }
.regler.aktiv { border-left: 3px solid var(--hof-green); padding-left: 13px; margin-left: -16px; }
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.regler-kopf label { font-weight: 700; color: var(--hof-blue-dark); }
.regler-wirkung { font-weight: 800; color: var(--ok-fg); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.regler-wirkung.null { color: var(--muted); font-weight: 600; }
.regler-skala { display: flex; justify-content: space-between; gap: 10px;
  font-size: .8rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.regler p { margin: 7px 0 0; }
.regler .preis { color: var(--ink); }
.regler input[type=range] { width: 100%; margin: 10px 0 0; accent-color: var(--hof-blue); height: 26px; }
.regler input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Vorbehalt im Hero: Warndreieck in CI-Amber (#e0a32e, dieselbe Farbe wie in
   den Diagrammen) auf dem dunklen Blau — 5,4:1, also auch als kleiner Text
   lesbar. Bewusst ohne Kasten und ohne Grossbuchstaben: Es soll einordnen,
   nicht erschrecken. */
.modell-warnung { display: inline-flex; align-items: flex-start; gap: 9px;
  margin: 16px 0 0; max-width: 46em; color: #e9b449; font-size: .84rem; line-height: 1.45;
  /* Der Hero traegt unten rechts einen gruenen Lichtschein. Ohne eigenen dunklen
     Grund faellt Amber dort auf 2,2:1 — mit ihm bleibt es bei rund 5:1, auf
     jeder Bildschirmbreite. */
  background: rgba(0, 32, 54, .5); border-left: 3px solid #e0a32e;
  border-radius: 0 9px 9px 0; padding: 8px 13px 8px 11px; }
.modell-warnung svg { flex: 0 0 auto; width: 18px; height: 16px; margin-top: 2px; }

/* Fortschritt zur Luecke: EIN Balken fuer "geschlossen / offen", darunter je
   Hebel ein eigener Balken. Bewusst nur zwei Farben — sechs Hebelfarben waeren
   fuer Rot-Gruen-Blindheit ohnehin nicht sicher unterscheidbar, und die Zeilen
   sind beschriftet. Der Hebel-Balken zeigt den Anteil AN DER LUECKE, damit die
   Laengen im selben Massstab stehen wie der Balken darueber. */
.luecke-legende { display: flex; gap: 16px; font-size: .8rem; color: var(--muted);
  margin: 0 0 8px; }
.luecke-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.luecke-legende .lg-zu { background: var(--hof-green-dark); }
.luecke-legende .lg-offen { background: var(--line); border: 1px solid var(--line-ui); }
.luecke-track { height: 30px; border-radius: 9px; background: var(--line); overflow: hidden; }
.luecke-zu { display: block; height: 100%; width: 0; border-radius: 9px 0 0 9px;
  background: linear-gradient(90deg, var(--hof-green-dark), var(--hof-green));
  border-right: 2px solid #fff;                 /* Trennkante zum offenen Rest */
  transition: width .25s ease; }
.luecke-track.voll .luecke-zu { border-right: 0; border-radius: 9px; }
.luecke-status { margin: 9px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.luecke-h { font-size: .95rem; margin: 18px 0 8px; }
.luecke-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.lk-zeile { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.lk-titel { font-size: .88rem; color: var(--muted); }
.lk-wert { font-size: .88rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.lk-zeile.aktiv .lk-titel { color: var(--hof-blue-dark); font-weight: 600; }
.lk-zeile.aktiv .lk-wert { color: var(--ok-fg); }
.lk-bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px;
  background: var(--line); overflow: hidden; }
.lk-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--hof-green-dark); transition: width .25s ease; }
.lk-anteil { grid-column: 1 / -1; font-size: .76rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .luecke-zu, .lk-bar i { transition: none; }
}

.entwurf { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.entwurf li { display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--hof-cyan); padding-left: 11px; }
.entwurf-titel { font-size: .93rem; }
/* Die drei Schuldenarten unter dem Diagramm. Eine einzige Schuldenzahl
   verdeckt, dass Investitions- und Liquiditaetskredite voellig verschiedene
   Dinge sind (Wunsch der Verwaltung, fb-08). */
.schuldenarten { margin: 14px 0 0; font-size: .87rem; }
.schuldenarten dt { font-weight: 700; color: var(--hof-blue-dark); margin-top: 8px; }
.schuldenarten dd { margin: 2px 0 0; color: var(--muted); }

.klartext { margin: 0 0 12px; padding-left: 20px; }
.klartext li { margin-bottom: 7px; }

/* ---- Einreichungskanäle (Bürger / Gewerbe / Verwaltung) ---------------- */
.kanal-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 18px; }
.kanal-wahl label {
  display: block; border: 1.5px solid var(--line-ui); border-radius: 12px;
  padding: 13px 15px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.kanal-wahl label:hover { border-color: var(--hof-blue); }
.kanal-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kanal-wahl input:focus-visible + .kanal-inhalt { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.kanal-wahl label:has(input:checked) { border-color: var(--hof-blue); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--hof-blue); }
.kanal-titel { display: block; font-weight: 700; color: var(--hof-blue-dark); margin-bottom: 3px; }
.kanal-text { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.kanal-felder[hidden] { display: none; }
.vorgang-schluessel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; letter-spacing: .12em; background: #fff; border: 1px dashed var(--hof-blue);
  border-radius: 8px; padding: 9px 13px; display: inline-block; margin: 8px 0; }

/* ---- Zeitstrahl (Modul „Was daraus wurde") ----------------------------- */
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px solid var(--line); }
.zeitstrahl > li { position: relative; padding: 0 0 24px 6px; }
.zeitstrahl > li::before {
  content: ""; position: absolute; left: -35px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--hof-green-dark); box-shadow: 0 0 0 3px var(--bg);
}
.zeitstrahl > li.offen::before { background: #fff; box-shadow: 0 0 0 2px var(--line-ui), 0 0 0 5px var(--bg); }
.zeitstrahl .wann { font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.zeitstrahl h3 { margin: 2px 0 6px; font-size: 1.02rem; }

/* ---- Bewertungsraster (Modul „Ideen im Überblick") --------------------- */
.raster-zeilen { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px;
  align-items: center; font-size: .9rem; }
.punkte { display: inline-flex; gap: 3px; }
.punkte i { width: 13px; height: 13px; border-radius: 3px; background: #dde5ec; display: block; }
.punkte i.an { background: var(--hof-blue); }

/* ---- Seite für andere Kommunen ---------------------------------------- */
.kom-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kom-liste li { border-left: 3px solid var(--hof-cyan); padding-left: 13px; }
.kom-liste b { display: block; color: var(--hof-blue-dark); }
.kom-liste span { font-size: .9rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ausg-caret, .euro-raster i, .sim-ergebnis { transition: none; }
}

/* Kanalauswahl im Einreichungsformular. Das <fieldset> gruppiert die drei
   Radiofelder korrekt fuer Vorlesesoftware — nur der Rahmen soll weg. */
.kanal-fieldset { border: 0; padding: 0; margin: 0 0 6px; }
.kanal-fieldset legend { font-weight: 700; font-size: .9rem; color: var(--hof-blue-dark);
  padding: 0; margin-bottom: 8px; }

/* ---- Kleinteile, die auf mehreren Seiten gebraucht werden -------------- */
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-4 { grid-template-columns: 1fr; } }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Aufklappbare Listeneintraege mit <details> — dort, wo kein eigener
   Umschaltknopf noetig ist (Browser liefert Tastaturbedienung und ARIA mit). */
.acc-details { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.acc-details[open] { box-shadow: var(--shadow); }
.acc-details > summary { cursor: pointer; padding: 11px 14px; list-style: none;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.acc-details > summary::-webkit-details-marker { display: none; }
.acc-details > summary::before { content: "▸"; color: var(--hof-blue); flex: none; }
.acc-details[open] > summary::before { content: "▾"; }
.acc-details > summary:hover { background: #f5f9fc; }
.acc-punkte { margin-left: auto; font-weight: 800; color: var(--hof-blue-dark);
  font-variant-numeric: tabular-nums; }
.acc-inhalt { padding: 0 14px 14px 32px; }

/* =========================================================================
   Mobile-Feinschliff (Ergänzung 08/2026)
   Gezielte Verbesserungen für kleine Schirme, ohne das Desktop-Layout zu
   verändern.
   ========================================================================= */
/* Medien nie breiter als der Bildschirm — verhindert horizontales Ruckeln. */
img, svg, canvas { max-width: 100%; height: auto; }
canvas { height: auto; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section { padding: 30px 0; }
  .hero .wrap { padding: 40px 16px 44px; }
  .section-head { margin-bottom: 16px; }
  /* Breite Datentabellen horizontal scrollen lassen, statt die Seite zu sprengen. */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* Hero-Aktionsknöpfe gestapelt und über die volle Breite — bequem tippbar. */
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; justify-content: center; }
}

/* Tippziele mind. 44px hoch (WCAG 2.5.5). Gilt für die Mobil-Navigation. */
@media (max-width: 860px) {
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 44px; }
}

/* ---- Simulator: Unterbereiche und Rückmeldung --------------------------- */
/* „Woran genau würden Sie sparen?" — erscheint erst, wenn der Regler bewegt
   wurde. Die Auswahl geht in die Rückmeldung an den Bürgermeister ein, sie
   verändert die Rechnung bewusst NICHT (dafür fehlt eine belastbare
   Aufteilung der freiwilligen Leistungen). */
.unterposten { border: 1px dashed var(--line-ui); border-radius: 10px;
  padding: 12px 14px; margin: 12px 0 0; background: var(--bg); }
.unterposten legend { font-weight: 700; font-size: .88rem; color: var(--hof-blue-dark);
  padding: 0 6px; }
.unter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.unter-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: #fff; border: 1px solid var(--line-ui); border-radius: 999px;
  padding: 6px 12px; font-size: .85rem; }
.unter-chip:hover { border-color: var(--hof-blue); }
.unter-chip input { accent-color: var(--hof-blue); margin: 0; }
.unter-chip:has(input:checked) { background: var(--info-bg); border-color: var(--hof-blue);
  color: var(--hof-blue-dark); font-weight: 600; }

/* Platzhalter, solange die Luecke noch offen ist: sagt, warum der Weg zum
   Buergermeister hier (noch) nicht steht. */
.melde-noch { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--info-bg); border: 1px solid #bcd9ef; color: var(--hof-blue-dark);
  font-size: .88rem; line-height: 1.55; }

.melde-karte { margin-top: 18px; border-left: 4px solid var(--hof-green-dark); }
.melde-karte h3 { margin-top: 0; }
.melde-karte textarea { width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid var(--line-ui); border-radius: 9px; resize: vertical; }

/* Hinweis unter einem Diagramm, rechtsbündig: die Zahlen sind Zwischenstände,
   keine Abschlüsse. Bewusst zurückhaltend — er soll einordnen, nicht warnen. */
.graf-hinweis { margin: 8px 2px 0; text-align: right; font-size: .78rem;
  color: var(--muted); font-style: italic; }
.si-h { margin: 18px 0 6px; font-size: 1rem; }
@media (max-width: 560px) { .graf-hinweis { text-align: left; } }

/* ---- Warnband ---------------------------------------------------------- */
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* Ein Knopf, der wie ein Link aussieht: fuer Stellen, an denen etwas
   AUFGEKLAPPT statt aufgerufen wird — ein <a href> waere dort gelogen. */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--hof-blue);
  min-height: 44px; display: inline-flex; align-items: center; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--hof-blue-dark); }

/* ---- Haushaltskompass (Modul „kompass") -------------------------------- */
/* Die beiden Pole stehen ueber dem Regler, die Folgen beider Richtungen
   darunter — und zwar IMMER beide. Nur die gewaehlte Seite wird hervorgehoben.
   Waere nur eine Folge sichtbar, waere die Frage eine Suggestivfrage. */
.kompass-regler input[type=range] { accent-color: var(--hof-cyan); }
/* Noch nicht angefasst: grauer Regler. Vorher stand er farbig in der Mitte und
   sah aus wie die Antwort "beides gleich wichtig", obwohl daneben "noch offen" stand. */
.kompass-regler:not(.aktiv) input[type=range] { accent-color: #9aa8b3; opacity: .75; }
.kompass-pole { font-weight: 600; color: var(--hof-blue-dark); }
/* Die Antwort ("deutlich über allgemeine Steuern") ist laenger als die Wirkung
   beim Kaemmerer-Regler — darf umbrechen und rutscht notfalls unter die Frage,
   statt die Seite seitlich aufzuschieben. */
.kompass-regler .regler-kopf { flex-wrap: wrap; }
.kompass-regler .regler-wirkung { white-space: normal; }
.kompass-pole span { flex: 1 1 0; }
.kompass-pole span:last-child { text-align: right; }
.kompass-folgen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.kompass-folge { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.45;
  border-left: 3px solid var(--line); padding-left: 10px; transition: border-color .15s, color .15s; }
.kompass-folge b { color: var(--hof-blue-dark); }
.kompass-folge.gewaehlt { border-left-color: var(--hof-cyan); color: var(--ink); }
@media (max-width: 640px) { .kompass-folgen { grid-template-columns: 1fr; } }

/* ---- Beeinflussbarkeits-Matrix (Modul „matrix") ------------------------ */
.matrix-wrap { height: 460px; }
@media (max-width: 640px) { .matrix-wrap { height: 380px; } }
.fehlschluss { border-left: 3px solid var(--hof-cyan); padding-left: 12px; }
.fehlschluss p { margin: 4px 0 0; }
.m-fragen { margin: 14px 0 0; }
.m-fragen dt { font-weight: 700; color: var(--hof-blue-dark); margin-top: 12px; font-size: .93rem; }
.m-fragen dd { margin: 3px 0 0; color: var(--ink); font-size: .92rem; line-height: 1.55; }