/* institut.css — Relaunch 2026 "Institut": gemeinsame Layout-Schicht.
   Quelle: docs/relaunch/*.dc.html (Claude-Design-Handoff, Inline-Styles
   hier in Klassen uebersetzt). Laedt NACH relaunch-tokens.css.
   Praefix in- fuer Layout/Struktur; rl- (tokens.css) fuer Muster-Primitive.
   Institut ist bewusst NUR HELL — keine Dark-Mode-Ebene (Entscheidung 23.07.). */

/* — Grundfläche — */
.institut{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
html:has(body.institut){overflow-x:clip;background:var(--paper)}
.institut a{color:var(--ink);text-decoration:underline;text-decoration-color:#c3cbd1;
  text-underline-offset:3px;text-decoration-thickness:1px}
.institut a:hover{text-decoration-color:var(--ink)}

/* — Header — */
.in-header{border-bottom:1px solid var(--line)}
.in-header-inner{max-width:var(--mw);margin:0 auto;padding:1rem var(--pad-x);
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.in-brand{font-family:var(--font-mono);font-size:.9rem;font-weight:700;color:var(--ink);
  text-decoration:none !important;letter-spacing:-.01em;white-space:nowrap}
.in-brand span{color:var(--ink-4);font-weight:400}
.in-nav{display:flex;gap:1.75rem;flex-wrap:wrap}
.in-nav a{font-size:.92rem;font-weight:500;color:var(--ink-3);text-decoration:none;padding-bottom:2px}
.in-nav a:hover{color:var(--ink)}
.in-nav a[aria-current="page"],.in-nav a.active{font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--accent)}

/* — Störer-Band (nahe Wahl) — */
.in-stoerer{display:block;text-decoration:none !important;background:var(--accent);color:#fff}
.in-stoerer:hover{background:var(--accent-ink)}
.in-stoerer-inner{max-width:var(--mw);margin:0 auto;padding:.6rem var(--pad-x);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.in-stoerer .lbl{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.in-stoerer .dot{width:7px;height:7px;border-radius:50%;background:#7fe3f0;display:inline-block}
.in-stoerer .msg{font-size:1rem;font-weight:600;color:#fff}
.in-stoerer .meta{font-family:var(--font-mono);font-size:.84rem;color:#bfe0e5}
.in-stoerer .cta{margin-left:auto;font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:#fff}
/* Wahljahr-Band (23.07.): Karten statt Ein-Wahl-Zeile */
.in-stoerer-inner.jahr{flex-wrap:wrap;row-gap:.5rem}
.in-stoerer .jw{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:8px;
  padding:.55rem .85rem;min-width:220px}
.in-stoerer .jw:hover{background:rgba(255,255,255,.16)}
.in-stoerer .jw-region{font-family:var(--font-serif);font-size:1.08rem;font-weight:600;color:#fff}
.in-stoerer .jw-meta{font-family:var(--font-mono);font-size:.74rem;color:#bfe0e5}
.in-stoerer .jw-foot{display:flex;gap:.8rem;align-items:baseline}
.in-stoerer .jw-days{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:#fff}
.in-stoerer .jw-lead{font-family:var(--font-mono);font-size:.74rem;color:#bfe0e5}
@media(max-width:720px){.in-stoerer .jw{min-width:100%}}

/* — Main + Sektionen — */
.in-main{max-width:var(--mw);margin:0 auto;padding:0 var(--pad-x);width:100%;box-sizing:border-box}
.in-section{padding:2.75rem 0;border-top:1px solid var(--line)}
.in-section--first{border-top:none}
.in-section--lede{padding:3.5rem 0 2.75rem;border-top:none;border-bottom:1px solid var(--line)}
.in-section--tail{padding:2rem 0 3.5rem;border-top:none}
/* Full-bleed-Band (Karte): reisst aus dem Container aus, paper-3-Grund */
.in-band{margin:0 calc(50% - 50vw);padding:3.5rem calc(50vw - 50%);background:var(--paper-3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:3rem;align-items:center}

/* — Sektions-Signal: Kicker + Serif-Headline + Sub — */
.in-kicker{font-family:var(--font-mono);font-size:var(--fs-kicker);text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:.8rem}
.in-h1{margin:0 0 1.2rem;font-family:var(--font-display);font-size:var(--fs-hero);font-weight:600;
  letter-spacing:-.015em;line-height:1.05;text-wrap:balance;max-width:860px;color:var(--ink)}
.in-h2{margin:0 0 .3rem;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;
  letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.in-h3{margin:0 0 .3rem;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;
  letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.in-sub{margin:0 0 1.75rem;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5;max-width:640px}
.in-lede-text{margin:0;font-size:1.18rem;line-height:1.65;color:var(--ink-2);max-width:560px}
.in-src{margin:1.75rem 0 0;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-3)}
.in-more{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--accent);
  text-decoration:none !important}
.in-more:hover{text-decoration:underline !important;text-decoration-color:var(--accent) !important}

/* — Lede-Layout: These + Meta-Spalte — */
.in-lede-grid{display:flex;gap:4rem;align-items:flex-start;flex-wrap:wrap}
.in-meta-col{flex:0 1 280px;display:flex;flex-direction:column;gap:.55rem;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:1.5rem}
.in-meta-col b{color:var(--ink);font-weight:700}

/* — Zwei-Spalten-Sektion mit rechter Hairline-Spalte — */
.in-cols{display:grid;grid-template-columns:minmax(380px,7fr) minmax(280px,4fr);gap:4rem}
.in-col-r{border-left:1px solid var(--line);padding-left:2rem;min-width:0}
@media(max-width:900px){.in-cols{display:block}
  .in-col-r{border-left:none;padding-left:0;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}}

/* — Ergebnis-Ensemble: Name · Balken · Prozent · KI — */
.in-rows{display:flex;flex-direction:column;gap:1.05rem}
.in-row{display:grid;grid-template-columns:64px 1fr 56px 104px;gap:1.1rem;align-items:center}
.in-row .name{font-size:1rem;font-weight:600;color:var(--ink);white-space:nowrap}
.in-bar{position:relative;height:10px;min-width:0}
.in-bar .track{position:absolute;inset:0;border-radius:1.5px;background:var(--track)}
.in-bar .band{position:absolute;top:0;bottom:0;background:var(--band);border-radius:1.5px}
.in-bar .fill{position:absolute;top:0;bottom:0;left:0;border-radius:1.5px}
.in-bar .median{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.in-row .pct{font-family:var(--font-mono);font-size:1.2rem;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.in-row .ci{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@media(max-width:560px){.in-row{grid-template-columns:52px 1fr 50px;gap:.7rem}
  .in-row .ci{display:none}.in-row .pct{font-size:.95rem}}

/* — Koalitions-Zeile: Kopf + Segment-Leiste mit 50%-Marke — */
.in-coals{max-width:800px;display:flex;flex-direction:column;gap:1.35rem}
.in-coal .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem;gap:1rem}
.in-coal .cname{font-size:1.02rem;font-weight:600}
.in-coal .val{display:flex;align-items:baseline;gap:.7rem;white-space:nowrap}
.in-coal .share{font-family:var(--font-mono);font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums}
.in-coal .maj{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em}
.in-coal .nomaj{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-5);
  text-transform:uppercase;letter-spacing:.08em}
.in-coal .lane{position:relative;height:14px;background:var(--track);border-radius:2px}
.in-coal .segs{position:absolute;inset:0;display:flex;border-radius:2px;overflow:hidden}
.in-coal .mark{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
/* Koalitions-Lane-Ergaenzungen (23.07., eine Grammatik app-weit) */
.in-coal .dots{display:inline-flex;margin-right:.5rem;vertical-align:-2px}
.in-coal .dots i{width:.85rem;height:.85rem;border-radius:50%;margin-left:-.24rem;
  border:2px solid var(--paper);display:inline-block}
.in-coal .dots i:first-child{margin-left:0}
.in-coal .tag{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:700;color:var(--ink-3);
  background:var(--track);padding:.14rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.in-coal .sub{margin-top:.4rem;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-3)}

/* — Daten-Tabelle (Umfragen, Vault): Mono-Kopf, Hairline-Zeilen — */
.in-table{width:100%}
.in-table .thead,.in-table .trow{display:grid;gap:.75rem;align-items:baseline}
.in-table .thead{padding:0 0 .6rem;border-bottom:2px solid var(--ink)}
.in-table .trow{padding:.55rem 0;border-bottom:1px solid var(--line)}
.in-table .trow:hover{background:var(--paper-2)}
.in-table .th{font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.in-table .th.num,.in-table .td.num{text-align:right;font-variant-numeric:tabular-nums}
.in-table .td{font-size:.95rem;color:var(--ink)}
.in-table .td.mono{font-family:var(--font-mono);font-size:.88rem}
.in-table .td.dim{color:var(--ink-4)}
.in-scroll{overflow-x:auto}

/* — Karten-Band-Innenleben — */
.in-band .lead-col{flex:1 1 300px;max-width:400px}
.in-band .map-col{flex:1 1 560px;min-width:0;position:relative}
.in-legend{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.9rem}
.in-legend .li{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:.76rem;color:var(--ink)}
.in-legend .sw{width:12px;height:12px;border-radius:2px;flex:none}
.in-legend .n{color:var(--ink-5);margin-left:auto}
.in-maptip{position:absolute;z-index:5;pointer-events:none;opacity:0;transition:opacity .12s ease;
  background:var(--paper);border:1px solid var(--line-2);border-top:3px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--e2);padding:.8rem .95rem;min-width:210px;max-width:260px}
.in-maptip.on{opacity:1}
.in-maptip .t-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  line-height:1.1;color:var(--ink);margin-bottom:.15rem}
.in-maptip .t-el{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-3);
  letter-spacing:.02em;margin-bottom:.55rem}
.in-maptip .t-lead{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;
  font-size:.85rem;color:var(--ink);line-height:1.35}
.in-maptip .t-sw{width:11px;height:11px;border-radius:2px;flex:none}
.in-maptip .t-seats{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-5)}

/* — News-Karten (Was die Woche bewegt hat) — */
.in-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem 2.5rem}
.in-news .item{border-top:2px solid var(--ink);padding-top:.8rem}
.in-news .src{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.in-news .hl{font-family:var(--font-display);font-size:1.28rem;font-weight:600;
  line-height:1.25;margin:0 0 .4rem}
.in-news .hl a{text-decoration:none}
.in-news .hl a:hover{text-decoration:underline;text-decoration-color:var(--ink)}
.in-news .sum{font-size:.94rem;color:var(--ink-3);line-height:1.5;margin:0}

/* — Termin-Zeilen (Die nächsten Wahlen) — */
.in-dates{display:flex;flex-direction:column}
.in-dates .row{display:grid;grid-template-columns:130px 1fr auto;gap:1.5rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none !important}
.in-dates .row:hover{background:var(--paper-2)}
.in-dates .d{font-family:var(--font-mono);font-size:.88rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.in-dates .t{font-size:1.05rem;font-weight:600;color:var(--ink)}
.in-dates .m{font-family:var(--font-mono);font-size:.88rem;color:var(--ink-3);text-align:right}
@media(max-width:560px){.in-dates .row{grid-template-columns:96px 1fr}.in-dates .m{display:none}}

/* — Footer — */
.in-footer{border-top:1px solid var(--line);margin-top:auto}
.in-footer-inner{max-width:var(--mw);margin:0 auto;padding:1.3rem var(--pad-x);
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-4)}
.in-footer a{color:var(--ink-3);text-decoration:none}
.in-footer a:hover{color:var(--ink);text-decoration:underline}

/* — Breadcrumb (Unterseiten) — */
.in-bread{max-width:var(--mw);margin:0 auto;padding:1rem var(--pad-x) 0;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-4)}
.in-bread a{color:var(--ink-4);text-decoration:none}
.in-bread a:hover{color:var(--ink);text-decoration:underline}
.in-bread .sep{margin:0 .45rem;color:var(--ink-5)}
.in-bread .cur{color:var(--ink)}

/* — Kennzahlen-Leiste (Kopf von Detail-Seiten) — */
.in-kpis{display:flex;gap:2.5rem;flex-wrap:wrap}
.in-kpis .kpi .v{font-family:var(--font-mono);font-size:1.65rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.in-kpis .kpi .l{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}

/* — Reveal-Grundzustand (nur wenn Motion-JS laeuft, s. motion.js) — */
html.motion .institut [data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-reveal) var(--ease-enter),transform var(--dur-reveal) var(--ease-enter)}
html.motion .institut [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.motion .institut [data-reveal]{opacity:1;transform:none;transition:none}}

/* — Responsive Grundregeln — */
@media(max-width:720px){
  :root{--fs-hero:2.3rem;--fs-h2:1.55rem;--pad-x:1.1rem}
  .in-lede-grid{gap:2rem}
  .in-meta-col{border-left:none;padding-left:0;flex-basis:100%}
  .in-band{padding-top:2.5rem;padding-bottom:2.5rem;gap:2rem}
}