/* Neuklick, gemeinsame Grundlage fuer den Formularbaukasten und die oeffentlichen Formularseiten.
 *
 * EINE Datei fuer beide, weil beide dieselbe Marke tragen und sonst auseinanderlaufen: die eine
 * Seite steht auf einem Beamer im Termin, die andere auf dem Handy eines Gastes im Saal, und der
 * Unterschied darf im Aussehen nicht vorkommen.
 *
 * Schrift: Departure Mono fuer alles, was Auszeichnung ist (Titel, Abschnitte, Kennungen, Status),
 * Inter fuer alles, was gelesen wird. Departure Mono ist eine Pixelschrift; sie traegt Groesse und
 * Ruhe, aber keine Absaetze. Wer sie in einen Fliesstext setzt, macht die Seite unlesbar.
 *
 * Zustaende sind hier bewusst zentral: ruhend, ueberfahren, fokussiert, fehlerhaft, abgeschaltet.
 * Ein Eingabefeld, das im Fehlerfall anders aussieht als beim Ueberfahren, liest sich wie ein
 * Zufall statt wie eine Auskunft.
 */

@font-face {
  font-family: "Departure Mono";
  src: url("/assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Flaechen */
  --bg: #fafafa;
  --flaeche: #ffffff;
  --flaeche-2: #f4f4f4;
  --fg: #0a0a0a;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --border: #e2e2e2;
  --border-stark: #0a0a0a;

  /* Signal. Rot ist die Marke UND der Fehler. Genau deshalb traegt Rot NICHT den Fokus: wer in
     ein Feld tippt, hat nichts falsch gemacht, und ein rot umrandetes Feld, das nur gerade
     bearbeitet wird, macht die Farbe stumpf. Rot heisst hier: Fehler, Pflicht, Loeschen. Der
     Fokus ist dunkel. */
  --rot: #e40014;
  --rot-weich: #fdf2f3;
  --rot-linie: #f3c9cd;
  --gruen: #0a7d34;
  --gruen-weich: #f1f9f3;
  --gruen-linie: #bfe3ca;

  --radius: 10px;
  --radius-klein: 8px;
  --radius-pille: 999px;

  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --anzeige: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Die Bildhoehe des Wortzeichens. Es traegt oben und unten Luft, das sichtbare Wort ist also
     kleiner als sein Kasten - deshalb steht hier eine groessere Zahl, als die Schriftgroesse
     danebenlegen wuerde. Eine Zahl fuer alle drei Oberflaechen: Baukasten, Formularseite,
     Anmeldung. */
  --logo-hoehe: 26px;

  --schnell: 120ms;
  --ruhig: 220ms;
  --kurve: cubic-bezier(.2, .6, .2, 1);

  --schatten: 0 1px 2px rgba(10, 10, 10, .04);
  --schatten-hoch: 0 8px 28px rgba(10, 10, 10, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Auszeichnung -------------------------------------------------------------------------- */

.anzeige { font-family: var(--anzeige); font-weight: 400; letter-spacing: .01em; }

h1, h2, h3 { font-family: var(--anzeige); font-weight: 400; margin: 0; letter-spacing: .01em; }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 15px; line-height: 1.35; }

/* Abschnittsmarke. Klein, gesperrt, gross geschrieben - in einer Pixelschrift ist das die einzige
   Groesse, in der Versalien nicht schreien. */
.marke {
  font-family: var(--anzeige);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono { font-family: var(--mono); font-size: .92em; }
.gedaempft { color: var(--muted); }
.klein { font-size: 13px; }

a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--border); }
a:hover { text-decoration-color: var(--rot); }

/* --- Icons --------------------------------------------------------------------------------- */
/* Strichzeichnungen, 20px, currentColor. Ein Icon ersetzt hier nie ein Wort, es fuehrt das Auge
   zum Wort. Deshalb stehen sie fast immer neben Text und nicht allein. */

.icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-klein { width: 15px; height: 15px; }

/* --- Flaechen ------------------------------------------------------------------------------ */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.karte-innen { padding: 20px; }

.pille {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--anzeige);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pille);
  border: 1px solid var(--border); color: var(--muted); background: var(--flaeche);
  white-space: nowrap;
}
.pille-punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pille.gruen { color: var(--gruen); border-color: var(--gruen-linie); background: var(--gruen-weich); }
.pille.rot { color: var(--rot); border-color: var(--rot-linie); background: var(--rot-weich); }

/* --- Eingaben ------------------------------------------------------------------------------ */

.feld { display: grid; gap: 6px; }
.feld > label, .feld-marke {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.feld .hilfe { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
.pflichtstern { color: var(--rot); }

/* Alles ausser Haekchen und Radios. NICHT input[type="text"] aufzaehlen: ein <input> ohne
   type-Attribut verhaelt sich wie type="text", wird von so einem Selektor aber nicht getroffen -
   und steht dann als einziges Feld in einer Reihe kleiner da als seine Nachbarn. Genau das war
   die Fehlausrichtung, die auf dem ersten Bildschirmfoto zu sehen war.

   :where() um die Kette, und das ist kein Schoenheitsputz. Vier :not() wiegen 0-4-1; der
   Fehlerzustand unten wiegt 0-2-1 und hat deshalb NIE gewonnen. Ein Feld mit aria-invalid war
   also fuer Vorleseprogramme fehlerhaft und fuer alle anderen unauffaellig - hier oben wie auf
   jeder oeffentlichen Formularseite. :where() zaehlt null, damit gewinnt der Zustand ueber die
   Grundform, so wie es gemeint war. Wer die Kette wieder ohne :where() schreibt, macht den
   Fehlerzustand still unsichtbar. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"])),
select, textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  color: var(--fg);
  background: var(--flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve),
              background-color var(--schnell) var(--kurve);
  appearance: none;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

/* Ueberfahren, fokussiert, fehlerhaft: dieselbe Sprache, drei Staerken. Der Fehler bekommt
   zusaetzlich eine Flaeche, damit er auch ohne Farbsehen als anders erkennbar bleibt. */
input:where(:not([type="checkbox"]):not([type="radio"])):hover:not(:disabled),
select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--muted-2);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--flaeche-2); color: var(--muted-2); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }

/* Der Fehlerzustand haengt am Container, nicht am Feld allein: so faerbt er auch die Beschriftung
   und die Meldung mit, und eine Gruppe aus Radios kann ihn genauso tragen. */
.feld.fehler > label, .feld.fehler .feld-marke { color: var(--rot); }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--rot);
  background: var(--rot-weich);
}
.feld.fehler input:hover, .feld.fehler select:hover, .feld.fehler textarea:hover { border-color: var(--rot); }
/* Ein fehlerhaftes Feld bleibt rot, auch waehrend es bearbeitet wird - dort ist Rot eine Aussage
   und keine Begleitfarbe. */
.feld.fehler input:focus-visible, .feld.fehler select:focus-visible, .feld.fehler textarea:focus-visible,
input[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--rot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 16%, transparent);
}
.meldung-fehler {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--rot);
}

/* Haekchen und Radios */
.wahl {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color var(--schnell) var(--kurve), background-color var(--schnell) var(--kurve);
}
.wahl:hover { border-color: var(--muted-2); }
.wahl:has(input:checked) { border-color: var(--fg); background: var(--flaeche); }
.wahl:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); border-color: var(--fg); }
.feld.fehler .wahl:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 16%, transparent); border-color: var(--rot); }
.wahl input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--rot); }
.feld.fehler .wahl { border-color: var(--rot); background: var(--rot-weich); }

/* --- Knoepfe ------------------------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 14px;
  color: var(--fg);
  background: var(--flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--schnell) var(--kurve), background-color var(--schnell) var(--kurve),
              color var(--schnell) var(--kurve), transform var(--schnell) var(--kurve);
}
.knopf:hover { border-color: var(--fg); background: var(--flaeche); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 16%, transparent); border-color: var(--fg); }
.knopf.warn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 20%, transparent); border-color: var(--rot); }

.knopf.stark { background: var(--fg); color: #fff; border-color: var(--fg); }
.knopf.stark:hover { background: #262626; border-color: #262626; }

.knopf.warn { color: var(--rot); border-color: var(--rot-linie); }
.knopf.warn:hover { background: var(--rot-weich); border-color: var(--rot); }

.knopf.stumm { border-color: transparent; background: transparent; color: var(--muted); padding: 8px 10px; }
.knopf.stumm:hover { color: var(--fg); background: var(--flaeche-2); border-color: transparent; }

.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}
.knopf[disabled]:hover { border-color: var(--border); background: var(--flaeche); }
.knopf.stark[disabled]:hover { background: var(--fg); }

.knopf-gross { font-size: 15px; padding: 12px 18px; }
.knopf-icon { padding: 8px; }

/* --- Hinweise ------------------------------------------------------------------------------ */

.hinweis {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-size: 13.5px;
}
.hinweis.gut { border-color: var(--gruen-linie); background: var(--gruen-weich); color: var(--gruen); }
.hinweis.schlecht { border-color: var(--rot-linie); background: var(--rot-weich); color: var(--rot); }
.hinweis .icon { margin-top: 1px; }

/* --- Kleinteile ---------------------------------------------------------------------------- */

.zeile { display: flex; align-items: center; gap: 10px; }
.zeile-umbruch { flex-wrap: wrap; }
.abstand { flex: 1 1 auto; }
.trenner { border: 0; border-top: 1px solid var(--border); margin: 0; }
[hidden] { display: none !important; }

.leer { color: var(--muted); font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 0 10px 9px 0;
  font-family: var(--anzeige); font-weight: 400; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
td { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); vertical-align: middle; }
tr:hover td { background: color-mix(in srgb, var(--flaeche-2) 60%, transparent); }

.scroll { overflow-x: auto; }

/* Der Ladebalken oben. Zeigt, dass etwas laeuft, ohne die Seite zu verschieben. */
.laden {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50;
  background: linear-gradient(90deg, transparent, var(--rot), transparent);
  background-size: 40% 100%;
  animation: laden 1s linear infinite;
}
@keyframes laden { from { background-position: -40% 0; } to { background-position: 140% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}