/* polls.karbach.digital — shared design system
   Lädt als <link rel="stylesheet" href="/assets/base.css?v=N">
   Definiert: Design-Tokens, Typografie, Reset, Nav, Footer.
   Seiten-spezifisches CSS bleibt inline in der jeweiligen HTML-Datei.
*/

/* Skip-Link (Sprint 6 Tail Achse 3, 2026-05-20):
   WCAG 2.4.1 — Bypass Blocks. Visually-hidden, sichtbar bei Fokus.
   Wird global geladen weil base.css in allen Pages eingebunden ist. */
.skip-link{
  position:absolute;
  left:.5rem;
  top:-100px;
  z-index:9999;
  background:#0a0a0a;
  color:#ffffff;
  padding:.6rem 1rem;
  text-decoration:none;
  font-weight:600;
  border-radius:4px;
  transition:top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  top:.5rem;
  outline:2px solid #ffffff;
  outline-offset:2px;
}

/* === DESIGN TOKENS === */
:root{
  /* Farben Monochrom */
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-50:#fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#e7e7e7;
  --gray-300:#d4d4d4;
  --gray-400:#a3a3a3;
  --gray-500:#737373;
  --gray-600:#525252;
  --gray-700:#404040;
  --gray-800:#262626;
  --gray-900:#171717;
  --accent:#0a0a0a;
  --success:#0f7b3c;
  --danger:#c02632;
  --warning:#c09032;

  /* Typografie — EINE sans, EINE mono, keine Mischung */
  --font-s:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-d:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;

  /* Font-Hierarchie */
  --fs-xxs:.62rem;
  --fs-xs:.7rem;
  --fs-sm:.82rem;
  --fs-md:.95rem;
  --fs-lg:1.15rem;
  --fs-xl:1.5rem;
  --fs-xxl:clamp(1.8rem, 3.5vw, 2.6rem);

  /* Layout */
  --mw:1200px;
  --mw-narrow:820px;
  --radius:2px;
  --gap-xs:.35rem;
  --gap-sm:.55rem;
  --gap-md:.85rem;
  --gap-lg:1.25rem;
  --gap-xl:2rem;

  /* Transitions */
  --tr-fast:.1s ease;
  --tr-med:.2s ease;
}

@media (prefers-color-scheme: dark) {
  :root{
    --black:#f5f5f5;
    --white:#0a0a0a;
    --gray-50:#171717;
    --gray-100:#262626;
    --gray-200:#3a3a3a;
    --gray-300:#525252;
    --gray-400:#737373;
    --gray-500:#a3a3a3;
    --gray-600:#d4d4d4;
    --gray-700:#e5e5e5;
    --gray-800:#fafafa;
    --gray-900:#ffffff;
    --accent:#f5f5f5;
  }
}

/* === FONT IMPORT (display=swap für FOUT-Vermeidung) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* System-Fallback während Fonts laden: vermeidet FOIT */
body{font-display:swap}

/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-s);
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  font-size:var(--fs-md);
  font-feature-settings:"kern","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Überschriften-Skala */
h1{font-size:var(--fs-xxl);font-weight:700;letter-spacing:-.02em;line-height:1.1}
h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.015em;line-height:1.25}
h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.35}
h4{font-size:var(--fs-md);font-weight:600}
p{font-size:var(--fs-md);line-height:1.65;color:var(--gray-800)}

/* Mono überall konsistent */
code,kbd,samp,pre,.mono,.num{font-family:var(--font-d);font-feature-settings:"tnum","zero"}
.num{font-variant-numeric:tabular-nums}

/* Links */
a{color:var(--black);text-decoration:underline;text-decoration-color:var(--gray-400);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--tr-fast)}
a:hover{text-decoration-color:var(--black)}
a.no-underline,a.plain{text-decoration:none}

/* === MOBILE TABLE-OVERFLOW-GUARD ===
   Legacy-Tabellen (.tbl auf /makro/, .swing-table + alle weiteren auf
   /wahlkreis/, unklassifizierte <table> auf /methodik.html) haben keinen
   eigenen Scroll-Wrapper und sprengen auf schmalen Viewports den Page-
   Container — ergibt horizontalen Page-Scroll. v4-Tabellen mit eigenem
   Wrap (v4-poll-table, v4-wkl-table etc.) sind nicht betroffen, weil sie
   nicht direkt Kind eines Layout-Containers sind. Fix: display:block +
   overflow-x:auto unter 768 px. */
@media (max-width:768px){
  /* Generischer Catch für Legacy-Tabellen ohne eigene Klasse —
     deckt methodik.html (rohe <table> im body), makro.html (.tbl),
     wahlkreis.html (.swing-table) und Partei-Pages (.wk-table) ab.
     v4-Komponenten (v4-poll-table, v4-wkl-table, v4-seats-table,
     v4-nowcast-table, v4-agg-table) bleiben unberührt — die haben
     bereits eigene Scroll-Wrapper. */
  table.tbl,
  table.swing-table,
  table.wk-table,
  table.acc-detail-table,
  table:not([class]){
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* === BREADCRUMB (Start › Bereich › Konkrete Seite) === */
.pk-breadcrumb{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-500);
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0 0 1.2rem;
  flex-wrap:wrap;
}
.pk-breadcrumb a{
  color:var(--gray-600);
  text-decoration:none;
  transition:color var(--tr-fast);
}
.pk-breadcrumb a:hover{
  color:var(--black);
  text-decoration:underline;
  text-decoration-color:var(--gray-400);
  text-underline-offset:2px;
}
.pk-breadcrumb-sep{
  color:var(--gray-300);
  font-size:.9em;
}
.pk-breadcrumb-current{
  color:var(--black);
  font-weight:600;
}

/* === FLOATING NAV (Pill-Style, schwebt rechts mitscrollend) === */
.pk-topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in oklab, var(--white) 92%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--gray-200);
}
.pk-topbar-inner{
  max-width:var(--mw);
  margin:0 auto;
  padding:.6rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.pk-brand{
  font-family:var(--font-d);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--black);
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  flex-shrink:0;
}
.pk-brand .pk-brand-dot{color:var(--gray-400);font-weight:400}
.pk-brand:hover{text-decoration:none}

.pk-nav{
  display:flex;
  align-items:center;
  gap:.15rem;
  margin-left:auto;
}
.pk-nav a{
  font-family:var(--font-d);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--gray-500);
  text-decoration:none;
  padding:.45rem .7rem;
  border-radius:var(--radius);
  transition:all var(--tr-fast);
  white-space:nowrap;
  font-weight:500;
}
.pk-nav a:hover{color:var(--black);background:var(--gray-100)}
.pk-nav a.active{color:var(--black);font-weight:700;background:var(--gray-100)}
.pk-nav a.active::after{content:"";display:block;height:2px;background:var(--black);margin-top:4px;margin-left:-.7rem;margin-right:-.7rem}

/* Burger Button (Desktop hidden, Mobile als Floating Action Button rechts unten) */
.pk-burger{
  display:none;
  background:var(--black);
  color:var(--white);
  border:none;
  cursor:pointer;
  font-family:var(--font-d);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.95rem 1.4rem;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  transition:transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.pk-burger:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.12)}
.pk-burger:active{transform:translateY(0)}
.pk-burger[aria-expanded="true"]{background:var(--gray-800)}

@media (max-width: 720px){
  /* Top-Bar: nur Brand sichtbar, Burger wandert raus zum FAB */
  .pk-topbar-inner{position:relative;justify-content:flex-start}

  /* Floating Action Button rechts unten — nicht mehr im Header-Layout.
     z-index hoch, weil Map-Tooltips & andere v4-Komponenten z-index 1000+
     haben und das Sheet sonst überlagern. */
  .pk-burger{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    position:fixed;
    bottom:1.25rem;
    right:1.25rem;
    z-index:10001;
  }
  .pk-burger::before{content:"☰";font-size:1.05rem;line-height:1}
  .pk-burger[aria-expanded="true"]::before{content:"✕"}

  /* Nav als Fullscreen-Sheet */
  .pk-nav{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    flex-direction:column;
    background:var(--white);
    padding:5rem 1.5rem 6rem;
    gap:.25rem;
    align-items:stretch;
    overflow-y:auto;
    animation:pk-sheet-in .2s ease-out;
  }
  .pk-nav.open{display:flex}
  .pk-nav a{
    font-size:1.4rem;
    text-transform:none;
    letter-spacing:0;
    font-weight:500;
    padding:1rem .5rem;
    border-radius:var(--radius);
    border-bottom:1px solid var(--gray-100);
    text-align:left;
    color:var(--black);
  }
  .pk-nav a.active{font-weight:700;background:var(--gray-100)}
  .pk-nav a.active::after{display:none}
  .pk-nav a:hover{background:var(--gray-100)}

  /* Section-Label für Bundesländer (kein Klick-Ziel, nur Header) */
  .pk-nav .pk-nav-section{
    color:var(--gray-500);
    font-size:1rem;
    font-family:var(--font-d);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-top:.75rem;
    cursor:default;
    border-bottom:none;
  }

  /* Submenus (Parteien, Bundesländer) — eingerückte, kleinere Sub-Links */
  .pk-nav-sub{
    display:flex;
    flex-direction:column;
    margin:0 0 .25rem .75rem;
    border-left:2px solid var(--gray-200);
    padding-left:.6rem;
  }
  .pk-nav .pk-nav-sub-link{
    font-size:1rem;
    padding:.55rem .5rem;
    border-bottom:1px solid var(--gray-100);
  }
  .pk-nav .pk-nav-sub-link:last-child{border-bottom:none}

  /* Body-scroll lock — wird via nav.js gesetzt */
  body.pk-nav-open{overflow:hidden}

  /* Breadcrumbs mobile: lesbarer + größere Tap-Targets */
  .pk-breadcrumb{
    font-size:.85rem;
    gap:.5rem;
    padding:.4rem 0;
  }
  .pk-breadcrumb a,
  .pk-breadcrumb-current{
    padding:.35rem .15rem;
    min-height:1rem;
  }
  .pk-breadcrumb-sep{font-size:1em}
}

@keyframes pk-sheet-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* === FOOTER (einheitlich) === */
.pk-footer{
  border-top:1px solid var(--gray-200);
  background:var(--gray-50);
  padding:1.6rem 1.25rem 1.2rem;
  margin-top:3rem;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
}
.pk-footer-inner{
  max-width:var(--mw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  align-items:center;
  text-align:center;
}
.pk-footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  justify-content:center;
  align-items:baseline;
}
.pk-footer-nav a{
  color:var(--gray-700);
  text-decoration:none;
  padding:.15rem .6rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:500;
  border-right:1px solid var(--gray-300);
  line-height:1;
}
.pk-footer-nav a:last-child{border-right:none}
.pk-footer-nav a:hover{color:var(--black)}
.pk-footer-meta{
  color:var(--gray-500);
  line-height:1.6;
  letter-spacing:.02em;
  max-width:70ch;
  display:inline-flex;
  align-items:baseline;
  gap:.3em;
  flex-wrap:wrap;
  justify-content:center;
}
.pk-footer-meta a{color:var(--gray-600);text-decoration:none;border-bottom:1px dotted var(--gray-400)}
.pk-footer-meta a:hover{color:var(--black);border-bottom-color:var(--black)}
/* Copyright vertikal exakt auf baseline mit der 2026 */
.pk-copy{display:inline-block;line-height:inherit;vertical-align:baseline}
.pk-copy::before{content:"\00A9 ";margin-right:.1em}

/* === UTILITY CLASSES === */
.container{max-width:var(--mw);margin:0 auto;padding:0 1.25rem}
.container-narrow{max-width:var(--mw-narrow);margin:0 auto;padding:0 1.25rem}
.kicker{font-family:var(--font-d);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--gray-500);font-weight:600}
.sub{font-size:var(--fs-sm);color:var(--gray-600);line-height:1.55}

/* Focus-Styles (Accessibility) */
*:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:var(--radius)}

/* === Glossar-Tooltips (2026-05-20, Achse 3) ===
 * <abbr title="…">Begriff</abbr> bekommt einen dezenten gepunkteten
 * Unter-Strich und Help-Cursor. Native Browser-Tooltip übernimmt den Rest
 * (Mobile: long-press, Desktop: hover). Bewusst kein eigenes JS-Tooltip —
 * Native ist barrierefrei, kein zusätzliches Layout-JS nötig.
 */
abbr[title]{
  cursor:help;
  text-decoration:underline dotted var(--gray-400);
  text-underline-offset:.18em;
  text-decoration-thickness:.06em;
}
@media (prefers-color-scheme: dark){
  abbr[title]{text-decoration-color:var(--gray-500)}
}

/* === Wahl-Tag-Banner (2026-05-21, Wahl-Tag-Tool Etappe 1) ===
 * Globaler Banner ganz oben, wird via election-banner.js dynamisch
 * eingeblendet. Drei Modi: live (rot), pre (gelb), post (grau).
 */
.pk-election-banner{
  position:relative;
  z-index:100;
  padding:0;
  margin:0;
  border-bottom:2px solid;
  font-family:var(--font-d);
}
.pk-election-banner-link{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.55rem 1.25rem;
  text-decoration:none;
  font-size:var(--fs-sm);
  font-weight:500;
  max-width:var(--mw);
  margin:0 auto;
  color:inherit;
}
.pk-election-banner-link:hover{text-decoration:underline}
.pk-election-banner-icon{font-size:1.05em;flex-shrink:0}
.pk-election-banner-txt{flex:1;letter-spacing:.005em}
.pk-election-banner-txt strong{font-weight:700;letter-spacing:.02em}
.pk-election-banner-arrow{
  font-family:var(--font-d);
  font-weight:600;
  opacity:.7;
  font-size:1.05em;
  flex-shrink:0;
}

/* Live-Modus — rot, dezent pulsierend */
.pk-election-banner--live{
  background:#fef2f2;
  color:#7a1a1a;
  border-bottom-color:#c0392b;
}
.pk-election-banner--live .pk-election-banner-icon{
  animation:pk-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes pk-banner-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.88)}
}

/* Pre-Modus — gelb */
.pk-election-banner--pre{
  background:#fef9e7;
  color:#7a5a1a;
  border-bottom-color:#a67c00;
}

/* Post-Modus — grau */
.pk-election-banner--post{
  background:var(--gray-100);
  color:var(--gray-700);
  border-bottom-color:var(--gray-400);
}

@media (max-width:640px){
  .pk-election-banner-link{padding:.45rem .85rem;font-size:.78rem;gap:.5rem}
  .pk-election-banner-arrow{display:none}
}
@media (prefers-color-scheme: dark){
  .pk-election-banner--live{background:#2a1010;color:#f5b8b8}
  .pk-election-banner--pre{background:#2a2410;color:#e8d488}
  .pk-election-banner--post{background:#202020;color:#c0c0c0}
}
@media (prefers-reduced-motion: reduce){
  .pk-election-banner--live .pk-election-banner-icon{animation:none}
}