/* Globale Maskengestaltung des VeltoCare Calculators.
   Werte kommen ausschliesslich aus tokens.css (eine Quelle, GESTALTUNG.md 4).
   Bewacht durch GestaltungsliteralTests — kein Literal hier eintragen. */

/* Grundgeruest */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--farbe-page);
  color: var(--farbe-ink);
  font-family: var(--schrift-standard), sans-serif;
  font-size: var(--grad-body);
  font-weight: var(--schnitt-body);
}

h1 { font-size: var(--grad-title); font-weight: var(--schnitt-title); margin: 0 0 var(--abstand-16) 0; }
h2 { font-size: var(--grad-section); font-weight: var(--schnitt-section); margin: var(--abstand-24) 0 var(--abstand-8) 0; }
h3 { font-size: var(--grad-body); font-weight: var(--schnitt-section); margin: var(--abstand-16) 0 var(--abstand-8) 0; }
a { color: var(--farbe-arbeit-stark); }
small { font-size: var(--grad-micro); color: var(--farbe-ink-muted); }

/* Fokus: sichtbar, nie unterdrueckt (GESTALTUNG.md 7) */
:focus-visible {
  outline: var(--fokusring-staerke) solid var(--farbe-accent);
  outline-offset: var(--abstand-2);
}

/* Karten: surface, Radius 10, Hairline + leiser Schatten, KEIN eigenes Polster */
.karte {
  background: var(--farbe-surface);
  border: var(--linie-hairline) solid var(--farbe-border);
  border-radius: var(--radius-karte);
  box-shadow: var(--erhoehung-schatten);
}

/* Kennzahlreihe: Kacheln nebeneinander, umbrechend (Kennzahl.razor) */
.kennzahlen { display: flex; flex-wrap: wrap; gap: var(--abstand-12); }

/* Tabellen: der Kern (GESTALTUNG.md 6) — Grad data, Zeilenhoehe 25, Zebra, Hover */
table {
  border-collapse: collapse;
  background: var(--farbe-surface);
  font-size: var(--grad-data);
}
th, td {
  padding: 0 var(--abstand-8);
  height: var(--zeilenhoehe-tabelle);
  border-bottom: var(--linie-hairline) solid var(--farbe-border);
  text-align: center; /* Text zentriert — K-241/K-243 */
}
th { font-weight: var(--schnitt-section); border-bottom-color: var(--farbe-border-strong); }
tbody tr:nth-child(even) { background: var(--farbe-surface-sunken); }
tbody tr:hover { background: var(--farbe-surface-hover); }
th.zahl, td.zahl { text-align: right; } /* Zahlen rechts, Kopf wie Spalte */
td.negativ { color: var(--farbe-state-bad); } /* immer MIT Minuszeichen im Inhalt */
tr.maske-zwischensumme td { border-top: var(--linie-hairline) solid var(--farbe-border-strong); font-weight: var(--schnitt-section); }
tr.maske-summe td { border-top-style: double; border-top-width: calc(var(--linie-hairline) * 3); border-top-color: var(--farbe-border-strong); font-weight: var(--schnitt-section); }
tr.maske-hervorhebung td { background: var(--farbe-surface-sunken); }
/* Grundpolster der Zelle bleibt auch bei Einrueckung 0 erhalten (Whole-Branch-Review, Befund 6) */
td.einrueckung { padding-left: calc(var(--abstand-8) + var(--einrueckung, 0) * var(--abstand-16)); text-align: left; }

/* Formulare: luftig (12-24), Hoehe 38, control-border (K-230/K-277) */
label { display: block; margin: var(--abstand-12) 0 var(--abstand-4) 0; }
input, select, textarea {
  font-family: var(--schrift-standard), sans-serif;
  font-size: var(--grad-body);
  color: var(--farbe-ink);
  background: var(--farbe-surface);
  border: var(--linie-hairline) solid var(--farbe-control-border);
  border-radius: var(--radius-bedienelement);
  height: var(--hoehe-bedienelement);
  padding: 0 var(--abstand-12);
  text-align: center; /* Rudis Bescheid: Inhalt der Eingabefelder mittig */
}
textarea { height: auto; padding: var(--abstand-8) var(--abstand-12); text-align: left; }
input.zahl { text-align: right; }
input[type="date"] { width: var(--breite-datumsfeld); } /* K-292: appweit gleich */
input[type="checkbox"], input[type="radio"] { height: auto; }
input:hover, select:hover, textarea:hover { border-color: var(--farbe-control-border-hover); }
input:disabled, input[readonly], select:disabled, textarea:disabled {
  background: var(--farbe-surface-sunken);
  color: var(--farbe-ink); /* Wert bleibt LESBAR — K-230 */
}

/* Schaltflaechen-Rangordnung (GESTALTUNG.md 4.1.1). Ohne Klasse = NEUTRAL. */
button {
  font-family: var(--schrift-standard), sans-serif;
  font-size: var(--grad-data);
  font-weight: var(--schnitt-schaltflaeche);
  height: var(--hoehe-bedienelement);
  padding: 0 var(--abstand-16);
  border-radius: var(--radius-bedienelement);
  border: var(--linie-hairline) solid var(--farbe-control-border);
  background: var(--farbe-surface);
  color: var(--farbe-ink);
  cursor: pointer;
}
button:hover { background: var(--farbe-surface-hover); border-color: var(--farbe-control-border-hover); }
button:disabled { cursor: default; } /* Beschriftung bleibt lesbar — kein Ausgrauen */
button.primaer { background: var(--farbe-arbeit); border-color: var(--farbe-arbeit); color: var(--farbe-ink-invers); }
button.primaer:hover { background: var(--farbe-arbeit-stark); border-color: var(--farbe-arbeit-stark); }
button.sekundaer { border-color: var(--farbe-arbeit-stark); color: var(--farbe-arbeit-stark); background: var(--farbe-surface); }
button.sekundaer:hover { background: var(--farbe-surface-hover); }
button.leise { border-color: transparent; background: transparent; color: var(--farbe-arbeit-stark); }
button.leise:hover { background: var(--farbe-surface-hover); }
button.warnung { border-color: var(--farbe-state-warn-stark); color: var(--farbe-state-warn-stark); background: var(--farbe-surface); }
button.warnung:hover { background: var(--farbe-state-warn-stark); color: var(--farbe-ink-invers); }
button.gefahr { border-color: var(--farbe-state-bad-stark); color: var(--farbe-state-bad-stark); background: var(--farbe-surface); }
button.gefahr:hover { background: var(--farbe-state-bad-stark); color: var(--farbe-ink-invers); }

/* Meldungen: Radius 6, umlaufender Rahmen, farbiger Balken + Text (nie Farbe allein) */
[role="alert"], [role="status"] {
  display: block;
  background: var(--farbe-surface);
  border: var(--linie-hairline) solid var(--farbe-border-strong);
  border-left: var(--abstand-4) solid var(--farbe-state-info);
  border-radius: var(--radius-meldung);
  padding: var(--abstand-12) var(--abstand-16);
  margin: var(--abstand-12) 0;
}
[role="alert"] { border-left-color: var(--farbe-state-bad); }

/* Schmale, ZENTRIERTE Spalte fuer anonyme Seiten: EINE Breite — die Karten
   fuellen sie, nichts ist schmaler (Re-Review Minor 1 der Layout-Etappe). */
.bereich-schmal > * { max-width: calc(var(--abstand-16) * 40); margin-left: auto; margin-right: auto; }
/* Kontoformulare im breiten Bereich: dieselbe Breite, links */
.bereich-schmal-inhalt { max-width: calc(var(--abstand-16) * 40); }
/* Lesebreite fuer Textseiten (Impressum, AGB, …) */
.lesebreite { max-width: var(--lesebreite); }
/* Zeilenaktionen in Tabellen: Knopfreihe statt Formularstapel.
   Fix-Welle A3: die Reihe ist ein <div class="knopfreihe"> IN der Zelle und
   nicht mehr die Zelle selbst. Ein td mit display:flex ist dem Browser keine
   Tabellenzelle mehr — die Zeile verliert ihre Spaltenflucht, und der
   Barrierefreiheitsbaum verliert die Zellrolle. */
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-8); align-items: flex-end; }
.knopfreihe form { display: contents; }

/* Formularflaechen in Karten */
fieldset {
  border: var(--linie-hairline) solid var(--farbe-border);
  border-radius: var(--radius-karte);
  background: var(--farbe-surface);
  box-shadow: var(--erhoehung-schatten);
  padding: var(--polster-formularbereich);
  margin: 0 0 var(--abstand-16) 0;
}

/* Fusszeile: Rechtslinks im Kleingrad */
footer nav { display: flex; flex-wrap: wrap; gap: var(--abstand-16); padding: var(--abstand-16) 0; }
footer nav a { font-size: var(--grad-micro); color: var(--farbe-ink-secondary); }