/* ui-basis — Fundament für unsere Oberflächen.
 *
 * Regel: Hier stehen WERTE und GRUNDELEMENTE, keine Komponenten eines
 * bestimmten Projekts. Wenn etwas nur in einem Projekt vorkommt, gehört es in
 * dessen eigenes CSS — sonst wächst hier eine Bibliothek heran, die niemand
 * mehr ändern kann, ohne fünf Oberflächen zu prüfen.
 *
 * Alles ist über Variablen steuerbar. Ein Projekt setzt seine Marke und ist
 * fertig; wer mehr braucht, überschreibt einzelne Regeln danach.
 */

/* ══ Werte ═════════════════════════════════════════════════════════════
   Eine Leiter statt geratener Zahlen. 1.5er-Schritte, weil sie sich
   halbieren und verdoppeln lassen — .5/.75/1 fluchten in jeder
   Kombination, .35/.45/.7 nie. */
:root {
  --ui-r1: 0.25rem;  --ui-r2: 0.5rem;   --ui-r3: 0.75rem;
  --ui-r4: 1rem;     --ui-r5: 1.5rem;   --ui-r6: 2rem;
  --ui-r7: 3rem;     --ui-r8: 4rem;

  /* Schriftgrößen nach 1.2 (Minor Third): groß genug für Unterschiede,
     klein genug, dass acht Stufen auf einen Bildschirm passen. */
  --ui-t-mini:   0.78rem;
  --ui-t-klein:  0.88rem;
  --ui-t-basis:  1rem;
  --ui-t-gross:  1.2rem;
  --ui-t-titel:  1.44rem;
  --ui-t-haupt:  1.9rem;
  --ui-t-riese:  2.4rem;

  --ui-rund:       0.5rem;
  --ui-rund-klein: 0.3rem;
  --ui-rund-voll:  999px;

  /* Zwei Schatten reichen: einer für „liegt auf der Fläche", einer für
     „schwebt darüber". Mehr Abstufungen erkennt im Betrieb niemand. */
  --ui-schatten:      0 1px 2px rgba(0, 0, 0, 0.18);
  --ui-schatten-hoch: 0 6px 20px rgba(0, 0, 0, 0.28);

  --ui-zeile: 1.55;
  --ui-zeile-eng: 1.3;

  /* Fließtext bricht ab 72 Zeichen — darüber verliert das Auge beim
     Zeilenwechsel die Zeile. Gilt für Text, nicht für Tabellen. */
  --ui-lesebreite: 72ch;
  --ui-seitenbreite: 1100px;

  /* Marke — jedes Projekt überschreibt diese acht Werte, sonst nichts. */
  --ui-flaeche:   #ffffff;
  --ui-flaeche-2: #f4f7f9;
  --ui-karte:     #ffffff;
  --ui-linie:     #e3e9ee;
  --ui-tinte:     #16232e;
  --ui-tinte-leise: #5c6b78;
  --ui-akzent:    #087e8b;
  --ui-akzent-tinte: #ffffff;

  /* Statusfarben. Absichtlich nicht pro Projekt: „Fehler" muss überall
     gleich aussehen, sonst lernt niemand die Bedeutung. */
  --ui-gut:     #1f7a4d;
  --ui-warnung: #b4690e;
  --ui-fehler:  #b3261e;
  --ui-gut-flaeche:     rgba(31, 122, 77, 0.10);
  --ui-warnung-flaeche: rgba(180, 105, 14, 0.12);
  --ui-fehler-flaeche:  rgba(179, 38, 30, 0.10);
}

/* ══ Grundlagen ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ui-flaeche);
  color: var(--ui-tinte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--ui-t-basis);
  line-height: var(--ui-zeile);
  -webkit-text-size-adjust: 100%;
}

main { max-width: var(--ui-seitenbreite); margin: 0 auto; padding: var(--ui-r4); }

h1, h2, h3, h4 { line-height: var(--ui-zeile-eng); margin: 0 0 var(--ui-r3); font-weight: 700; }
h1 { font-size: var(--ui-t-haupt); margin-top: var(--ui-r5); }
h2 { font-size: var(--ui-t-titel); margin-top: var(--ui-r6); }
h3 { font-size: var(--ui-t-gross); margin-top: var(--ui-r5); }
p, ul, ol { margin: 0 0 var(--ui-r4); }
p, li { max-width: var(--ui-lesebreite); }

a { color: var(--ui-akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

small, .ui-klein { font-size: var(--ui-t-klein); }
.ui-leise { color: var(--ui-tinte-leise); }

hr { border: 0; border-top: 1px solid var(--ui-linie); margin: var(--ui-r6) 0; }

code, kbd, samp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--ui-flaeche-2);
  padding: 0.1em 0.35em;
  border-radius: var(--ui-rund-klein);
}
pre { background: var(--ui-flaeche-2); padding: var(--ui-r4); border-radius: var(--ui-rund); overflow-x: auto; }
pre code { background: none; padding: 0; }

/* ══ Formulare ═════════════════════════════════════════════════════════
   Der häufigste Ort, an dem Oberflächen unfertig wirken. Drei Regeln, die
   das meiste erledigen:
   1. Ein Feld muss als Feld erkennbar sein — sichtbarer Rahmen, auch auf
      hellem Grund. Ein fast weißer Rahmen auf hellgrau ist kein Rahmen.
   2. Das Label gehört zum Feld, nicht darüber in den Raum: kleiner Abstand
      zum eigenen Feld, großer zum nächsten Paar.
   3. Der Fokus muss man sehen, ohne ihn zu suchen. */
label { display: block; margin-bottom: var(--ui-r1); font-size: var(--ui-t-klein); font-weight: 600; }

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--ui-r2) var(--ui-r3);
  background: var(--ui-karte);
  border: 1px solid var(--ui-linie);
  border-radius: var(--ui-rund-klein);
  /* Ein zweiter, kräftigerer Rand innen: So bleibt das Feld auch dann
     sichtbar, wenn Karte und Feld dieselbe Farbe haben. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: border-color 0.12s, box-shadow 0.12s;
  /* 16px verhindert, dass iOS beim Fokus hineinzoomt. */
  font-size: max(1rem, var(--ui-t-basis));
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ui-akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-akzent) 25%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--ui-tinte-leise); opacity: 0.75; }
textarea { min-height: 8rem; resize: vertical; }

/* Feldgruppe: das Paar aus Label und Feld. Der Abstand NACH der Gruppe ist
   größer als der darin — sonst schwimmen Label und Feld gleich weit
   auseinander, und man sieht nicht, was zusammengehört. */
.ui-feld { margin-bottom: var(--ui-r4); }
.ui-feld:last-child { margin-bottom: 0; }
.ui-hinweis { margin: var(--ui-r1) 0 0; font-size: var(--ui-t-mini); color: var(--ui-tinte-leise); }
.ui-pflicht { color: var(--ui-fehler); }

/* Zwei Felder nebeneinander, auf dem Telefon untereinander. */
.ui-feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-r4); }
@media (max-width: 40rem) { .ui-feldreihe { grid-template-columns: 1fr; gap: 0; } }

button, .ui-knopf, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-r2);
  /* 2.75rem ≈ 44px: die kleinste Fläche, die sich am Telefon zuverlässig
     treffen lässt. */
  min-height: 2.75rem;
  padding: var(--ui-r2) var(--ui-r5);
  background: var(--ui-akzent);
  color: var(--ui-akzent-tinte);
  border: 1px solid transparent;
  border-radius: var(--ui-rund-klein);
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.12s, transform 0.06s;
}
button:hover, .ui-knopf:hover { filter: brightness(1.08); text-decoration: none; }
button:active, .ui-knopf:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.ui-knopf--zweit, button.zweit {
  background: transparent;
  color: var(--ui-akzent);
  border-color: var(--ui-linie);
}
.ui-knopf--klein, button.klein { min-height: 2rem; padding: var(--ui-r1) var(--ui-r3); font-size: var(--ui-t-klein); }

/* Absende-Zeile: Knopf und Vertrauenssignal gehören zusammen in eine
   Sichtachse. Ein Datenschutzhinweis am Seitenende erreicht niemanden. */
.ui-absenden { display: flex; align-items: center; gap: var(--ui-r4); flex-wrap: wrap; margin-top: var(--ui-r5); }
.ui-absenden .ui-hinweis { margin: 0; max-width: 34ch; }

/* ══ Flächen ═══════════════════════════════════════════════════════════ */
.ui-karte {
  background: var(--ui-karte);
  border: 1px solid var(--ui-linie);
  border-radius: var(--ui-rund);
  padding: var(--ui-r4);
}
/* Karten schließen bündig mit ihrem Inhalt ab: Ein Kasten, der 150 px
   weiterläuft als das, was drinsteht, sieht nach Fehler aus. */
.ui-karte > :last-child { margin-bottom: 0; }

.ui-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--ui-r3); }

.ui-chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  background: var(--ui-flaeche-2);
  color: var(--ui-tinte-leise);
  border-radius: var(--ui-rund-voll);
  font-size: var(--ui-t-mini);
  white-space: nowrap;
}
.ui-chip--gut     { background: var(--ui-gut-flaeche);     color: var(--ui-gut); }
.ui-chip--warnung { background: var(--ui-warnung-flaeche); color: var(--ui-warnung); }
.ui-chip--fehler  { background: var(--ui-fehler-flaeche);  color: var(--ui-fehler); }

.ui-meldung { padding: var(--ui-r3) var(--ui-r4); border-radius: var(--ui-rund-klein); border-left: 3px solid; }
.ui-meldung--gut     { background: var(--ui-gut-flaeche);     border-color: var(--ui-gut); }
.ui-meldung--warnung { background: var(--ui-warnung-flaeche); border-color: var(--ui-warnung); }
.ui-meldung--fehler  { background: var(--ui-fehler-flaeche);  border-color: var(--ui-fehler); }

/* ══ Tabellen ══════════════════════════════════════════════════════════
   Nur waagerechte Linien: senkrechte machen eine Tabelle voll, ohne die
   Lesbarkeit zu erhöhen. Auf schmalen Geräten scrollt sie in sich selbst,
   statt die Seite breiter zu machen. */
.ui-tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--ui-r2) var(--ui-r3); text-align: left; border-bottom: 1px solid var(--ui-linie); }
th { font-size: var(--ui-t-klein); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-tinte-leise); }
tbody tr:hover { background: var(--ui-flaeche-2); }
td.ui-zahl, th.ui-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ══ Zugänglichkeit ════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}