/* dieweltklarsehen.de — Stylesheet v2 (Redesign 31.08.2026)
   Markenquelle: YouTube-Kanalbanner DWKS_banner.png (Grund #093550 gemessen,
   Goldrahmen, Motto "Orientierung in bewegten Zeiten") + DOK 07 Farbcodes v14
   (Box-Norm 14.07.2026: dunkle Box #2a2a2a→#141414 + Champagner-Rand;
   News-Balkenfarben S1 #1E79B8 · S2 #B8201E · S3 #A57A31 · S4 #785EB8).
   Schriften self-hosted: Anton (Titel, Marken-Schrift der Thumbnails/Tafeln),
   Bebas Neue (Kicker/Motto-Zeile), Fließtext System-Stack. Kein Google-CDN. */

/* WOFF2 zuerst, TTF als Rueckfall fuer sehr alte Browser.
   Gemessen 31.08.2026: 219 KB TTF -> 77 KB WOFF2, 65 Prozent kleiner. */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-Regular.woff2") format("woff2"),
       url("assets/fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/BebasNeue-Regular.woff2") format("woff2"),
       url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Marken-Siegel/Banner-Welt (gemessen am Kanalbanner) */
  --siegel-blau: #093550;
  --siegel-blau-tief: #051E2E;
  --nacht: #07131C;

  /* Gold-Familie (DOK 07) */
  --gold: #CBA25A;
  --gold-hell: #E0C079;
  --champagner: #E3CC96;
  --rahmen-gold: rgba(198, 168, 109, 0.55);
  --rahmen-gold-zart: rgba(198, 168, 109, 0.28);

  /* Box-Norm (verbindlich 14.07.2026) */
  --box-oben: #2a2a2a;
  --box-unten: #141414;

  /* Säulen-Balkenfarben (News-Lower-Third-Norm, sichtbarkeitsoptimiert)

     --s2 IST DIE WEB-FASSUNG DER MARKENFARBE, nicht die Markenfarbe selbst.
     Im Video und in allen Marken-Artefakten gilt unverändert #B8201E; hier
     steht sie 4 Stufen heller, weil sie auf dem Seitengrund #07131C als
     FLÄCHE gemessen 2,92:1 erreicht und WCAG 2.2 · 1.4.11 für Grafik- und
     Bedienelemente 3,0:1 verlangt [gemessen ▸ Claude-Web-Kontrast.py].
     #BC211F erreicht 3,02:1 bei GLEICHEM Farbton (0,8 auf dem Farbkreis)
     und GLEICHER Sättigung (0,72) — es ist dieselbe Farbe, minimal
     aufgehellt, nicht eine andere. Uwe-Entscheidung E10 vom 20.09.2026
     („ja, fürs Web minimal aufhellen"); eigenmächtig wäre das nicht
     geschehen.
     NICHT betroffen sind die drei Stellen, an denen #B8201E als Fläche
     unter WEISSER Schrift steht (.feldfehler) — dort ist die Paarung eine
     andere und erreicht ihre Stufe. */
  --s1: #1E79B8;
  --s2: #BC211F;
  --s3: #A57A31;
  --s4: #785EB8;

  --text-hell: #F5F1E8;
  --text-gedaempft: #C9C2B4;
  --text-dunkel: #1A1200;
}

* { box-sizing: border-box; }

/* scroll-padding-top gehoert zur sticky Kopfleiste (A15): Ohne sie landet
   jedes Sprungziel -- Abschriftmarke, Inhaltsverzeichnis, #anker -- UNTER der
   Leiste und ist unsichtbar. 6.5rem deckt die gemessenen 93 px der
   umgebrochenen Leiste am Telefon mit Rand ab. */
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  color: var(--text-hell);
  background: var(--nacht);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .marke {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.24;
}

.kicker {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 1rem;
}

a { color: var(--gold); text-decoration-color: var(--rahmen-gold); }
a:hover { color: var(--gold-hell); }

/* ---------- Kopfzeile ---------- */

/* A15 (Uwe, zweite Durchsicht 20.09.2026): "Die Kopfleiste soll fest am
   oberen Bildschirmrand stehen."

   Dieselbe Bauentscheidung wie bei der Fussleiste: sticky statt fixed. Eine
   feste Kopfleiste verlangt eine Polsterung des Rumpfes in ihrer Hoehe, und
   die ist hier NACHWEISLICH keine Konstante -- 72 px bei 1400 px
   Fensterbreite, 93 px bei 390 px, weil das Menue dort umbricht
   [gemessen ▸ 20.09.2026, 10:56, Claude-Web-Geometrie.mjs]. Sticky haelt die
   Leiste oben, ohne dass irgendwo eine Zahl gepflegt werden muss, die sich
   beim naechsten Menuepunkt aendert.

   z-index 9000 wie in der Pruefanalyse -- die Leiste muss ueber der
   Wahlen-Klappe UND ueber den Videokacheln liegen. */
header.site {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: var(--siegel-blau-tief);
  border-bottom: 1px solid var(--rahmen-gold-zart);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

header.site img { width: 44px; height: 44px; }

header.site .marke {
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  color: var(--text-hell);
}

nav.site { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; row-gap: 0.3rem; justify-content: flex-end; }
/* Hover uebernommen aus der Pruefanalyse Raumfahrt (dwks-styles.css .nl:hover):
   gefuellte Flaeche #8b1a1a, weisse Schrift, 6px Radius, 0.15s Uebergang. */
nav.site a {
  color: var(--text-gedaempft);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
nav.site a:hover { background: #8b1a1a; border-color: #8b1a1a; color: #fff; }

/* ---------- Aufklappmenü am Telefon (E15, Uwe-Entscheidung 20.09.2026) ----

   OHNE JAVASCRIPT: Schalter ist eine Checkbox, Bedienelement ihr Label.
   Am PC ist beides unsichtbar und die Leiste bleibt, wie sie war. */

.menue-schalter {
  /* nicht display:none — sonst wäre der Schalter für die Tastatur weg */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.menue-taste { display: none; }

/* .versteckt liegt sonst nur in portal.css; die Kopfleiste steht aber auf
   JEDER Seite, auch auf denen ohne portal.css. Deshalb hier noch einmal —
   eine Regel, die nur die Hälfte der Seiten erreicht, ist keine Regel. */
header.site .versteckt {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  header.site { flex-wrap: wrap; row-gap: 0; }

  .menue-taste {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rahmen-gold-zart);
    border-radius: 8px;
    cursor: pointer;
  }
  .menue-taste:hover { border-color: var(--gold); }
  .menue-schalter:focus-visible + .menue-taste { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* Drei Balken aus einem Element: der mittlere ist das Element selbst,
     die beiden äußeren sind seine Pseudo-Elemente. */
  .menue-balken,
  .menue-balken::before,
  .menue-balken::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--champagner);
    border-radius: 2px;
    transition: transform 0.15s, opacity 0.15s;
  }
  .menue-balken::before { transform: translateY(-7px); }
  .menue-balken::after { transform: translateY(5px); }

  /* Geöffnet wird aus den drei Balken ein Kreuz — dasselbe Element, kein
     zweites Zeichen, das irgendwo danebenstehen könnte. */
  .menue-schalter:checked + .menue-taste .menue-balken { background: transparent; }
  .menue-schalter:checked + .menue-taste .menue-balken::before { transform: rotate(45deg); }
  .menue-schalter:checked + .menue-taste .menue-balken::after { transform: rotate(-45deg); }

  nav.site { display: none; }
  .menue-schalter:checked ~ nav.site {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    margin: 0.7rem 0 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rahmen-gold-zart);
  }
  .menue-schalter:checked ~ nav.site > a,
  .menue-schalter:checked ~ nav.site .menue-knopf {
    text-align: left;
    padding: 0.6rem 0.4rem;
    font-size: 1rem;
  }
  .menue-schalter:checked ~ nav.site .menue-gruppe { width: 100%; }
  /* Die ganze Zeile ist die Trefferfläche, nicht nur das Wort — am Telefon
     wird mit dem Daumen getroffen, nicht mit einem Mauszeiger. */
  .menue-schalter:checked ~ nav.site .menue-knopf { width: 100%; text-align: left; }
}

/* ---------- Kopfmenue "Wahlen" (Aufklappliste, CSS-only) ----------
   Uwe-Auftrag 12.09.2026, 05:22. Bewusst OHNE JavaScript: ein Menue, das
   nur mit Skript aufgeht, ist bei abgeschaltetem Skript eine Sackgasse.
   Geoeffnet wird per :hover (Maus) UND :focus-within (Tastatur) — sonst
   waere der Menuepunkt fuer die Tastaturbedienung unerreichbar.
   MOBIL viewport-zentriert: Die Erstfassung vom 12.09. ragte bei 320 px
   Breite 52 px ueber den rechten Rand hinaus; am rechten Menuerand
   ausgerichtet reicht der Platz fuer die laengste Zeile
   ("LT-Wahl Mecklenburg-Vorpommern") auf schmalen Geraeten nicht.

   18.09.2026, Uwe-Ruege 2 — SCHRIFTLAGE: "Wahlen" stand 3,0 px hoeher als
   die Nachbarpunkte [gemessen ▸ Textoberkante Knopf 22,3 px gegen 25,3 px
   bei YouTube-Kanal/Impressum/Datenschutz, 1280 px Viewport]. Ursache: der
   <button> erbt die line-height NICHT (UA-Stylesheet setzt sie auf
   'normal'), waehrend die <a> die 1.75 des Body tragen. Der Knopf bekommt
   deshalb dieselbe line-height — nicht einen ausgerechneten Versatz.

   18.09.2026, Uwe-Ruege 3a — OEFFNEN OHNE KLICK: zwischen Knopfunterkante
   und Klappe lagen 6,0 px tote Zone [gemessen ▸ Gruppe bottom 55,9 px,
   Klappe top 61,9 px]. Wer mit der Maus zum Menuepunkt fuhr, verliess dort
   die Gruppe, das :hover fiel weg und die Liste schloss sich wieder —
   uebrig blieb der Klick auf den Knopf (:focus-within). Die Lueckenbruecke
   ::after gehoert zur Gruppe und haelt das :hover, ohne dass die Klappe
   optisch am Knopf klebt. */
.menue-gruppe { position: relative; }

/* Lueckenbruecke: unsichtbar, nur Hover-Traeger, faengt keine Klicks ab
   (kein Inhalt darunter im Kopfbereich). Hoehe = Klappenabstand. */
.menue-gruppe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

.menue-knopf {
  font-family: inherit;
  color: var(--text-gedaempft);
  background: none;
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.menue-knopf:hover,
.menue-gruppe:hover .menue-knopf,
.menue-gruppe:focus-within .menue-knopf {
  background: #8b1a1a;
  border-color: #8b1a1a;
  color: #fff;
}
.menue-pfeil { font-size: 0.7em; line-height: 1; }

.menue-klappe {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 17rem;
  padding: 0.5rem 0;
  background: #0d1f2d;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.menue-gruppe:hover .menue-klappe,
.menue-gruppe:focus-within .menue-klappe { display: block; }

/* Jahresgruppe ("2026") traegt seit 18.09.2026 (Uwe-Ruege 3b) dieselbe
   Rubrikenfarbe wie jeder andere Spalten-/Rubriktitel des Auftritts —
   Champagner auf Bebas Neue, wie .rechner thead th ("Partei", "Prozent").
   Vorher: gedaempftes Beige mit opacity 0.75, dadurch wirkte die
   Jahreszahl wie ein abgeschalteter Menuepunkt statt wie eine Rubrik. */
.menue-titel {
  margin: 0;
  padding: 0.15rem 1rem 0.5rem;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
nav.site .menue-klappe a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
nav.site .menue-klappe a:first-of-type { margin-top: 0.35rem; }

/* Landesflagge rechts im Menueeintrag (Uwe-Auftrag 18.09.2026, Punkt 6).
   BEWUSST die LANDESFLAGGE, nicht das Landeswappen: Das Wappen ist in
   Mecklenburg-Vorpommern und Sachsen-Anhalt ein Hoheitszeichen, dessen
   Verwendung durch Private nach Landesrecht genehmigungspflichtig bzw.
   untersagt ist (§ 124 OWiG i.V.m. Landesrecht). Die Landesflagge darf
   jedermann verwenden — und in Sachsen-Anhalt traegt sie das Landeswappen
   ohnehin in der Mitte (§ 3 HzG LSA), in Berlin den Baeren des Wappens.
   Quelle der Dateien: Wikimedia Commons, PD-Flag-Germany.
   Format 5:3 wie amtlich; object-fit: cover haelt die Kante sauber, falls
   eine Datei ein abweichendes Seitenverhaeltnis mitbringt.
   SELEKTOR MIT header.site, nicht nur .menue-flagge: 'header.site img'
   (Spezifitaet 0-1-2) setzt das Kompass-Siegel auf 44x44 px und schlaegt
   eine reine Klasse (0-1-0) — die Flagge stand dadurch 44 px breit statt 28
   [gemessen ▸ 18.09.2026, getBoundingClientRect: 44,0 px]. */
header.site .menue-flagge {
  flex: 0 0 auto;
  width: 28px;
  height: 17px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  background: #0d1f2d;
}

/* ---------- Siegel und Marke sind der Weg zur Startseite ----------
   Stand hier bis 20.09.2026 nur in videos/portal.css und galt damit allein
   im Videoportal. Seit die Kopfleiste auf JEDER Seite dieselbe ist
   (Claude-Web-Kopfleiste.py, Uwe-Festlegung 20.09.2026), gehoert die Regel
   in die gemeinsame style.css -- sonst fiele das Siegel auf den Hauptseiten
   auseinander, weil dort portal.css nicht geladen wird. */
header.site .kopf-marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
header.site .kopf-marke:hover .marke { color: var(--gold-hell); }

/* ---------- Infopunkt (Uwe-Festlegung 20.09.2026) ----------
   Erklaertexte stehen nicht mehr vor den Videos, sondern hinter einem runden
   "i" neben der Ueberschrift. OHNE JAVASCRIPT gebaut (<details>/<summary>):
   ein Infopunkt, der nur mit Skript aufgeht, waere bei abgeschaltetem Skript
   eine Sackgasse -- dieselbe Entscheidung wie beim Wahlen-Menue (style.css).
   FARBE: Gold auf Siegelblau, dieselben Variablen wie die uebrige Seite. */

.titelzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.titelzeile h1, .titelzeile h2 { margin: 0; }

.infopunkt {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.infopunkt > summary {
  list-style: none;
  cursor: pointer;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--rahmen-gold);
  background: rgba(9, 53, 80, 0.75);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45rem;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.infopunkt > summary::-webkit-details-marker { display: none; }
.infopunkt > summary::marker { content: ""; }

/* AUFGEHEN BEI MOUSEOVER (Uwe-Festlegung 20.09.2026: "Info-Punkte sollen stets
   bei Mouseover geoeffnet werden, nicht bei Klick").
   Das <details>-Geruest BLEIBT — es bringt Tastaturbedienung und Vorlesesoftware
   mit, und ohne Maus (Telefon, Tablet) ist der Klick der einzige Weg. Die
   Sichtbarkeit steuert ab hier das Stilblatt selbst, deshalb muss auch das
   content-visibility des Browsers uebersteuert werden: Chrome versteckt den
   Inhalt eines geschlossenen <details> nicht nur ueber display. */
.infopunkt > .infotext { display: none; }
.infopunkt[open] > .infotext,
.infopunkt:hover > .infotext,
.infopunkt:focus-within > .infotext {
  display: block;
  content-visibility: visible;
}

/* NUR DER ZEIGER HAELT DIE TAFEL — auf Geraeten, die einen haben.

   UWE AM 23.09.2026, und es war die DRITTE Erteilung derselben Weisung:
   "Mein Weisung, dass die I-Punkt-Texte nur waehrend Mouseover aktiv sein
   sollen und automatisch schliessen sollen wenn die Mouse den Text bwz. den
   I-Punkt verlaesst wurden trotz mehrfacher Weisung immer noch nicht
   realisiert." Vorher: 20.09.2026 ("bei Mouseover, nicht erst beim Klick")
   und 22.09.2026 ("automatisch schliessen, wenn die Maus das geoeffnete Feld
   verlaesst").

   WAS BEIDE MALE GEBAUT WURDE UND WARUM ES NICHT REICHTE: Am 20.09. kam das
   OEFFNEN per `:hover` dazu, am 22.09. die Hover-Bruecke ueber die Luecke.
   Beides betraf den Weg zur Tafel. Das SCHLIESSEN blieb beide Male an
   `[open]` haengen — und `<details open>` ist ein Zustand, den kein
   Mauszeiger je wieder verlaesst. Wer einmal klickte, hatte die Tafel bis
   zum naechsten Klick stehen, egal wo die Maus war.
   `[gemessen ▸ 23.09.2026 am Gestaltungs-Gate, Startseite im Netz: 8 von 8
   Tafeln standen mit open=true offen, ohne dass ein Zeiger auf ihnen lag]`

   DIE TRENNUNG LAEUFT AM GERAET, NICHT AM ZUSTAND. Ohne Maus — Telefon,
   Tablet — ist der Klick der EINZIGE Weg zum Text; dort muss `[open]` die
   Tafel weiter halten, sonst waere sie unerreichbar. Deshalb bleibt die
   Regel oben stehen und wird hier allein fuer Zeigergeraete zurueckgenommen.
   Die Reihenfolge im Block ist tragend: erst `[open]` abschalten, DANN
   `:hover` wieder einschalten — beide haben dieselbe Spezifitaet, es
   entscheidet die spaetere Regel.

   `:focus-within` BLEIBT, und das ist kein Schlupfloch: Wer mit der Tastatur
   auf dem Punkt steht, HAT ihn im Zugriff — das ist der Zeiger des
   Tastaturnutzers. Vorlesesoftware und Tastaturbedienung bleiben damit
   vollstaendig. */
@media (hover: hover) and (pointer: fine) {
  .infopunkt[open] > .infotext { display: none; }
  .infopunkt:hover > .infotext,
  .infopunkt:focus-within > .infotext {
    display: block;
    content-visibility: visible;
  }

  /* AUSGENOMMEN, WAS IM FLUSS STEHT UND ABSICHTLICH OFFEN DASTEHT:
     Der Datenschutz-Hinweis neben dem Spieler ist beim ersten Aufschlagen
     entfaltet und klappt erst ein, wenn das Video startet
     (`hinweisEinklappen()` in videos/portal.js). Er schwebt nicht, sondern
     steht als Fliesstext in der Elementbox und verdeckt nichts — die
     Zeigerregel trifft ihn nicht. Wer ihn hier mit zuklappt, repariert
     nichts, sondern zerstoert eine gewollte Bauform. */
  .spieler-hinweis.entfaltet > .infopunkt[open] > .infotext {
    display: block;
    content-visibility: visible;
  }
}
.infopunkt > summary:hover,
.infopunkt[open] > summary {
  background: var(--gold);
  border-color: var(--gold);
  color: #1A1200;
}
.infopunkt > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.infopunkt .infotext {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.55rem);
  left: 0;
  width: min(30rem, 84vw);
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, #0d2740, #07131C);
  border: 1px solid var(--rahmen-gold);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-gedaempft);
  text-transform: none;
  letter-spacing: normal;
}
/* HOVER-BRUECKE ueber die Luecke zwischen "i" und Tafel
   (Uwe-Festlegung 22.09.2026: "die I-Punkte sollen mit Mouseover geoeffnet
   werden und automatisch schliessen, wenn die Maus das geoeffnete Feld
   verlaesst").

   DER GEMESSENE FEHLER: Die Tafel steht `position: absolute` und beginnt
   `calc(100% + 0.55rem)` unter dem Kreis — dazwischen liegen 9 px, in denen
   KEIN Element des Infopunkts sitzt `[gemessen ▸ 22.09.2026 im Browser an
   allen 8 Infopunkten der Startseite: Luecke 9 px, waagerechte Ueberlappung
   25 px]`. Weil die Tafel absolut positioniert ist, waechst die
   <details>-Box nicht mit; der Hover endet also beim Verlassen des Kreises.
   Wer die Maus zur Tafel fuehrt, durchquert die tote Zone, `:hover` faellt
   weg, und die Tafel verschwindet, BEVOR die Maus sie erreicht. Der Text
   war damit per Maus nicht lesbar — nur per Klick.

   DIE BRUECKE ist ein unsichtbares Pseudoelement, das genau diese Luecke
   ausfuellt. Etwas hoeher als die gemessenen 9 px, damit ein Rundungs- oder
   Zoomrest nicht wieder ein Loch reisst.

   NICHT dort, wo die Tafel IM FLUSS steht (`.spieler-hinweis.entfaltet` im
   Videoportal, 579 Fundstellen): Dort ist die Tafel ohnehin ausgeklappt und
   Teil der Elementbox, es gibt also keine Luecke.

   DIE BRUECKE HAENGT AM INFOPUNKT, NICHT AN DER TAFEL — und das ist der
   entscheidende Punkt, an dem der erste Versuch am 22.09.2026 scheiterte:
   Eine Bruecke als `.infotext::before` existiert nur, solange die Tafel
   sichtbar ist. Im Moment, in dem die Maus den Kreis verlaesst, faellt
   `:hover` weg, die Tafel geht auf `display: none` — und mit ihr das
   Pseudoelement. Die Bruecke war also genau dann verschwunden, wenn sie
   gebraucht wurde. `[gemessen ▸ Echttest am Abschrift-Punkt einer
   Videoseite: Maus in der Luecke landet auf HEADER.videokopf, Hover weg,
   Tafel unsichtbar]` Der erste Selbstbeleg war wertlos, weil im Test
   `open = true` gesetzt war — die Tafel war da, die Bruecke auch.

   Am `.infopunkt` haengend gilt: Solange die Maus auf dem Kreis steht, ist
   `:hover` wahr und die Bruecke existiert. Faehrt die Maus hinunter,
   betritt sie die Bruecke — die zum Infopunkt gehoert, also `:hover`
   aufrechterhaelt — und erreicht die Tafel ohne Unterbrechung. */
/* DIE BRUECKE HAENGT AM ZEIGER, NICHT AM ZUSTAND (berichtigt 23.09.2026):
   `[open]` stand hier bis heute mit in der Aufzaehlung. Auf einem Telefon
   erzeugte das unter jedem aufgeklickten Punkt eine unsichtbare Flaeche von
   0,75 rem, die Beruehrungen abfaengt — eine Bruecke ueber eine Luecke, die
   es ohne Zeiger gar nicht gibt. Sie gehoert genau dorthin, wo ein Zeiger
   die Luecke durchquert. */
.infopunkt:hover::after,
.infopunkt:focus-within::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}
/* Wo die Tafel im Fluss steht, gibt es keine Luecke und damit nichts zu
   ueberbruecken (Videoportal, 579 Fundstellen). */
.spieler-hinweis.entfaltet > .infopunkt:hover::after,
.spieler-hinweis.entfaltet > .infopunkt:focus-within::after { display: none; }

.infopunkt .infotext p { margin: 0 0 0.6rem; }
.infopunkt .infotext p:last-child { margin: 0; }
.infopunkt .infotext .kicker { color: var(--gold); font-size: 0.86rem; }
.infopunkt .infotext .claim { color: var(--gold); font-weight: 600; }
.infopunkt .infotext .zahl { font-size: 0.86rem; }
.infopunkt .infotext a { color: var(--gold); }
.infopunkt .infotext a:hover { color: var(--gold-hell); }

/* Nah am rechten Rand kippt die Tafel nach links, sonst ragt sie hinaus.

   DIE KIPPRICHTUNG FOLGT DER SPALTENZAHL, nicht dem Gefühl: Das Säulenraster
   steht bei 4 Spalten (ab 1000 px), 2 Spalten (620–1000 px) und 1 Spalte
   (darunter). Die Tafel ist 480 px breit, eine Karte gut 300 — jede Tafel in
   der rechten Hälfte ihres Rasters muss also nach links aufgehen, sonst
   steht sie außerhalb des Fensters und ist wieder unsichtbar. Die
   Umbruchpunkte sind dieselben wie bei `.saeulen`; wer dort einen ändert,
   ändert ihn hier mit. */
/* Nur im mehrspaltigen Raster — schmaler heftet die Klemmung weiter unten
   die Tafel ans Fenster, und diese Regel wuerde sie mit ihrer hoeheren
   Spezifitaet wieder auf den Kreis zurueckziehen. */
@media (min-width: 621px) {
  .regal-kopf .infopunkt .infotext { left: 0; right: auto; }
}

/* 4 Spalten: Karte 3 und 4 stehen rechts */
@media (min-width: 1001px) {
  .saeulen .saeule:nth-child(n+3) .infotext { left: auto; right: 0; }
}
/* 2 SPALTEN: AUCH HIER TRAEGT DAS KIPPEN NICHT.

   `[gemessen ▸ 23.09.2026, Startseite bei 768 px: eine Tafel ragte 28 px
   nach rechts hinaus — links 316, rechts 796 bei 768 px Fenster, Tafel
   480 px]`

   WARUM DIE KIPPREGEL DEN FALL NICHT FING: Sie schliesst von der
   ZAEHLPOSITION im Raster auf die BILDSCHIRMSEITE — jede gerade Karte gilt
   als rechte. Im zweispaltigen Raster stimmt das fuer die Karten 2 und 4,
   aber eine 480-px-Tafel braucht mehr Platz, als eine 768-px-Seite links
   ODER rechts hergibt. Die Zaehlposition ist eine Annahme ueber den
   Bildschirm, keine Messung an ihm — und sie bricht, sobald die Tafel
   breiter wird als eine halbe Seite.

   DESHALB DERSELBE BEZUGSWECHSEL WIE AM TELEFON, nur milder: Die Tafel
   bleibt schwebend, wird aber am FENSTER ausgerichtet statt am Punkt und
   behaelt ihre Lesebreite. `max-width` haelt sie davon ab, auf einem
   Tablet die ganze Seite einzunehmen; `margin: 0 auto` setzt sie mittig.
   Die Kippregel darunter entfaellt ersatzlos — es gibt keine Kippseite
   mehr, weil es keinen Punkt-Anker mehr gibt. */
@media (min-width: 621px) and (max-width: 1000px) {
  /* Dieselbe gemessene Oberkante wie im Telefonfall eine Regel weiter unten —
     der Grund steht dort ausgeschrieben. */
  .infopunkt > .infotext {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: var(--tafel-oben, auto);
    bottom: var(--tafel-unten, 0.75rem);
    width: auto;
    max-width: 34rem;
    margin: 0 auto;
    max-height: 76vh;
    overflow-y: auto;
    z-index: 200;
  }

  /* Was im Fluss steht, bleibt im Fluss — siehe die Begruendung bei der
     Telefon-Klemmung. */
  .spieler-hinweis.entfaltet > .infopunkt > .infotext {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: 62ch;
    margin: 0;
    max-height: none;
    overflow-y: visible;
    z-index: auto;
  }
}
/* 1 SPALTE: KIPPEN HILFT NICHT MEHR — DIE TAFEL WIRD ANS FENSTER GEHEFTET.

   UWE AM 23.09.2026: "Die aufgeklickten I-Punkte werden im Handy ausserhalb
   des Bildschirms geoeffnet."

   `[gemessen ▸ 23.09.2026 am Gestaltungs-Gate gegen dieweltklarsehen.de,
   Startseite bei 390 px im Geraetemodus: ALLE ACHT Tafeln lagen ausserhalb
   des Fensters — vier ragten 173/254/184/217 px nach rechts hinaus, vier
   begannen 116/41/108/75 px links davor. Bei 768 px noch eine mit 28 px.
   Tafelbreite 328 px in einem 390-px-Fenster: sie PASST, sie stand nur
   falsch.]`

   WARUM DIE BISHERIGE REGEL DAS NICHT LOESEN KONNTE, und das ist der Kern:
   Sie kippte die Tafel von `left: 0` auf `right: 0`. Beide Kanten beziehen
   sich aber auf den `.infopunkt` — einen Kreis von 1,55 rem. Ein Anker, der
   25 px breit ist und nichts vom Fenster weiss, kann das Fenster nicht
   einhalten: `right: 0` zieht die 328 px breite Tafel immer um gut 300 px
   nach links, gleich wo der Kreis steht. Steht er links, faellt sie links
   heraus; steht er rechts, reicht es knapp; bei `left: 0` faellt sie rechts
   heraus. Es gibt in einer Spalte KEINE Kippseite, die beides schafft.

   DIE ABHILFE IST EIN ANDERER BEZUG, keine andere Kippseite. `position:
   fixed` loest die Tafel vom Kreis und heftet sie an das Fenster; mit
   `left`, `right` UND `bottom` sind alle drei kritischen Kanten gesetzt.
   Damit KANN sie nicht mehr hinausragen — nicht bei einem langen Titel,
   nicht bei einer neuen Karte, nicht in einer Spaltenzahl, an die niemand
   gedacht hat. Die Lage haengt ab hier nicht mehr davon, wo der Punkt sitzt.

   NACH UNTEN GEHEFTET, nicht mittig: Am Telefon liegt der Daumen unten, und
   eine von unten aufsteigende Tafel verdeckt die Stelle nicht, die man
   gerade angetippt hat. `max-height` haelt sie im Bild, die eigene
   Bildlaufleiste macht auch lange Texte lesbar.

   DIE KIPPREGELN DARUEBER GELTEN AB HIER NUR NOCH FUER MEHRSPALTIGE RASTER
   (siehe `min-width: 621px` bei der Regalkopf-Regel) — sonst ueberschriebe
   `.regal-kopf .infopunkt .infotext` mit seiner hoeheren Spezifitaet die
   Klemmung wieder auf `left: 0`. */
@media (max-width: 620px) {
  /* DIE TAFEL GEHOERT AN DEN PUNKT, NICHT AN DEN FENSTERBODEN
     (Uwe-Ruege 23.09.2026, 21:31: "auf handys erscheint das I-Punkt-Textblock
     viel zu weit unten").

     MEIN EIGENER KONSTRUKTIONSFEHLER, und er ist die Kehrseite des Fixes von
     20:00: Um die Tafel sicher im Fenster zu halten, habe ich sie mit
     `bottom: 0.6rem` an den unteren Rand geheftet. Damit war sie zwar immer
     sichtbar — aber immer an derselben Stelle, unabhaengig vom angetippten
     Punkt. `[gemessen ▸ 23.09.2026 im Netz, Startseite bei 390x844 px: alle
     vier Saeulentafeln standen bei top 566 px; beim vierten Punkt lagen
     1227 px zwischen Kreis und Text]`

     DER BEZUG WAR RICHTIG, DIE KANTE FALSCH. `position: fixed` bleibt — es
     ist der einzige Weg, der die waagerechte Lage vom 25 px breiten Kreis
     loest. Aber die senkrechte Kante ist ab hier eine GEMESSENE: `portal.js`
     setzt `--tafel-oben` auf die Unterkante des angetippten Punkts und
     klemmt nur dann nach oben, wenn die Tafel sonst unten hinausliefe.

     OHNE SKRIPT bleibt der Rueckfallwert `bottom: 0.6rem` — die Tafel steht
     dann wieder am Boden. Das ist schlechter platziert, aber vollstaendig
     lesbar; der Bedienweg existiert also auch ohne JavaScript (dieselbe
     Ueberlegung wie beim Datenschutzhinweis und beim Aufklappmenue). */
  .infopunkt > .infotext {
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    top: var(--tafel-oben, auto);
    bottom: var(--tafel-unten, 0.6rem);
    width: auto;
    max-width: none;
    max-height: 72vh;
    overflow-y: auto;
    z-index: 200;
  }

  /* Was im Fluss steht, wird nicht geheftet: Der Spieler-Hinweis der
     Videoseite ist Fliesstext neben dem Bild (videos/portal.css setzt ihm
     `position: static`) und darf nicht als schwebende Tafel ans Fenster
     springen. */
  .spieler-hinweis.entfaltet > .infopunkt > .infotext {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    overflow-y: visible;
    z-index: auto;
  }
}

/* ---------- Kanalband: der schmale Kopf der Startseite ----------

   E5 (Uwe, zweite Durchsicht 20.09.2026), woertlich: "Ein Markenbild, dass
   die Haelfte des Bildschirms nutzt ist Unsinn. Die Webseite ist vorrangig
   ein Videoportal und das muss auch klar und deutlich auf der Startseite zum
   Ausdruck kommen. Der Besucher erwartet Videos und kein Markenbild. YT
   macht es doch sehr erfolgreich vor."

   GEMESSENER ANLASS: Der bisherige .hero war bei 1400x900 Fensterhoehe
   459 px hoch, zusammen mit der Kopfleiste 531 px von 900 -- 59 Prozent des
   Bildschirms, bevor der erste Inhalt begann. Am Telefon (390 px breit) war
   er 749 px hoch, also praktisch der ganze Bildschirm
   [gemessen ▸ 20.09.2026, 10:56, Claude-Web-Geometrie.mjs].

   VORBILD IST UWES EIGENE KANALSEITE: Dort steht oben ein schmaler Kopf und
   direkt darunter beginnen die Videoreihen. Genau diese Ordnung baut dieser
   Abschnitt nach.
   NACHTRAG 20.09.2026, 21:47: Siegel und Kanalname sind aus diesem Band
   heraus, weil beide 8 px darueber schon in der Kopfleiste stehen. Was
   bleibt, ist die Funktionszeile -- Seitenname, Kurzzeile, Suche, Videozahl.

   DIE MOTTOZEILE IST HIER RAUS (E4: "hat sich erledigt"). Sie steht
   unveraendert im Kanalbanner und im og:image. */

/* ANORDNUNG UND HÖHE (Uwe, dritte Durchsicht 20.09.2026): "Den Text 'seit
   august…' auf die rechte Seite · Das Suchfeld in die Mitte · Die gesamte
   Höhe des Kopfblocks reduzieren. Etwa auf die Höhe des Logos + schmale
   Ränder oben und unten."
   Vorher 137 px bei 1400 px Fensterbreite [gemessen ▸ 20.09.2026, 11:20],
   mit Siegel dann 89 px [gemessen ▸ 20.09.2026, 21:52].
   Das Polster ist deshalb auf 0.45rem gesetzt. Seit das Siegel draussen ist,
   gibt der Textblock die Höhe vor (Überschrift + Unterzeile bei enger
   Zeilenhöhe) — die frühere Untergrenze von 72 px Siegelhöhe gilt nicht
   mehr, das Band darf flacher werden. */
.kanalband {
  background: linear-gradient(180deg, var(--siegel-blau) 0%, var(--siegel-blau-tief) 100%);
  border-bottom: 1px solid var(--rahmen-gold-zart);
  padding: 0.45rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
}

/* DAS SIEGEL IST HIER RAUS (Uwe-Befund 20.09.2026, 21:47: "2 x das Logo und
   die Firma übereinander"). Es stand 72x72 px an left 24 — senkrecht bündig
   unter dem 44x44-Siegel der Kopfleiste. Die Marke traegt jetzt allein die
   Kopfleiste, dieses Band traegt die Funktion. Die Regel wird geloescht und
   nicht nur der Bildverweis entfernt, damit kein verwaister Selektor
   zurueckbleibt, den eine spaetere Aenderung fuer gueltig haelt. */

.kanalband-text { flex: 0 1 auto; min-width: 0; }

.kanalband-text h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.1;
  color: #FFFFFF;
}

.kanalband-zeile {
  margin: 0.15rem 0 0;
  color: var(--text-gedaempft);
  font-size: 0.92rem;
  line-height: 1.3;
}

/* A17: die Zahl hält Claude-DWKS-Portal-Bau.py zwischen den Marken
   <!--VIDEOZAHL--> nach -- sie wird nie von Hand getippt.
   Seit der dritten Durchsicht steht sie GANZ RECHTS: margin-left:auto drückt
   sie an den Rand, ohne dass eine Breite geraten werden müsste. */
.kanalband-zahl {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  text-align: right;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 1rem;
  white-space: nowrap;
}

/* Das Suchfeld sitzt in der MITTE — und zwar in der Mitte des FENSTERS,
   nicht in der Mitte des Restplatzes. Mit auto-Rändern allein landete es bei
   x = 860 statt 700 [gemessen ▸ 20.09.2026, 13:10], weil links Siegel und
   Wortmarke mehr Raum brauchen als rechts die Videozahl. Ab 1000 px wird es
   deshalb aus dem Fluss genommen und auf die halbe Breite gesetzt; darunter
   bricht das Band ohnehin um, dort gilt wieder der normale Fluss. */
.kanalband .suchleiste { margin: 0 auto; flex: 0 1 24rem; }

/* ZWISCHEN 1000 UND 1280 px wird das Suchfeld schmaler, damit die Reihe
   einzeilig bleibt. Nachgerechnet bei 1100 px: Rand 24 + Siegel 72 + 21 +
   Wortmarke ~350 + 21 + Suchfeld 384 + 21 + Videozahl 213 + Rand 24 = 1130 px
   — 30 px zu viel, und das Band brach auf 136 px auf. Mit 18rem statt 24rem
   bleiben 1034 px und das Band misst wieder 87 px. */
@media (min-width: 1001px) and (max-width: 1280px) {
  .kanalband .suchleiste { flex: 0 1 18rem; }
  /* Und die Wortmarke bekommt eine Grenze, sonst verdraengt sie die
     Videozahl in eine zweite Zeile. Gemessen bei 1100 px: Wortmarke 484 px,
     Summe aller Teile 1203 px — die Zahl rutschte auf top 172, das Band
     wurde 136 px hoch. Mit 22 rem sind es 1071 px, alles bleibt in einer
     Reihe, und der zweizeilige Umbruch der Unterzeile (69 px) bleibt unter
     der Siegelhoehe von 72 px, gibt dem Band also keine zusaetzliche Hoehe. */
  /* `flex: 1 1 0` statt einer weiteren festen Zahl: Der Textblock nimmt den
     RESTPLATZ und schrumpft mit, statt an einer geratenen Breite zu kleben.
     Mit festen 22 rem blieb bei 1024 px genau 12 px zu wenig uebrig — und
     die naechste Bildschirmgroesse haette wieder einen eigenen Wert
     gebraucht. Eine Rechnung, die sich selbst anpasst, ist einer Tabelle von
     Sonderfaellen vorzuziehen. */
  .kanalband-text { flex: 1 1 0; min-width: 0; max-width: 22rem; }
}

/* SCHWELLE 1280 px, NICHT 1001 (nachgemessen 20.09.2026, 13:50): Bei
   1100 px blieben dem Textblock rechnerisch 222 px, die Wortmarke lief
   dreizeilig um und das Band wurde 138 statt 87 px hoch -- genau der
   Platz, den E5 zurueckgewinnen sollte. Unterhalb von 1280 px gilt
   deshalb wieder der Fluss: das Suchfeld sitzt dann in der Mitte des
   RESTPLATZES statt in der des Fensters. Das ist der ehrlichere
   Kompromiss -- ein flaches Band mit leicht versetztem Suchfeld ist
   besser als ein mittiges Suchfeld in einem doppelt hohen Band. */
@media (min-width: 1281px) {
  .kanalband { position: relative; }
  .kanalband .suchleiste {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24rem;
    margin: 0;
  }
  /* Das Suchfeld liegt aus dem Fluss und weiss deshalb nichts vom Textblock
     links daneben — ohne diese Grenze lief die Unterzeile unter das Feld und
     verschwand dahinter [gemessen ▸ 20.09.2026, 13:45, Vorschau bei 1400 px].
     Die Rechnung ist keine Schaetzung: halbe Fensterbreite minus halbe
     Suchfeldbreite (12rem) minus die Abstaende (Seitenrand 1.5rem,
     Sicherheitsabstand 1.2rem). Der Summand fuer das Siegel (72px + 1.3rem
     Spalte) ist am 20.09.2026 entfallen, als das Siegel aus dem Band
     genommen wurde — eine Rechnung, die einen entfernten Teil weiter
     abzieht, verschenkt genau dessen Breite. */
  .kanalband-text { max-width: calc(50% - 12rem - 2.7rem); }
}

@media (max-width: 760px) {
  .kanalband { padding: 0.9rem 1rem; gap: 0.7rem; }
  .kanalband-zeile { font-size: 0.88rem; }
  /* portal.css stellt .suchleiste am Telefon senkrecht (Feld ueber Knopf).
     Im Kanalband kostet das gemessen 110 px Bauhoehe, und genau die sollen
     die Videos bekommen (E5). Hier bleibt sie deshalb waagerecht. */
  .kanalband .suchleiste { flex: 1 1 100%; flex-direction: row; }
  .kanalband .suchleiste button { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* Die Startseite fuehrt dieselben Videoreihen wie das Portal. Sie beginnen
   direkt unter dem Kanalband, ohne die 4rem Polsterung, die 'main' sonst
   traegt -- sonst waere der Platzgewinn aus E5 gleich wieder verschenkt. */
main.kanalstart { max-width: 84rem; padding: 1.4rem 1.5rem 2.5rem; }
main.kanalstart > .regal:first-child { margin-top: 0; }
main.kanalstart .intro { margin-top: 3rem; }

/* ---------- Hero: Zitat des Kanalbanners ---------- */

.hero {
  background: radial-gradient(130% 120% at 50% 30%, var(--siegel-blau) 0%, #072A40 55%, var(--siegel-blau-tief) 100%);
  padding: 3.2rem 1.5rem 2.8rem;
}

.banner-panel {
  /* 66rem statt 62rem seit 07.09.2026: die vier benannten Säulen brauchen
     Platz, ohne den die Mottozeile umbricht (gemessen: 497 px Textbreite). */
  max-width: 66rem;
  margin: 0 auto;
  border: 2px solid var(--rahmen-gold);
  border-radius: 16px;
  background: rgba(4, 22, 34, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  padding: 2.2rem 3.2rem;
  display: flex;
  align-items: center;
  /* 2.6rem statt 3rem: der Abstand wirkt jetzt zwischen VIER Kindern
     (Siegel, Wortmarke, Trenner, Säulen). Gemessen 07.09.2026: bei 3rem
     blieben der Mottozeile 399 px bei 407 px Bedarf — sie brach um. */
  gap: 2.6rem;
  position: relative;
  overflow: hidden;
}

.banner-panel img.kompass {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

.banner-text h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: #FFFFFF;
}

.banner-text .motto {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  color: var(--gold);
  /* Obergrenze 1.4rem statt 1.6rem und engere Sperrung: hält die Zeile
     neben den Säulennamen einzeilig — wie im Kanalbanner. */
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  letter-spacing: 0.24em;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rahmen-gold-zart);
}

/* Vier benannte Säulen rechts im Panel — Zitat aus dem Kanalbanner.
   Bis 06.09.2026 standen hier vier unbeschriftete Striche; das neue
   Kanalbanner (live seit 06.09.2026) nennt die Säulen beim Namen,
   die Startseite zieht das nach. Namen nach der Uwe-Festlegung
   vom 04.09.2026 (WELT & MACHT / MEDIEN & WIRKLICHKEIT /
   STAAT & ALLTAG / SOUVERÄN HANDELN). */
.banner-trenner {
  flex: 0 0 1px;
  align-self: stretch;
  margin-left: auto;
  background: linear-gradient(180deg,
    rgba(198, 168, 109, 0) 0%,
    var(--rahmen-gold) 22%,
    var(--rahmen-gold) 78%,
    rgba(198, 168, 109, 0) 100%);
}

.banner-saeulen {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.7rem;
  flex: 0 0 auto;
  display: grid;
  gap: 0.72rem;
}

.banner-saeulen li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
}

.banner-saeulen li span {
  width: 6px;
  height: 24px;
  border-radius: 2px;
  flex: 0 0 6px;
  box-shadow: 0 0 0 1px var(--rahmen-gold);
}

.banner-saeulen .b1 span { background: var(--s1); }
.banner-saeulen .b2 span { background: var(--s2); }
.banner-saeulen .b3 span { background: var(--s3); }
.banner-saeulen .b4 span { background: var(--s4); }

.hero-unterzeile {
  max-width: 62rem;
  margin: 1.6rem auto 0;
  text-align: center;
  color: var(--text-gedaempft);
  font-size: 1.05rem;
}

.hero-cta { text-align: center; margin-top: 1.3rem; }

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--text-dunkel);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.95rem 2.4rem;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.btn:hover { background: var(--champagner); color: var(--text-dunkel); }

/* ---------- Inhalt ---------- */

main {
  max-width: 66rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

section + section { margin-top: 4.5rem; }

section > .kicker { color: var(--gold); margin: 0 0 0.4rem; }

section h2 {
  font-size: 1.75rem;
  color: #FFFFFF;
  margin: 0 0 1.4rem;
}

.intro p {
  /* Uwe-Weisung 31.08.2026: Text nutzt die gesamte Feldbreite (main = 66rem),
     keine eigene Deckelung mehr. */
  margin: 0 0 1.25rem;
  color: var(--text-hell);
}

/* ABSCHNITT „ÜBER DEN KANAL": Aufzählung statt Absatzfolge, halber Zeilenabstand
   (Uwe-Festlegung 20.09.2026: "Die Zeilen mit Bulletpoints beginnen. und die
   Zeilenabstaende nur halb so grosse"). Der Seitengrundwert ist 1.75 — hier
   gilt 1.4, und der Abstand zwischen den Punkten faellt von 1.25rem auf
   0.55rem. Halbiert ist damit der ABSTAND, nicht die Schriftgroesse: eine
   halbierte Zeilenhoehe waere 0.88 und liesse die Zeilen ineinanderlaufen. */
.intro ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.intro ul li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0 0 0.55rem;
  line-height: 1.4;
  color: var(--text-hell);
}
.intro ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
}

.intro .herkunft {
  color: var(--text-gedaempft);
  font-size: 0.92rem;
  max-width: 46rem;
}

/* ---------- Säulen-Karten (Box-Norm + Säulenbalken) ---------- */

.saeulen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 2.2rem;
}

@media (max-width: 1000px) {
  .saeulen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .saeulen { grid-template-columns: 1fr; }
}

.saeule {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 2px solid var(--rahmen-gold);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  padding: 1.9rem 1.8rem 1.7rem;
  position: relative;
  /* KEIN overflow:hidden mehr (Uwe-Rüge 20.09.2026: „Die Infos hinter den
     i-Punkten … müssen aber auch sichtbar sein").
     Es stand hier, um den farbigen Balken an den runden Ecken zu beschneiden
     — und schnitt dabei den Infotext mit ab: Die Tafel ist 480 px breit, die
     Karte nur 305 px [gemessen ▸ 20.09.2026, 13:05]. Sichtbar blieb ein
     Drittel. Der Balken bekommt seine Rundung jetzt selbst, dann braucht die
     Karte keine Schere. */
}

.saeule::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9px;
  /* 12px statt der 14px der Karte: Der Balken sitzt INNEN hinter dem 2px
     starken Rahmen, seine Rundung muss also um genau diese Rahmenstärke
     kleiner sein, sonst blitzt an der Ecke der Kartengrund durch. */
  border-radius: 12px 0 0 12px;
}
.saeule.s1::before { background: var(--s1); }
.saeule.s2::before { background: var(--s2); }
.saeule.s3::before { background: var(--s3); }
.saeule.s4::before { background: var(--s4); }

.saeule .kicker { margin: 0 0 0.35rem; font-size: 0.95rem; }

/* AUFBAU DER SÄULENÜBERSCHRIFT (Uwe, dritte Durchsicht 20.09.2026). Gefordert
   ist diese Reihenfolge, Zeile für Zeile:
       Säule 1
       Die Kräfte hinter den Ereignissen   (bricht von selbst dreizeilig um)
       Welt & Macht
   Vorher stand beides in einer Zeile, getrennt durch einen Mittelpunkt — die
   Nummer ging darin unter. Sie steht jetzt als eigener Block darüber; der
   Mittelpunkt ist ersatzlos weg, er trennte nur noch optisch.
   Der Umbruch der mittleren Zeilen wird NICHT erzwungen: Er ergibt sich aus
   der Kartenbreite und passt sich damit jeder Spaltenzahl an. Erzwungene
   Umbrüche stünden bei zwei Spalten an der falschen Stelle.

   GILT ÜBERALL, NICHT NUR AUF DER KARTE: Derselbe Kicker steht auch im
   Rubrikkopf der Säulenseite und im Infopunkt der Videoreihen — der
   Generator liest ihn aus dieser einen Datei. Eine Regel, die nur unter
   `.saeule` greift, erzeugte dort „SÄULE 2WIE DEUTUNG ENTSTEHT"
   [gemessen ▸ 20.09.2026, 13:28, Säulenseite 2]. */
.kicker .saeule-nr {
  display: block;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.saeule.s1 .kicker { color: #6FB2DE; }
.saeule.s2 .kicker { color: #E0736F; }
.saeule.s3 .kicker { color: #D0A75E; }
.saeule.s4 .kicker { color: #A995DB; }

.saeule h3 {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  /* Kein nowrap mehr: "Medien & Wirklichkeit" (Kanalstand seit 04.09.2026)
     ist breiter als die Karte und würde sie sonst sprengen.
     TRENNGRENZE (Uwe-Befund 21.09.2026 "SE-HEN" im Videotitel): erst ab
     12 Zeichen trennen, mindestens 4 Zeichen vor und 4 nach dem Strich.
     Ohne diese Grenze gilt die CSS-Vorgabe 5/2/2 und bricht Kurzwörter.
     Volle Begründung: videos/portal.css, Abschnitt TRENNREGEL. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
}

.saeule .claim {
  color: var(--gold);
  font-size: 0.95rem;
  font-style: italic;
  margin: 0 0 0.9rem;
}

.saeule p.text {
  margin: 0;
  font-size: 0.97rem;
  color: var(--text-gedaempft);
  line-height: 1.65;
}

/* ---------- Baustellen-Hinweis ---------- */

.baustelle {
  margin-top: 2.4rem;
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 12px;
  background: rgba(9, 53, 80, 0.35);
  padding: 1.4rem 1.7rem;
  color: var(--text-gedaempft);
  font-size: 0.98rem;
}

/* Je Satz eine Zeile mit Aufzählungspunkt (Uwe, dritte Durchsicht
   20.09.2026). Der Punkt steht am ZEILENANFANG, nicht mitten im Satz. */
.baustelle .baustelle-kopf { margin: 0 0 0.7rem; }
.baustelle .baustelle-kopf strong { color: var(--gold); }
.baustelle ul { margin: 0; padding: 0; list-style: none; }
.baustelle li {
  position: relative;
  padding-left: 1.2rem;
  margin: 0 0 0.55rem;
  line-height: 1.6;
}
.baustelle li:last-child { margin-bottom: 0; }
.baustelle li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ---------- Fußzeile ---------- */

/* Standanzeige in der Fusszeile: bewusst klein und zurueckhaltend -- sie ist
   eine Pruefhilfe, keine Botschaft. Wer eine Seite lange offen haelt, erkennt
   daran, dass er eine aeltere Fassung vor sich hat (Fehlerklasse 31.08.2026).
   Seit A14 steht sie in derselben Zeile wie alles uebrige. */
.seitenstand { font-size: 0.78rem; opacity: 0.6; }

/* A14 (Uwe, zweite Durchsicht 20.09.2026): "Die Fusszeile soll einzeilig und
   deutlich flacher werden und fest am unteren Bildschirmrand stehen."
   Vorher 201 px hoch und dreizeilig [gemessen ▸ 20.09.2026, 1400x900].

   WARUM position:sticky UND NICHT position:fixed -- obwohl die Pruefanalyse
   fixed benutzt: Eine feste Leiste liegt AUSSERHALB des Textflusses; der
   Rumpf braucht dann eine Polsterung in genau ihrer Hoehe, und diese Hoehe
   ist keine Konstante (am Telefon bricht die Zeile um). Eine falsch
   geschaetzte Polsterung verdeckt entweder die letzte Textzeile oder laesst
   eine Luecke. Sticky loest dasselbe ohne jede Rechnung: die Leiste bleibt
   beim Scrollen am unteren Rand stehen, bleibt aber im Fluss -- es kann
   strukturell nichts darunter verschwinden. */
footer.site {
  position: sticky;
  bottom: 0;
  z-index: 8000;
  background: var(--siegel-blau-tief);
  border-top: 1px solid var(--rahmen-gold-zart);
  color: var(--text-gedaempft);
  text-align: center;
  padding: 0.45rem 1.5rem;
  font-size: 0.84rem;
  line-height: 1.5;
}

footer.site p { margin: 0; }
footer.site a { color: var(--text-gedaempft); margin: 0 0.15rem; }
footer.site a:hover { color: var(--champagner); }

/* Am Telefon passt die Zeile nicht in eine Zeile -- die Antwort darauf ist
   kleinere Schrift, NICHT weniger Inhalt. Impressum, Datenschutz und
   Kontaktadresse sind Pflichtangaben und werden nirgends ausgeblendet.
   Gemessen 20.09.2026 bei 390 px: 77 px in drei Zeilen -> 54 px in zwei. */
@media (max-width: 700px) {
  footer.site { font-size: 0.72rem; padding: 0.4rem 0.6rem; }
  footer.site a { margin: 0 0.05rem; }
}

/* ---------- Rechtstexte ---------- */

/* KEIN LEERRAUM VOR DER UEBERSCHRIFT (Uwe 21.09.2026: "Auch bei Ueber Uns ist
   oben zu viel Freiraum ... solche unzweckmaessige Platzverschwendung moechte
   ich nicht haben"). Gemessen bei 1400 px: Kopfleiste endet bei 72 px, die
   Ueberschrift begann bei 150 px -- 78 px Nichts, dazu der Eigenabstand des
   h1. Die Kuerzung gilt fuer ALLE Rechtstexte (Impressum, Datenschutz, Ueber
   uns), weil es dieselbe Seitenklasse ist und dieselbe Regel gilt. */
.rechtstext {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.1rem 1.5rem 3.5rem;
}

.rechtstext h1 { color: #FFFFFF; font-size: 2rem; margin-top: 0; }
/* UEBERSCHRIFTFARBEN WIE AUF DEM GANZEN AUFTRITT (Uwe 21.09.2026: "Falsche
   Schriftfarbe bei einigen Ueberschriften"). Gemessen am Bestand: die zweite
   Ebene ist ueberall WEISS (`section h2`, `.ergebnis-karte h2`,
   `.diagramm-karte h2`, `.koalitions-karte h2`, `.rubrikkopf h1`), die dritte
   Ebene ist Champagner (`.koalitions-karte h3`). Im Rechtstext war es
   umgekehrt: h2 Champagner, h3 ohne eigene Farbe (geerbtes #F5F1E8). */
.rechtstext h2 { color: #FFFFFF; font-size: 1.15rem; margin-top: 2.4rem; letter-spacing: 0.06em; }
.rechtstext h3 { color: var(--gold); }
.rechtstext p, .rechtstext li { color: var(--text-hell); }
/* KURZE AUFZAEHLUNGEN ZWEISPALTIG — dieselbe Uwe-Regel wie auf der
   Ueber-uns-Seite, hier fuer jeden Rechtstext. Sie wird bewusst per Klasse
   gesetzt und nicht ueber `.rechtstext ul` pauschal: In derselben Datei
   stehen Listen mit ganzen Absaetzen je Eintrag (Datenschutz, Abschnitt 6),
   und die fuellen die Zeile ohnehin. Welche Liste welche ist, entscheidet
   kein Stilblatt, sondern die Messung — `Claude-Web-Gestaltungsregeln.mjs`
   meldet jede einspaltige Liste, deren laengster Eintrag weniger als
   60 Prozent der Zeile fuellt. */
.rechtstext ul.kurzliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.6rem;
  text-align: left;
  padding-left: 1.2rem;
}
.rechtstext ul.kurzliste li { margin: 0; }
@media (max-width: 700px) {
  .rechtstext ul.kurzliste { grid-template-columns: minmax(0, 1fr); }
}
.rechtstext .hinweis {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 1px solid var(--rahmen-gold);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 0.93rem;
  margin: 1.4rem 0;
  color: var(--text-gedaempft);
}

/* ---------- Sitzrechner (Web-App zum Selberrechnen) ---------- */

.rechner-seite { padding-top: 1.5rem; }
.rechner-seite h1 { margin-top: 0; }
.rechner-seite .anleitung { color: var(--text-hell); margin: 0.8rem 0 1.4rem; }

/* Aufklappbare Erklaerung — standardmaessig geschlossen */
details.erklaerung {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 1px solid var(--rahmen-gold);
  border-radius: 10px;
  margin: 1.4rem 0 2rem;
}

details.erklaerung > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1.2rem;
  color: var(--gold);
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  letter-spacing: 0.08em;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

details.erklaerung > summary::-webkit-details-marker { display: none; }
details.erklaerung > summary::before {
  content: "▸";
  color: var(--gold);
  transition: transform 0.15s ease;
  display: inline-block;
}
details.erklaerung[open] > summary::before { transform: rotate(90deg); }
details.erklaerung > summary:hover { color: var(--gold); }
details.erklaerung > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.erklaerung-inhalt {
  padding: 0 1.2rem 0.85rem;
  font-size: 0.93rem;
  color: var(--text-gedaempft);
}
.rechtstext .erklaerung-inhalt p { color: var(--text-gedaempft); margin: 0 0 0.8rem; }
.rechtstext .erklaerung-inhalt p:last-child { margin-bottom: 0; }

.rechner { margin: 2.2rem 0; overflow-x: auto; }

.rechner table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rechner th, .rechner td {
  padding: 0.6rem 0.7rem;
  text-align: center;
  border-bottom: 1px solid var(--rahmen-gold-zart);
}

.rechner th:first-child, .rechner td:first-child { text-align: left; }

.rechner thead th {
  background: var(--siegel-blau-tief);
  color: var(--gold);
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.rechner tfoot td { font-weight: 700; color: var(--gold); border-top: 2px solid var(--rahmen-gold); border-bottom: none; }

.rechner input {
  width: 5.5rem;
  background: var(--box-unten);
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 6px;
  color: var(--text-hell);
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  text-align: center;
}
.rechner input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.rechner input:disabled { opacity: 0.4; }

.sitze-zelle { font-weight: 700; color: #FFFFFF; }

.pruefung { margin-top: 0.8rem; font-size: 0.92rem; }
.pruefung.ok { color: #8FCB8F; }
.pruefung.fehler { color: #E0736F; }

.ergebnis-karte {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 2px solid var(--rahmen-gold);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin: 2.4rem 0;
}

.ergebnis-karte h2 { margin-top: 0; font-size: 1.3rem; color: #FFFFFF; }

.ergebnis-karte dl { margin: 0; display: grid; gap: 0.9rem; }
.ergebnis-karte dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rahmen-gold-zart); padding-bottom: 0.6rem; }
.ergebnis-karte dl > div:last-child { border-bottom: none; padding-bottom: 0; }
.ergebnis-karte dt { color: var(--text-gedaempft); font-size: 0.95rem; }
.ergebnis-karte dd { margin: 0; font-weight: 700; color: var(--gold); font-size: 1.05rem; }
/* Die Antwortfarbe folgt der Frage, nicht der politischen Bewertung: JA auf
   "Absolute Mehrheit erreicht?" ist gruen, NEIN ist rot -- dieselbe Logik wie
   in der Spalte "ueber 5 %?" darueber (Uwe-Festlegung 31.08.2026). Ohne
   Ergebnis bleibt der Wert im neutralen Champagner der uebrigen Zeilen. */
.ergebnis-karte .hervorgehoben dd.antwort-ja { color: #8FCB8F; }
.ergebnis-karte .hervorgehoben dd.antwort-nein { color: #E0736F; }

/* ---------- Tabelle: eigene Karte, klar vom Grund getrennt ---------- */

.rechner-karte {
  background: #0C1D2A;
  border: 1px solid var(--rahmen-gold);
  border-radius: 12px;
  padding: 0.55rem 0.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  /* Die KARTE ist der Scrollbereich, nicht das Formular darum. Sonst blieb ihr
     Rahmen am sichtbaren Bereich stehen, waehrend die Tabelle darunter
     hinauslief — der rechte Rand schnitt dann mitten durch die Spalte
     "ueber 5 %" (gemessen 31.08.2026: 4 px Ueberstand bei 375 px Viewport,
     59 px bei 320 px). Das Polster unten gibt der Fehlerblase Platz, damit
     sie am Rand des Scrollbereichs nicht abgeschnitten wird. */
  overflow-x: auto;
}

.rechner { overflow: visible; }

.rechner tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.035); }
.rechner tbody tr:hover { background: rgba(203, 162, 90, 0.09); }

/* Parteizeile: Farbpunkt statt Logo (Marken- und Urheberrecht, siehe Erklaerkasten) */
.partei-zelle { white-space: nowrap; }
.partei-punkt {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin-right: 0.55rem;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.partei-name { font-weight: 600; }

/* Zahlenfeld mit sichtbaren Steuerpfeilen daneben */
.zahl-feld { display: inline-flex; align-items: stretch; gap: 0.3rem; position: relative; }

/* Fehlerblase am Feld (Uwe-Weisung 31.08.2026): Die Meldung steht dort, wo
   getippt wird — unter der Tabelle sieht sie bei der Eingabe niemand. */
.feldfehler {
  position: absolute;
  top: 50%;
  left: calc(100% + 9px);
  transform: translateY(-50%);
  background: #B8201E;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  width: max-content;
  max-width: min(18rem, 60vw);
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.feldfehler.weich { background: #A57A31; color: #FFF8E7; }

/* Pfeilspitze zeigt auf das Feld — bei rechter Lage nach links, bei linker nach rechts */
.feldfehler::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #B8201E;
}
.feldfehler.weich::before { border-right-color: #A57A31; }

.feldfehler.links { left: auto; right: calc(100% + 9px); }
.feldfehler.links::before {
  right: auto;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #B8201E;
}
.feldfehler.weich.links::before { border-right-color: transparent; border-left-color: #A57A31; }

/* Anker fuer den Fall, dass noch kein Feld angefasst wurde: die Summenzelle */
.rechner td.summe-anker { position: relative; }
.rechner input[type="number"]::-webkit-outer-spin-button,
.rechner input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.pfeile { display: flex; flex-direction: column; gap: 2px; }
.pfeil {
  font-family: inherit;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0 0.34rem;
  min-height: 15px;
  color: var(--gold);
  background: rgba(203, 162, 90, 0.16);
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.14s;
}
.pfeil:hover { background: var(--gold); color: #1A1200; border-color: var(--gold); }
.pfeil:active { transform: translateY(1px); }

/* Spaltenwarnung: die ganze Spalte faerbt sich, wenn ihre Summe nicht stimmt */
.rechner td.spalte-warn, .rechner tfoot td.spalte-warn { background: rgba(224, 115, 111, 0.22); }
/* Zweite Stufe: kein Regelbruch, aber unglaubwuerdig — die Werte sind zu niedrig */
.rechner td.spalte-hinweis, .rechner tfoot td.spalte-hinweis { background: rgba(203, 162, 90, 0.20); }

/* Sprungknoepfe zwischen Eingabe und Ergebnis: Auf dem Handy liegen Tabelle,
   Balken, Ergebnis und Halbkreis weit auseinander -- ohne Anker verliert man
   beim Spielen mit den Werten jedes Mal die Stelle (Uwe-Befund 31.08.2026). */
.sprung-zeile { text-align: center; margin: 1.6rem 0; }
/* Der Weg nach unten sitzt in der Summenzeile, in der sonst leeren Zelle der
   Spalte "ueber 5 %?" (Uwe 31.08.2026). Dort steht er genau da, wo der Blick
   nach dem Eintragen ohnehin endet. Knopf und Zelle bleiben kompakt, damit die
   Spalte die Tabellenbreite nicht sprengt -- am Handy zaehlt jeder Pixel. */
.summe-sprung { text-align: center; padding: 0.3rem 0.2rem; }
.summe-sprung .sprung-knopf {
  font-size: 0.78rem;
  padding: 0.34rem 0.6rem;
  white-space: nowrap;
  letter-spacing: 0;
}
.sprung-knopf {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold);
  background: rgba(203, 162, 90, 0.08);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.14s;
}
.sprung-knopf:hover, .sprung-knopf:focus { background: var(--gold); color: #1A1200; text-decoration: none; }
.sprung-knopf:active { transform: translateY(1px); }
/* Ohne diesen Abstand klebt das Sprungziel unter der Fensterkante */
#rechner-form, #ergebnis-karte { scroll-margin-top: 1.2rem; }

/* Der Rueckweg-Knopf sitzt IN der Landtags-Karte, unten rechts (Uwe 31.08.2026).
   Rechtsbuendig im Fluss statt absolut positioniert: So kann er die Legende auf
   keiner Fensterbreite ueberdecken, und die Karte waechst um seine Hoehe mit. */
.sprung-ecke { margin: 1.1rem 0 0; text-align: right; }
.sprung-ecke .sprung-knopf { font-size: 0.88rem; padding: 0.45rem 1.1rem; }

/* Huerden-Spalte: gruen drin, rot draussen — ohne Lesen erfassbar */
.rechner td.ueber5 { font-weight: 700; }
.rechner td.ueber5.drin { background: rgba(143, 203, 143, 0.18); color: #8FCB8F; }
.rechner td.ueber5.draussen { background: rgba(224, 115, 111, 0.18); color: #E0736F; }

/* ---------- Diagramme ---------- */

.diagramm-karte {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 1px solid var(--rahmen-gold);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.diagramm-karte h2 { margin-top: 0; font-size: 1.15rem; color: #FFFFFF; }
.diagramm-hinweis { color: var(--text-gedaempft); font-size: 0.9rem; margin: 0 0 1.1rem; }

.balken-zeile {
  display: grid;
  grid-template-columns: 5.6rem 1fr 4.2rem;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}
.balken-zeile:last-child { margin-bottom: 0; }
.balken-name { font-size: 0.92rem; font-weight: 600; }
.balken-schiene { background: rgba(255, 255, 255, 0.07); border-radius: 4px; height: 20px; overflow: hidden; }
.balken { display: block; height: 100%; width: var(--anteil, 0%); border-radius: 4px; transition: width 0.18s ease, height 0.18s ease; }
.balken-wert { font-size: 0.92rem; font-weight: 700; text-align: right; color: var(--gold); }
.balken-zeile.raus { opacity: 0.55; }
.balken-zeile.raus .balken-wert { color: var(--text-gedaempft); }

/* ---------- Stehende Saeulen (Uwe-Wunsch 31.08.2026) ----------
   Dieselbe Markierung wie liegend, nur anders angeordnet: der Anteil steckt in
   der Custom Property --anteil und wird hier zur HOEHE statt zur Breite. Damit
   bleibt es EINE Zeichenfunktion im JavaScript, die nicht auseinanderlaufen kann.
   Die Saeulen wachsen von unten, weil die Schiene ihren Inhalt unten ausrichtet. */
.balken-diagramm.hochkant {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  height: 260px;
}
.balken-diagramm.hochkant .balken-zeile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.balken-diagramm.hochkant .balken-wert {
  order: 1;
  text-align: center;
  font-size: 0.85rem;
  white-space: nowrap;
}
.balken-diagramm.hochkant .balken-schiene {
  order: 2;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}
.balken-diagramm.hochkant .balken {
  width: 100%;
  height: var(--anteil, 0%);
  min-height: 3px;
}
.balken-diagramm.hochkant .balken-name {
  order: 3;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Unterhalb dieser Breite legen sich die Saeulen wieder hin.
   GEMESSEN 31.08.2026: Acht Saeulen brauchen mindestens 480 px Containerbreite,
   sonst ist eine Spalte nur 31 px breit -- der Wert "40,0 %" braucht aber 43 px
   und "Grüne" bricht auf zwei Zeilen. 480 px Container entsprechen rund 560 px
   Fensterbreite (48 px Seitenrand + 32 px Kartenrand); 620 px laesst Puffer. */
@media (max-width: 620px) {
  .balken-diagramm.hochkant { display: block; height: auto; }
  .balken-diagramm.hochkant .balken-zeile {
    display: grid;
    grid-template-columns: 4.6rem 1fr 3.6rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }
  .balken-diagramm.hochkant .balken-zeile:last-child { margin-bottom: 0; }
  .balken-diagramm.hochkant .balken-name { order: 0; text-align: left; font-size: 0.92rem; }
  .balken-diagramm.hochkant .balken-schiene {
    order: 0; height: 20px; flex: none; display: block; width: auto;
  }
  .balken-diagramm.hochkant .balken { width: var(--anteil, 0%); height: 100%; }
  .balken-diagramm.hochkant .balken-wert { order: 0; text-align: right; font-size: 0.92rem; }
}

.halbkreis-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
#halbkreis { width: min(100%, 400px); height: auto; }
.hk-zahl { fill: #FFFFFF; font-family: "Anton", "Arial Narrow", sans-serif; font-size: 34px; }
.hk-text { fill: #C9C2B4; font-size: 13px; }

/* Sitzzahl IM Farbstueck (Uwe-Weisung 15.09.2026): die Zahl steht zusaetzlich
   zur Legende im Segment, damit der Blick fuer die Sitzzahl die Grafik nicht
   verlassen muss. Anton ist schmal, dadurch passt die Zahl auch in kleine
   Segmente.
   GROESSE UND FARBE STEHEN BEWUSST NICHT HIER: beides rechnet das Skript je
   Segment aus — die Farbe nach hoechstem Kontrast, die Groesse gegen die
   SVG-Skalierung, damit am Handy nicht 12 px uebrigbleiben. Eine font-size an
   dieser Stelle wuerde das Attribut ueberschreiben und die Rechnung aushebeln. */
.hk-segmentzahl {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Zahl, die nicht in ihr Farbstueck passte: sie steht innerhalb des Bogens in
   der Parteifarbe, verbunden durch eine kurze Fuehrungslinie. */
.hk-segmentzahl.hk-verschoben { font-family: "Anton", "Arial Narrow", sans-serif; }

/* Drei Spalten: Farbpunkt, Name linksbuendig, Zahl rechtsbuendig.
   'display: contents' an den Listenpunkten macht deren Kinder zu Rasterzellen,
   damit die Zahlen ueber alle Zeilen hinweg fluchten (Uwe-Weisung 31.08.2026). */
.halbkreis-legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.55rem;
  row-gap: 0.4rem;
  align-items: center;
  min-width: 9rem;
}
.halbkreis-legende li { display: contents; }
.halbkreis-legende .legende-name { font-size: 0.95rem; color: var(--text-hell); }
.halbkreis-legende .legende-zahl { font-size: 0.95rem; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.halbkreis-legende .partei-punkt { margin-right: 0; }

/* ---------- Mobil ---------- */

@media (max-width: 760px) {
  .banner-panel {
    flex-direction: column;
    text-align: center;
    gap: 1.8rem;
    padding: 2.4rem 1.6rem;
  }
  .banner-panel img.kompass { width: 150px; height: 150px; }
  .banner-text .motto { letter-spacing: 0.2em; }
  .banner-trenner { display: none; }
  .banner-saeulen {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    padding-left: 0;
    gap: 0.6rem 1.5rem;
  }
  .banner-saeulen li { font-size: 1.02rem; }
  /* SCHMALE GERAETE: die Leiste hat seit dem 20.09.2026 auf JEDER Seite
     fuenf Punkte. Bei 390 px stapelten die sich zu fuenf Zeilen und die
     Kopfleiste wurde 205 px hoch — ein Fuenftel des Telefonbildschirms,
     bevor der erste Inhalt beginnt [gemessen ▸ 20.09.2026]. Kleinere
     Schrift und engeres Polster legen sie in zwei Zeilen.
     KEIN Aufklappmenue: das waere ein zweiter Bedienweg neben der
     Wahlen-Klappe und damit eine Designentscheidung, die Uwe gehoert. */
  header.site { padding: 0.6rem 0.9rem; gap: 0.6rem; }
  nav.site { gap: 0.25rem; row-gap: 0.25rem; justify-content: flex-end; }
  nav.site a, .menue-knopf {
    font-size: 0.8rem;
    padding: 5px 7px;
    letter-spacing: 0;
  }
  header.site .marke { display: none; }
  /* GEMESSEN 12.09.2026: Bei 320 px Breite ragte die am Menuepunkt
     ausgerichtete Klappe 52 px ueber den rechten Rand. Auf schmalen Geraeten
     wird sie deshalb am VIEWPORT zentriert statt am Knopf — sie bleibt dann
     unabhaengig von der Position des Menuepunkts im Bild. */
  .menue-klappe {
    position: fixed;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    width: min(20rem, calc(100vw - 1.5rem));
  }
  nav.site .menue-klappe a { white-space: normal; }
  .balken-zeile { grid-template-columns: 4.6rem 1fr 3.6rem; gap: 0.5rem; }
  /* GEMESSEN 31.08.2026: Mit "Zum Ergebnis" zwingt der Knopf die Huerden-Spalte
     auf 117 px, die Tabelle wird 361 px breit und sprengt die 356 px der Karte.
     Ohne das Wort "Zum" bleibt sie innerhalb. Der Text steht nur einmal im HTML,
     hier wird lediglich sein erster Teil ausgeblendet. */
  .summe-sprung .nur-breit { display: none; }
  .summe-sprung { padding: 0.25rem 0.15rem; }
  .summe-sprung .sprung-knopf { font-size: 0.72rem; padding: 0.3rem 0.4rem; }
  .halbkreis-feld { gap: 1rem; }
  .rechner-karte { padding: 0.45rem 0.3rem; }
  /* Gemessen 31.08.2026: ohne diese Werte braucht die Tabelle 484 px und muesste
     am Handy seitlich geschoben werden; damit sind es 339 px und sie passt. */
  .rechner th, .rechner td { padding: 0.45rem 0.3rem; font-size: 0.82rem; }
  .rechner input { width: 3.3rem; padding: 0.3rem 0.25rem; font-size: 0.85rem; }
  .pfeil { padding: 0 0.26rem; font-size: 0.55rem; min-height: 13px; }
  .partei-punkt { width: 11px; height: 11px; margin-right: 0.35rem; }
  .zahl-feld { gap: 0.2rem; }
  .diagramm-karte { padding: 1.2rem 1rem; }
}

/* Sehr schmale Geraete (iPhone SE, Android-Kleingeraete): noch enger, damit die
   Tabelle in den sichtbaren Bereich passt und nicht geschoben werden muss. */
@media (max-width: 400px) {
  .rechtstext { padding-left: 0.8rem; padding-right: 0.8rem; }
  .rechner th, .rechner td { padding: 0.4rem 0.22rem; font-size: 0.76rem; }
  .rechner input { width: 2.9rem; padding: 0.26rem 0.2rem; font-size: 0.8rem; }
  .pfeil { padding: 0 0.22rem; font-size: 0.5rem; min-height: 12px; }
  .partei-punkt { width: 9px; height: 9px; margin-right: 0.28rem; }
  /* 11rem zwangen den Hinweistext in drei Zeilen (gemessen 71 px hoch) und
     verdeckten drei Tabellenzeilen; 14rem passen in die 349 px breite Karte. */
  /* Rechts neben dem Feld ist am Handy weniger Platz als darunter — schmaler
     ansetzen, den Rest erledigt die Nachmessung im Skript. */
  .feldfehler { font-size: 0.7rem; padding: 0.25rem 0.4rem; white-space: normal; max-width: 9rem; left: calc(100% + 6px); }
  .feldfehler.links { left: auto; right: calc(100% + 6px); }
}


/* =======================================================================
   KOALITIONSRECHNER — Abschnitt unter dem Sitzrechner
   Farblogik: Die Farbe folgt dem BELEG, nicht der politischen Bewertung.
   gruen  = von jemandem ausdruecklich angestrebt
   gold   = keine Ausschlusserklaerung ermittelt (offen, NICHT "genehmigt")
   orange = dokumentierter Vorbehalt
   rot    = woertlich und datiert ausgeschlossen
   ======================================================================= */
.koalitions-karte {
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  border: 2px solid var(--rahmen-gold);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin: 2.4rem 0;
}
.koalitions-karte h2 { margin-top: 0; font-size: 1.3rem; color: #FFFFFF; }
.koalitions-karte h3 {
  font-size: 1.05rem; color: var(--gold);
  margin: 1.8rem 0 0.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rahmen-gold-zart);
}
.koalitions-karte h3:first-of-type { border-top: none; padding-top: 0; margin-top: 1.2rem; }

.koal-erklaerung { color: var(--text-gedaempft); font-size: 0.9rem; margin: 0 0 1rem; }
.koal-leer { color: var(--text-gedaempft); font-style: italic; margin: 0 0 1rem; }
.koal-allein {
  background: rgba(46, 125, 50, 0.18);
  border-left: 4px solid #4CAF50;
  padding: 0.8rem 1rem; border-radius: 6px; margin: 0 0 1.2rem;
}

/* ---------- Auswahlleiste (Umbau 19.09.2026) ----------
   Welche Gruppen erscheinen und wieviele Partner hoechstens erlaubt sind.
   Die Auswahl steht ueber dem Gitter, weil sie es steuert. */
.koal-steuer {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 1.4rem;
}
.koal-steuer-gruppe {
  border: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center;
}
.koal-steuer-gruppe legend {
  padding: 0; margin-right: 0.5rem; float: left;
  color: var(--gold); font-size: 0.82rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.koal-schalter {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--text-hell); font-size: 0.9rem; cursor: pointer;
  padding: 0.15rem 0.1rem;
}
.koal-schalter input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.koal-schalter-rund span { min-width: 1ch; }
/* Fliesstext, KEIN Flex-Container (Befund 19.09.2026: die <strong>-Teile wurden
   zu eigenen Flex-Items und der Satz zerriss in eine schmale Spalte). */
.koal-steuer-legende {
  flex-basis: 100%; margin: 0.35rem 0 0; font-size: 0.82rem;
  color: var(--text-gedaempft); line-height: 1.5;
}
.koal-steuer-legende strong { color: var(--gold); }
.koal-marke-probe {
  display: inline-block; width: 0; height: 0.8rem; vertical-align: -0.1rem;
  border-left: 3px dashed #FFFFFF; margin-right: 0.45rem;
}

.koal-steuer-wenn { border-style: dashed; margin-top: -0.8rem; }
.koal-steuer-wenn legend { color: var(--gold); }
.koal-wenn em { font-style: italic; color: var(--gold); }

/* ---------- Kachel mit Sitzbogen ---------- */
.koal-gitter { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.koal-huelle { display: block; }

.koal-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  width: 100%; text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rahmen-gold-zart);
  border-top-width: 4px;
  border-radius: 8px; padding: 0.9rem 0.8rem 0.8rem;
  color: var(--text-hell); font: inherit; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.koal-kachel:hover, .koal-kachel:focus-visible {
  background: rgba(255, 255, 255, 0.09); transform: translateY(-2px);
}
.koal-kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.koal-kachel.koal-angestrebt    { border-top-color: #4CAF50; }
.koal-kachel.koal-offen         { border-top-color: var(--gold); }
.koal-kachel.koal-belastet      { border-top-color: #E8912D; }
.koal-kachel.koal-ausgeschlossen{ border-top-color: #C0392B; background: rgba(192, 57, 43, 0.08); }
.koal-kachel.koal-duldung       { border-top-color: #6C8EBF; }

.koal-titel { font-weight: 700; color: #FFFFFF; font-size: 1.02rem; line-height: 1.25; }
.koal-bogen { width: 100%; max-width: 13rem; height: auto; display: block; margin: 0.2rem auto 0; }
.koal-bogen-zahl { fill: #FFFFFF; font-size: 30px; font-weight: 700; }
.koal-bogen-von  { fill: #C9C2B4; font-size: 13px; }
.koal-marke { stroke: #FFFFFF; stroke-width: 2.5; stroke-dasharray: 3 2; }
.koal-ausgeschlossen .koal-marke { stroke: #FFD9D2; }

.koal-zahl  { color: var(--gold); font-size: 0.95rem; }
.koal-zahl strong { font-size: 1.2rem; }
.koal-lage  { color: var(--text-gedaempft); font-size: 0.85rem; }
.koal-mehr  {
  margin-top: 0.4rem; font-size: 0.8rem; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Popup je Koalition ----------
   Die Belege standen bis zum 19.09.2026 in der Kachel und haben die Uebersicht
   zugeschuettet. Sie bleiben im Dokument, erscheinen aber erst auf Klick. */
.koal-dialog {
  max-width: 34rem; width: calc(100% - 2rem);
  background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
  color: var(--text-hell);
  border: 1px solid var(--rahmen-gold-zart);
  border-top: 4px solid var(--gold);
  border-radius: 10px; padding: 1.2rem 1.3rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.koal-dialog.koal-ausgeschlossen { border-top-color: #C0392B; }
.koal-dialog.koal-duldung        { border-top-color: #6C8EBF; }
.koal-dialog.koal-angestrebt     { border-top-color: #4CAF50; }
.koal-dialog::backdrop { background: rgba(0, 0, 0, 0.66); }
.koal-dialog-titel { margin: 0 0 0.3rem; font-size: 1.15rem; color: #FFFFFF; }
.koal-dialog-lage  { margin: 0 0 0.8rem; color: var(--gold); font-size: 0.95rem; }
.koal-dialog-lage strong { font-size: 1.15rem; }
.koal-dialog-partner { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.koal-dialog-partner li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.koal-punkt { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; }
.koal-dialog-ueber {
  margin: 1rem 0 0.2rem; font-size: 0.86rem; color: var(--gold);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-top: 1px solid var(--rahmen-gold-zart); padding-top: 0.7rem;
}
.koal-dialog-zu {
  margin-top: 1.1rem; background: var(--gold); color: var(--text-dunkel);
  border: none; border-radius: 6px; padding: 0.5rem 1.1rem;
  font: inherit; font-weight: 700; cursor: pointer;
}
.koal-dialog-zu:hover { background: var(--champagner); }

.koal-beleg {
  margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.45;
  color: var(--text-gedaempft); text-align: left;
}
.koal-paar { color: var(--text-hell); font-weight: 600; }
.koal-beleg q { display: block; margin-top: 0.25rem; font-style: italic; color: var(--text-hell); }
.koal-quelle { display: block; margin-top: 0.2rem; font-size: 0.78rem; opacity: 0.8; }
.koal-beleg-ausgeschlossen .koal-paar { color: #E9836F; }
.koal-beleg-belastet .koal-paar { color: #F0B26B; }
.koal-beleg-angestrebt .koal-paar { color: #8BD18E; }
.koal-beleg-offen .koal-paar { color: var(--text-gedaempft); }

.koal-dulder { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--text-gedaempft); text-align: left; }
.koal-dulder-ausgeschlossen { color: #E9836F; }
.koal-dulder-belastet { color: #F0B26B; }

/* ---------- Erlaeuterungen, aufklappbar ---------- */
.koal-fuss {
  margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rahmen-gold-zart);
  font-size: 0.86rem; color: var(--text-gedaempft); line-height: 1.55;
}
.koal-fuss > summary {
  cursor: pointer; color: var(--gold); font-weight: 600;
  font-size: 0.92rem; margin-bottom: 0.8rem;
}
.koal-fuss ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.koal-fuss li { margin-bottom: 0.5rem; }
.koal-fuss strong { color: var(--gold); }

@media (max-width: 640px) {
  .koalitions-karte { padding: 1.2rem 1rem; }
  .koal-gitter { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .koal-kachel { padding: 0.7rem 0.5rem 0.6rem; }
  .koal-titel { font-size: 0.92rem; }
  .koal-beleg { font-size: 0.82rem; }
  .koal-steuer { gap: 0.5rem 1rem; }
}

/* ---- HAUPTRECHNER Koalitionen (Uwe-Auftrag 19.09.2026) -------------------
   Eine grosse Grafik, anklickbare Parteipillen, hoechstens zwei Zeilen Text.
   Vorbild: ARD-Koalitionsrechner (tagesschau.de). Alles Erklaerende liegt
   dahinter in Klappen und Popups. */

.koal-haupt-feld { margin: 0.2rem 0 0.4rem; }
.koal-haupt-svg {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
}
.koal-haupt-teil { transition: opacity 0.15s ease; }
.koal-haupt-fuge { stroke: var(--box-unten, #141414); stroke-width: 2; }
.koal-haupt-marke { stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; }
.koal-haupt-zahl { fill: #FFFFFF; font-size: 44px; font-weight: 700; }
.koal-haupt-wort { fill: var(--champagner); font-size: 17px; }
.koal-haupt-ab   { fill: var(--text-gedaempft); font-size: 15px; }

.koal-haupt-status { margin: 0 0 0.3rem; text-align: center; font-size: 1.02rem; }
.koal-haupt-status strong { color: #FFFFFF; }
.koal-haupt-leer { color: var(--text-gedaempft); font-size: 0.95rem; }
.koal-haupt-ja   { color: #8BD18E; }
.koal-haupt-nein { color: var(--text-hell); }

.koal-haupt-lage {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.koal-lage-punkt {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  display: inline-block; background: var(--gold); flex: none;
}
.koal-lage-ausgeschlossen .koal-lage-punkt { background: #C0392B; }
.koal-lage-belastet      .koal-lage-punkt { background: #E8912D; }
.koal-lage-angestrebt    .koal-lage-punkt { background: #4CAF50; }
.koal-lage-offen         .koal-lage-punkt { background: var(--gold); }
.koal-lage-ausgeschlossen { color: #E9836F; }

.koal-haupt-mehr {
  display: block;
  margin: 0 auto 0.9rem;
  background: none;
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 999px;
  color: var(--gold);
  padding: 0.3rem 0.95rem;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.koal-haupt-mehr:hover { color: var(--champagner); border-color: var(--rahmen-gold); }
.koal-haupt-mehr:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Die Parteipillen: das eigentliche Bedienelement */
.koal-pillen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.2rem 0 1rem;
}
.koal-pille {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem 0.38rem 0.45rem;
  border: 1px solid var(--rahmen-gold-zart);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-hell);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.koal-pille:hover { transform: translateY(-1px); border-color: var(--rahmen-gold); }
.koal-pille:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.koal-pille-zeichen {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #FFFFFF; flex: none;
}
.koal-pille-an .koal-pille-zeichen { background: rgba(0, 0, 0, 0.28); color: inherit; }
.koal-pille-name { font-weight: 600; }
.koal-pille-zahl { opacity: 0.85; font-variant-numeric: tabular-nums; }
.koal-pille-an { font-weight: 700; }

.koal-haupt-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 0.2rem;
}
.koal-haupt-zurueck, .koal-haupt-detail {
  background: none;
  border: none;
  color: var(--gold);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rahmen-gold-zart);
}
.koal-haupt-zurueck:hover, .koal-haupt-detail:hover {
  color: var(--champagner); border-bottom-color: var(--rahmen-gold);
}
.koal-haupt-zurueck:focus-visible, .koal-haupt-detail:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Die Detailanalyse: zugeklappt, bis sie jemand aufruft */
details.koal-detail {
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--rahmen-gold-zart);
  padding-top: 0.9rem;
}
details.koal-detail > summary {
  cursor: pointer;
  list-style: none;
  color: var(--gold);
  font-weight: 600;
  padding: 0.35rem 0;
}
details.koal-detail > summary::-webkit-details-marker { display: none; }
details.koal-detail > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
details.koal-detail[open] > summary::before { transform: rotate(90deg); }
details.koal-detail > summary:hover { color: var(--champagner); }
details.koal-detail > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.koal-detail-hinweis {
  color: var(--text-gedaempft);
  font-size: 0.85rem;
  margin: 0.2rem 0 0.9rem;
}

/* Kleine Erlaeuterungsklappe unter einer Grafik-Ueberschrift.
   Ersetzt die frueheren festen Hinweiszeilen: derselbe Satz, nur auf Abruf. */
details.hinweis-klappe { margin: -0.4rem 0 1rem; }
details.hinweis-klappe > summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-gedaempft);
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
details.hinweis-klappe > summary::-webkit-details-marker { display: none; }
details.hinweis-klappe > summary::before { content: "ⓘ"; color: var(--gold); }
details.hinweis-klappe > summary:hover { color: var(--champagner); }
details.hinweis-klappe > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* AUFGEHEN BEI MOUSEOVER — dieselbe Uwe-Festlegung wie beim Infopunkt, hier
   am 22.09.2026 nachgezogen.

   WARUM SIE HIER FEHLTE, und das ist die eigentliche Lehre: Die Weisung
   "Info-Punkte sollen stets bei Mouseover geoeffnet werden" fiel am
   20.09.2026 und wurde noch am selben Tag umgesetzt — aber NUR beim
   `.infopunkt`. Die `hinweis-klappe` traegt dasselbe ⓘ-Zeichen, dieselbe
   Aufgabe und dieselbe Erwartung, stand aber auf einer anderen Seite und
   wurde deshalb nicht beanstandet. Genau die Fehlerklasse, gegen die
   Claude-Web-Gestaltungsregeln.mjs gebaut wurde: eine Festlegung wird dort
   umgesetzt, wo sie gefallen ist, statt im ganzen Auftritt.
   `[gemessen ▸ 22.09.2026: 14 hinweis-klappe auf den vier Sitzrechnern,
   KEINE mit Hover-Regel; 1.176 Infopunkte mit Hover]`

   KEINE BRUECKE NOETIG: Der Inhalt steht hier IM FLUSS, die <details>-Box
   waechst beim Aufgehen also mit und umschliesst ihn `[gemessen ▸ Box
   295 px hoch, Summary und Inhalt beide darin]`. Die 9 px zwischen Zeile
   und Text liegen INNERHALB der Box und tragen den Hover mit.

   DAS <details>-GERUEST BLEIBT: Es bringt Tastaturbedienung und
   Vorlesesoftware mit, und ohne Maus — Telefon, Tablet — ist der Klick der
   einzige Weg. `content-visibility` muss mit uebersteuert werden, weil
   Chrome den Inhalt eines geschlossenen <details> nicht nur ueber `display`
   versteckt. */
details.hinweis-klappe > *:not(summary) { display: none; }
details.hinweis-klappe[open] > *:not(summary),
details.hinweis-klappe:hover > *:not(summary),
details.hinweis-klappe:focus-within > *:not(summary) {
  display: block;
  content-visibility: visible;
}

/* UND AUCH HIER HAELT NUR DER ZEIGER — nachgezogen am 23.09.2026, und der
   Grund dafuer steht schon im Kommentar darueber: Am 22.09.2026 wurde das
   OEFFNEN per Mouseover an dieser Bauform nachgetragen, weil es zwei Tage
   zuvor nur am `.infopunkt` gelandet war. Das SCHLIESSEN waere jetzt
   dieselbe halbe Sache — Weisung dort umgesetzt, wo sie gefallen ist,
   `.hinweis-klappe` wieder aussen vor, bis sie jemand beanstandet.
   `[gemessen ▸ 14 hinweis-klappe auf den vier Sitzrechnern]`

   DER UNTERSCHIED ZUM INFOPUNKT und warum er hier nichts aendert: Dieser
   Text steht im Fluss und verdeckt nichts, er schiebt nur. Der Schaden ist
   also kleiner — aber die Weisung lautet nicht "verdecke nichts", sondern
   "der Text ist nur waehrend Mouseover aktiv". Gleiche Bauform, gleiche
   Erwartung, gleiche Regel. */
@media (hover: hover) and (pointer: fine) {
  details.hinweis-klappe[open] > *:not(summary) { display: none; }
  details.hinweis-klappe:hover > *:not(summary),
  details.hinweis-klappe:focus-within > *:not(summary) {
    display: block;
    content-visibility: visible;
  }
}
.rechtstext details.hinweis-klappe p {
  color: var(--text-gedaempft);
  font-size: 0.9rem;
  margin: 0.4rem 0 0;
}

/* Die Standzeile bleibt immer sichtbar: welche Zahlen stecken gerade drin.
   Sie ist Datenherkunft, kein Erlaeuterungstext. */
.datenstand {
  color: var(--text-gedaempft);
  font-size: 0.88rem;
  margin: 0.4rem 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rahmen-gold-zart);
}
.datenstand strong { color: var(--gold); font-weight: 600; }

@media (max-width: 640px) {
  .koal-haupt-zahl { font-size: 40px; }
  .koal-pille { font-size: 0.88rem; padding: 0.32rem 0.7rem 0.32rem 0.38rem; }
  .koal-haupt-status { font-size: 0.95rem; }
}

/* ---- Der Rechner passt auf EINEN Schirm (Uwe-Weisung 19.09.2026) ---------
   "Es muss so sein, dass auf einem normalen Bildschirm am PC oder am Laptop
   die Tabelle Koalitionsrechner komplett zu sehen ist, ohne dass man scrollen
   muss."

   ZWEITER ANLAUF, 16:51. Der erste setzte die Bedienung NEBEN die Grafik und
   holte dafuer Breite aus der Lesespalte. Das rechnete sich (489 px), sah aber
   ungewohnt aus - Uwe: "So finde ich es ein bisschen gewoehnungsbeduerftig."
   Sein Vorschlag ist einfacher und bleibt bei der vertrauten Anordnung:
     1. den Halbkreis flacher zeichnen  (Geometrie in koalitionsrechner.js)
     2. die Info-Klappe neben die Ueberschrift statt darunter
     3. Parteien in ein bis zwei Zeilen darunter
     4. Aufklapper und Sprungknopf in EINE Zeile
   Zusammen sparen die vier rund 220 px, ohne die Anordnung umzuwerfen. */

/* 1 - Kopfzeile: Ueberschrift und Info-Klappe nebeneinander */
.koal-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin-bottom: 0.5rem;
}
.koal-kopf h2 { margin: 0; }
.koal-kopf details.hinweis-klappe { margin: 0; }

/* 2 - Die Grafik haengt an der Fensterhoehe: auf einem flachen Fenster
       schrumpft sie mit, statt den Rest hinauszuschieben. */
.koal-haupt-svg { max-height: min(15rem, 34vh); }

/* 3 - Abschlusszeile: Aufklapper links, Sprungknopf rechts - eine Zeile
       statt zwei. Der Sprungknopf bleibt erreichbar (V1), er kostet nur
       keine eigene Zeile mehr. */
.koal-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rahmen-gold-zart);
}
.koal-abschluss details.koal-detail {
  flex: 1 1 22rem;
  margin: 0;
  border-top: none;
  padding-top: 0;
}
.koal-abschluss .sprung-ecke { margin: 0; flex: 0 0 auto; }

/* 4 - Flaches Fenster: jede Zeile zaehlt. */
@media (max-height: 720px) {
  .koalitions-karte { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .koal-haupt-svg { max-height: 30vh; }
  .koal-haupt-zahl { font-size: 36px; }
  .koal-haupt-status, .koal-haupt-lage { font-size: 0.93rem; margin-bottom: 0.25rem; }
  .koal-haupt-mehr { margin-bottom: 0.55rem; padding: 0.24rem 0.85rem; }
  .koal-pillen { margin: 0.15rem 0 0.55rem; gap: 0.4rem; }
  .koal-abschluss { margin-top: 0.7rem; padding-top: 0.6rem; }
}

/* 5 - Sehr flaches Fenster (unter 570 px Innenhoehe): zweite Stufe.
   Gemessen 19.09.2026 bei 1024x520, Berlin mit zwei Pillenzeilen: 549 px. */
@media (max-height: 570px) {
  .koal-haupt-svg { max-height: 25vh; }
  .koalitions-karte { padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .koal-kopf { margin-bottom: 0.3rem; }
  .koal-haupt-zahl { font-size: 32px; }
  .koal-haupt-wort { font-size: 15px; }
  .koal-haupt-status, .koal-haupt-lage { font-size: 0.89rem; margin-bottom: 0.18rem; }
  .koal-haupt-mehr { margin-bottom: 0.4rem; font-size: 0.82rem; padding: 0.2rem 0.75rem; }
  .koal-pille { padding: 0.24rem 0.6rem 0.24rem 0.3rem; font-size: 0.85rem; }
  .koal-pillen { gap: 0.3rem; margin: 0.1rem 0 0.4rem; }
  .koal-abschluss { margin-top: 0.55rem; padding-top: 0.5rem; }
}


/* ---------- Ueber-uns-Seite (Uwe-Auftrag 20.09.2026, 22:46) ----------
   Der Text stammt aus der geltenden YouTube-Kanalbeschreibung; die Seite
   ergaenzt ihn um das, was es nur hier gibt: Videoportal, Sitzrechner,
   Pruefanalyse. Gestaltet wird nur, was der Rechtstext nicht schon kann —
   die Mottozeile und die vier Saeulenfragen. Keine neue Farbwelt: die
   Saeulenfarben sind dieselben Variablen wie ueberall. */
/* TITEL UND MOTTO IN EINER ZEILE (Uwe 21.09.2026, derselbe Auftrag wie bei
   den Portalkoepfen am 20.09.: links WAS die Seite ist, rechts WAS sie sagt).
   Aus zwei Zeilen wird eine, ohne dass eine Angabe verloren geht; unter
   700 px faellt das Motto von selbst unter den Titel, weil die Zeile
   umbrechen darf. */
.ueberseite .seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  border-bottom: 1px solid var(--rahmen-gold-zart);
  padding-bottom: 0.5rem;
  margin-bottom: 1.4rem;
}
.ueberseite .seitenkopf h1 { margin: 0; }
.ueberseite .motto-zeile {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 1.15rem;
  margin: 0;
}
/* ZWEISPALTIG UND LINKSBUENDIG (Uwe 21.09.2026: "Auch den Punkt, dass
   Aufzaehlungen dieser Art 2-spaltig linksbuendig sein sollen, hatten wir
   schon mehrfach definiert"). Gilt fuer JEDE Aufzaehlung dieser Seite, nicht
   nur fuer die Saeulenfragen -- eine einspaltige Liste kurzer Eintraege
   verschenkt die halbe Zeilenbreite. Unter 700 px eine Spalte: 342 px auf
   zwei Spalten ergaeben zwei unleserliche Saeulen (dieselbe Grenze wie beim
   Rubrikkopf des Portals). */
.ueberseite ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.6rem;
  text-align: left;
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}
.ueberseite ul li { margin: 0; }
@media (max-width: 700px) {
  .ueberseite ul { grid-template-columns: minmax(0, 1fr); }
}
.ueberseite .saeulenfragen {
  list-style: none;
  padding: 0;
}
.ueberseite .saeulenfragen li {
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 3px solid var(--rahmen-gold-zart);
  margin: 0 0 0.3rem;
}
/* ZWEI ZEILEN STATT EINER (Uwe, Durchsicht 22.09.2026: "Nach dem Haupttitel
   wie 'Welt & Macht' muss ein Zeilenumbruch kommen"). Vorher stand der
   Saeulenname mit einem Gedankenstrich vor seiner Frage in derselben Zeile;
   der Umbruch fiel dann dorthin, wo die Spalte endete -- mitten in die Frage.
   Jetzt traegt der Name seine eigene Zeile, die Frage ihre. Der
   Gedankenstrich entfaellt ersatzlos: er verband zwei Teile EINER Zeile und
   haette als Zeilenanfang oder -ende gehangen. Dieselbe Zweiteilung wie im
   Portal, wo Titel (h3) und Claim (p) ebenfalls untereinander stehen. */
.ueberseite .saeulenfragen a { display: block; text-decoration: none; }
.ueberseite .saeulenfragen a:hover .saeule-name { color: var(--champagner); }
.ueberseite .saeule-name {
  display: block;
  font-weight: 700;
  color: var(--text-hell);
}
.ueberseite .saeule-frage {
  display: block;
  color: var(--text-gedaempft);
  margin-top: 0.1rem;
}
.ueberseite .saeulenfragen li:nth-child(1) { border-left-color: var(--s1); }
.ueberseite .saeulenfragen li:nth-child(2) { border-left-color: var(--s2); }
.ueberseite .saeulenfragen li:nth-child(3) { border-left-color: var(--s3); }
.ueberseite .saeulenfragen li:nth-child(4) { border-left-color: var(--s4); }
.ueberseite h3 { margin-top: 1.6rem; }