/* klasu Komponenten-CSS v0.1.0 (Entwurf Phase 3)
   Benötigt tokens.css und base.css. Kein JavaScript nötig.
   Benennung: Bauteil, Teile mit __, explizite Varianten mit - (statt Schalter): .btn-danger, .badge-new, .alert-error.
   So lassen sich Teile 1:1 auf Compound Components abbilden (Card, Card.Header, Card.Body …).
   Responsive Verhalten hängt am Container `app` (@container), nicht am Fenster. Dadurch funktionieren die Bauteile auch in schmalen Einbettungen. */

/* ---------- Icons ---------- */
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; stroke: currentColor; fill: none; }
.icon-lg { width: 2.5rem; height: 2.5rem; }

/* ---------- Buttons (Ergänzung zu base.css) ---------- */
.btn-primary { /* explizite Variante, entspricht dem Standard-Button */ }
.btn-icon { padding: var(--space-2); min-width: var(--layout-target-touch); }
.btn[aria-disabled="true"], button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"], button[aria-busy="true"] { position: relative; pointer-events: none; }
.btn[aria-busy="true"]::before, button[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: klasu-spin var(--motion-duration-spin) linear infinite;
}
@keyframes klasu-spin { to { transform: rotate(360deg); } }
.btn-secondary[aria-busy="true"]::before, .btn-tertiary[aria-busy="true"]::before { border-color: var(--color-accent); border-right-color: transparent; }
.link-quiet { color: inherit; text-decoration-color: var(--color-border-strong); }

/* ---------- Formularfelder ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); max-width: 32rem; }
.field > label, .field__label { margin: 0; font-weight: var(--font-weight-strong); }
.field__hint { color: var(--color-text-muted); font-size: var(--font-size--1); margin: 0; }
.field__error { display: flex; gap: var(--space-2); color: var(--color-error); font-size: var(--font-size--1); font-weight: var(--font-weight-strong); margin: 0; }
.field input, .field select, .field textarea { max-width: none; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--color-error); border-width: var(--layout-focus-ring); }
.input-group { display: flex; align-items: stretch; }
.input-group input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; font-family: var(--font-family-amount); font-variant-numeric: tabular-nums; text-align: right; }
.input-group__suffix { display: inline-flex; align-items: center; padding: 0 var(--space-3); background: var(--color-surface-sunken); border: 2px solid var(--input-border); border-left: 0; border-radius: 0 var(--input-radius) var(--input-radius) 0; color: var(--color-text-muted); font-family: var(--font-family-amount); }
.choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--layout-target-touch); padding: var(--space-1) 0; font-weight: var(--font-weight-body); margin: 0; cursor: pointer; }
.choice input { flex: none; margin: 0.15rem 0 0; }
.choice__text small { display: block; color: var(--color-text-muted); }
/* Schalter: <label class="switch"><input type="checkbox" role="switch"><span class="switch__track"></span><span class="switch__text">…</span></label> */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--layout-target-touch); margin: 0; cursor: pointer; font-weight: var(--font-weight-body); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex: none; width: 3.25rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-surface-sunken); box-shadow: inset 0 0 0 2px var(--color-border-strong); transition: background-color var(--motion-duration-base) var(--motion-ease-out); }
.switch__track::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-text-muted); transition: transform var(--motion-duration-base) var(--motion-ease-out); }
.switch input:checked + .switch__track { background: var(--color-accent); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(1.5rem); background: var(--color-text-on-accent); }
.switch input:focus-visible + .switch__track { outline: var(--layout-focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.55; }
.switch__state { font-weight: var(--font-weight-strong); }
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form > * + * { margin-top: 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.error-summary { padding: var(--space-4); background: var(--color-error-bg); color: var(--color-text); border-radius: var(--radius-md); box-shadow: inset 4px 0 0 var(--color-error); }
.error-summary h2, .error-summary h3 { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); color: var(--color-error); }
.error-summary ul { margin: var(--space-2) 0 0; padding-left: 1.25em; }
.error-summary a { color: var(--color-text); }

/* ---------- Karte ---------- */
.card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 0 0 1px var(--card-border), var(--shadow-1); padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-3); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__title { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); line-height: var(--font-leading-snug); margin: 0; }
.card__body > * + * { margin-top: var(--space-2); }
.card__footer { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.card-link { position: relative; }
.card-link:hover { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-2); }
.card-link a::after { content: ""; position: absolute; inset: 0; border-radius: var(--card-radius); }
.card-link a { display: inline-flex; align-items: center; min-height: var(--layout-target-touch); text-decoration: none; color: inherit; }
.card-link:focus-within { outline: var(--layout-focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.card-link a:focus-visible { outline: none; }
.card-new { box-shadow: 0 0 0 1px var(--card-border), inset 0.25rem 0 0 var(--color-new-edge); }

/* ---------- Listen und Tabellen ---------- */
.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; max-width: none; }
.list__item + .list__item { border-top: 1px solid var(--color-border); margin-top: 0; }
.list__main { flex: 1; min-width: 0; }
.list__meta { color: var(--color-text-muted); font-size: var(--font-size--1); }
.table-stack { container-type: inline-size; container-name: table; overflow-x: auto; }
@container table (max-width: 34rem) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .table-stack td { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-1) 0; }
  .table-stack td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--font-size--1); font-family: var(--font-family-ui); font-weight: var(--font-weight-body); }
}

/* ---------- Badge, Chip, Status, Rollen ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size--1); font-weight: var(--font-weight-strong); line-height: 1.5; max-width: 100%; background: var(--color-surface-sunken); color: var(--color-text); }
.badge-new { background: var(--color-new); color: var(--color-on-new); box-shadow: inset 0 0 0 1.5px var(--color-new-edge); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-target-touch); padding: 0 var(--space-4); border-radius: var(--radius-full); background: transparent; color: var(--color-text); border: 2px solid var(--color-border-strong); font-weight: var(--font-weight-body); }
.chip:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-text); font-weight: var(--font-weight-strong); }
/* Rollen: immer Icon + Text, nie nur Farbe */
.role { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-3) 0.125rem var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size--1); font-weight: var(--font-weight-strong); box-shadow: inset 0 0 0 1.5px currentColor; color: var(--color-text-muted); max-width: 100%; }
.role-tenant-admin { color: var(--color-info); }
.role-tenant-reader { color: var(--color-module-documents); }
.role-class-admin { color: var(--color-accent); }
.role-treasurer { color: var(--color-module-cash); }
.role-parent { color: var(--color-text-muted); }
.role-teacher { color: var(--color-module-events); }
.role-student { color: var(--color-module-messages); }

/* ---------- Hinweise ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text); box-shadow: inset 0.25rem 0 0 var(--alert-accent, var(--color-border-strong)); }
.alert__icon { color: var(--alert-accent, var(--color-text-muted)); margin-top: 0.15rem; }
.alert__title { font-weight: var(--font-weight-strong); margin: 0; }
.alert__body { margin: 0; }
.alert__body > * + * { margin-top: var(--space-2); }
.alert-info { --alert-accent: var(--color-info); background: var(--color-info-bg); }
.alert-success { --alert-accent: var(--color-success); background: var(--color-success-bg); }
.alert-warning { --alert-accent: var(--color-warning); background: var(--color-warning-bg); }
.alert-error { --alert-accent: var(--color-error); background: var(--color-error-bg); }
.alert-banner { border-radius: 0; box-shadow: none; border-bottom: 3px solid var(--alert-accent, var(--color-border-strong)); justify-content: center; }
/* Toast ohne JS: der Server rendert ihn nach einem Redirect, „Schließen“ ist ein Link auf dieselbe Seite ohne Hinweis. Er verschwindet nie von selbst (WCAG 2.2.1). */
.toast { position: fixed; z-index: var(--z-toast); left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); max-width: 28rem; margin-inline: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-overlay); color: var(--color-text); box-shadow: var(--shadow-3); animation: klasu-toast-in var(--motion-duration-slow) var(--motion-ease-out); }
.toast[data-static] { position: static; margin: 0; animation: none; }
.toast__text { flex: 1; margin: 0; }
@keyframes klasu-toast-in { from { opacity: 0; transform: translateY(0.75rem); } }

/* ---------- Dialog ---------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: var(--z-dialog); display: none; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-scrim); }
.dialog-backdrop:target, .dialog-backdrop[data-static] { display: flex; }
.dialog-backdrop[data-static] { position: static; background: transparent; padding: 0; justify-content: flex-start; }
.dialog { width: 100%; max-width: 30rem; max-height: 100%; overflow: auto; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-overlay); color: var(--color-text); box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog__title { font-size: var(--font-size-2); font-weight: var(--font-weight-body); margin: 0; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
dialog.dialog { border: 0; margin: auto; }
.dialog { overscroll-behavior: contain; }
dialog.dialog::backdrop { background: var(--color-scrim); }

/* ---------- Tabs, Breadcrumb ---------- */
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--color-border); }
.tabs__link { display: inline-flex; align-items: center; min-height: var(--layout-target-touch); padding: 0 var(--space-4); color: var(--color-text-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: var(--font-weight-strong); }
.tabs__link:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.tabs__link[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size--1); color: var(--color-text-muted); }
.breadcrumb li { max-width: none; display: flex; gap: var(--space-2); margin: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-strong); }

/* ---------- Avatar (Initialen) ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-accent-subtle); color: var(--color-text); font-weight: var(--font-weight-strong); font-size: var(--font-size--1); letter-spacing: 0.04em; box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--font-size-0); }

/* ---------- Seitengerüst: Navigation unten (schmal) oder Seitenleiste (breit) ---------- */
.app { container-type: inline-size; container-name: app; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--color-bg); color: var(--color-text); }
.app__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.app__brand { font-size: var(--font-size-1); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--color-text); }
.app__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app__main { flex: 1; min-width: 0; padding: var(--space-5) var(--space-4) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.app__main > * { max-width: none; }
.nav { position: sticky; bottom: 0; z-index: var(--z-nav); display: flex; justify-content: space-around; background: var(--color-surface-raised); border-top: 1px solid var(--color-border); padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); }
.nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 3.5rem; padding: var(--space-1); border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size--1); }
.nav__item:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.nav__item[aria-current="page"] { color: var(--color-accent); font-weight: var(--font-weight-strong); }
.nav__item[aria-current="page"] .nav__icon { background: var(--color-accent-subtle); }
.nav__icon { display: grid; place-items: center; width: 3rem; height: 1.75rem; border-radius: var(--radius-full); }
.nav__badge { margin-left: var(--space-1); }
@container app (min-width: 52rem) {
  .app__body { flex-direction: row; }
  .nav { order: -1; position: static; flex-direction: column; justify-content: flex-start; gap: var(--space-1); width: 14rem; flex: none; border-top: 0; border-right: 1px solid var(--color-border); padding: var(--space-4) var(--space-3); background: var(--color-surface); }
  .nav__item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: var(--layout-target-touch); padding: var(--space-2) var(--space-3); font-size: var(--font-size-0); }
  .nav__icon, .nav__item[aria-current="page"] .nav__icon { width: auto; height: auto; background: transparent; }
  .nav__item[aria-current="page"] { background: var(--color-accent-subtle); }
  .app__main { padding: var(--space-6) var(--space-6) var(--space-8); max-width: 60rem; }
}
.page-head > * { min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.page-head__title { margin: 0; }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@container app (min-width: 52rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Klassen-Umschalter (ohne JS: <details>) ---------- */
.switcher { position: relative; }
.switcher > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-target-touch); padding: 0 var(--space-3); border-radius: var(--radius-md); cursor: pointer; list-style: none; font-weight: var(--font-weight-strong); box-shadow: inset 0 0 0 2px var(--color-border-strong); background: var(--color-surface-raised); }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher[open] > summary { box-shadow: inset 0 0 0 2px var(--color-accent); }
.switcher__menu { position: absolute; z-index: var(--z-overlay); top: calc(100% + var(--space-1)); right: 0; left: auto; width: max-content; min-width: 14rem; max-width: calc(100vw - 2 * var(--space-4)); margin: 0; padding: var(--space-2); list-style: none; background: var(--color-surface-overlay); border-radius: var(--radius-md); box-shadow: var(--shadow-2), 0 0 0 1px var(--color-border); }
.switcher__menu li { max-width: none; margin: 0; }
.switcher__menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--layout-target-touch); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.switcher__menu a:hover { background: var(--color-surface-sunken); }
.switcher__menu a[aria-current="true"] { font-weight: var(--font-weight-strong); background: var(--color-accent-subtle); }

/* ---------- Dashboard: Frage plus Detailzeile (Signatur aus Entwurf 10) ---------- */
.ask { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; }
.ask + .ask { border-top: 1px solid var(--color-border); }
.ask__q { margin: 0; font-size: var(--font-size-3); font-weight: var(--font-weight-display); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
.ask-new .ask__q { color: var(--color-ask-new-text); }
.ask-new .ask__q span { background: var(--color-ask-new-bg); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.2em; margin-left: -0.2em; }
.ask-upcoming .ask__q { color: var(--color-ask-upcoming-text); }
.ask__items { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ask__items li { max-width: none; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.ask__detail { color: var(--color-text-muted); font-size: var(--font-size--1); letter-spacing: var(--font-tracking-detail); }

/* ---------- Kalender ---------- */
.cal-entry { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3) 0; }
.cal-entry + .cal-entry { border-top: 1px solid var(--color-border); }
.cal-entry__date { flex: none; width: 3.5rem; text-align: center; padding: var(--space-1) 0; border-radius: var(--radius-md); background: var(--color-module-events-bg); color: var(--color-module-events); font-weight: var(--font-weight-strong); line-height: 1.2; }
.cal-entry__day { display: block; font-size: var(--font-size-2); }
.cal-entry__month { display: block; font-size: var(--font-size--1); letter-spacing: var(--font-tracking-detail); text-transform: uppercase; }
.cal-entry__title { margin: 0; font-weight: var(--font-weight-strong); }
.cal-entry__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-text-muted); font-size: var(--font-size--1); }
.cal-month { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; text-align: center; }
.cal-month th { padding: var(--space-1) 0; border: 0; text-align: center; letter-spacing: 0; font-size: var(--font-size--1); font-weight: var(--font-weight-body); color: var(--color-text-muted); }
.cal-month td { padding: 0; border: 0; }
.cal-day { position: relative; display: grid; place-items: center; min-height: var(--layout-target-touch); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.cal-day:hover { background: var(--color-surface-sunken); }
.cal-day-outside { color: var(--color-text-muted); font-weight: 300; }
.cal-day[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--color-accent); font-weight: var(--font-weight-strong); }
.cal-day-event { background: var(--color-module-events-bg); color: var(--color-module-events); font-weight: var(--font-weight-strong); }
.cal-day-event::after { content: ""; position: absolute; bottom: 0.3rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }

/* ---------- Pinnwand-Eintrag ---------- */
.post { display: flex; gap: var(--space-3); align-items: flex-start; }
.post__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.post__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.post__author { font-weight: var(--font-weight-strong); }
.post__time { color: var(--color-text-muted); font-size: var(--font-size--1); }
.post__title { margin: 0; font-size: var(--font-size-1); font-weight: var(--font-weight-strong); line-height: var(--font-leading-snug); }
.post-pinned { box-shadow: 0 0 0 1px var(--card-border), inset 0 0.25rem 0 var(--color-module-messages); }

/* ---------- Beträge und Saldo ---------- */
.amount-in { color: var(--color-amount-in); font-weight: var(--font-weight-strong); }
.amount-out { color: var(--color-amount-out); font-weight: var(--font-weight-strong); }
.balance { display: flex; flex-direction: column; gap: var(--space-1); }
.balance__label { color: var(--color-text-muted); font-size: var(--font-size--1); letter-spacing: var(--font-tracking-detail); }
.balance__value { font-family: var(--font-family-amount); font-variant-numeric: tabular-nums; font-size: var(--font-size-3); font-weight: 700; line-height: 1.1; }
.balance__meta { color: var(--color-text-muted); font-size: var(--font-size--1); }

/* ---------- Einwilligung mit Verlauf ---------- */
.consent { display: flex; flex-direction: column; gap: var(--space-3); }
.consent__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.consent__title { margin: 0; font-weight: var(--font-weight-strong); }
.consent__desc { margin: 0; color: var(--color-text-muted); font-size: var(--font-size--1); }
.consent__history > summary { cursor: pointer; min-height: var(--layout-target-touch); display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent); font-weight: var(--font-weight-strong); }
.consent__history ol { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.consent__history li { max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font-size: var(--font-size--1); }

/* ---------- Dokument ---------- */
.file { display: flex; align-items: center; gap: var(--space-3); }
.file__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-module-documents-bg); color: var(--color-module-documents); }
.file__name { margin: 0; font-weight: var(--font-weight-strong); overflow-wrap: anywhere; }
.file__meta { color: var(--color-text-muted); font-size: var(--font-size--1); }

/* ---------- Leerzustand, Fehlerseite, Skeleton ---------- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.empty__icon { color: var(--color-text-muted); }
.empty__title { margin: 0; font-size: var(--font-size-2); font-weight: var(--font-weight-body); }
.empty__text { margin: 0; color: var(--color-text-muted); }
.error-page { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) 0; }
.error-page__code { margin: 0; font-size: var(--font-size-display); font-weight: var(--font-weight-display); line-height: 1; color: var(--color-accent); font-family: var(--font-family-amount); }
.skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-border) 50%, var(--color-surface-sunken) 100%); background-size: 200% 100%; animation: klasu-shimmer var(--motion-duration-shimmer) linear infinite; }
.skeleton-line { height: 1rem; }
.skeleton-title { height: 1.5rem; width: 60%; }
.skeleton-block { height: 5rem; }
@keyframes klasu-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .btn[aria-busy="true"]::before, button[aria-busy="true"]::before { animation: none; } }

/* ---------- Fußzeile und Umschalter (Sprache, Thema ohne JS: Formulare) ---------- */
.site-footer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size--1); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-footer li { max-width: none; margin: 0; }
.segmented { display: inline-flex; align-items: stretch; border-radius: var(--radius-md); box-shadow: inset 0 0 0 2px var(--color-border-strong); overflow: hidden; }
.segmented > button { border-radius: 0; background: transparent; color: var(--color-text); min-height: 2.5rem; padding: 0 var(--space-3); border: 0; font-weight: var(--font-weight-body); }
.segmented > button + button { box-shadow: inset 2px 0 0 var(--color-border-strong); margin-top: 0; }
.segmented > button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: var(--font-weight-strong); }
.segmented > button:hover:not([aria-pressed="true"]) { background: var(--color-surface-sunken); color: var(--color-text); }

/* ---------- Hilfs-Container für Mockups (nicht produktiv) ---------- */
@media (forced-colors: active) {
  .switch__track, .badge, .role, .avatar, .card { border: 1px solid CanvasText; }
  .switch input:checked + .switch__track { background: Highlight; }
}

/* ---------- Anmeldeseiten und Seitenrahmen-Korrekturen ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); background: var(--color-bg); }
.auth__card { width: min(100%, 26rem); margin: 0; padding: var(--card-padding); gap: var(--space-4); }
.auth__title { font-size: var(--font-size-3); margin: 0; }
.app__main { width: auto; margin: 0; }
.app__main > * + * { margin-top: 0; }
.app__main > section, .app__main > section + section { padding-top: 0; margin-top: 0; border-top: 0; }

/* Hover für Eingabefelder (dunklerer Rand), ohne Layoutänderung */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--color-text-muted); }

/* Robustheit bei langen Wörtern, großer Schrift und Textabstand (Phase 4) */
h1, h2, h3, h4, .page-head__title, .card__title, .post__title, .cal-entry__title, .list__main, .ask__items a, .text-detail, td, th { overflow-wrap: anywhere; }
.list__main, .post__body, .consent__row > div, .card__header > * { min-width: 0; }
.switcher > summary { max-width: 100%; }
.switcher > summary > span { overflow-wrap: anywhere; }
.cluster > * { min-width: 0; }
fieldset.segmented { margin: 0; padding: 0; min-width: 0; border: 0; }

/* Große Schrift auf kleinem Bildschirm (Browser-Schrift 200 %): Umbrechen statt Abschneiden */
.nav { flex-wrap: wrap; }
.nav__item { flex: 1 1 3.5rem; min-width: 0; overflow-wrap: anywhere; text-align: center; }
.switch { flex-wrap: wrap; max-width: 100%; }
.list__item { flex-wrap: wrap; }
.btn, button { max-width: 100%; white-space: normal; text-align: center; }
.balance__value { font-size: min(var(--font-size-3), 12cqi); overflow-wrap: anywhere; }
.badge, .role { white-space: normal; }
@container app (min-width: 52rem) { .nav { flex-wrap: nowrap; } .nav__item { flex: none; text-align: left; } }
.balance__label, .balance__meta, .card { overflow-wrap: anywhere; min-width: 0; }
.grid-2 > *, .grid > * { min-width: 0; }
.toast { flex-wrap: wrap; }
/* Sehr große Schrift (Container unter 18 rem, das entspricht etwa 200 % Browser-Schrift auf einem Telefon): Leiste nicht mehr kleben lassen */
@container app (max-width: 18rem) { .nav { position: static; } }
/* Beschriftungen und Pillen nie mitten im Wort umbrechen (Feinschliff nach Stresstest) */
.table-stack td::before { flex: 0 0 auto; overflow-wrap: normal; }
.list__main { flex: 1 1 10rem; }
.badge, .role, .chip { min-width: 0; overflow-wrap: anywhere; }

/* Fokus nicht von der klebenden Navigationsleiste verdecken (WCAG 2.4.11) */
html { scroll-padding-block-end: 5.5rem; }
/* Phase 6: Umschalter mit drei Optionen darf bei großer Schrift umbrechen statt die Seite zu verbreitern. */
.segmented { max-width: 100%; }
.segmented > button { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* Zweistufige Bestätigung für zerstörerische Aktionen (ohne JavaScript). */
.confirm { position: relative; }
.confirm > summary { list-style: none; cursor: pointer; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm__panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-error-bg); border: 1px solid var(--color-error); max-width: 24rem; }
.confirm__panel p { margin: 0; color: var(--color-text); }
.alert__body { min-width: 0; overflow-wrap: anywhere; }