/* OpenRCV Redesign „Klarsicht“: lokaler Prototyp. Systemschrift, helle Flächen, ein Akzent.
   Hell/dunkel folgt der Systemeinstellung. Keine externen Ressourcen. */
:root {
  --tint: #1B4FD8;
  --bg: #F5F5F7; --sidebar: #EDEDF0; --surface: #FFFFFF;
  --label: #1D1D1F; --label2: #6A6A70; --sep: rgba(60,60,67,.16); --fill: rgba(118,118,128,.12);
  --for: #126E5A; --against: #D9530F; --against-text: #A8400A; --abst: #8E8E93; --track: #E5E5EA;
  --hit: #FFE58A; --sel: color-mix(in srgb, var(--tint) 11%, transparent); --on-tint: #FFFFFF;
  --ph: #5E5E63; /* Platzhalter: auf grauen Feldflächen ≥ 4,5:1 (label2 erreicht dort nur 4,0) */
  --seg-on: #FFFFFF; /* gewähltes Segment (erhaben) */
  --sel-ink: var(--tint); /* Schrift auf getönter Auswahl (aktiver Filter) */
  --soon: color-mix(in srgb, var(--tint) 26%, transparent); /* Kalender: Daten folgen in Kürze */
  --exc: #4E8DB8; /* entschuldigt: Stahlblau, deutlich weg vom Grau der Enthaltung, 3:1 zur Fläche */
  --brand-soft: #6F8FE6; /* innerer Bogen der Bildmarke */
  --shadow-pop: 0 14px 34px -10px rgba(0,0,0,.28), 0 0 0 1px var(--sep);
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Glas für schwebende Fenster (Kalender, Menüs, Fragen): durchscheinend, Lichtkante oben links und unten rechts */
  /* Glas: klar genug, dass Dahinterliegendes als weiche Schrift erkennbar bleibt (sonst wirkt es über hellen Flächen wie
     Papier); je mehr Lesetext im Fenster, desto mehr Unschärfe. Kalender am klarsten. */
  --glass: color-mix(in srgb, var(--surface) 22%, transparent);
  --glass-list: color-mix(in srgb, var(--surface) 40%, transparent);
  --glass-thick: color-mix(in srgb, var(--surface) 38%, transparent);
  --glass-fx: blur(6px) saturate(170%);
  --glass-fx-list: blur(12px) saturate(180%);
  --glass-fx-thick: blur(14px) saturate(180%);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 60%, rgba(255,255,255,.25));
  /* Lichtkante oben links und unten rechts, heller Saum, dazu eine weiche dunklere Innenkante als Materialdicke */
  --glass-edge: inset 1.5px 1.5px 0 -.5px #fff, inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 26px -6px rgba(0,0,0,.10);
  --glass-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 22px 50px -16px rgba(0,0,0,.3), 0 4px 14px -6px rgba(0,0,0,.12);
  /* Fraktionsfarben, nur für die Sitzverteilung. Geprüft: Nachbarn in Sitzordnung bleiben auch bei
     Rot-Grün-Schwäche unterscheidbar (OKLab ΔE ≥ 15); Fraktionslos ist bewusst grau. */
  --g-left: #A3245A; --g-greens: #4DBE6E; --g-sd: #C42834; --g-renew: #E0A200; --g-epp: #2F6FD6;
  --g-ecr: #22A8BE; --g-pfe: #33508F; --g-esn: #8A6FD0; --g-ni: #9A9AA2;
  color-scheme: light dark;
}
/* Dunkel: folgt dem System, außer jemand hat im Umschalter „hell“ gewählt; die Wahl „dunkel“ gilt immer.
   Beide Blöcke müssen gleich bleiben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #7D9CF5;
    --bg: #000000; --sidebar: #161618; --surface: #1C1C1E;
    --label: #F5F5F7; --label2: #A1A1A6; --sep: rgba(84,84,88,.55); --fill: rgba(118,118,128,.24);
    --for: #3CC9A0; --against: #E8782E; --against-text: #FF9A52; --abst: #8E8E93; --track: #3A3A3C; --exc: #4F86A8;
    --hit: #6B5A12; --sel: color-mix(in srgb, var(--tint) 24%, transparent); --on-tint: #0A0A12; --ph: var(--label2); --seg-on: #636366; --sel-ink: #AFC2FA; --soon: color-mix(in srgb, var(--tint) 42%, transparent);
    --brand-soft: #5B78D6;
    --shadow-pop: 0 14px 34px -10px rgba(0,0,0,.7), 0 0 0 1px var(--sep);
    --glass: color-mix(in srgb, #2C2C2E 34%, transparent);
    --glass-list: color-mix(in srgb, #2C2C2E 55%, transparent);
    --glass-thick: color-mix(in srgb, #1C1C1E 50%, transparent);
    --glass-fx: blur(8px) saturate(170%);
    --glass-fx-list: blur(14px) saturate(170%);
    --glass-fx-thick: blur(16px) saturate(170%);
    --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07));
    --glass-edge: inset 0 0 0 1px rgba(255,255,255,.1), inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55), inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.22),
      inset 0 0 22px -6px rgba(255,255,255,.12), inset 0 0 30px -8px rgba(0,0,0,.35);
    --glass-shadow: 0 0 0 .5px rgba(0,0,0,.9), 0 22px 50px -14px rgba(0,0,0,.8);
    --g-left: #C9437A; --g-greens: #3CAA5E; --g-sd: #BE2733; --g-renew: #BA8A12; --g-epp: #3A73D9;
    --g-ecr: #24A4B8; --g-pfe: #4659B0; --g-esn: #A07AD8; --g-ni: #6C6C72;
  }
}
:root[data-theme="dark"] {
  --tint: #7D9CF5;
  --bg: #000000; --sidebar: #161618; --surface: #1C1C1E;
  --label: #F5F5F7; --label2: #A1A1A6; --sep: rgba(84,84,88,.55); --fill: rgba(118,118,128,.24);
  --for: #3CC9A0; --against: #E8782E; --against-text: #FF9A52; --abst: #8E8E93; --track: #3A3A3C; --exc: #4F86A8;
  --hit: #6B5A12; --sel: color-mix(in srgb, var(--tint) 24%, transparent); --on-tint: #0A0A12; --ph: var(--label2); --seg-on: #636366; --sel-ink: #AFC2FA; --soon: color-mix(in srgb, var(--tint) 42%, transparent);
  --brand-soft: #5B78D6;
  --shadow-pop: 0 14px 34px -10px rgba(0,0,0,.7), 0 0 0 1px var(--sep);
  --glass: color-mix(in srgb, #2C2C2E 34%, transparent);
  --glass-list: color-mix(in srgb, #2C2C2E 55%, transparent);
  --glass-thick: color-mix(in srgb, #1C1C1E 50%, transparent);
  --glass-fx: blur(8px) saturate(170%);
  --glass-fx-list: blur(14px) saturate(170%);
  --glass-fx-thick: blur(16px) saturate(170%);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07));
  --glass-edge: inset 0 0 0 1px rgba(255,255,255,.1), inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55), inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.22),
    inset 0 0 22px -6px rgba(255,255,255,.12), inset 0 0 30px -8px rgba(0,0,0,.35);
  --glass-shadow: 0 0 0 .5px rgba(0,0,0,.9), 0 22px 50px -14px rgba(0,0,0,.8);
  --g-left: #C9437A; --g-greens: #3CAA5E; --g-sd: #BE2733; --g-renew: #BA8A12; --g-epp: #3A73D9;
  --g-ecr: #24A4B8; --g-pfe: #4659B0; --g-esn: #A07AD8; --g-ni: #6C6C72;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-contrast: more) {
  :root { --label2: #4A4A50; --sep: rgba(60,60,67,.4); --fill: rgba(118,118,128,.2); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --label2: #C7C7CC; --sep: rgba(200,200,210,.5); --fill: rgba(160,160,170,.28); }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --label2: #C7C7CC; --sep: rgba(200,200,210,.5); --fill: rgba(160,160,170,.28); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font: 400 1rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.006em;
}
::selection { background: color-mix(in srgb, var(--tint) 25%, transparent); }
a { color: var(--tint); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }   /* deckend: ≥ 3:1 auf allen Flächen */
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- Grundgerüst ---------- */
.app { min-height: 100vh; display: flex; }
.side {
  flex: 0 0 256px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 20px 14px 24px; background: var(--sidebar); border-right: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 20px;
}
.content { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; }
.col-list { flex: 1 1 440px; min-width: 0; padding: 34px 28px 60px; max-width: 920px; }
/* Breit: die Liste behält ihre Breite, ob rechts eine Abstimmung offen ist oder nicht. Ohne Auswahl steht
   rechts nur ein stiller Hinweis, kein leeres Detailblatt. */
.detail-empty { display: none; }
@media (min-width: 1181px) {
  .col-list { flex: 0 0 clamp(400px, 36vw, 560px); max-width: none; }
  .col-detail { max-width: 880px; }
  .content:not(.has-detail) .col-detail .detail { display: none; }
  .content:not(.has-detail) .detail-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: calc(100vh - 64px); padding: 0 24px; text-align: center; color: var(--label2);
  }
  .detail-empty svg { width: 34px; height: 34px; margin-bottom: 6px; opacity: .55; }
  .detail-empty strong { font-size: .9375rem; font-weight: 600; }
  .detail-empty span { font-size: .8125rem; max-width: 30ch; }
  .content.has-detail .col-detail .detail { animation: detail-in 260ms var(--ease); }
  /* Detail beginnt unter der Pille „Fragen“ (oben rechts, 52 px), damit sie weder Teilen noch Schließen verdeckt */
  .col-detail { margin-top: 52px; top: 52px; max-height: calc(100vh - 52px); padding-top: 4px; }
  .content:not(.has-detail) .detail-empty { min-height: calc(100vh - 116px); }
  /* Fragen auf der Abstimmungsseite: das Panel nimmt den Platz der Liste ein, statt die Abstimmung zu verdecken */
  html.ask-open .content.has-detail .col-list { display: none; }
  html.ask-open .content.has-detail { padding-right: 424px; }
  html.ask-open .content.has-detail .col-detail { padding-left: 28px; }
}
@keyframes detail-in { from { opacity: 0; transform: translateX(18px); } }
.col-detail {
  flex: 1.3 1 520px; min-width: 0; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  padding: 24px 24px 40px 0; overscroll-behavior: contain;
}
/* Breite je Seite über --pw (normal) und --pw2 (breite Bildschirme, siehe Ende der Datei) */
.page { flex: 1 1 auto; min-width: 0; padding: 34px 32px 60px; max-width: var(--pw, 1240px); }

.side-top { display: flex; flex-direction: column; gap: 20px; }
.side .pop .clamp2 { font-size: .8125rem; }
/* Lockup als eine Grafik: Bildmarke ab x 22 (rund, darf optisch 2 px vor die Navigationssymbole),
   der Name beginnt bei 52 px in der Spalte der Navigationsbeschriftungen */
.brand { display: flex; align-items: center; padding: 4px 8px 0; color: var(--label); text-decoration: none; }
/* 130 %: Wortmarke rund 22 px, deutlich über den 15-px-Navigationspunkten (bei 100 % wirkte sie wie ein weiterer Eintrag) */
.brand .lockup { display: block; flex: none; width: 143.2px; height: 34px; }
.mbrand { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px;
  text-decoration: none; color: var(--label); font-size: 0.9375rem;
}
.nav a:hover { background: var(--fill); }
.nav a[aria-current="page"] { background: var(--sel); color: var(--tint); font-weight: 600; }
.nav .ext { margin-left: auto; color: var(--label2); }
/* Symbole der Seitenleiste in der Akzentfarbe, Beschriftung in Textfarbe (wie Finder, Mail, Notizen) */
.nav a > .ic { flex: none; color: var(--tint); }
.side-h { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 10px; font-size: .75rem; font-weight: 600; color: var(--label2); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
.side-foot a { font-size: .8125rem; color: var(--label2); text-decoration: none; }
.side-foot a:hover { color: var(--label); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-btn { border-radius: 50%; }
.theme-btn:hover { color: var(--label); }
.theme-btn svg { transition: transform 420ms var(--ease); }
.theme-btn[aria-pressed="true"] svg { transform: rotate(180deg); }
.mbar { display: none; }
.weeklist { display: flex; flex-direction: column; gap: 2px; }
.weeklist button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px;
  border: none; border-radius: 8px; background: transparent; text-align: left; font-size: .875rem;
}
.weeklist button:hover { background: var(--fill); }
.weeklist button[aria-current="true"] { background: var(--sel); font-weight: 600; }
.weeklist .n { color: var(--label2); font-weight: 400; font-size: .8125rem; }

/* ---------- Bausteine ---------- */
h1.big { margin: 0; font-size: 2.125rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; }
.sub { margin: 6px 0 0; font-size: .9375rem; color: var(--label2); }
.status { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--label2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; box-sizing: border-box; }
.dot.f { background: var(--for); } .dot.a { background: var(--against); } .dot.b { background: var(--abst); }
.dot.n { border: 1.5px solid var(--abst); } .dot.e { background: var(--exc); }
.dot.live { background: var(--tint); }
.tleg { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--label2); }
.tleg > span { display: inline-flex; align-items: center; gap: 5px; }
.tleg .dot { width: 8px; height: 8px; }
.hitin { display: block; margin-top: 3px; font-size: .75rem; color: var(--label2); }
/* Beschriftete Schaltergruppe (Daten-Seite): Bezeichnung über dem Segment, damit zwei Schalter nicht wie einer lesen */
.ctlg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctlg-l { font-size: .75rem; font-weight: 600; color: var(--label2); }
@media (max-width: 860px) { .stctrl .ctlg { flex: 1 1 100%; } .ctlg .seg { display: flex; } .ctlg .seg button { flex: 1 1 0; } }
.nw { white-space: nowrap; }
.toc-q { width: 100%; height: 36px; margin: 8px 0 0; }
.toc-o { flex: none; display: inline-grid; place-items: center; width: 14px; color: var(--label2); }
.toc-o svg { width: 12px; height: 12px; }
.toc-pre { margin: 10px 0 2px; font-size: .75rem; color: var(--label2); }
.glong { display: block; margin-top: 1px; font-size: .6875rem; line-height: 1.25; color: var(--label2); }
.side .search { position: relative; }
.side .search .kbd { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--sep); font: 600 .6875rem/18px ui-monospace, "SF Mono", Menlo, monospace; color: var(--label2); text-align: center; pointer-events: none; }
.side .search:focus-within .kbd, .side .search input:not(:placeholder-shown) ~ .kbd { display: none; }
.toc-sub { margin: 4px 0 2px; padding-left: 18px; font-size: .875rem; }
.toc-sub li { margin: 2px 0; }
.ask-send.stop { background: var(--label); color: var(--surface); }
.sp-stage { position: relative; }
.sp-ph { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: .9375rem; color: var(--label2); }
.fxpanel.compact { padding: 0; }
.fx-open { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: none; font-size: .8125rem; color: var(--label2); text-align: left; }
.fx-open .fx-t { font-weight: 600; color: var(--label); }
.fx-open .fx-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--tint); font-weight: 500; }
.btn-link { padding: 0; border: 0; background: none; color: var(--tint); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.field.toc-q, .field.sp-rcvq { padding-left: 12px; }
.toc-n { margin: 4px 2px 0; font-size: .75rem; color: var(--label2); }
.ask-err.soft { background: var(--fill); color: var(--label); }
.sp-rcvq { width: 100%; height: 36px; margin: 0 0 6px; }
.select.on select { background: var(--sel); color: var(--sel-ink); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.select.on svg { color: var(--sel-ink); }
.dlfields { margin-top: 8px; }
.dlfields > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: .8125rem; font-weight: 500; color: var(--tint); cursor: pointer; list-style: none; }
.dlfields > summary::-webkit-details-marker { display: none; }
.dlfields[open] > summary svg { transform: rotate(180deg); }
.dlfields table { margin-top: 6px; font-size: .8125rem; }
.rline { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--fill); font-size: .8125rem; line-height: 1.5; }
.pop-empty { margin: 0; padding: 10px 12px 6px; font-size: .8125rem; line-height: 1.4; color: var(--label2); }
.gp-basisline { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--fill); font-size: .8125rem; color: var(--label); display: inline-block; }
.hero-kpis dt a { color: inherit; text-decoration: underline; text-decoration-color: var(--sep); text-underline-offset: 3px; }
.hero-kpis dt a:hover { color: var(--tint); text-decoration-color: currentColor; }
.hint-inline { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sel); font-size: .8125rem; color: var(--label); }   /* laufende Sitzungswoche: Status, keine Stimmposition */
.card { background: var(--surface); border-radius: 14px; }
.field {
  width: 100%; height: 42px; padding: 0 14px 0 36px; border: none; border-radius: 11px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); font-size: .9375rem;
}
.field.fill { background: var(--fill); box-shadow: none; height: 38px; }
.search { position: relative; }
.search > svg { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--label2); pointer-events: none; }
.seg { display: inline-flex; background: var(--fill); border-radius: 10px; padding: 2px; }
.seg button {
  min-height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; font-size: .8125rem;
  transition: background-color 150ms ease-out, transform 120ms var(--ease);
}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--seg-on); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg button:disabled { opacity: .4; cursor: default; }
.seg button { white-space: nowrap; }
.seg .sm { display: none; }
.seg.full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
/* Ziehen und Gleiten (common.js): die Markierung folgt dem Finger, gedrückt etwas kleiner; seitliche Gesten gehören dem Schalter */
div.seg { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.seg-thumb { position: absolute; left: 0; top: 0; border-radius: 8px; background: var(--seg-on); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  pointer-events: none; will-change: transform; transition: scale 200ms var(--ease); }
.seg-thumb.held { scale: .96; }
.seg.seg-drag > button { position: relative; z-index: 1; background: transparent; box-shadow: none; transform: none; font-weight: inherit; }
.seg.seg-drag > button.seg-to { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: none; border-radius: 999px;
  background: var(--fill); font-size: .8125rem; font-weight: 500; white-space: nowrap;
  transition: background-color 150ms ease-out, transform 120ms var(--ease);
}
.chip.sq { border-radius: 8px; min-height: 30px; font-size: .75rem; }
/* Aktiver Filter: getönt wie aktive Filtermenüs (gewählte Ansichten dagegen erhaben im Segment) */
.chip[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.chip .c { opacity: .75; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: none; border-radius: 10px;
  background: var(--fill); color: var(--tint); font-size: .8125rem; font-weight: 600;
  transition: background-color 150ms ease-out, transform 120ms var(--ease);
}
.btn.plain { background: transparent; font-weight: 500; padding: 0 8px; }
.btn.primary { background: var(--tint); color: var(--on-tint); }
.btn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: var(--sel); }
  .btn.primary:hover { background: color-mix(in srgb, var(--tint) 88%, #000); }
  .chip:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--fill) 100%, var(--sel)); }
}
.btn:active:not(:disabled), .chip:active, .seg button:active:not(:disabled) { transform: scale(.97); }
.select { position: relative; display: inline-block; }
.select select {
  appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 12px; border: none; border-radius: 9px;
  background: var(--fill); font-size: .8125rem;
}
.select svg { position: absolute; right: 10px; top: 50%; margin-top: -3px; pointer-events: none; color: var(--label2); }
.bar { height: 6px; border-radius: 3px; background: var(--track); display: flex; overflow: hidden; }
.bar > span { display: block; height: 100%; }
.bar .f { background: var(--for); } .bar .a { background: var(--against); } .bar .b { background: var(--abst); }
.bar.big { height: 12px; border-radius: 6px; }
.empty { margin-top: 18px; padding: 26px 20px; text-align: center; }
.empty p { margin: 0; font-size: .9375rem; font-weight: 600; }
.empty .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sel); font-size: .875rem; line-height: 1.45; }
.source { max-width: 60ch; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--sep); font-size: .75rem; line-height: 1.5; color: var(--label2); }
.source.pcredit { margin-top: 4px; padding-top: 0; border-top: 0; }   /* Fotonachweis direkt unter der Quellenzeile */
.hl { background: var(--hit); border-radius: 3px; }
details.disc { border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
details.disc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 42px; font-size: .875rem; font-weight: 600; cursor: pointer; }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary svg { transition: transform 200ms var(--ease); color: var(--label2); }
details.disc[open] > summary svg { transform: rotate(180deg); }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: .8125rem; }
.facts dt { color: var(--label2); } .facts dd { margin: 0; }
.tagline { display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem; color: var(--label2); }
.tag { padding: 3px 8px; border-radius: 6px; background: var(--fill); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px; background: var(--fill); font-size: .8125rem; font-weight: 600; }
.chev { transition: transform 180ms var(--ease); color: var(--label2); flex: none; }
.open > .chev, [aria-expanded="true"] > .chev { transform: rotate(90deg); }
.pop { position: absolute; z-index: 20; padding: 4px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); transform-origin: top right; animation: pop-in 160ms var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.pop button, .pop a { display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; text-align: left; text-decoration: none; color: var(--label); }
.pop button:hover, .pop a:hover, .pop [aria-selected="true"] { background: var(--fill); }
.pop small { display: block; font-size: .75rem; color: var(--label2); }

/* ---------- Plenum: Liste ---------- */
.day { margin-top: 14px; }
.day-h {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 6px; border: none; border-radius: 9px;
  background: transparent; text-align: left;
}
.day-h:hover { background: var(--fill); }
.day-h .t { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.day-h .n { margin-left: auto; font-size: .8125rem; color: var(--label2); }
.rows { margin-top: 6px; padding: 4px; }
.row {
  display: block; width: 100%; padding: 12px 14px 13px; border: none; border-radius: 11px; background: transparent; text-align: left;
  transition: background-color 150ms ease-out, transform 120ms var(--ease);
}
a.row { color: inherit; text-decoration: none; }
.row:hover { background: var(--fill); }
.row:active { transform: scale(.992); }
.row[aria-current="page"] { background: var(--sel); }
.row .t { font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.row .m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .75rem; color: var(--label2); }
.row .r { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: .75rem; }
.row .r .bar { flex: 1 1 auto; }
.row .r .tl { color: var(--label2); white-space: nowrap; }
.row .r .oc { font-weight: 600; white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.toolbar .cnt { margin-left: auto; font-size: .8125rem; color: var(--label2); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--label2); cursor: pointer; }
.check input { accent-color: var(--tint); width: 16px; height: 16px; margin: 0; }

/* Kalender */
.cal { position: fixed; z-index: 45; top: 0; left: 0; width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 14px 16px; border-radius: 18px; }
.cal:focus { outline: none; }
/* Jahreszeile bleibt beim Scrollen stehen; gescrollt laufen die Monate weich darunter aus (Scroll-Kante statt Trennlinie) */
.cal .cal-h { position: sticky; top: -14px; z-index: 1; margin: -14px -16px 0; padding: 14px 16px 8px;
  border-radius: 18px 18px 0 0; }
.cal.scrolled .cal-h { background: linear-gradient(color-mix(in srgb, var(--surface) 96%, transparent) 72%, color-mix(in srgb, var(--surface) 0%, transparent)); }
.cal-h { display: flex; align-items: center; justify-content: space-between; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px 12px; margin-top: 12px; }
.cal-m h4 { margin: 0 0 4px 2px; font-size: .75rem; font-weight: 600; }
.cal-days { --g: 2px; --r: 7px; display: grid; grid-template-columns: repeat(7, 26px); gap: var(--g); }
.cal-days.cal-wd { margin-bottom: 2px; }
.cal-days.cal-wd span { height: auto; font-size: .625rem; font-weight: 600; color: var(--label2); text-align: center; line-height: 1.4; }
.cal-days .nodata { background: none; box-shadow: inset 0 0 0 1px var(--sep); color: var(--label2); }
.cal-days > * { width: 26px; height: 24px; border: none; border-radius: var(--r); padding: 0; display: grid; place-items: center; font-size: .6875rem; background: transparent; color: var(--label2); }
.cal-days .avail { background: var(--tint); color: var(--on-tint); }
.cal-days .soon { background: var(--soon); color: var(--label); }
.cal-days .plan { box-shadow: inset 0 0 0 1.5px var(--tint); color: var(--tint); }
/* Gewählte Woche: eine durchgehende Kapsel in Textfarbe; die Lücke zwischen den Tagen füllt ::after */
.cal-days .cur { position: relative; border-radius: 0; background: var(--label); color: var(--bg); font-weight: 600; }
.cal-days .cur.s { border-top-left-radius: var(--r); border-bottom-left-radius: var(--r); }
.cal-days .cur.e { border-top-right-radius: var(--r); border-bottom-right-radius: var(--r); }
.cal-days .cur:not(.e)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--g); background: inherit; }
@media (max-width: 860px) { /* Telefon: ein Monat je Zeile, Tage auf voller Breite und groß genug zum Tippen */
  .cal-grid { grid-template-columns: 1fr; gap: 18px; }
  .cal-days { --g: 4px; --r: 10px; grid-template-columns: repeat(7, 1fr); }
  .cal-days > * { width: auto; height: 36px; font-size: .875rem; }
  .cal-m h4 { font-size: .8125rem; margin-bottom: 6px; }
}
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .75rem; color: var(--label2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.icon-btn { width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--label2); display: inline-grid; place-items: center; }
.icon-btn:hover:not(:disabled) { background: var(--fill); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Detail ---------- */
.detail { padding: 26px 28px 24px; border-radius: 18px; background: var(--surface); }
.detail h2 { margin: 12px 0 0; font-size: 1.5625rem; line-height: 1.18; font-weight: 650; letter-spacing: -0.018em; text-wrap: balance; }
.d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.d-top .when { font-size: .8125rem; color: var(--label2); }
@media (max-width: 600px) { .d-top { flex-wrap: nowrap; } .d-top .when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-top .pill { flex: none; } }
/* Offenes Blatt: die schwebenden Knöpfe oben rechts treten zurück (sie lägen sonst über Teilen und Schließen) */
html.sheet-open .topbtns { visibility: hidden; opacity: 0; }
.d-close { margin-left: auto; }
.d-share { margin-left: auto; } .d-share + .d-close { margin-left: 0; }
/* Abstimmung: Auswahl als eine Gruppe (Zähler, Zurücksetzen, Fraktion, Mitgliedstaat, Partei), darunter Ansicht und Aktionen */
.fxpanel { margin-top: 18px; padding: 10px 12px 12px; border-radius: 14px; background: var(--bg); }
.fx-h { display: flex; align-items: baseline; gap: 8px; min-height: 24px; margin: 0 2px 8px; font-size: .8125rem; color: var(--label2); }
.fx-t { font-weight: 600; color: var(--label); }
.fx-reset { margin-left: auto; padding: 2px 0; border: 0; background: none; color: var(--tint); font-size: .8125rem; font-weight: 500; }
.fx-reset:hover { text-decoration: underline; }
.fxchips .chip { min-height: 30px; background: var(--surface); }
.fxchips .chip[aria-pressed="true"] { background: var(--sel); }
.fx-sels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fxsel select { height: 32px; max-width: 100%; background: var(--surface); color: var(--label); }
.fxsel.on select { background: var(--sel); color: var(--sel-ink); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 45%, transparent); }
.fxsel.on svg { color: var(--sel-ink); }
.viewrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.viewrow-act { display: flex; gap: 8px; margin-left: auto; }
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.big3 .v { font-size: 2.375rem; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.big3 .k { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8125rem; color: var(--label2); }
.gtable .h, .gtable .r { display: grid; grid-template-columns: minmax(0, 1fr) 128px 40px 40px 40px; gap: 0 10px; align-items: center; border-bottom: 1px solid var(--sep); }
.gtable .h { padding: 6px 0; font-size: .6875rem; font-weight: 600; color: var(--label2); }
.gtable .r { min-height: 38px; font-size: .875rem; }
.gtable .h span:nth-child(n+3), .gtable .r span:nth-child(n+3) { text-align: right; }
/* Teilabstimmungen im Abstimmungsdetail (ol.toc; das Inhaltsverzeichnis der Lesetexte ist nav.toc) */
ol.toc { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 300px; overflow-y: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sep); }
.toc button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 9px; background: transparent; text-align: left; font-size: .8125rem; }
.toc button:hover { background: var(--fill); }
.toc button[aria-current="true"] { background: var(--sel); }
.toc .mt { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--sel); color: var(--tint); font-size: .6875rem; font-weight: 600; }
.toc-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px; border: none; border-radius: 11px; background: var(--fill); text-align: left; }
.mgroup { border-bottom: 1px solid var(--sep); }
.mgroup > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 4px; border: none; background: transparent; text-align: left; font-size: .875rem; }
.mgroup > button .t { font-weight: 600; }
.mgroup > button .n { margin-left: auto; font-size: .75rem; color: var(--label2); }
.mlist { list-style: none; margin: 0; padding: 0 4px 10px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; }
.mlist li { display: flex; align-items: baseline; gap: 7px; min-height: 26px; font-size: .8125rem; }
.mlist li .dot { width: 8px; height: 8px; transform: translateY(-1px); }
.mlist .s { color: var(--label2); }
.mlist .cr { display: block; font-size: .75rem; color: var(--label2); }
.mlist a { color: inherit; text-decoration: none; font-weight: 500; }
.mlist a:hover { text-decoration: underline; }
.pblock + .pblock { margin-top: 12px; }
.pblock .ph { display: flex; align-items: baseline; gap: 8px; font-size: .8125rem; }
.pblock .ph .tl { margin-left: auto; color: var(--label2); }
.pblock .pp { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .8125rem; }
.pblock .pp span { display: inline-flex; align-items: center; gap: 5px; }
.pblock .pp .dot { width: 8px; height: 8px; }

/* ---------- Abgeordnete ---------- */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mcard {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface);
  color: var(--label); text-decoration: none; transition: background-color 150ms ease-out, transform 120ms var(--ease);
}
.mcard:hover { background: color-mix(in srgb, var(--surface) 90%, var(--tint)); }
.mcard:active { transform: scale(.99); }
.ini { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sel); color: var(--tint); display: grid; place-items: center; font-size: .875rem; font-weight: 600; }
/* Porträt: Initialen darunter als Platzhalter, Foto blendet nach dem Laden ein */
/* Porträts im Hochformat 4 : 5 wie die EP-Fotos selbst: ganzes Bild, kein angeschnittener Kopf (halb so groß wie im Profilkopf) */
.av { position: relative; flex: none; width: 40px; height: 50px; border-radius: 10px; overflow: hidden; background: var(--sel); }
.av .ini { width: 100%; height: 100%; border-radius: 0; background: none; font-size: .875rem; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; opacity: 0; transition: opacity .3s var(--ease); }
.av img.ok { opacity: 1; }
.av::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); pointer-events: none; }
.av.sm { width: 24px; height: 30px; border-radius: 6px; }
.av.sm .ini { font-size: .6875rem; }
.pname { display: inline-flex; align-items: center; gap: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av::after { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); } }
:root[data-theme="dark"] .av::after { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); }
.mcard .nm { display: block; font-size: .9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .sb { display: block; font-size: .75rem; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blockh { margin: 22px 0 8px 4px; display: flex; align-items: baseline; gap: 8px; font-size: .9375rem; font-weight: 600; }
.blockh .n { font-size: .8125rem; font-weight: 400; color: var(--label2); }
table.plain { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.plain th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--label2); padding: 8px 10px; border-bottom: 1px solid var(--sep); }
table.plain td { padding: 9px 10px; border-bottom: 1px solid var(--sep); }
/* Schmal: jede Zeile als kleiner Block, Spaltenname vor dem Wert */
@media (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--sep); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { padding: 2px 0; border: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; }
  table.stack td:first-child { display: block; padding-bottom: 6px; font-weight: 600; }
  table.stack td::before { content: attr(data-l); color: var(--label2); font-size: .8125rem; }
  table.stack td:first-child::before { content: none; }
  table.stack td.r { text-align: left; }
}
/* Telefon: in Stimmlisten (Profil, Vergleich) steht die Position unter dem Titel, der Titel bekommt die volle Breite */
@media (max-width: 600px) {
  .vrow:has(> .ps) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .vrow > .ps { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; margin-top: 4px; }
  .vrow:has(> .ps) > svg { grid-column: 2; grid-row: 1 / span 2; }
  .vrow .t.clamp2 { -webkit-line-clamp: 3; line-clamp: 3; }
  table.stack.bltab td { grid-template-columns: 9rem 1fr; }
}

/* ---------- Profil ---------- */
.phead { display: flex; align-items: center; gap: 16px; }
.phead .av { width: 88px; height: 88px; }
.phead .av .ini { font-size: 1.75rem; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats3 .v { font-size: 1.75rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.stats3 .k { margin-top: 4px; font-size: .75rem; color: var(--label2); hyphens: auto; overflow-wrap: break-word; }
.stats3 > div { min-width: 0; }
.vrow { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 9px 14px 9px 0; border-top: 1px solid var(--sep); color: inherit; text-decoration: none; }
.vrow:first-child { border-top: none; }
.vrow:hover .t { text-decoration: underline; text-decoration-color: var(--sep); }
.vrow .t { font-size: .9375rem; line-height: 1.3; }
.vrow .mt { display: block; margin-top: 3px; font-size: .75rem; color: var(--label2); }
.vrow .mt.vdate { flex: none; margin: 0; }
.vrow .ps { flex: none; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .8125rem; font-weight: 600; }
.vrow .ps small { font-size: .6875rem; font-weight: 400; color: var(--label2); }
.ps.f { color: var(--for); } .ps.a { color: var(--against-text); } .ps.b, .ps.n, .ps.e { color: var(--label2); }
.pager { display: flex; align-items: center; gap: 2px; }
.pager button { min-width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--label); font-size: .8125rem; }
.pager button[aria-current="page"] { background: var(--tint); color: var(--on-tint); font-weight: 600; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .gap { min-width: 18px; text-align: center; color: var(--label2); }
.near { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; align-items: center; gap: 10px; min-height: 32px; font-size: .875rem; }
.near .track { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.near .track span { display: block; height: 100%; border-radius: 4px; background: var(--tint); }

/* ---------- Mobil: Tab-Leiste, Sheets ---------- */
.tabbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; }
.scrim.on { opacity: 1; pointer-events: auto; }
.grabber { display: none; }
.mobile-only { display: none !important; }

@media (max-width: 1180px) {
  .col-detail {
    position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); max-height: none; padding: 0;
    background: var(--surface); box-shadow: -20px 0 40px -20px rgba(0,0,0,.35);
    transform: translateX(105%); transition: transform 320ms var(--ease); visibility: hidden;
  }
  .col-detail.open { transform: none; visibility: visible; }
  .col-detail .detail { border-radius: 0; min-height: 100%; }
}
@media (max-width: 860px) {
  .side { display: none; }
  .mbar { display: flex; align-items: center; justify-content: space-between; margin: 0 -6px 20px 0; }
  .mbrand { display: flex; width: fit-content; color: var(--label); }
  .mbrand .lockup { display: block; width: 126.4px; height: 30px; }
  .mobile-only { display: revert !important; }
  .col-list, .page { padding: 18px 16px 110px; }
  h1.big { font-size: 2rem; }
  .tabbar {
    /* Tabs so breit wie ihr Wort, der Rest gleichmäßig verteilt: „Abstimmungen“ passt auch bei 320 px neben „Abgeordnete“ */
    display: flex; gap: 2px; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  }
  .tabbar button { border: none; background: none; font: inherit; padding: 0; cursor: pointer; }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; color: var(--label2); text-decoration: none; font-size: clamp(10.5px, 2.95vw, .6875rem); letter-spacing: -0.005em; font-weight: 500; white-space: nowrap; flex: 1 1 auto; }
  .tabbar a[aria-current="page"] { color: var(--tint); font-weight: 600; }
  .col-detail {
    top: 44px; left: 0; width: 100%; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.2);
    transform: translateY(105%);
  }
  .col-detail .detail { border-radius: 16px 16px 0 0; padding: 0 18px 40px; }
  .grabber { display: block; position: sticky; top: 0; z-index: 2; padding: 6px 0 2px; background: var(--surface); touch-action: none; cursor: grab; }
  .grabber span { display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--label2); opacity: .35; }
  .detail h2 { font-size: 1.375rem; }
  .seg .lg { display: none; } .seg .sm { display: inline; }
  .seg .lg:only-child { display: inline; }
  .big3 .v { font-size: 2rem; }
  .gtable .h, .gtable .r { grid-template-columns: minmax(0, 1fr) 72px 36px 36px 36px; gap: 0 6px; }
  .chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px; padding: 0 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .chips.scroll::-webkit-scrollbar { display: none; }
  /* Beim Abwärtsscrollen treten die schwebenden Knöpfe (Suche, Fragen, Nach oben) zurück und verdecken keinen Text */
  .topbtns, .totop { transition: transform .26s var(--ease), opacity .2s ease-out; }
  html.scroll-down .topbtns { transform: translateY(calc(-100% - 16px)); opacity: 0; pointer-events: none; }
  html.scroll-down .totop.on { transform: translateY(12px); opacity: 0; pointer-events: none; }
  .fxchips .chip { min-height: 36px; }   /* mit der unsichtbaren Fläche 44 px */
  .field, .field.fill { height: 44px; }   /* Suchfelder als Touch-Ziel */
  .day-h { min-height: 44px; }
  .search.big input::placeholder { font-size: .9375rem; }
  /* Touch: Ziele mindestens 44 px (PRODUCT.md). Knöpfe und Menüs wachsen sichtbar; Chips und Segmente bleiben
     schlank, ihre Trefferfläche wächst unsichtbar */
  .btn, .select select { min-height: 44px; }
  .btn.plain.d-icon, .d-close { min-width: 44px; justify-content: center; }
  .chips { gap: 8px; }
  .chip { position: relative; min-height: 36px; }
  .chip::after { content: ''; position: absolute; inset: -4px 0; }
  .seg button { position: relative; }
  .seg button::after { content: ''; position: absolute; inset: -6px 0; }
  [id] { scroll-margin-top: calc(68px + env(safe-area-inset-top, 0px)); }
  /* Chip-Zeile zum Wischen: weicher Rand rechts zeigt, dass es weitergeht */
  .chips.scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .fxpanel .chips.scroll { margin: 0 -12px; padding: 0 12px; }
  .fx-sels .fxsel { flex: 1 1 140px; min-width: 0; }
  .fx-sels .fxsel select { width: 100%; }
  .viewrow > .seg { display: flex; width: 100%; } .viewrow > .seg > button { flex: 1 1 0; }
  .viewrow-act { width: 100%; margin-left: 0; } .viewrow-act > .btn { flex: 1 1 0; justify-content: center; }
  .mlist { grid-template-columns: 1fr; padding-left: 18px; }
  .stats3 .v { font-size: 1.5rem; }
  .weeksheet { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 0 16px 30px; background: var(--surface); border-radius: 16px 16px 0 0; transform: translateY(105%); transition: transform 320ms var(--ease); visibility: hidden; }
  .weeksheet.open { transform: none; visibility: visible; }
}
.wk-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; }   /* Kopf des Wochenblatts (Telefon) */
/* Breit: die Seitenleiste hat ihre eigene Wochenliste; das Blatt (samt role=dialog) gibt es nur schmal */
@media (min-width: 861px) { .weeksheet { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .col-detail, .weeksheet { transition: opacity 200ms ease-out !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .tabbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Landingpage ---------- */
.landing { --pw: 1060px; --pw2: 1640px; margin: 0 auto; padding-top: 64px; }
.display { margin: 0; font-size: clamp(2.25rem, 4.4vw, 3.375rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; }
.lede { margin: 16px 0 0; max-width: 58ch; font-size: 1.1875rem; line-height: 1.45; color: var(--label2); text-wrap: pretty; }
.search.big { margin-top: 30px; }
.search.big .field { height: 54px; padding-left: 46px; border-radius: 15px; font-size: 1.0625rem; box-shadow: inset 0 0 0 1px var(--sep), 0 1px 2px rgba(0,0,0,.04); }
.search.big > svg { left: 16px; width: 18px; height: 18px; margin-top: -9px; }
.search.big .pop { left: 0; right: 0; top: 60px; max-height: 70vh; overflow-y: auto; transform-origin: top center; }
.pop .grp { padding: 8px 10px 4px; font-size: .75rem; font-weight: 600; color: var(--label2); }
.pop .grp + a, .pop a + .grp { margin-top: 2px; }
.hint { margin: 12px 0 0; font-size: .875rem; color: var(--label2); }
.hint button { padding: 0; border: none; background: none; color: var(--tint); font-size: inherit; }
.hint button:hover { text-decoration: underline; }
/* Startseite: Datenumfang unter der Suche (Kennzahlen der heutigen Startseite); Zahl über der Bezeichnung */
.hero-kpis { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; gap: 12px 36px; margin: 24px 0 0; }
.hero-kpis div { display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; }
.hero-kpis dd { margin: 0; font-size: 1.75rem; line-height: 1.05; font-weight: 650; letter-spacing: -0.022em; }
.hero-kpis dt { font-size: .8125rem; line-height: 1.3; color: var(--label2); hyphens: manual; }
@media (max-width: 520px) {
  .hero-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 20px; }
  .hero-kpis dd { font-size: 1.5rem; }
}
.block { margin-top: 52px; }
.block h2 { margin: 0 0 12px 4px; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.016em; }
.latest { padding: 18px 20px 8px; }
.latest .wk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.latest .wk strong { font-size: 1.0625rem; letter-spacing: -0.012em; }
.latest .wk span { font-size: .875rem; color: var(--label2); }
.latest .wk .tleg { margin-left: auto; } .latest .wk .tleg span { font-size: .75rem; }
.listleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: .75rem; color: var(--label2); }
.latest .rows { margin: 10px -12px 0; padding: 0; }
.latest .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 6px -2px 0; padding: 12px 0 10px; border-top: 1px solid var(--sep); font-size: .875rem; color: var(--label2); }
.country { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; }
.country .select select { height: 40px; min-width: 240px; font-size: .9375rem; }
.golist { padding: 4px 0 4px 16px; }
.golist a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px 10px 0; color: var(--label); text-decoration: none; border-top: 1px solid var(--sep); }
.golist a:first-child { border-top: none; }
.golist a .t { display: block; font-size: .9375rem; font-weight: 500; }
.golist a .d { display: block; margin-top: 2px; font-size: .8125rem; color: var(--label2); }
.golist a > svg:last-child { margin-left: auto; color: var(--label2); flex: none; }
.golist a > .ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--sel); color: var(--tint); }
@media (hover: hover) and (pointer: fine) { .golist a:hover .t { color: var(--tint); } }
/* Hero: Text und Suche links, Sitzverteilung rechts; schmaler untereinander */
.hero { display: grid; gap: 44px; }
@media (min-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 56px; align-items: center; }
  .hero .display { font-size: clamp(2.5rem, 3.7vw, 3.25rem); }
}
.parl { margin: 0; width: 100%; max-width: 440px; justify-self: center; container-type: inline-size; }
@media (max-width: 1199px) { .parl { max-width: 360px; } }
@media (min-width: 900px) and (max-width: 1199px) {
  /* Tablet und kleiner Desktop: Halbrund neben dem Text, damit „Zuletzt im Plenum“ über dem Falz bleibt */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 32px; align-items: center; }
  .hero .display { font-size: clamp(2rem, 3.4vw, 2.5rem); }
}
.parl-chart { position: relative; container-type: inline-size; }
.parl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.parl .seg { cursor: pointer; transition: opacity .18s var(--ease), transform .26s var(--ease); }
.parl[data-active] .seg { opacity: .22; }
.parl[data-active] .seg.on { opacity: 1; transform: translate(var(--dx), var(--dy)); }
.parl .cover { fill: none; stroke: var(--bg); visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .parl .cover { animation: parl-sweep 1.15s cubic-bezier(.32,.72,.24,1) .15s backwards; }
  @keyframes parl-sweep { from { visibility: visible; stroke-dashoffset: 0; } to { visibility: visible; stroke-dashoffset: -1; } }
}
@media (prefers-reduced-motion: reduce) { .parl[data-active] .seg.on { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.scroll-down .topbtns, html.scroll-down .totop.on { transform: none; } }
@media (max-width: 340px) { .tabbar a, .tabbar button { letter-spacing: -0.02em; } }   /* 320 px: „Abgeordnete“ passt in die Spalte */
.parl-c { position: absolute; left: 50%; bottom: 0; width: 56%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.parl-c .n { display: block; font-size: 12.5cqw; font-weight: 650; line-height: 1; letter-spacing: -0.035em; }
.parl-c .l { display: block; margin-top: 1.6cqw; font-size: clamp(.8125rem, 3.5cqw, .9375rem); color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Legende: drei Spalten in Sitzordnung, Zahl direkt hinter dem Namen; schmal zwei Spalten */
.parl-leg { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0 14px; }
@container (max-width: 379px) { .parl-leg { grid-template-columns: repeat(2, auto); gap: 0 20px; } }
.parl-leg a { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px; border-radius: 7px; color: var(--label); text-decoration: none; font-size: .8125rem; white-space: nowrap; transition: opacity .18s var(--ease), background-color .18s var(--ease); }
.parl-leg i { flex: none; width: 8px; height: 8px; border-radius: 2.5px; }
.parl-leg b { margin-left: 1px; font-weight: 400; color: var(--label2); }
.parl-leg a.on { background: var(--fill); }
.parl-leg a.on b { color: var(--label); }
.parl[data-active] .parl-leg a:not(.on) { opacity: .5; }
.parl figcaption { margin: 8px 0 0; text-align: center; font-size: .75rem; line-height: 1.45; color: var(--label2); text-wrap: pretty; }
@media (max-width: 860px) {
  .landing { padding-top: 18px; }
  .lede { font-size: 1.0625rem; }
  .block { margin-top: 40px; }
  .country .select, .country .select select, .country .btn { width: 100%; }
}

/* ---------- Fragen (Chatbot) ---------- */
/* Zeile „Fragen: …“ in den Suchvorschlägen */
.pop a.askrow { display: flex; align-items: flex-start; gap: 10px; }
.pop a.askrow > .ic { flex: none; margin-top: 1px; color: var(--tint); }
.pop a.askrow > span { min-width: 0; }
/* Panel: Desktop rechts, schwebend und ohne Abdunkeln; Telefon als Sheet */
.ask {
  position: fixed; z-index: 50; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px));
  display: flex; flex-direction: column; background: var(--surface); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35), 0 0 0 1px var(--sep);
}
.ask[hidden] { display: none; }
.ask.in { animation: ask-in 280ms var(--ease); }
@keyframes ask-in { from { opacity: 0; transform: translateX(18px); } }
.ask-head { display: flex; align-items: center; gap: 6px; padding: 14px 12px 8px 20px; }
.ask-head h2 { flex: 1; margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; }
.ask-head .btn.plain { height: 30px; font-size: .8125rem; color: var(--tint); }
.ask-x { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--fill); color: var(--label2); display: grid; place-items: center; }
.ask-x:hover { color: var(--label); }
.ask-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.ask-empty p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--label2); }
.ask-ex { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ask-ex button { padding: 10px 12px; border: none; border-radius: 12px; background: var(--fill); text-align: left; font-size: .875rem; line-height: 1.35; color: var(--label); }
.ask-ex button:hover { background: var(--sel); }
.ask-q { align-self: flex-end; max-width: 86%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--tint); color: var(--on-tint);
  font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-a { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.ask-a p { margin: 0 0 8px; }
.ask-a ul { margin: 0 0 8px; padding-left: 18px; }
.ask-a li { margin: 3px 0; }
.ask-a a { color: var(--tint); text-underline-offset: 2px; }
.ask-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ask-a .ask-card { background: var(--bg); color: var(--label); text-decoration: none; }
.ask-card:hover { background: var(--fill); }
.ask-card.mep { display: flex; align-items: center; gap: 12px; }
.ask-card.mep .m { margin-top: 2px; }
/* Fraktionsergebnis in der Antwort: Karte der Abstimmung, darunter eine Zeile je Fraktion
   (Balken = Anteile an den abgegebenen Stimmen, die stärkste Position je Fraktion hervorgehoben) */
.ask-vg { margin: 4px 0 12px; border-radius: 14px; background: var(--bg); }
.ask-a .ask-vg .ask-card { background: none; }
.ask-a .ask-vg .ask-card:hover { background: var(--fill); }
.ask-gt { display: grid; grid-template-columns: max-content minmax(36px, 1fr) repeat(3, max-content); column-gap: 10px;
  margin: 0 14px; padding: 6px 0 10px; border-top: 1px solid var(--sep); font-size: .8125rem; }
.ask-vg > .ask-gt:first-child { border-top: none; padding-top: 10px; }
.ask-gt .sub { grid-column: 1 / -1; margin: 2px 0 4px; font-weight: 600; color: var(--label); }
.ask-vg-cap { margin: 0; padding: 12px 14px 8px; font-size: .875rem; font-weight: 500; line-height: 1.35; }
.ask-gt .h, .ask-gt .r { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.ask-gt .h { padding: 2px 0 4px; font-size: .6875rem; font-weight: 600; color: var(--label2); }
.ask-gt .r { min-height: 26px; }
.ask-gt .r > :first-child { white-space: nowrap; }
.ask-gt .h > :nth-child(n+3), .ask-gt .r > :nth-child(n+3) { min-width: 2ch; text-align: right; }
.ask-gt .num { color: var(--label2); }
.ask-gt .num.top { color: var(--label); font-weight: 600; }
.ask-ph { color: var(--label2); }
/* Warten: ruhige Statuszeile, leicht pulsierend (kein Schimmer, keine Tipp-Punkte) */
.ask-wait { font-size: .875rem; color: var(--label2); }
@media (prefers-reduced-motion: no-preference) {
  .ask-wait { animation: ask-pulse 1.6s ease-in-out infinite; }
  @keyframes ask-pulse { 50% { opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) { .ask.in { animation: none; } }
.ask-err { padding: 12px 14px; border-radius: 12px; background: var(--fill); font-size: .875rem; }
.ask-err p { margin: 0 0 10px; }
.ask-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 5px 5px 5px 14px; border-radius: 22px; background: var(--fill); }
.ask-form:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 35%, transparent); }
.ask-form textarea { flex: 1; min-width: 0; max-height: 140px; padding: 7px 0; border: none; background: transparent; resize: none; outline: none;
  font: inherit; font-size: .9375rem; line-height: 1.4; color: var(--label); }
.ask-send { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: grid; place-items: center; }
.ask-send:disabled { opacity: .35; cursor: default; }
.ask-note { margin: 8px 20px 14px; font-size: .6875rem; line-height: 1.45; color: var(--label2); text-wrap: pretty; }
/* Telefon: Suche wie Spotlight (Tab „Suchen“) */
.ssheet { display: none; }
@media (max-width: 860px) {
  .ask { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(100dvh - 40px); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); transition: transform 320ms var(--ease); }
  .ask.in { animation: ask-up 320ms var(--ease); }
  @keyframes ask-up { from { transform: translateY(100%); } }
  .ask .grabber { position: static; background: none; }
  .ask-head { padding-top: 4px; }
  .ask-note { margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ssheet { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(100dvh - 40px); display: flex; flex-direction: column;
    background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); transition: transform 320ms var(--ease); }
  .ssheet[hidden] { display: none; }
  .ssheet .grabber { position: static; background: none; }
  .ss-head { display: flex; align-items: center; gap: 6px; padding: 4px 12px 10px 16px; }
  .ss-head .search { flex: 1; }
  .ssheet .pop { position: static; margin: 0 8px; padding: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; overflow-y: auto; }
  .ss-more { flex: 1; overflow-y: auto; padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ss-more .grp { padding: 14px 10px 6px; font-size: .75rem; font-weight: 600; color: var(--label2); }
  .ss-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: none; border-radius: 10px; background: none; text-align: left; font-size: .9375rem; color: var(--label); }
  .ss-row:active { background: var(--fill); }
  .ss-row > .ic { flex: none; margin-top: 1px; color: var(--tint); }
  .ss-row small { display: block; margin-top: 2px; font-size: .75rem; color: var(--label2); }
  @media (prefers-reduced-motion: reduce) { .ask.in { animation: none; } }
}

/* ---------- Gemeinsame Bausteine der Auswertungsseiten (Themen, Statistiken, Vergleich, Blöcke, Daten) ---------- */
.lede-s { margin: 14px 0 0; max-width: 70ch; font-size: 1rem; line-height: 1.5; color: var(--label2); text-wrap: pretty; }
.block-s { margin-top: 34px; }
.h2s { margin: 0 0 4px 2px; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.016em; }
.secnote { margin: 0 0 12px 2px; max-width: 72ch; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.kpis { margin-top: 22px; padding: 18px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.kpis .v { font-size: 1.75rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.kpis .k { margin-top: 5px; font-size: .75rem; line-height: 1.35; color: var(--label2); hyphens: auto; overflow-wrap: break-word; }
.kpis .v.vtx { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.kpis .k2 { margin-top: 2px; font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }
.kpis > div { min-width: 0; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.cnt { margin-left: auto; font-size: .8125rem; color: var(--label2); }
.pagerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pinfo { font-size: .8125rem; color: var(--label2); }
/* Balkenzeilen: Name, Balken in Akzentfarbe (eine Farbe = Menge), Zahl */
.topbars { padding: 6px; }
.topbar, .thead { display: grid; grid-template-columns: minmax(0, 15rem) minmax(40px, 1fr) 3.2em; align-items: center; gap: 12px; width: 100%;
  padding: 7px 10px; border: none; border-radius: 9px; background: none; text-align: left; color: var(--label); font-size: .875rem; }
.topbar:hover, .thead:hover { background: var(--fill); }
.tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.tbar > span { display: block; height: 100%; border-radius: 3px; background: var(--tint); }
.tc { text-align: right; color: var(--label2); }
.tlist { padding: 4px 6px; }
.thead { grid-template-columns: minmax(0, 15rem) minmax(40px, 1fr) 3.2em 12px; min-height: 42px; }
.thead .tbar > span { opacity: .55; }
.thead[aria-expanded="true"] .chev, .thead[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.thead svg:last-child { color: var(--label2); transition: transform 180ms var(--ease); }
.tvotes { padding: 0 6px 10px 18px; }
.tvotes .vrow > svg { flex: none; color: var(--label2); }
.tvotes .more { margin-top: 6px; color: var(--tint); }
.trow + .trow { border-top: 1px solid var(--sep); }
.trow.flash { animation: flash 1.2s ease-out; border-radius: 9px; }
@keyframes flash { 0%, 30% { background: var(--sel); } 100% { background: transparent; } }
@media (max-width: 560px) {
  .topbar, .thead { grid-template-columns: minmax(0, 1fr) 70px 2.8em; }
  .thead { grid-template-columns: minmax(0, 1fr) 54px 2.6em 12px; }
}
@media (prefers-reduced-motion: reduce) { .trow.flash { animation: none; background: var(--sel); } }

/* ---------- Vergleich ---------- */
.pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; margin-top: 22px; }
.picker { min-width: 0; }
.plab { display: block; margin: 0 0 6px 2px; font-size: .8125rem; font-weight: 600; color: var(--label2); }
.picker .search .field { padding-right: 38px; }
.picker .pop { left: 0; right: 0; top: 44px; max-height: 300px; overflow-y: auto; transform-origin: top center; }
.picker .pop button { display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: none; text-align: left; color: var(--label); }
.picker .pop button:hover, .picker .pop [aria-selected="true"] { background: var(--fill); }
.picker .pop .nm { display: block; font-size: .9375rem; font-weight: 500; }
.pnone { margin: 8px 10px; font-size: .8125rem; color: var(--label2); }
.pclear { position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border: none; border-radius: 50%; background: none; color: var(--label2); display: grid; place-items: center; }
.pclear:hover { background: var(--fill); color: var(--label); }
.pswap { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--fill); color: var(--label2); display: grid; place-items: center; }
.pswap:hover { color: var(--label); }
#result { margin-top: 18px; }
.cmp { padding: 20px 22px 18px; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cmp-head .vs { font-size: .8125rem; color: var(--label2); }
.cmp-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--label); text-decoration: none; }
.cmp-who .nm { display: block; font-size: .9375rem; font-weight: 600; }
.cmp-who .mt { display: block; font-size: .75rem; color: var(--label2); }
.cmp-who:hover .nm { color: var(--tint); }
.cmp-big { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 12px; }
.cmp-big .v { font-size: 3rem; line-height: 1; font-weight: 650; letter-spacing: -0.03em; }
.cmp-big .k { font-size: .875rem; color: var(--label2); }
.cmp-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .8125rem; color: var(--label2); }
.cmp-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-leg b { color: var(--label); font-weight: 600; }
.cmp-pos, .vrow .mt.cmp-pos { display: flex; flex-wrap: wrap; gap: 2px 14px; }
/* Übereinstimmung: gleich = Akzent, unterschiedlich = neutral; keine Stimmfarben, denn das sind keine Positionen */
.cmp-bar .same, .dot.same { background: var(--tint); } .cmp-bar .diff, .dot.diff { background: var(--label2); }
.cmp-bar .same + .diff { margin-left: 2px; }
.cmp-abw-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cmp-more { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: .8125rem; color: var(--label2); }

@media (max-width: 640px) {
  .pickers { grid-template-columns: 1fr; }
  .pswap { justify-self: center; transform: rotate(90deg); }
}
.pv { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.pv.f { color: var(--for); } .pv.a { color: var(--against-text); } .pv.b { color: var(--label2); }

/* ---------- Blöcke ---------- */
.gsw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.blk { margin-top: 16px; padding: 20px 22px; }
.blk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.018em; }
.blk-h .gsw { align-self: center; }
.blk-h small { font-size: .8125rem; font-weight: 400; color: var(--label2); }
.kpis.in { margin: 16px 0 0; padding: 0; background: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-sub { margin: 22px 0 2px; font-size: .9375rem; font-weight: 600; }
.blk-link { margin: 16px 0 0; font-size: .875rem; }
/* Vorsitz der Fraktion: Porträt und Name als kleine Karten unter dem Fraktionsnamen */
.blk-chairs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.blk-chair { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px; background: var(--bg); color: var(--label); text-decoration: none;
  transition: background-color 150ms ease-out, transform 120ms var(--ease); }
.blk-chair:hover { background: var(--fill); }
.blk-chair:active { transform: scale(.98); }
.blk-chair .t { display: block; font-size: .9375rem; font-weight: 500; letter-spacing: -0.01em; }
.blk-chair .m { display: block; margin-top: 1px; font-size: .75rem; color: var(--label2); }
.blk-board { margin: 10px 0 2px; border-radius: 14px; background: var(--bg); }
.blk-board summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; border-radius: 14px; }
.blk-board summary::-webkit-details-marker { display: none; }
.blk-board summary:hover { background: var(--fill); }
.blk-board summary .t { font-size: .875rem; font-weight: 600; }
.blk-board summary .m { flex: 1; min-width: 0; font-size: .75rem; color: var(--label2); }
.blk-board summary svg { flex: none; color: var(--label2); transition: transform 200ms var(--ease); }
.blk-board[open] summary svg { transform: rotate(180deg); }
.blk-board h4 { margin: 8px 14px 6px; font-size: .75rem; font-weight: 600; color: var(--label2); }
.blk-ppl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; margin: 0; padding: 0 10px 8px; list-style: none; }
.blk-ppl a { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 8px; font-size: .8125rem; color: var(--label); text-decoration: none; }
.blk-ppl a:hover { background: var(--fill); }
.tablewrap { overflow-x: auto; }
.bltab td, .bltab th { white-space: nowrap; }
.bltab tr[aria-current="true"] td { background: var(--sel); }
.bltab .r { text-align: right; }
.lnk { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; color: var(--label); font: inherit; text-align: left; }
.lnk:hover { color: var(--tint); }
.minibar { display: grid; grid-template-columns: minmax(60px, 140px) 4.2em; align-items: center; gap: 10px; }
.minibar .num { text-align: right; color: var(--label2); font-size: .8125rem; }
@media (max-width: 560px) { .kpis.in { grid-template-columns: 1fr 1fr; } .minibar { grid-template-columns: 50px 4.2em; } }

/* ---------- Statistiken ---------- */
.stctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.weekpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; }
.weekpick .calmsg:empty { display: none; }
.kpis8 .k3 { color: var(--label2); opacity: .85; }
.kpis8 .k { font-weight: 500; color: var(--label); }
.kpis8 .k3 { font-weight: 400; }
.stc { margin-top: 14px; padding: 18px 20px; min-width: 0; }
.stc-h { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; }
.stc-s { margin: 4px 0 12px; font-size: .8125rem; line-height: 1.45; color: var(--label2); max-width: 70ch; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cols2 > .stc { margin-top: 14px; }
@media (max-width: 1100px) { .cols2 { grid-template-columns: 1fr; } }
/* Waagerechte Balkenzeile: Name (mit Untertitel), Balken, Wert */
.hb { display: grid; grid-template-columns: minmax(0, 13rem) minmax(40px, 1fr) 4.4em; align-items: center; gap: 12px; padding: 6px 0; font-size: .875rem; }
.hb + .hb { border-top: 1px solid var(--sep); }
.hb-l { min-width: 0; }
.hb-n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-n a { color: var(--label); text-decoration: underline; text-decoration-color: var(--sep); text-underline-offset: 3px; }
.hb-n a:hover { color: var(--tint); text-decoration: underline; }
.hb-s { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: .75rem; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-v { text-align: right; font-size: .8125rem; color: var(--label2); }
.dis { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: center; }
.dis + .dis { border-top: 1px solid var(--sep); }
.dis .hb + .hb, .dis .hb { border: none; }
.dis-r { font-size: .8125rem; color: var(--label2); }
/* Säulen über die Zeit */
.tchart { display: flex; align-items: flex-end; gap: 3px; height: 230px; padding-top: 4px; }
.tc-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.tc-plot { position: relative; flex: 1 1 auto; margin-top: 16px; border-bottom: 1px solid var(--sep); }
.tc-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
.tc-bar > span { display: block; min-height: 0; }
.tc-bar .f { background: var(--for); } .tc-bar .a { background: var(--against); } .tc-bar .b { background: var(--abst); }
.tc-n { position: absolute; left: -4px; right: -4px; font-size: .625rem; color: var(--label2); text-align: center; }
.tc-n.max { font-weight: 600; color: var(--label); }
@media (max-width: 860px) { .tc-n:not(.max) { display: none; } }
.tc-l { height: 2.4em; margin-top: 5px; font-size: .625rem; line-height: 1.2; color: var(--label2); text-align: center; white-space: nowrap; }
@media (max-width: 720px) { .tchart { height: 180px; } .tc-n:not(.max) { display: none; } }   /* die Summe der höchsten Säule bleibt */
/* Matrix */
.matrix { border-collapse: separate; border-spacing: 2px; font-size: .75rem; margin: 0 auto; }
.matrix th { font-weight: 600; color: var(--label2); padding: 4px 6px; white-space: nowrap; }
.matrix thead th { text-align: center; }
.matrix tbody th { text-align: right; }
.matrix td { width: 38px; height: 30px; text-align: center; border-radius: 6px; color: var(--label); }
.matrix td.diag, .matrix td.nod { color: var(--label2); }
.mscale { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: .6875rem; color: var(--label2); }
.mscale i { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 8%, transparent), color-mix(in srgb, var(--tint) 54%, transparent)); }
/* Engste Entscheidungen */
.cl { margin: 0 -14px; }
.cl-r { text-decoration: none; color: inherit; }
.cl-r .m { justify-content: space-between; }
@media (max-width: 560px) { .hb { grid-template-columns: minmax(0, 1fr) 60px 4em; } }

/* ---------- Lesetexte (Erklärungen, Impressum, 404) ---------- */
.page.read { --pw: 760px; }
.toc { margin-top: 22px; padding: 16px 20px; }
.toc h2 { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; color: var(--label2); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: .9375rem; line-height: 1.5; }
.toc li { break-inside: avoid; padding: 2px 0; }
.toc a { color: var(--label); text-decoration: none; }
.toc a:hover { color: var(--tint); }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.rsec { margin-top: 34px; scroll-margin-top: 18px; font-size: 1rem; line-height: 1.6; }
.rsec h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.016em; }
.rsec h3 { margin: 22px 0 6px; font-size: 1rem; font-weight: 600; }
.rsec h3[id] { scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }   /* Sprungziel nicht unter den schwebenden Knöpfen */
.rsec p { margin: 0 0 12px; max-width: 68ch; text-wrap: pretty; }
.rsec ul { margin: 0 0 12px; padding-left: 20px; max-width: 66ch; }
.rsec li { margin: 4px 0; }
.rsec a { color: var(--tint); }
.rsec .ts { font-variant-numeric: tabular-nums; }
.legal-sum { max-width: 68ch; margin: 14px 0 6px; padding: 14px 18px 6px; border-radius: 14px; background: var(--sel); }
.legal-sum h3 { margin: 0 0 4px; }
.legal-sum ul { margin-bottom: 8px; }
/* iOS Safari zoomt beim Fokussieren jedes Eingabefelds unter 16 px hinein, danach lässt sich die Seite seitwärts
   schieben (etwa nach Antippen einer Beispielfrage im Panel „Fragen“, die ins Feld geschrieben und fokussiert wird).
   Auf Touch-Geräten und schmalen Bildschirmen darum mindestens 16 px; die große Suche der Startseite bleibt größer. */
@media (max-width: 860px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; }
  .search.big .field { font-size: 1.0625rem !important; }
}
/* Sehr schmale Telefone (320 px): Umschalter wie „Aktuelle Mitglieder (719) | Ausgeschiedene (22)“ oder „Sitzordnung |
   Geschlossenheit | Mehrheitsseite“ waren breiter als der Bildschirm. Dort dürfen ihre Knöpfe umbrechen und trennen. */
@media (max-width: 360px) {
  .seg { max-width: 100%; }
  .seg button { min-width: 0; padding: 0 7px; white-space: normal; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; }
  .sm-seg button { font-size: .75rem; }
  .select, .select select { max-width: 100%; }   /* Auswahlmenüs richten sich sonst nach dem längsten Eintrag */
  .fp table { font-size: .75rem; }
}
/* Vorschau eines Feed-Eintrags (abonnieren.html): Tabelle der Fraktionen wie im Feed-Reader, aber in der Kartenbreite */
.fp table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.fp th, .fp td { padding: 3px 4px; }
.fp th:first-child, .fp td:first-child { padding-left: 0; }
.fp-body { overflow-x: auto; }   /* Rückfall, falls eine Tabelle trotzdem nicht passt: scrollt in der Karte, nicht die Seite */
/* Englische Rechtstexte: Hinweis „Übersetzung, verbindlich ist die deutsche Fassung“ */
p.legal-tr { max-width: 68ch; margin: 10px 0 14px; padding: 10px 16px; border-radius: 12px; background: var(--sel); font-size: 15px; }
.rsec code { padding: 1px 5px; border-radius: 5px; background: var(--fill); font-size: .875em; }

/* RSS-Feeds (abonnieren.html): zwei Feed-Karten, darunter die Vorschau des neuesten Eintrags wie im Reader */
.feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 20px; }
.fcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 20px; }
.fcard .stc-s { margin: 0; }
.fc-top { display: flex; align-items: center; gap: 12px; }
.fc-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--sel); color: var(--tint); }
.fc-meta { margin: 2px 0 0; font-size: .8125rem; color: var(--label2); }
.fc-url { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--fill); color: var(--label);
  font-size: .8125rem; text-overflow: ellipsis; }
.fc-url:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.fc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.fc-act .btn { gap: 6px; text-decoration: none; }
.fc-act .btn svg { flex: none; }
.fp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sep); }
.fp-src { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--label2); }
.fp-src .ic { width: 14px; height: 14px; color: var(--tint); }
.fp-t { margin: 6px 0 12px; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.012em; text-wrap: balance; }
.fp-t a { color: inherit; text-decoration: none; }
.fp-t a:hover { text-decoration: underline; }
.fp-body { max-width: 68ch; font-size: .9375rem; line-height: 1.5; }
.fp-body p { margin: 0 0 10px; }
.fp-body table { margin: 2px 0 14px; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.fp-body th, .fp-body td { padding: 5px 0 5px 18px; border-bottom: 1px solid var(--sep); }
.fp-body th:first-child, .fp-body td:first-child { padding-left: 0; padding-right: 8px; }
.fp-body th { font-weight: 600; color: var(--label2); }
.fp-body h3 { margin: 16px 0 6px; font-size: .9375rem; }
.fp-body ul { margin: 0 0 10px; padding-left: 18px; }
.fp-body li { margin: 0 0 8px; }
.fp.clip .fp-body { max-height: 440px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.fp-more { margin-top: 4px; }
.e404 { margin: 0 0 6px; font-size: 4.5rem; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--label2); }
.acts404 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.s404 { max-width: 560px; margin-top: 22px; }
.old404 { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sel); font-size: .9375rem; }
.acts404 .btn { text-decoration: none; }

/* ---------- Daten ---------- */
.dlbundle { margin-top: 18px; padding: 18px 20px; }
.dllinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.dlbtn { text-decoration: none; gap: 6px; }
.dlbtn .ic { width: 16px; height: 16px; }
.dllist { padding: 4px 18px; }
.dlrow { padding: 14px 0; }
.dlrow + .dlrow { border-top: 1px solid var(--sep); }
.dlrow-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dlname { font-size: .9375rem; font-weight: 600; }
.dlmeta { font-size: .8125rem; color: var(--label2); }
.dldesc { margin: 4px 0 0; font-size: .875rem; line-height: 1.45; color: var(--label2); }
.dlrow .dllinks { margin: 10px 0 0; }
.sch { margin-top: 8px; padding: 0; overflow: hidden; }
.sch summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.sch summary::-webkit-details-marker { display: none; }
.sch summary > svg:last-child { margin-left: auto; align-self: center; color: var(--label2); transition: transform 180ms var(--ease); }
.sch[open] summary > svg:last-child { transform: rotate(180deg); }
.sch summary .mono { font-weight: 600; }
.sch .tablewrap { padding: 0 18px 14px; }
.sch td { vertical-align: top; font-size: .8125rem; line-height: 1.45; }
.rtext { font-size: .9375rem; line-height: 1.55; }
.rtext a { color: var(--tint); }
.codebox { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.codebox code { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
pre.code { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--bg); overflow-x: auto; font-size: .8125rem; line-height: 1.5; }
pre.code code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.toc.short ol { columns: 1; }

/* ---------- Statistiken nach dem Design-Audit ---------- */
/* Barrierefreiheit überall: die lange Beschriftung schmaler Segmente bleibt für Screenreader lesbar */
@media (max-width: 860px) {
  .seg .lg { display: inline !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .seg .lg:only-child { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
}
@media (pointer: coarse) { .seg button { min-height: 44px; } }
::placeholder { color: var(--ph); opacity: 1; }

.page.st { --pw: 1040px; --pw2: 1440px; position: relative; }
.st .lede-s { max-width: 62ch; }
/* Sprungleiste, beim Scrollen oben, zeigt Datensatz und Zeitraum */
.stnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; margin: 18px -32px 0; padding: 10px 32px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--sep); }
.stnav-l { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.stnav-l::-webkit-scrollbar { display: none; }
.stnav-l a { flex: none; padding: 5px 8px; border-radius: 8px; font-size: .8125rem; font-weight: 500; color: var(--label); text-decoration: none; white-space: nowrap; }
.stnav-l a:hover { background: var(--fill); }
.stnav-s { flex: none; font-size: .75rem; color: var(--label2); white-space: nowrap; }
@media (max-width: 1499px) { .stnav-s { display: none; } }   /* Platz für alle Abschnitte; der Zeitraum steht im Untertitel */
.stnav-m { display: none; }
@media (max-width: 860px) {
  /* Telefon: Abschnitte als Menü statt abgeschnittener Leiste neben den schwebenden Knöpfen */
  .stnav-l { display: none; }
  .stnav-m { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 36px; border-radius: 10px; background: var(--fill); color: var(--label); }
  .stnav-m select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .stnav-m:focus-within { outline: 2px solid var(--tint); outline-offset: 2px; }
}
@media (prefers-reduced-transparency: reduce) { .stnav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 860px) { .stnav { margin: 14px -16px 0; padding: 8px 16px; } .stnav-s { display: none; } }
/* Teile und Abschnitte: drei Kapitel, jeder Abschnitt eine Frage */
.part { margin: 44px 0 0 2px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.022em; }
.sts { margin-top: 14px; padding: 20px 22px 18px; border-radius: 14px; background: var(--surface); scroll-margin-top: 64px; min-width: 0; }
.sts-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sts-h h3 { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.014em; }
.sts-q { margin: 3px 0 0; max-width: 66ch; font-size: .875rem; line-height: 1.45; color: var(--label2); }
.sts-tools { display: flex; gap: 2px; flex: none; }
.sts-tools .ic-btn { width: 34px; padding: 0; justify-content: center; color: var(--label2); }
.sts-tools .ic-btn:hover { color: var(--tint); }
.sts-tools .ic-btn svg { width: 17px; height: 17px; }
.sm-btn { height: 30px; padding: 0 8px; font-size: .75rem; color: var(--label2); gap: 5px; }
.sm-btn:hover { color: var(--tint); }
.sts-sub { display: flex; align-items: center; gap: 7px; margin: 4px 0 6px; font-size: .8125rem; font-weight: 600; color: var(--label2); }
.sts-note { max-width: 62ch; margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.sts-note a, .howto a { color: var(--tint); }
.lead { margin: 0 0 16px; max-width: 60ch; font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.012em; text-wrap: pretty; }
.lead b { font-weight: 650; }
.lead.sm { font-size: 1.0625rem; }
.sttbl, .howto, .kdl { margin-top: 12px; }
.sttbl > summary, .howto > summary, .kdl > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: .8125rem; font-weight: 500; color: var(--tint); cursor: pointer; list-style: none; }
.sttbl > summary::-webkit-details-marker, .howto > summary::-webkit-details-marker, .kdl > summary::-webkit-details-marker { display: none; }
.sttbl > summary::after, .howto > summary::after, .kdl > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms var(--ease); }
.sttbl[open] > summary::after, .howto[open] > summary::after, .kdl[open] > summary::after { transform: rotate(-135deg) translate(-2px, 0); }
.sttbl .tablewrap { margin-top: 6px; max-height: 420px; overflow: auto; }
.sttbl td, .sttbl th { white-space: nowrap; }
.howto p { margin: 6px 0 0; max-width: 62ch; font-size: .8125rem; line-height: 1.5; color: var(--label2); }
.kdl dl { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.kdl dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sep); }
.kdl dt { font-size: .875rem; }
.kdl dt small { display: block; font-size: .75rem; color: var(--label2); }
.kdl dd { margin: 0; font-size: 1.0625rem; font-weight: 600; }
@media (max-width: 640px) { .kdl dl { grid-template-columns: 1fr; } }
/* Rhythmus: Säulen sind Schaltflächen (Monat → Woche), lesbare Beschriftung */
.tchart { height: 220px; }
.tc-plot { display: block; width: 100%; padding: 0; border: none; border-bottom: 1px solid var(--sep); background: none; border-radius: 0; font: inherit; color: inherit; }
button.tc-plot { cursor: pointer; }
button.tc-plot:hover .tc-bar, button.tc-plot:focus-visible .tc-bar { filter: brightness(1.12); }
.tc-l, .tc-n { font-size: .6875rem; }
.sttip { position: absolute; z-index: 30; padding: 6px 9px; border-radius: 8px; background: var(--label); color: var(--bg); font-size: .75rem; line-height: 1.3; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); }
.wdays { display: flex; flex-direction: column; gap: 8px; }
.wday { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3em; align-items: center; gap: 12px; font-size: .875rem; }
.wday-l small { display: block; font-size: .75rem; color: var(--label2); }
.wday-b { height: 14px; }
.wday-b .stack { display: flex; height: 100%; border-radius: 4px; overflow: hidden; min-width: 2px; }
.wday-b .f { background: var(--for); } .wday-b .a { background: var(--against); } .wday-b .b { background: var(--abst); }
.wday-n { text-align: right; font-weight: 600; }
/* Worüber */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 14px; } }
.sts .more { margin-top: 4px; padding: 0; height: 30px; color: var(--tint); }
/* Fraktionen: Punkte auf zwei beschrifteten Achsen, Zeilen in Sitzordnung */
.sm-seg button { font-size: .8125rem; }
.gplot { display: flex; flex-direction: column; }
.gp-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; align-items: center; min-height: 40px; }
.gp-row + .gp-row { border-top: 1px solid var(--sep); }
.gp-head { min-height: 46px; align-items: end; padding-bottom: 6px; }
.gp-n { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .875rem; }
.gp-n a { color: var(--label); text-decoration: underline; text-decoration-color: var(--sep); text-underline-offset: 3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-n a:hover { color: var(--tint); }
.gp-n small { margin-left: auto; font-size: .75rem; color: var(--label2); white-space: nowrap; }
.gp-ax { position: relative; height: 26px; margin: 0 56px 0 6px;
  background: linear-gradient(var(--sep), var(--sep)) 0 50% / 100% 1px no-repeat; }
.gp-ticks { height: 34px; background: none; }
.gp-ticks b { position: absolute; left: 0; top: 0; font-size: .75rem; font-weight: 600; color: var(--label2); white-space: nowrap; }
.gp-t { position: absolute; bottom: 0; width: 0; }
.gp-t i { position: absolute; bottom: 0; transform: translateX(-50%); font-style: normal; font-size: .6875rem; color: var(--label2); white-space: nowrap; }
.gp-t.ref i { color: var(--label); font-weight: 600; }
.gp-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
/* Werte in einer eigenen Spalte rechts der Achse: nichts kreuzt den 50-%-Strich, die Zahlen stehen bündig untereinander */
.gp-v { position: absolute; top: 50%; left: 100%; width: 46px; margin-left: 6px; transform: translateY(-50%); text-align: right;
  font-size: .75rem; color: var(--label2); white-space: nowrap; }
.gplot .gp-row:not(.gp-head) .gp-ax:last-child { background: linear-gradient(var(--sep), var(--sep)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--label2), var(--label2)) 50% 50% / 1px 14px no-repeat; }
@media (max-width: 760px) {
  .gp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "n n" "a b"; row-gap: 2px; padding: 8px 0; }
  .gp-n { grid-area: n; } .gp-head .gp-ax:nth-child(2), .gp-row .gp-ax:nth-child(2) { grid-area: a; } .gp-head .gp-ax:nth-child(3), .gp-row .gp-ax:nth-child(3) { grid-area: b; }
  .gp-head > span:first-child { display: none; }
  .gp-ax { margin: 0 52px 0 4px; }
}
/* Wer mit wem: Matrix unteres Dreieck in Sitzordnung, feste Skala, stärkste Paare umrandet */
.ally { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
@media (max-width: 1000px) { .ally { grid-template-columns: minmax(0, 1fr); } .ally-l { order: -1; margin-bottom: 14px; } }
.ally-m { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.matrix td { --t: 0%; background: color-mix(in srgb, var(--tint) var(--t), transparent); }
.matrix td.nil { background: none; }
.matrix td.top { box-shadow: inset 0 0 0 2px var(--label); }
.matrix tbody th { display: table-cell; text-align: left; white-space: nowrap; font-weight: 500; color: var(--label); }
.matrix tbody th .gsw { margin-right: 6px; vertical-align: -1px; }
.matrix thead th { font-size: .6875rem; font-weight: 500; max-width: 46px; white-space: normal; hyphens: manual; line-height: 1.15; vertical-align: bottom; }
.mscale { flex-wrap: wrap; justify-content: flex-start; font-size: .75rem; }
.mscale i { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 6%, transparent), color-mix(in srgb, var(--tint) 58%, transparent)); }
.ms-top { margin-left: 12px; }
.pairs { margin: 0; padding: 0; list-style: none; counter-reset: pr; }
.pairs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--sep); font-size: .875rem; }
.pairs li:first-child { border-top: none; }
.pr-n { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.pr-n .amp { color: var(--label2); }
.pr-v { font-weight: 600; }
.pairs small { grid-column: 1 / -1; font-size: .75rem; color: var(--label2); }
/* Abgeordnete: kleine Vielfache je Fraktion */
.smallm { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 28px; }
.sm-g .sts-sub { margin-top: 6px; }
.rk { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: center; }
.rk + .rk { border-top: 1px solid var(--sep); }
.rk .hb { border: none; }
.rk-i { font-size: .75rem; color: var(--label2); }
.btn.inl { height: auto; padding: 0; color: var(--tint); font-size: inherit; }
/* Knapp entschieden: Ja und Nein auf gemeinsamer Skala, Schwellenmarke beim Einwand */
.krs { display: flex; flex-direction: column; }
.kr { display: block; padding: 14px 0; border-top: 1px solid var(--sep); color: inherit; text-decoration: none; }
.kr:first-child { border-top: none; padding-top: 4px; }
.kr:hover .kr-t { color: var(--tint); }
.kr-t { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.35; }
.kr-m { display: block; margin-top: 3px; font-size: .75rem; line-height: 1.4; color: var(--label2); }
.kr-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-width: 640px; }
.kr-b { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3em; align-items: center; gap: 10px; font-size: .75rem; color: var(--label2); }
.kr-b .num { text-align: right; color: var(--label); font-weight: 600; }
.kr-tr { position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.kr-tr > .f, .kr-tr > .a { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.kr-tr > .f { background: var(--for); } .kr-tr > .a { background: var(--against); }
.kr-mark { position: absolute; top: -4px; bottom: -18px; width: 0; border-left: 1.5px dashed var(--label); }
.kr-mark i { position: absolute; top: 100%; left: 4px; font-style: normal; font-size: .6875rem; color: var(--label); white-space: nowrap; }
.kr-mark.l i { left: auto; right: 4px; }
.kr-v { display: block; margin-top: 12px; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.kr-v b { color: var(--label); font-weight: 600; }
.kr:has(.kr-mark) .kr-bars { margin-bottom: 8px; }
@media (max-width: 860px) { .sts { padding: 16px 14px; } .part { font-size: 1.3125rem; margin-top: 34px; } .sts-h { flex-wrap: wrap; } }

.smallm .hb { grid-template-columns: minmax(0, 1fr) 4.4em; }
.smallm .hb .tbar { display: none; }
.matrix th, .matrix td { min-width: 40px; }
@media (max-width: 760px) { .gp-t:not(.edge):not(.ref) i { display: none; } }

.stnav-ds { flex: none; }
.stnav-l { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 12px; }
.stnav-ds button { padding-inline: 8px; font-size: .8125rem; }

/* Glas (leicht, Liquid-Glass-nah): schwebende Fenster ohne Abdunkeln. Kleine Fenster dünner, das Fragen-Panel dichter;
   Blätter auf dem Telefon füllen den Bildschirm und bleiben massiv. Lichtkante als Innenschatten, damit sie in
   scrollenden Listen stehen bleibt. */
.pop, .cal, .ask {
  background: var(--glass-sheen), var(--glass);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--lens,) var(--glass-fx); /* --lens: Kantenbrechung, nur Chromium (common.js) */
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.pop { background: var(--glass-sheen), var(--glass-list); -webkit-backdrop-filter: var(--glass-fx-list); backdrop-filter: var(--lens,) var(--glass-fx-list); }
.ask { background: var(--glass-sheen), var(--glass-thick); -webkit-backdrop-filter: var(--glass-fx-thick); backdrop-filter: var(--lens,) var(--glass-fx-thick);
  box-shadow: var(--glass-edge), var(--glass-shadow), 0 30px 70px -24px rgba(0,0,0,.3); }
@media (max-width: 860px) {
  .ask { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); }
}
@media (prefers-reduced-transparency: reduce) {
  .pop, .cal, .ask { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .pop, .cal, .ask { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--sep), var(--glass-shadow); }
}

/* Profil: Bilanz, Stimmverteilung, Über die Zeit, Änderungsanträge */
.pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.pk > div { min-width: 0; }
.pk .v { font-size: 1.625rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pk .k { margin-top: 5px; font-size: .8125rem; font-weight: 600; }
.pk .s { margin-top: 2px; font-size: .75rem; line-height: 1.35; color: var(--label2); }
@media (max-width: 560px) { .pk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk .v { font-size: 1.375rem; } }
.pdist { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sep); }
.pdist h3 { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; }
.pbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.pbar.sm { height: 8px; border-radius: 4px; }
.pbar > span, .plg i { background: var(--track); }
.pbar .f, .plg i.f, .tc-bar .f { background: var(--for); }
.pbar .a, .plg i.a, .tc-bar .a { background: var(--against); }
.pbar .b, .plg i.b, .tc-bar .b { background: var(--abst); }
.pbar .e, .plg i.e, .tc-bar .e { background: var(--exc); }
/* Nicht abgestimmt: Schraffur statt Spurfarbe, damit es sich von leerer Fläche abhebt */
.pbar .n, .plg i.n, .tc-bar .n { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--abst) 75%, transparent) 0 1.2px, transparent 1.2px 4px) var(--track); }
.plg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .8125rem; }
.plg > span { display: inline-flex; align-items: center; gap: 6px; }
.plg i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.plg b { font-weight: 600; }
.plg em { font-style: normal; color: var(--label2); }
.ptl h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.ptl .tchart { height: 186px; gap: 2px; padding-top: 18px; justify-content: flex-start; }
.ptl .tc-col { max-width: 28px; }
.ptl .tc-plot { margin-top: 0; border-bottom: 1px solid var(--sep); }
.ptl .tc-l { height: 1.3em; text-align: left; overflow: visible; }
/* Über die Zeit: eine Fokusstelle; Zeiger oder Pfeiltasten wählen die Woche, die Zeile darunter liest sie vor */
.tl { position: relative; margin-top: 4px; border-radius: 6px; touch-action: pan-y; cursor: default; }
.tl:focus-visible { outline-offset: 6px; }
.tl-max { position: absolute; left: 0; right: 0; top: 22px; border-top: 1px dashed var(--sep); pointer-events: none; }
.tl-max span { position: absolute; right: 0; top: -17px; font-size: .6875rem; color: var(--label2); }
.tc-col.sel .tc-bar { outline: 2px solid var(--label); outline-offset: 1px; }
.tl:hover .tc-col:not(.sel) .tc-bar, .tl.drag .tc-col:not(.sel) .tc-bar, .tl:focus-visible .tc-col:not(.sel) .tc-bar { opacity: .55; }
.tc-bar { transition: opacity 160ms ease; }
.tl-read { margin: 10px 0 0; min-height: 2.8em; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.tl-read b { color: var(--label); font-weight: 600; }
.tl-read a { white-space: nowrap; margin-left: 4px; }
a.tc-plot { display: block; }
a.tc-plot:hover .tc-bar, a.tc-plot:focus-visible .tc-bar { filter: brightness(1.1); }
.near .own { font-weight: 600; }
.near small { margin-left: 6px; font-size: .6875rem; font-weight: 400; color: var(--label2); }
.pnear { padding: 16px 18px; margin-bottom: 12px; }
.pnear h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.near:has(.amv) { grid-template-columns: 110px minmax(0, 1fr) 84px; }
.amv { text-align: right; font-weight: 600; font-size: .8125rem; }
.amv small { display: block; margin: 0; font-weight: 400; }

/* Fragen: Pille oben rechts (Desktop). Glas wie die schwebenden Fenster; das Panel wächst aus ihr auf (ask.js). */
.topbtns { position: fixed; z-index: 51; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.m-search { display: none; }
.ask-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 13px;
  border: none; border-radius: 20px; font: inherit; font-size: .875rem; font-weight: 600; color: var(--label); cursor: pointer;
  background: var(--glass-sheen), var(--glass-thick); -webkit-backdrop-filter: var(--glass-fx-thick); backdrop-filter: var(--glass-fx-thick);
  box-shadow: var(--glass-edge), var(--glass-shadow); transition: transform 200ms var(--ease); }
.ask-pill > svg { flex: none; color: var(--tint); }
.ask-pill:hover { transform: translateY(-1px); }
.ask-pill:active { transform: scale(.97); }
/* Glas-Morph (common.js, morpher): Hülle trägt während der Bewegung das Glas des Fensters, das Fenster nur den Inhalt */
.gshell { position: fixed; pointer-events: none; overflow: hidden; }
.gshell[hidden] { display: none; }
.gshell-l { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 600; color: var(--label); white-space: nowrap; }
.gshell-l.pill { padding: 0 16px 0 13px; }
.gshell-l > svg { flex: none; color: var(--tint); }
.morphing { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; }
.morph-away { opacity: 0 !important; transition: none !important; pointer-events: none; }
@media (max-width: 860px) {
  .topbtns { z-index: 39; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }   /* unter Abdunklung und Blättern */
  /* Statusleiste (iPhone, viewport-fit=cover): Logo und mitlaufende Leisten rücken um denselben Abstand wie die Knöpfe,
     sonst stehen Logo und Pillen auf verschiedener Höhe */
  .col-list, .page { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .stnav { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .ask-pill { height: 44px; }   /* Touch-Ziel 44 px */
  /* Leiste und Logo auf die Mitte der Knöpfe oben rechts (12 + 40 + 12 = 64 px) ausrichten;
     rechts Platz für Suche und „Fragen“ plus 12 px Luft zur Navigation */
  .stnav { min-height: calc(64px + env(safe-area-inset-top, 0px)); padding-right: 182px; }
  .mbar { margin-top: -6px; }
  .m-search { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; color: var(--label); cursor: pointer;
    background: var(--glass-sheen), var(--glass-thick); -webkit-backdrop-filter: var(--glass-fx-thick); backdrop-filter: var(--glass-fx-thick); box-shadow: var(--glass-edge), var(--glass-shadow); }
  .m-search > svg { width: 18px; height: 18px; }
  .m-search:active, .ask-pill:active { transform: scale(.96); }
  .mbar { min-height: 40px; margin-bottom: 18px; }
  .tabbar .tab-more.on { color: var(--tint); font-weight: 600; }
  .tabbar .tab-more { font-family: inherit; }
  /* Blatt „Mehr“ */
  .msheet { position: fixed; z-index: 52; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); transform: translateY(105%); transition: transform 320ms var(--ease); }
  .msheet.open { transform: none; }
  .msheet[hidden] { display: none; }
  .msheet .grabber { position: static; background: none; }
  .ms-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 8px 4px; }
  .ms-head h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.012em; }
  .ms-list { display: flex; flex-direction: column; border-radius: 12px; background: var(--bg); overflow: hidden; }
  .ms-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; color: var(--label); text-decoration: none; font-size: 1rem; }
  .ms-row + .ms-row { border-top: 1px solid var(--sep); }
  .ms-row > svg:first-child { flex: none; color: var(--tint); }
  .ms-row > span { flex: 1; min-width: 0; }
  .ms-row small { display: block; font-size: .75rem; color: var(--label2); }
  .ms-row > svg:last-child { flex: none; color: var(--label2); }
  .ms-row:active { background: var(--fill); }
  .ms-set { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
  .ms-set > span { padding-left: 4px; font-size: .8125rem; font-weight: 600; color: var(--label2); }
  .ms-set .seg { display: flex; }
  .ms-set .seg button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .msheet { transition: opacity 200ms ease !important; } }
/* Desktop: oben eine Werkzeugzeile für die Pille, der große Titel steht darunter; die Abschnittsleiste lässt ihr Platz */
@media (min-width: 861px) { .page, .col-list { padding-top: 64px; } .stnav { padding-right: 140px; } }
@media (prefers-reduced-transparency: reduce) { .ask-pill { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Fragen: laufende Antwort, Belege blenden weich ein, Knopf „zum Ende“ */
.ask-live { min-height: 1.4em; }
@media (prefers-reduced-motion: no-preference) {
  .ask-a.streaming > p:last-child::after, .ask-a.streaming > ul:last-child > li:last-child::after {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--tint);
    vertical-align: middle; animation: ask-caret 1.1s ease-in-out infinite; }
  @keyframes ask-caret { 50% { opacity: .3; } }
  .ask-refs { animation: ask-rise 280ms var(--ease) both; }
  @keyframes ask-rise { from { opacity: 0; transform: translateY(6px); } }
}
.ask-dock { position: relative; height: 0; }
.ask-down { position: absolute; left: 50%; bottom: 12px; z-index: 2; width: 36px; height: 36px; margin-left: -18px; border: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--label); background: var(--surface); cursor: pointer;
  box-shadow: 0 0 0 .5px var(--sep), 0 4px 14px -4px rgba(0,0,0,.28); }
.ask-down[hidden] { display: none; }
.ask-down:hover { color: var(--tint); }

/* Statistik-Bereiche (Gesamtbild, Blöcke, Vergleich): Segmentschalter aus Links; auf dem Desktop in der
   Werkzeugzeile oben links, auf einer Höhe mit der Pille „Fragen“ */
/* Statistik-Bereiche als Unterreiter mit Unterstrich: sichtbar Navigation, nicht verwechselbar mit den Filtern darunter */
.subnav { display: flex; gap: 22px; max-width: 100%; margin: 18px 0 0; border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--label2); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--label); }
.subnav a[aria-current="page"] { color: var(--label); font-weight: 600; border-bottom-color: var(--tint); }
@media (pointer: coarse) { .subnav a { min-height: 44px; } }
.subnav .sm { display: none; }
@media (max-width: 860px) { .subnav { gap: 18px; } .subnav .lg { display: none; } .subnav .sm { display: inline; } }

/* Profil: Kopf mit Hochformat-Foto (EP-Fotos sind enge 4:5-Kopfporträts; im Kreis fehlten Scheitel und Kinn) */
/* Kopfzeile wie das Band der Statistik: liegt oben in der Werkzeugzeile (64 px, mittig zu „Fragen“), läuft beim Scrollen
   mit und wird zu Glas, sobald der große Name verschwindet; dann blenden Porträt, Name, Partei und Fraktion ein */
.ptop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 64px; margin: -64px -32px 0; padding: 0 140px 0 32px;
  border-bottom: 1px solid transparent; transition: background-color 200ms ease-out, border-color 200ms ease-out; }
.ptop.stuck { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--sep); }
.ptop .search { flex: 0 1 300px; margin-left: auto; }
.ptop #back { flex: none; }
.pmini { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--label); text-decoration: none; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 200ms ease-out, transform 280ms var(--ease); }
.ptop.stuck .pmini { opacity: 1; transform: none; pointer-events: auto; }
.pmini > span:last-child { min-width: 0; }
.pmini b { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmini small { display: block; font-size: .75rem; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-transparency: reduce) { .ptop.stuck { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .pmini { transform: none; transition: opacity 150ms ease-out; } }
/* Ämter: kleiner Kasten unter dem Kopf */
.pamt { margin: 16px 0 0; padding: 12px 16px 6px; border-radius: 14px; background: var(--surface); }
.pamt h2 { margin: 0 0 4px; font-size: .75rem; font-weight: 600; color: var(--label2); }
.pamt ul { margin: 0; padding: 0; list-style: none; }
.pamt li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 7px 0; font-size: .875rem; line-height: 1.4; }
.pamt li + li { border-top: 1px solid var(--sep); }
.pamt .r { font-weight: 600; }
.pamt .o a { color: var(--label); text-decoration-color: var(--sep); text-underline-offset: 3px; }
.pamt .o a:hover { color: var(--tint); }
.pamt .s { font-size: .75rem; color: var(--label2); white-space: nowrap; }
.phead { align-items: flex-start; margin-top: 18px; }
.phead .av { width: 80px; height: 100px; border-radius: 14px; }
.phead .av img { object-position: 50% 0%; }
.phead .av .ini { font-size: 1.625rem; }
.phead-t { min-width: 0; padding-top: 4px; }
.pbadge { margin: 8px 0 0; font-size: .8125rem; line-height: 1.6; color: var(--label2); }
.pbadge .tag { color: var(--label); font-weight: 600; margin-right: 4px; }
h1.big { text-wrap: balance; }
.pfacts { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 7px 16px; margin: 18px 0 0; font-size: .8125rem; line-height: 1.45; }
.pfacts > div { display: contents; }
.pfacts dt { color: var(--label2); }
.pfacts dd { margin: 0; overflow-wrap: anywhere; }
.pfacts a { color: var(--tint); text-underline-offset: 2px; }
.pf-more { margin-top: 6px; padding-left: 0; font-size: .8125rem; }
.tc-col.tc-endmark, .tc-col.tc-endafter { position: relative; }
.tc-col.tc-endafter::after { content: ''; position: absolute; right: -3px; top: 0; bottom: 18px; border-right: 1.5px dashed var(--label2); pointer-events: none; }
.tc-col.tc-endmark::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 18px; border-left: 1.5px dashed var(--label2); pointer-events: none; }
.side-foot a[aria-current="page"] { color: var(--tint); font-weight: 600; }
.mono { white-space: nowrap; }   /* Aktenzeichen nicht am Bindestrich umbrechen */
.pf-cmp { display: inline-flex; margin-top: 6px; padding-left: 0; font-size: .8125rem; text-decoration: none; }
@media (min-width: 861px) { .pf-more { display: none !important; } }
@media (max-width: 860px) { .pfacts:not(.open) > .x { display: none; } }
@media (max-width: 860px) {
  /* Telefon: rechts liegen Suche und „Fragen“; die Personensuche übernimmt der Such-Knopf dort */
  .ptop { margin: 0 -16px; padding: env(safe-area-inset-top, 0px) 174px 0 16px; min-height: calc(64px + env(safe-area-inset-top, 0px)); }
  .ptop .search { display: none; }
  .ptop.stuck #back .lbl { display: none; }
  .ptop.stuck #back { padding-right: 0; }
}
@media (max-width: 560px) {
  .pamt li { grid-template-columns: minmax(0, 1fr) auto; }
  .pamt .o { grid-column: 1 / -1; grid-row: 2; color: var(--label2); }
  .phead .av { width: 64px; height: 80px; border-radius: 12px; }
  .pfacts { grid-template-columns: 1fr; gap: 1px; }
  .pfacts dd { margin-bottom: 8px; }
}
.psec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 30px 0 10px; }
.psec-h h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.012em; }
.psec-h.sm { margin: 0 0 12px; }
.psub { margin: 0 0 8px; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.pbal { padding: 18px 18px 16px; }
.ptl { margin-top: 12px; padding: 16px 18px 14px; }
.pk-more { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--sep); font-size: .8125rem; }
.pk-more > div { display: flex; gap: 6px; min-width: 0; }
.pk-more dt { color: var(--label2); }
.pk-more dd { margin: 0; font-weight: 600; }
.pk-more .z dd { font-weight: 400; color: var(--label2); }
.pk .k { font-weight: 600; }
.pfoot { max-width: 60ch; margin: 14px 0 0; font-size: .75rem; line-height: 1.45; color: var(--label2); }
.disc p, .detail .source, .detail p.source { max-width: 62ch; }
.pfoot a { color: var(--tint); }
.pnote { margin: 0; font-size: .9375rem; line-height: 1.5; }
.ptabs { margin-top: 24px; }
.ppanel { margin-top: 14px; }
.pf .hint { margin: 6px 0 0 2px; font-size: .75rem; }
.vrow > svg { flex: none; }
@media (max-width: 560px) {
  /* Telefon: Kennzahlen als Zeilen (Wert links), statt einer einzelnen dritten Kachel */
  .pk { grid-template-columns: 1fr; gap: 14px; }
  .pk > div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .pk .v { grid-row: span 2; }
  .pk .k { margin-top: 0; }
}
/* Tippziele auf Touch-Geräten mindestens 44 px */
@media (pointer: coarse) {
  .chip, .btn, .select select { min-height: 44px; }
  .pager button, .theme-btn { min-width: 44px; height: 44px; }
}
.chip:disabled { opacity: .4; cursor: default; }

/* Profilfoto als Knopf und Lightbox (R.lightbox in common.js) */
.av-zoom { display: block; flex: none; padding: 0; border: 0; border-radius: 14px; background: none; cursor: zoom-in; transition: transform 120ms var(--ease); }
.av-zoom .av { display: block; }   /* im Knopf kein Flex-Element mehr: sonst gälte die Größe nicht */
.av-zoom:disabled { cursor: default; }
.av-zoom:not(:disabled):active { transform: scale(.97); }
.av-zoom:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); outline-offset: 3px; }
.lb { position: fixed; inset: 0; z-index: 70; touch-action: none; }
/* Hintergrund aus demselben Glas wie Kalender, Chat und Pillen (Glanz, dünne Fläche, Sättigung), für die ganze Fläche
   etwas stärker unscharf, damit Name und Nachweis darauf lesbar bleiben */
.lb-scrim { position: absolute; inset: 0; background: var(--glass-sheen), var(--glass-thick);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
@media (prefers-contrast: more) { .lb-scrim { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.lb-img { position: fixed; transform-origin: 0 0; object-fit: cover; border-radius: 16px; cursor: zoom-out; user-select: none; -webkit-user-select: none;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.12); will-change: transform; }
.lb-cap { position: fixed; left: 16px; right: 16px; margin: 0; text-align: center; font-size: .75rem; line-height: 1.45; color: var(--label2); pointer-events: none; }
.lb-cap b { display: block; margin-bottom: 1px; font-size: .9375rem; font-weight: 600; color: var(--label); }
.lb-x { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--fill); color: var(--label); cursor: pointer; }
.lb-x:hover { background: color-mix(in srgb, var(--fill) 70%, var(--label) 8%); }
@media (pointer: coarse) { .lb-x { width: 44px; height: 44px; } }
@media (prefers-reduced-transparency: reduce) { .lb-scrim { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Sprunglink: erst sichtbar, wenn er den Fokus hat */
.skip { position: fixed; z-index: 100; left: 12px; top: -64px; padding: 10px 16px; border-radius: 12px; background: var(--tint); color: var(--on-tint);
  font-weight: 600; text-decoration: none; transition: top 150ms var(--ease); }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
main:focus { outline: none; }
/* „Nach oben“: runder Glasknopf unten rechts, auf dem Telefon über der Tab-Leiste */
.totop { position: fixed; z-index: 38; right: 20px; bottom: 24px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--label); cursor: pointer;
  background: var(--glass-sheen), var(--glass-thick); -webkit-backdrop-filter: var(--glass-fx-thick); backdrop-filter: var(--glass-fx-thick); box-shadow: var(--glass-edge), var(--glass-shadow);
  opacity: 0; transform: translateY(8px) scale(.94); pointer-events: none; transition: opacity 200ms ease-out, transform 260ms var(--ease); }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:active { transform: scale(.94); }
@media (max-width: 860px) { .totop { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
@media (pointer: coarse) { .totop { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .totop { transform: none; transition: opacity 150ms ease-out; } }
@media (prefers-reduced-transparency: reduce) { .totop { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Abstimmungsdetail: Zustimmung und, mit Filter, das ganze Parlament */
.quote { margin: 12px 0 0; font-size: .9375rem; }
.quote b { font-weight: 650; }
.quote span { font-size: .8125rem; color: var(--label2); }
.overall { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 6px 0 0; font-size: .8125rem; color: var(--label2); }
.overall .dot { margin-left: 4px; }
/* Laufende Woche: Sitzungstag ohne Daten */
.day-h.pending { border: 1px dashed var(--sep); border-radius: 12px; color: var(--label2); }
.day-h.pending .n { font-style: italic; }

/* Grafik-Generator: Vorschau links, Einstellungen rechts; auf dem Telefon ein Blatt mit Vorschau oben.
   Die Bühne ist etwas dunkler als die Grafik, damit deren Rand sichtbar bleibt. */
.sp {
  --stage: color-mix(in srgb, var(--label) 9%, var(--bg));
  width: min(1100px, calc(100vw - 48px)); height: min(800px, calc(100dvh - 48px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--label);
  box-shadow: var(--glass-shadow); overflow: hidden; flex-direction: column;
}
.sp[open] { display: flex; }
.sp::backdrop { background: color-mix(in srgb, var(--bg) 46%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
html.sp-lock { overflow: hidden; }
.sp-head { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px 0 22px; border-bottom: 1px solid var(--sep); flex: none; }
.sp-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.sp-grab { display: none; }
.sp-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--label2); }
.sp-x svg { width: 14px; height: 14px; }
.sp-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.sp-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; background: var(--stage); overflow: hidden; }
.sp-stage canvas { display: block; border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 18px 44px -20px rgba(0,0,0,.45); }
.sp-msg { position: absolute; left: 50%; bottom: 14px; margin: 0; max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px;
  background: var(--glass-sheen), var(--glass-thick); -webkit-backdrop-filter: var(--glass-fx-thick); backdrop-filter: var(--glass-fx-thick);
  box-shadow: var(--glass-edge), var(--glass-shadow); font-size: .8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s ease-out, transform .3s var(--ease); pointer-events: none; }
.sp-msg.on { opacity: 1; transform: translate(-50%, 0); }
.sp-ctl { min-height: 0; overflow-y: auto; padding: 18px 20px 22px; border-left: 1px solid var(--sep); overscroll-behavior: contain; }
.sp-f { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.sp-f > legend, .sp-f > label { display: block; margin: 0 0 8px; padding: 0; font-size: .75rem; font-weight: 600; color: var(--label2); }
.sp-motifs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-motifs button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--fill);
  color: var(--label); font-size: .8125rem; font-weight: 600; text-align: left; transition: background-color 150ms ease-out, box-shadow 150ms ease-out, transform 120ms var(--ease); }
.sp-motifs svg { flex: none; color: var(--label2); }
.sp-motifs button[aria-pressed="true"] { background: var(--sel); box-shadow: inset 0 0 0 1.5px var(--tint); color: var(--tint); }
.sp-motifs button[aria-pressed="true"] svg { color: var(--tint); }
.sp-motifs button:disabled { opacity: .45; cursor: default; }
.sp-motifs button:active:not(:disabled) { transform: scale(.97); }
.sp-hint { margin: 8px 0 0; font-size: .75rem; line-height: 1.4; color: var(--label2); }
.sp-fmt button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 44px; line-height: 1.15; }
.sp-fmt b { font-size: .8125rem; font-weight: inherit; }
.sp-fmt small { font-size: .6875rem; color: var(--label2); font-weight: 500; }
.sp-sel { display: grid; gap: 8px; }
.sp .select { display: block; }
.sp .select select { width: 100%; height: 38px; font-size: .875rem; }
.sp textarea { display: block; width: 100%; min-height: 76px; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--fill); color: var(--label);
  font: inherit; font-size: .875rem; line-height: 1.4; resize: vertical; }
.sp textarea:focus-visible, .sp select:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.sp-hrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp-hrow .sp-hint:empty { display: none; }
.sp-hrow .btn { margin-left: auto; min-height: 30px; }
.sp-alt { margin: 4px 0 0; border-top: 1px solid var(--sep); }
.sp-alt summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: .8125rem; font-weight: 600; cursor: pointer; list-style: none; }
.sp-alt summary::-webkit-details-marker { display: none; }
.sp-alt summary svg { color: var(--label2); transition: transform .2s var(--ease); }
.sp-alt[open] summary svg { transform: rotate(180deg); }
.sp-alt p { margin: 0 0 10px; font-size: .8125rem; line-height: 1.45; color: var(--label2); }
.sp-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; padding: 12px 16px; border-top: 1px solid var(--sep); }
.sp-act .btn { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.sp-pick { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 10px; border-radius: 12px; background: var(--fill); }
.sp-pick:focus-within { box-shadow: 0 0 0 2px var(--tint); }
.sp-pick .av { flex: none; }
.sp-pick input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--label); font: inherit; font-size: .9375rem; font-weight: 600; outline: none; }
.sp-pick input::placeholder { color: var(--ph); font-weight: 400; }
.sp-ml { max-height: 316px; margin-top: 6px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--sep), 0 10px 24px -14px rgba(0,0,0,.3); }
.sp-ml [role="option"] { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.sp-ml [role="option"][aria-selected="true"] { background: var(--sel); }
@media (hover: hover) and (pointer: fine) { .sp-ml [role="option"]:hover { background: var(--fill); } .sp-ml [role="option"][aria-selected="true"]:hover { background: var(--sel); } }
.sp-ml .t { flex: 1 1 auto; min-width: 0; }
.sp-ml b, .sp-ml small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ml b { font-size: .875rem; font-weight: 600; }
.sp-ml small { margin-top: 1px; font-size: .75rem; color: var(--label2); }
.sp-ml .v { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--label2); }
.sp-ml .none { margin: 0; padding: 10px; font-size: .8125rem; color: var(--label2); }
@media (max-width: 860px) {
  .sp { position: fixed; inset: auto 0 0 0; width: 100%; height: calc(100dvh - 10px - env(safe-area-inset-top, 0px)); margin: 0; border-radius: 14px 14px 0 0; }
  .sp-head { position: relative; min-height: 52px; padding: 6px 10px 0 16px; touch-action: none; }
  .sp-grab { display: block; position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--sep); }
  .sp-main { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .sp-stage { flex: none; height: 40dvh; position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--sep); }
  /* Suche mit Tastatur: Vorschau weg, damit Treffer Platz haben. Ohne Höhen-Animation (würde das Blatt in jedem
     Bild neu umbrechen, während die Tastatur einfährt); deren Bewegung überdeckt den Wechsel. */
  .sp.typing .sp-stage { height: 0; }
  .sp-ctl { overflow: visible; padding: 16px 16px 20px; border-left: 0; }
  .sp-act { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sp-act .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
}
@media (prefers-reduced-transparency: reduce) { .sp::backdrop { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: none; } }

/* ---------- Breite Bildschirme (QHD, Ultrawide) ----------
   Ab 1600 px steht der Inhalt mittig im freien Raum statt am Seitenmenü zu kleben. Ab 2000 px nutzen die Seiten die
   Breite: Raster bekommen mehr Spalten (--pw2), Startseite, Themen und Profil werden zweispaltig, die Abstimmung
   rechts wird breiter und zeigt die Abgeordneten neben dem Ergebnis. Lesetexte bleiben schmal. */
.pf-l, .pf-r, .land-side, .th-l, .d-main { display: contents; }
.col-detail { container: detail / inline-size; }
@media (min-width: 1600px) {
  .content { justify-content: center; }
  .page { margin-inline: auto; }
}
@media (min-width: 2000px) {
  .page { max-width: var(--pw2, var(--pw, 1240px)); }
  .col-list { flex-basis: clamp(400px, 30vw, 620px); }
  .col-detail { max-width: 1560px; }

  .landing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; align-items: start; align-content: start; }
  .landing > * { grid-column: 1 / -1; }
  .landing > .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; }
  .landing > .hero .display { font-size: 3.75rem; }
  .landing .parl { max-width: 500px; }
  .landing > [aria-labelledby="h-latest"] { grid-column: 1; }
  .landing > .land-side { grid-column: 2; display: block; min-width: 0; }

  .pg-themen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; align-content: start; }
  .pg-themen > * { grid-column: 1 / -1; }
  .pg-themen > .th-l { grid-column: 1; display: block; min-width: 0; }
  .pg-themen > #all { grid-column: 2; margin-top: 22px; }   /* Oberkante wie die Kennzahlen links */

  .page.pf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; align-content: start; }
  .page.pf > * { grid-column: 1 / -1; }
  .page.pf > .pf-l { grid-column: 1; display: block; min-width: 0; }
  .page.pf > .pf-r { grid-column: 2; display: block; min-width: 0; }
}
/* Erklärungen: elf kurze, unabhängige Abschnitte; breit nebeneinander in Spalten (oben nach unten, dann weiter rechts),
   das Inhaltsverzeichnis läuft links mit */
@media (min-width: 2000px) {
  .pg-erk { --pw2: 1680px; display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 56px; align-items: start; align-content: start; }
  .pg-erk > * { grid-column: 2; }
  .pg-erk > .toc { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 24px; margin-top: 4px; }
  .pg-erk .toc ol { columns: 1; }
  .pg-erk #secs { columns: 2; column-gap: 56px; margin-top: 34px; }
  .pg-erk .rsec { break-inside: avoid; margin: 0 0 34px; }
}
@media (min-width: 2800px) {
  .pg-erk { --pw2: 2320px; }
  .pg-erk #secs { columns: 3; }
}
@container detail (min-width: 1080px) {
  .detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 40px; align-items: start; align-content: start; }
  .detail > * { grid-column: 1 / -1; }
  .detail > .d-main { grid-column: 1; display: block; min-width: 0; }
  .detail > #d-members-wrap { grid-column: 2; }
  .detail > #d-members-wrap > h3 { margin-top: 0 !important; }
}