/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app[b-sk3444qbkz] {
    display: flex;
    min-height: 100vh;
    /* horizontal sicherheitshalber clippen, falls etwas innen breiter wird
       als der Viewport. WICHTIG: 'clip' (nicht 'hidden') - sonst bricht
       position:fixed auf mobilen Browsern (Tab-Leiste verschwindet). */
    overflow-x: clip;
}

.sidebar[b-sk3444qbkz] {
    width: 264px;
    flex-shrink: 0;
    /* Im eingeklappten Zustand (64px) muss alles innerhalb der schmalen Spur
       gehalten werden - sonst spillen Texte ueber den Rand auf den Content. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(168deg, rgba(255, 255, 253, .92), rgba(252, 250, 240, .8));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid var(--glass-border);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 16px 0 44px -32px rgba(40, 50, 28, .5);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 30;
}

.main[b-sk3444qbkz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar[b-sk3444qbkz] {
    height: 66px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 32px;
    /* durchscheinendes Milchglas - bunte Inhalte schimmern beim Scrollen sanft durch */
    background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 253, 244, .54));
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px -14px rgba(40, 50, 28, .5);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Topbar-Inhalt auf dieselbe zentrierte Breite wie der Seiteninhalt - fluchtet */
.topbar-inner[b-sk3444qbkz] {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-title[b-sk3444qbkz] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.topbar-kicker[b-sk3444qbkz] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent);
}

.topbar-page[b-sk3444qbkz] {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
}

.source-badge[b-sk3444qbkz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--ink-soft);
    background: linear-gradient(170deg, #ffffff, #f2f0e4);
    border: 1px solid var(--line);
    padding: .42rem .85rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 45, 28, .08);
    transition: color .15s, border-color .15s, transform .15s, box-shadow .15s;
}

    .source-badge:hover[b-sk3444qbkz] {
        text-decoration: none;
        color: var(--accent-strong);
        border-color: var(--accent);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 12px -5px var(--accent-glow);
    }

.content[b-sk3444qbkz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* min-width: 0 -> Flex-Items duerfen unter ihre Inhaltsbreite schrumpfen,
       sonst sprengen Diagramme oder andere breite Inhalte den Viewport
       (verursacht mobil horizontalen Scroll). */
    min-width: 0;
    /* zusaetzlich: ueberhaengende Inhalte hart clippen. Da die Bottom-Nav
       (.nav) in der .sidebar liegt (Geschwister, nicht Nachfahre), bricht
       das hier sicher kein position:fixed. Funktioniert auf allen Browsern. */
    overflow-x: hidden;
    padding: 38px 32px 56px;
}

    /* Hinweis: die Regel ".content > * { min-width: 0; max-width: 100% }"
       ist global in wwwroot/app.css definiert. Scoped CSS hier wuerde nicht
       greifen, weil die Page-Kinder (z. B. .dash) ein anderes Blazor-Scope-
       Attribut tragen als die MainLayout-Komponente. */

/* ---- Mobil/Tablet: Sidebar verschwindet, Tab-Leiste unten am Bildschirm.
   Breakpoint synchron mit chart-shell (1080) -> ein konsistentes Layout
   statt Hybrid zwischen 820 und 1080. */
@media (max-width: 1080px) {
    .app[b-sk3444qbkz] {
        flex-direction: column;
    }

    /* Auf Mobil verschwindet die Sidebar visuell vollstaendig - die
       Tab-Leiste (.nav) liegt mit position:fixed bottom:0 und braucht ihren
       Sidebar-Container nicht zu sehen. Hier nur als unsichtbarer Wrapper.
       WICHTIG: backdrop-filter muss explizit raus - sonst macht .sidebar
       sich zum Bezugsrahmen fuer position:fixed-Nachfahren, und die Nav
       klebt am Boden der 0px-hohen Sidebar (also: unsichtbar) statt am
       Viewport-Boden. */
    .sidebar[b-sk3444qbkz] {
        position: static;
        width: 100%;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        overflow: visible;
        z-index: auto;
    }

    /* Topbar entfaellt - Markenleiste oben + Seitentitel im Inhalt genuegen */
    .topbar[b-sk3444qbkz] {
        display: none;
    }

    /* unten Platz fuer die feste Tab-Leiste + das schwebende Mittellogo
       (das ragt ~32 px ueber die Leiste hinaus). */
    .content[b-sk3444qbkz] {
        padding: 22px 16px;
        padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .content[b-sk3444qbkz] {
        padding: 18px 12px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.brand[b-o76rjb0g9q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 18px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
}

/* Logo + Titel als Link zur Übersicht. */
.brand-link[b-o76rjb0g9q] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}

.brand-link:hover[b-o76rjb0g9q] {
    text-decoration: none;
}

/* Einklapp-Knopf sitzt in derselben Zeile wie Logo + Titel, rechts ausgerichtet.
   Im eingeklappten Modus rueckt der Knopf darunter (siehe app.css). */
.brand .sidebar-toggle[b-o76rjb0g9q] {
    margin-left: auto;
    flex-shrink: 0;
}

.brand-mark[b-o76rjb0g9q] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Logo bringt seinen eigenen Kreis mit - kein zusaetzlicher Sockel. */
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.brand-logo[b-o76rjb0g9q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(168, 90, 63, .22));
}

.brand-meta[b-o76rjb0g9q] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-name[b-o76rjb0g9q] {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.4rem;
    letter-spacing: .03em;
}

.brand-tag[b-o76rjb0g9q] {
    color: var(--ink-faint);
    font-size: .74rem;
}

.nav[b-o76rjb0g9q] {
    display: flex;
    flex-direction: column;
    padding: 4px 12px 0;
    gap: 3px;
}

.nav-section[b-o76rjb0g9q] {
    color: var(--ink-faint);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 10px 10px 6px;
}

/* ::deep, da das <a> aus der NavLink-Komponente die CSS-Isolation nicht erbt */
.nav[b-o76rjb0g9q]  .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--ink-soft);
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .nav[b-o76rjb0g9q]  .nav-link:hover {
        background: var(--accent-soft);
        color: var(--accent-strong);
        text-decoration: none;
    }

    .nav[b-o76rjb0g9q]  .nav-link.active {
        color: #fff;
        background: var(--gloss-green);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -8px 13px -9px rgba(0, 0, 0, .34), 0 6px 15px -6px var(--accent-glow);
    }

        .nav[b-o76rjb0g9q]  .nav-link.active:hover {
            color: #fff;
        }

.nav[b-o76rjb0g9q]  .nav-label {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.16rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.nav[b-o76rjb0g9q]  .nav-soon {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-soft);
    background: rgba(40, 45, 28, .07);
    padding: 2px 7px;
    border-radius: 999px;
}

/* "Neu"-Tag: weisse Plakette - hebt sich auch auf dem aktiven (gruenen) Eintrag ab */
.nav[b-o76rjb0g9q]  .nav-new {
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-strong);
    background: #ffffff;
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px -2px rgba(40, 45, 28, .35);
    animation: navNewPulse-b-o76rjb0g9q 2.1s ease-in-out infinite;
}

@keyframes navNewPulse-b-o76rjb0g9q {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.09);
    }
}

    .nav[b-o76rjb0g9q]  .nav-link.is-soon {
        color: var(--ink-faint);
        cursor: default;
    }

        .nav[b-o76rjb0g9q]  .nav-link.is-soon:hover {
            background: transparent;
            color: var(--ink-faint);
        }

.side-foot[b-o76rjb0g9q] {
    margin-top: auto;
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid var(--line-soft);
}

.side-foot-line[b-o76rjb0g9q] {
    color: var(--ink-soft);
    font-size: .8rem;
}

    .side-foot-line a[b-o76rjb0g9q] {
        color: var(--accent);
    }

.side-foot-sub[b-o76rjb0g9q] {
    color: var(--ink-faint);
    font-size: .72rem;
}

/* Mobile-Logo + Glasflaeche + Schatten: auf Desktop hart verstecken. */
.nav .mobile-logo[b-o76rjb0g9q],
.nav .nav-glass[b-o76rjb0g9q],
.nav .nav-shadow-wrap[b-o76rjb0g9q] {
    display: none;
}

/* ---- Mobil/Tablet: Sidebar verschwindet, Navigation als feste Tab-Leiste ----
   Breakpoint 1080px deckt iPad portrait/landscape und schmale Browser-Fenster
   ab - sorgt fuer konsistentes Mobile-Layout zusammen mit den Diagrammen,
   die ebenfalls bei 1080px einspaltig werden. */
@media (max-width: 1080px) {
    /* Marken-/Logoleiste auf Mobil komplett ausblenden - die Tab-Leiste
       unten ist die Navigation, oben soll nichts kleben. Branding macht
       die Seite ueber die page-title (H1) im Inhalt selbst. */
    .brand[b-o76rjb0g9q] {
        display: none;
    }

    /* Feste Tab-Leiste am unteren Bildschirmrand. Kompakte Hoehe; in der
       Mitte woelbt sich die Bar via SVG-Bezier-Kurve sanft nach oben, das
       Logo sitzt im Bump. */
    .nav[b-o76rjb0g9q] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
        /* Bar selbst transparent - die Glasflaeche liegt im .nav-glass-Element
           dahinter (eine einzige gemaskte Flaeche fuer Bar + Woelbung). */
        background: transparent;
        border-top: none;
        /* KEIN box-shadow hier - der wuerde rechteckig sein und eine flache
           Linie quer durch die Woelbung ziehen. Der Schatten kommt komplett
           vom gemaskten .nav-glass (folgt der ganzen Silhouette inkl. Bump). */
    }

    /* Gemeinsame Maske fuer Glas UND Schatten (gleiche Silhouette: Bar unten
       ueber volle Breite + mittige Woelbung oben). */
    .nav .nav-glass[b-o76rjb0g9q],
    .nav .nav-shadow[b-o76rjb0g9q] {
        display: block;
        pointer-events: none;
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='28' viewBox='0 0 150 28'%3E%3Cpath d='M0,28 C22.5,28 32.5,0 75,0 C117.5,0 127.5,28 150,28 Z' fill='%23000'/%3E%3C/svg%3E"),
            linear-gradient(#000, #000);
        -webkit-mask-position: center top, left bottom;
        -webkit-mask-size: 150px 28px, 100% calc(100% - 24px);
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='28' viewBox='0 0 150 28'%3E%3Cpath d='M0,28 C22.5,28 32.5,0 75,0 C117.5,0 127.5,28 150,28 Z' fill='%23000'/%3E%3C/svg%3E"),
            linear-gradient(#000, #000);
        mask-position: center top, left bottom;
        mask-size: 150px 28px, 100% calc(100% - 24px);
        mask-repeat: no-repeat, no-repeat;
    }

    /* Schatten-Wrapper: traegt den blur() (wirkt NACH der Maske des Kindes ->
       weiche, diffuse Kante). Sibling des Glases -> stoert dessen backdrop-
       filter nicht. Liegt hinter dem Glas. */
    .nav .nav-shadow-wrap[b-o76rjb0g9q] {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -26px;
        z-index: -1;
        pointer-events: none;
        filter: blur(11px);
    }

    .nav .nav-shadow[b-o76rjb0g9q] {
        position: absolute;
        inset: 0;
        background: rgba(110, 54, 42, .42);
        transform: translateY(-2px);
    }

    /* Glasflaeche: deutlich durchscheinend fuer sichtbaren Blur-Effekt. */
    .nav .nav-glass[b-o76rjb0g9q] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -26px;
        z-index: 0;
        background: rgba(252, 246, 241, .6);
        backdrop-filter: blur(24px) saturate(185%);
        -webkit-backdrop-filter: blur(24px) saturate(185%);
        /* Maske = Vereinigung aus: (1) Bump-Kurve im oberen 26px-Streifen,
           zentriert, feste Groesse; (2) Vollflaeche fuer den Bar-Bereich
           darunter. */
        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='28' viewBox='0 0 150 28'%3E%3Cpath d='M0,28 C22.5,28 32.5,0 75,0 C117.5,0 127.5,28 150,28 Z' fill='%23000'/%3E%3C/svg%3E"),
            linear-gradient(#000, #000);
        -webkit-mask-position: center top, left bottom;
        -webkit-mask-size: 150px 28px, 100% calc(100% - 24px);
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='28' viewBox='0 0 150 28'%3E%3Cpath d='M0,28 C22.5,28 32.5,0 75,0 C117.5,0 127.5,28 150,28 Z' fill='%23000'/%3E%3C/svg%3E"),
            linear-gradient(#000, #000);
        mask-position: center top, left bottom;
        mask-size: 150px 28px, 100% calc(100% - 24px);
        mask-repeat: no-repeat, no-repeat;
    }



    .nav-section[b-o76rjb0g9q] {
        display: none;
    }

    /* Mittiger Logo-Tab als 5. Spalte. Image wird via absolute Position
       exakt in den SVG-Bump zentriert, unabhaengig von der Bar-Hoehe. */
    .nav .mobile-logo[b-o76rjb0g9q] {
        position: relative;
        flex: 1;
        max-width: none;
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: 0;
        background: transparent;
        z-index: 2;
        overflow: visible;
    }

    .nav .mobile-logo .mobile-logo-img[b-o76rjb0g9q] {
        /* Absolut positioniert ueber dem Label - so kann das Bild groesser
           als der Tab-Bereich werden (Bulge nach oben) ohne den Tab-Layout
           in die Hoehe zu pumpen. Bottom = padding-bottom + label-Hoehe +
           Tab-Gap, damit das Bild bündig über dem Label sitzt und seine
           Unterkante mit der Icon-Unterkante korrespondiert. */
        position: absolute;
        left: 50%;
        bottom: calc(6px + .58rem * 1.1 + 3px);
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        background: transparent;
        box-shadow: none;
        transition: filter .15s ease, transform .12s ease;
        z-index: 1;
        pointer-events: none;
    }

    .nav .mobile-logo:hover .mobile-logo-img[b-o76rjb0g9q] {
        filter: brightness(1.04);
    }

    .nav .mobile-logo:active .mobile-logo-img[b-o76rjb0g9q] {
        transform: translateX(-50%) scale(.96);
    }

    /* Active-State fuer Logo-Label (Logo aktiv wenn Route "/") - dunkler. */
    .nav .mobile-logo:hover .mobile-logo-label[b-o76rjb0g9q] {
        color: var(--ink);
    }

    .nav[b-o76rjb0g9q]  .nav-link {
        position: relative;
        flex: 1;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        max-width: none;
        padding: 6px 2px 6px;
        border-radius: 13px;
    }

        .nav[b-o76rjb0g9q]  .nav-link:hover {
            background: transparent;
            color: var(--ink-soft);
        }

    .nav[b-o76rjb0g9q]  .nav-ico {
        width: 26px;
        height: 26px;
    }

    /* Label klein unter dem Icon. Unterkante aller Labels (Tabs + Logo) liegt
       auf gemeinsamer Linie - der Logo-Anker hat seine eigene .mobile-logo-label
       mit identischen Stil-Tokens. */
    .nav[b-o76rjb0g9q]  .nav-label,
    .nav .mobile-logo-label[b-o76rjb0g9q] {
        display: block;
        font-size: .58rem;
        font-weight: 600;
        color: var(--ink-soft);
        line-height: 1.1;
        letter-spacing: .02em;
        text-transform: none;
        text-align: center;
    }

    .nav[b-o76rjb0g9q]  .nav-link.active .nav-label {
        color: var(--accent-strong);
    }

    /* "bald"-Badge auf Mobil weiterhin verstecken (nimmt sonst zu viel Platz
       im engen Tab) - der Tab ist via Opacity ohnehin als disabled markiert. */
    .nav[b-o76rjb0g9q]  .nav-soon {
        display: none;
    }

    /* aktiver Tab: Akzentfarbe + schmaler Indikatorstrich, keine Vollflaeche */
    .nav[b-o76rjb0g9q]  .nav-link.active {
        color: var(--accent-strong);
        background: transparent;
        box-shadow: none;
    }

        .nav[b-o76rjb0g9q]  .nav-link.active:hover {
            color: var(--accent-strong);
        }

    /* Indikator-Strich auf JEDEM Tab vorbereitet, standardmaessig unsichtbar.
       Beim Aktivieren faden + skalieren wir ihn weich ein - sanfter Wechsel. */
    .nav[b-o76rjb0g9q]  .nav-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center top;
        width: 30px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--gloss-green);
        opacity: 0;
        transition: opacity .25s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
    }

    .nav[b-o76rjb0g9q]  .nav-link.active::before {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }

    .nav[b-o76rjb0g9q]  .nav-link {
        transition: color .22s ease;
    }

    /* Übersicht-Tab im Mobile-Menü ausblenden - dort ist die Übersicht das
       mittige Logo, ein zusaetzlicher Tab waere doppelt. */
    .nav[b-o76rjb0g9q]  .nav-link-overview {
        display: none;
    }

    /* "bald"-Eintraege sichtbar, aber gedaempft + nicht klickbar. */
    .nav[b-o76rjb0g9q]  .nav-link.is-soon {
        display: flex;
        opacity: .38;
        cursor: default;
    }

        .nav[b-o76rjb0g9q]  .nav-link.is-soon:hover {
            opacity: .38;
        }

    /* "Neu"-Tag als kleine Ecke am Tab-Icon */
    .nav[b-o76rjb0g9q]  .nav-new {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: 8px;
        font-size: .48rem;
        padding: 1px 5px;
        animation: none;
    }

    .side-foot[b-o76rjb0g9q] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Sichtbarkeits-Logik der einzelnen Zustaende */
.components-reconnect-first-attempt-visible[b-civ6mt7utg],
.components-reconnect-repeated-attempt-visible[b-civ6mt7utg],
.components-reconnect-failed-visible[b-civ6mt7utg],
.components-pause-visible[b-civ6mt7utg],
.components-resume-failed-visible[b-civ6mt7utg],
.components-rejoining-animation[b-civ6mt7utg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-retrying[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-failed[b-civ6mt7utg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-civ6mt7utg] {
    display: block;
}

/* Glaskarte im Stil der App (Glassmorphism + Terracotta-Akzent) */
#components-reconnect-modal[b-civ6mt7utg] {
    box-sizing: border-box;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    margin: auto;
    padding: 30px 30px 26px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: linear-gradient(157deg, rgba(255, 255, 255, .92), rgba(255, 253, 244, .64) 72%);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    opacity: 0;
    transition: display .5s allow-discrete, overlay .5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-civ6mt7utg .5s both;
}

    #components-reconnect-modal[open][b-civ6mt7utg] {
        animation: components-reconnect-modal-slideUp-b-civ6mt7utg 1.2s cubic-bezier(.05, .89, .25, 1.02) .2s,
                   components-reconnect-modal-fadeInOpacity-b-civ6mt7utg .45s ease-in-out .2s;
        animation-fill-mode: both;
    }

#components-reconnect-modal[b-civ6mt7utg]::backdrop {
    background-color: rgba(30, 28, 22, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: components-reconnect-modal-fadeInOpacity-b-civ6mt7utg .45s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-civ6mt7utg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-civ6mt7utg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-civ6mt7utg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-civ6mt7utg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.05rem;
}

#components-reconnect-modal p[b-civ6mt7utg] {
    margin: 0;
    text-align: center;
    line-height: 1.5;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* Hauptmeldung kraeftiger - in der Display-Schrift der App */
#components-reconnect-modal .components-reconnect-first-attempt-visible[b-civ6mt7utg],
#components-reconnect-modal .components-pause-visible[b-civ6mt7utg] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

#components-seconds-to-next-attempt[b-civ6mt7utg] {
    font-weight: 700;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}

/* Schaltflaeche im Terracotta-Stil der App */
#components-reconnect-modal button[b-civ6mt7utg] {
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: #fff;
    background: var(--gloss-green);
    border: 0;
    padding: .52rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px -3px var(--accent-glow);
    transition: filter .15s, transform .12s;
}

    #components-reconnect-modal button:hover[b-civ6mt7utg] {
        filter: brightness(1.07);
        transform: translateY(-1px);
    }

    #components-reconnect-modal button:active[b-civ6mt7utg] {
        transform: translateY(0) scale(.98);
    }

/* Lade-Animation - konzentrische Ringe in Terracotta */
.components-rejoining-animation[b-civ6mt7utg] {
    position: relative;
    width: 72px;
    height: 72px;
}

    .components-rejoining-animation div[b-civ6mt7utg] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-civ6mt7utg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-civ6mt7utg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-civ6mt7utg {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* .dash + @keyframes dashIn sind GLOBAL in wwwroot/app.css definiert -
   so haben Bund, Laender, Regierung garantiert dieselbe Container-Breite. */

.dash-head[b-5d6beki1qq] {
    position: relative;
    margin-bottom: 28px;
}

.page-title[b-5d6beki1qq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    text-transform: uppercase;
    line-height: 1.03;
    letter-spacing: .02em;
}

.pt-a[b-5d6beki1qq] {
    font-size: 2.5rem;
    color: var(--ink);
}

.pt-b[b-5d6beki1qq] {
    font-size: 4rem;
    color: var(--accent-strong);
}

.dash-lede[b-5d6beki1qq] {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 62ch;
}

/* Glossy Glaskarte */
.card[b-5d6beki1qq] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
}

.state-card[b-5d6beki1qq] {
    padding: 52px;
    text-align: center;
    color: var(--ink-soft);
}

/* Metastrip */
.metastrip[b-5d6beki1qq] {
    display: flex;
    gap: 13px;
    margin-bottom: 22px;
}

.meta[b-5d6beki1qq] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 17px;
    background: linear-gradient(157deg, rgba(255, 255, 255, .86), rgba(255, 253, 244, .56) 75%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3d);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .meta:hover[b-5d6beki1qq] {
        transform: translateY(-3px);
        box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .92), 0 4px 11px rgba(40, 45, 28, .08), 0 30px 50px -24px rgba(38, 50, 28, .52);
    }

.meta-ico[b-5d6beki1qq] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .85), inset 0 -6px 10px -7px rgba(var(--accent-box-shade), .45), 0 5px 11px -5px rgba(var(--accent-box-shade), .3);
}

.meta-txt[b-5d6beki1qq] {
    display: flex;
    flex-direction: column;
    line-height: 1.22;
}

    .meta-txt strong[b-5d6beki1qq] {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--ink);
    }

    .meta-txt span[b-5d6beki1qq] {
        font-size: .78rem;
        color: var(--ink-soft);
    }

/* Zeitraum-KPI: laengerer Text - kompakter gesetzt, nicht umbrechen */
.meta-range .meta-txt strong[b-5d6beki1qq] {
    font-size: 1.15rem;
    white-space: nowrap;
}

/* Steuerelemente-Panel */
.controlpanel[b-5d6beki1qq] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
    margin-bottom: 40px;
}

.control-line[b-5d6beki1qq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 0;
    padding: 14px 18px;
}

    /* Zeile 1: Zeitraum (Inhaltsbreite) + Trend (fuellt den Rest) */
    .control-line.control-line-top[b-5d6beki1qq] {
        display: grid;
        grid-template-columns: auto 1fr;
        min-width: 0;
    }

    .control-line + .control-line[b-5d6beki1qq] {
        border-top: 1px solid var(--line-soft);
    }

.control-group[b-5d6beki1qq] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .control-group.control-divider[b-5d6beki1qq] {
        display: grid;
        grid-template-columns: auto 1fr;
        min-width: 0;
        margin-left: 26px;
        padding-left: 26px;
        border-left: 1px solid var(--line-soft);
    }

    .control-group.group-institute[b-5d6beki1qq] {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

.ctl-label[b-5d6beki1qq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 78px;
    flex-shrink: 0;
    padding-top: 1px;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
}

/* Segmentierte Auswahl - eingelassene Rille mit gleitendem Knopf */
/* Segment-Button-Labels: lang fuer Desktop, kurz fuer Mobile. Wechsel
   passiert per Media-Query weiter unten. */
.seg-short[b-5d6beki1qq] {
    display: none;
}

.segment[b-5d6beki1qq] {
    position: relative;
    display: inline-grid;
    gap: 0;
    padding: 3px;
    background: linear-gradient(180deg, rgba(39, 42, 32, .1), rgba(39, 42, 32, .035));
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(39, 42, 32, .1);
}

.segment-stretch[b-5d6beki1qq] {
    display: grid;
    width: 100%;
}

/* der gleitende, gruene Knopf */
.seg-slider[b-5d6beki1qq] {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--n));
    border-radius: 999px;
    background: var(--gloss-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -6px 10px -6px rgba(0, 0, 0, .32), 0 4px 10px -3px var(--accent-glow);
    transform: translateX(calc(var(--idx) * 100%));
    transition: transform .3s cubic-bezier(.5, .05, .2, 1);
}

.seg[b-5d6beki1qq] {
    position: relative;
    z-index: 1;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    padding: .42rem .9rem;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color .2s;
}

    .seg:hover[b-5d6beki1qq] {
        color: var(--accent-strong);
    }

.seg-on[b-5d6beki1qq],
.seg-on:hover[b-5d6beki1qq] {
    color: #fff;
}

/* Mobile-Ersatz fuer die Segment-Auswahl (per Media Query eingeblendet) */
.ctl-select[b-5d6beki1qq] {
    display: none;
    flex: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    background-color: #fffdf7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%239a4c30' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: .6rem 2.5rem .6rem 1rem;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 45, 28, .06);
    transition: border-color .15s, box-shadow .15s;
}

    .ctl-select:hover[b-5d6beki1qq] {
        border-color: var(--accent);
    }

    .ctl-select:focus-visible[b-5d6beki1qq] {
        outline: none;
        border-color: var(--accent-strong);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 3px var(--accent-glow);
    }

.chips[b-5d6beki1qq] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    /* Feste Hoehe knapp ueber Chip-Hoehe: genug Platz fuer die Scrollbar im
       freien Raum, aber ohne unnoetige vertikale Luft. Vertikal zentriert,
       damit die Chips auf einer Linie mit den Segmenten daneben sitzen. */
    height: 40px;
    padding-top: 0;
    overflow-x: auto;
    /* y hart aus: verhindert eine unsinnige vertikale Scrollbar,
       sobald die horizontale Scrollbar erscheint */
    overflow-y: hidden;
    /* Weiche Rand-Verlaeufe: blenden Inhalt am Rand sanft aus, sobald dort
       noch etwas aus dem Bild scrollt. --fade-l / --fade-r setzt JS auf 0/1. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 30px), #000 calc(100% - var(--fade-r, 0) * 30px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 30px), #000 calc(100% - var(--fade-r, 0) * 30px), transparent 100%);
    transition: --fade-l .22s ease, --fade-r .22s ease;
}

.chip[b-5d6beki1qq] {
    flex-shrink: 0;
    font-family: inherit;
    font-size: .84rem;
    border: 1px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    color: var(--ink-soft);
    padding: .4rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(40, 45, 28, .06);
    transition: border-color .14s, color .14s, box-shadow .14s;
}

    .chip:hover[b-5d6beki1qq] {
        border-color: var(--accent);
        color: var(--accent-strong);
    }

    .chip.on[b-5d6beki1qq] {
        color: #fff;
        border-color: var(--accent-strong);
        background: var(--gloss-green);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -6px 10px -6px rgba(0, 0, 0, .3), 0 4px 10px -3px var(--accent-glow);
    }

.chip-n[b-5d6beki1qq] {
    font-size: .71rem;
    background: rgba(39, 42, 32, .09);
    padding: 1px 6px;
    border-radius: 999px;
}

.chip.on .chip-n[b-5d6beki1qq] {
    background: rgba(255, 255, 255, .26);
}

/* Abschnitts-Kopf */
.section-head[b-5d6beki1qq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.section-ico[b-5d6beki1qq] {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, .85), inset 0 -5px 9px -7px rgba(var(--accent-box-shade), .45), 0 4px 9px -5px rgba(var(--accent-box-shade), .3);
}

.section-head h2[b-5d6beki1qq] {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.section-count[b-5d6beki1qq] {
    font-size: .74rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: linear-gradient(170deg, #ffffff, #f1efe3);
    border: 1px solid var(--line);
    padding: 2px 9px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Balkendiagramm */
.chart-section[b-5d6beki1qq] {
    margin-bottom: 44px;
}

.chart-card[b-5d6beki1qq] {
    position: relative;
    z-index: 2;
    padding: 28px 30px 18px;
}

/* Teilen-Knopf oben rechts im Wahltrend-Element */
.chart-share[b-5d6beki1qq] {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 5;
}

/* Kopfzeile: WAHLTREND links, KOALITIONSRECHNER rechts - gleiche Hoehe */
/* Section-Head-Zeile fluchtet exakt mit den Karten darunter (chart-shell):
   eingeklappt nimmt die Wahltrend-Ueberschrift 100 % ein und der
   Koalitionsrechner-Titel ist komplett ausgeblendet. Beim Aufklappen
   teilen sich die Titel im selben 60/40-Verhaeltnis wie die Karten. */
.section-head-row[b-5d6beki1qq] {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    transition: gap .34s cubic-bezier(.5, .05, .2, 1) .22s;
}

.section-head-row.split[b-5d6beki1qq] {
    gap: 24px;
    transition: gap .45s cubic-bezier(.5, .05, .2, 1) 0s;
}

.section-head-row > .section-head:not(.coa-section-head)[b-5d6beki1qq] {
    flex: 1 1 100%;
    min-width: 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1);
}

.section-head-row.split > .section-head:not(.coa-section-head)[b-5d6beki1qq] {
    flex-basis: 60%;
}

.coa-section-head[b-5d6beki1qq] {
    flex: 0 0 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                opacity .2s ease;
}

.section-head-row.split .coa-section-head[b-5d6beki1qq] {
    flex: 1 1 calc(40% - 24px);
    opacity: 1;
    pointer-events: auto;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                opacity .4s ease .25s;
}

/* Mobil: der obere Koalitionsrechner-Titel (in der Headerzeile neben
   Wahltrend) ist redundant. Stattdessen erscheint .coa-head-inline
   direkt ueber der Koalitions-Karte - aber nur, wenn aufgeklappt. */
.coa-head-inline[b-5d6beki1qq] {
    display: none;
}

@media (max-width: 1280px) {
    .coa-section-head[b-5d6beki1qq],
    .section-head-row.split .coa-section-head[b-5d6beki1qq] {
        display: none;
    }

    .chart-shell.split .coa-head-inline[b-5d6beki1qq] {
        display: flex;
        margin: 2px 0 4px;
    }
}

/* Wahltrend + ausklappbarer Koalitionsrechner nebeneinander.
   Flexbox statt Grid: garantiert die volle Breite der Chart-Spalte beim
   Einklappen. Mit Grid + minmax(0, 1fr) hat manche Browser-Heuristik die
   Spur nicht aufgezogen, weil die zweite Spalte intern noch min-content
   ihrer Inhalte beanspruchen wollte. Hier ist die Mathematik eindeutig:
   width = 100% des Containers, Children teilen sich diese 100% per
   flex-basis. */
.chart-shell[b-5d6beki1qq] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    transition: gap .34s cubic-bezier(.5, .05, .2, 1) .22s;
}

/* Ausgeklappt: 60/40-Split - Chart wird nur ein wenig schmaler. */
.chart-shell.split[b-5d6beki1qq] {
    gap: 24px;
    transition: gap .45s cubic-bezier(.5, .05, .2, 1) 0s;
}

/* Chart-Karte: standardmaessig die volle Breite, beim Split nur noch 60%. */
.chart-shell > .chart-card[b-5d6beki1qq] {
    flex: 1 1 100%;
    min-width: 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1);
}

.chart-shell.split > .chart-card[b-5d6beki1qq] {
    flex-basis: 60%;
}

.coalition-card[b-5d6beki1qq] {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    /* eingeklappt: flex-basis 0 + ohne grow -> tatsaechlich 0px breit, kein
       min-content der Inhalte kann die Spalte aufpumpen */
    flex: 0 0 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                border-color .35s ease,
                box-shadow .35s ease;
}

.chart-shell.split .coalition-card[b-5d6beki1qq] {
    flex: 1 1 calc(40% - 24px);
}

/* eingeklappt unsichtbar - kein Rahmen-/Schattenstrich hinter dem Knopf */
.chart-shell:not(.split) .coalition-card[b-5d6beki1qq] {
    border-color: transparent;
    box-shadow: none;
}

/* ---- Tablet/Mobil: chart-shell vertikal stacken. Breakpoint auf 1280px
   hochgezogen - dazwischen war das Wahltrend-Diagramm bei aufgeklapptem
   Rechner viel zu schmal. */
@media (max-width: 1280px) {
    .chart-shell[b-5d6beki1qq] {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .chart-shell > .chart-card[b-5d6beki1qq],
    .chart-shell.split > .chart-card[b-5d6beki1qq] {
        flex: none;
        width: 100%;
        flex-basis: auto;
    }

    /* eingeklappt: Koalitionskarte komplett aus dem Fluss - keine Lücke */
    .chart-shell .coalition-card[b-5d6beki1qq] {
        flex: none;
        width: 100%;
        display: none;
    }

    .chart-shell.split .coalition-card[b-5d6beki1qq] {
        display: block;
        flex: none;
        flex-basis: auto;
        margin-top: 16px;
    }
}

/* laengliche Ausklapp-Schaltflaeche am rechten Rand des Wahltrends */
.coalition-toggle[b-5d6beki1qq] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 6;
    width: 38px;
    /* Hoehe passt sich dem Text an - der vertikale Schriftzug laeuft so nie ueber */
    height: auto;
    padding: 26px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: none;
    border-radius: 13px;
    background: var(--gloss-green);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .4), inset 0 -11px 17px -13px rgba(0, 0, 0, .4), 0 8px 18px -6px var(--accent-glow);
    transition: filter .18s ease, box-shadow .18s ease;
}

    .coalition-toggle:hover[b-5d6beki1qq] {
        filter: brightness(1.07);
        box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .4), inset 0 -11px 17px -13px rgba(0, 0, 0, .4), 0 12px 24px -6px var(--accent-glow);
    }

    .coalition-toggle:active[b-5d6beki1qq] {
        transform: translate(50%, -50%) scale(.97);
    }

.ct-label[b-5d6beki1qq] {
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.ct-arrow[b-5d6beki1qq] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* kompakte, aber sauber formatierte Balken, solange der Rechner offen ist.
   ::deep -> reicht in die WahltrendChart-Komponente hinein. */
.chart-shell.split[b-5d6beki1qq]  .plot-row,
.chart-shell.split[b-5d6beki1qq]  .base-row {
    gap: 5px;
}

.chart-shell.split[b-5d6beki1qq]  .bar-col,
.chart-shell.split[b-5d6beki1qq]  .bar-base {
    min-width: 40px;
}

.chart-shell.split[b-5d6beki1qq]  .bar-base {
    padding: 7px 3px 8px;
}

.chart-shell.split[b-5d6beki1qq]  .bar-value {
    font-size: .72rem;
}

.chart-shell.split[b-5d6beki1qq]  .bar-value .pct {
    font-size: .54rem;
}

.chart-shell.split[b-5d6beki1qq]  .bar-name {
    font-size: .69rem;
    letter-spacing: -.01em;
}

.chart-shell.split[b-5d6beki1qq]  .trend {
    font-size: .64rem;
    padding: 2px 6px;
    gap: 2px;
}

.chart-shell.split[b-5d6beki1qq]  .trend-arrow {
    font-size: .5rem;
}

/* schmale Ansicht: Koalitionsrechner klappt unter dem Wahltrend nach unten auf */
/* Zwischenbereich 1081-1280px: Sidebar ist sichtbar, aber Content schon
   knapp - die Filterzeile (Zeitraum + Trend) wuerde sich gegenseitig aus
   der Karte druecken. Stackt deshalb in zwei eigene Zeilen. */
@media (min-width: 1081px) and (max-width: 1280px) {
    .control-line.control-line-top[b-5d6beki1qq] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .control-group.control-divider[b-5d6beki1qq] {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--line-soft);
        padding-top: 10px;
    }
}

@media (max-width: 1280px) {
    .chart-shell[b-5d6beki1qq] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 0fr;
        column-gap: 0;
        row-gap: 0;
        transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1),
                    row-gap .42s cubic-bezier(.4, 0, .2, 1);
    }

        .chart-shell.split[b-5d6beki1qq] {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            row-gap: 16px;
        }

    .coalition-card[b-5d6beki1qq] {
        overflow: hidden;
        min-height: 0;
    }

    /* der Rechner-Inhalt liegt sonst absolut (Hoehe vom Wahltrend) - mobil
       muss er im Fluss stehen, damit die Aufklapp-Animation echte Hoehe hat */
    .coalition-card[b-5d6beki1qq]  .coa {
        position: static;
        min-width: 0;
    }

    /* Umschalter: breiter Knopf am unteren Rand des Wahltrends */
    .coalition-toggle[b-5d6beki1qq] {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 9px;
        padding: 13px;
        margin-top: 16px;
        border-radius: 13px;
    }

        .coalition-toggle:active[b-5d6beki1qq] {
            transform: scale(.99);
        }

    .ct-label[b-5d6beki1qq] {
        writing-mode: horizontal-tb;
    }

    .ct-arrow[b-5d6beki1qq] {
        transform: rotate(90deg);
    }
}

/* klassische vertikale Saeulen - Plot-Reihe oben, Sockel-Reihe darunter */
.chart[b-5d6beki1qq] {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* zieht sich leicht in den Kartenrand, damit die "5 %"-Marken
       ausserhalb der Balken Platz finden, ohne abgeschnitten zu werden */
    margin: 0 -10px;
    padding: 0 10px;
    --plot-h: 300px;
}

.plot-row[b-5d6beki1qq] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: var(--plot-h);
}

.base-row[b-5d6beki1qq] {
    display: flex;
    gap: 8px;
    /* leichte Ueberlappung: der Sockel deckt den Balkenfuss ab und steht
       damit sichtbar vor dem Balken */
    margin-top: -3px;
}

.bar-col[b-5d6beki1qq] {
    flex: 1;
    min-width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* 5-%-Huerdenlinie ueber die gesamte Plotbreite */
.hurdle[b-5d6beki1qq] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hf, 0) * 100%);
    height: 0;
    z-index: 2;
    pointer-events: none;
}

/* weisse, gestrichelte Linie - der dunkle Schlagschatten macht sie
   auf hellem Hintergrund wie auf den Balken gut sichtbar */
.hurdle-line[b-5d6beki1qq] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 2px dashed #ffffff;
    filter: drop-shadow(0 1px 2px rgba(16, 18, 12, .6));
}

/* maximal dezente "5 %"-Markierung, knapp ausserhalb der Balken */
.hurdle-mark[b-5d6beki1qq] {
    position: absolute;
    bottom: 2px;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-faint);
}

.hurdle-mark-l[b-5d6beki1qq] {
    left: -8px;
}

.hurdle-mark-r[b-5d6beki1qq] {
    right: -8px;
}

.bar-value[b-5d6beki1qq] {
    /* ueber der Huerdenlinie, damit kleine Werte nicht unter den Strichen untergehen */
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .bar-value .pct[b-5d6beki1qq] {
        font-size: .72rem;
        color: var(--ink-faint);
        font-weight: 600;
    }

/* flache, moderne Saeule - waechst von unten nach oben */
.bar-fill[b-5d6beki1qq] {
    flex-shrink: 0;
    width: 78%;
    max-width: 118px;
    height: var(--h);
    min-height: 3px;
    background: var(--c);
    border-radius: 9px 9px 0 0;
    transition: height .6s cubic-bezier(.34, .8, .3, 1);
    animation: barGrow-b-5d6beki1qq .85s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: var(--delay);
}

@keyframes barGrow-b-5d6beki1qq {
    from {
        height: 0;
    }

    to {
        height: var(--h);
    }
}

/* Sockel unter dem Balken - leicht graeulicher Tint der Parteifarbe,
   damit er klar als eigenes Element und nicht als Teil des Balkens liest */
.bar-base[b-5d6beki1qq] {
    flex: 1;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 9px;
    border-radius: 9px;
    /* kraeftige, abgedunkelte Parteifarbe - traegt weisse Schrift */
    background: #1c1e14;
    background: color-mix(in srgb, var(--c, #6b6e5e) 60%, #121309);
    /* klare Kante zum Balken: scharfe dunkle Linie + heller Saum darunter,
       dazu Schlagschatten nach unten fuer den 3D-Sockel */
    box-shadow: 0 -2px 0 rgba(6, 8, 4, .6),
                inset 0 2.5px 0 rgba(255, 255, 255, .28),
                0 9px 16px -7px rgba(12, 14, 8, .5);
}

.bar-name[b-5d6beki1qq] {
    font-weight: 600;
    font-size: .9rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    text-align: center;
    white-space: nowrap;
}

.bar-trend[b-5d6beki1qq] {
    display: flex;
    justify-content: center;
}

.trend[b-5d6beki1qq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: trendPop-b-5d6beki1qq .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes trendPop-b-5d6beki1qq {
    0% {
        opacity: .25;
        transform: scale(.78);
    }

    55% {
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.trend-arrow[b-5d6beki1qq] {
    font-size: .58rem;
    line-height: 1;
}

.trend-up[b-5d6beki1qq] {
    color: #fff;
    background: linear-gradient(165deg, #57ad6c, #43925a 55%, #327846);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(67, 146, 90, .55);
}

.trend-down[b-5d6beki1qq] {
    color: #fff;
    background: linear-gradient(165deg, #db6c54, #c8503a 55%, #ac4029);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(200, 80, 58, .5);
}

.trend-flat[b-5d6beki1qq] {
    color: var(--ink-soft);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(40, 45, 28, .08);
}

.trend-new[b-5d6beki1qq] {
    color: var(--ink-faint);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.chart-foot[b-5d6beki1qq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: .78rem;
    color: var(--ink-faint);
}

    .chart-foot .foot-spacer[b-5d6beki1qq] {
        flex: 1;
    }

    .chart-foot a[b-5d6beki1qq] {
        color: var(--ink-soft);
    }

    .chart-foot .dot-sep[b-5d6beki1qq] {
        opacity: .55;
    }

/* Umfragen-Liste */
.matrix-section[b-5d6beki1qq] {
    margin-bottom: 8px;
}

.matrix-card[b-5d6beki1qq] {
    padding: 0;
    overflow: hidden;
}

/* Detail-Tooltip bei Tabellenzeilen-Hover */
.row-tip[b-5d6beki1qq] {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    max-width: 320px;
    padding: 11px 14px 12px;
    background: var(--glass-strong);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: left .12s ease, top .12s ease;
    animation: tipIn-b-5d6beki1qq .14s ease-out;
}

@keyframes tipIn-b-5d6beki1qq {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.tip-head[b-5d6beki1qq] {
    font-weight: 600;
    font-size: .86rem;
    color: var(--ink);
}

.tip-period[b-5d6beki1qq] {
    margin-top: 3px;
    font-size: .78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.tip-method[b-5d6beki1qq] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tip-label[b-5d6beki1qq] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    padding: 3px 7px;
    border-radius: 6px;
}

.tip-method-val[b-5d6beki1qq] {
    font-size: .8rem;
    color: var(--ink);
}

/* Balken-Mindestbreiten frueh aufheben - sonst sprengen sie zwischen
   721 und 1080px (iPad portrait/landscape, schmale Browserfenster) die
   Karte, obwohl die App schon im Mobil-Layout ist. */
@media (max-width: 1080px) {
    .chart-shell.split[b-5d6beki1qq]  .bar-col,
    .chart-shell.split[b-5d6beki1qq]  .bar-base,
    .chart-shell[b-5d6beki1qq]  .bar-col,
    .chart-shell[b-5d6beki1qq]  .bar-base {
        min-width: 0;
    }
}

/* Mobil-Layout greift schon ab 1080px (synchron mit der Sidebar/TabNav-
   Umschaltung). Sonst geraten Trend- und Zeitraum-Segment zwischen 721 und
   1080px in einen Konflikt, weil App-Navigation schon mobil ist, die Filter
   aber noch im Desktop-Modus. */
@media (max-width: 1080px) {
    /* KPIs schon hier einzeilig kompakt - 3 gleiche Karten nebeneinander */
    .metastrip[b-5d6beki1qq] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .meta[b-5d6beki1qq] {
        min-width: 0;
        min-height: 68px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        text-align: center;
    }

    .meta-ico[b-5d6beki1qq] {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .meta-txt[b-5d6beki1qq] {
        align-items: center;
        line-height: 1.1;
        gap: 1px;
        min-height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .meta-txt strong[b-5d6beki1qq] {
        font-size: .72rem;
        white-space: nowrap;
        letter-spacing: -.01em;
    }

    .meta-range .meta-txt strong[b-5d6beki1qq] {
        font-size: .62rem;
        letter-spacing: -.02em;
    }

    .meta-txt span[b-5d6beki1qq] {
        font-size: .58rem;
        line-height: 1.15;
    }

    /* Zeitraum und Trend untereinander - nebeneinander wird's auf schmalen
       Mobile-Schirmen zu eng (5 Segmente vs 2 Segmente konkurrieren). */
    .control-line.control-line-top[b-5d6beki1qq] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .control-line[b-5d6beki1qq] {
        padding: 8px 10px;
        gap: 6px;
    }

    /* alle Filtergruppen identisch aufgebaut -> kompakte Dropdowns */
    .control-group[b-5d6beki1qq],
    .control-group.control-divider[b-5d6beki1qq] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        min-width: 0;
    }

    .ctl-label[b-5d6beki1qq] {
        width: auto;
        flex-shrink: 0;
        font-size: .6rem;
    }

    .ctl-ico[b-5d6beki1qq] {
        display: none;
    }

    /* Segmente bleiben auch mobil sichtbar - konsistenter Premium-Picker
       statt nativer OS-Dropdown. Native Select wird mobil ausgeblendet. */
    .ctl-select[b-5d6beki1qq] {
        display: none;
    }

    .segment[b-5d6beki1qq] {
        flex: 1;
        min-width: 0;
        padding: 3px;
    }

    .segment .seg[b-5d6beki1qq] {
        font-size: .72rem;
        padding: 6px 2px;
        letter-spacing: -.01em;
        min-width: 0;
        white-space: nowrap;
        font-weight: 700;
    }

    /* Auf Mobil das Kurz-Label zeigen ("7 T", "3 M", ...) statt "1 Woche" etc. */
    .seg-long[b-5d6beki1qq] {
        display: none;
    }

    .seg-short[b-5d6beki1qq] {
        display: inline;
    }

    /* Rechte 5%-Marke auf Mobil ausblenden - sie kollidiert mit "Sonstige". */
    .chart-shell[b-5d6beki1qq]  .hurdle-mark-r {
        display: none;
    }

    /* Page-Title kompakter - das grosse "BUND/LÄNDER" wirkt sonst proportional zu massiv. */
    .pt-a[b-5d6beki1qq] { font-size: 1.5rem; }
    .pt-b[b-5d6beki1qq] { font-size: 2.4rem; }
    .dash-lede[b-5d6beki1qq] { font-size: .88rem; }

    /* Wahltrend passt komplett auf den Schirm - auch ausgeklappt. ::deep ->
       reicht in die WahltrendChart-Komponente. */
    .chart-shell.split[b-5d6beki1qq]  .bar-col,
    .chart-shell.split[b-5d6beki1qq]  .bar-base {
        min-width: 0;
    }

    .chart-shell[b-5d6beki1qq]  .chart {
        --plot-h: 230px;
    }

    .chart-shell[b-5d6beki1qq]  .plot-row,
    .chart-shell[b-5d6beki1qq]  .base-row {
        gap: 5px;
    }

    .chart-shell[b-5d6beki1qq]  .bar-col,
    .chart-shell[b-5d6beki1qq]  .bar-base {
        min-width: 0;
    }

    .chart-shell[b-5d6beki1qq]  .bar-base {
        padding: 7px 3px 8px;
    }

    .chart-shell[b-5d6beki1qq]  .bar-value {
        font-size: .82rem;
        margin-bottom: 5px;
    }

    .chart-shell[b-5d6beki1qq]  .bar-value .pct {
        font-size: .56rem;
    }

    .chart-shell[b-5d6beki1qq]  .bar-name {
        font-size: .7rem;
    }

    .chart-shell[b-5d6beki1qq]  .trend {
        font-size: .62rem;
        padding: 2px 6px;
        gap: 2px;
    }

    .chart-shell[b-5d6beki1qq]  .trend-arrow {
        font-size: .48rem;
    }

    /* eingeklappter Koalitionsrechner darf keinen Leerraum erzeugen */
    .chart-shell:not(.split) .coalition-card[b-5d6beki1qq] {
        display: none;
    }

    .chart-card[b-5d6beki1qq] {
        padding: 22px 16px 14px;
    }

    .pt-a[b-5d6beki1qq] {
        font-size: 1.7rem;
    }

    .pt-b[b-5d6beki1qq] {
        font-size: 2.7rem;
    }

    .section-head h2[b-5d6beki1qq] {
        font-size: 1.18rem;
    }
}

@media (max-width: 480px) {
    .pt-a[b-5d6beki1qq] {
        font-size: 1.5rem;
    }

    .pt-b[b-5d6beki1qq] {
        font-size: 2.2rem;
    }

    .dash-lede[b-5d6beki1qq] {
        font-size: .92rem;
    }

    /* Stat-Karten kompakt einzeilig - alle gleich hoch, Inhalt zentriert,
       damit Zahlen und Labels auf gleicher Hoehe stehen. */
    .metastrip[b-5d6beki1qq] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .meta[b-5d6beki1qq] {
        min-width: 0;
        min-height: 68px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        text-align: center;
    }

    .meta-ico[b-5d6beki1qq] {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .meta-txt[b-5d6beki1qq] {
        align-items: center;
        line-height: 1.1;
        gap: 1px;
        min-height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* einheitliche Schrift fuer alle KPIs - gleiche Hoehe, gleiche Wirkung */
    .meta-txt strong[b-5d6beki1qq] {
        font-size: .72rem;
        white-space: nowrap;
        letter-spacing: -.01em;
    }

    /* die Datumsspanne ist deutlich laenger - nochmal etwas kleiner damit
       sie nicht ueber die KPI-Karte hinausragt */
    .meta-range .meta-txt strong[b-5d6beki1qq] {
        font-size: .62rem;
        letter-spacing: -.02em;
    }

    .meta-txt span[b-5d6beki1qq] {
        font-size: .58rem;
        line-height: 1.15;
    }

    .control-line[b-5d6beki1qq] {
        padding: 12px 13px;
    }

    .chart-card[b-5d6beki1qq] {
        padding: 18px 13px 12px;
    }

    .section-ico[b-5d6beki1qq] {
        width: 29px;
        height: 29px;
    }

    .section-head h2[b-5d6beki1qq] {
        font-size: 1.05rem;
        letter-spacing: .03em;
    }
}
/* /Components/Pages/Laender.razor.rz.scp.css */
/* .dash + @keyframes dashIn sind GLOBAL in wwwroot/app.css definiert. */

.dash-head[b-comzn5b3cr] {
    position: relative;
    margin-bottom: 28px;
}

.page-title[b-comzn5b3cr] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    text-transform: uppercase;
    line-height: 1.03;
    letter-spacing: .02em;
}

.pt-a[b-comzn5b3cr] {
    font-size: 2.5rem;
    color: var(--ink);
}

.pt-b[b-comzn5b3cr] {
    font-size: 4rem;
    color: var(--accent-strong);
}

.dash-lede[b-comzn5b3cr] {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 62ch;
}

/* Glossy Glaskarte */
.card[b-comzn5b3cr] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
}

.state-card[b-comzn5b3cr] {
    padding: 52px;
    text-align: center;
    color: var(--ink-soft);
}

/* ===== Map-Section Header-Hinweis ===================================== */
.section-hint[b-comzn5b3cr] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--ink-soft);
}

.section-hint b[b-comzn5b3cr] {
    color: var(--ink);
    font-weight: 600;
}

.section-clear[b-comzn5b3cr] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .15s;
}

.section-clear:hover[b-comzn5b3cr] {
    color: var(--accent-strong);
    border-color: var(--accent);
    transform: scale(1.05);
}

/* ===== Map-Busy-Overlay (Blur + Spinner waehrend Reload) ============ */
.map-card[b-comzn5b3cr] {
    position: relative;
}

/* die Karte wird leicht weichgezeichnet und ausgegraut, bleibt aber
   sichtbar - keine harte Bild-Ueberblendung mehr. */
.map-card.is-busy > svg[b-comzn5b3cr],
.map-card.is-busy > .germany-map[b-comzn5b3cr],
.map-card.is-busy[b-comzn5b3cr]  svg {
    filter: blur(2px) saturate(.85);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease;
}

.map-busy-overlay[b-comzn5b3cr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
}

.map-busy-ring[b-comzn5b3cr] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(40, 50, 28, .12);
    border-top-color: var(--accent);
    animation: mapBusySpin-b-comzn5b3cr .8s linear infinite;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(4px);
}

@keyframes mapBusySpin-b-comzn5b3cr {
    to { transform: rotate(360deg); }
}

/* ===== Datenfenster-Picker direkt ueber der Karte ====================
   Der Zeitraum ist der einzige Filter, der die Kartenfarben veraendert.
   Daher sitzt er OBEN, klar sichtbar - "Karte zeigt Schnitt der letzten
   3 Monate" ist sofort lesbar. Beeinflusst auch den Wahltrend-Chart in
   der Detail-Sektion, doppelt wird er aber nirgends gezeigt. */
.map-window[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: linear-gradient(168deg, rgba(255,255,255,.7), rgba(255,253,244,.42));
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.map-window-label[b-comzn5b3cr] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: .02em;
}

.map-window-label[b-comzn5b3cr]  .ctl-ico {
    align-self: center;
}

.mwl-main[b-comzn5b3cr] {
    font-weight: 600;
}

.mwl-sub[b-comzn5b3cr] {
    font-size: .68rem;
    font-weight: 500;
    color: var(--ink-very-soft, rgba(60, 50, 30, .55));
    letter-spacing: 0;
}

@media (max-width: 720px) {
    .mwl-sub[b-comzn5b3cr] { display: none; }
}

.map-window-seg[b-comzn5b3cr] {
    flex: 1 1 360px;
    max-width: 460px;
}

.map-window-select[b-comzn5b3cr] {
    display: none;
}

/* ===== Quickpick unter der Karte ====================================== */
.map-quickpick[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 4px 0;
    font-size: .82rem;
    color: var(--ink-soft);
}

.map-quickpick label[b-comzn5b3cr] {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: .03em;
}

.map-quickpick .ctl-select[b-comzn5b3cr] {
    flex: 1;
    max-width: 320px;
    display: block;
}

/* ===== Detail-Sektion (Wahltrend + Sitzverteilung pro Land) =========== */
.detail-section[b-comzn5b3cr] {
    margin-top: 38px;
    animation: detailIn-b-comzn5b3cr .35s ease both;
}

@keyframes detailIn-b-comzn5b3cr {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.detail-head[b-comzn5b3cr] {
    margin-bottom: 18px;
}

.detail-title[b-comzn5b3cr] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.05;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.detail-sub[b-comzn5b3cr] {
    margin: 6px 0 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Placeholder, wenn kein Land gewaehlt ist */
.detail-placeholder .state-card[b-comzn5b3cr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 32px;
}

.detail-placeholder .state-card strong[b-comzn5b3cr] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
}

.detail-placeholder .state-card span[b-comzn5b3cr] {
    max-width: 52ch;
    line-height: 1.55;
}

.detail-placeholder .placeholder-ico[b-comzn5b3cr] {
    width: 56px;
    height: 56px;
    color: var(--accent);
    opacity: .7;
}

@media (max-width: 1080px) {
    .section-hint[b-comzn5b3cr] {
        margin-left: 0;
        margin-top: 4px;
        width: 100%;
    }

    .detail-title[b-comzn5b3cr] {
        font-size: 2rem;
    }

    .map-quickpick[b-comzn5b3cr] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .map-quickpick .ctl-select[b-comzn5b3cr] {
        max-width: none;
    }

    /* Mobil: Datenfenster als Dropdown statt Segment - identische Logik
       wie bei den anderen Filtern */
    .map-window[b-comzn5b3cr] {
        gap: 8px;
        padding: 8px 12px;
    }

    .map-window-seg[b-comzn5b3cr] {
        display: none;
    }

    .map-window-select[b-comzn5b3cr] {
        display: block;
        flex: 1;
        min-width: 0;
    }

    .map-window-label[b-comzn5b3cr] {
        font-size: .68rem;
    }
}

/* Metastrip */
.metastrip[b-comzn5b3cr] {
    display: flex;
    gap: 13px;
    margin-bottom: 22px;
}

.meta[b-comzn5b3cr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 17px;
    background: linear-gradient(157deg, rgba(255, 255, 255, .86), rgba(255, 253, 244, .56) 75%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3d);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .meta:hover[b-comzn5b3cr] {
        transform: translateY(-3px);
        box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .92), 0 4px 11px rgba(40, 45, 28, .08), 0 30px 50px -24px rgba(38, 50, 28, .52);
    }

.meta-ico[b-comzn5b3cr] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .85), inset 0 -6px 10px -7px rgba(var(--accent-box-shade), .45), 0 5px 11px -5px rgba(var(--accent-box-shade), .3);
}

.meta-txt[b-comzn5b3cr] {
    display: flex;
    flex-direction: column;
    line-height: 1.22;
}

    .meta-txt strong[b-comzn5b3cr] {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--ink);
    }

    .meta-txt span[b-comzn5b3cr] {
        font-size: .78rem;
        color: var(--ink-soft);
    }

.meta-range .meta-txt strong[b-comzn5b3cr] {
    font-size: 1.15rem;
    white-space: nowrap;
}

/* Steuerelemente-Panel */
.controlpanel[b-comzn5b3cr] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
    margin-bottom: 40px;
}

.control-line[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 0;
    padding: 14px 18px;
}

    /* Institute-Zeile spuerbar enger als die anderen Filter-Zeilen */
    .control-line:has(> .group-institute)[b-comzn5b3cr] {
        padding: 4px 18px 5px;
    }

    /* Zeile: Zeitraum (Inhaltsbreite) + Trend (fuellt den Rest) */
    .control-line.control-line-top[b-comzn5b3cr] {
        display: grid;
        grid-template-columns: auto 1fr;
        min-width: 0;
    }

    .control-line + .control-line[b-comzn5b3cr] {
        border-top: 1px solid var(--line-soft);
    }

.control-group[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .control-group.control-divider[b-comzn5b3cr] {
        display: grid;
        grid-template-columns: auto 1fr;
        min-width: 0;
        margin-left: 26px;
        padding-left: 26px;
        border-left: 1px solid var(--line-soft);
    }

    .control-group.group-institute[b-comzn5b3cr] {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

.ctl-label[b-comzn5b3cr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 78px;
    flex-shrink: 0;
    padding-top: 1px;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
}

/* Lang-/Kurz-Labels: Desktop volle Wortform, Mobil abgekuerzt. */
.seg-short[b-comzn5b3cr] {
    display: none;
}

/* Segmentierte Auswahl - eingelassene Rille mit gleitendem Knopf */
.segment[b-comzn5b3cr] {
    position: relative;
    display: inline-grid;
    gap: 0;
    padding: 3px;
    background: linear-gradient(180deg, rgba(39, 42, 32, .1), rgba(39, 42, 32, .035));
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(39, 42, 32, .1);
}

.segment-stretch[b-comzn5b3cr] {
    display: grid;
    width: 100%;
}

.seg-slider[b-comzn5b3cr] {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--n));
    border-radius: 999px;
    background: var(--gloss-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -6px 10px -6px rgba(0, 0, 0, .32), 0 4px 10px -3px var(--accent-glow);
    transform: translateX(calc(var(--idx) * 100%));
    transition: transform .3s cubic-bezier(.5, .05, .2, 1);
}

.seg[b-comzn5b3cr] {
    position: relative;
    z-index: 1;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    padding: .42rem .9rem;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color .2s;
}

    .seg:hover[b-comzn5b3cr] {
        color: var(--accent-strong);
    }

.seg-on[b-comzn5b3cr],
.seg-on:hover[b-comzn5b3cr] {
    color: #fff;
}

/* Mobile-Ersatz fuer die Segment-Auswahl (per Media Query eingeblendet) */
.ctl-select[b-comzn5b3cr] {
    display: none;
    flex: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    background-color: #fffdf7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%239a4c30' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: .6rem 2.5rem .6rem 1rem;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 45, 28, .06);
    transition: border-color .15s, box-shadow .15s;
}

    .ctl-select:hover[b-comzn5b3cr] {
        border-color: var(--accent);
    }

    .ctl-select:focus-visible[b-comzn5b3cr] {
        outline: none;
        border-color: var(--accent-strong);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 3px var(--accent-glow);
    }

.chips[b-comzn5b3cr] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 40px;
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 30px), #000 calc(100% - var(--fade-r, 0) * 30px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 30px), #000 calc(100% - var(--fade-r, 0) * 30px), transparent 100%);
    transition: --fade-l .22s ease, --fade-r .22s ease;
}

/* Land-Auswahl: 16 Bundeslaender auf zwei Zeilen umbrechen statt scrollen */
.group-land[b-comzn5b3cr] {
    align-items: flex-start;
}

    .group-land .ctl-label[b-comzn5b3cr] {
        padding-top: 8px;
    }

    .group-land .chips[b-comzn5b3cr] {
        flex-wrap: wrap;
        height: auto;
        padding-top: 0;
        overflow: visible;
        gap: 7px;
        -webkit-mask-image: none;
        mask-image: none;
    }

.chip[b-comzn5b3cr] {
    flex-shrink: 0;
    font-family: inherit;
    font-size: .84rem;
    border: 1px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    color: var(--ink-soft);
    padding: .4rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(40, 45, 28, .06);
    transition: border-color .14s, color .14s, box-shadow .14s;
}

    .chip:hover[b-comzn5b3cr] {
        border-color: var(--accent);
        color: var(--accent-strong);
    }

    .chip.on[b-comzn5b3cr] {
        color: #fff;
        border-color: var(--accent-strong);
        background: var(--gloss-green);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -6px 10px -6px rgba(0, 0, 0, .3), 0 4px 10px -3px var(--accent-glow);
    }

.chip-n[b-comzn5b3cr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .71rem;
    background: rgba(39, 42, 32, .09);
    padding: 1px 6px;
    border-radius: 999px;
}

/* kleines Stuhl-Symbol im Badge - macht klar: Sitze im Landtag */
.chip-n-ico[b-comzn5b3cr] {
    width: 10px;
    height: 10px;
    opacity: .8;
}

.chip.on .chip-n[b-comzn5b3cr] {
    background: rgba(255, 255, 255, .26);
}

/* Abschnitts-Kopf */
.section-head[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.section-ico[b-comzn5b3cr] {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, .85), inset 0 -5px 9px -7px rgba(var(--accent-box-shade), .45), 0 4px 9px -5px rgba(var(--accent-box-shade), .3);
}

/* Teilen-Knopf oben rechts in der Kartenflaeche */
.map-share[b-comzn5b3cr] {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 5;
}

.section-head h2[b-comzn5b3cr] {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.section-count[b-comzn5b3cr] {
    font-size: .74rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: linear-gradient(170deg, #ffffff, #f1efe3);
    border: 1px solid var(--line);
    padding: 2px 9px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Deutschlandkarte */
.map-section[b-comzn5b3cr] {
    margin-bottom: 44px;
}

.map-card[b-comzn5b3cr] {
    position: relative;
    padding: 22px 24px 18px;
    /* Wichtig: KEIN backdrop-filter hier. Ein backdrop-filter macht aus dem
       Element den Bezugsrahmen fuer position:fixed-Nachfahren - dann wuerde
       das per Mauskoordinaten gesetzte Karten-Tooltip in Widescreen viel zu
       weit rechts landen. Optisch faellt das nicht auf, weil die Karte den
       Hintergrund der Card ohnehin vollstaendig abdeckt. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Balkendiagramm */
.chart-section[b-comzn5b3cr] {
    margin-bottom: 44px;
}

.chart-card[b-comzn5b3cr] {
    position: relative;
    z-index: 2;
    padding: 28px 30px 18px;
}

/* Teilen-Knopf oben rechts im Wahltrend-Element */
.chart-share[b-comzn5b3cr] {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 5;
}

/* Kopfzeile: WAHLTREND links, KOALITIONSRECHNER rechts - gleiche Hoehe */
/* Section-Head-Zeile fluchtet exakt mit den Karten darunter (chart-shell) -
   identische Logik wie auf Bund. */
.section-head-row[b-comzn5b3cr] {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    transition: gap .34s cubic-bezier(.5, .05, .2, 1) .22s;
}

.section-head-row.split[b-comzn5b3cr] {
    gap: 24px;
    transition: gap .45s cubic-bezier(.5, .05, .2, 1) 0s;
}

.section-head-row > .section-head:not(.coa-section-head)[b-comzn5b3cr] {
    flex: 1 1 100%;
    min-width: 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1);
}

.section-head-row.split > .section-head:not(.coa-section-head)[b-comzn5b3cr] {
    flex-basis: 60%;
}

/* Inline-Titel im Rechner - nur mobil sichtbar (siehe Media Query) */
.coa-head-inline[b-comzn5b3cr] {
    display: none;
}

/* der KOALITIONSRECHNER-Titel gleitet beim Aufklappen von unten heraus */
.coa-section-head[b-comzn5b3cr] {
    flex: 0 0 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                opacity .2s ease;
}

.section-head-row.split .coa-section-head[b-comzn5b3cr] {
    flex: 1 1 calc(40% - 24px);
    opacity: 1;
    pointer-events: auto;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                opacity .4s ease .25s;
}

/* Wahltrend + ausklappbarer Koalitionsrechner nebeneinander */
/* Flexbox statt Grid: garantiert volle Breite des Wahltrends beim
   Einklappen. Identisch zur Logik auf Bund. */
.chart-shell[b-comzn5b3cr] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    transition: gap .34s cubic-bezier(.5, .05, .2, 1) .22s;
}

.chart-shell.split[b-comzn5b3cr] {
    gap: 24px;
    transition: gap .45s cubic-bezier(.5, .05, .2, 1) 0s;
}

.chart-shell > .chart-card[b-comzn5b3cr] {
    flex: 1 1 100%;
    min-width: 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1);
}

.chart-shell.split > .chart-card[b-comzn5b3cr] {
    flex-basis: 60%;
}

.coalition-card[b-comzn5b3cr] {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 0;
    transition: flex-basis .45s cubic-bezier(.5, .05, .2, 1),
                border-color .35s ease,
                box-shadow .35s ease;
}

.chart-shell.split .coalition-card[b-comzn5b3cr] {
    flex: 1 1 calc(40% - 24px);
}

/* eingeklappt unsichtbar - kein Rahmen-/Schattenstrich hinter dem Knopf */
.chart-shell:not(.split) .coalition-card[b-comzn5b3cr] {
    border-color: transparent;
    box-shadow: none;
}

/* ---- Tablet/Mobil: chart-shell vertikal stacken (Coalition unter dem Chart).
   Breakpoint absichtlich auf 1280px hochgezogen - im Bereich 1080-1280px
   (z.B. Surface Pro mit ausgeklappter Sidebar) war die Side-by-Side-Variante
   zu schmal, das Wahltrend-Diagramm verlor seine Lesbarkeit. ---- */
@media (max-width: 1280px) {
    .chart-shell[b-comzn5b3cr] {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .chart-shell > .chart-card[b-comzn5b3cr],
    .chart-shell.split > .chart-card[b-comzn5b3cr] {
        flex: none;
        width: 100%;
        flex-basis: auto;
    }

    .chart-shell .coalition-card[b-comzn5b3cr] {
        flex: none;
        width: 100%;
        display: none;
    }

    .chart-shell.split .coalition-card[b-comzn5b3cr] {
        display: block;
        flex: none;
        flex-basis: auto;
        margin-top: 16px;
    }
}

/* laengliche Ausklapp-Schaltflaeche am rechten Rand des Wahltrends */
.coalition-toggle[b-comzn5b3cr] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 6;
    width: 38px;
    height: auto;
    padding: 26px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: none;
    border-radius: 13px;
    background: var(--gloss-green);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .4), inset 0 -11px 17px -13px rgba(0, 0, 0, .4), 0 8px 18px -6px var(--accent-glow);
    transition: filter .18s ease, box-shadow .18s ease;
}

    .coalition-toggle:hover[b-comzn5b3cr] {
        filter: brightness(1.07);
        box-shadow: inset 0 1.6px 0 rgba(255, 255, 255, .4), inset 0 -11px 17px -13px rgba(0, 0, 0, .4), 0 12px 24px -6px var(--accent-glow);
    }

    .coalition-toggle:active[b-comzn5b3cr] {
        transform: translate(50%, -50%) scale(.97);
    }

.ct-label[b-comzn5b3cr] {
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.ct-arrow[b-comzn5b3cr] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* kompakte, aber sauber formatierte Balken, solange der Rechner offen ist */
.chart-shell.split .plot-row[b-comzn5b3cr],
.chart-shell.split .base-row[b-comzn5b3cr] {
    gap: 5px;
}

.chart-shell.split .bar-col[b-comzn5b3cr],
.chart-shell.split .bar-base[b-comzn5b3cr] {
    min-width: 40px;
}

.chart-shell.split .bar-base[b-comzn5b3cr] {
    padding: 7px 3px 8px;
}

.chart-shell.split .bar-value[b-comzn5b3cr] {
    font-size: .72rem;
}

.chart-shell.split .bar-value .pct[b-comzn5b3cr] {
    font-size: .54rem;
}

.chart-shell.split .bar-name[b-comzn5b3cr] {
    font-size: .69rem;
    letter-spacing: -.01em;
}

.chart-shell.split .trend[b-comzn5b3cr] {
    font-size: .64rem;
    padding: 2px 6px;
    gap: 2px;
}

.chart-shell.split .trend-arrow[b-comzn5b3cr] {
    font-size: .5rem;
}

/* schmale Ansicht (bis 1280): Koalitionsrechner klappt unter Wahltrend */
/* Zwischenbereich 1081-1280px: Sidebar sichtbar aber Content knapp.
   Filterzeile stackt in zwei eigene Zeilen, damit Trend nicht aus der
   Karte rausgedraengt wird. */
@media (min-width: 1081px) and (max-width: 1280px) {
    .control-line.control-line-top[b-comzn5b3cr] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .control-group.control-divider[b-comzn5b3cr] {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--line-soft);
        padding-top: 10px;
    }
}

@media (max-width: 1280px) {
    .coa-section-head[b-comzn5b3cr],
    .section-head-row.split .coa-section-head[b-comzn5b3cr] {
        display: none;
    }

    .chart-shell.split .coa-head-inline[b-comzn5b3cr] {
        display: flex;
        margin: 2px 0 4px;
    }

    .chart-shell[b-comzn5b3cr] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 0fr;
        column-gap: 0;
        row-gap: 0;
        transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1),
                    row-gap .42s cubic-bezier(.4, 0, .2, 1);
    }

        .chart-shell.split[b-comzn5b3cr] {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            row-gap: 16px;
        }

    .coalition-card[b-comzn5b3cr] {
        overflow: hidden;
        min-height: 0;
        /* sanfter Opazitaets-Fade ueber die Hoehen-Animation gelegt - der
           halbgeoeffnete Zwischenzustand wirkt dadurch weicher statt
           abgehackt. */
        opacity: 0;
        transition: opacity .3s ease;
    }

    .chart-shell.split .coalition-card[b-comzn5b3cr] {
        opacity: 1;
        transition: opacity .42s ease .12s;
    }

    /* der Rechner-Inhalt liegt sonst absolut (Hoehe vom Wahltrend) - mobil
       muss er im Fluss stehen, damit die Aufklapp-Animation echte Hoehe hat */
    .coalition-card[b-comzn5b3cr]  .coa {
        position: static;
        min-width: 0;
    }

    /* Umschalter: breiter Knopf am unteren Rand des Wahltrends */
    .coalition-toggle[b-comzn5b3cr] {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 9px;
        padding: 13px;
        margin-top: 16px;
        border-radius: 13px;
    }

        .coalition-toggle:active[b-comzn5b3cr] {
            transform: scale(.99);
        }

    .ct-label[b-comzn5b3cr] {
        writing-mode: horizontal-tb;
    }

    .ct-arrow[b-comzn5b3cr] {
        transform: rotate(90deg);
    }
}

.chart[b-comzn5b3cr] {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px;
    --plot-h: 300px;
}

.plot-row[b-comzn5b3cr] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: var(--plot-h);
}

.base-row[b-comzn5b3cr] {
    display: flex;
    gap: 8px;
    margin-top: -3px;
}

.bar-col[b-comzn5b3cr] {
    flex: 1;
    min-width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* 5-%-Huerdenlinie */
.hurdle[b-comzn5b3cr] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hf, 0) * 100%);
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.hurdle-line[b-comzn5b3cr] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 2px dashed #ffffff;
    filter: drop-shadow(0 1px 2px rgba(16, 18, 12, .6));
}

.hurdle-mark[b-comzn5b3cr] {
    position: absolute;
    bottom: 2px;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-faint);
}

.hurdle-mark-l[b-comzn5b3cr] {
    left: -8px;
}

.hurdle-mark-r[b-comzn5b3cr] {
    right: -8px;
}

.bar-value[b-comzn5b3cr] {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .bar-value .pct[b-comzn5b3cr] {
        font-size: .72rem;
        color: var(--ink-faint);
        font-weight: 600;
    }

.bar-fill[b-comzn5b3cr] {
    flex-shrink: 0;
    width: 78%;
    max-width: 118px;
    height: var(--h);
    min-height: 3px;
    background: var(--c);
    border-radius: 9px 9px 0 0;
    transition: height .6s cubic-bezier(.34, .8, .3, 1);
    animation: barGrow-b-comzn5b3cr .85s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: var(--delay);
}

@keyframes barGrow-b-comzn5b3cr {
    from {
        height: 0;
    }

    to {
        height: var(--h);
    }
}

.bar-base[b-comzn5b3cr] {
    flex: 1;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 9px;
    border-radius: 9px;
    background: #1c1e14;
    background: color-mix(in srgb, var(--c, #6b6e5e) 60%, #121309);
    box-shadow: 0 -2px 0 rgba(6, 8, 4, .6),
                inset 0 2.5px 0 rgba(255, 255, 255, .28),
                0 9px 16px -7px rgba(12, 14, 8, .5);
}

.bar-name[b-comzn5b3cr] {
    font-weight: 600;
    font-size: .9rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    text-align: center;
    white-space: nowrap;
}

.bar-trend[b-comzn5b3cr] {
    display: flex;
    justify-content: center;
}

.trend[b-comzn5b3cr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: trendPop-b-comzn5b3cr .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes trendPop-b-comzn5b3cr {
    0% {
        opacity: .25;
        transform: scale(.78);
    }

    55% {
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.trend-arrow[b-comzn5b3cr] {
    font-size: .58rem;
    line-height: 1;
}

.trend-up[b-comzn5b3cr] {
    color: #fff;
    background: linear-gradient(165deg, #57ad6c, #43925a 55%, #327846);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(67, 146, 90, .55);
}

.trend-down[b-comzn5b3cr] {
    color: #fff;
    background: linear-gradient(165deg, #db6c54, #c8503a 55%, #ac4029);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(200, 80, 58, .5);
}

.trend-flat[b-comzn5b3cr] {
    color: var(--ink-soft);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(40, 45, 28, .08);
}

.trend-new[b-comzn5b3cr] {
    color: var(--ink-faint);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.chart-foot[b-comzn5b3cr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: .78rem;
    color: var(--ink-faint);
}

    .chart-foot .foot-spacer[b-comzn5b3cr] {
        flex: 1;
    }

    .chart-foot a[b-comzn5b3cr] {
        color: var(--ink-soft);
    }

    .chart-foot .dot-sep[b-comzn5b3cr] {
        opacity: .55;
    }

/* Umfragen-Liste */
.matrix-section[b-comzn5b3cr] {
    margin-bottom: 8px;
}

.matrix-card[b-comzn5b3cr] {
    padding: 0;
    overflow: hidden;
}

/* Detail-Tooltip bei Tabellenzeilen-Hover */
.row-tip[b-comzn5b3cr] {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    max-width: 320px;
    padding: 11px 14px 12px;
    background: var(--glass-strong);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: left .12s ease, top .12s ease;
    animation: tipIn-b-comzn5b3cr .14s ease-out;
}

@keyframes tipIn-b-comzn5b3cr {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.tip-head[b-comzn5b3cr] {
    font-weight: 600;
    font-size: .86rem;
    color: var(--ink);
}

.tip-period[b-comzn5b3cr] {
    margin-top: 3px;
    font-size: .78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.tip-method[b-comzn5b3cr] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tip-label[b-comzn5b3cr] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    padding: 3px 7px;
    border-radius: 6px;
}

.tip-method-val[b-comzn5b3cr] {
    font-size: .8rem;
    color: var(--ink);
}

/* Balken-Mindestbreiten frueh aufheben - sonst sprengen sie mit mehr
   Parteien (z. B. mit Freien Waehlern) die Karte zwischen 721 und 1080px. */
@media (max-width: 1080px) {
    .chart-shell.split .bar-col[b-comzn5b3cr],
    .chart-shell.split .bar-base[b-comzn5b3cr],
    .bar-col[b-comzn5b3cr],
    .bar-base[b-comzn5b3cr] {
        min-width: 0;
    }
}

/* Mobil-Layout greift schon ab 1080px (synchron mit der Sidebar/TabNav-
   Umschaltung in MainLayout). Sonst gibt es zwischen 721 und 1080px einen
   haesslichen Zwischenraum: die App-Navigation ist schon im Mobil-Modus,
   die Filter und Chip-Listen aber noch im Desktop-Layout. */
@media (max-width: 1080px) {
    /* KPIs schon hier 3-spaltig einzeilig, gleiche Hoehe, zentrierter Inhalt */
    .metastrip[b-comzn5b3cr] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .meta[b-comzn5b3cr] {
        min-width: 0;
        min-height: 68px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        text-align: center;
    }

    .meta-ico[b-comzn5b3cr] {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .meta-txt[b-comzn5b3cr] {
        align-items: center;
        line-height: 1.1;
        gap: 1px;
        min-height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .meta-txt strong[b-comzn5b3cr] {
        font-size: .72rem;
        white-space: nowrap;
        letter-spacing: -.01em;
    }

    .meta-range .meta-txt strong[b-comzn5b3cr] {
        font-size: .62rem;
        letter-spacing: -.02em;
    }

    .meta-txt span[b-comzn5b3cr] {
        font-size: .58rem;
        line-height: 1.15;
    }

    .dash-head[b-comzn5b3cr] {
        margin-bottom: 14px;
    }

    /* Lede auf Mobil ausblenden - der Tab-Titel im Menue erklaert genug;
       die Karte ist der Eyecatcher und muss in den Viewport. */
    .dash-lede[b-comzn5b3cr] {
        display: none;
    }

    /* Controlpanel kompakt - alles in einer Zeile, kleines Padding */
    .controlpanel[b-comzn5b3cr] {
        margin-bottom: 12px;
    }

    /* Land allein in einer Zeile, Trend ggue. untereinander stapeln (vorher
       2-spaltig - das wurde durch die breiten Segmente eng). */
    .control-line.control-line-top[b-comzn5b3cr] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .control-line[b-comzn5b3cr] {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Institute-Zeile: noch kompakter, da wenig Chip-Inhalt */
    .control-line:has(> .group-institute)[b-comzn5b3cr] {
        padding: 3px 10px 4px;
    }

    /* Filtergruppen kompakt */
    .control-group[b-comzn5b3cr],
    .control-group.control-divider[b-comzn5b3cr],
    .group-land[b-comzn5b3cr] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        min-width: 0;
    }

    .group-land[b-comzn5b3cr] {
        width: 100%;
    }

    .ctl-label[b-comzn5b3cr],
    .group-land .ctl-label[b-comzn5b3cr] {
        width: auto;
        flex-shrink: 0;
        padding-top: 0;
        font-size: .6rem;
    }

    .ctl-ico[b-comzn5b3cr] {
        display: none;
    }

    /* Segmente (Zeitraum/Trend) bleiben mobil sichtbar als Custom-Picker.
       Native ctl-select wird ausgeblendet - aber NICHT die map-quickpick
       (Bundesland-Wahl mit 16 Optionen braucht weiter das native Dropdown). */
    .ctl-select[b-comzn5b3cr] {
        display: none;
    }

    .map-quickpick .ctl-select[b-comzn5b3cr] {
        display: block;
        flex: 1;
        min-width: 0;
        padding: .3rem .35rem;
        font-size: .82rem;
    }

    .segment[b-comzn5b3cr] {
        flex: 1;
        min-width: 0;
        padding: 3px;
    }

    .segment .seg[b-comzn5b3cr] {
        font-size: .72rem;
        padding: 6px 2px;
        letter-spacing: -.01em;
        min-width: 0;
        white-space: nowrap;
        font-weight: 700;
    }

    /* Mobil das Kurz-Label zeigen ("7 T", "3 M", ...) statt "1 Woche" etc. */
    .seg-long[b-comzn5b3cr] {
        display: none;
    }

    .seg-short[b-comzn5b3cr] {
        display: inline;
    }

    .group-land .chips[b-comzn5b3cr] {
        display: none;
    }

    /* Rechte 5%-Marke auf Mobil ausblenden - kollidiert mit "Sonstige". */
    .hurdle-mark-r[b-comzn5b3cr] {
        display: none;
    }

    /* Page-Title kompakter - das grosse "BUND/LÄNDER" wirkt sonst zu massiv. */
    .pt-a[b-comzn5b3cr] { font-size: 1.5rem; }
    .pt-b[b-comzn5b3cr] { font-size: 2.4rem; }
    .dash-lede[b-comzn5b3cr] { font-size: .88rem; }

    /* Wahltrend passt komplett auf den Schirm - auch ausgeklappt */
    .chart-shell.split .bar-col[b-comzn5b3cr],
    .chart-shell.split .bar-base[b-comzn5b3cr] {
        min-width: 0;
    }

    .chart[b-comzn5b3cr] {
        --plot-h: 230px;
    }

    .plot-row[b-comzn5b3cr],
    .base-row[b-comzn5b3cr] {
        gap: 5px;
    }

    .bar-col[b-comzn5b3cr],
    .bar-base[b-comzn5b3cr] {
        min-width: 0;
    }

    .bar-base[b-comzn5b3cr] {
        padding: 7px 3px 8px;
    }

    .bar-value[b-comzn5b3cr] {
        font-size: .82rem;
        margin-bottom: 5px;
    }

    .bar-value .pct[b-comzn5b3cr] {
        font-size: .56rem;
    }

    .bar-name[b-comzn5b3cr] {
        font-size: .7rem;
    }

    .trend[b-comzn5b3cr] {
        font-size: .62rem;
        padding: 2px 6px;
        gap: 2px;
    }

    .trend-arrow[b-comzn5b3cr] {
        font-size: .48rem;
    }

    .chart-card[b-comzn5b3cr] {
        padding: 22px 16px 14px;
    }

    .pt-a[b-comzn5b3cr] {
        font-size: 1.7rem;
    }

    .pt-b[b-comzn5b3cr] {
        font-size: 2.7rem;
    }

    .section-head h2[b-comzn5b3cr] {
        font-size: 1.18rem;
    }

    .map-card[b-comzn5b3cr] {
        padding: 14px 12px 12px;
    }
}

@media (max-width: 480px) {
    .pt-a[b-comzn5b3cr] {
        font-size: 1.5rem;
    }

    .pt-b[b-comzn5b3cr] {
        font-size: 2.2rem;
    }

    .dash-lede[b-comzn5b3cr] {
        font-size: .92rem;
    }

    /* Stat-Karten kompakt einzeilig - klein, dicht, alles auf einer Reihe */
    .metastrip[b-comzn5b3cr] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .meta[b-comzn5b3cr] {
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 6px;
        text-align: center;
    }

    .meta-ico[b-comzn5b3cr] {
        width: 26px;
        height: 26px;
        border-radius: 9px;
    }

    .meta-txt[b-comzn5b3cr] {
        align-items: center;
        line-height: 1.15;
    }

    .meta-txt strong[b-comzn5b3cr] {
        font-size: .82rem;
        white-space: nowrap;
    }

    .meta-range .meta-txt strong[b-comzn5b3cr] {
        font-size: .68rem;
        letter-spacing: -.02em;
    }

    .meta-txt span[b-comzn5b3cr] {
        font-size: .62rem;
    }

    .control-line[b-comzn5b3cr] {
        padding: 12px 13px;
    }

    .chart-card[b-comzn5b3cr] {
        padding: 18px 13px 12px;
    }

    .section-ico[b-comzn5b3cr] {
        width: 29px;
        height: 29px;
    }

    .section-head h2[b-comzn5b3cr] {
        font-size: 1.05rem;
        letter-spacing: .03em;
    }

    /* Land-Auswahl: kompaktere Chips auf kleinen Schirmen */
    .group-land .chips[b-comzn5b3cr] {
        gap: 5px;
    }

    .chip[b-comzn5b3cr] {
        font-size: .8rem;
        padding: .34rem .6rem;
    }
}

/* .chart-notice ist global in wwwroot/app.css definiert (Bund + Laender). */
/* /Components/Pages/OffeneDaten.razor.rz.scp.css */
.export-btns[b-hxbwzkecls] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.export-btn[b-hxbwzkecls] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 45, 28, .07);
    text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .export-btn:hover[b-hxbwzkecls] {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px -6px var(--accent-glow);
        text-decoration: none;
    }

.export-btn-fmt[b-hxbwzkecls] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--gloss-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 9px -3px var(--accent-glow);
}

.export-btn-txt[b-hxbwzkecls] {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
}
/* /Components/Pages/Regierung.razor.rz.scp.css */
/* .dash + @keyframes dashIn sind GLOBAL in wwwroot/app.css definiert. */

.dash-head[b-r60vh19b94] {
    margin-bottom: 28px;
}

.page-title[b-r60vh19b94] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    text-transform: uppercase;
    line-height: 1.03;
    letter-spacing: .02em;
}

.pt-a[b-r60vh19b94] {
    font-size: 2.5rem;
    color: var(--ink);
}

.pt-b[b-r60vh19b94] {
    font-size: 4rem;
    color: var(--accent-strong);
}

.dash-lede[b-r60vh19b94] {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 72ch;
}

.card[b-r60vh19b94] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
}

.state-card[b-r60vh19b94] {
    padding: 52px;
    text-align: center;
    color: var(--ink-soft);
}

/* Steuerelemente-Panel */
.controlpanel[b-r60vh19b94] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
    margin-bottom: 30px;
}

.control-line[b-r60vh19b94] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
}

.control-group[b-r60vh19b94] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctl-label[b-r60vh19b94] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
}

.segment[b-r60vh19b94] {
    position: relative;
    display: inline-grid;
    gap: 0;
    padding: 3px;
    background: linear-gradient(180deg, rgba(39, 42, 32, .1), rgba(39, 42, 32, .035));
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(39, 42, 32, .1);
}

.seg-slider[b-r60vh19b94] {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--n));
    border-radius: 999px;
    background: var(--gloss-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -6px 10px -6px rgba(0, 0, 0, .32), 0 4px 10px -3px var(--accent-glow);
    transform: translateX(calc(var(--idx) * 100%));
    transition: transform .3s cubic-bezier(.5, .05, .2, 1);
}

.seg[b-r60vh19b94] {
    position: relative;
    z-index: 1;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    padding: .42rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color .2s;
}

    .seg:hover[b-r60vh19b94] {
        color: var(--accent-strong);
    }

.seg-on[b-r60vh19b94],
.seg-on:hover[b-r60vh19b94] {
    color: #fff;
}

/* zwei gleich formatierte Diagramme nebeneinander - gleiche Hoehe */
.rg-cols[b-r60vh19b94] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .rg-cols[b-r60vh19b94] {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (max-width: 720px) {
    .pt-a[b-r60vh19b94] {
        font-size: 1.55rem;
    }

    /* REGIERUNG ist deutlich laenger als BUND - kleinere Stufe verhindert
       harten Zeilenumbruch in den Header. */
    .pt-b[b-r60vh19b94] {
        font-size: 2.3rem;
    }

    .dash-lede[b-r60vh19b94] {
        font-size: .92rem;
    }

    /* Segment-Toggle muss in den Mobil-Viewport passen (4 Optionen). */
    .control-line[b-r60vh19b94] {
        padding: 12px 12px;
    }

    .control-group[b-r60vh19b94] {
        flex-wrap: wrap;
        width: 100%;
    }

    .segment[b-r60vh19b94] {
        width: 100%;
    }

    .seg[b-r60vh19b94] {
        padding: .42rem .35rem;
        font-size: .72rem;
    }
}

@media (max-width: 380px) {
    .seg[b-r60vh19b94] {
        font-size: .66rem;
        padding: .42rem .2rem;
    }
}
/* /Components/Pages/Uebersicht.razor.rz.scp.css */
/* Seiten-Überschrift im selben Stil wie Bund/Länder/Regierung (die pt-Styles
   sind dort jeweils scoped definiert - hier eigene Kopie). */
.page-title[b-3ehwrythjj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 200;
    text-transform: uppercase;
    line-height: 1.03;
    letter-spacing: .02em;
}

.pt-a[b-3ehwrythjj] {
    font-size: 2.5rem;
    color: var(--ink);
}

.pt-b[b-3ehwrythjj] {
    font-size: 4rem;
    color: var(--accent-strong);
}

.dash-head[b-3ehwrythjj] {
    margin-bottom: 28px;
}

@media (max-width: 1080px) {
    .pt-a[b-3ehwrythjj] { font-size: 1.5rem; }
    .pt-b[b-3ehwrythjj] { font-size: 2.4rem; }
}

/* 2x2 Raster auf Desktop, 1-spaltig auf Mobil. */
.ueb-grid[b-3ehwrythjj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

@media (max-width: 1080px) {
    .ueb-grid[b-3ehwrythjj] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Eine Zelle = Karte + "mehr"-Knopf darunter, beide volle Hoehe ausnutzend. */
.ueb-cell[b-3ehwrythjj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ueb-card[b-3ehwrythjj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
    min-width: 0;
}

/* dezente Abschnitts-Ueberschrift mit Icon im Stil der anderen Seiten */
.ueb-head[b-3ehwrythjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.ueb-head h2[b-3ehwrythjj] {
    margin: 0;
    flex: 1;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
}

.ueb-ico[b-3ehwrythjj] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    flex-shrink: 0;
}

.ueb-ico[b-3ehwrythjj]  .section-svg {
    width: 16px;
    height: 16px;
}

.ueb-sub[b-3ehwrythjj] {
    margin: 0 0 14px;
    font-size: .82rem;
    color: var(--ink-soft);
}

.ueb-empty[b-3ehwrythjj] {
    padding: 40px 10px;
    text-align: center;
    color: var(--ink-faint);
    font-size: .9rem;
}

/* Karten-Inhalt fuellt den Rest, Chart/Karte sitzt unten buendig. */
.ueb-card[b-3ehwrythjj] >  .chart,
.ueb-map[b-3ehwrythjj] {
    margin-top: auto;
}

/* Chart kompakt in die Kachel einpassen: alle Balken sollen ohne Horizontal-
   Scroll sichtbar sein. Mindestbreiten aufheben + Abstaende/Schriften kleiner
   (analog zum Koalitions-Split-Modus der Bund-Seite). */
.ueb-card[b-3ehwrythjj]  .chart {
    overflow-x: hidden;
}

.ueb-card[b-3ehwrythjj]  .plot-row,
.ueb-card[b-3ehwrythjj]  .base-row {
    gap: 4px;
}

.ueb-card[b-3ehwrythjj]  .bar-col,
.ueb-card[b-3ehwrythjj]  .bar-base {
    min-width: 0;
}

.ueb-card[b-3ehwrythjj]  .bar-base {
    padding: 7px 2px 8px;
}

.ueb-card[b-3ehwrythjj]  .bar-value {
    font-size: .78rem;
    margin-bottom: 5px;
}

.ueb-card[b-3ehwrythjj]  .bar-value .pct {
    font-size: .54rem;
}

.ueb-card[b-3ehwrythjj]  .bar-name {
    font-size: .68rem;
    letter-spacing: -.01em;
}

.ueb-card[b-3ehwrythjj]  .trend {
    font-size: .6rem;
    padding: 2px 6px;
    gap: 2px;
}

.ueb-card[b-3ehwrythjj]  .trend-arrow {
    font-size: .48rem;
}

.ueb-map[b-3ehwrythjj] {
    /* Karte fuellt die Kachelbreite; vertikal zentriert im freien Raum der
       (hohen) Zelle - balancierter als unten/oben kleben. */
    margin: auto 0;
    width: 100%;
}

/* "Mehr ansehen"-Knopf unter jeder Kachel */
.ueb-more[b-3ehwrythjj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: 13px;
    background: var(--gloss-green);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
                0 6px 15px -6px var(--accent-glow);
    transition: filter .15s ease, transform .12s ease;
}

.ueb-more:hover[b-3ehwrythjj] {
    filter: brightness(1.05);
    text-decoration: none;
}

.ueb-more:active[b-3ehwrythjj] {
    transform: scale(.99);
}

.ueb-more-arr[b-3ehwrythjj] {
    font-size: 1.05rem;
    line-height: 1;
}

/* Gemeinsamer breiter Knopf ueber beide Spalten (zwischen den beiden Bund-
   Kacheln und der unteren Reihe). */
.ueb-more-wide[b-3ehwrythjj] {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* Government-Kachel: die ApprovalDiagram bringt ihre eigene .card mit -
   wir lassen ihr volle Hoehe in der Zelle. */
.ueb-cell[b-3ehwrythjj] >  .gov {
    flex: 1;
}
/* /Components/Shared/ApprovalDiagram.razor.rz.scp.css */
.card[b-bw58sihjsf] {
    background: linear-gradient(157deg, rgba(255, 255, 255, .82), rgba(255, 253, 244, .5) 70%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
}

/* Klassenname bewusst NICHT ".ad" - Adblocker (uBlock/EasyList) blockieren
   ".ad" als kosmetischen Filter und blenden das Element komplett aus. */
.gov[b-bw58sihjsf] {
    padding: 22px 24px 16px;
    /* Portraets duerfen nicht ueber die Card hinausragen - sonst wird auf
       Mobil die ganze Seite breiter als das Viewport. Der weiche Rand der
       ovalen Maske ist sowieso transparent, harte Kante daher unsichtbar. */
    overflow: hidden;
}

/* Kopf */
.gov-head[b-bw58sihjsf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.gov-ico[b-bw58sihjsf] {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, .85), inset 0 -5px 9px -7px rgba(var(--accent-box-shade), .45), 0 4px 9px -5px rgba(var(--accent-box-shade), .3);
}

.gov-head h2[b-bw58sihjsf] {
    flex: 1;
    min-width: 0;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Institut-Auswahl (genau eines aktiv) - einzeilig, bei Bedarf scrollbar
   mit weichen Rand-Verlaeufen, genau wie die Chip-Leisten der anderen Tabs. */
.gov-insts[b-bw58sihjsf] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
    height: 50px;
    padding-top: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 28px), #000 calc(100% - var(--fade-r, 0) * 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--fade-l, 0) * 28px), #000 calc(100% - var(--fade-r, 0) * 28px), transparent 100%);
    transition: --fade-l .22s ease, --fade-r .22s ease;
}

.gov-inst[b-bw58sihjsf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: .8rem;
    border: 1px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    color: var(--ink-soft);
    padding: .36rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .14s, color .14s;
}

    .gov-inst:hover[b-bw58sihjsf] {
        border-color: var(--accent);
        color: var(--accent-strong);
    }

    .gov-inst.on[b-bw58sihjsf] {
        color: #fff;
        border-color: var(--accent-strong);
        background: var(--gloss-green);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 9px -3px var(--accent-glow);
    }

.gov-inst-n[b-bw58sihjsf] {
    font-size: .7rem;
    font-weight: 700;
    background: rgba(39, 42, 32, .09);
    padding: 1px 6px;
    border-radius: 999px;
}

.gov-inst.on .gov-inst-n[b-bw58sihjsf] {
    background: rgba(255, 255, 255, .26);
}

.gov-empty[b-bw58sihjsf] {
    padding: 40px 10px;
    text-align: center;
    color: var(--ink-soft);
}

.gov-q[b-bw58sihjsf] {
    max-width: 44ch;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.34;
    color: var(--ink);
}

.gov-gauge[b-bw58sihjsf] {
    position: relative;
    max-width: 440px;
    margin: 8px auto 2px;
}

.gov-gauge-portrait[b-bw58sihjsf] {
    padding-top: 4px;
}

/* Alte hinterlegte Portraits werden nicht mehr genutzt - alle Layouts
   zeigen jetzt klare runde Avatare oberhalb der Halbkreis-Anzeige
   (siehe .gov-people / .gov-person). */
.gov-portrait[b-bw58sihjsf] {
    display: none;
}

/* Bildnachweis - klein und dezent direkt unter der Trend-Zeile */
.gov-credit[b-bw58sihjsf] {
    margin: 4px 0 0;
    text-align: center;
    font-size: .62rem;
    line-height: 1.35;
    color: var(--ink-faint);
    opacity: .8;
}

    .gov-credit + .gov-credit[b-bw58sihjsf] {
        margin-top: 1px;
    }

    .gov-credit a[b-bw58sihjsf] {
        color: var(--ink-faint);
        text-decoration: underline;
    }

/* Anzeige liegt vor dem Portraet - die farbigen Boegen rahmen den Kopf */
.gov-gauge[b-bw58sihjsf]  .ag-svg {
    position: relative;
    z-index: 1;
}

/* Bewertungstexte nebeneinander - kompakte Stat-Bloecke gleicher Hoehe */
.gov-legend[b-bw58sihjsf] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto;
}

.gov-leg[b-bw58sihjsf] {
    flex: 1 1 0;
    min-width: 96px;
    max-width: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .72), rgba(255, 253, 244, .4));
    border: 1px solid var(--glass-border);
}

/* feste Hoehe -> 1- vs. 2-zeilige Labels verschieben den Container nicht mehr */
.gov-leg-head[b-bw58sihjsf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 2.5em;
}

.gov-leg-dot[b-bw58sihjsf] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.gov-leg-label[b-bw58sihjsf] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.22;
}

/* Zahl bewusst in der Grundschrift (Poppins) - gleichmaessige, saubere Ziffern.
   Bewusst moderat, damit lange Labels keine Layout-Spruenge erzeugen. */
.gov-leg-val[b-bw58sihjsf] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Trend-Plakette */
.gov-delta[b-bw58sihjsf] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 50px;
    justify-content: center;
    font-size: .73rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.gov-delta-arrow[b-bw58sihjsf] {
    font-size: .52rem;
    line-height: 1;
}

.gov-delta-up[b-bw58sihjsf] {
    color: #fff;
    background: linear-gradient(165deg, #57ad6c, #43925a 55%, #327846);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.gov-delta-down[b-bw58sihjsf] {
    color: #fff;
    background: linear-gradient(165deg, #db6c54, #c8503a 55%, #ac4029);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

.gov-delta-flat[b-bw58sihjsf] {
    color: var(--ink-soft);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* Vergleichs-Info: bewusst sehr dezent, ein Einzeiler unter dem
   Methodik-Fuss - kein Banner, kein Hintergrund, nur leise Info. */
.gov-compare[b-bw58sihjsf] {
    margin: 8px 0 0;
    text-align: center;
    font-size: .72rem;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Methodik-Fuss */
.gov-foot[b-bw58sihjsf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: .74rem;
}

.gov-fact[b-bw58sihjsf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-faint);
}

.gov-fact-t[b-bw58sihjsf] {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.gov-fact-k[b-bw58sihjsf] {
    margin-right: 3px;
    font-weight: 600;
    color: var(--ink);
}

/* Legenden-Bloecke duerfen auf Mobil schrumpfen - 96px x 4 Bloecke +
   Luecken sprengen sonst die Karte zwischen 561 und 1080px. */
@media (max-width: 1080px) {
    .gov-leg[b-bw58sihjsf] {
        min-width: 0;
    }

    .gov-delta[b-bw58sihjsf] {
        min-width: 0;
    }
}

/* Institut + Datum als prominente Subheadline ueber der Fragestellung.
   Macht klar, WANN und VON WEM die gezeigte Umfrage stammt - genau so,
   wie es vom Nutzer gewuenscht wurde (Frage, Datum, Institut auf einen Blick). */
.gov-meta[b-bw58sihjsf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px auto 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: .82rem;
    font-weight: 600;
    width: fit-content;
}

.gov-meta-inst[b-bw58sihjsf] {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}

.gov-meta-dot[b-bw58sihjsf] {
    color: var(--accent);
    opacity: .65;
}

.gov-meta-date[b-bw58sihjsf] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* damit die Subheadline zentriert in der Karte sitzt */
.gov > .gov-meta[b-bw58sihjsf] {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* Feste Hoehen je Sektion der Karte. Wenn zwei ApprovalDiagram-Karten
   nebeneinander stehen, fluchten dadurch Frage, Avatare, Halbkreis,
   Legende und Methodik-Fuss exakt auf gleicher Hoehe - egal ob ein
   oder zwei Portraits drin sind und egal wie lang die Frage ist. */
.gov-q[b-bw58sihjsf] {
    min-height: 4.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gov-people[b-bw58sihjsf] {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 4px 0 0;
    min-height: 130px;
    align-items: center;
}

.gov-gauge[b-bw58sihjsf] {
    min-height: 190px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: -4px auto -10px;
}

.gov-legend[b-bw58sihjsf] {
    min-height: 116px;
    align-items: stretch;
}

.gov-compare[b-bw58sihjsf] {
    /* keine min-height mehr - der Subtext ist nur eine Zeile */
    min-height: 0;
}

.gov-foot[b-bw58sihjsf] {
    min-height: 72px;
    align-content: flex-start;
}

.gov-person[b-bw58sihjsf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.gov-person-img[b-bw58sihjsf] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 18%;
    border: 3px solid #fff;
    box-shadow:
        0 8px 20px -8px rgba(40, 50, 28, .42),
        0 2px 5px rgba(40, 50, 28, .12),
        inset 0 1.5px 0 rgba(255, 255, 255, .7),
        0 0 0 1px rgba(40, 50, 28, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gov-person:hover .gov-person-img[b-bw58sihjsf] {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px -10px rgba(40, 50, 28, .5),
        0 2px 5px rgba(40, 50, 28, .12),
        inset 0 1.5px 0 rgba(255, 255, 255, .7),
        0 0 0 1px rgba(189, 100, 68, .25);
}

.gov-person-name[b-bw58sihjsf] {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Logo-Variante: weisser Hintergrund, abgerundetes Quadrat statt Kreis,
   Logo komplett sichtbar (contain statt cover). Wird fuer Parteilogos
   genutzt - z. B. CDU + SPD auf der Bundesregierung-Karte. */
.gov-person--logo .gov-person-img[b-bw58sihjsf] {
    background-color: #ffffff;
    background-size: 70% auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 18px;
}

/* Mobil: Avatare bleiben prominent, nur Halbkreis etwas schmaler */
@media (max-width: 720px) {
    .gov-gauge[b-bw58sihjsf] {
        max-width: 280px;
        margin: 4px auto 6px;
    }

    .gov-gauge-portrait[b-bw58sihjsf] {
        padding-top: 0;
    }

    .gov-people[b-bw58sihjsf] {
        gap: 22px;
        margin: 2px 0 10px;
    }

    .gov-person-img[b-bw58sihjsf] {
        width: 72px;
        height: 72px;
        border-width: 2.5px;
    }

    .gov-person-name[b-bw58sihjsf] {
        font-size: .7rem;
        letter-spacing: .02em;
    }
}

@media (max-width: 480px) {
    .gov-gauge[b-bw58sihjsf] {
        max-width: 240px;
    }

    .gov-person-img[b-bw58sihjsf] {
        width: 62px;
        height: 62px;
    }

    .gov-person-name[b-bw58sihjsf] {
        font-size: .66rem;
    }
}

@media (max-width: 720px) {
    .gov[b-bw58sihjsf] {
        padding: 16px 14px 12px;
    }

    .gov-head h2[b-bw58sihjsf] {
        font-size: 1.1rem;
    }

    /* Legenden-Labels einzeilig: "Sehr unzufrieden" o.ae. wuerde umbrechen
       oder ueberlaufen. Daher: nowrap + adaptive Schriftgroesse via clamp(),
       so gross wie moeglich, so klein wie noetig. */
    .gov-leg[b-bw58sihjsf] {
        padding: 8px 3px;
        gap: 4px;
        overflow: hidden;
    }

    .gov-leg-head[b-bw58sihjsf] {
        min-height: 0;
        gap: 3px;
        max-width: 100%;
    }

    .gov-leg-dot[b-bw58sihjsf] {
        width: 7px;
        height: 7px;
    }

    .gov-leg-label[b-bw58sihjsf] {
        font-size: clamp(.5rem, 2.3vw, .68rem);
        white-space: nowrap;
        letter-spacing: -.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .gov-leg-val[b-bw58sihjsf] {
        font-size: 1.2rem;
    }

    .gov-delta[b-bw58sihjsf] {
        font-size: .62rem;
        padding: 2px 6px;
    }

    /* Auf Mobil sind die min-heights aus dem Desktop-Layout (fuer side-by-side
       Karten-Alignment) ueberfluessig - sie erzeugen nur Leerraum. */
    .gov-q[b-bw58sihjsf] {
        font-size: 1rem;
        max-width: none;
        min-height: 0;
    }

    .gov-people[b-bw58sihjsf] {
        min-height: 0;
        margin: 2px 0 0;
    }

    .gov-gauge[b-bw58sihjsf] {
        min-height: 0;
        margin: -2px auto -10px;
    }

    .gov-legend[b-bw58sihjsf] {
        min-height: 0;
        margin: 0 auto;
    }

    .gov-foot[b-bw58sihjsf] {
        margin-top: 4px;
        padding-top: 6px;
        gap: 3px 10px;
        font-size: .66rem;
        min-height: 0;
    }

    .gov-compare[b-bw58sihjsf] {
        margin-top: 4px;
        font-size: .66rem;
        white-space: normal;
        min-height: 0;
    }

    .gov-credit[b-bw58sihjsf] {
        font-size: .58rem;
        margin-top: 2px;
    }
}
/* /Components/Shared/ApprovalGauge.razor.rz.scp.css */
.ag-svg[b-9yfu1xo4pb] {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: visible;
    filter: drop-shadow(0 11px 16px rgba(38, 50, 28, .17));
}

.ag-track[b-9yfu1xo4pb] {
    fill: none;
    stroke: rgba(40, 45, 28, .08);
    stroke-width: 64;
}

/* farbige Segmente - zeichnen sich beim Laden nacheinander ein */
.ag-seg[b-9yfu1xo4pb] {
    fill: none;
    stroke-width: 64;
    stroke-linecap: butt;
    stroke-dasharray: 1 1;
    animation-name: agDraw-b-9yfu1xo4pb;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
}

@keyframes agDraw-b-9yfu1xo4pb {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}
/* /Components/Shared/CoalitionCalculator.razor.rz.scp.css */
/* fuellt die Koalitionskarte komplett aus; die Karte selbst bekommt ihre
   Hoehe vom Wahltrend daneben (kein erzwungener Leerraum) */
.coa[b-iarkkom8gm] {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    min-width: 348px;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.coa-empty[b-iarkkom8gm] {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 13px;
    color: var(--ink-soft);
    font-size: .88rem;
}

    .coa-empty .coa-ico[b-iarkkom8gm] {
        background: rgba(39, 42, 32, .06);
        color: var(--ink-faint);
        box-shadow: none;
    }

/* Kopfzeile der Karte: Untertitel links, Teilen-Knopf rechts */
.coa-top[b-iarkkom8gm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Untertitel-Zeile (Titel + Icon stehen als Abschnittskopf ausserhalb der Karte) */
.coa-sub[b-iarkkom8gm] {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-soft);
}

.coa-ico[b-iarkkom8gm] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--accent-box);
    color: var(--accent-strong);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, .85), inset 0 -5px 9px -7px rgba(var(--accent-box-shade), .45), 0 4px 9px -5px rgba(var(--accent-box-shade), .3);
}

/* Block */
.coa-block[b-iarkkom8gm] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.coa-label[b-iarkkom8gm] {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
}

/* Halbkreis-Sitzverteilung */
.coa-hemi[b-iarkkom8gm] {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin: 2px auto;
    transform-origin: 50% 92%;
}

.coa.open .coa-hemi[b-iarkkom8gm] {
    animation: coaHemiIn-b-iarkkom8gm .65s cubic-bezier(.34, .8, .3, 1) both;
    animation-delay: .2s;
}

@keyframes coaHemiIn-b-iarkkom8gm {
    from {
        transform: scale(.78);
    }

    to {
        transform: scale(1);
    }
}

.coa-hemi-g[b-iarkkom8gm] {
    transition: opacity .35s ease;
}

    .coa-hemi-g.dim[b-iarkkom8gm] {
        opacity: .14;
    }

/* Legende */
.coa-legend[b-iarkkom8gm] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    justify-content: center;
}

.coa-leg[b-iarkkom8gm] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .79rem;
}

.coa-leg-dot[b-iarkkom8gm] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.coa-leg-sc[b-iarkkom8gm] {
    color: var(--ink);
    font-weight: 600;
}

.coa-leg-ct[b-iarkkom8gm] {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* Buendnis-Chips */
.coa-pick[b-iarkkom8gm] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.coa-pick-chip[b-iarkkom8gm] {
    font-family: inherit;
    font-size: .83rem;
    font-weight: 600;
    border: 1.5px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    color: var(--ink-soft);
    padding: .36rem .62rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .16s, color .16s, background .16s, transform .12s, box-shadow .16s;
}

    .coa-pick-chip:hover[b-iarkkom8gm] {
        transform: translateY(-1px);
    }

    .coa-pick-chip.on[b-iarkkom8gm] {
        border-color: var(--pc);
        color: #fff;
        background: var(--pc);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 11px -4px rgba(16, 18, 12, .5);
    }

.coa-pick-n[b-iarkkom8gm] {
    font-size: .71rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(39, 42, 32, .1);
}

.coa-pick-chip.on .coa-pick-n[b-iarkkom8gm] {
    background: rgba(255, 255, 255, .26);
}

/* Mehrheits-Meter */
.coa-meter[b-iarkkom8gm] {
    position: relative;
    display: flex;
    height: 24px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(39, 42, 32, .09);
    box-shadow: inset 0 2px 5px rgba(39, 42, 32, .14);
}

.coa-meter-seg[b-iarkkom8gm] {
    height: 100%;
    transition: width .45s cubic-bezier(.34, .8, .3, 1);
}

.coa-meter-major[b-iarkkom8gm] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 3px rgba(16, 18, 12, .75);
    z-index: 2;
}

/* Auszaehlung */
.coa-tally[b-iarkkom8gm] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 10px;
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: background .35s ease;
}

.coa-tally-num[b-iarkkom8gm] {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.coa-tally-txt[b-iarkkom8gm] {
    font-size: .8rem;
    color: var(--ink-soft);
}

.coa-tally.win[b-iarkkom8gm] {
    background: var(--gloss-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -6px var(--accent-glow);
}

    .coa-tally.win .coa-tally-num[b-iarkkom8gm] {
        color: #fff;
    }

    .coa-tally.win .coa-tally-txt[b-iarkkom8gm] {
        color: rgba(255, 255, 255, .88);
    }

/* Moegliche Mehrheiten */
.coa-options[b-iarkkom8gm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coa-option[b-iarkkom8gm] {
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    cursor: pointer;
    transition: border-color .15s, transform .12s, box-shadow .15s;
}

    .coa-option:hover[b-iarkkom8gm] {
        transform: translateY(-1px);
        border-color: var(--accent);
    }

    .coa-option.on[b-iarkkom8gm] {
        border-color: var(--accent-strong);
        box-shadow: 0 0 0 1.5px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .8);
    }

.coa-option-tags[b-iarkkom8gm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.coa-option-tag[b-iarkkom8gm] {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 7px;
    border-radius: 6px;
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, .38);
}

.coa-option-seats[b-iarkkom8gm] {
    flex-shrink: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.coa-empty-list[b-iarkkom8gm] {
    font-size: .82rem;
    color: var(--ink-faint);
    padding: 6px 2px;
}

.coa-note[b-iarkkom8gm] {
    margin: 0;
    font-size: .68rem;
    line-height: 1.45;
    color: var(--ink-faint);
}

/* gestaffelte Einblend-Animation beim Aufklappen */
.coa-sub[b-iarkkom8gm],
.coa-block[b-iarkkom8gm] {
    opacity: 0;
    transform: translateY(13px);
    /* Einklappen: Inhalt blendet gemeinsam mit der einfahrenden Karte aus */
    transition: opacity .3s ease .22s, transform .3s ease .22s;
}

.coa.open .coa-sub[b-iarkkom8gm],
.coa.open .coa-block[b-iarkkom8gm] {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

.coa.open .coa-sub[b-iarkkom8gm] {
    transition-delay: .05s;
}

.coa.open .coa-block:nth-of-type(1)[b-iarkkom8gm] {
    transition-delay: .13s;
}

.coa.open .coa-block:nth-of-type(2)[b-iarkkom8gm] {
    transition-delay: .21s;
}

.coa.open .coa-block:nth-of-type(3)[b-iarkkom8gm] {
    transition-delay: .29s;
}

/* schmale Ansicht: Karte steht unter dem Wahltrend - normaler Textfluss */
@media (max-width: 1080px) {
    .coa[b-iarkkom8gm] {
        position: static;
        min-width: 0;
    }
}

/* ===== Aktuelle Regierung ============================================== */
.coa-gov-head[b-iarkkom8gm] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.coa-gov-date[b-iarkkom8gm] {
    color: var(--ink-faint);
    font-size: .72rem;
    font-weight: 500;
}

.coa-option.coa-gov[b-iarkkom8gm] {
    width: 100%;
}

.coa-gov-note[b-iarkkom8gm] {
    margin: 8px 0 0;
    font-size: .78rem;
    line-height: 1.4;
    padding: 7px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.coa-gov-note.ok[b-iarkkom8gm] {
    color: #2e7a3a;
    background: rgba(54, 132, 73, .1);
    border-color: rgba(54, 132, 73, .25);
}

.coa-gov-note.warn[b-iarkkom8gm] {
    color: #a3422a;
    background: rgba(180, 76, 48, .1);
    border-color: rgba(180, 76, 48, .25);
}
/* /Components/Shared/GermanyMap.razor.rz.scp.css */
.gmap[b-escyzzqjg8] {
    position: relative;
}

/* Buehne - sorgt fuer die 3D-Perspektive des Wobble */
.gmap-stage[b-escyzzqjg8] {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px;
    padding: 10px 0 6px;
    /* weicher Lichtschein hinter der Karte fuer mehr Tiefe */
    background: radial-gradient(ellipse 56% 50% at 50% 44%,
                rgba(255, 255, 255, .6), transparent 72%);
}

.gmap-caption[b-escyzzqjg8] {
    margin: 6px 0 2px;
    text-align: center;
    font-size: .73rem;
    color: var(--ink-soft);
}

/* Rahmen traegt SVG + Beschriftungs-Overlay deckungsgleich, dazu den Wobble */
.gmap-frame[b-escyzzqjg8] {
    position: relative;
    width: min(470px, 100%);
    aspect-ratio: 1000 / 1355;
    transform: rotateX(calc(var(--wob-x, 0) * 1deg)) rotateY(calc(var(--wob-y, 0) * 1deg));
    transform-style: preserve-3d;
    will-change: transform;
}

.gmap-svg[b-escyzzqjg8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 16px 24px rgba(38, 50, 28, .24));
}

/* Bundesland-Flaeche */
.gstate[b-escyzzqjg8] {
    stroke: #1c1e15;
    stroke-width: 1.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill .4s ease, opacity .32s ease, filter .25s ease, transform .28s cubic-bezier(.34, .8, .3, 1);
}

    .gstate:hover[b-escyzzqjg8] {
        filter: brightness(1.08) drop-shadow(0 4px 7px rgba(20, 24, 14, .4));
        transform: scale(1.012);
    }

/* sobald ein Land gewaehlt ist, treten die uebrigen sanft zurueck */
.gstate.is-dim[b-escyzzqjg8] {
    opacity: .66;
    filter: saturate(.72);
}

    .gstate.is-dim:hover[b-escyzzqjg8] {
        opacity: .94;
        filter: saturate(.94) brightness(1.07) drop-shadow(0 4px 7px rgba(20, 24, 14, .4));
    }

/* gewaehltes Land - kraeftiger Rand, leicht angehoben */
.gstate.is-sel[b-escyzzqjg8] {
    stroke: #14160e;
    stroke-width: 3;
    filter: drop-shadow(0 7px 9px rgba(18, 22, 12, .5));
    transform: scale(1.022);
}

    .gstate.is-sel:hover[b-escyzzqjg8] {
        filter: brightness(1.06) drop-shadow(0 7px 9px rgba(18, 22, 12, .5));
        transform: scale(1.032);
    }

/* Kuerzel-Beschriftungen */
.gmap-labels[b-escyzzqjg8] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.glabel[b-escyzzqjg8] {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-display, sans-serif);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #14160e;
    white-space: nowrap;
    /* durchgehende helle Kontur (8 Richtungen) plus weicher Schein */
    text-shadow:
        -1.3px 0 0 #fff, 1.3px 0 0 #fff, 0 -1.3px 0 #fff, 0 1.3px 0 #fff,
        -1.3px -1.3px 0 #fff, 1.3px -1.3px 0 #fff,
        -1.3px 1.3px 0 #fff, 1.3px 1.3px 0 #fff,
        0 0 5px rgba(255, 255, 255, .95);
    transition: opacity .3s ease, font-size .22s ease, color .22s ease;
}

/* helle Schrift mit dunkler Kontur auf dunkel eingefaerbten Laendern */
.glabel.on-dark[b-escyzzqjg8] {
    color: #fff;
    text-shadow:
        -1.3px 0 0 #0c0e08, 1.3px 0 0 #0c0e08, 0 -1.3px 0 #0c0e08, 0 1.3px 0 #0c0e08,
        -1.3px -1.3px 0 #0c0e08, 1.3px -1.3px 0 #0c0e08,
        -1.3px 1.3px 0 #0c0e08, 1.3px 1.3px 0 #0c0e08,
        0 0 5px rgba(4, 6, 2, .9);
}

.glabel.is-dim[b-escyzzqjg8] {
    opacity: .42;
}

.glabel.is-sel[b-escyzzqjg8] {
    font-size: .95rem;
}

/* Hover-Tooltip - feste Breite; JS platziert es direkt ueber dem Land */
.gmap-tip[b-escyzzqjg8] {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    box-sizing: border-box;
    /* startet ausserhalb des Bildes - JS platziert es am Land */
    left: -9999px;
    top: 0;
    width: 272px;
    padding: 12px 14px;
    background: var(--glass-strong);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    animation: gtipIn-b-escyzzqjg8 .14s ease-out;
}

@keyframes gtipIn-b-escyzzqjg8 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.gmap-tip-head[b-escyzzqjg8] {
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    color: var(--ink);
}

/* Mini-Wahltrend - dasselbe Balkenbild wie ueberall, nur kompakt */
.gtip-chart[b-escyzzqjg8] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 9px 0 1px;
}

.gtip-bar[b-escyzzqjg8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gtip-bv[b-escyzzqjg8] {
    margin-bottom: 2px;
    font-size: .56rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.gtip-btrack[b-escyzzqjg8] {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gtip-bfill[b-escyzzqjg8] {
    width: 78%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28);
}

.gtip-bn[b-escyzzqjg8] {
    margin-top: 3px;
    font-size: .55rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.gmap-tip-meta[b-escyzzqjg8] {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
    font-size: .73rem;
    line-height: 1.35;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.gmap-tip-foot[b-escyzzqjg8] {
    margin-top: 4px;
    font-size: .67rem;
    color: var(--ink-faint);
}
/* /Components/Shared/NewPollBanner.razor.rz.scp.css */
/* Huelle - kollabiert beim Ausblenden sanft (Hoehe + Rand), statt hart wegzuspringen */
.np-shell[b-1q4srtw32h] {
    display: grid;
    grid-template-rows: 1fr;
    margin-bottom: 22px;
    transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1),
                margin-bottom .32s cubic-bezier(.4, 0, .2, 1);
}

    .np-shell.leaving[b-1q4srtw32h] {
        grid-template-rows: 0fr;
        margin-bottom: 0;
    }

    .np-shell.leaving .np-note[b-1q4srtw32h] {
        opacity: 0;
        transition: opacity .24s ease;
    }

/* "Neue Umfrage" - bewusst als schlanker Hinweis gestaltet, nicht als zweites
   Hauptdiagramm. Standardmaessig nur eine Notification-Leiste, aufklappbar. */
.np-note[b-1q4srtw32h] {
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(237, 244, 224, .66));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, .85),
                0 2px 6px rgba(40, 45, 28, .05),
                0 14px 30px -22px rgba(38, 50, 28, .4);
    overflow: hidden;
    animation: npDrop-b-1q4srtw32h .5s cubic-bezier(.2, .8, .3, 1) backwards;
}

@keyframes npDrop-b-1q4srtw32h {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
}

/* Notification-Leiste (immer sichtbar) */
.np-note-bar[b-1q4srtw32h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.np-note.open .np-note-bar[b-1q4srtw32h] {
    border-bottom: 1px solid var(--line-soft);
}

.np-note-dot[b-1q4srtw32h] {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    animation: npPulse-b-1q4srtw32h 1.9s ease-in-out infinite;
}

@keyframes npPulse-b-1q4srtw32h {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);
    }
}

.np-note-msg[b-1q4srtw32h] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.np-note-title[b-1q4srtw32h] {
    font-weight: 700;
    font-size: .96rem;
    color: var(--ink);
}

.np-note-hint[b-1q4srtw32h] {
    font-size: .82rem;
    color: var(--ink-soft);
}

.np-note.open .np-note-hint[b-1q4srtw32h] {
    display: none;
}

.np-note-act[b-1q4srtw32h] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: var(--gloss-green);
    border: none;
    padding: .4rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 9px -3px var(--accent-glow);
    transition: filter .15s, transform .12s;
}

    .np-note-act:hover[b-1q4srtw32h] {
        filter: brightness(1.07);
        transform: translateY(-1px);
    }

.np-note-chev[b-1q4srtw32h] {
    font-size: .68rem;
    transition: transform .3s ease;
}

.np-note.open .np-note-chev[b-1q4srtw32h] {
    transform: rotate(180deg);
}

.np-note-x[b-1q4srtw32h] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ink-faint);
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, color .15s;
}

    .np-note-x:hover[b-1q4srtw32h] {
        background: rgba(40, 45, 28, .08);
        color: var(--ink);
    }

/* aufklappbarer Koerper - weiche Hoehen-Animation ueber grid-template-rows */
.np-note-body[b-1q4srtw32h] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1);
}

.np-note.open .np-note-body[b-1q4srtw32h] {
    grid-template-rows: 1fr;
}

.np-note-body-in[b-1q4srtw32h] {
    overflow: hidden;
    min-height: 0;
}

.np-poll[b-1q4srtw32h] {
    padding: 4px 18px 16px;
}

/* Kopf des Detailbereichs */
.np-poll-head[b-1q4srtw32h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 16px;
}

.np-poll-id[b-1q4srtw32h] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.np-poll-inst[b-1q4srtw32h] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .015em;
    color: var(--ink);
}

/* Bundesland-Plakette - nur bei Landtagsumfragen gesetzt */
.np-poll-land[b-1q4srtw32h] {
    align-self: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: var(--gloss-green);
    padding: .26rem .62rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 8px -3px var(--accent-glow);
}

.np-poll-tasker[b-1q4srtw32h] {
    font-size: .82rem;
    color: var(--ink-soft);
}

.np-poll-nav[b-1q4srtw32h] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.np-poll-date[b-1q4srtw32h] {
    font-size: .82rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.np-pager[b-1q4srtw32h] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.np-arrow[b-1q4srtw32h] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: linear-gradient(170deg, #ffffff, #f3f1e5);
    color: var(--ink-soft);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .14s, color .14s, transform .12s;
}

    .np-arrow:hover:not(:disabled)[b-1q4srtw32h] {
        border-color: var(--accent);
        color: var(--accent-strong);
        transform: translateY(-1px);
    }

    .np-arrow:disabled[b-1q4srtw32h] {
        opacity: .32;
        cursor: default;
    }

.np-count[b-1q4srtw32h] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* Balken - Plot-Reihe oben, Sockel-Reihe darunter (Optik 1:1 wie Wahltrend) */
.np-plot-row[b-1q4srtw32h] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 170px;
}

.np-base-row[b-1q4srtw32h] {
    display: flex;
    gap: 7px;
    margin-top: -3px;
}

.np-col[b-1q4srtw32h] {
    flex: 1;
    min-width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.np-val[b-1q4srtw32h] {
    flex-shrink: 0;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: .98rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.np-pct[b-1q4srtw32h] {
    font-size: .62rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.np-fill[b-1q4srtw32h] {
    flex-shrink: 0;
    width: 78%;
    max-width: 100px;
    height: var(--h);
    min-height: 3px;
    background: var(--c);
    border-radius: 9px 9px 0 0;
}

.np-note.open .np-fill[b-1q4srtw32h] {
    animation: npGrow-b-1q4srtw32h .7s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: var(--d);
}

@keyframes npGrow-b-1q4srtw32h {
    from {
        height: 0;
    }
}

/* Sockel - dunkle, abgedunkelte Parteifarbe mit scharfer Kante (wie Wahltrend) */
.np-base[b-1q4srtw32h] {
    flex: 1;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px 9px;
    border-radius: 9px;
    background: #1c1e14;
    background: color-mix(in srgb, var(--c, #6b6e5e) 60%, #121309);
    box-shadow: 0 -2px 0 rgba(6, 8, 4, .6),
                inset 0 2.5px 0 rgba(255, 255, 255, .28),
                0 9px 16px -7px rgba(12, 14, 8, .5);
}

.np-name[b-1q4srtw32h] {
    font-weight: 600;
    font-size: .88rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    text-align: center;
    white-space: nowrap;
}

/* Trend je Partei - Veraenderung zur letzten Umfrage desselben Instituts */
.np-trend[b-1q4srtw32h] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 5px;
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.np-trend-a[b-1q4srtw32h] {
    font-size: .46rem;
    line-height: 1;
}

.np-trend-up[b-1q4srtw32h] {
    color: #fff;
    background: linear-gradient(165deg, #57ad6c, #43925a 55%, #327846);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.np-trend-down[b-1q4srtw32h] {
    color: #fff;
    background: linear-gradient(165deg, #db6c54, #c8503a 55%, #ac4029);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

.np-trend-flat[b-1q4srtw32h] {
    color: var(--ink-soft);
    background: rgba(255, 255, 255, .62);
}

/* 5-%-Linie - weiss gestrichelt wie im Wahltrend */
.np-hurdle[b-1q4srtw32h] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed #ffffff;
    filter: drop-shadow(0 1px 2px rgba(16, 18, 12, .6));
    z-index: 1;
}

.np-hurdle-tag[b-1q4srtw32h] {
    position: absolute;
    right: 1px;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink-faint);
}

/* Detailinfos */
.np-foot[b-1q4srtw32h] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--line-soft);
    font-size: .8rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.np-meta-k[b-1q4srtw32h] {
    margin-right: 5px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent-strong);
}

/* sichtbar lassen - sonst wird der Wert ueber dem hoechsten Balken abgeschnitten */
.np-chart[b-1q4srtw32h] {
    overflow: visible;
}

/* ---- Mobil ---- Breakpoint synchron mit App-Layout (1080px), damit die
   64px-Mindestbreiten der Balken nicht den Viewport sprengen. */
@media (max-width: 1080px) {
    .np-note-bar[b-1q4srtw32h] {
        padding: 11px 13px;
        gap: 9px;
    }

    .np-note-hint[b-1q4srtw32h] {
        display: none;
    }

    .np-poll[b-1q4srtw32h] {
        padding: 4px 13px 14px;
    }

    .np-poll-head[b-1q4srtw32h] {
        margin: 12px 0 14px;
    }

    .np-poll-inst[b-1q4srtw32h] {
        font-size: 1.05rem;
    }

    /* genug Hoehe, damit der Wert ueber dem hoechsten Balken nicht abschneidet */
    .np-plot-row[b-1q4srtw32h] {
        height: 168px;
        gap: 4px;
    }

    .np-base-row[b-1q4srtw32h] {
        gap: 4px;
    }

    /* Balken schrumpfen mit -> keine Scrollleiste */
    .np-col[b-1q4srtw32h],
    .np-base[b-1q4srtw32h] {
        min-width: 0;
    }

    .np-val[b-1q4srtw32h] {
        font-size: .8rem;
        margin-bottom: 4px;
    }

    /* kleineres Kuerzel + knappes Polster -> bleibt im Sockel */
    .np-base[b-1q4srtw32h] {
        padding: 6px 2px 7px;
    }

    .np-name[b-1q4srtw32h] {
        font-size: .6rem;
        letter-spacing: -.02em;
    }

    .np-foot[b-1q4srtw32h] {
        gap: 4px 14px;
    }
}
/* /Components/Shared/PollMatrix.razor.rz.scp.css */
.matrix-wrap[b-9u9i4g09hb] {
    max-height: 540px;
    overflow: auto;
}

.matrix-empty[b-9u9i4g09hb] {
    padding: 40px;
    text-align: center;
    color: var(--ink-soft);
    font-size: .9rem;
}

.matrix[b-9u9i4g09hb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
}

/* Header - pastellgruen mit leichtem Verlauf, glossy abgesetzt */
.matrix thead th[b-9u9i4g09hb] {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Milchglas - die bunten Heatmap-Zeilen schimmern beim Scrollen sanft durch */
    background: linear-gradient(155deg, rgba(247, 235, 227, .76), rgba(238, 211, 195, .68));
    backdrop-filter: blur(13px) saturate(165%);
    -webkit-backdrop-filter: blur(13px) saturate(165%);
    color: var(--ink);
    font-weight: 700;
    text-align: right;
    padding: 12px 11px 10px;
    border-bottom: 5px solid rgba(var(--accent-box-shade), .3);
    white-space: nowrap;
    /* Spread 0 statt negativ - sonst entstehen Luecken zwischen den Spalten-Schatten */
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), 0 7px 11px 0 rgba(38, 50, 28, .14);
    transition: filter .16s ease;
}

    .matrix thead th.c-date[b-9u9i4g09hb],
    .matrix thead th.c-inst[b-9u9i4g09hb] {
        text-align: left;
        color: var(--accent-strong);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

/* Datenzellen */
.matrix tbody td[b-9u9i4g09hb] {
    position: relative;
    padding: 8px 11px;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: box-shadow .16s ease;
}

.matrix tbody tr:last-child td[b-9u9i4g09hb] {
    border-bottom: none;
}

.c-date[b-9u9i4g09hb] {
    color: var(--ink-soft);
    white-space: nowrap;
    text-align: left !important;
}

.c-inst[b-9u9i4g09hb] {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    text-align: left !important;
}

.c-val[b-9u9i4g09hb] {
    font-weight: 700;
}

.c-empty[b-9u9i4g09hb] {
    color: var(--ink-faint);
    font-weight: 400;
    background: rgba(255, 255, 255, .4);
}

/* Klickbare Zeilen (Vergleich) */
.matrix tbody tr.row-click[b-9u9i4g09hb] {
    cursor: pointer;
}

/* Aktive Vergleichs-Auswahl - linke Akzentkante */
.matrix tbody tr.row-sel-a td:first-child[b-9u9i4g09hb] {
    box-shadow: inset 4px 0 0 var(--accent-strong);
}

.matrix tbody tr.row-sel-b td:first-child[b-9u9i4g09hb] {
    box-shadow: inset 4px 0 0 #c97a3a;
}

.matrix tbody tr.row-sel td.c-date[b-9u9i4g09hb],
.matrix tbody tr.row-sel td.c-inst[b-9u9i4g09hb] {
    color: var(--accent-strong);
    font-weight: 800;
}

/* Fadenkreuz: Zeile + Spalte bekommen einen Overlay-Schleier (::after) - der
   bringt eine eigene Farbe mit und ist daher auch auf farblosen Zellen wie
   Datum/Institut sichtbar. Die fokussierte Zelle traegt nur den Rahmen; ihr
   Schleier verschwindet uebergangslos, damit nie eine Flaeche aufblitzt. */
.matrix tbody td[b-9u9i4g09hb]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(39, 42, 32, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.matrix tbody td.xh-row[b-9u9i4g09hb]::after,
.matrix tbody td.xh-col[b-9u9i4g09hb]::after {
    opacity: 1;
}

.matrix tbody td.xh-cell[b-9u9i4g09hb]::after {
    opacity: 0;
    transition: none;
}

.matrix tbody td.xh-cell[b-9u9i4g09hb] {
    box-shadow: inset 0 0 0 2px var(--ink),
                inset 0 0 0 3px rgba(255, 255, 255, .42);
}

.matrix thead th.xh-col[b-9u9i4g09hb] {
    filter: brightness(.9);
}

/* ---- Mobil: kompaktere Tabelle, damit mehr Spalten sichtbar sind ---- */
@media (max-width: 720px) {
    .matrix[b-9u9i4g09hb] {
        font-size: .72rem;
    }

        .matrix thead th[b-9u9i4g09hb] {
            padding: 9px 7px 8px;
        }

        .matrix tbody td[b-9u9i4g09hb] {
            padding: 6px 7px;
        }

    .matrix-wrap[b-9u9i4g09hb] {
        max-height: 460px;
    }
}

/* sehr schmale Schirme: noch kompakter, damit moeglichst alle Spalten passen */
@media (max-width: 560px) {
    .matrix[b-9u9i4g09hb] {
        font-size: .62rem;
    }

        .matrix thead th[b-9u9i4g09hb] {
            padding: 7px 4px 6px;
        }

        .matrix tbody td[b-9u9i4g09hb] {
            padding: 5px 4px;
        }
}
/* /Components/Shared/ShareButton.razor.rz.scp.css */
/* auffälliger Teilen-Knopf im Terracotta-Stil der App */
.share-btn[b-5doop4g8i1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--gloss-green);
    border: none;
    padding: .48rem .95rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 5px 14px -4px var(--accent-glow);
    transition: filter .15s, transform .14s, box-shadow .15s;
}

    .share-btn:hover:not(:disabled)[b-5doop4g8i1] {
        filter: brightness(1.08);
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 9px 20px -4px var(--accent-glow);
    }

    .share-btn:active:not(:disabled)[b-5doop4g8i1] {
        transform: translateY(0) scale(.96);
    }

    .share-btn:disabled[b-5doop4g8i1] {
        cursor: default;
        opacity: .8;
    }

.share-ico[b-5doop4g8i1] {
    width: 14px;
    height: 14px;
}

.share-btn.busy .share-ico[b-5doop4g8i1] {
    animation: shareSpin-b-5doop4g8i1 1s linear infinite;
}

@keyframes shareSpin-b-5doop4g8i1 {
    to {
        transform: rotate(360deg);
    }
}

/* Mobil: kompakter, nur-Icon-Knopf */
@media (max-width: 560px) {
    .share-txt[b-5doop4g8i1] {
        display: none;
    }

    .share-btn[b-5doop4g8i1] {
        padding: .42rem .5rem;
        gap: 0;
    }
}
/* /Components/Shared/SurveyCompareCard.razor.rz.scp.css */
/* Persistent sichtbare Vergleichs-Card. CSS-Expand bei Auswahl. */

.survey-compare[b-rnxm7rgkrw] {
    margin: 18px 0 28px;
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .82), rgba(247, 240, 230, .76));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 24px -14px rgba(40, 50, 28, .42);
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.survey-compare.is-active[b-rnxm7rgkrw] {
    box-shadow: 0 14px 36px -16px rgba(40, 50, 28, .55);
}

.sc-head[b-rnxm7rgkrw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.sc-head h2[b-rnxm7rgkrw] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    flex: 1;
}

.sc-ico[b-rnxm7rgkrw] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.sc-ico[b-rnxm7rgkrw]  .section-svg {
    width: 16px;
    height: 16px;
}

.sc-clear[b-rnxm7rgkrw] {
    appearance: none;
    border: none;
    background: rgba(40, 45, 28, .07);
    color: var(--ink-soft);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sc-clear:hover[b-rnxm7rgkrw] {
    background: rgba(180, 60, 60, .12);
    color: #a23030;
}

/* Hint-Modus: kompakt, kein Diagramm */
.sc-hint[b-rnxm7rgkrw] {
    padding: 14px 20px 18px;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.5;
}

.sc-hint p[b-rnxm7rgkrw] {
    margin: 0 0 4px;
}

.sc-hint b[b-rnxm7rgkrw] {
    color: var(--ink);
}

.sc-hint-sub[b-rnxm7rgkrw] {
    color: var(--ink-faint);
    font-size: .82rem;
}

/* Aktiv-Modus: expandiert per Grid-Animation */
.sc-controls[b-rnxm7rgkrw],
.sc-rows[b-rnxm7rgkrw],
.sc-empty[b-rnxm7rgkrw],
.sc-legend[b-rnxm7rgkrw] {
    /* Beim Wechsel von is-empty -> is-active sanft einfaden */
    animation: scFadeIn-b-rnxm7rgkrw .35s ease both;
}

@keyframes scFadeIn-b-rnxm7rgkrw {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-controls[b-rnxm7rgkrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-soft);
    font-size: .88rem;
}

.sc-a[b-rnxm7rgkrw], .sc-b[b-rnxm7rgkrw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
}

.sc-a b[b-rnxm7rgkrw], .sc-b b[b-rnxm7rgkrw] {
    color: var(--accent-strong);
}

.sc-b b[b-rnxm7rgkrw] {
    color: #c97a3a;
}

.sc-vs[b-rnxm7rgkrw] {
    color: var(--ink-faint);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
}

.sc-mode[b-rnxm7rgkrw] {
    display: inline-flex;
    border-radius: 999px;
    background: rgba(40, 45, 28, .06);
    padding: 3px;
    gap: 2px;
}

.sc-mode-btn[b-rnxm7rgkrw] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sc-mode-btn.on[b-rnxm7rgkrw] {
    background: var(--gloss-green);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sc-mode-btn:hover:not(.on)[b-rnxm7rgkrw] {
    color: var(--accent-strong);
}

.sc-hint-inline[b-rnxm7rgkrw] {
    color: var(--ink-faint);
    font-style: italic;
    font-size: .82rem;
}

.sc-clear-mini[b-rnxm7rgkrw] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: .9rem;
    margin-left: 2px;
}

.sc-clear-mini:hover[b-rnxm7rgkrw] {
    color: #a23030;
}

.sc-share-slot[b-rnxm7rgkrw] {
    margin-left: auto;
}

.sc-empty[b-rnxm7rgkrw] {
    padding: 20px;
    text-align: center;
    color: var(--ink-faint);
    font-size: .85rem;
}

/* Saeulen-Layout: pro Partei eine A/B-Saeule, leicht versetzt und ueberlagert.
   A = Vollfarbe, B = gleicher Farbton, diagonal gestreift und nach rechts
   versetzt - so wirken die beiden wie ein Paar, ohne sich zu verdecken. */
.sc-cols[b-rnxm7rgkrw] {
    /* Top-Padding entspricht der Hoehe des Werte-Stapels (A + B + Spalt
       ~ 32 px) plus etwas Luft - so haengt der Stapel auch ueber der
       hoechsten Saeule nicht in die Controls darueber rein. */
    padding: 38px 20px 6px;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    align-items: end;
}

.sc-col[b-rnxm7rgkrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.sc-col-plot[b-rnxm7rgkrw] {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
}

/* A liegt vorne (z-index 2), B versetzt hinter A (z-index 1).
   Beide nutzen die selbe CSS-Variable --c und stehen auf der Grundlinie. */
.sc-col-bar[b-rnxm7rgkrw] {
    position: absolute;
    bottom: 0;
    width: 46%;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    transition: height .4s cubic-bezier(.4, 0, .2, 1);
}

.sc-col-a[b-rnxm7rgkrw] {
    left: 14%;
    z-index: 2;
    background: var(--c);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 38%),
        linear-gradient(0deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 30%);
    box-shadow: 0 2px 6px -2px rgba(40, 45, 28, .35);
}

.sc-col-b[b-rnxm7rgkrw] {
    right: 14%;
    z-index: 1;
    /* Diagonale Streifen wie im teilbaren Bild: voller Partei-Ton im Streifen,
       hellere Variante der Partei-Farbe in den Luecken (statt cremiger Trager).
       Trick: Volle Partei-Farbe als background-color + Streifen aus Partei-
       Farbe und halbtransparentem Weiss als Pattern - das Weiss mischt sich
       optisch mit der Farbflaeche darunter zu einer aufgehellten Variante.
       Streifenrichtung "\" (nach rechts unten) - identisch zum Share-Bild. */
    background-color: var(--c);
    background-image: repeating-linear-gradient(135deg,
        var(--c) 0 7px,
        rgba(255, 255, 255, .62) 7px 14px);
    box-shadow: inset 0 0 0 1.5px var(--c);
}

.sc-col-bar:hover[b-rnxm7rgkrw] {
    filter: brightness(1.06);
}

/* Werte-Stapel: A oben (fett, dunkel), B darunter (gedaempft). Beide ueber
   der Spalten-Mitte zentriert und auf der hoeheren Saeule verankert
   (bottom:max(hA,hB)% via inline). Wir heben den ganzen Block ueber den
   Saeulenkopf via transform:translateY(-100%) plus kleinem Luftspalt. */
.sc-col-vals[b-rnxm7rgkrw] {
    /* bottom: max(hA,hB)% steht im Inline-Style - die Unterkante des Stapels
       sitzt damit exakt auf der Oberkante der hoeheren Saeule. Der Stapel
       waechst von dort aus nach OBEN (kein translateY noetig, das wuerde
       sonst eine ganze Stack-Hoehe Abstand erzeugen).
       margin-bottom = direkter, kleiner Luftspalt zum Saeulenkopf. */
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 1px;
    pointer-events: none;
    margin-bottom: 2px;
}

.sc-col-val[b-rnxm7rgkrw] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
}

.sc-col-val-a[b-rnxm7rgkrw] {
    color: var(--ink);
    font-weight: 800;
    font-size: .82rem;
}

.sc-col-val-b[b-rnxm7rgkrw] {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .7rem;
}

/* Sockel - liegt direkt unter den Saeulen und traegt das Parteikuerzel.
   Wie im teilbaren Bild: breit, in Parteifarbe, mit Glanz-Highlight oben und
   sanftem Schatten unten -> die Saeulen wirken, als wuerden sie darauf stehen. */
.sc-col-base[b-rnxm7rgkrw] {
    margin-top: 0;
    width: 84%;
    padding: 6px 4px;
    border-radius: 0 0 9px 9px;
    background: var(--c);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .28),
        inset 0 -10px 14px -10px rgba(0, 0, 0, .35),
        0 3px 6px -3px rgba(40, 45, 28, .35);
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sc-col-delta[b-rnxm7rgkrw] {
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .78rem;
    text-align: center;
}

.sc-delta-up[b-rnxm7rgkrw]    { color: #2e7a3a; }
.sc-delta-down[b-rnxm7rgkrw]  { color: #b03939; }
.sc-delta-flat[b-rnxm7rgkrw]  { color: var(--ink-faint); }

.sc-delta-arr[b-rnxm7rgkrw] {
    margin-right: 2px;
    font-size: .72rem;
}

.sc-legend[b-rnxm7rgkrw] {
    margin: 6px 20px 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-soft);
    color: var(--ink-soft);
    font-size: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sc-legend-a[b-rnxm7rgkrw]::before,
.sc-legend-b[b-rnxm7rgkrw]::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -2px;
}

.sc-legend-a[b-rnxm7rgkrw]::before {
    background: var(--accent-strong);
}

.sc-legend-b[b-rnxm7rgkrw]::before {
    background-color: var(--accent-strong);
    background-image: repeating-linear-gradient(135deg,
        var(--accent-strong) 0 3px,
        rgba(255, 255, 255, .62) 3px 6px);
    box-shadow: inset 0 0 0 1px var(--accent-strong);
}

.sc-legend-delta[b-rnxm7rgkrw] {
    margin-left: auto;
    color: var(--ink-faint);
}

@media (max-width: 720px) {
    .sc-controls[b-rnxm7rgkrw] {
        padding: 12px 14px;
        font-size: .82rem;
    }

    .sc-cols[b-rnxm7rgkrw] {
        padding: 30px 12px 4px;
        gap: 2px;
    }

    .sc-col-plot[b-rnxm7rgkrw] {
        height: 130px;
    }

    .sc-col-val[b-rnxm7rgkrw] {
        font-size: .68rem;
        top: -18px;
    }

    .sc-col-base[b-rnxm7rgkrw] {
        font-size: .64rem;
        padding: 3px 5px;
    }

    .sc-col-delta[b-rnxm7rgkrw] {
        font-size: .68rem;
    }

    .sc-share-slot[b-rnxm7rgkrw] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Shared/WahltrendChart.razor.rz.scp.css */
.chart[b-9f2o1p16aa] {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* zieht sich leicht in den Kartenrand, damit die "5 %"-Marken
       ausserhalb der Balken Platz finden, ohne abgeschnitten zu werden */
    margin: 0 -10px;
    padding: 0 10px;
    --plot-h: 300px;
}

.plot-row[b-9f2o1p16aa] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: var(--plot-h);
}

.base-row[b-9f2o1p16aa] {
    display: flex;
    gap: 8px;
    /* leichte Ueberlappung: der Sockel deckt den Balkenfuss ab und steht
       damit sichtbar vor dem Balken */
    margin-top: -3px;
}

.bar-col[b-9f2o1p16aa] {
    flex: 1;
    min-width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* 5-%-Huerdenlinie ueber die gesamte Plotbreite */
.hurdle[b-9f2o1p16aa] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hf, 0) * 100%);
    height: 0;
    z-index: 2;
    pointer-events: none;
}

/* weisse, gestrichelte Linie - der dunkle Schlagschatten macht sie
   auf hellem Hintergrund wie auf den Balken gut sichtbar */
.hurdle-line[b-9f2o1p16aa] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 2px dashed #ffffff;
    filter: drop-shadow(0 1px 2px rgba(16, 18, 12, .6));
}

/* maximal dezente "5 %"-Markierung, knapp ausserhalb der Balken */
.hurdle-mark[b-9f2o1p16aa] {
    position: absolute;
    bottom: 2px;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-faint);
}

.hurdle-mark-l[b-9f2o1p16aa] {
    left: -8px;
}

.hurdle-mark-r[b-9f2o1p16aa] {
    right: -8px;
}

.bar-value[b-9f2o1p16aa] {
    /* ueber der Huerdenlinie, damit kleine Werte nicht unter den Strichen untergehen */
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .bar-value .pct[b-9f2o1p16aa] {
        font-size: .72rem;
        color: var(--ink-faint);
        font-weight: 600;
    }

/* flache, moderne Saeule - waechst von unten nach oben */
.bar-fill[b-9f2o1p16aa] {
    flex-shrink: 0;
    width: 78%;
    max-width: 118px;
    height: var(--h);
    min-height: 3px;
    background: var(--c);
    border-radius: 9px 9px 0 0;
    transition: height .6s cubic-bezier(.34, .8, .3, 1);
    animation: barGrow-b-9f2o1p16aa .85s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: var(--delay);
}

@keyframes barGrow-b-9f2o1p16aa {
    from {
        height: 0;
    }

    to {
        height: var(--h);
    }
}

/* Sockel unter dem Balken - leicht graeulicher Tint der Parteifarbe,
   damit er klar als eigenes Element und nicht als Teil des Balkens liest */
.bar-base[b-9f2o1p16aa] {
    flex: 1;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 9px;
    border-radius: 9px;
    /* kraeftige, abgedunkelte Parteifarbe - traegt weisse Schrift */
    background: #1c1e14;
    background: color-mix(in srgb, var(--c, #6b6e5e) 60%, #121309);
    /* klare Kante zum Balken: scharfe dunkle Linie + heller Saum darunter,
       dazu Schlagschatten nach unten fuer den 3D-Sockel */
    box-shadow: 0 -2px 0 rgba(6, 8, 4, .6),
                inset 0 2.5px 0 rgba(255, 255, 255, .28),
                0 9px 16px -7px rgba(12, 14, 8, .5);
}

.bar-name[b-9f2o1p16aa] {
    font-weight: 600;
    font-size: .9rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    text-align: center;
    white-space: nowrap;
}

.bar-trend[b-9f2o1p16aa] {
    display: flex;
    justify-content: center;
}

.trend[b-9f2o1p16aa] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: trendPop-b-9f2o1p16aa .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes trendPop-b-9f2o1p16aa {
    0% {
        opacity: .25;
        transform: scale(.78);
    }

    55% {
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.trend-arrow[b-9f2o1p16aa] {
    font-size: .58rem;
    line-height: 1;
}

.trend-up[b-9f2o1p16aa] {
    color: #fff;
    background: linear-gradient(165deg, #57ad6c, #43925a 55%, #327846);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(67, 146, 90, .55);
}

.trend-down[b-9f2o1p16aa] {
    color: #fff;
    background: linear-gradient(165deg, #db6c54, #c8503a 55%, #ac4029);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -5px 8px -4px rgba(0, 0, 0, .34), 0 3px 8px -2px rgba(200, 80, 58, .5);
}

.trend-flat[b-9f2o1p16aa] {
    color: var(--ink-soft);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(40, 45, 28, .08);
}

.trend-new[b-9f2o1p16aa] {
    color: var(--ink-faint);
    background: linear-gradient(165deg, #edebde, #ddd9c8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* Kompakt-Modus (Koalitionsrechner offen / enge Container) wird vom Eltern-
   Container per ::deep gesteuert - die Klassen liegen hier im Chart-Scope. */