/* ============================================================
   BASE — Grundlagen, die für jede Seite gelten.

   LADEREIHENFOLGE: tokens.css → app.css → base.css → components.css
   Solange app.css als Altbestand existiert, stehen base und
   components bewusst DAHINTER: app.css setzt an mehreren Stellen
   outline:none und feste Groessen, die hier korrigiert werden.
   Sobald app.css aufgeloest ist, wandern beide davor.
   ============================================================ */

/* ---- Fokus ---------------------------------------------------
   Vorher gab es drei :focus-visible-Regeln auf der ganzen Seite,
   und input setzte outline:none. Tastaturnutzer sahen also auf
   den meisten Elementen nicht, wo sie stehen.
   WCAG 2.4.7 und 2.4.11: mindestens 2px umlaufend, Kontrast 3:1.
   -------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Maus- und Touchbedienung bekommen keinen Ring - nur Tastatur. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ---- Trefferflaechen -----------------------------------------
   WCAG 2.2 hebt Target Size auf Stufe AA: mindestens 24x24 px.
   Betroffen waren vor allem Schliessen-Symbole und Icon-Knoepfe.
   -------------------------------------------------------------- */
:where(button, a[role="button"], input[type="checkbox"], input[type="radio"]) {
  min-block-size: 24px;
  min-inline-size: 24px;
}

/* ---- Zahlen --------------------------------------------------
   Betraege untereinander muessen auf der Stelle stehen, sonst
   springen die Ziffern von Zeile zu Zeile.
   -------------------------------------------------------------- */
:where(table, .metric-card, .mini-dl, .kennzahl, [data-live-value], [data-dashboard-value]) {
  font-variant-numeric: tabular-nums;
}
td, th { font-variant-numeric: tabular-nums; }

/* ---- Sprunglink ----------------------------------------------
   Ohne ihn muss sich jeder Tastaturnutzer auf jeder Seite durch
   die gesamte Navigation arbeiten, bevor der Inhalt beginnt.
   -------------------------------------------------------------- */
.sprunglink {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: calc(var(--space-2) * -8);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  font-weight: 600;
  transition: inset-block-start .12s ease-out;
}
.sprunglink:focus { inset-block-start: var(--space-2); }

/* ---- Lesbarkeit ----------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
:where(p, li, dd) { line-height: var(--leading-normal); }
/* Fliesstext nie unter 16px - die Vorgabe der Vorlage. */
:where(main p, main li) { font-size: max(1rem, var(--text-base)); }
/* Lesetypografie: 60-75 Zeichen je Zeile fuer Textstrecken. */
.lesespalte { max-width: 68ch; }

/* ---- Bewegung -------------------------------------------------
   Gilt global statt nur fuer Toasts.
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Nur fuer Screenreader ------------------------------------ */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Lesetypografie für Textstrecken --------------------------
   Ratgeber, Glossar und Rechtsseiten werden gelesen, nicht
   ueberflogen. 60-75 Zeichen je Zeile, ruhiger Zeilenabstand.
   -------------------------------------------------------------- */
.seo-article, .rechtstext {
  max-width: 72ch;
}
.seo-article p, .rechtstext p,
.seo-article li, .rechtstext li {
  line-height: var(--leading-normal);
}
.seo-article h2, .rechtstext h2 {
  margin-block: var(--space-8) var(--space-3);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.seo-article h3, .rechtstext h3 {
  margin-block: var(--space-6) var(--space-2);
  font-size: var(--text-lg);
}
.seo-article table, .rechtstext table { width: 100%; border-collapse: collapse; margin-block: var(--space-4); }
.seo-article th, .seo-article td, .rechtstext th, .rechtstext td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--table-row-border);
  text-align: start;
  font-size: var(--text-sm);
}
.seo-article th, .rechtstext th { color: var(--text-muted); font-weight: 600; }
/* Wo Tabellen breiter werden als der Platz, scrollt der Container -
   nicht die Seite. */
.seo-article table, .rechtstext table { display: block; overflow-x: auto; }

/* ---- Typografie auf die Skala zurückführen --------------------
   Die Vorlage begrenzt die groesste Ueberschrift auf rund 3,5rem,
   verlangt Zeilenhoehe mindestens 1,05 und Laufweite hoechstens
   -0,02em. Vorher skalierte die Startseiten-Ueberschrift bis
   5,9rem bei Zeilenhoehe 0,92 - das ist Werbeoptik, keine
   Finanzanwendung. Das Login schrie mit bis zu 3,7rem.
   -------------------------------------------------------------- */
h1, .hero h1 {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -.02em;
}
h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -.01em; }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: 0; }
.auth-card h1 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
.lead { font-size: var(--text-lg); line-height: var(--leading-normal); }

/* ---- Formularfehler am Feld -----------------------------------
   Eine Meldung oben rechts als Toast sagt nicht, welches Feld
   gemeint ist.
   -------------------------------------------------------------- */
.feldfehler {
  display: block; margin-top: var(--space-1);
  font-size: var(--text-sm); color: var(--state-negative);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--state-negative);
}

/* ======= Aus app.css uebernommen: Grundlagen ======= */
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
main { min-height: calc(100vh - 68px); }
.eyebrow { margin: 0 0 var(--space-4); color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
h1, h2 { letter-spacing: -.06em; color: var(--text-primary); }
h1 { font-size: clamp(2.55rem, 6.4vw, 5.9rem); line-height: .92; margin: 0 0 var(--space-6); }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1; margin: 0 0 var(--space-2); }
.lead { max-width: 820px; color: var(--text-muted); font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height: 1.55; margin: 0; }
.muted { color: var(--text-muted); line-height: 1.6; }
label { display: grid; gap: var(--space-2); color: var(--text-secondary); font-weight: 750; font-size: .92rem; }
input { width: 100%; min-height: 48px; border-radius: 15px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary); padding: 0 var(--space-3); outline: none; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-2); }
th { color: var(--text-muted); font-size: .86rem; }
td { font-weight: 650; }
ul { padding-left: var(--space-4); color: var(--text-secondary); line-height: 1.8; }
select { width: 100%; min-height: 48px; border-radius: 15px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary); padding: 0 var(--space-3); outline: none; font: inherit; }
@media print {
  body { background: var(--surface-card); }
}
@media (max-width: 1024px) {
  table { min-width: 680px; font-size: .9rem; }
  th, td { padding: var(--space-3) var(--space-2); }
}
.lead, label, ul, .legal-card p { color: var(--text-secondary); }
.notice, .muted, .feature-card span, .card-head p, .mini-metric span, .assumption-grid span, .export-card span, td small { color: var(--text-muted); }
input, select, .check-label {
  background: var(--surface-card);
  border-color: rgba(148,163,184,.42);
  color: var(--text-primary);
}
th { color: var(--text-muted); }