/* ═══════════════════════════════════════════════════════════════
   bv-abstaende.css – einheitlicher vertikaler Rhythmus
   für bevoelkerung.php und wahlen.php
   Als LETZTES Stylesheet einbinden.
   ═══════════════════════════════════════════════════════════════ */

.bv-wrap {
    --bv-gap: 20px;        /* zwischen Blöcken (Hero → KPIs, Widget → Hinweis) */
    --bv-gap-sec: 34px;    /* vor einer neuen Abschnittsüberschrift */
    --bv-gap-head: 10px;   /* Überschrift → zugehöriges Widget */
    --bv-gap-kpi: 14px;    /* zwischen den KPI-Kacheln */
}

/* ── Grund-Reset: Abstände nur noch über diese Datei ─────────── */
.bv-wrap .bv-screen > *,
.bv-wrap #bs > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Abstand zwischen allen Blöcken ─────────────────────────── */
.bv-wrap .bv-screen > * + *,
.bv-wrap #bs > * + * {
    margin-top: var(--bv-gap);
}

/* Neue Abschnitte bekommen mehr Luft nach oben … */
.bv-wrap .bv-screen > .wx-sec-h,
.bv-wrap .bv-screen > .bv-grid2,
.bv-wrap .bv-screen > #bs,
.bv-wrap #bs > .wx-sec-h {
    margin-top: var(--bv-gap-sec);
}
/* … ausser ganz oben bzw. direkt nach dem Zurück-Button */
.bv-wrap .bv-screen > .wx-sec-h:first-child,
.bv-wrap #bs > .wx-sec-h:first-child {
    margin-top: 0;
}

/* … und kleben dafür enger an ihrem eigenen Widget */
.bv-wrap .wx-sec-h + .widget,
.bv-wrap .wx-sec-h + .bs-grid {
    margin-top: var(--bv-gap-head) !important;
}

/* ── Abschnittsüberschrift ──────────────────────────────────── */
.bv-wrap .wx-sec-h {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    margin-bottom: 0;
    line-height: 1.2;
}
.bv-wrap .wx-sec-h svg {
    width: 14px;
    height: 14px;
    flex: none;
}

/* ── Hero ───────────────────────────────────────────────────── */
.bv-wrap .bv-hero {
    padding: 26px 30px;
}

/* ── KPI-Kacheln ────────────────────────────────────────────── */
.bv-wrap .bv-kpis {
    gap: var(--bv-gap-kpi);
}
.bv-wrap .bv-kpi {
    padding: 16px 18px;
    margin: 0;
}
.bv-wrap .bv-kpi .kv { margin-bottom: 6px; }
.bv-wrap .bv-kpi .ks { margin-bottom: 4px; }

/* ── Zweispaltige Bereiche ──────────────────────────────────── */
.bv-wrap .bv-grid2 {
    gap: var(--bv-gap-sec) var(--bv-gap);
}
.bv-wrap .bv-grid2 > div > .wx-sec-h { margin: 0; }
.bv-wrap .bv-grid2 > div > .widget  { margin: var(--bv-gap-head) 0 0; }

/* ── Diagramm-Widgets: etwas Innenabstand ───────────────────── */
.bv-wrap .widget > .bv-chart,
.bv-wrap .widget > .bv-chart-sm {
    padding: 4px 2px 0;
}

/* ── Struktur-Bereich (Pyramide + Seitenleiste) ─────────────── */
.bv-wrap .bs-grid {
    gap: var(--bv-gap);
}
.bv-wrap .bs-seite {
    display: flex;
    flex-direction: column;
    gap: var(--bv-gap-kpi);
}
.bv-wrap .bs-seite > .widget { margin: 0; }
.bv-wrap .bs-h { margin-bottom: 10px; }

/* ── Hinweise & Buttons ─────────────────────────────────────── */
.bv-wrap .bv-note {
    padding: 0 4px;
    line-height: 1.5;
}
.bv-wrap .bv-screen > .bv-nav {
    margin-top: var(--bv-gap-sec);
    gap: 10px;
}
.bv-wrap .bv-screen > .bv-nav:first-child {
    margin-top: 0;
}

/* ── Mobil: kompakter ───────────────────────────────────────── */
@media (max-width: 768px) {
    .bv-wrap {
        --bv-gap: 14px;
        --bv-gap-sec: 26px;
        --bv-gap-head: 8px;
        --bv-gap-kpi: 10px;
    }
    .bv-wrap .bv-hero { padding: 20px; }
    .bv-wrap .bv-kpi  { padding: 13px 14px; }
}