/* site.css — all styles of the site. Values only from tokens.css (design.md B1). */

/* Atkinson Hyperlegible — Fließtext */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4 Semibold — Überschriften */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-200);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  overflow-wrap: break-word;
}
h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--text-100);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p, ul, ol, dl, blockquote, table { margin: 0 0 var(--space-md); }
strong { font-weight: var(--fw-bold); color: var(--text-100); }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--action); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
a:active { color: var(--action-press); }
:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; border-radius: var(--r-sm); }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: var(--space-md); top: -100px; z-index: 10;
  background: var(--bg-2); color: var(--action); padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-sm);
}
.sprunglink:focus { top: var(--space-md); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-lg); }
.lesebreite { max-width: var(--reading); }
.seite { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.lead { font-size: var(--fs-lg); color: var(--text-200); }
.abschnitt { padding: var(--space-2xl) 0; }
.abschnitt-flaeche { background: var(--bg-1); }
.abschnitt-oben { margin-top: var(--space-xl); }
.platzhalter { color: var(--text-300); border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--space-md); }

/* ── Buttons — one primary per view (design.md A8) ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--tap); padding: var(--space-sm) var(--space-lg);
  border: 2px solid transparent; border-radius: var(--r-md);
  font: inherit; font-weight: var(--fw-bold); line-height: 1.25; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn-primary:active { background: var(--action-press); }
.btn-primary:disabled:hover { background: var(--action); }
.btn-gross { font-size: var(--fs-lg); padding: var(--space-md) var(--space-xl); }

.btn-secondary { background: transparent; color: var(--text-100); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-3); color: var(--text-100); border-color: var(--text-100); }
.btn-secondary:active { background: var(--bg-4); }
.btn-secondary:disabled:hover { background: transparent; border-color: var(--border-strong); }

.link-tertiaer {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: var(--fw-bold); color: var(--action);
}

.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.kopf { background: var(--bg-0); border-bottom: 1px solid var(--border-soft); }
.kopf-innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  min-height: 80px; padding-top: var(--space-sm); padding-bottom: var(--space-sm);
}
.logo {
  font-family: var(--font-brand); font-weight: var(--fw-heading); font-size: var(--fs-lg);
  color: var(--text-100); text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.logo:hover { color: var(--text-100); text-decoration: underline; }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-md);
  color: var(--text-200); text-decoration: none; border-radius: var(--r-sm);
}
.nav a:hover { background: var(--bg-3); color: var(--text-100); }
/* Active entry: bar at the edge, stronger text, slightly set-off surface — one solution site-wide */
.nav a[aria-current="page"] {
  color: var(--text-100); font-weight: var(--fw-bold); background: var(--bg-1);
  box-shadow: inset 0 -3px 0 var(--action); border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ── Footer — brand surface, no primary buttons here ─────────────────────── */
.fuss { background: var(--surface-brand); color: var(--on-surface-brand-muted); padding: var(--space-2xl) 0; font-size: var(--fs-sm); }
.fuss-innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); }
.fuss-name, .fuss-titel { color: var(--on-surface-brand); font-weight: var(--fw-bold); margin-bottom: var(--space-sm); }
.fuss-name { font-family: var(--font-brand); font-weight: var(--fw-heading); font-size: var(--fs-lg); }
.fuss a { color: var(--link-on-brand); }
.fuss a:hover { color: var(--on-surface-brand); }
.fuss :focus-visible { outline-color: var(--link-on-brand); }
.fuss-links { list-style: none; padding: 0; margin: 0; }
.fuss-links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── Start page ─────────────────────────────────────────────────────────── */
.held { padding: var(--space-xl) 0 var(--space-2xl); }
.held-innen { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2xl); align-items: center; }
.held h1 { font-size: var(--fs-3xl); }
.dachzeile { color: var(--text-300); font-weight: var(--fw-bold); margin-bottom: var(--space-sm); }
.held .lead { margin-bottom: var(--space-xl); }
.portrait img {
  width: 100%; aspect-ratio: 900 / 1047; object-fit: cover; object-position: center top;
  border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--bg-1);
}
.fakten {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);
}
.fakten li { border-left: 3px solid var(--border-soft); padding-left: var(--space-md); color: var(--text-300); }
.fakten strong { display: block; font-size: var(--fs-lg); }

.schritte {
  list-style: none; padding: 0; margin: 0; counter-reset: schritt;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl);
}
.schritte li { counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt); display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: var(--r-pill); margin-bottom: var(--space-md);
  background: var(--surface-brand); color: var(--on-surface-brand);
  font-family: var(--font-brand); font-weight: var(--fw-heading); font-size: var(--fs-lg);
}
.schritte p { color: var(--text-300); }

.themen {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg);
}
.thema { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: var(--space-lg); display: flex; flex-direction: column; }
.thema p { color: var(--text-300); }
.thema .link-tertiaer { margin-top: auto; }

.zitat {
  margin: 0 0 var(--space-lg); padding: 0 0 0 var(--space-lg);
  border-left: 3px solid var(--border-soft);
  font-family: var(--font-brand); font-weight: var(--fw-heading); font-size: var(--fs-lg);
  color: var(--text-100); line-height: 1.4;
}

/* ── Course cards ───────────────────────────────────────────────────────── */
.kartenliste {
  list-style: none; padding: 0; margin: 0 0 var(--space-lg);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg);
}
.kartenliste > li { display: flex; }
.karte {
  display: flex; flex-direction: column; width: 100%;
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--space-lg);
}
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.karte-thema { font-size: var(--fs-sm); color: var(--text-300); }
.karte-titel { font-size: var(--fs-lg); margin-bottom: var(--space-md); }
.karte-daten { margin: 0 0 var(--space-md); }
.karte-daten > div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-md); padding: var(--space-xs) 0; }
.karte-daten dt { color: var(--text-300); font-size: var(--fs-sm); padding-top: 2px; }
.karte-daten dd { margin: 0; color: var(--text-100); }
.karte-text { color: var(--text-300); }
.karte-hinweis { font-size: var(--fs-sm); color: var(--text-300); }
.karte-aktion { margin-top: auto; align-self: flex-start; }
.karte > .karte-hinweis:last-child { margin-top: auto; margin-bottom: 0; }

/* Badges — status labels, never clickable (design.md A8, B7) */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 2px var(--space-md); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.5; cursor: default;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
.badge-ok { background: var(--ok-tint); color: var(--ok); }
.badge-warn { background: var(--warn-tint); color: var(--warn); }
.badge-voll { background: var(--bg-3); color: var(--text-300); }
.badge-abgesagt { background: var(--error-tint); color: var(--error); }
.badge-geplant { background: var(--bg-1); color: var(--text-300); box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge-geplant::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* ── Course list ────────────────────────────────────────────────────────── */
.stand { font-size: var(--fs-sm); color: var(--text-300); margin-bottom: var(--space-xl); }
.filter { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.filter-titel { font-weight: var(--fw-bold); color: var(--text-100); margin-bottom: var(--space-sm); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Chips — filter and choose; selected state with tint plus check mark (not colour alone) */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--tap); padding: 0 var(--space-md);
  background: var(--bg-2); color: var(--text-100); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--bg-3); color: var(--text-100); text-decoration: none; }
.chip:active { background: var(--bg-4); }
.chip[aria-current="true"], .chip[aria-pressed="true"] {
  background: var(--action-tint); border-color: var(--action); font-weight: var(--fw-bold);
}
.chip[aria-current="true"]::before, .chip[aria-pressed="true"]::before { content: "✓"; }
.chip[aria-current="true"]:hover, .chip[aria-pressed="true"]:hover { background: var(--action-tint-hover); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

.ergebnis-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) 0; margin-bottom: var(--space-lg); border-bottom: 1px solid var(--border-soft);
}
.ergebnis-kopf p { margin: 0; font-weight: var(--fw-bold); color: var(--text-100); }
.monat { margin-bottom: var(--space-xl); }
.monat h2 { font-size: var(--fs-lg); padding-bottom: var(--space-sm); }

.leer {
  background: var(--bg-1); border-radius: var(--r-lg); padding: var(--space-xl);
  max-width: calc(var(--reading) + 2 * var(--space-xl));
}
.leer h2, .leer h1 { font-size: var(--fs-xl); }

/* ── About page ─────────────────────────────────────────────────────────── */
.profil { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--space-2xl); align-items: start; }
.profil-text h2 { margin-top: var(--space-xl); }
.seite h3 { margin-top: var(--space-lg); }
.seite :is(p, ul, table) + h2 { margin-top: var(--space-xl); }
.seite table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.seite th, .seite td { text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--border-soft); vertical-align: top; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.formular-bereich { margin-top: var(--space-2xl); }
.formular { display: grid; gap: var(--space-lg); }
.formular > .btn { justify-self: start; }
.feld { display: grid; gap: var(--space-xs); border: 0; padding: 0; margin: 0; min-width: 0; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.feld label, .feld legend { font-weight: var(--fw-bold); color: var(--text-100); padding: 0; }
.feld input[type="text"], .feld input[type="email"], .feld select, .feld textarea {
  width: 100%; min-height: var(--tap); padding: var(--space-sm) var(--space-md);
  font: inherit; color: var(--text-100); background: var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.feld textarea { resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--text-100); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 1px; }
.feld input:disabled, .feld textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.feld [aria-invalid="true"] { border: 2px solid var(--error); }
.feld-hilfe { font-size: var(--fs-sm); color: var(--text-300); margin: 0; }
.feld-fehler { font-size: var(--fs-sm); color: var(--error); font-weight: var(--fw-bold); margin: 0; }
.feld-fehler::before { content: "Fehler: "; }
.optionen { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.option { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--tap); font-weight: var(--fw-regular) !important; cursor: pointer; }
.option input { width: 22px; height: 22px; accent-color: var(--action); }
.formular-meldung {
  background: var(--error-tint); color: var(--error); font-weight: var(--fw-bold);
  border-radius: var(--r-md); padding: var(--space-md);
}
.bestaetigung {
  background: var(--ok-tint); color: var(--text-100); border-left: 4px solid var(--ok);
  border-radius: var(--r-md); padding: var(--space-lg);
}
.bestaetigung:focus { outline: none; }
.datenschutz-satz { font-size: var(--fs-sm); color: var(--text-300); margin: 0; }

/* Expandable panel: the whole head is the target, the marker does not move */
.aufklapp { margin-top: var(--space-sm); }
.aufklapp summary {
  display: flex; align-items: center; gap: var(--space-sm); min-height: var(--tap);
  cursor: pointer; color: var(--action); font-weight: var(--fw-bold); list-style: none;
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::before { content: "+"; width: 1em; text-align: center; }
.aufklapp[open] summary::before { content: "–"; }
.aufklapp summary:hover { color: var(--action-hover); text-decoration: underline; }
.aufklapp-inhalt { padding: var(--space-sm) 0 0 var(--space-lg); font-size: var(--fs-sm); color: var(--text-300); }

/* ── Assistant window — one window, one primary button (design.md B7) ───── */
.assistent {
  position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto;
  width: min(600px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--bg-0); color: var(--text-200);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.assistent[open] { display: flex; flex-direction: column; }
.assistent-kopf, .assistent-hinweis, .auswahl-bereich, .eingabe { flex: 0 0 auto; }
.assistent::backdrop { background: var(--surface-brand); opacity: 0.4; }
.assistent-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  background: var(--surface-brand); color: var(--on-surface-brand); padding: var(--space-md) var(--space-lg);
}
.assistent-kopf h2 { color: var(--on-surface-brand); font-size: var(--fs-lg); margin: 0; }
.assistent-rolle { color: var(--on-surface-brand-muted); font-size: var(--fs-sm); margin: 0; }
.assistent-kopf :focus-visible { outline-color: var(--link-on-brand); }
.btn-auf-marke { background: transparent; color: var(--on-surface-brand); border-color: var(--on-surface-brand-muted); }
.btn-auf-marke:hover { border-color: var(--on-surface-brand); color: var(--on-surface-brand); text-decoration: underline; }
.btn-auf-marke:active { transform: scale(0.98); }
.assistent-hinweis {
  margin: 0; padding: var(--space-sm) var(--space-lg); background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--text-200);
}
.verlauf {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.nachricht p:last-child { margin-bottom: 0; }
.nachricht > * + * { margin-top: var(--space-md); }
.nachricht-nutzer {
  align-self: flex-end; max-width: 85%; background: var(--bg-1); color: var(--text-100);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); padding: var(--space-sm) var(--space-md);
}
.nachricht-assistent { max-width: 100%; }
.kartenliste-schmal { grid-template-columns: 1fr; margin-bottom: 0; }
.kartenliste-schmal .karte { padding: var(--space-md); }
.vorschlaege { margin-top: var(--space-md); }
.vorschlaege .chip { text-align: left; }
.laedt-text { color: var(--text-300); }
.laedt-platz {
  min-height: 160px; border-radius: var(--r-lg); background: var(--bg-1);
  animation: atmen 1.6s var(--ease) infinite alternate;
}
@keyframes atmen { from { opacity: 1; } to { opacity: 0.55; } }
.assistent-notiz { font-size: var(--fs-sm); color: var(--text-300); }
.assistent-fehler {
  color: var(--text-100); background: var(--error-tint); border-left: 4px solid var(--error);
  border-radius: var(--r-md); padding: var(--space-md);
}
.quellen { font-size: var(--fs-sm); border-top: 1px solid var(--border-soft); padding-top: var(--space-sm); }
.quellen-titel { font-weight: var(--fw-bold); color: var(--text-100); margin-bottom: var(--space-xs); }
.quellen ul { margin: 0; padding-left: var(--space-lg); }
.formular-alarm { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: var(--space-lg); gap: var(--space-md); }
.formular-titel { font-weight: var(--fw-bold); color: var(--text-100); margin: 0; }

.auswahl-bereich { border-top: 1px solid var(--border-soft); padding: 0 var(--space-lg); }
.auswahl-schalter {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: var(--tap);
  background: none; border: 0; padding: 0; font: inherit; font-weight: var(--fw-bold);
  color: var(--action); cursor: pointer; text-align: left;
}
.auswahl-schalter::before { content: "+"; width: 1em; text-align: center; }
.auswahl-schalter[aria-expanded="true"]::before { content: "–"; }
.auswahl-schalter:hover { color: var(--action-hover); text-decoration: underline; }
.auswahl { max-height: 26vh; overflow-y: auto; padding-bottom: var(--space-md); display: grid; gap: var(--space-sm); }
.auswahl-gruppe { display: grid; grid-template-columns: 4em 1fr; gap: var(--space-sm); align-items: start; }
.auswahl .filter-titel { margin: 0; font-size: var(--fs-sm); min-height: var(--tap); display: flex; align-items: center; }

.eingabe {
  display: flex; gap: var(--space-sm); align-items: flex-end;
  padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-soft); background: var(--bg-0);
}
.eingabe textarea {
  flex: 1 1 auto; min-height: var(--tap); max-height: 30vh; resize: vertical;
  padding: var(--space-sm) var(--space-md); font: inherit; color: var(--text-100); background: var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.eingabe textarea:hover { border-color: var(--text-100); }
.eingabe textarea::placeholder, .feld ::placeholder { color: var(--text-400); }
.eingabe .btn { flex: 0 0 auto; }
.assistent[data-antwortet] .eingabe .btn-primary { background: var(--text-100); }
.assistent[data-antwortet] .eingabe .btn-primary:hover { background: var(--text-200); }

@media (max-width: 560px) {
  .assistent { width: 100vw; }
  .eingabe { flex-direction: column; align-items: stretch; }
  .auswahl-gruppe { grid-template-columns: 1fr; gap: 0; }
  .assistent-kopf, .verlauf, .eingabe, .auswahl-bereich, .assistent-hinweis { padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* ── Maintenance view ───────────────────────────────────────────────────── */
.pflege-sprung { margin-bottom: var(--space-xl); }
.pflege-sprung a { display: inline-flex; align-items: center; min-height: var(--tap); }
.pflege-block { padding: var(--space-xl) 0; border-top: 1px solid var(--border-soft); }
.pflege-block h3 { font-size: var(--fs-lg); margin-top: var(--space-xl); }
.pflege-block .aktionen { margin-bottom: var(--space-lg); }
.fortschritt { margin: 0; color: var(--text-200); font-weight: var(--fw-bold); }
.fortschritt:empty { display: none; }
.verbrauch strong { font-size: var(--fs-lg); }
.leer-satz { color: var(--text-300); }
.pflege-liste { padding-left: var(--space-lg); }
.pflege-liste li { margin-bottom: var(--space-xs); }
.pflege-tabelle { display: block; overflow-x: auto; max-width: 100%; }
.pflege-tabelle th { color: var(--text-100); white-space: nowrap; }
.pflege-tabelle td { min-width: 8em; }
.anfragen { list-style: none; padding: 0; margin: 0; }
.anfragen > li { border-bottom: 1px solid var(--border-soft); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-1); padding: 0 var(--space-xs); border-radius: var(--r-sm); }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .held-innen { grid-template-columns: 1fr; gap: var(--space-xl); }
  .held .portrait { order: -1; max-width: 420px; }
  .held .portrait img { aspect-ratio: 4 / 3; }
  .held h1 { font-size: var(--fs-2xl); }
  .fakten, .schritte { grid-template-columns: 1fr; }
  .profil { grid-template-columns: 1fr; gap: var(--space-lg); }
  .profil .portrait { max-width: 260px; }
}
@media (max-width: 560px) {
  .container { padding: 0 var(--space-md); }
  .kopf-assistent { width: 100%; }
  .kartenliste { grid-template-columns: 1fr; }
  .karte-daten > div { grid-template-columns: 1fr; gap: 0; }
  .feld-reihe { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-xl); }
  .abschnitt { padding: var(--space-xl) 0; }
}