/*
 * Gemeinsames Stylesheet der Terminbuchung.
 *
 * Token stammen aus dem Website-Repo (static/css/apple.css), damit der Übergang von
 * christophharrison.at zur Buchungsseite nahtlos aussieht. Abweichungen mit Grund:
 * - Feldrahmen #86868b statt #d2d2d7 (nur 1,5:1 zur Seite, Bedienelemente brauchen 3:1).
 * - Text auf der Hinweisfläche #ebf1ff in #424245 statt im gedämpften Grau (4,48:1 wäre knapp
 *   darunter).
 * - Dunkelmodus nur für die Bedienoberfläche (data-thema="system"). Gastseiten bleiben immer hell.
 *
 * Kein Inline-Stil und keine Fremdressourcen: die CSP erlaubt nur eigene Dateien. Die Schrift ist
 * der Systemstapel.
 *
 * Kontraste (WCAG 2.2), nachgerechnet mit scripts/kontrast-pruefen.ts am 2026-10-30. Das Skript
 * liest die Farben aus dieser Datei und prüft alle Paare je Modus (Text 4,5:1, Bedienelemente und
 * Fokusring 3:1, alle Zustände: Normal, Überfahren, Gedrückt, Fokus, Deaktiviert, jeweils Text
 * und Rand bzw. Fläche gegen die Umgebung). Auswahl:
 *
 * HELL                                                          Wert    Mindest
 *   Text #1d1d1f auf Seite #ffffff                             16,83    4,5
 *   Text #1d1d1f auf Fläche #f5f5f7                            15,46    4,5
 *   Fließtext #424245 auf Seite #ffffff                        10,01    4,5
 *   Fließtext #424245 auf Fläche #f5f5f7                        9,20    4,5
 *   Fließtext #424245 auf Hinweisfläche #ebf1ff                 8,85    4,5
 *   Gedämpft #6e6e73 auf Seite #ffffff                          5,07    4,5
 *   Gedämpft #6e6e73 auf Fläche #f5f5f7                         4,66    4,5
 *   Link #1f5ef0 auf Seite #ffffff                              5,36    4,5
 *   Link #1f5ef0 auf Fläche #f5f5f7                             4,92    4,5
 *   Link #1f5ef0 auf Hinweisfläche #ebf1ff                      4,74    4,5
 *   Link beim Überfahren #1b52d6 auf Seite                      6,51    4,5
 *   Hauptknopf Text #ffffff auf #1f5ef0                         5,36    4,5
 *   Hauptknopf Text #ffffff auf (Überfahren) #1b52d6            6,51    4,5
 *   Hauptknopf Fläche #1f5ef0 gegen Seite #ffffff               5,36    3
 *   Zweitknopf Rahmen #86868b gegen Seite #ffffff               3,62    3
 *   Deaktivierter Knopf Text #6e6e73 auf #f5f5f7                4,66    4,5
 *   Deaktivierter Knopf Rand #86868b gegen Seite #ffffff        3,62    3
 *   Feldrahmen #86868b gegen Seite/Karte #ffffff                3,62    3
 *   Feldrahmen #86868b gegen Fläche #f5f5f7                     3,33    3
 *   Fehlertext #b3261e auf Seite #ffffff                        6,54    4,5
 *   Fehlertext #b3261e auf #fdecea                              5,72    4,5
 *   Erfolgstext #1b6e3c auf Seite #ffffff                       6,28    4,5
 *   Fokusring #1f5ef0 gegen Seite #ffffff                       5,36    3
 *   Fokusring #1f5ef0 gegen Hinweisfläche #ebf1ff               4,74    3
 *
 * DUNKEL (nur Bedienoberfläche)
 *   Text #f5f5f7 auf Seite #1d1d1f                             15,46    4,5
 *   Fließtext #d2d2d7 auf Seite #1d1d1f                        11,17    4,5
 *   Fließtext #d2d2d7 auf Karte #2c2c2e                         9,25    4,5
 *   Gedämpft #a1a1a6 auf Seite #1d1d1f                          6,54    4,5
 *   Gedämpft #a1a1a6 auf Karte #2c2c2e                          5,42    4,5
 *   Link #8ab7ff auf Seite #1d1d1f                              8,25    4,5
 *   Hauptknopf Text #101114 auf #5e9bff                         6,84    4,5
 *   Hauptknopf Text #101114 auf (Überfahren) #8ab7ff            9,26    4,5
 *   Feldrahmen #8e8e93 gegen Karte #2c2c2e                      4,27    3
 *   Feldrahmen #8e8e93 gegen Seite #1d1d1f                      5,16    3
 *   Fehlertext #ff8a80 auf Seite #1d1d1f                        7,37    4,5
 *   Erfolgstext #6fd198 auf Seite #1d1d1f                       9,02    4,5
 *   Fokusring #5e9bff gegen Seite #1d1d1f                       6,10    3
 *
 * Abweichungen von apple.css, die der Kontrast erzwingt: Feldrahmen und Rand des deaktivierten
 * Knopfs (#d2d2d7 hätte 1,51:1, deshalb #86868b mit 3,62:1) und Text auf #ebf1ff (gedämpftes Grau
 * #6e6e73 hätte 4,48:1, deshalb erbt .gedaempft dort die Farbe der Fläche, #424245). Im Dunkelmodus steht
 * dunkler Text auf dem hellen Knopf (Weiß auf #5e9bff hätte nur etwa 2,8:1).
 */

:root {
  --surface: #ffffff;
  --surface-subtle: #f5f5f7;
  --surface-raised: #ffffff;
  /* Zierlinie (Kartenrand, Trenner). Trägt keine Information und braucht keine 3:1. */
  --line: #d2d2d7;
  /* Rahmen von Feldern und Zweitknöpfen: Bedienelement, 3:1 zur Umgebung. */
  --line-strong: #86868b;
  --ink: #1d1d1f;
  --ink-muted: #6e6e73;
  --ink-body: #424245;
  --accent: #1f5ef0;
  --accent-strong: #1b52d6;
  --accent-soft: #ebf1ff;
  --on-accent: #ffffff;
  --link: #1f5ef0;
  --fehler: #b3261e;
  --fehler-soft: #fdecea;
  --erfolg: #1b6e3c;
  --erfolg-soft: #e6f4ea;

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial,
    sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto,
    Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-tile: 28px;
  --radius-full: 999px;

  /* Innen Fläche, außen Akzent: der Außenring muss 3:1 zur Umgebung haben. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  color-scheme: light;
}

/* Dunkelmodus nur in der Bedienoberfläche (Entscheidung D3). Gastseiten tragen data-thema="hell". */
@media (prefers-color-scheme: dark) {
  :root[data-thema='system'] {
    --surface: #1d1d1f;
    --surface-subtle: #2a2a2d;
    --surface-raised: #2c2c2e;
    --line: #48484a;
    --line-strong: #8e8e93;
    --ink: #f5f5f7;
    --ink-muted: #a1a1a6;
    --ink-body: #d2d2d7;
    --accent: #5e9bff;
    --accent-strong: #8ab7ff;
    --accent-soft: #1c2b4d;
    /* Dunkler Text auf dem hellen Knopf: Weiß auf #5e9bff erreicht nur etwa 2,8:1. */
    --on-accent: #101114;
    --link: #8ab7ff;
    --fehler: #ff8a80;
    --fehler-soft: #3d1f1d;
    --erfolg: #6fd198;
    --erfolg-soft: #1c3326;
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
}

main {
  flex: 1 0 auto;
  padding-block: var(--space-12);
}

.huelle {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 22px;
}

/* Sprunglink: nur bei Tastaturfokus sichtbar. */
.sprung {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.sprung:focus-visible {
  top: var(--space-4);
}

.kopf {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.kopf__innen {
  display: flex;
  align-items: center;
  min-height: 52px;
}

.kopf__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.fuss {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
  font-size: 14px;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* Überschriften */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

p {
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: 21px;
  line-height: 1.52;
  letter-spacing: -0.016em;
  text-wrap: pretty;
}

.gedaempft {
  color: var(--ink-muted);
}

/* Links: unterstrichen, damit sie nicht nur an der Farbe erkennbar sind. */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-strong);
}

/* Fokus: gilt für alle Bedienelemente. Der transparente Umriss bleibt im Kontrastmodus von
   Windows sichtbar, wo Schatten entfallen. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Karten */
.karte {
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--surface-raised);
}

.karte--mitte {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.karte--mitte .lead {
  margin: var(--space-4) auto 0;
}

/* Hinweisfläche: Text immer in --ink-body (gedämpftes Grau erreicht dort keine 4,5:1). */
.hinweis {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--ink-body);
}

/* Gedämpfter Text innerhalb einer Hinweisfläche übernimmt die Farbe der Fläche: #6e6e73 auf
   #ebf1ff wären nur 4,48:1. scripts/kontrast-pruefen.ts prüft, dass diese Regel besteht. */
.hinweis .gedaempft {
  color: inherit;
}

.hinweis--fehler {
  background: var(--fehler-soft);
  color: var(--fehler);
}

.hinweis--erfolg {
  background: var(--erfolg-soft);
  color: var(--erfolg);
}

/* Knöpfe: Pillen, 48 px hoch (Zielgröße für Daumen), Markenblau nur für die Hauptaktion. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.knopf:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.knopf:active {
  background: var(--accent-strong);
}

.knopf--zweit {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.knopf--zweit:hover,
.knopf--zweit:active {
  background: var(--accent-soft);
  color: var(--ink);
}

.knopf:disabled,
.knopf[aria-disabled='true'] {
  /* Rand in --line-strong, nicht --line: Auch der deaktivierte Knopf muss sich mit 3:1 von der
     Umgebung abheben (die Fläche --surface-subtle allein tut es nicht, sie liegt bei 1,09:1). */
  border-color: var(--line-strong);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* Felder */
.feld {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
}

.feld::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.feld[aria-invalid='true'] {
  border-color: var(--fehler);
}

.feld:disabled {
  background: var(--surface-subtle);
  color: var(--ink-muted);
}

.feld__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--ink);
}

.feld__fehler {
  margin-top: var(--space-2);
  color: var(--fehler);
}

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