/*
 * Anmeldung Kinder Kleiderbörse — Stylesheet
 *
 * Keine externen Ressourcen: kein Web-Font, kein CDN, alles lokal.
 * Keine Animationen, kein JavaScript für die Optik.
 *
 * Farbkonzept: Die Formensprache und Farbpalette sind aus dem Plakat
 * (app/static/img/plakat.jpg) abgeleitet — Violett, Blau, Grün, Orange in
 * den vier Termin-/Info-Kacheln des Plakats. Jede Farbe kommt in zwei
 * Abstufungen vor:
 *   - die "-dunkel"-Variante trägt Text (weiße Schrift auf Farbfläche,
 *     farbige Schrift auf hellem Grund) und ist auf ≥ 4,5:1 Kontrast
 *     nachgerechnet (siehe Kommentare an den jeweiligen Regeln).
 *   - die undunkle Variante ist ausschließlich für rein dekorative Flächen
 *     ohne Text (Wimpelkette im Kopfbereich) reserviert, dort gilt keine
 *     Kontrastanforderung.
 * Die 16 Regelpunkte selbst bleiben bewusst einfarbig/ruhig (nur --text),
 * Farbe steckt in Überschriften, Kacheln und Rahmen — nicht im Regeltext.
 *
 * Diese Datei stützt sich bewusst auf semantische HTML-Elemente (header,
 * main, footer, form, fieldset, legend, label, button, figure) sowie auf
 * die im Plan verbindlich vorgeschriebenen Attribute/Klassen (role="alert",
 * aria-invalid, .feld-fehler), damit sie unabhängig von den genauen
 * Template-Details funktioniert. fieldset/legend bleiben absichtlich ohne
 * eigene Klassen/Attribute (Tests prüfen die exakten, bloßen Tags
 * "<fieldset>" / "<legend>") — jede Gestaltung darauf läuft über
 * Element-Selektoren und :nth-of-type.
 */

/* ---------- Tokens ---------- */

:root {
  /* Plakatfarben, dekorativ (nur für die Wimpelkette gedacht) */
  --violett: #7e3a87;
  --blau: #0283c5;
  --gruen: #078e41;
  --orange: #dd6212;

  /* Plakatfarben, textsicher (weiße Schrift auf Farbfläche ≥ 4,5:1,
     nachgerechnet: Violett 7,39:1 / Blau 5,02:1 / Grün 5,12:1 /
     Orange 4,82:1 gegen #FFFFFF) */
  --violett-dunkel: #7e3a87;
  --blau-dunkel: #0175b1;
  --gruen-dunkel: #067f3a;
  --orange-dunkel: #bb530f;

  --rot-dunkel: #c43a16;

  --grund: #fbf4e9;
  --text: #1f2328;
  --text-dezent: #52585f;

  /* einzige Akzentfarbe für Bedienelemente (Knopf, Fokusring, Checkbox) */
  --akzent: var(--gruen-dunkel);
  --akzent-flaeche: rgba(6, 127, 58, 0.08);
  --akzent-rand: rgba(6, 127, 58, 0.35);

  --oberflaeche: #ffffff;
  --rand: rgba(31, 35, 40, 0.12);
  --schatten: 0 2px 10px rgba(31, 35, 40, 0.08);
  --radius: 1.1rem;
  --radius-klein: 0.75rem;

  --inhalt-breite: 38rem;
}

/* ---------- Basis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  line-height: 1.2;
  color: var(--text);
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* Kleine, rein dekorative Farbleiste unter jeder Seitenüberschrift —
   nimmt die Formensprache des Plakats auf, ohne den Text zu berühren. */
h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 5px;
  margin-top: 0.65rem;
  border-radius: 999px;
  background: var(--violett-dunkel);
}

@media (min-width: 640px) {
  h1 {
    font-size: 2rem;
  }
}

h2 {
  font-size: 1.3rem;
}

p, ul, ol {
  max-width: 65ch;
}

a {
  color: var(--blau-dunkel);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--rot-dunkel);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ---------- Layout ---------- */

main,
footer {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  main,
  footer {
    padding-inline: 1.5rem;
  }
}

/* Kopfbereich: Wimpelkette statt schmalem Farbstreifen. Reine CSS-Grafik
   (eingebettetes SVG als data-URI, keine externe Datei, keine Netzwerk-
   anfrage) — zeichnet eine Schnur mit vier Wimpeln in den Plakatfarben,
   die per background-repeat nahtlos über die volle Breite kachelt, ohne
   bei irgendeiner Fensterbreite zu verzerren oder Scrollbalken zu
   erzeugen. Trägt bewusst keinen Titel — die h1 jeder Seite trägt den
   Seitentitel allein. Die Hex-Werte im data-URI müssen von Hand mit den
   obigen --violett/--blau/--gruen/--orange-Variablen synchron gehalten
   werden (ein data-URI ist ein eigener Dokumentkontext, var() wirkt dort
   nicht). */
header.wimpelkette {
  height: 3.4rem;
  background-color: var(--grund);
  background-repeat: repeat-x;
  background-position: top center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='54' viewBox='0 0 160 54'%3E%3Cline x1='0' y1='5' x2='160' y2='5' stroke='%233a3a3a' stroke-width='2'/%3E%3Ccircle cx='3' cy='5' r='2.5' fill='%233a3a3a'/%3E%3Cpolygon points='6,5 34,5 20,40' fill='%237e3a87'/%3E%3Cpolygon points='46,5 74,5 60,40' fill='%230283c5'/%3E%3Cpolygon points='86,5 114,5 100,40' fill='%23078e41'/%3E%3Cpolygon points='126,5 154,5 140,40' fill='%23dd6212'/%3E%3C/svg%3E");
}

main {
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  min-height: 50vh;
}

footer {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
  border-top: 3px solid var(--akzent-rand);
  font-size: 0.9rem;
  color: var(--text-dezent);
}

footer a {
  margin-right: 1rem;
  color: var(--blau-dunkel);
}

/* Skip-Link: erstes fokussierbares Element, unsichtbar bis fokussiert */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--akzent);
  color: #fff;
  padding: 0.85em 1.25em;
  border-radius: 0 0 0.5rem 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Sichtbarer Fokus auf allen bedienbaren Elementen ---------- */

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* ---------- Karten ---------- */

.karte,
main > section {
  background: var(--oberflaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* rechtliches.html: jede section bekommt reihum eine farbige Überschrift
   aus der Plakatpalette — reine CSS-Positionsauswahl, kein Wort geändert. */
main > section h2 {
  display: inline-block;
}

main > section:nth-of-type(4n+1) h2 { color: var(--violett-dunkel); }
main > section:nth-of-type(4n+2) h2 { color: var(--blau-dunkel); }
main > section:nth-of-type(4n+3) h2 { color: var(--gruen-dunkel); }
main > section:nth-of-type(4n+4) h2 { color: var(--orange-dunkel); }

/* ---------- Begrüßung (Startseite) ---------- */

.willkommen {
  margin: 0 0 1.5rem;
}

.willkommen-lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 0.35rem;
}

.willkommen-gemeinde {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dezent);
  margin: 0;
}

/* ---------- Termin-Kacheln (Startseite) ----------
   Drei farbige Info-Kacheln wie im Plakat: Datum (Violett), Uhrzeit
   (Blau), Hinweis für Schwangere (Grün) — auf dem Handy untereinander,
   ab 640px nebeneinander in drei gleich breiten/hohen Spalten (Grid,
   1fr je Spalte, align-items: stretch). Einheitliche Schriftgröße/-stärke
   und Zentrierung (Text + Inhalt) in allen drei Kacheln, damit der
   Umbruch ruhig wirkt statt zerrissen. Datum- und Hinweis-Kachel zeigen
   Text unverändert aus texts.WILLKOMMEN; die Uhrzeit-Kachel nutzt die
   eigene Konstante texts.TERMIN_KACHEL_UHRZEIT („Einlass von …“, Auftrag). */

.termin-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

@media (min-width: 640px) {
  .termin-block {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.termin-kern,
.termin-uhrzeit,
.termin-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  min-height: 44px;
  border-radius: var(--radius-klein);
  padding: 0.9rem 1.05rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Kontrast weiße Schrift auf Farbfläche, nachgerechnet gegen #FFFFFF:
   Violett 7,39:1 · Blau 5,02:1 · Grün 5,12:1 (alle ≥ 4,5:1) */
.termin-kern {
  background: var(--violett-dunkel);
}

.termin-uhrzeit {
  background: var(--blau-dunkel);
}

.termin-hinweis {
  background: var(--gruen-dunkel);
}

/* ---------- Zustandsbanner (VOR_START / ZU_ENDE / VOLL / geschlossen) ----------
   Farbig abgesetzter Rand statt reinem Fließtext, damit die Seite bei
   geschlossener Anmeldung dieselbe Handschrift trägt wie der Rest. */

.zustand-banner {
  background: var(--oberflaeche);
  border: 1px solid var(--rand);
  border-left: 6px solid var(--orange-dunkel);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

/* ---------- Plakat ----------
   Begrenzt auf eine angenehme Anzeigebreite (Desktop), volle
   Spaltenbreite auf dem Handy, Seitenverhältnis bleibt über width/height-
   Attribute im Markup erhalten. */

figure {
  margin: 0 0 1.5rem;
  text-align: center;
}

figure img {
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-dezent);
}

/* ---------- Handlungsaufruf (Startseite) ----------
   Volle Breite, großzügige Fläche, damit er nicht erst nach langem
   Scrollen erreichbar ist. Erscheint ggf. zweimal (direkt unter dem
   Termin-Block und nach dem Plakat) — beide Instanzen identisch gestaltet. */

.zustand-aktion {
  margin: 2rem 0;
}

.zustand-aktion .button {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
}

/* ---------- Formulare ---------- */

fieldset {
  position: relative;
  background: var(--oberflaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  padding: 0 1.5rem 1.75rem;
  margin: 0 0 1.5rem;
}

/* Legend-Fix: der native Browser stellt <legend> immer auf der oberen
   Rahmenlinie des <fieldset> dar ("hängt halb über der Kartenkante").
   float:left + width:100% holt die Legend vollständig aus dieser
   speziellen Randbehandlung heraus und macht sie stattdessen zu einem
   eigenständigen, farbigen Titelbalken, der randlos innerhalb der Karte
   sitzt (negative Margin gleicht das seitliche fieldset-Padding aus,
   sodass der Balken bis an die Kartenkante reicht). Kein Attribut am
   <legend>-Tag selbst nötig — Test prüft das bloße "<legend>". */
legend {
  float: left;
  width: calc(100% + 3rem);
  margin: 0 -1.5rem 1.5rem;
  padding: 1.1rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Kontrast weiße Schrift auf Farbfläche: Violett 7,39:1 / Blau 5,02:1 */
fieldset:nth-of-type(1) legend {
  background: var(--violett-dunkel);
}

fieldset:nth-of-type(2) legend {
  background: var(--blau-dunkel);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.feld {
  margin-bottom: 1.25rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  font-size: 16px; /* verhindert iOS-Auto-Zoom */
  font-family: inherit;
  color: var(--text);
  background: var(--oberflaeche);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  padding: 0.75em 0.9em;
  min-height: 44px;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--akzent);
}

/* Fehlerhafte Felder */
[aria-invalid="true"] {
  border-color: var(--rot-dunkel);
  background: rgba(196, 58, 22, 0.05);
}

.feld-fehler {
  color: var(--rot-dunkel);
  font-size: 0.9rem;
  margin: 0.35rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.feld-fehler::before {
  content: "⚠";
  flex-shrink: 0;
}

/* Fehlerübersicht / Fehlerseite (role="alert") */
[role="alert"] {
  background: rgba(196, 58, 22, 0.06);
  border: 1px solid var(--rot-dunkel);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

[role="alert"] h2,
[role="alert"] p {
  margin-top: 0;
}

[role="alert"] a {
  color: var(--rot-dunkel);
  font-weight: 600;
}

/* ---------- Regelliste (16 Punkte) ----------
   Volle Anzeige im Seitenfluss, kein Aufklapp-/Scroll-Kasten. Gleiche
   typografische Qualität wie der Rest des Formulars — kein Kleingedrucktes,
   bewusst einfarbig (nur --text), keine bunte Einfärbung des Fließtextes.
   Optische Gruppierung thematisch zusammengehörender Punkte ausschließlich
   über Abstand/Trennlinie, ohne erfundene Zwischenüberschriften und ohne
   Änderung von Wortlaut oder Reihenfolge. */

.regelliste {
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.regelliste li {
  margin-bottom: 1rem;
}

.regelliste li:nth-child(2),
.regelliste li:nth-child(5),
.regelliste li:nth-child(10),
.regelliste li:nth-child(14) {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

/* Checkbox-Zeile: großes Klickziel, gesamtes Label mitklickbar, optisch
   abgesetzt direkt unter dem letzten Regelpunkt. Grid statt Flex, damit
   Checkbox/Label in einer Zeile stehen und Hilfetext/Fehlermeldung darunter,
   eingerückt unter dem Label (nicht unter der Checkbox). */
.feld-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
  align-items: start;
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--akzent-flaeche);
  border: 1px solid var(--akzent-rand);
  border-radius: var(--radius-klein);
  min-height: 44px;
}

.feld-checkbox input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  accent-color: var(--akzent);
  flex-shrink: 0;
}

.feld-checkbox label {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  margin-bottom: 0;
  align-self: center;
}

#regeln-hilfe {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.9rem;
  color: var(--text-dezent);
  margin: 0;
}

.feld-checkbox .feld-fehler {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
}

/* Honigtopf-Feld: visuell aus dem sichtbaren Bereich geschoben,
   nicht display:none — HTML setzt bereits tabindex="-1", aria-hidden,
   autocomplete="off". */
input[name="webseite"],
label[for="webseite"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Bestätigungsseite ----------
   Die Bestätigung steht in einer deutlich sichtbaren, freundlichen Karte
   in der Spaltenmitte statt als loser Text — mit einem selbst gezeichneten
   Häkchen als positivem visuellem Signal (eingebettetes SVG, statisch,
   keine Animation). Die frühere Anmeldenummer-Zeile wurde durch
   BESTAETIGUNG_TEILNAHME ersetzt (Auftraggeber-Wunsch); Klasse entsprechend
   umbenannt, Stil unverändert übernommen, damit die Karte weiter aus einem
   Guss wirkt. */

.bestaetigung-karte {
  background: var(--oberflaeche);
  border: 1px solid var(--rand);
  border-top: 6px solid var(--gruen-dunkel);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2rem 1.5rem 1.75rem;
  margin: 0 0 1.5rem;
  text-align: center;
}

.bestaetigung-haken {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.bestaetigung-teilnahme {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 auto 1.1rem;
  max-width: none;
}

/* Kontrast dunkler Text auf hellem Grund: identisch mit --akzent-flaeche/
   -rand, die bereits an der Checkbox-Fläche auf ≥ 4,5:1 geprüft sind
   (dunkler --text auf nahezu weißem Grund liegt deutlich darüber). */
.bestaetigung-hinweis {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: var(--akzent-flaeche);
  border: 1px solid var(--akzent-rand);
  border-radius: var(--radius-klein);
  padding: 0.75rem 1.1rem;
  margin: 0;
  max-width: none;
}

/* ---------- Buttons ---------- */

button,
input[type="submit"],
.btn,
a.btn,
.button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.75em 1.75em;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--akzent);
  border: none;
  border-radius: 999px;
  box-shadow: var(--schatten);
  cursor: pointer;
  text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
a.btn:hover,
.button:hover,
a.button:hover {
  background: #045c2b;
  color: #fff;
}

button:active,
input[type="submit"]:active,
.btn:active,
a.btn:active,
.button:active,
a.button:active {
  transform: translateY(1px);
}

button:disabled,
input[type="submit"]:disabled,
.btn[aria-disabled="true"],
.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sekundäre Verlinkung, z. B. "Zurück zur Startseite" */
.btn--sekundaer {
  background: var(--blau-dunkel);
}

.btn--sekundaer:hover {
  background: #015d8c;
}

/* ---------- Kein horizontales Scrollen ab 320 px ---------- */

@media (max-width: 320px) {
  main, footer {
    padding-inline: 0.75rem;
  }
}