/* Wahl·Monitor – Wahlabend Niedersachsen 2026. Designplan: docs/design-wahlabend.md */

/* Schriften selbst gehostet (Ubuntu Font Licence, vendor/fonts/UFL.txt), Teilmengen latin + latin-ext */
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ubuntu-400-latin.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ubuntu-400-latin-ext.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/ubuntu-500-latin.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/ubuntu-500-latin-ext.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/ubuntu-700-latin.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/ubuntu-700-latin-ext.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ubuntu Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ubuntu-condensed-400-latin.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ubuntu Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ubuntu-condensed-400-latin-ext.woff2?v=64d12b820f6f") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Ersatzschrift mit angeglichenen Maßen: kein Springen, wenn Ubuntu nachgeladen wird */
@font-face { font-family: "Ubuntu Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 99.6%; ascent-override: 93.6%; descent-override: 19%; line-gap-override: 2.8%; }
@font-face { font-family: "Ubuntu Condensed Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 80.8%; ascent-override: 115.4%; descent-override: 23.4%; line-gap-override: 3.5%; }

:root {
  --tinte: #1E1530;
  --papier: #FFFFFF;
  --flaeche: #F6F3FA;
  --linie: #E7E2EE;
  --gedaempft: #6B6478;
  --lila: #502379;
  --lila-hell: #EFE7F6;
  --gelb: #FDC220;
  --zaehlt: #82D0F4;
  --zaehlt-hell: #E3F4FC;
  --fertig: #1BBE6F;
  --fertig-hell: #DDF6E9;
  --fehler: #E63E12;
  --warn-flaeche: #FFF5D9;
  --warn-rand: #E3A500;
  --leer: #D9D4DF;
  /* dunklere Stufen für schmale Balken und Punkte (mind. 3:1 gegen Weiß und Spur) */
  --zaehlt-stark: #1E7FB4;
  --fertig-stark: #15874F;
  --warn-stark: #B87900;
  --feldrand: #8F87A0;
  --sans: Ubuntu, "Ubuntu Fallback", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --cond: "Ubuntu Condensed", "Ubuntu Condensed Fallback", "Roboto Condensed", "Arial Narrow", Ubuntu, sans-serif;
  --breite: 1240px;
  --rand: 20px;
  --pfad-h: 52px;
  /* Abstandsskala (4-px-Raster): Blöcke, Zeilen, Faktenleisten nutzen nur diese Stufen */
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 24px;
  --a-6: 32px;
  --block-abstand: var(--a-6);
}
@media (max-width: 599px) { :root { --block-abstand: var(--a-5); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pfad-h) + 16px); }
body {
  margin: 0;
  font: 400 16px/1.5 var(--sans);
  color: var(--tinte);
  background: var(--papier);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lila); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; }
button, input, select { font: inherit; color: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gedaempft { color: var(--gedaempft); }
.skip {
  position: absolute; left: 8px; top: -80px; z-index: 3000;
  background: var(--gelb); color: var(--tinte); padding: 10px 14px; border-radius: 6px; font-weight: 500;
}
.skip:focus { top: 8px; outline: 3px solid var(--tinte); outline-offset: 2px; }

/* ── Kopf ─────────────────────────────────────────────── */
.kopf { background: var(--lila); color: #fff; }
.kopf a { color: #fff; }
.kopf :focus-visible { outline-color: var(--gelb); }
.kopf__in {
  max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand) 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marke live" "suche menue" "nav nav";
  gap: 6px 10px; align-items: center;
}
.marke { grid-area: marke; display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; min-width: 0; }
.marke__volt { font-weight: 700; font-size: 22px; line-height: 1; color: var(--gelb); letter-spacing: -.01em; }
.marke__txt { font-weight: 500; font-size: 15px; line-height: 1.2; }
.suche { grid-area: suche; position: relative; min-width: 0; }
.suche input {
  width: 100%; height: 44px; border: 0; border-radius: 6px; padding: 0 12px 0 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='%236B6478' stroke-width='2'/%3E%3Cpath d='M11.6 11.6l4.4 4.4' stroke='%236B6478' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 13px 50%;
  color: var(--tinte); font-size: 16px;
}
.suche input::placeholder { color: var(--gedaempft); }
.suche input:focus-visible { outline: 3px solid var(--gelb); outline-offset: 1px; }
.suchliste {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2500;
  margin: 0; padding: 6px 0; list-style: none; background: #fff; color: var(--tinte);
  border-radius: 8px; box-shadow: 0 14px 36px rgba(30, 21, 48, .28);
  max-height: min(70vh, 460px); overflow: auto; min-width: min(420px, calc(100vw - 2 * var(--rand)));
}
.suchliste li { padding: 9px 14px; cursor: pointer; min-height: 44px; }
.suchliste li[aria-selected="true"], .suchliste li:hover { background: var(--lila-hell); }
.treffer__name { display: block; font-weight: 500; }
.treffer__kontext { display: block; font-size: 13px; color: var(--gedaempft); }
.suchliste .suchliste__leer { cursor: default; color: var(--gedaempft); background: none; }
.kopf__nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 2px; }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px;
  font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.kopf__nav a:hover { background: rgba(255, 255, 255, .12); }
/* aktuelle Seite nicht nur über die Fläche: zusätzlich unterstrichen */
.kopf__nav a[aria-current="page"] { background: rgba(255, 255, 255, .18); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* Menü-Knopf: nur mit JS und unter 1080 px; Pfeil wie bei den anderen Aufklappern */
.kopf__menue {
  grid-area: menue; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; background: none; color: #fff; font-weight: 500; font-size: 15px; cursor: pointer;
}
.kopf__menue::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 2px 0; flex: none; }
.kopf__menue[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.kopf__menue:hover { background: rgba(255, 255, 255, .12); }
/* ohne JS (html ohne .js) kein Menü-Knopf, die Navigation steht offen da */
html:not(.js) .kopf__menue { display: none; }
@media (max-width: 1079px) {
  .js .kopf__nav { display: none; }
  .js .kopf__nav.offen { display: flex; flex-direction: column; gap: 0; padding: 2px 0; border-top: 1px solid rgba(255, 255, 255, .3); }
  .js .kopf__nav.offen a { border-radius: 0; padding: 0 4px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .js .kopf__nav.offen a:last-child { border-bottom: 0; }
}
.live {
  grid-area: live; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; text-decoration: none; white-space: nowrap; justify-self: end; padding: 0 2px;
}
.live:hover #liveText { text-decoration: underline; }
/* „aktualisiert vor 20 s“ nur für Screenreader und im Tooltip – der Kopf bleibt schmal */
.live__vor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.live__punkt { width: 10px; height: 10px; border-radius: 50%; background: #B9B2C4; flex: none; }
.live[data-zustand="aktiv"] .live__punkt { background: var(--zaehlt); animation: puls 2.4s ease-out infinite; }
.live[data-zustand="fertig"] .live__punkt { background: var(--fertig); }
.live[data-zustand="fehler"] .live__punkt { background: var(--fehler); }
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(130, 208, 244, .7); }
  70% { box-shadow: 0 0 0 9px rgba(130, 208, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(130, 208, 244, 0); }
}
/* ab 1080 px eine Zeile: Suche darf schrumpfen, Navigation und Stand nie (kein Überlappen) */
@media (min-width: 1080px) {
  .kopf__in {
    grid-template-columns: auto minmax(180px, 400px) minmax(0, 1fr) auto auto;
    grid-template-areas: "marke suche . nav live"; gap: 12px 20px; padding: 10px var(--rand);
  }
  .kopf__nav { flex-wrap: nowrap; justify-content: flex-end; }
  .kopf__menue { display: none !important; }
}

/* ── Auszählungspfad ──────────────────────────────────── */
.pfad {
  position: sticky; top: 0; z-index: 1500;
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(6px)) { .pfad { background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); } }
.pfad ol {
  list-style: none; margin: 0 auto; padding: 0 var(--rand); max-width: var(--breite);
  display: flex; height: var(--pfad-h); overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none;
}
.pfad ol::-webkit-scrollbar { display: none; }
.pfad li { display: flex; align-items: center; flex: none; }
.pfad li + li::before { content: "›"; color: var(--gedaempft); padding: 0 9px; font-size: 19px; line-height: 1; }
.pfad__glied {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0 1px;
  font: 400 19px/1 var(--cond); color: var(--lila); text-decoration: none;
}
.pfad__glied:hover { color: var(--tinte); }
.pfad__glied[aria-current="page"] { color: var(--tinte); }
.pfad__glied:focus-visible { outline-offset: -3px; }
.pfad__stand {
  position: absolute; left: 0; right: 0; bottom: 9px; height: 4px; border-radius: 2px;
  background: var(--linie); overflow: hidden;
}
.pfad__stand::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%);
  background: var(--zaehlt-stark); border-radius: 2px;
}
.pfad__stand[data-z="fertig"]::after { background: var(--fertig-stark); }
.pfad__stand[data-z="leer"] { background: repeating-linear-gradient(90deg, var(--leer) 0 3px, transparent 3px 6px); }
.pfad__stand[data-z="leer"]::after, .pfad__stand[data-z="aus"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pfad__stand::after { transition: width .6s ease; }
}

/* ── Seitenraster ─────────────────────────────────────── */
/* Fuß beim ersten Bild unterhalb des sichtbaren Bereichs halten: kein Sprung, wenn die Zahlen erscheinen */
main { display: block; min-height: 100vh; }
main:focus { outline: none; }
.seite { max-width: var(--breite); margin: 0 auto; padding: var(--a-4) var(--rand) 48px; }
.seite--zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-6); }
.seite__spalte { min-width: 0; container-type: inline-size; }
.seite__aside { min-width: 0; }
.seite__aside:empty { display: none; }
@media (min-width: 1000px) {
  .seite--zwei { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
  .seite__aside { position: sticky; top: calc(var(--pfad-h) + 20px); max-height: calc(100vh - var(--pfad-h) - 36px); overflow: auto; overscroll-behavior: contain; }
  .seite__aside--frei { position: static; max-height: none; overflow: visible; }
}

.titel { font: 400 clamp(34px, 7vw, 50px)/1.02 var(--cond); letter-spacing: -.005em; overflow-wrap: anywhere; hyphens: auto; }
.titel:focus { outline: none; }
.unter { margin-top: var(--a-1); color: var(--gedaempft); font-size: 15px; }
.unter a { color: var(--lila); }
.lage { margin-top: var(--a-3); font-size: 19px; line-height: 1.4; max-width: 62ch; }
.lage + .lage2 { margin-top: var(--a-1); }
.lage2 { font-size: 15px; color: var(--gedaempft); max-width: 62ch; }
.beispiel {
  display: inline-block; margin: 0 0 14px; padding: 3px 10px; border-radius: 4px;
  background: var(--gelb); color: var(--tinte); font-size: 13px; font-weight: 500;
}
.block { margin-top: var(--block-abstand); }
.block__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a-1) var(--a-4);
  padding-bottom: var(--a-2); border-bottom: 2px solid var(--tinte);
}
.block__kopf h2 { font-size: 20px; }
.block__kopf h2 a { color: inherit; text-decoration: none; }
.block__kopf h2 a:hover { text-decoration: underline; }
.block__zahl { font-size: 14px; color: var(--gedaempft); }
.block h3 { font-size: 16px; margin-top: var(--a-4); }
.erklaer { margin-top: var(--a-2); font-size: 14px; color: var(--gedaempft); max-width: 68ch; }
.weiter { margin-top: var(--a-2); font-weight: 500; }
.weiter a { display: inline-flex; align-items: center; min-height: 32px; }
@media (pointer: coarse) { .weiter a { min-height: 44px; } }
.quelle { margin-top: var(--a-5); font-size: 14px; }

/* Hinweise */
.hinweis {
  display: flex; gap: 10px; align-items: flex-start; margin-top: var(--a-3); padding: var(--a-2) var(--a-3);
  background: var(--warn-flaeche); border-left: 4px solid var(--warn-rand); font-size: 15px; max-width: 72ch;
}
.hinweis::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--warn-rand); color: var(--tinte); font: 700 13px/20px var(--sans); text-align: center;
}
.hinweis--fehler { background: #FDEBE5; border-left-color: var(--fehler); }
.hinweis--fehler::before { background: var(--fehler); color: #fff; }

/* ── Ergebnisbalken ───────────────────────────────────── */
.balken { list-style: none; margin: var(--a-2) 0 0; padding: 0; }
.balken__z {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--a-3); align-items: baseline; padding: var(--a-1) 0 var(--a-2);
}
.balken--delta .balken__z { grid-template-columns: minmax(0, 1fr) auto 3.4em; }
.balken__name { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.balken__lang { display: block; font-weight: 400; font-size: 13px; color: var(--gedaempft); }
.balken__wert { font: 400 22px/1 var(--cond); text-align: right; white-space: nowrap; }
.balken__delta { font-size: 13px; color: var(--gedaempft); text-align: right; white-space: nowrap; }
.balken__spur { grid-column: 1 / -1; height: 8px; margin-top: var(--a-1); background: var(--flaeche); border-radius: 0 3px 3px 0; }
.balken__spur > span { display: block; height: 100%; border-radius: 0 3px 3px 0; box-shadow: inset 0 0 0 1px rgba(30, 21, 48, .06); }
.balken__z.ist-volt { padding-left: var(--a-3); }
.balken__z.ist-volt::before {
  content: ""; position: absolute; left: 0; top: var(--a-1); bottom: var(--a-1); width: 5px; border-radius: 3px; background: var(--gelb);
}
.balken__z--rest .balken__name { font-weight: 400; color: var(--gedaempft); }
.vollstaendig { margin-top: var(--a-2); font-size: 15px; }
.vollstaendig--offen { color: var(--tinte); }
.fakten { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); margin: var(--a-3) 0 0; }
.fakten div { min-width: 0; }
.fakten dt { font-size: 13px; color: var(--gedaempft); }
.fakten dd { margin: 0; font: 400 21px/1.1 var(--cond); }
.voltzeile {
  margin-top: var(--a-5); padding: var(--a-2) var(--a-3) var(--a-2) var(--a-4); position: relative; background: var(--flaeche); max-width: 72ch;
}
.voltzeile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gelb); }
.voltzeile a { font-weight: 500; }

/* ── Status, Parteien, Chips ──────────────────────────── */
.stand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.stand__spur { flex: none; width: 56px; height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.stand__spur > span { display: block; height: 100%; background: var(--zaehlt-stark); border-radius: 3px; }
.stand[data-z="fertig"] .stand__spur > span { background: var(--fertig-stark); }
.stand[data-z="fehler"] .stand__spur { background: var(--fehler); }
.stand[data-z="leer"] .stand__spur { background: repeating-linear-gradient(90deg, var(--leer) 0 3px, transparent 3px 6px); }
.stand__txt { white-space: nowrap; }
.stand[data-z="leer"] .stand__txt { color: var(--gedaempft); }
.partei { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14px; min-width: 0; }
.partei > i { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c, #999); align-self: center; }
.partei__pz { white-space: nowrap; }
.punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--leer); }
.punkt[data-z="leer"] { background: #fff; box-shadow: inset 0 0 0 2px var(--feldrand); }
.punkt[data-z="zaehlt"] { background: var(--zaehlt-stark); }
.punkt[data-z="fertig"] { background: var(--fertig-stark); }
.punkt[data-z="fehler"] { background: var(--fehler); }
.voltwert { font-size: 14px; white-space: nowrap; }
.voltwert b { font-weight: 500; }
.voltwert__sitze { display: block; font-size: 13px; color: var(--gedaempft); white-space: normal; }

/* ── Zeilenlisten ─────────────────────────────────────── */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen > li { border-bottom: 1px solid var(--linie); }
.zkopf { display: none; }
.zlink {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--a-4); row-gap: var(--a-1);
  padding: var(--a-2) 6px; min-height: 48px; color: var(--tinte); text-decoration: none;
}
.zlink:hover { background: var(--flaeche); }
.zlink:focus-visible { outline-offset: -3px; }
.zlink__name { flex: 1 0 100%; font-weight: 500; font-size: 16px; color: var(--lila); overflow-wrap: anywhere; }
.zlink:hover .zlink__name { text-decoration: underline; text-decoration-thickness: 1px; }
.zlink__typ { margin-left: 8px; font-weight: 400; font-size: 14px; color: var(--gedaempft); }
.zlink__zelle { display: inline-flex; min-width: 0; }
.zlink__zusatz { flex: 1 0 100%; font-size: 14px; color: var(--gedaempft); }
.zlink__zusatz--warn { color: #7A4E00; }
@container (min-width: 700px) {
  .zkopf {
    display: grid; grid-template-columns: minmax(0, 1fr) 170px 180px 128px; column-gap: var(--a-4);
    padding: var(--a-2) 6px var(--a-1); font-size: 13px; color: var(--gedaempft); border-bottom: 1px solid var(--linie);
  }
  .zlink--raster { display: grid; grid-template-columns: minmax(0, 1fr) 170px 180px 128px; }
  .zlink--raster .zlink__name { font-size: 16px; }
  .zlink--raster .zlink__zusatz { grid-column: 1 / -1; }
}

.steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-3); margin-top: var(--a-3); }
.segment { display: inline-flex; padding: 2px; border: 1px solid var(--feldrand); border-radius: 8px; background: #fff; }
.segment button {
  min-height: 40px; padding: 0 13px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 14px;
}
.segment button:hover { background: var(--flaeche); }
.segment button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.auswahl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gedaempft); }
.auswahl select, .feld select, .feld input {
  min-height: 44px; padding: 0 10px; border: 1px solid var(--feldrand); border-radius: 6px; background: #fff; color: var(--tinte); font-size: 15px;
}
@media (pointer: coarse) { .segment button { min-height: 44px; } }

/* Kommunen im Kreis */
.kommune { padding: var(--a-3) 0; }
.kommune__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.kommune__name { font-weight: 500; font-size: 17px; text-decoration: none; }
.kommune__name:hover { text-decoration: underline; }
.kommune__typ { font-size: 14px; color: var(--gedaempft); }
.kommune__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1) var(--a-4); margin-top: var(--a-1); }
.kommune__bezug { font-size: 14px; color: var(--gedaempft); }
.gchips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--a-2) 0 0; padding: 0; }
.gchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 var(--a-3);
  border: 1px solid #D8D1E1; border-radius: 20px; background: #fff; color: var(--tinte);
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.gchip:hover { border-color: var(--lila); color: var(--lila); }
@media (pointer: coarse) { .gchip { min-height: 40px; } }
.mitglieder { margin-top: var(--a-1); }
.mitglieder > summary, .aufklapp > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer;
  color: var(--lila); font-weight: 500; list-style: none; font-size: 15px;
}
@media (pointer: coarse) { .mitglieder > summary, .aufklapp > summary { min-height: 44px; } }
.mitglieder > summary::-webkit-details-marker, .aufklapp > summary::-webkit-details-marker, .karte > summary::-webkit-details-marker { display: none; }
.mitglieder > summary::before, .aufklapp > summary::before, .karte > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin: 0 4px 0 2px; flex: none;
}
.mitglieder[open] > summary::before, .aufklapp[open] > summary::before, .karte[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .mitglieder > summary::before, .aufklapp > summary::before, .karte > summary::before { transition: transform .15s ease; }
}
.mitglieder > .zeilen { margin: 0 0 4px 5px; padding-left: 16px; border-left: 2px solid var(--linie); }
.mitglieder > .zeilen > li:last-child { border-bottom: 0; }
.mitglieder .kommune__name { font-size: 16px; }
.fehlliste { list-style: none; margin: 8px 0 0; padding: 0; }
.fehlliste li { padding: 9px 0; border-bottom: 1px solid var(--linie); }
.fehlliste span { display: block; font-size: 14px; color: var(--gedaempft); }

/* ── Sitze, Direktwahl ────────────────────────────────── */
.sitzart { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 500; }
.sitzart--hochrechnung { background: var(--zaehlt-hell); }
.sitzart--amtlich { background: var(--fertig-hell); }
.sitzband { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 14px; max-width: 560px; }
.sitzband i { width: 13px; height: 13px; border-radius: 2px; background: var(--c, #999); }
.sitzband i.ist-volt { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gelb); margin: 0 3px; }
/* Sitzleiste: ein Feld je Sitz (1-px-Fuge), 2-px-Fuge zwischen Wahlvorschlägen; Stimme kraft Amtes schraffiert */
.sitzleiste { position: relative; display: flex; height: 22px; margin-top: var(--a-3); max-width: 640px; }
.sitzleiste__teil {
  position: relative; flex: none; height: 100%; min-width: 3px;
  background: linear-gradient(90deg, var(--c, #9A93A6) calc(100% - 1px), rgba(255, 255, 255, .85) 0) 0 0 / calc(100% / var(--n, 1)) 100% repeat-x;
}
.sitzleiste__teil + .sitzleiste__teil { box-shadow: inset 2px 0 #fff; }
.sitzleiste__teil.ist-volt { z-index: 1; outline: 3px solid var(--gelb); outline-offset: 0; }
.sitzleiste__teil--hvb, .sl-hvb, .mh__leiste .mh__hvb { background: repeating-linear-gradient(135deg, var(--tinte) 0 1.5px, #fff 1.5px 4px); }
.sitzleiste__teil--hvb { min-width: 6px; box-shadow: inset 2px 0 #fff, inset 0 0 0 1px var(--tinte); }
.sitzleiste__marke { position: absolute; top: -5px; bottom: -5px; z-index: 2; width: 2px; margin-left: -1px; background: var(--tinte); box-shadow: 0 0 0 1px #fff; }
.sitzleiste__legende { display: flex; flex-wrap: wrap; gap: 2px var(--a-4); margin-top: var(--a-2); font-size: 13px; color: var(--gedaempft); }
.sitzleiste__legende span { display: inline-flex; align-items: center; gap: 6px; }
.sl-marke { display: inline-block; width: 2px; height: 14px; background: var(--tinte); }
.sl-hvb { display: inline-block; width: 12px; height: 12px; box-shadow: inset 0 0 0 1px var(--tinte); }
.sitzliste {
  list-style: none; margin: var(--a-2) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 var(--a-5); max-width: 640px;
}
.sitzliste li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-2); padding: var(--a-1) 0; border-bottom: 1px solid var(--linie); }
.sitzliste li.ist-volt { box-shadow: inset 4px 0 var(--gelb); padding-left: var(--a-2); }
.sitzliste .partei { font-size: 14px; line-height: 1.3; }
.sitzliste b { font: 400 19px/1 var(--cond); }
/* Rechnerische Mehrheiten */
.mehrheiten { margin-top: var(--a-4); padding-top: var(--a-3); border-top: 1px solid var(--linie); max-width: 640px; }
.mehrheiten__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-1) var(--a-3); }
.mehrheiten__kopf h3, .mehrheiten__kopf h4, .block .mehrheiten__kopf h3 { margin: 0; font-size: 17px; }
.mh-liste { list-style: none; margin: var(--a-2) 0 0; padding: 0; }
.mh {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "namen sitze" "leiste leiste" "zusatz zusatz";
  column-gap: var(--a-3); align-items: baseline; padding: 6px 0 var(--a-2); border-bottom: 1px solid var(--linie);
}
.mh.ist-volt { padding-left: var(--a-3); box-shadow: inset 4px 0 var(--gelb); }
.mh__namen { grid-area: namen; display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.mh__namen .partei { font-size: 15px; font-weight: 500; }
.mh__plus { padding: 0 6px; color: var(--gedaempft); }
.mh__sitze { grid-area: sitze; font: 400 20px/1 var(--cond); text-align: right; white-space: nowrap; }
.mh__sitze small { margin-left: 4px; font: 13px/1 var(--sans); color: var(--gedaempft); }
.mh__leiste { grid-area: leiste; position: relative; display: flex; height: 6px; margin-top: 6px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.mh__leiste i { display: block; flex: none; height: 100%; box-shadow: inset -1px 0 #fff; }
.mh__leiste b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tinte); }
.mh__zusatz { grid-area: zusatz; margin-top: 2px; font-size: 13px; color: var(--gedaempft); }
.mh--patt .mh__zusatz { color: var(--tinte); }
.mh__volt { margin-top: var(--a-2); padding: var(--a-1) var(--a-3); font-size: 14px; background: var(--flaeche); box-shadow: inset 4px 0 var(--gelb); }
.mh-mehr { margin-top: 2px; }
.mehrheiten__kopf h5 { margin: 0; font-size: 16px; }
/* Stichwahl: Modellrechnung und Hinweise */
.sw-modell .hr__kopf { gap: var(--a-1) var(--a-3); }
.sw-modell__lage { margin-top: var(--a-2); font-size: 16px; max-width: 62ch; }
.hrz__zusatz { grid-column: 1 / -1; margin-top: 2px; font-size: 14px; color: var(--gedaempft); }
.hrz__zusatz b { font-weight: 500; color: var(--tinte); }
.hrz-liste--sw .hrz__skala::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--tinte); }
.hr__lg--haelfte { width: 0; height: 15px; border-left: 1px dashed var(--tinte); }
.sw-satz { margin-top: var(--a-3); font-size: 16px; max-width: 64ch; }
.swzeile { margin-top: var(--a-2); font-size: 14px; max-width: 72ch; }
.swzeile a { margin-left: var(--a-1); }
@container (min-width: 560px) {
  .mh { grid-template-columns: minmax(0, 1fr) 160px 5.2em; grid-template-areas: "namen leiste sitze" "zusatz zusatz zusatz"; align-items: center; }
  .mh__leiste { margin-top: 0; }
}
.direkt { margin-top: var(--a-3); padding: var(--a-3) var(--a-4); background: var(--flaeche); border-radius: 6px; }
.direkt.ist-volt { box-shadow: inset 5px 0 var(--gelb); }
.direkt__name { font: 400 30px/1.08 var(--cond); overflow-wrap: anywhere; }
.direkt__partei { margin-top: var(--a-1); font-size: 15px; }
.direkt__satz { margin-top: var(--a-2); font-size: 15px; max-width: 60ch; }

/* ── Tabellen, Reiter ─────────────────────────────────── */
.reiter { display: flex; gap: var(--a-1); margin-top: var(--a-2); border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter button {
  min-height: 40px; padding: 0 var(--a-3); border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--gedaempft); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.reiter button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--lila); }
.tabelle-wrap { overflow-x: auto; margin-top: 6px; }
.tabelle-wrap[tabindex]:focus-visible { outline-offset: -3px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th, .tabelle td { padding: 6px var(--a-2); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-size: 13px; font-weight: 500; color: var(--gedaempft); border-bottom: 2px solid var(--tinte); white-space: nowrap; }
.tabelle th:first-child, .tabelle td:first-child { padding-left: 4px; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle tbody th { font-weight: 500; }
.tabelle td a, .tabelle th a { display: inline-block; padding: var(--a-1) 0; }
.tabelle tbody th { min-width: 7em; overflow-wrap: break-word; }
.tabelle td, .tabelle th { font-size: 14px; }
.standkurz { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tabelle--gebiete tbody th a { display: block; max-width: 15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabelle--gebiete .partei { white-space: nowrap; }
/* Scrollbare Tabellen zeigen am Rand einen Schatten, statt still abzuschneiden */
.tabelle-wrap {
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 32px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(30, 21, 48, .22), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(30, 21, 48, .22), transparent) right / 12px 100% no-repeat scroll;
}
@media (max-width: 599px) {
  /* Stand bleibt als Text sichtbar – nicht nur über die Farbe des Punkts */
  .tabelle--gebiete .standkurz { gap: 4px; }
  .tabelle--gebiete th, .tabelle--gebiete td { padding: 8px 5px; font-size: 13px; }
  .tabelle--gebiete tbody th { min-width: 0; }
  .tabelle--gebiete tbody th a { max-width: 36vw; }
  .tabelle--gebiete .partei > i { width: 8px; height: 8px; }
}
/* ── Hochrechnung ─────────────────────────────────────── */
.hr--eingebettet { margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.hr__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.hr__kopf h3 { font-size: 17px; margin: 0; }
.hr__neu { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gedaempft); }
.hr__neu::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zaehlt); }
@media (prefers-reduced-motion: no-preference) { .hr__neu::before { animation: puls 2.4s ease-out infinite; } }
.hr__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; color: var(--gedaempft); }
.hr__legende span { display: inline-flex; align-items: center; gap: 6px; }
.hr__lg { display: inline-block; flex: none; }
.hr__lg--gez { width: 18px; height: 8px; background: #B6AEC1; border-radius: 0 2px 2px 0; }
.hr__lg--punkt { width: 3px; height: 15px; background: var(--tinte); border-radius: 1px; }
.hr__lg--spanne { width: 20px; height: 15px; background: rgba(30, 21, 48, .14); border-left: 1px solid rgba(30, 21, 48, .5); border-right: 1px solid rgba(30, 21, 48, .5); }
.hrz-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.hrz { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 8px 0 6px; }
.hrz.ist-volt { padding-left: 14px; }
.hrz.ist-volt::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 3px; background: var(--gelb); }
.hrz__name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.hrz__wert { font: 400 23px/1 var(--cond); text-align: right; white-space: nowrap; }
.hrz__spanne { display: block; margin-top: 3px; font: 13px/1.3 var(--sans); color: var(--gedaempft); }
.hrz__skala { grid-column: 1 / -1; position: relative; height: 18px; margin-top: 5px; }
.hrz__skala::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 8px; background: var(--flaeche); }
.hrz__gez { position: absolute; left: 0; top: 5px; height: 8px; border-radius: 0 2px 2px 0; opacity: .7; }
.hrz__band { position: absolute; top: 0; height: 18px; min-width: 2px; background: rgba(30, 21, 48, .14); border-left: 1px solid rgba(30, 21, 48, .5); border-right: 1px solid rgba(30, 21, 48, .5); }
.hrz__punkt { position: absolute; top: -1px; width: 3px; height: 20px; margin-left: -1.5px; background: var(--tinte); border-radius: 1px; box-shadow: 0 0 0 1px #fff; }
.hr__rest { margin-top: 6px; font-size: 14px; color: var(--gedaempft); }
.hr__fuss { margin-top: 12px; font-size: 14px; color: var(--gedaempft); max-width: 70ch; }
.hr__fuss a { font-weight: 500; }
.hr__grund { margin-top: 10px; padding: 10px 14px; background: var(--flaeche); max-width: 70ch; }
.hr__unter { font-size: 16px; margin: 20px 0 0; }
.hr__volt { margin-top: 12px; font-size: 16px; box-shadow: inset 5px 0 var(--gelb); padding: 8px 12px; background: var(--flaeche); max-width: 70ch; }
.hr__volt strong { font: 400 22px/1 var(--cond); }
.hr__volt-neben { display: block; font-size: 14px; color: var(--gedaempft); margin-top: 2px; }
.hr__direkt { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 12px; }
.hr__direkt p { font-size: 14px; color: var(--gedaempft); }
.hr__zahl { display: block; font: 400 34px/1.05 var(--cond); color: var(--tinte); }
.hr__direkt .hr__paar { flex-basis: 100%; color: var(--tinte); font-size: 15px; }
.hr__imputiert { margin-top: 10px; font-size: 15px; max-width: 70ch; }
.hr__hinweise ul { margin: 4px 0 8px; padding-left: 20px; font-size: 14px; color: var(--gedaempft); max-width: 70ch; }
.skel--hr { height: 240px; margin-top: 12px; }
.zwischen { font-size: 17px; margin-top: 22px; }
.hrkurz { font-size: 14px; }
.hrkurz b { font-weight: 500; }
.vg__hr { grid-column: 1 / -1; min-height: 1.4em; }
.text { margin-top: 12px; max-width: 70ch; }
.text p + p { margin-top: 10px; }
.schritte { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: schritt; }
.schritte li { counter-increment: schritt; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--linie); max-width: 74ch; }
.schritte li::before { content: counter(schritt); position: absolute; left: 2px; top: 10px; font: 400 30px/1 var(--cond); color: var(--lila); }
.schritte h3 { font-size: 17px; margin: 0; }
.schritte p { margin-top: 4px; }
.fachlich { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--gedaempft); max-width: 74ch; }

.technik { margin-top: 4px; font-size: 13px; }
.technik > summary { cursor: pointer; color: var(--gedaempft); min-height: 32px; display: inline-flex; align-items: center; }
.technik pre { margin: 6px 0 0; padding: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--flaeche); font-size: 12px; }
.skel--balken { height: 300px; margin-top: 14px; }
.skel--direkt { height: 150px; margin-top: 14px; }
.zlink--raster .stand__txt { white-space: normal; }
.kommune__name { display: inline-block; padding: 10px 0; margin: -10px 0; }
.block__kopf h2 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
@media (min-width: 1200px) { .seite--zwei { grid-template-columns: minmax(0, 1fr) 460px; } }
.tabelle .partei { white-space: nowrap; }
.tabelle .stand { gap: 6px; }
.tabelle .stand__spur { width: 32px; }
.tabelle .stand__txt { font-size: 13px; }
.ebenen-mehr { margin-top: 8px; }
.tabelle tr.ist-volt > :first-child { box-shadow: inset 4px 0 var(--gelb); padding-left: 12px; }
.tabelle tr.ist-aktuell { background: var(--lila-hell); }
.sortknopf {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.sortknopf:hover { color: var(--tinte); }
.sortknopf[data-dir]::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.sortknopf[data-dir="auf"]::after { border-top-color: transparent; border-bottom-color: currentColor; margin: -4px 0 0; }
.tabelle .partei { font-size: 14px; }
.mehr { margin-top: 12px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--lila); border-radius: 6px; background: #fff; color: var(--lila); font-weight: 500; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--lila-hell); }
.knopf--voll { background: var(--lila); color: #fff; }
.knopf--voll:hover { background: #3F1B61; }
@media (max-width: 719px) {
  /* gestapelt nie breiter als der Rahmen (sonst entsteht ein scrollbarer Bereich ohne Tastaturzugang) */
  .tabelle--stapel, .tabelle--stapel tbody { display: block; width: 100%; }
  .tabelle--stapel caption { display: block; }
  .tabelle--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle--stapel tr { display: block; padding: var(--a-2) 0; border-bottom: 1px solid var(--linie); }
  .tabelle--stapel th, .tabelle--stapel td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tabelle--stapel tbody th { font-size: 16px; text-align: left; }
  .tabelle--stapel td::before { content: attr(data-l); color: var(--gedaempft); font-size: 14px; text-align: left; white-space: normal; min-width: 0; }
  .tabelle--stapel .zahl { text-align: right; }
}

/* Kandidierende */
.wahlvorschlag { border-bottom: 1px solid var(--linie); }
.wahlvorschlag > summary { display: flex; flex-wrap: wrap; width: 100%; padding: 2px 0; column-gap: var(--a-3); }
.wahlvorschlag > summary .partei { font-size: 16px; color: var(--tinte); }
.wahlvorschlag > summary .gedaempft { font-weight: 400; font-size: 14px; }
.wahlvorschlag.ist-volt > summary { box-shadow: inset 4px 0 var(--gelb); padding-left: 12px; }
.wahlvorschlag .tabelle-wrap { margin: 0 0 14px; }

/* ── Karte ────────────────────────────────────────────── */
.karte { border-top: 2px solid var(--tinte); }
.karte > summary {
  display: flex; align-items: center; gap: 8px; min-height: 50px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 20px;
}
.karte__inhalt { padding-bottom: 8px; }
.karte__map {
  position: relative; height: 360px; margin-top: 12px; border-radius: 4px; background: var(--flaeche); overflow: hidden;
}
.karte__map.leaflet-container:focus-visible { outline: 3px solid var(--lila); outline-offset: -3px; }
.karte__map > p { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--gedaempft); font-size: 14px; }
@media (min-width: 1000px) {
  .karte > summary { cursor: default; pointer-events: none; }
  .karte > summary::before { display: none; }
  .karte__map { height: min(520px, calc(100vh - var(--pfad-h) - 250px)); min-height: 340px; }
}
.karte__map.karte__map--quer { height: auto; min-height: 0; aspect-ratio: 5 / 4; }
.legende { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 13px; height: 13px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(30, 21, 48, .12); }
.leaflet-container { font: inherit; background: var(--flaeche); }
.leaflet-container a { color: var(--lila); }
.leaflet-tooltip.karte-tip { font: 14px/1.35 var(--sans); color: var(--tinte); border: 0; border-radius: 4px; box-shadow: 0 6px 18px rgba(30, 21, 48, .22); padding: 6px 10px; }
.leaflet-control-attribution { font-size: 12px; }
.leaflet-control-attribution a { display: inline-block; min-height: 24px; line-height: 24px; }
.leaflet-control-attribution { max-width: calc(100% - 20px); color: var(--tinte); }
.karte-quelle { display: inline; }
.karte-quelle > summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; color: var(--lila); text-decoration: underline; text-underline-offset: .18em; }
.karte-quelle[open] { display: block; padding-bottom: 4px; }
.karte-quelle a { overflow-wrap: anywhere; }
.leaflet-bar a { outline-offset: 0; }

/* ── Volt-Seite ───────────────────────────────────────── */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 22px; padding: 14px 0; border-top: 2px solid var(--tinte); border-bottom: 1px solid var(--linie); }
.feld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--gedaempft); min-width: 0; }
.feld--breit { flex: 1 1 220px; }
.feld--breit input { width: 100%; }
.schalter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.schalter input { width: 24px; height: 24px; margin: 0; accent-color: var(--lila); }
.team { margin-top: 36px; }
.team__zahlen { margin-top: 6px; font-size: 14px; color: var(--gedaempft); }
.vg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; padding: 14px 0 14px; }
.vg__titel { font-weight: 500; font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.vg__titel:hover { text-decoration: underline; }
.vg__gremium { display: block; font-size: 15px; font-weight: 400; color: var(--tinte); }
.vg__wert { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 400 30px/1 var(--cond); white-space: nowrap; }
.vg__trend { display: block; margin-top: 4px; font: 13px/1.2 var(--sans); color: var(--gedaempft); }
.vg__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; }
.vg__sitze b { font-weight: 500; }
.vg__sitze.hat-sitze b { background: var(--gelb); padding: 0 6px; border-radius: 3px; }
.vg > .aufklapp, .vg > .hinweis, .vg > .vg__extern { grid-column: 1 / -1; }
.vg__extern { font-size: 14px; }
.rang { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: rang; }
.rang li { counter-increment: rang; border-bottom: 1px solid var(--linie); }
.rang a, .rang .rang__zeile {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 9px 2px; min-height: 52px; color: var(--tinte); text-decoration: none;
}
.rang a:hover { background: var(--flaeche); }
.rang a::before, .rang .rang__zeile::before { content: counter(rang); font: 400 18px/1 var(--cond); color: var(--gedaempft); }
.rang__name { font-weight: 500; overflow-wrap: anywhere; }
.rang__sub { display: block; font-size: 13px; font-weight: 400; color: var(--gedaempft); }
.rang__wert { font: 400 22px/1 var(--cond); text-align: right; white-space: nowrap; }
.rang__wert small { display: block; font: 12px var(--sans); color: var(--gedaempft); margin-top: 3px; }
.bestenliste + .bestenliste { margin-top: 36px; }
.bestenliste h2 { font-size: 20px; }

/* ── Datenstand ───────────────────────────────────────── */
.frische { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.frische::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fertig); flex: none; }
.frische::before { background: var(--fertig-stark); }
.frische[data-f="verzoegert"]::before { background: var(--warn-stark); border-radius: 1px; }
.frische[data-f="alt"]::before, .frische[data-f="fehler"]::before { border-radius: 1px; transform: rotate(45deg); }
.frische__wort { color: var(--tinte); }
.frische[data-f="alt"]::before, .frische[data-f="fehler"]::before { background: var(--fehler); }
.frische[data-f="unbekannt"]::before { background: var(--leer); }
.fehlertext { color: #A32C0B; font-size: 14px; }

/* ── Leer, Fehler, Skelett ────────────────────────────── */
.leer { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--tinte); max-width: 62ch; }
.leer h1, .leer h2 { font-size: 22px; }
.leer p { margin-top: 8px; }
.leer .knopf { margin-top: 16px; }
.leerzeile { padding: var(--a-3) 0; color: var(--gedaempft); }
.skel { background: var(--flaeche); border-radius: 4px; }
.skel--titel { height: 46px; width: min(420px, 70%); }
.skel--zeile { height: 22px; width: min(560px, 90%); margin-top: 18px; }
.skel--block { height: 280px; margin-top: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .skel { background: linear-gradient(90deg, var(--flaeche) 0%, #ECE6F2 45%, var(--flaeche) 90%); background-size: 300% 100%; animation: skel 1.5s ease-in-out infinite; }
  @keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}

/* ── Fuß ──────────────────────────────────────────────── */
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); color: var(--gedaempft); font-size: 14px; }
.fuss__in { max-width: var(--breite); margin: 0 auto; padding: 26px var(--rand) 44px; }
.fuss p { max-width: 80ch; overflow-wrap: anywhere; }
.fuss p + p { margin-top: 8px; }
.fuss strong { color: var(--tinte); font-weight: 500; }
.fuss a { margin-right: 12px; }
.fuss__muster { display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin: 0 6px 3px 2px; vertical-align: middle; }
.fuss__muster--zaehlt { background: var(--zaehlt-stark); }
.fuss__muster--fertig { background: var(--fertig-stark); }

@media (max-width: 420px) {
  :root { --rand: 16px; }
  .lage { font-size: 18px; }
  .direkt__name { font-size: 28px; }
}

/* Hochkontrast-Modus: Stand-Balken und Punkte nicht wegfiltern */
@media (forced-colors: active) {
  .pfad__stand, .stand__spur, .punkt, .partei > i, .sitzband i, .legende i, .balken__spur > span,
  .sitzleiste__teil, .sitzleiste__marke, .sl-marke, .sl-hvb, .mh__leiste i, .mh__leiste b { forced-color-adjust: none; }
  .skel { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}