/* ============================================================
   Live-Ergebnisse am Wahlabend (v2.85.0)

   Eigenstaendiges Stylesheet nach dem Vorbild von assets/css/map/ —
   assets/css/src/ wird aus dem ZIP ausgeschlossen und ist der
   PostCSS-Quellbaum. Diese Datei wird direkt ausgeliefert und nur
   auf der Live-Seite eingebunden.

   Die Design-Tokens (--pg-*) kommen aus dem Core-Stylesheet; hier
   stehen Fallbacks, damit die Seite auch dann tragbar aussieht,
   wenn das Core-CSS aus irgendeinem Grund nicht geladen ist. Am
   Wahlabend ist eine haessliche Seite besser als eine kaputte.
   ============================================================ */

.pg-live {
    --pg-live-lead: #94a3b8;
    --pg-live-called: #15803d;
    --pg-live-confirmed: #1e293b;
    --pg-live-warn: #b45309;
    --pg-live-warn-bg: #fffbeb;

    font-family: var(--pg-font-family, 'Source Sans 3', system-ui, sans-serif);
    color: var(--pg-text, #1e293b);
}

/* -------------------------------------------------- Statuskopf */

.pg-live-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-md, 1rem);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--pg-space-md, 1rem);
    margin-bottom: var(--pg-space-md, 1rem);
    background: var(--pg-bg-light, #f8fafc);
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-lg, 0.5rem);
}

.pg-live-status__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--pg-font-size-lg, 1.125rem);
}

.pg-live-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #dc2626;
    animation: pg-live-pulse 2s ease-in-out infinite;
}

@keyframes pg-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Wer "Bewegung reduzieren" eingestellt hat, bekommt einen ruhigen Punkt —
   der pulsierende Live-Indikator ist Dekoration, keine Information. */
@media (prefers-reduced-motion: reduce) {
    .pg-live-dot { animation: none; }
}

.pg-live--error .pg-live-dot { background: var(--pg-live-warn, #b45309); }

.pg-live-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-lg, 1.5rem);
    margin: 0;
}

.pg-live-figures div { margin: 0; }

.pg-live-figures dt {
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-muted, #64748b);
    margin: 0;
}

.pg-live-figures dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pg-live-updated {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-muted, #64748b);
}

.pg-live-refresh {
    padding: 0.25rem 0.75rem;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-md, 0.375rem);
    cursor: pointer;
}

.pg-live-refresh:hover:not(:disabled) { border-color: var(--pg-text-muted, #64748b); }
.pg-live-refresh:disabled { opacity: 0.5; cursor: progress; }

/* -------------------------------------------------- Hinweise */

.pg-live-notice,
.pg-live-alert,
.pg-live-upsell {
    padding: var(--pg-space-md, 1rem);
    margin-bottom: var(--pg-space-md, 1rem);
    border-radius: var(--pg-radius-lg, 0.5rem);
}

.pg-live-notice--off {
    background: var(--pg-bg-light, #f8fafc);
    border: 1px solid var(--pg-border, #e2e8f0);
}

.pg-live-alert {
    background: var(--pg-live-warn-bg, #fffbeb);
    border-left: 4px solid var(--pg-live-warn, #b45309);
}

.pg-live-upsell {
    background: var(--pg-bundle-color-lighter, #eff6ff);
    border: 1px solid var(--pg-bundle-color-light, #bfdbfe);
}

.pg-live-upsell h2 { margin-top: 0; font-size: var(--pg-font-size-lg, 1.125rem); }
.pg-live-upsell p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- Karte */

.pg-live-map #map-container { position: relative; }
.pg-live-map object { width: 100%; height: auto; }

.pg-live-key {
    margin: var(--pg-space-md, 1rem) 0 0;
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-muted, #64748b);
    max-width: 60ch;
    line-height: 1.5;
}

.pg-live-key strong { color: var(--pg-text, #1e293b); }

/* -------------------------------------------------- Tabelle */

.pg-live-table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-md, 1rem);
    margin: var(--pg-space-lg, 1.5rem) 0 var(--pg-space-md, 1rem);
}

.pg-live-table-controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--pg-font-size-sm, 0.875rem);
}

.pg-live-table-controls select {
    padding: 0.3rem 0.5rem;
    font: inherit;
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-md, 0.375rem);
}

/* Breite Tabellen scrollen in ihrem eigenen Container — die Seite selbst
   darf nie horizontal scrollen.

   Die Hoehenbegrenzung ist nicht Kosmetik, sondern die Bedingung dafuer, dass
   klebender Kopf und klebende Summenzeile ueberhaupt wirken. Ein Kasten mit
   overflow-x:auto bekommt vom Browser zwingend auch overflow-y:auto und ist
   damit ein Scroll-Container; position:sticky richtet sich dann nach IHM und
   nicht mehr nach dem Fenster. Ohne max-height waechst er auf volle
   Inhaltshoehe, es gibt in ihm nichts zu scrollen, und beide sticky-Regeln
   sind wirkungslos — der Kopf der Wahlkreistabelle war aus genau diesem Grund
   nie wirklich klebend. Mit der Grenze scrollen 41 Wahlkreise im Kasten,
   waehrend Kopf und Summe stehen bleiben.

   Ist der Inhalt kuerzer als die Grenze (Zweitstimmentabelle), passiert
   nichts: der Kasten schrumpft mit, es wird nicht gescrollt, und die
   Summenzeile steht schlicht am Ende. */
.pg-live-table-scroll {
    overflow: auto;
    max-height: min(75vh, 46rem);
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-lg, 0.5rem);
}

.pg-live-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pg-font-size-sm, 0.875rem);
}

.pg-live-table th,
.pg-live-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--pg-border, #e2e8f0);
}

/* Zellen bleiben einzeilig — Zahlen und Parteinamen sollen nicht umbrechen. */
.pg-live-table td { white-space: nowrap; }

/* Ausnahme Statusspalte: "Vollstaendig ausgezaehlt" und
   "Entschieden — ungeklaert" sind lang, und einzeilig zoegen sie die ganze
   Tabelle in die Breite. Hier darf umbrochen werden. */
.pg-live-table td:nth-child(4) { white-space: normal; min-width: 6rem; }

/* Kopfzellen brechen dagegen um. Damit ist die Spalte nur so breit wie das
   laengste Wort der Ueberschrift statt wie die ganze Zeile. Bei zehn Spalten
   ist das der Unterschied zwischen "passt auf einen Laptop" und "die Haelfte
   liegt ausserhalb des Bildschirms". */
.pg-live-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--pg-bg-light, #f8fafc);
    font-weight: 600;
    vertical-align: bottom;
    line-height: 1.2;

    /* Umbrechen ja — aber nur an Wortgrenzen.
       Ohne die drei folgenden Zeilen greift eine Regel des Themes, die Woerter
       mitten im Wort trennt. Die Mindestbreite einer Spalte faellt damit auf
       ein Zeichen, und der Kopf zerfaellt zu "Nich t ausg ezaeh lte". Genau
       das war zu sehen. */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Die Wahlkreisspalte traegt Fliesstext und darf umbrechen — aber sie bekommt
   KEIN width:auto mehr. Damit hatte sie allen freien Platz an sich gezogen und
   alle uebrigen Spalten zusammengedrueckt (siehe Screenshot vom 01.09.). Ein
   Bereich aus min- und max-width haelt sie in vernuenftigen Grenzen; den Rest
   verteilt die automatische Tabellenaufteilung von selbst. */
.pg-live-table th:nth-child(2),
.pg-live-table td:nth-child(2) {
    white-space: normal;
    min-width: 8rem;
    max-width: 16rem;
}

.pg-live-table .pg-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pg-live-table tbody tr:last-child td { border-bottom: 0; }
.pg-live-leader { font-weight: 600; }
.pg-live-runnerup { color: var(--pg-text, #1e293b); }

/* -------------------------------------------------- Parteifarben

   Dieselben Werte wie auf der Karte (map.css, .areafill-*). Die Nummern
   stammen aus userRangeCssColorClass in den mapdata-ranges; live-results.js
   setzt daraus die Klasse pg-fill-<nummer>. Eine Quelle fuer beide
   Darstellungen — laufen Karte und Tabelle farblich auseinander, ist die
   Tabelle irrefuehrend.

   Wer hier eine Partei ergaenzt: die Nummer steht in map.css. */

/* --pg-ink ist die Textfarbe auf voller Parteifarbe. Weiss ist NICHT ueberall
   richtig: auf Gold, Hellblau und Orange ist es unlesbar. Deshalb je Farbe
   entschieden, nicht pauschal. */
.pg-fill-1   { --pg-party: rgb(0, 0, 0);       --pg-ink: #fff; }  /* CDU */
.pg-fill-7   { --pg-party: rgb(0, 128, 0);     --pg-ink: #fff; }  /* B90/Grüne */
.pg-fill-10  { --pg-party: rgb(0, 191, 255);   --pg-ink: #08304a; } /* AfD */
.pg-fill-29  { --pg-party: rgb(75, 0, 130);    --pg-ink: #fff; }  /* BSW */
.pg-fill-47  { --pg-party: rgb(128, 128, 128); --pg-ink: #fff; }  /* Sonstige */
.pg-fill-51  { --pg-party: rgb(139, 0, 0);     --pg-ink: #fff; }  /* Die Linke */
.pg-fill-110 { --pg-party: rgb(255, 0, 0);     --pg-ink: #fff; }  /* SPD */
.pg-fill-117 { --pg-party: rgb(255, 140, 0);   --pg-ink: #3d2200; } /* Freie Wähler */
.pg-fill-122 { --pg-party: rgb(255, 215, 0);   --pg-ink: #3d3200; } /* FDP */

/* Heller Anstrich der Zelle. color-mix rechnet den hellen Ton selbst aus,
   damit nicht neun weitere Farbwerte gepflegt werden muessen. Browser ohne
   color-mix bekommen keinen Hintergrund — die Tabelle bleibt lesbar, sie ist
   dann nur einfarbig. */
.pg-live-tint {
    background: color-mix(in srgb, var(--pg-party, transparent) 16%, transparent);
}

/* ---- Das Spaltenpaar "Noch auszuzählen" und "Vorsprung" ----

   Die beiden gehoeren zusammen: entschieden ist ein Wahlkreis, sobald der
   Vorsprung groesser ist als das, was noch auszuzaehlen ist. Ein gemeinsames
   Band klammert sie optisch, der Balken in der Vorsprungsspalte zeigt das
   Verhaeltnis. */
/* Die Klammer entsteht ueber die Randlinien, NICHT ueber einen gemeinsamen
   Hintergrund. Ein Hintergrund auf .pg-live-pair haette den der Parteifarbe
   ueberschrieben — beide setzen background-color, und die spaetere Regel
   gewinnt. Ergebnis war weisse Schrift auf blassem Grund in genau den Zeilen,
   die am deutlichsten sein sollten. */
.pg-live-pair--first {
    border-left: 2px solid var(--pg-border-dark, #cbd5e1);
    background-color: rgba(15, 23, 42, 0.03);
}
.pg-live-pair--last { border-right: 2px solid var(--pg-border-dark, #cbd5e1); }

/* Der Balken: gefuellt im Verhaeltnis Vorsprung zu Restmenge. Volle Breite
   heisst, der Vorsprung uebersteigt die Restmenge — der Wahlkreis ist
   entschieden. Der Balken ist damit die sichtbare Fassung genau der Regel,
   nach der gecallt wird. */
.pg-live-progress {
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--pg-bar, var(--pg-party, #64748b)) 38%, transparent) var(--pg-progress, 0%),
        transparent var(--pg-progress, 0%)
    );
    background-repeat: no-repeat;
}

/* Der Auszaehlbalken ist bewusst NEUTRAL und traegt keine Parteifarbe.

   Der Vorsprungsbalken ist parteifarben, weil er den Vorsprung genau dieser
   Partei zeigt. Der Auszaehlstand dagegen ist Verwaltungsfortschritt und geht
   keine Partei etwas an — ihn einzufaerben wuerde nahelegen, die Auszaehlung
   liefe zu jemandes Gunsten. Am Wahlabend ist das die letzte Andeutung, die
   man auf der Seite haben will.

   Das Schieferblau ist ausserdem deutlich von allen neun Parteifarben zu
   unterscheiden, sodass die beiden Balken in einer Zeile nicht verwechselt
   werden koennen. */
.pg-live-progress--neutral { --pg-bar: #64748b; }

/* Uneinholbar: volle Parteifarbe wie auf der Karte. Die Tabelle sagt damit
   dasselbe wie die Karte und in derselben Sprache — ein entschiedener
   Wahlkreis ist auf beiden voll gefaerbt, ein offener nur angetoent.

   Bewusst mit td-Praefix und am Ende der Faerbungsregeln: diese Regel muss
   jede andere Hintergrundangabe der Zelle schlagen, auch die des Bandes. */
.pg-live-table td.pg-live-solid,
.pg-live-badge.pg-live-solid {
    background-color: var(--pg-party, #1e293b);
    background-image: none;
    color: var(--pg-ink, #fff);
    font-weight: 600;
}

.pg-live-table td.pg-live-solid a { color: inherit; }

/* Der Status uebernimmt die Parteifarbe als Text, kraeftiger als der
   Zellhintergrund, damit er auf hellem Grund lesbar bleibt. */
.pg-live-tint-text {
    background: color-mix(in srgb, var(--pg-party, transparent) 18%, transparent);
    color: color-mix(in srgb, var(--pg-party, currentColor) 75%, black);
}

/* Gelb und Hellblau sind auf Weiss zu schwach — dort den Text abdunkeln. */
.pg-fill-122.pg-live-tint-text,
.pg-fill-10.pg-live-tint-text {
    color: color-mix(in srgb, var(--pg-party) 55%, black);
}

.pg-live-empty {
    padding: var(--pg-space-lg, 1.5rem);
    text-align: center;
    color: var(--pg-text-muted, #64748b);
}

.pg-live-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: var(--pg-font-size-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--pg-radius-full, 9999px);
    background: var(--pg-bg-light, #f8fafc);
    color: var(--pg-text-muted, #64748b);
}

/* Kein eigener Hintergrund mehr fuer "entschieden" — die Faerbung kommt aus
   der Parteifarbe (.pg-live-tint-text). Gruen sagte nur "entschieden", die
   Parteifarbe sagt zugleich, fuer wen. */
.pg-live-badge--called,
.pg-live-badge--confirmed { background: transparent; }
.pg-live-badge.pg-live-solid { padding: 0.15rem 0.55rem; }
.pg-live-badge--confirmed { font-weight: 700; }

/* Ein Call, den die aktuellen Zahlen nicht mehr tragen. Er bleibt stehen —
   ein oeffentlich gemachter Call wird nicht stillschweigend zurueckgenommen —
   darf aber nicht wie ein gesicherter aussehen. */
.pg-live-badge--reverted {
    background: var(--pg-live-warn-bg, #fffbeb);
    color: var(--pg-live-warn, #b45309);
    box-shadow: inset 0 0 0 1px currentColor;
}

.pg-live-row--reverted { background: rgba(180, 83, 9, 0.07); }

/* Gesperrte Spalte fuer nicht angemeldete Leser: die Spalte wird gezeigt,
   nicht weggelassen. Eine fehlende Spalte erklaert nichts. */
.pg-live-lock {
    text-decoration: none;
    opacity: 0.65;
}

.pg-live-lock:hover { opacity: 1; }

.pg-live-locked { text-align: center; }

.pg-live-locked-col { white-space: normal; max-width: 12rem; }

.pg-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pg-live-called-at {
    margin-left: 0.35rem;
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.pg-live-reverted {
    margin-left: 0.35rem;
    font-size: var(--pg-font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--pg-live-warn, #b45309);
}

.pg-live-source {
    margin-top: var(--pg-space-md, 1rem);
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

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

   Unter 640 px wird aus jeder Tabellenzeile eine Karte. Bei 78 Berliner
   Wahlkreisen ist eine horizontal scrollende Tabelle auf dem Telefon
   unbenutzbar, und genau dort wird am Wahlabend gelesen. */

@media (max-width: 780px) {
    .pg-live-table thead { display: none; }

    .pg-live-table,
    .pg-live-table tbody,
    .pg-live-table tr,
    .pg-live-table td {
        display: block;
        width: 100%;
    }

    .pg-live-table tr {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--pg-border, #e2e8f0);
    }

    /* Ohne Kopfzeile waere jede Karte eine Liste unbeschrifteter Zahlen.
       Das Label steht in data-label und kommt hier davor. */
    .pg-live-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.2rem 0;
        border: 0;
        white-space: normal;
        text-align: right;
    }

    .pg-live-table td::before {
        content: attr(data-label);
        font-size: var(--pg-font-size-xs, 0.75rem);
        color: var(--pg-text-muted, #64748b);
        text-align: left;
        flex: 0 0 auto;
    }

    /* Wahlkreisname als Ueberschrift der Karte, ohne Label. */
    .pg-live-table td.pg-live-name {
        display: block;
        text-align: left;
        font-weight: 700;
        font-size: var(--pg-font-size-base, 1rem);
        padding-bottom: 0.35rem;
    }
    .pg-live-table td.pg-live-name::before { content: none; }

    /* Die Nummer steht schon im Namen der Karte — Zeile sparen. */
    .pg-live-table td:first-child { display: none; }

    .pg-live-table .pg-num { text-align: right; }
    .pg-live-table-scroll { overflow-x: visible; border: 0; }
    .pg-live-table tr:nth-child(odd) { background: var(--pg-bg-light, #f8fafc); }

    .pg-live-status { flex-direction: column; align-items: flex-start; }
    .pg-live-figures { gap: var(--pg-space-md, 1rem); }
    .pg-live-table-controls label { flex: 1 1 100%; }
    .pg-live-table-controls select { flex: 1 1 auto; }
}

/* -------------------------------------------------- Karte auf schmalen Schirmen

   Die SVGs liegen in <object>-Elementen und bringen eigene Groessenangaben mit.
   Ohne diese Regeln ragen Karte und Legende auf dem Telefon ueber den Rand
   hinaus und die Seite scrollt seitwaerts. */

.pg-live-map #svg-container,
.pg-live-map #title-container,
.pg-live-map #legend-container {
    max-width: 100%;
    overflow: hidden;
}

.pg-live-map object {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 780px) {
    .pg-live-map #title-legend-container {
        display: block;
    }
    .pg-live-map #legend-container { margin-top: 0.5rem; }
    .pg-live-key { font-size: var(--pg-font-size-xs, 0.75rem); gap: 0.75rem; }
    .pg-live-alert, .pg-live-upsell, .pg-live-notice { padding: 0.75rem; }
}

/* Die Seite selbst darf nie seitwaerts scrollen. */
.pg-live { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   LIVE-MENUE im Hauptmenue

   Wird auf jeder Seite geladen, sobald ein "Live"-Menuepunkt existiert.
   Deshalb bewusst genuegsam: keine Schriften, keine Animationen ausser dem
   Punkt, und alles unter .pg-live-menu gekapselt.
   ========================================================================== */

.pg-live-menu {
    min-width: 17rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-lg, 0.5rem);
    box-shadow: var(--pg-shadow-lg, 0 10px 20px rgba(15, 23, 42, 0.12));
}

.pg-live-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pg-live-menu__item a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--pg-radius-md, 0.375rem);
    text-decoration: none;
    color: inherit;
}

.pg-live-menu__item a:hover { background: var(--pg-bg-light, #f8fafc); }

.pg-live-menu__dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--pg-border-dark, #cbd5e1);
}

/* Gruen und pulsierend nur, wenn die Berichterstattung wirklich laeuft. */
.pg-live-menu__item--live .pg-live-menu__dot {
    background: #16a34a;
    animation: pg-live-pulse 2s ease-in-out infinite;
}

.pg-live-menu__item--past { opacity: 0.55; }

.pg-live-menu__text { display: flex; flex-direction: column; line-height: 1.25; }
.pg-live-menu__region { font-weight: 600; }

.pg-live-menu__meta {
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

.pg-live-menu__item--live .pg-live-menu__meta {
    color: #15803d;
    font-weight: 600;
}

.pg-live-menu__note {
    margin: 0.5rem 0.6rem 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pg-border, #e2e8f0);
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

/* Der Menuepunkt "Live" selbst bekommt einen Punkt, solange eine Wahl laeuft. */
.pg-live-menu-active > a::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #16a34a;
    animation: pg-live-pulse 2s ease-in-out infinite;
}

/* Panel wie beim Karten-Mega-Menue positionieren. */
.pg-has-live-menu { position: relative; }

.pg-has-live-menu > .pg-live-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    display: none;
}

.pg-has-live-menu:hover > .pg-live-menu,
.pg-has-live-menu:focus-within > .pg-live-menu { display: block; }

/* Das Theme wuerde sonst sein eigenes Untermenue daneben zeigen. */
.pg-has-live-menu > .sub-menu { display: none !important; }

@media (max-width: 780px) {
    .pg-has-live-menu > .pg-live-menu {
        position: static;
        display: block;
        box-shadow: none;
        border: 0;
        min-width: 0;
    }
}

/* ==========================================================================
   LIVE-UEBERSICHT — die Seite hinter dem Menuepunkt "Live"
   ========================================================================== */

.pg-live-overview { font-family: var(--pg-font-family, 'Source Sans 3', system-ui, sans-serif); }

.pg-live-overview__banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: var(--pg-space-md, 1rem);
    background: #dcfce7;
    border-left: 4px solid #16a34a;
    border-radius: var(--pg-radius-md, 0.375rem);
    font-weight: 600;
    color: #14532d;
}

.pg-live-overview__list {
    list-style: none;
    margin: 0 0 var(--pg-space-lg, 1.5rem);
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.pg-live-overview__item a {
    display: block;
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--pg-border, #e2e8f0);
    border-radius: var(--pg-radius-lg, 0.5rem);
}

.pg-live-overview__item a:hover {
    border-color: var(--pg-text-muted, #64748b);
    box-shadow: var(--pg-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.pg-live-overview__item--live a { border-left: 4px solid #16a34a; }
.pg-live-overview__item--past { opacity: 0.6; }

.pg-live-overview__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pg-live-overview__region {
    font-weight: 700;
    font-size: var(--pg-font-size-lg, 1.125rem);
}

.pg-live-overview__election,
.pg-live-overview__state {
    display: block;
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-muted, #64748b);
}

.pg-live-overview__state { margin-top: 0.15rem; }
.pg-live-overview__item--live .pg-live-overview__state { color: #15803d; }

.pg-live-overview__explainer {
    padding: var(--pg-space-md, 1rem);
    background: var(--pg-bg-light, #f8fafc);
    border-radius: var(--pg-radius-lg, 0.5rem);
    /* Volle Breite: der Kasten steht unter der Kartenliste und ist der
       eigentliche Erklaertext der Seite. Auf 62ch beschnitten stand er als
       schmale Spalte unter einem breiten Raster. */
    max-width: none;
}

.pg-live-overview__explainer h2 {
    margin-top: 0;
    font-size: var(--pg-font-size-lg, 1.125rem);
}

.pg-live-overview__caveat {
    margin-bottom: 0;
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

@media (min-width: 640px) {
    .pg-live-overview__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   ZWEITSTIMMEN, FUENFPROZENTHUERDE UND SITZVERTEILUNG
   ═══════════════════════════════════════════════════════════════ */

.pg-live-secondary {
    margin: var(--pg-space-2xl, 2rem) 0;
}

.pg-live-secondary__head h2 { margin-bottom: 0.35rem; }

/* Volle Breite: der Absatz steht direkt unter dem Zwischenergebnis-Kasten und
   fuehrt in den ganzen Abschnitt ein. Auf 62ch beschnitten haette er neben der
   breiten Tabelle wie eine Randnotiz gewirkt. */
.pg-live-secondary__intro {
    max-width: none;
    margin: 0 0 var(--pg-space-md, 1rem);
    color: var(--pg-text-secondary, #475569);
}

.pg-live-figures__note {
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
    font-weight: 400;
}

.pg-live-secondary__caveat,
.pg-live-secondary__key {
    max-width: none;
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-secondary, #475569);
}

/* Die Erlaeuterung steht unter dem Hemicycle und gehoert zu ihm. */
.pg-live-secondary__caveat { margin-top: var(--pg-space-md, 1rem); }

/* ── Hemicycle ──────────────────────────────────────────────────
   Gezeichnet wird es von assets/js/parliament/hemicycle.js, also von
   demselben Code wie auf den Umfragekarten. Die Regeln dafuer stehen dort
   in assets/css/src/_parliament.css, das ueber das "pages"-Bundle
   ausgeliefert wird — zusammen mit allen Kandidaten- und Seitenstilen.
   Dieses Bundle auf der Live-Seite einzubinden, brachte den ganzen Rest mit
   und damit Layoutkonflikte. Die paar Regeln, die das Hemicycle wirklich
   braucht, stehen deshalb hier noch einmal, eingegrenzt auf .pg-live.

   Wer die Darstellung dort aendert, muss hier nachziehen. Die
   Parteifarben sind davon nicht betroffen: die setzt hemicycle.js selbst
   als fill-Attribut, aus derselben Tabelle wie die Karte. */

.pg-live .pg-hemicycle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--pg-space-lg, 1.25rem);
}

.pg-live .pg-hemicycle-svg {
    width: 100%;
    max-width: 640px;
    height: auto;
    overflow: visible;
}

.pg-live .pg-hemi-total {
    font-size: 2rem;
    font-weight: 700;
    fill: var(--pg-text-primary, #111);
    font-family: inherit;
}

.pg-live .pg-hemi-label {
    font-size: 0.75rem;
    fill: var(--pg-text-muted, #64748b);
    font-family: inherit;
}

.pg-live .pg-parl-legend {
    max-width: 640px;
    margin: 0 auto var(--pg-space-md, 1rem);
}

.pg-live .pg-parl-legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
}

/* Einzeilig halten: wpautop schiebt in Shortcode-Ausgaben <br> ein, und in
   einem Flex-Container ist jedes <br> ein nulldimensionales Flex-Item, auf
   das gap wirkt. Die Zeile ruecke dann um eine Luecke ein. */
.pg-live .pg-parl-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pg-font-size-sm, 0.875rem);
    white-space: nowrap;
}

.pg-live .pg-parl-legend-item br,
.pg-live .pg-parl-legend-grid br,
.pg-live .pg-parl-type-legend br { display: none; }

.pg-live .pg-parl-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pg-live .pg-parl-legend-name { font-weight: 500; }

.pg-live .pg-parl-legend-seats {
    font-weight: 700;
    min-width: 2ch;
    text-align: right;
}

.pg-live .pg-parl-legend-detail {
    color: var(--pg-text-muted, #64748b);
    font-size: var(--pg-font-size-xs, 0.75rem);
}

.pg-live .pg-parl-type-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--pg-space-sm, 0.5rem);
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

/* ── Parteitabelle ─────────────────────────────────────────────── */

.pg-live-parties td.pg-live-party {
    font-weight: 600;
    border-left: 4px solid var(--pg-party, transparent);
}

/* Kein gruener Zeilenton mehr fuer eingezogene Parteien.

   Zwei Gruende. Erstens sagte er dasselbe wie das Abzeichen "Sicher im
   Landtag" daneben, nur unschaerfer. Zweitens — und das war der Fehler —
   schlug er die Parteifarbe der Namenszelle: `.pg-live-parties
   tr.pg-live-party--in td` wiegt (0,2,2) und damit mehr als
   `.pg-live-table td.pg-live-solid` (0,2,1). Genau die sicher eingezogenen
   Parteien verloren dadurch ihre Farbe, waehrend alle uebrigen sie behielten. */

.pg-live-parties .pg-live-share { font-weight: 600; }

.pg-live-parties .pg-live-seats {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Der Balken laeuft bis 40 %, nicht bis 100 %. Bei einer Huerde von 5 %
   saesse die Marke sonst im aeussersten Zwanzigstel und waere genau die
   Linie, auf die es ankommt, nicht mehr abzulesen. */
.pg-live-bar-cell { width: 9rem; min-width: 7rem; }

.pg-live-bar {
    position: relative;
    height: 0.7rem;
    background: var(--pg-bg-light, #f1f5f9);
    border-radius: 0.35rem;
    /* NICHT overflow:hidden. Die Huerdenmarke stuende sonst innerhalb des
       Balkens und verschwaende unter der Fuellung — bei der CDU schwarz auf
       schwarz, also genau dort, wo der Balken am laengsten ist. Sie ragt
       deshalb oben und unten heraus. */
    overflow: visible;
}

.pg-live-bar__fill {
    display: block;
    height: 100%;
    background: var(--pg-party, #94a3b8);
    border-radius: 0.35rem;
}

/* Die Fuenfprozentlinie. Der weisse Rand ringsum haelt sie auf jeder
   Parteifarbe lesbar — dunkel auf Schwarz und dunkel auf Gelb waeren sonst
   beide unbrauchbar. */
.pg-live-bar__threshold {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--pg-text, #1e293b);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
    /* Die Marke sitzt AUF dem Prozentwert, nicht daneben. */
    transform: translateX(-1px);
}

/* ── Huerdenstatus ─────────────────────────────────────────────── */

.pg-live-threshold { white-space: nowrap; }

.pg-live-threshold--na {
    color: var(--pg-text-muted, #64748b);
    text-align: center;
}

.pg-live-badge.pg-live-threshold-in {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

.pg-live-badge.pg-live-threshold-out {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.pg-live-badge.pg-live-threshold-open {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde047;
}

/* Kartenansicht: dieselbe Schwelle wie die Wahlkreistabelle weiter oben —
   ab hier wird aus jeder Zeile eine Karte mit data-label als Beschriftung. */
@media (max-width: 780px) {
    /* Der Balken sagt dasselbe wie die Prozentzahl daneben. Auf der Karte
       traegt er nichts bei, waere aber eine zweite Zeile mit der Aufschrift
       "Anteil" — also weg damit. */
    .pg-live-parties .pg-live-bar-cell { display: none; }

    /* Parteiname als farbige Ueberschrift der Karte, ohne Label davor. */
    .pg-live-parties td.pg-live-party {
        display: block;
        text-align: left;
        font-size: var(--pg-font-size-base, 1rem);
        padding: 0.3rem 0.6rem;
        margin-bottom: 0.35rem;
        border-radius: var(--pg-radius-md, 0.375rem);
    }

    .pg-live-parties td.pg-live-party::before { content: none; }
}

/* ── Fortschrittsbalken im Zwischenergebnis-Kasten ──────────────────────
   Dieselbe Aussage wie die Spalte "Ausgezählt" der Wahlkreistabelle, nur
   landesweit: wie weit ist die Auszählung. Bewusst NEUTRAL gefärbt, aus
   demselben Grund wie dort — der Auszählstand ist Verwaltungsfortschritt und
   geht keine Partei etwas an. Ihn einzufärben würde nahelegen, die Auszählung
   liefe zu jemandes Gunsten. */

.pg-live-figures__wide { min-width: 14rem; flex: 1 1 14rem; }

.pg-live-figures__meter { margin-top: 0.3rem; }

.pg-live-meter {
    display: block;
    height: 0.5rem;
    background: var(--pg-border, #e2e8f0);
    border-radius: 0.25rem;
    overflow: hidden;
}

.pg-live-meter__fill {
    display: block;
    height: 100%;
    width: 0;
    background: #64748b;
    border-radius: 0.25rem;
    transition: width 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pg-live-meter__fill { transition: none; }
}

/* Das Schloss steht in einer <dd> und soll dort nicht wie ein Zahlenwert
   ausgerichtet sein. */
.pg-live-figures dd.pg-live-locked { font-weight: 400; }

/* ── Absolute Mehrheit ─────────────────────────────────────────────────── */

.pg-live-badge.pg-live-majority-certain {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

/* Ausgeschlossen ist der Normalfall, sobald der Abend fortgeschritten ist.
   Deshalb ruhig und ohne Signalfarbe: eine Tabelle, in der acht von neun
   Zeilen rot leuchten, sagt nichts mehr. */
.pg-live-badge.pg-live-majority-impossible {
    background: transparent;
    color: var(--pg-text-muted, #64748b);
    border: 1px solid var(--pg-border, #e2e8f0);
}

.pg-live-badge.pg-live-majority-possible {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde047;
}

.pg-live-majority-now {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--pg-font-size-xs, 0.75rem);
    color: var(--pg-text-muted, #64748b);
}

/* Statusspalten dürfen umbrechen, sonst zieht "Rechnerisch möglich" die
   ganze Tabelle in die Breite. */
.pg-live-parties td.pg-live-threshold { white-space: normal; }

/* ── Summenzeile ────────────────────────────────────────────────────────
   Am unteren Rand des Scrollbereichs festgehalten, spiegelbildlich zum
   klebenden Tabellenkopf. Beim Durchscrollen von 41 Wahlkreisen bleibt die
   Summe damit dort, wo man sie sucht, statt am Ende der Liste zu warten. */

.pg-live-total td,
.pg-live-total th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--pg-bg-light, #f8fafc);
    border-top: 2px solid var(--pg-border-dark, #cbd5e1);
    border-bottom: 0;
    font-weight: 600;
}

/* Der Kopf klebt oben und muss ueber der Summenzeile liegen, wenn beide sich
   bei sehr kurzen Tabellen beruehren. */
.pg-live-table thead th { z-index: 3; }

.pg-live-total-label {
    font-weight: 700;
    white-space: nowrap;
}

.pg-live-total-note {
    font-weight: 400;
    color: var(--pg-text-muted, #64748b);
    white-space: nowrap;
}

/* Weicht die Summe der Parteizeilen von der amtlichen Zahl ab, wird die Zelle
   markiert. Der Grund steht im Tooltip. */
.pg-live-total-mismatch { color: var(--pg-live-warn, #b45309); }

/* Auf schmalen Schirmen wird jede Zeile zur Karte; eine klebende Summenkarte
   wuerde dann die halbe Ansicht verdecken. Sie steht dort einfach am Ende. */
@media (max-width: 780px) {
    /* In der Kartenansicht scrollt die Seite, nicht der Kasten: ein zweiter
       Scrollbereich im Seitenscroll ist auf dem Telefon eine Falle. */
    .pg-live-table-scroll { max-height: none; }

    .pg-live-total td,
    .pg-live-total th {
        position: static;
    }

    .pg-live-total tr {
        display: block;
        padding: 0.6rem 0.75rem;
        border-top: 2px solid var(--pg-border-dark, #cbd5e1);
    }

    /* Leere Zellen erzeugen sonst lauter Zeilen mit nichts darin. */
    .pg-live-total td:empty { display: none; }
}

/* ── Erststimmen-Kopf vor der Karte ─────────────────────────────────────── */

.pg-live-primary-head {
    margin-top: var(--pg-space-2xl, 2rem);
}

.pg-live-primary-head h2 { margin-bottom: 0.35rem; }

/* ── Parteinamen in der Zweitstimmentabelle ─────────────────────────────
   Volle Parteifarbe wie die Spalte "Führend" der Wahlkreistabelle. Der
   farbige linke Balken von vorher entfällt damit: er wäre ein zweiter
   Farbträger direkt neben der Fläche. */
.pg-live-parties td.pg-live-party {
    border-left: 0;
}

/* ── Zugangskasten fuer Gaeste ──────────────────────────────────────────
   Steht ganz oben, weil die Schloss-Symbole weiter unten sonst ohne
   Erklaerung dastehen. Links der Text, rechts der vorbelegte Kaufkasten aus
   class-map-renderer.php — dasselbe Bauteil wie auf der Kartenseite, damit
   Preis, Umschalter und Kaufweg nur einmal gepflegt werden. */

.pg-live-access {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-lg, 1.5rem);
    align-items: flex-start;
    padding: var(--pg-space-md, 1rem);
    margin-bottom: var(--pg-space-lg, 1.5rem);
    background: var(--pg-bundle-color-lighter, #eff6ff);
    border: 1px solid var(--pg-bundle-color-light, #bfdbfe);
    border-radius: var(--pg-radius-lg, 0.5rem);
    /* Jedes Schloss der Seite springt hierher. Ohne den Abstand klebte der
       Kasten nach dem Sprung unter einer fixierten Themeleiste. */
    scroll-margin-top: 5rem;
    margin-top: var(--pg-space-2xl, 2rem);
}

.pg-live-access__text {
    flex: 1 1 22rem;
    min-width: 0;
}

.pg-live-access__text h2 {
    margin-top: 0;
    font-size: var(--pg-font-size-lg, 1.125rem);
}

.pg-live-access__text p { margin: 0 0 0.6rem; }

.pg-live-access__list {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.pg-live-access__list li { margin-bottom: 0.25rem; }

.pg-live-access__note {
    font-size: var(--pg-font-size-sm, 0.875rem);
    color: var(--pg-text-secondary, #475569);
    margin-bottom: 0 !important;
}

.pg-live-access__cta {
    flex: 0 1 20rem;
    min-width: 0;
}

/* Der Kaufkasten bringt eigene Aussenabstaende mit, die hier doppelt waeren. */
.pg-live-access__cta .pg-paywall-cta-wrap { margin: 0; }

/* Kurz aufleuchten, wenn ein Schloss hierher gesprungen ist: sonst ist nach
   dem Sprung nicht zu erkennen, dass etwas passiert ist. */
.pg-live-access:target {
    animation: pg-live-access-flash 1.6s ease-out;
}

@keyframes pg-live-access-flash {
    0%, 40% { box-shadow: 0 0 0 3px var(--pg-bundle-color, #2563eb); }
    100%    { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-live-access:target { animation: none; box-shadow: 0 0 0 3px var(--pg-bundle-color, #2563eb); }
}

/* ── Kopf der Spalte "Noch auszuzählen" ─────────────────────────────────
   Linksbündig, obwohl die Zahlen darunter rechtsbündig stehen. Die
   Überschrift bricht auf zwei Zeilen um und trägt bei Gästen zusätzlich das
   Schloss; rechtsbündig ergibt das einen ausgefransten linken Rand und das
   Schloss landet mitten in der Zeile. */
.pg-live-table thead th.pg-live-pair--first {
    text-align: left;
}