/*
 * IDA public-forms -- DAS eine Stylesheet der oeffentlichen Formularseiten
 * (Stufe 1: ein Look fuer alle Tenants; Theme pro Tenant ist Stufe 2).
 *
 * Farb-Herkunft -- zwei legitime IDA-Welten, bewusst kombiniert:
 *   - Navy #0B1220 + Cyan #00D4FF: IDA-PITCH-Palette (Decks/PDF/Handouts);
 *     sie kommen deshalb sonst nirgends im Repo vor. Cyan ist auf Weiss
 *     unbrauchbar (Kontrast ~1,8:1) und steht darum AUSSCHLIESSLICH
 *     dekorativ (Kartenoberkante, traegt keine Information) -- NIE als
 *     Text-, Ring- oder Kennungs-Farbe. (Der Review fand: ein Fokusring
 *     faellt wegen outline-offset IMMER auf den hellen Grund NEBEN dem
 *     Element -- Cyan ist dafuer grundsaetzlich ungeeignet.)
 *   - PRODUKT-Palette (Reskin): Links in IDA-Blau #0076BD sowie alle
 *     Neutral- und Fehlertoene stammen aus apps/admin/src/admin-lib/theme.ts
 *     (vgl. docs/ARCHITECTURE_RESKIN_IDA.md). Keine Farbe ist neu erfunden.
 *
 * Auflagen (Stufe 1):
 *   - KEINE externe Referenz: keine Webfonts, keine Bilder, keine Imports
 *     (Beweis-Grep verlangt 0 Treffer fuer URL-/Import-Muster in dieser
 *     Datei) -- die CSP (default-src 'none') blockte sie ohnehin.
 *     Systemschriften.
 *   - KEINE Bewegung (der Beweis-Grep verlangt 0 Treffer fuer Bewegungs-
 *     Eigenschaften in dieser Datei): prefers-reduced-motion ist damit per
 *     Konstruktion erfuellt.
 *   - Selektoren element-/strukturbasiert (der Renderer erzeugt keine
 *     Klassen); einzige Ausnahme ist .provider, die Anbieter-/Datenschutz-
 *     Zeile -- Compliance-Element, gedaempft aber klar lesbar.
 *   - Fehlermeldungen bleiben tragender Text (<p><strong>...); CSS legt nur
 *     Farbe und Gewicht dazu, nie Farbe allein.
 *   - Signaturblock (form > fieldset) sachlich abgesetzt; KEINE Siegel-/
 *     Badge-Optik (Sprachregel docs/signatur-ees.md gilt auch visuell).
 */

:root {
  --navy: #0b1220;   /* Pitch: Basiston, dunkle Flaechen + Ueberschriften */
  --cyan: #00d4ff;   /* Pitch: Akzent, AUSSCHLIESSLICH dekorativ (Kante) */
  --link: #0076bd;   /* Produkt: IDA-Blau, auf Weiss 4,9:1 (AA) */
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #27303f;   /* auf Weiss 13,3:1 */
  --muted: #5b6170;  /* auf Weiss 6,2:1, auf --bg 5,9:1 (AA); dient auch als
                        Feld-/Kasten-Rahmen (WCAG 1.4.11 verlangt >= 3:1 fuer
                        UI-Kennungen -- die hellen Greys liegen darunter) */
  --error: #922d1a;  /* auf Weiss 8,0:1, auf --bg 7,7:1 (AA) */
}

* {
  box-sizing: border-box;
}

/* Mobil zuerst: schmale Viewports sind der Normalfall (Mandanten am Handy). */
body {
  margin: 0;
  padding: 0.75rem 0.625rem 2.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Dekorative IDA-Akzentkante (keine Information, kein Kontrast-Thema). */
  border-top: 4px solid var(--cyan);
  border-radius: 8px;
}

h1 {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1.3;
}

p {
  margin: 0 0 0.875rem;
}

a {
  color: var(--link);
  text-decoration: underline;
}

/* Anbieter-/Datenschutz-Zeile: gedaempft, aber klar lesbar (Compliance-
 * Element -- sagt, WER die Daten erhebt; Position VOR den Feldern bleibt). */
.provider {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Feld-Rhythmus: jedes Feld steckt in einem <div> (auch im Signaturblock). */
div {
  margin: 0 0 1.125rem;
}

label {
  display: block;
  font-weight: 600;
}

/* In Fieldsets (Options-Gruppen + Signaturblock) tragen die Labels laengere
 * Saetze bzw. Optionen: normales Gewicht. Options-Zeilen (direkte Kinder,
 * '<label>...</label><br>') bleiben inline -- block + <br> gaebe Doppel-
 * Umbrueche; die grosse line-height haelt die Touch-Ziele. */
fieldset label {
  font-weight: 400;
}

fieldset > label {
  display: inline;
  line-height: 2.2;
}

/* Eingaben: volle Breite, >= 16px Schrift (iOS zoomt sonst beim Fokus),
 * Touch-Hoehe >= 44px. */
input:not([type="checkbox"]),
textarea,
select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  /* Feldgrenze = UI-Kennung: --muted statt der hellen Greys, weil WCAG
   * 1.4.11 hier >= 3:1 verlangt (#cbd5e1 waere 1,5:1 -- Review-Befund). */
  border: 1px solid var(--muted);
  border-radius: 6px;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

/* iOS zentriert den Wert von date-Inputs -- links ausrichten wie alle
 * anderen Felder (reine Kosmetik, kein Markup-Delta). */
input[type="date"] {
  text-align: left;
}

input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.375rem 0 0;
  vertical-align: -0.25em;
  accent-color: var(--navy);
}

/* Sichtbarer Fokus, niemals outline:none. EIN Navy-Ring fuer alles: durch
 * outline-offset liegt jeder Ring auf dem hellen Grund neben dem Element
 * (auch neben dem Navy-Button) -- dort misst Navy 18,7:1 / 17,9:1. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Feld-Hinweise (<br><small>) gedaempft, aber AA-lesbar. */
small {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Fehlermeldungen (<p><strong> im Feld-<div>, Summary/unknown_field in
 * <main>): der Text traegt, die Farbe unterstreicht nur. */
main strong {
  color: var(--error);
}

/* Pflichtfeld-Legende ('* Pflichtfeld'); der :not haelt den Button-Absatz
 * heraus. Ohne :has()-Support faellt die Zeile auf normalen Text zurueck. */
form > p:not(:has(button)) {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Options-Gruppen (multiselect): der helle Rahmen ist REIN DEKORATIV --
 * die Gruppierung traegt textlich die <legend> (deshalb ist 1.4.11 hier
 * nicht beruehrt); kein Kasten-Wettbewerb mit dem Signaturblock. */
div > fieldset {
  margin: 0.25rem 0 0;
  padding: 0.75rem 0.875rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

fieldset legend {
  padding: 0 0.375rem;
  font-weight: 600;
}

/* Signaturblock: direktes Kind des <form> (Options-Gruppen stecken in
 * <div>s -- der Selektor trennt sauber). Sachlich abgesetzter Kasten,
 * Rahmen in --muted (sichtbare Kennung, 1.4.11). */
form > fieldset {
  margin: 1.5rem 0 1rem;
  padding: 1rem 1rem 0.25rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--bg);
}

/* Legende bewusst OHNE Rahmen/Flaeche: ein umrandeter "Signatur"-Chip
 * laese sich als Badge/Siegel -- genau die Optik, die die Sprachregel
 * (docs/signatur-ees.md) auch visuell ausschliesst (Review-Befund). */
form > fieldset legend {
  color: var(--navy);
  padding: 0 0.375rem;
}

/* Absenden: mobil volle Breite, satte Touch-Hoehe; Navy-Flaeche mit
 * weisser Schrift (18,7:1), Hover/Aktiv im Bestand-Teal #1f3a4d (11,9:1).
 * Fokus: der globale Navy-Ring oben -- KEIN Cyan-Override (der Ring liegt
 * per offset auf dem hellen Grund, Cyan misst dort nur 1,8:1). */
button[type="submit"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--navy);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button[type="submit"]:hover,
button[type="submit"]:active {
  background: #1f3a4d;
}

/* Ab Tablet/Desktop: mehr Luft, Button in natuerlicher Breite. */
@media (min-width: 40rem) {
  body {
    padding: 2.5rem 1.5rem 3.5rem;
  }

  main {
    padding: 2rem 2.5rem 2.5rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  button[type="submit"] {
    width: auto;
    min-width: 12rem;
  }
}