/*
 * Direkte Online-Terminbuchung (Planning-OnlineTerminbuchung-2026-09-27,
 * Stufe 3). Stil „Werkstatt" (flache Karten ueber Linie statt Schatten,
 * Signalfarbe nur als Flaeche) in eigener Farbwelt (Flieder) zur
 * Tab-Unterscheidung von Salonika (dunkel) und meineSalonika (Pfirsich).
 * Bewusst OHNE die gemeinsamen Werkstatt-Schriften: eigener Hostname, eigene
 * Herkunft — ein zweiter, aus einem anderen Ursprung nicht ladbarer
 * Schriftensatz waere nur Ballast. Systemschrift bleibt die Vorgabe.
 *
 * O3b (Stufe 5): drei selbst gehostete, eigene Kopien unter
 * `vendor/schriften/` (Lizenz dort, LIESMICH.md) fuer die erkannte oder vom
 * Salon festgelegte Schriftgattung — geladen wird davon nur, was
 * `--schrift` tatsaechlich referenziert (`aussehen.js::aussehenAnwenden`
 * setzt die Eigenschaft erst bei erkannter/gewaehlter Gattung um, siehe dort
 * fuer die drei Schriftstapel).
 */

@font-face {
  font-family: "Inter";
  src: url("vendor/schriften/inter-variabel.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("vendor/schriften/lora-variabel.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("vendor/schriften/quicksand-variabel.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --tinte: #201a33;
  --flaeche: #f4f2fb;
  --weiss: #ffffff;
  --linie: #ded9f2;
  --linie-kraeftig: #b6acdf;
  --leise: #635c7a;
  --signal: #8b7cf6;
  --signal-leise: #ece8fd;
  /* Text AUF der Akzentflaeche (Knoepfe) — bewusst getrennt von --tinte:
     main.js waehlt diesen Wert zur Laufzeit dynamisch dunkel/hell, je
     nachdem was gegen die (ggf. uebersteuerte) Akzentfarbe kontrastiert;
     dieser Wert hier ist nur der Vorgabewert vor dem ersten main.js-Lauf. */
  --signal-text: #201a33;
  --tief-text: #5a42d6;
  --gut: #1d7a46;
  --gut-leise: #e6f3eb;
  --schlecht: #b3261e;
  --schlecht-leise: #fbe9e7;
  --radius: 6px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rand: 16px;
}

/*
 * Dunkles Gegenstueck (Planning-OnlineTerminbuchung-2026-09-27, O3, Stufe 5):
 * das Ladeskript erkennt die Helligkeit der einbettenden Seite und setzt
 * `data-farbmodus="dunkel"` auf <html> (main.js::einbettung.js) — kein
 * exaktes Farbmatching, nur ein Umschalter zwischen zwei fertigen Paletten,
 * denn der Hintergrund selbst bleibt in .eingebettet ohnehin durchsichtig
 * (die fremde Seite scheint durch); nur die eigenen Karten/Texte/Linien
 * muessen zu Hell oder Dunkel passen.
 */
:root[data-farbmodus="dunkel"] {
  color-scheme: dark;
  --tinte: #f1eef9;
  --flaeche: #1c1830;
  --weiss: #262143;
  --linie: #3c3560;
  --linie-kraeftig: #524a7d;
  --leise: #b6aed6;
  --signal-leise: #362d5c;
  --tief-text: #c3b6ff;
  --gut-leise: #17301f;
  --schlecht-leise: #3a1c19;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
}
h1, h2 { font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
p { margin: 0; }
a { color: var(--tief-text); }
button { font: inherit; color: inherit; }
.klein { font-size: 13px; }
.leise { color: var(--leise); }

.app-laedt { min-height: 100dvh; display: grid; place-content: center; padding: var(--rand); }
.app-laedt__text { color: var(--leise); font-size: 14px; }

.buchung { max-width: 480px; margin: 0 auto; padding: var(--rand) var(--rand) 48px; display: flex; flex-direction: column; gap: 18px; min-height: 100dvh; }

/*
 * Eingebettet (Stufe 5, O1/O3): "Der Hintergrund des Bausteins ist
 * durchsichtig, die fremde Seite scheint durch" — unabhaengig von Hell/
 * Dunkel, das nur die EIGENEN Karten/Texte betrifft. Kein 100dvh-Minimum
 * mehr: die Hoehe soll dem tatsaechlichen Inhalt folgen (einbettung.js
 * meldet sie per postMessage ans Ladeskript zurueck), nicht immer mindestens
 * einen ganzen Bildschirm hoch sein.
 */
body.eingebettet { background: transparent; }
body.eingebettet .buchung { min-height: 0; padding-top: 0; }
body.eingebettet .app-laedt { min-height: 0; padding: calc(var(--rand) * 2) var(--rand); }

/* ---- Kopf: Fortschritt + bisherige Auswahl (O16) ---- */
.buchung-kopf { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.buchung-kopf__schritt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tief-text); }
.buchung-kopf__auswahl { font-size: 13px; color: var(--leise); }
.fortschritt { display: flex; gap: 6px; }
.fortschritt__punkt { display: block; height: 4px; flex: 1; border-radius: 2px; background: var(--linie); }
.fortschritt__punkt--aktiv { background: var(--signal); }

.schritt { display: flex; flex-direction: column; gap: 16px; }
.schritt--mitte { align-items: center; text-align: center; padding-top: 15vh; gap: 12px; }
.schritt h1 { outline: none; }

.knopf-zurueck { align-self: flex-start; appearance: none; border: 0; background: none; color: var(--leise); font-size: 14px; padding: 6px 0; cursor: pointer; }
.knopf-zurueck:hover { color: var(--tinte); }

.knopf {
  appearance: none; border: 1px solid var(--linie-kraeftig); background: var(--weiss); color: var(--tinte);
  border-radius: var(--radius); padding: 12px 16px; font-weight: 700; font-size: 16px; cursor: pointer; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.knopf--haupt { background: var(--signal); border-color: var(--signal); color: var(--signal-text); }
.knopf--breit { width: 100%; }
.knopf[disabled] { opacity: 0.5; cursor: default; }

/* ---- Auswahlkarten: Leistungen, Mitarbeiter, Standorte ---- */
.leistungs-gruppe { display: flex; flex-direction: column; gap: 10px; }
.leistungs-gruppe h2 { margin-bottom: -2px; }
.mitarbeiter-liste { display: flex; flex-direction: column; gap: 10px; }

.auswahl-karte {
  display: flex; align-items: center; gap: 12px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.auswahl-karte:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.auswahl-karte--aktiv { border-color: var(--signal); background: var(--signal-leise); }
.auswahl-karte input[type="checkbox"], .auswahl-karte input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--tief-text); }
.auswahl-karte__haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auswahl-karte__titel { font-weight: 650; }
.auswahl-karte__unter { font-size: 13px; color: var(--leise); }
.auswahl-karte__rechts { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--leise); }
.auswahl-karte__bild { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.auswahl-karte__platzhalter {
  width: 40px; height: 40px; border-radius: 50%; background: var(--signal-leise); color: var(--tief-text);
  display: grid; place-items: center; font-weight: 700; flex: none;
}

/* ---- Wann: Datum + Zeitraster ---- */
.zeit-bereich { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.zeit-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.zeit-knopf {
  appearance: none; border: 1px solid var(--linie-kraeftig); background: var(--weiss); color: var(--tinte);
  border-radius: var(--radius); padding: 10px 4px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; min-height: 44px;
}
.zeit-knopf:hover { border-color: var(--signal); }

/* ---- Formularfelder ---- */
.stapel { display: flex; flex-direction: column; gap: 12px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld__name { font-size: 13px; color: var(--leise); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--weiss); border: 1px solid var(--linie-kraeftig); border-radius: var(--radius);
  padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

.feld-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.feld-checkbox input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--tief-text); }

/* Fallfeld (O11) — fuer Menschen unsichtbar, bleibt aber im DOM erreichbar (kein display:none). */
.fallenfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.agb-details { font-size: 13px; color: var(--leise); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; }
.agb-details summary { cursor: pointer; font-weight: 650; color: var(--tinte); }
.agb-details p { margin-top: 8px; }
/* Kein Inline-style (strenge CSP ohne 'unsafe-inline' fuer style-src, Stufe 5). */
.agb-text { white-space: pre-line; }

.meldung { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; }
.meldung--gut { background: var(--gut-leise); color: var(--gut); }
.meldung--fehler { background: var(--schlecht-leise); color: var(--schlecht); }
.meldung--info { background: var(--signal-leise); color: var(--tief-text); }

.lade-zeile { color: var(--leise); font-size: 14px; padding: 6px 0; }
.leer { text-align: center; color: var(--leise); padding: 10px 0; font-size: 14px; }

.erfolg-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--signal-leise); color: var(--tief-text);
  display: grid; place-items: center; font-size: 28px;
}

@media (min-width: 640px) {
  .buchung { padding-top: 40px; }
}