/* ============================================================================
   portal.css — zwei Dinge in einer Datei:

     TEIL A  gemeinsame Bausteine aller drei Seiten (Kopfzeile, Umschalter,
             Themenknopf, Shell, Modus-Reiter, Fußzeile).
     TEIL B  die Landing-Seite (templates/landing.html).

   Rohwerte stehen NICHT hier, sondern in static/tokens.css. Wenn hier eine
   Farbe, ein Abstand oder eine Größe direkt als Zahl auftaucht, ist das ein
   Fehler — es sei denn, ein Kommentar erklärt die Ausnahme.
   ============================================================================ */

/* ============================================================================
   TEIL A — gemeinsam
   ============================================================================ */

/* ── Kopfzeile ─────────────────────────────────────────────────────────────
   Klebt oben. Der Schatten erscheint erst, wenn tatsächlich gescrollt wurde
   (Klasse wird nicht per JS gesetzt, sondern über die Scroll-Position der
   Seite — siehe unten). */
.hh-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 1px solid var(--header-line);
}
.hh-header-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  flex-wrap: wrap;
}
.hh-logo { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
/* Der Logo-PNG bringt seinen orangen Grund mit. Im Hellmodus verschmilzt er
   mit der Leiste, im Dunkelmodus wird er durch den Radius zur bewussten
   Markenplatte statt zum abgeschnittenen Rechteck. */
.hh-logo img {
  height: 42px;
  width: auto;
  display: block;
  border-radius: var(--radius-xs);
}
.hh-logo .sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--header-ink);
  border-left: 1px solid var(--header-line);
  padding-left: var(--space-sm);
  letter-spacing: 0.02em;
}

/* Parlaments-Umschalter */
.hh-switch {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--header-line);
}
.hh-switch label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--header-ink);
}
.hh-switch select {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--header-ink);
  background: transparent;
  border: 1px solid var(--header-line);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  max-width: 15rem;
}
/* Das Optionsmenü zeichnet das Betriebssystem, nicht wir — es braucht daher
   Farben aus dem Seitenkontext, nicht aus der Kopfzeile. */
.hh-switch select option { color: var(--ink); background: var(--surface); }

/* Rechter Kontextlink (»Zum Landtag ↗«) */
.hh-header-inner .right {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--header-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hh-header-inner .right:hover { text-decoration-thickness: 2px; }

/* API-Knopf (nur Landing) */
.header-api {
  flex-shrink: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  border: 1px solid var(--header-line);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  transition: background var(--dur-fast) var(--ease);
}
.header-api:hover { background: var(--surface-inset); }

/* ── Themenknopf ───────────────────────────────────────────────────────────
   Ein Umschalter mit fester Beschriftung; der Zustand steckt in aria-pressed,
   nicht im Namen (siehe static/theme.js). Beide Symbole liegen übereinander,
   sichtbar ist immer genau eines. */
.theme-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: transparent;
  color: var(--header-ink);
  border: 1px solid var(--header-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: var(--header-hover); }
.theme-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle[aria-pressed='true'] .icon-sun { display: none; }
.theme-toggle[aria-pressed='true'] .icon-moon { display: block; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell, .hh-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-3xl);
}

/* ── Modus-Reiter (Reden / Abstimmungen) ─────────────────────────────────── */
.hh-modes {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: var(--space-md);
  gap: 3px;
}
.hh-modes a {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hh-modes a:hover { background: var(--surface-inset); }
.hh-modes a.on { background: var(--structure); color: var(--on-structure); }

/* Körperschaft-Umschaltung (nur Bremen): dieselben Reiter wie hh-modes, aber
   als <button> (Filter statt Navigation). Deshalb die a-Regeln oben hier für
   button spiegeln, inklusive Zurücksetzen des Browser-Button-Aussehens. */
.hh-koerper button {
  padding: var(--space-xs) var(--space-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hh-koerper button:hover { background: var(--surface-inset); }
.hh-koerper button.on { background: var(--structure); color: var(--on-structure); }

/* ── Fußzeile ─────────────────────────────────────────────────────────────
   Beide Seiten benutzen dieselbe; .footer ist der Landing-Name, .hh-footer der
   im Viewer. Zusammengelegt, statt zweimal fast dasselbe zu pflegen. */
.footer, .hh-footer {
  max-width: var(--shell-max);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-xs);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.footer p, .hh-footer p { line-height: var(--leading-normal); }
.footer a, .hh-footer a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer a:hover, .hh-footer a:hover { color: var(--ink); }
.footer svg, .hh-footer svg { vertical-align: -0.15em; margin-right: var(--space-2xs); }
.footer .heart, .hh-footer .heart { color: var(--heart); }

/* ============================================================================
   TEIL B — Landing-Seite
   ============================================================================ */

/* ── EU-Hinweis ───────────────────────────────────────────────────────────
   Querverweis auf das Schwesterprojekt check-some-votes.eu. */
.eu-hint {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
/* Echte Flagge (static/flags/EU.svg, wie die Landesflaggen von Wikimedia
   Commons zur Build-Zeit geholt — siehe fetch_assets.py), kein Emoji: Apples
   🇪🇺-Rendering ist auf vielen Desktop-Browsern/-Systemen nur "EU" als Text. */
.eu-flag {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.eu-hint-text { font-size: var(--text-md); font-weight: var(--weight-bold); }
.eu-hint-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  transition: background var(--dur-fast) var(--ease);
}
.eu-hint-btn:hover { background: var(--accent-hover); }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Die Gesamtzahl steht IM Satz, nicht als freistehende Kennzahlkachel in der
   Ecke. Eine Zahl, die eine Aussage trägt, gehört in die Aussage; eine Zahl in
   einer eigenen Kachel ist die Dashboard-Geste, die PRODUCT.md ausschließt. */
.hero {
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl);
  color: var(--hero-ink);
  margin-bottom: var(--space-lg);
}
.hero h1 {
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-sm);
  /* „Landesparlamente" füllt bei 320px die Panelbreite exakt aus und stünde
     ohne Trennmöglichkeit einen Glyph vor dem Überlauf. Der Viewport gehört
     zum Entwurf — die Überschrift muss auf JEDER Breite hineinpassen. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-lead {
  color: var(--hero-ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: var(--measure-ui);
}
.hero-count {
  color: var(--accent);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* Auf der Grundlinie halten, damit die Zahl den Satz nicht auseinanderdrückt. */
  line-height: 1;
  vertical-align: -0.05em;
}
/* Einstieg in die parlamentsübergreifende Themensuche (/suche) — als echter
   Knopf, nicht als Textlink: derselbe background/color/radius-Zuschnitt wie
   .eu-hint-btn weiter oben auf dieser Seite, der genau diese Farbpaarung
   (--accent-Fläche, --on-accent-Schrift) schon nachweislich lesbar einsetzt. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  transition: background var(--dur-fast) var(--ease);
}
.hero-cta:hover { background: var(--accent-hover); }

/* ── Parlamentsraster ─────────────────────────────────────────────────────
   auto-fill statt fester Spaltenzahl: passt sich ohne Haltepunkt an. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: var(--space-md);
}

.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 150px;
  transition: box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
a.pcard:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.pcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}
.pcard .region {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Silbentrennung, weil Landtagsnamen sehr lange Einzelwörter enthalten
   („Mecklenburg-Vorpommern", „Nordrhein-Westfalen"). Ohne sie ist die
   Mindestbreite der Karte die Breite des längsten Wortes, und die Karte sprengt
   auf schmalen Geräten ihre Spalte. `lang="de"` steht am <html>, die Trennung
   folgt daher deutschen Regeln. */
.pcard h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--ink);
  line-height: var(--leading-tight);
  hyphens: auto;
  overflow-wrap: break-word;
}
.pcard .region { hyphens: auto; overflow-wrap: break-word; }
.pcard-flag {
  width: 40px;
  height: 27px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  background: var(--surface);
}

.pcard .stats { display: flex; gap: var(--space-md); margin-top: var(--space-2xs); }
.pcard .stat .v {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--structure);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard .stat .l {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: var(--space-3xs);
}

/* »Aktualisiert vor X« — letzter erfolgreich abgeschlossener Scraper-Lauf.
   Steht bewusst da: PRODUCT.md verlangt sichtbaren Stand der Daten. */
.pcard-updated {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--ink-3);
}
.pcard-clock { width: 12px; height: 12px; flex: 0 0 auto; }

.pcard .go {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: background var(--dur-fast) var(--ease);
}
a.pcard:hover .go { background: var(--accent-hover); }

/* Noch nicht verfügbare Länder.
   KEIN opacity und KEIN grayscale auf der ganzen Karte — beides senkt den
   Textkontrast unter die AA-Schwelle. Stattdessen gedämpfte Fläche, gestrichelte
   Kontur und eine ausgeschriebene Marke. Die Flagge bleibt farbig, sonst sind
   die Karten nicht mehr auseinanderzuhalten. */
.pcard.-soon {
  background: var(--surface-sunken);
  border-style: dashed;
  border-color: var(--line-strong);
}
.pcard.-soon h2 { color: var(--ink-2); }
.soon-badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
}

/* ── Schmale Ansichten ─────────────────────────────────────────────────────
   Zwei Karten pro Reihe, kompakter. Der Parlamentsname bleibt — ihn
   auszublenden hieße, die Karte ihrer Beschriftung zu berauben. Weg fällt nur
   die Abgeordnetenzahl, die auf der Landing-Seite die nachrangige Angabe ist,
   und der Knopf: die ganze Karte ist ohnehin der Link. */
@media (max-width: 600px) {
  .shell, .hh-shell { padding-inline: var(--space-md); }
  .header-api { display: none; }
  /* API-Doku ist ein Entwickler-Einstieg und darf auf dem Handy weichen; die
     FAQ ist der Einstieg für alle Besucher:innen und bleibt deshalb sichtbar
     — schmaler gepolstert, damit Logo und Themenknopf noch in eine Zeile
     passen. */
  .header-api-faq { display: inline-block; padding-inline: var(--space-sm); }

  /* Kopfzeile in ZWEI Reihen statt drei: [Logo … Themenknopf] / [Parlament].
     Ohne die order-Zuweisung wandert der Themenknopf hinter den Umschalter und
     bekommt eine eigene dritte Reihe — 300px Kopfzeile auf einem 844px hohen
     Bildschirm. */
  .hh-header-inner { gap: var(--space-xs); padding: var(--space-xs) var(--space-md); }
  .hh-logo img { height: 34px; }
  .hh-logo .sub { display: none; }
  .theme-toggle { order: 1; margin-left: auto; }
  .hh-switch {
    order: 2;
    flex-basis: 100%;
    /* Ein Flex-Item schrumpft NICHT unter die Mindestbreite seines Inhalts,
       solange min-width auf `auto` steht — flex-basis:100% allein genügt also
       nicht, das Feld ragte 11px über den Rand hinaus. */
    min-width: 0;
    padding-left: 0;
    border-left: none;
  }
  .hh-switch select { flex: 1; min-width: 0; max-width: none; }
  /* minmax(0, 1fr) statt 1fr: ein 1fr-Track hat implizit `min-width: auto` und
     wächst auf die Mindestbreite seines Inhalts. Bei 320px Fensterbreite sprengte
     die Karte dadurch ihre Spalte und die ganze Seite scrollte seitwärts. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .pcard { padding: var(--space-sm); gap: var(--space-xs); min-height: 0; }
  .pcard h2 { font-size: var(--text-md); }
  .pcard .stat-members { display: none; }
  .pcard .go { display: none; }
  .pcard .stats { margin-top: 0; }
  .pcard .stat .v { font-size: var(--text-xl); }
  .pcard-flag { width: 34px; height: 23px; }
  /* Bei 320px passen Flagge, Text und Knopf nicht mehr nebeneinander — der
     Knopf ragte 30px über den Rand. Statt ihn zu stauchen, bekommt er eine
     eigene Zeile über die volle Breite; das vergrößert nebenbei die Trefffläche
     auf dem Telefon. */
  .eu-hint { padding: var(--space-sm); gap: var(--space-xs); flex-wrap: wrap; }
  .eu-hint-text { font-size: var(--text-sm); }
  .eu-flag { width: 26px; height: 17px; }
  .eu-hint-btn { margin-left: 0; width: 100%; text-align: center; }
  .hero { padding: var(--space-lg) var(--space-md); }
}