/* v4 Länderhub (bundesland.html)
Setzt auf shells.css + blocks.css auf. Breadcrumb steckt jetzt in
base.css (globale .pk-breadcrumb-Komponente). */
/* ====================================================================
* HERO
* ==================================================================== */
.v4-bl{
display:flex;
flex-direction:column;
gap:clamp(1.5rem,3vh,2.5rem);
}
.v4-bl-hero{
display:flex;
flex-direction:column;
gap:.55rem;
}
.v4-bl-lede{
font-family:var(--font-s);
font-size:var(--fs-lg);
line-height:1.55;
color:var(--gray-800);
max-width:68ch;
margin-top:.4rem;
}
.v4-bl-section-head{
font-family:var(--font-s);
font-size:clamp(1.2rem,2.4vw,1.6rem);
font-weight:700;
letter-spacing:-.015em;
color:var(--black);
margin:0 0 .9rem;
padding-bottom:.45rem;
border-bottom:1px solid var(--gray-200);
}
/* ====================================================================
* KI-SZENARIO inline im Header (oben statt unten)
* ==================================================================== */
.v4-bl-summary-inline{
margin-top:1.1rem;
max-width:none;
}
.v4-bl-summary-inline .v4-bl-summary-box{
background:var(--gray-50);
border-left:3px solid var(--black);
padding:1.1rem 1.3rem;
max-width:78ch;
}
.v4-bl-section-lede{
font-family:var(--font-s);
font-size:var(--fs-md);
color:var(--gray-700);
line-height:1.55;
margin:0 0 1rem;
max-width:68ch;
}
.v4-bl-struct-section{
/* Makro-Stil-Cards Section — volle Breite */
}
/* ====================================================================
* STRUKTUR-STRIP (Kennzahlen, horizontal) — legacy, bleibt für andere evtl.
* ==================================================================== */
.v4-bl-struct{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:clamp(.8rem,2vw,1.4rem);
padding:clamp(1rem,2.5vh,1.4rem) clamp(1rem,2.5vw,1.4rem);
background:var(--gray-50);
border:1px solid var(--gray-200);
}
.v4-bl-struct-stat{
display:flex;
flex-direction:column;
gap:.15rem;
min-width:0;
}
.v4-bl-struct-label{
font-family:var(--font-d);
font-size:var(--fs-xxs);
text-transform:uppercase;
letter-spacing:.1em;
color:var(--gray-600);
font-weight:600;
}
.v4-bl-struct-value{
font-family:var(--font-d);
font-size:clamp(1.3rem,2.6vw,1.7rem);
font-weight:700;
line-height:1.1;
letter-spacing:-.01em;
color:var(--black);
font-variant-numeric:tabular-nums;
margin-top:.1rem;
}
.v4-bl-struct-sub{
font-family:var(--font-d);
font-size:var(--fs-xxs);
color:var(--gray-500);
margin-top:.15rem;
}
.v4-bl-struct-delta{
font-family:var(--font-d);
font-size:var(--fs-xxs);
font-weight:600;
margin-top:.2rem;
letter-spacing:.02em;
}
/* ====================================================================
* WAHLEN-GRID (Wahlen in diesem Land)
* ==================================================================== */
.v4-bl-wahlen{}
.v4-bl-wahlen-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:.8rem;
}
.v4-bl-wahl-card{
--wc-color:var(--gray-400);
display:flex;
flex-direction:column;
border:1px solid var(--gray-200);
background:var(--white);
text-decoration:none;
color:var(--black);
overflow:hidden;
transition:border-color var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast);
}
.v4-bl-wahl-card:hover{
border-color:var(--black);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,.06);
text-decoration:none;
}
.v4-bl-wahl-card.is-past{opacity:.82}
.v4-bl-wahl-card.is-past:hover{opacity:1}
.v4-bl-wahl-card.is-active{
border-color:var(--black);
box-shadow:0 0 0 2px var(--black);
}
.v4-bl-wahl-banner{
background:var(--wc-color);
color:var(--white);
padding:.55rem .8rem .5rem;
display:grid;
grid-template-columns:auto 1fr auto;
gap:.55rem;
align-items:baseline;
font-family:var(--font-d);
}
.v4-bl-wahl-tag{
font-size:var(--fs-xxs);
text-transform:uppercase;
letter-spacing:.12em;
font-weight:700;
opacity:.85;
}
.v4-bl-wahl-party{
font-size:1rem;
font-weight:700;
letter-spacing:-.01em;
}
.v4-bl-wahl-value{
font-size:var(--fs-sm);
font-weight:700;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.v4-bl-wahl-body{
padding:.6rem .8rem .7rem;
display:flex;
flex-direction:column;
gap:.25rem;
}
.v4-bl-wahl-title{
font-size:var(--fs-sm);
font-weight:700;
line-height:1.25;
color:var(--black);
}
.v4-bl-wahl-meta{
font-family:var(--font-d);
font-size:var(--fs-xs);
color:var(--gray-600);
}
/* ====================================================================
* WAHL-DETAIL (überschreibt das Inset aus blocks.css — hier schon Padding)
* ==================================================================== */
.v4-bl-detail{
padding:0;
margin:0;
max-width:none;
}
.v4-bl-detail .v4-wahl-detail-head{
margin-bottom:clamp(1rem,2.5vh,1.6rem);
}
/* ====================================================================
* BUNDESTAGSWAHLKREISE in diesem Bundesland (aus btw-2029.json gefiltert)
* ==================================================================== */
.v4-bl-btw-wk-lede{
font-family:var(--font-s);
font-size:var(--fs-md);
color:var(--gray-700);
line-height:1.55;
margin:0 0 .9rem;
max-width:68ch;
}
/* ====================================================================
* KI-SZENARIO (wenn verfügbar)
* ==================================================================== */
.v4-bl-summary-box{
background:var(--gray-50);
border-left:3px solid var(--black);
padding:1.2rem 1.4rem;
max-width:78ch;
}
.v4-bl-summary-text{
font-family:var(--font-s);
font-size:var(--fs-md);
line-height:1.65;
color:var(--gray-900);
margin:0;
}
.v4-bl-summary-meta{
margin-top:.9rem;
padding-top:.6rem;
border-top:1px solid var(--gray-200);
font-family:var(--font-d);
font-size:var(--fs-xxs);
color:var(--gray-400);
letter-spacing:.05em;
}
/* ====================================================================
* ZURÜCK-NAV AM SEITENENDE
* ==================================================================== */
.v4-bl-back{
display:flex;
gap:1.5rem;
flex-wrap:wrap;
padding-top:1.5rem;
margin-top:1rem;
border-top:1px solid var(--gray-200);
}
.v4-bl-back-link{
font-family:var(--font-d);
font-size:var(--fs-sm);
color:var(--gray-700);
text-decoration:none;
padding-bottom:.1rem;
border-bottom:1px solid var(--gray-300);
transition:color var(--tr-fast), border-color var(--tr-fast);
}
.v4-bl-back-link:hover{
color:var(--black);
border-color:var(--black);
text-decoration:none;
}
/* === Wahl-Tag-Tool Etappe 3: Live-Hochrechnungs-Panel === */
.bl-wd-live{
margin-top:1.2rem;
padding:1rem 1.25rem;
background:var(--gray-50);
border-left:3px solid #c0392b;
max-width:60ch;
}
.bl-wd-live-head{
display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
margin-bottom:.7rem;font-family:var(--font-d);font-size:.78rem;
}
.bl-wd-live-badge{
font-weight:700;letter-spacing:.05em;padding:.15rem .45rem;
text-transform:uppercase;font-size:.7rem;
}
.bl-wd-live-badge.is-live{background:#c0392b;color:#fff;animation:bl-live-pulse 1.6s ease-in-out infinite}
.bl-wd-live-badge.is-final{background:#0f7b3c;color:#fff}
@keyframes bl-live-pulse{0%,100%{opacity:1}50%{opacity:.65}}
.bl-wd-live-status{font-weight:600;color:var(--black)}
.bl-wd-live-source{color:var(--gray-600);font-size:.72rem;margin-left:auto}
.bl-wd-live-table{width:100%;border-collapse:collapse;font-size:.85rem}
.bl-wd-live-table th{
text-align:left;font-family:var(--font-d);font-size:.65rem;
text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);
font-weight:700;padding:.4rem .5rem;border-bottom:1px solid var(--gray-300);
}
.bl-wd-live-table td{padding:.35rem .5rem;border-bottom:1px solid var(--gray-100)}
.bl-wd-live-dot{
display:inline-block;width:.55em;height:.55em;border-radius:50%;
margin-right:.4em;vertical-align:baseline;
}
.bl-wd-live-foot{
margin-top:.7rem;padding-top:.5rem;border-top:1px solid var(--gray-200);
font-family:var(--font-d);font-size:.76rem;color:var(--gray-700);
}
@media (max-width:640px){
.bl-wd-live{padding:.7rem .85rem}
.bl-wd-live-source{margin-left:0;flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
.bl-wd-live-badge.is-live{animation:none}
}