/* ==========================================================================
   CAROLA 3.0 – gemeinsames Stylesheet für die Inhaltsseiten
   (Startseite hat eigenes Inline-CSS; dies gilt für /vergleich, /faktencheck,
   /aktueller-stand). Look identisch: Hanken Grotesk, Taube-Akzent, Hairlines.
   ========================================================================== */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/sourceserif4-400.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/sourceserif4-400i.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hankengrotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hankengrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hankengrotesk-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hankengrotesk-700.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/hankengrotesk-800.woff2) format('woff2')}

:root{
  /* --- Vorgabefarben von TSSB --- */
  --taube:#59757E; --sandstein:#C79A6B; --navy:#000D26;
  --weiss:#fff; --schwarz:#000;

  /* --- Tonleiter aus der Taube abgeleitet --- */
  --taube-900:#2C3E46; --taube-700:#42585f; --taube-500:#59757E;
  --taube-300:#8FA6AC; --taube-150:#C4D1D4; --taube-100:#DEE4E5;
  --taube-d:var(--taube-700);
  --taube-hell:#ECF0F1;

  /* Abgedunkelter Sandstein: #C79A6B faellt als Textfarbe auf hellem Grund
     beim Kontrast durch, dieser Wert besteht. */
  --sand-700:#8A5E2B; --sand-200:#E7D9C4;

  /* --- Grundflaechen: kuehl, damit der Sandstein Akzent bleibt --- */
  --grund:#FFFFFF; --grund-2:#E8EDEE; --line:#DFE6E7;

  --ink:#0A1526; --ink-2:#4C666D; --ink-3:#8FA6AC;

  /* --- Typografie --- */
  --font-head:"Hanken Grotesk",Arial,sans-serif;
  --font-text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --fs-h1:clamp(1.875rem,4.6vw,3.375rem);
  --fs-h2:clamp(1.4375rem,2.8vw,2.125rem);
  --fs-h3:1.1875rem;
  --fs-lead:clamp(1.1875rem,2.2vw,1.5rem);
  --lh-head:1.14; --lh-text:1.62;
  /* Ein Lesemass fuer allen Fliesstext, unabhaengig von der Schriftgroesse.
     36rem = 576 px, rund 68 Zeichen bei 17 px Fliesstext. */
  --measure:36rem;

  /* --- Raum: eine Leiter statt beliebiger Werte --- */
  --r1:8px; --r2:14px; --r3:22px; --r4:34px; --r5:52px;
  --r6:clamp(52px,7vw,92px);

  --wrap:1080px; --header-h:60px;
}
@media(min-width:1280px){ :root{ --wrap:1240px } }
@media(min-width:1600px){ :root{ --wrap:1360px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-text);color:var(--ink);background:var(--grund);
  line-height:var(--lh-text);-webkit-font-smoothing:antialiased;font-size:17px}
/* Bedienelemente, Marken und Zahlen bleiben in der Grotesk – nur der
   Fliesstext bekommt die Serife, weil sich die langen Faktentexte damit
   besser lesen. */
.kick,.crumb,.updated,.cap,.btn,.chip,nav,header,footer .foot-links,footer .credit,
.card .num,.mehr,table,.timeline time{font-family:var(--font-head)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,32px);width:100%}
/* Frueher verengte .prose den Container auf 760px und zentrierte ihn – dadurch
   sprang die linke Kante von Abschnitt zu Abschnitt. Jetzt bleibt der Container
   immer gleich breit; begrenzt wird nur die Textzeile, linksbuendig. */
/* .prose begrenzt die LESEZEILE, nie den Container. Hier stand einmal
   .prose{max-width:none} – das hob die Containerbreite von .wrap auf, wodurch
   53 Baender auf 22 Seiten am Fensterrand klebten, waehrend alle uebrigen
   mittig sassen. Genau daher die springende linke Kante. */
.wrap.prose{max-width:52rem}
.wrap.prose > h1,.wrap.prose > h2,.wrap.prose > .tbl,
.wrap.prose > figure,.wrap.prose > .cards{max-width:none}
/* Nur Elemente, die selbst Text tragen. Ein "div.prose" haette den
   Container <div class="wrap prose"> mitgetroffen und ihn auf die
   Lesebreite geschrumpft – dann rutscht das ganze Band in die Mitte. */

a{color:var(--sand-700)} a:hover{color:var(--taube-700)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-head);margin:0;letter-spacing:-.015em;text-wrap:balance}
.sperr{letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Header ---------- */
header.hd{position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .row{max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:14px;width:100%}
.hd .mark{font-family:var(--font-head);font-weight:800;letter-spacing:.14em;font-size:1rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.hd nav a{font-size:.95rem;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--taube)}
/* Zweitrangige Seiten stehen nur im Mobilmenue, nicht in der Desktopleiste. */
.hd nav .nav-gruppe,.hd nav a.nav-mehr{display:none}

/* ---------- Burger + Mobilmenue ----------
   Unterhalb von 900px traegt das Menue alle neun Seiten. Vorher waren auf
   kleinen Bildschirmen Punkte schlicht ausgeblendet – auf manchen Seiten
   blieben drei uebrig, ohne Weg zurueck. */
.burger{display:none;margin-left:auto;width:44px;height:40px;padding:11px 10px;border:0;
  background:transparent;cursor:pointer;flex-direction:column;justify-content:space-between;flex:none}
.burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .3s ease,opacity .2s ease,background .3s ease}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media(max-width:899px){
  .burger{display:flex}
  header.hd.menu-open{background:var(--navy)}
  header.hd.menu-open .mark{color:#fff}
  header.hd.menu-open .burger span{background:#fff}
  .hd nav{position:fixed;top:var(--header-h);left:0;right:0;margin:0;padding:6px 0 30px;gap:0;
    flex-direction:column;align-items:stretch;background:var(--navy);
    max-height:calc(100svh - var(--header-h));overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .28s ease,opacity .28s ease,visibility .28s}
  .hd nav.open{transform:translateY(0);opacity:1;visibility:visible}
  .hd nav a{display:block;font-size:1.16rem;padding:15px 22px;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .hd nav a:hover,.hd nav a[aria-current]{color:var(--sandstein)}
  .hd nav a[aria-current]::after{content:" ·";color:var(--sandstein)}
  .hd nav .nav-gruppe{display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.45);padding:22px 22px 8px}
  .hd nav a.nav-mehr{display:block;font-size:1rem;padding:12px 22px;color:rgba(255,255,255,.85)}
  .hd nav a:last-child{border-bottom:0}
  .hd .mark{letter-spacing:.08em}
}
@media(min-width:900px) and (max-width:1080px){ .hd nav{gap:14px} .hd nav a{font-size:.86rem} }

/* ---------- Bänder / Sektionen ---------- */
.band{padding:var(--r6) 0}
.band.tight{padding:var(--r5) 0}
.b-white{background:var(--grund)}
/* ---------- Die vier Bandstufen ----------
   weiss  ->  heller Anflug (.b-wash)  ->  echte Taube (.b-taube)  ->  schwarz
   Die Taube ist der Akzent: hoechstens EIN Band je Seite, und zwar das, das
   die Kernaussage traegt. Sie war zwischenzeitlich auf Fast-Weiss degradiert
   worden, wodurch das Farbklima verlorenging. */
.b-taube{background:var(--taube);color:#fff}
.b-black{background:var(--schwarz);color:#fff}
.b-black a{color:#fff}
.kick{font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  font-size:.72rem;color:var(--taube-700);margin-bottom:var(--r2)}
.b-black .kick{color:var(--sandstein)}
h1.big,h2.big{font-weight:800;font-size:var(--fs-h1);line-height:1.03;text-wrap:balance}
h2.mid{font-weight:700;font-size:var(--fs-h2);margin:0 0 .35em}
.lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.42;max-width:46rem;margin:.55em 0 0}
.b-black .lead{color:rgba(255,255,255,.82)}
p{margin:0 0 1em}
.band p:last-child{margin-bottom:0}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
@media(min-width:680px){ .cards.c2{grid-template-columns:1fr 1fr} .cards.c3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--weiss);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:8px}
.b-taube .card{background:#fff}
.card h3{font-size:1.08rem;font-weight:700}
.card p{font-size:.96rem;color:var(--ink-2);margin:0}
.card .num{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--taube)}
.card.us{border-color:var(--taube);box-shadow:0 0 0 1px var(--taube)}
.card .badge{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:var(--taube);color:#fff;border-radius:999px;padding:3px 10px}

/* Häkchen-/Kreuz-Listen */
ul.ticks,ul.plain{list-style:none;padding:0;margin:.4em 0 0;display:flex;flex-direction:column;gap:10px}
/* Häkchen absolut positioniert – der Textfluss bleibt dadurch zusammenhängend,
   auch wenn ein Eintrag aus fettem Text, Fließtext und Links besteht */
ul.ticks li{position:relative;padding-left:28px;font-size:1rem;color:var(--ink-2);line-height:1.55}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--taube);font-weight:800;line-height:1.55}
ul.ticks li b{color:var(--ink)}
/* Nur das schwarze Band traegt helle Schrift. .b-taube ist hier ein heller
   Ton (--taube-hell); weisse Schrift darauf war praktisch unlesbar. */
.b-black ul.ticks li{color:rgba(255,255,255,.82)}
.b-black ul.ticks li b{color:#fff}
.b-black ul.ticks li::before{color:var(--sandstein)}

/* Vergleichstabelle */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;
  border:1px solid var(--line);border-radius:14px;margin-top:22px}
/* Frueher galt pauschal min-width:520px. Das zwang auch zweispaltige Tabellen
   zum seitlichen Scrollen, obwohl sie auf ein Telefon passen. Jetzt nur so
   breit wie noetig: auf schmalen Schirmen die Containerbreite. */
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:min(520px,100%)}
/* Ab drei Spalten waeren die Spalten sonst unlesbar schmal – diese Tabellen
   scrollen bewusst im eigenen Rahmen und bekommen dafuer einen Hinweis. */
.tbl:has(tr > *:nth-child(3)) table{min-width:520px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
/* Zahlenwerte nicht mitten im Ausdruck umbrechen ("2 ×" / "0,15 m"),
   dafuer darf die Bezeichnung links trennen. */
/* Bei mehrspaltigen Tabellen bleibt die erste Spalte stehen, waehrend der
   Rest wandert – sonst weiss man beim Scrollen nicht mehr, welche Zeile man
   liest. */
@media(max-width:759px){
  .tbl:has(tr > *:nth-child(3)) th:first-child,
  .tbl:has(tr > *:nth-child(3)) td:first-child{
    position:sticky;left:0;z-index:1;background:var(--grund);
    box-shadow:1px 0 0 var(--line)}
  .tbl:has(tr > *:nth-child(3)) thead th:first-child{background:#f6f8f8}
  .tbl:has(tr > *:nth-child(3)) tr.hi td:first-child{background:#F4F6F7}
}
/* Frueher galt nowrap pauschal fuer die letzte Spalte – bei Fliesstext
   sprengte das die Tabelle und quetschte die erste Spalte auf ein Zeichen.
   Jetzt nur dort, wo tatsaechlich kurze Werte stehen (Klasse "werte"). */
.tbl.werte td:last-child{white-space:nowrap}
.tbl td:first-child,.tbl th:first-child{overflow-wrap:break-word}
.tbl.scrollbar{box-shadow:inset -24px 0 20px -20px rgba(0,0,0,.3)}
.tbl.scrollbar.am-ende{box-shadow:none}
.tbl.scrollbar::before{content:"→ seitlich scrollen";position:absolute;top:0;right:0;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2);
  background:rgba(255,255,255,.92);padding:4px 9px;border-bottom-left-radius:10px;
  pointer-events:none}
.tbl.scrollbar.am-ende::before{display:none}
@media(min-width:760px){ .tbl.scrollbar::before{display:none} }
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:#f6f8f8;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.hi{background:rgba(89,117,126,.07)}

/* Chronik / Timeline */
.timeline{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:0}
.tl{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0}
.tl time{font-family:var(--font-head);font-weight:700;color:var(--taube-700);font-size:.95rem}
.tl .tl-b h3{font-size:1.06rem;font-weight:700;margin-bottom:5px}
.tl .tl-b p{font-size:.96rem;color:var(--ink-2);margin:0}
.tl.past time{color:var(--ink-2)}
/* Der hervorgehobene Eintrag bekommt Polster – ohne Ausgleich schoebe das
   seinen Text um 20 px nach rechts und die Zeitleiste haette zwei Kanten.
   Negativer Aussenabstand laesst nur die Flaeche breiter werden. */
.tl.next{background:var(--grund-2);border-radius:12px;padding:20px;
  border-top:0;margin:2px -20px 0}
/* Auf getoentem und farbigem Grund wird der hervorgehobene Eintrag eine weisse
   Flaeche. Ein halbtransparenter Schleier hatte den Grund abgedunkelt und alles
   darin knapp unter die Lesbarkeitsgrenze gedrueckt (Link 4,47 statt 4,50). */
.b-wash .tl.next{background:#fff}
@media(max-width:600px){ .tl{grid-template-columns:1fr;gap:6px} }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;
  font-size:1rem;text-decoration:none;padding:12px 24px;border-radius:40px;background:var(--taube);color:#fff;
  border:1.5px solid var(--taube);transition:background .2s,transform .2s}
.btn:hover{background:var(--taube-d);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--taube-d)}
.btn.ghost:hover{background:rgba(89,117,126,.08);color:var(--taube-d)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Breadcrumb / Meta */
.crumb{font-size:.86rem;color:var(--ink-2);margin-bottom:14px}
.crumb a{color:var(--ink-2);text-decoration:none} .crumb a:hover{color:var(--taube)}
/* Einordnung fuer Besucher, die ueber die Suche direkt auf einer
   Unterseite landen und den Zusammenhang nicht kennen. */
.einordnung{margin:18px 0 0;padding:15px 18px;border-left:3px solid var(--taube-150);
  background:var(--grund-2);border-radius:0 12px 12px 0;font-size:.95rem;
  line-height:1.55;color:var(--ink-2)}
.einordnung b{color:var(--ink)}
.einordnung a{white-space:nowrap}
.updated{font-size:.86rem;color:var(--ink-2);margin-top:6px}

/* ---------- Footer ----------
   Zweispaltig ab 820 px: links Absender und Logos, rechts Wege und Kanaele.
   Vorher stapelte sich alles linksbuendig, was auf breiten Schirmen zwei
   Drittel der Zeile leer liess. */
footer{background:var(--schwarz);color:rgba(255,255,255,.72);padding:60px 0 44px;font-size:.95rem}
footer .foot-top{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:820px){ footer .foot-top{grid-template-columns:1.5fr 1fr;gap:56px;align-items:start} }
footer .logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-bottom:20px;opacity:.92}
footer .logos img{height:30px;width:auto}
footer p{color:rgba(255,255,255,.72);font-size:.95rem}
footer p b{color:#fff}
footer .foot-credit{margin:0;max-width:46rem;line-height:1.6}
footer .foot-credit b{color:#fff;font-weight:600}
footer .foot-meta{display:flex;flex-direction:column;gap:20px}
@media(min-width:820px){ footer .foot-meta{align-items:flex-end;text-align:right} }
footer .foot-links{margin:0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px 18px}
@media(min-width:820px){ footer .foot-links{justify-content:flex-end} }
footer .foot-links a{color:rgba(255,255,255,.8);text-decoration:none}
footer .foot-links a:hover{color:#fff;text-decoration:underline}
footer .socials{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
footer .socials a{display:inline-flex;width:36px;height:36px;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  color:#fff;transition:background .15s ease,border-color .15s ease}
footer .socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
footer .socials svg{width:17px;height:17px;fill:currentColor}
footer .credit{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem;color:rgba(255,255,255,.55)}
footer .credit a{color:rgba(255,255,255,.75);text-decoration:none}
footer .credit a:hover{color:#fff;text-decoration:underline}


/* ---------- Uebersichtsseiten: Kachelraster ----------
   Bisher nur im Inline-CSS der Startseite. Die beiden Uebersichtsseiten
   brauchen dieselben Bausteine, deshalb hier gemeinsam. */
.b-wash{background:var(--grund-2)}
.card.kachel{padding:0;overflow:hidden;text-decoration:none;color:inherit;position:relative;
  display:flex;flex-direction:column;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card.kachel:hover{transform:translateY(-2px);border-color:var(--taube);
  box-shadow:0 6px 22px rgba(0,0,0,.07)}
.card.kachel .kbild{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef1f2}
.card.kachel .kbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.card.kachel:hover .kbild img{transform:scale(1.03)}
/* Zeichnungen nicht beschneiden – sie verlieren dabei ihre Aussage */
.card.kachel .kbild.zeichnung{background:#fff;border-bottom:1px solid var(--line)}
/* Laengsschnitte und Vergleichsstreifen sind extrem breit – in einem
   16:10-Rahmen schwimmen sie in Weissraum. */
.card.kachel .kbild.breit{aspect-ratio:16/6}
.card.kachel .kbild.zeichnung img{object-fit:contain;padding:12px}
.card.kachel:hover .kbild.zeichnung img{transform:none}
.card.kachel .num,.card.kachel h3,.card.kachel p,.card.kachel .mehr{padding-left:20px;padding-right:20px}
.card.kachel .num{margin-top:18px}
.card.kachel h3{margin:2px 0 0}
.card.kachel p{flex:1 1 auto}
.card.kachel .mehr{font-size:.86rem;font-weight:700;color:var(--taube);margin-top:6px;padding-bottom:20px}
.card.kachel:hover .mehr{text-decoration:underline}
@media(prefers-reduced-motion:reduce){
  .card.kachel:hover{transform:none}
  .card.kachel:hover .kbild img{transform:none}
}



/* ---------- Bilder, Bildraster, Bildunterschriften ----------
   Bisher gab es diese Bausteine nur im Inline-CSS der Startseite; die
   Unterseiten haben ihre Bilder mit Inline-Styles nachgebaut. Jetzt eine
   gemeinsame Grundlage, damit alle Seiten gleich aussehen. */
figure.bild,figure.plan{margin:0;border-radius:16px;overflow:hidden;background:#fff}
figure.bild img,figure.plan img{width:100%;height:auto;display:block}
/* Zeichnungen und Plaene brauchen Luft und weissen Grund, auch auf farbigem Band */
figure.plan{padding:14px;border:1px solid var(--line)}
.b-taube figure.bild,.b-taube figure.plan{border-color:rgba(0,0,0,.06)}

/* ---------- Was auf dem Taube-Band liegt ----------
   Flaechen mit eigenem Inhalt (Tabellen, Karten, Bilder) bleiben weiss und
   wirken dadurch wie Karten auf Farbe. Alles andere traegt helle Schrift. */
.b-taube h2,.b-taube h3{color:#fff}
.b-taube .kick{color:#fff;opacity:1}
.b-taube .lead{color:#fff}
.b-taube .cap{color:#fff}
.b-taube .updated{color:#fff}
.b-taube p{color:#fff}
.b-taube b,.b-taube strong{color:#fff}
/* ...aber nicht innerhalb der weissen Flaechen – dort blieb weiss auf weiss */
.b-taube .tbl b,.b-taube .tbl strong,.b-taube .card b,.b-taube .card strong,
.b-taube .nl b,.b-taube .nl strong,.b-taube .zwei-links b{color:var(--ink)}
.b-taube a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.b-taube a:hover{text-decoration-thickness:2px}
/* Tabellen als weisse Flaeche – der Inhalt bleibt dunkel und lesbar */
.b-taube .tbl{background:#fff;border-color:rgba(255,255,255,.35)}
.b-taube .tbl th,.b-taube .tbl td{color:var(--ink)}
.b-taube .tbl td:not(:first-child){color:var(--ink)}
.b-taube .tbl a{color:var(--taube-700)}
.b-taube .tbl .hi{background:rgba(89,117,126,.10)}
.b-taube .tbl span{color:inherit}
/* Karten und Bilder bleiben weiss */
.b-taube .card{background:#fff;border-color:rgba(255,255,255,.35)}
.b-taube .card h3,.b-taube .card p,.b-taube .card b{color:var(--ink)}
.b-taube .card p{color:var(--ink-2)}
.b-taube .card a{color:var(--taube-700);text-decoration:none}
.b-taube figure.bild,.b-taube figure.plan,.b-taube .draw{background:#fff}
/* Haken: Sandstein kaeme auf der Taube nur auf 1,93 – deshalb weiss */
.b-taube ul.ticks li{color:#fff}
.b-taube ul.ticks li b{color:#fff}
.b-taube ul.ticks li::before{background:#fff}
/* Zeitleiste: Trennlinien und Datum hell */
.b-taube .tl{border-top-color:rgba(255,255,255,.28)}
.b-taube .tl time,.b-taube .tl.past time{color:#fff}
.b-taube .tl .tl-b h3{color:#fff}
.b-taube .tl .tl-b p{color:#fff}
.b-taube .tl.next{background:#fff}
.b-taube .tl.next time{color:var(--taube-700)}
.b-taube .tl.next .tl-b h3{color:var(--ink)}
.b-taube .tl.next .tl-b p{color:var(--ink-2)}
/* Meldungsliste: die Karten bleiben weiss */
.b-taube .nl > li{background:#fff;border-color:rgba(255,255,255,.35)}
.b-taube .nl h2{color:var(--ink)}
.b-taube .nl p{color:var(--ink-2)}
.b-taube .nl time{color:var(--taube-700)}
.b-taube .nl .mehr{color:var(--taube-700)}
.b-taube .nl-fuss{color:#fff}
/* Schaltflaeche: die Taube-Fuellung waere unsichtbar */
.b-taube .btn{background:#fff;color:var(--taube-900);border-color:#fff}
.b-taube .btn:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.figrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:760px){ .figrid.zwei{grid-template-columns:1fr 1fr} }
.figbreit{max-width:980px;margin-left:auto;margin-right:auto}
.cap{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:10px 0 0}
.b-black .cap{color:rgba(255,255,255,.65)}

/* Sprungmarken duerfen nicht unter dem klebenden Kopf landen */
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

.band > .wrap > *:first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Nachrichten ----------
   Eigene Rubrik, damit Besucher den Verfahrensstand chronologisch nachlesen
   koennen. Der erste Eintrag ist der Aufmacher und darf groesser stehen. */
.nl{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.nl > li{background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:border-color .18s ease}
.nl > li:hover{border-color:var(--taube-300)}
.nl a.nl-l{display:block;padding:22px 24px;text-decoration:none;color:inherit}
.nl time{display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--taube-700);margin-bottom:8px}
.nl h2{font-family:var(--font-head);font-size:1.2rem;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 8px}
.nl p{font-size:.95rem;color:var(--ink-2);margin:0}
.nl .mehr{display:inline-block;margin-top:12px;font-family:var(--font-head);
  font-weight:700;font-size:.9rem;color:var(--taube)}
.nl a.nl-l:hover .mehr{text-decoration:underline}
.nl > li.top{border-color:var(--taube-300);border-left-width:4px}
.nl > li.top a.nl-l{padding:28px 26px}
.nl > li.top h2{font-size:clamp(1.4rem,3.4vw,1.85rem)}
.nl > li.top p{font-size:1.03rem}
/* Hinweiszeile unter der Liste */
.nl-fuss{margin-top:22px;font-size:.9rem;color:var(--ink-2)}

/* ── WhatsApp-Kanal-Hinweis ──
   Ein Hinweis je Seite: unter jeder Meldung (im schwarzen Schlussband),
   in der Nachrichtenuebersicht (Taube-Band) und auf der Startseite
   (Termin-Tabelle). Weisse Karte, traegt auf allen vier Bandtypen.
   Basiswert zur Erfolgsmessung: 295 Follower am 25.08.2026
   (betrieb/messpunkte.md). */
.wa-folgen{display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:15px 20px;
  margin:26px 0 0;max-width:40rem;text-decoration:none;
  color:var(--ink);line-height:1.45}
.wa-folgen svg{width:26px;height:26px;flex:none;fill:#25D366}
.wa-folgen span b{font-family:var(--font-head)}
.wa-folgen .pf{margin-left:auto;flex:none;padding-left:8px;
  font-family:var(--font-head);font-weight:700;color:var(--taube-700)}
.wa-folgen:hover{border-color:var(--taube-300)}
.b-black .wa-folgen,.b-taube .wa-folgen{border-color:transparent;color:var(--ink)}
.b-black .wa-folgen b,.b-taube .wa-folgen b{color:var(--ink)}
.b-black .wa-folgen .pf,.b-taube .wa-folgen .pf{color:var(--taube)}

/* ── Sitze-Balken (/die-entscheidung/): Ausgangslage im Stadtrat ──
   Zahlen aus der Meldung vom 26.08. – bei neuen Festlegungen Breiten
   (x/70) und Legende anpassen, Quelle bleibt die jeweils neueste Meldung. */
.sbalken{margin:40px 0 0;position:relative}
.sb-spur{position:relative;display:flex;height:36px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--grund-2)}
.sb-spur span{display:block;height:100%}
.sb-a{background:var(--taube)}
.sb-b{background:var(--taube-900)}
.sb-m{position:absolute;top:-8px;height:52px;width:0;
  border-left:2px dashed var(--ink);z-index:2}
/* Die Marke steht je nach Sitzverteilung auf hellem ODER dunklem Balken –
   deshalb eine eigene helle Plakette statt bloss dunkler Schrift. */
/* Die Ziellinie steht UEBER dem Balken, damit sichtbar bleibt, wo die
   Mehrheit liegt und wie weit der Balken noch davon entfernt ist. */
.sb-m b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 7px);
  font-family:var(--font-head);font-size:.72rem;letter-spacing:.04em;font-weight:800;
  white-space:nowrap;color:var(--ink)}
.sb-legende{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:12px 0 0;padding:0;font-size:.95rem;color:var(--ink-2)}
.sb-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;
  margin-right:7px;vertical-align:-1px}
.sb-legende b{color:var(--ink)}
.sb-legende .la{background:var(--taube)}
.sb-legende .lb{background:var(--taube-900)}
.sb-legende .lc{background:var(--grund-2);border:1px solid var(--line)}

/* ── "Der Stand in vier Saetzen": ein Satz je Zeile, damit die Zahl im
   Titel auch sichtbar stimmt. Volle Breite, deshalb keine Lesezeile. ── */
.vier{list-style:none;counter-reset:v;margin:18px 0 0;padding:0;display:grid;gap:12px}
.vier li{counter-increment:v;position:relative;padding:14px 18px 14px 52px;
  background:var(--grund-2);border-radius:12px;max-width:none;line-height:1.5}
.vier li::before{content:counter(v);position:absolute;left:18px;top:14px;
  font-family:var(--font-head);font-weight:800;color:var(--taube);font-size:1.06rem}
.b-taube .vier li{background:rgba(255,255,255,.14)}
.b-taube .vier li::before{color:#fff}


.card a,.notiz a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.card a{color:var(--taube-700)}
.card a:hover,.notiz a:hover{color:var(--taube-900)}
.b-taube .card a{color:var(--taube-700)}

/* ── Zeitungslayout auch auf Unterseiten: Haupttext behaelt die Lesezeile,
   daneben laufen kurze Bloecke. Unter 900px stapelt alles. ── */
.spalten{display:grid;gap:24px;align-items:start}
@media(min-width:900px){ .spalten{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:42px} }

.neben{display:flex;flex-direction:column;gap:12px}
.notiz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px}
.notiz .n-kick{font-family:var(--font-head);font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taube);display:block;margin-bottom:8px}
.notiz h3{font-family:var(--font-head);font-size:1rem;margin:0 0 5px;color:var(--ink)}
.notiz p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-2);max-width:none}
.n-liste{list-style:none;margin:0;padding:0;font-size:.95rem}
.n-liste li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);color:var(--ink-2)}
.n-liste li:last-child{border-bottom:0}
.n-liste li b{color:var(--ink);font-family:var(--font-head);font-variant-numeric:tabular-nums}
.n-liste li.hi,.n-liste li.hi b{color:var(--taube-900);font-weight:600}
.b-taube .notiz,.b-taube .notiz p,.b-taube .notiz h3,.b-taube .notiz li{color:var(--ink-2)}
.b-taube .notiz h3,.b-taube .notiz b{color:var(--ink)}
.b-taube .notiz .n-kick{color:var(--taube-700)}