/* ============================================================================
   Serverseitig gerenderte Seiten: Abgeordnete, Sitzungen, Reden, Abstimmungen.

   Das sind die indexierbaren Seiten — ihr Inhalt steht im HTML, nicht hinter
   einer JavaScript-Suche. Sie sind bewusst schlicht: wer über eine Suchmaschine
   hier landet, will lesen, nicht bedienen.

   Rohwerte aus static/tokens.css, Kopf- und Fußzeile aus static/portal.css.
   ============================================================================ */

/* ── Brotkrumen ───────────────────────────────────────────────────────────
   Kein Zierrat: diese Seiten sind Einstiegspunkte aus der Suchmaschine, und
   wer so ankommt, weiß nicht, wo er ist. */
.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--ink-3);
  margin-bottom: var(--space-md);
}
.krumen a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.krumen a:hover { color: var(--ink); }
.krumen [aria-current] { color: var(--ink-2); }

/* ── Seitenkopf ──────────────────────────────────────────────────────────── */
.seite-h1 {
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin-bottom: var(--space-xs);
  hyphens: auto;
  overflow-wrap: break-word;
}
.seite-h1 em { font-style: italic; color: var(--structure); }
.seite-h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--ink);
  margin: var(--space-xl) 0 var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.seite-lead {
  font-size: var(--text-base);
  color: var(--ink-2);
  max-width: var(--measure-ui);
  margin-bottom: var(--space-lg);
}
.seite-lead a { color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }
.seite-leer { color: var(--ink-3); font-weight: var(--weight-semi); padding: var(--space-lg) 0; }
.seite-fussnote {
  font-size: var(--text-xs);
  color: var(--ink-3);
  max-width: var(--measure-ui);
  margin-top: var(--space-xs);
}

/* ── Abgeordnetenliste ───────────────────────────────────────────────────── */
.mliste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-xs);
  padding: 0;
}
.mliste-item a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mliste-item a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.mliste .mava, .mliste .mava-ph {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-weight: var(--weight-black); font-size: var(--text-xs);
}
.mliste-txt { min-width: 0; flex: 1; }
.mliste-n {
  display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mliste-f { display: block; font-size: var(--text-2xs); color: var(--ink-3); font-weight: var(--weight-semi); }
.mliste-z {
  flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--weight-black);
  color: var(--structure); font-variant-numeric: tabular-nums;
}

/* ── Sitzungsliste ───────────────────────────────────────────────────────── */
.sliste { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sliste li + li { border-top: 1px solid var(--line); }
.sliste a {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); background: var(--surface);
  transition: background var(--dur-fast) var(--ease);
}
.sliste a:hover { background: var(--surface-inset); }
.sliste-d {
  flex: 0 0 6.5em; font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sliste-t { flex: 1; font-size: var(--text-sm); color: var(--ink-2); min-width: 0; }
.sliste-z { flex-shrink: 0; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Profil ──────────────────────────────────────────────────────────────── */
.profil { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-lg); }
.profil-foto {
  width: 120px; height: 150px; border-radius: var(--radius-md); object-fit: cover;
  flex-shrink: 0; border: 2px solid var(--line-strong);
  display: grid; place-items: center; font-size: 34px; font-weight: var(--weight-black);
}
.profil-txt { flex: 1 1 320px; min-width: 0; }
.profil-rolle { font-size: var(--text-md); font-weight: var(--weight-bold); margin-bottom: var(--space-sm); }
.profil-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
.profil-dl dt { color: var(--ink-3); font-weight: var(--weight-semi); }
.profil-dl dd { color: var(--ink); margin: 0; }
.profil-links { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); font-size: var(--text-sm); }
.profil-links a { color: var(--structure); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Rede ────────────────────────────────────────────────────────────────── */
.rede { border-top: 1px solid var(--line); padding: var(--space-md) 0; }
.rede:first-of-type { border-top: none; }
.rede-h { font-size: var(--text-md); font-weight: var(--weight-black); color: var(--ink); margin-bottom: var(--space-2xs); }
.rede-h a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rede-partei {
  display: inline-block; font-size: var(--text-2xs); font-weight: var(--weight-black);
  border-radius: var(--radius-xs); padding: 2px var(--space-xs); margin-left: var(--space-2xs);
  vertical-align: 0.1em;
}
.rede-meta { font-size: var(--text-xs); color: var(--ink-3); font-weight: var(--weight-semi); margin-bottom: var(--space-xs); }
.rede-meta a { color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }
.rede-top { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--structure); margin-bottom: var(--space-xs); }
/* Wortlaut: dieselbe Familie wie die Oberfläche, aber leichter, größer und mit
   mehr Zeilenabstand — und über die volle Breite, wie im Viewer. */
.rede-text { font-size: var(--text-read); font-weight: var(--weight-normal); line-height: var(--leading-read); color: var(--ink-2); }
.rede-text p { margin-bottom: var(--space-sm); }
.rede-text em { font-style: italic; color: var(--ink-3); }
.rede-mehr { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }
.rede-einzeln { border-top: none; }
.rede-quelle { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; margin-top: var(--space-md); font-size: var(--text-sm); }
.rede-quelle a { color: var(--structure); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 2px; }
/* Teilen-Knopf: dieselbe Optik wie die Links daneben, nur als <button> —
   das Verhalten (Web-Share-API bzw. Zwischenablage) ist JS-gesteuert, kein
   echtes Ziel zum Verlinken. */
.rede-quelle button {
  background: none; border: none; font: inherit; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  color: var(--structure); font-weight: var(--weight-bold);
  text-decoration: underline; text-underline-offset: 2px;
}
.rede-quelle button:hover { color: var(--structure-hover); }
.rede-quelle button.kopiert { color: var(--vote-for); text-decoration: none; }

.frak-pille {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-right: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-semi);
}
.frak-pille i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.55); }

/* ── Abstimmungstabellen ─────────────────────────────────────────────────── */
.v-ergebnis { margin-bottom: var(--space-md); }
.v-badge {
  display: inline-block; font-size: var(--text-sm); font-weight: var(--weight-black);
  border-radius: var(--radius-xs); padding: var(--space-3xs) var(--space-sm);
  color: var(--on-vote, #1a1a2e); background: var(--vote-absent);
}
.v-badge.ja { background: var(--vote-for); color: #1a1a2e; }
.v-badge.nein { background: var(--vote-against); color: #ffffff; }

.v-tabelle {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.v-tabelle caption { text-align: left; font-size: var(--text-xs); color: var(--ink-3); padding-bottom: var(--space-2xs); }
.v-tabelle th, .v-tabelle td { padding: var(--space-xs) var(--space-sm); text-align: left; border-bottom: 1px solid var(--line); }
.v-tabelle thead th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-3); }
.v-tabelle tbody th { font-weight: var(--weight-bold); color: var(--ink); }
.v-tabelle td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.v-tabelle tr:last-child th, .v-tabelle tr:last-child td { border-bottom: none; }
.v-tabelle a { color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }
/* Die Rechengrundlage steht am Wert, nicht in einer Fußnote. */
.v-regel { display: block; font-size: var(--text-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Lange Namenslisten dürfen seitlich scrollen, statt die Seite zu sprengen.
   `display:block` macht die Tabelle zum Blockelement — dann greift ihre
   Standard-Schrumpfbreite, deshalb min-width dazu. */
.v-namen { display: block; overflow-x: auto; min-width: 100%; }
.v-namen tbody, .v-namen thead { display: table; width: 100%; }

/* ── Blättern ────────────────────────────────────────────────────────────── */
.seiten {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  margin-top: var(--space-xl); font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--ink-3);
}
.seiten a { color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .profil-foto { width: 84px; height: 105px; }
  .sliste a { flex-wrap: wrap; gap: var(--space-2xs); }
  .sliste-d { flex-basis: auto; }
}

/* ── FAQ-Seite ───────────────────────────────────────────────────────────── */
/* Eigener, zentrierter Rahmen für die ganze Seite (Brotkrumen bis Kontakt-
   Karte): .faq-card/.faq-liste sind absichtlich schmaler als die Shell
   (--measure-ui, 70ch — lange Fließtextzeilen lesen sich sonst schlecht),
   aber ohne dieses margin:auto hingen sie links in der Shell, statt darin zu
   zentrieren, und die ganze Seite wirkte auf breiten Bildschirmen nach links
   verschoben. .seite-h1/.seite-h2 bleiben dabei außen vor — sie sind mit den
   Abgeordneten-/Sitzungsseiten geteilt, die daneben oft volle Shell-Breite
   brauchen (Listen, Tabellen). */
.faq-inhalt { max-width: var(--measure-ui); margin: 0 auto; }
.faq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.faq-card p { color: var(--ink-2); font-size: var(--text-base); }
.faq-card p:last-child { margin-bottom: 0; }
.faq-card-titel { font-size: var(--text-xl); font-weight: var(--weight-black); margin-bottom: var(--space-sm); }

.faq-liste { margin-bottom: var(--space-lg); }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+"; display: inline-block; width: 1.2em; color: var(--structure);
  font-weight: var(--weight-black);
}
.faq-item[open] summary::before { content: "–"; }
.faq-item summary:hover { background: var(--surface-inset); }
.faq-a {
  padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 1.2em);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-read);
}

.kontakt-liste { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.kontakt-link {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink); flex: 1 1 220px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.kontakt-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.kontakt-link small { color: var(--ink-3); font-weight: var(--weight-normal); }