/* Token-Register für die Warteliste.
   Übernommen aus dem Design-Handoff „Design System Formular" (colors, typography, spacing,
   shape, motion, website, forms), zusammengefasst in eine Datei, weil diese Seite statisch
   ausgeliefert wird und jeder @import einen zusätzlichen Umlauf kostet.

   Diese Datei ist die Tauschstelle: Ändert sich das Designsystem, wird hier nachgezogen und
   sonst nirgends. styles.css enthält nur Bauteile, keine Werte.

   Zwei bewusste Abweichungen vom Handoff:
   · Die Schriften kommen nicht per Google-Fonts-@import, sondern liegen als woff2 daneben
     (DSGVO/TTDSG, kein Fremd-CDN). Die @font-face-Regeln stehen unten.
   · Nicht übernommen wurde, was diese Seite nicht braucht: Raster- und Korn-Grafik,
     Social-Artboards, Skalen (Likert/NPS), Sidebar- und Tabellenmaße. */

/* ---------------------------------------------------------------- Schriften */
/* Literata: aus tools/social-cards übernommen, dort am 19.08.2026 von Google Fonts bezogen.
   Archivo und IBM Plex Mono am 20.08.2026 bezogen. Alle drei SIL Open Font License.
   Zur Laufzeit geht nichts ins Netz. */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/warteliste/fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/warteliste/fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/warteliste/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/warteliste/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/warteliste/fonts/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/warteliste/fonts/ibm-plex-mono-500.woff2) format('woff2');
}

:root {
  /* ------------------------------------------------------------- Grundfarben */
  /* Vier Tinten und zwei Papiertöne. Nur die semantischen Rollen darunter werden benutzt. */
  --paper-050: #F8F5EC;
  --paper-100: #F3EFE4;   /* Papier */
  --paper-200: #E6DFCE;   /* Vorsatz */
  --paper-300: #D8CFB9;

  --ink-900: #121915;
  --ink-800: #17211C;     /* Tinte */
  --ink-700: #29332C;
  --ink-500: #5A625A;
  --ink-400: #7E7669;
  --ink-300: #9BA79F;

  --tanne-900: #12291F;
  --tanne-700: #1D4034;   /* Tanne — Markenfarbe */
  --tanne-500: #2F6B54;
  --tanne-300: #7FB49B;
  --tanne-100: #C6D3CC;
  --tanne-050: #E4EAE5;

  --signal-800: #75203F;  /* Signal tief, Hover */
  --signal-700: #8E2A52;  /* Signal tief — darf Text tragen */
  --fluo-500: #FF4E87;    /* Riso-Fluo — nur Grafik, nie Text */

  --rust-600: #A32C3C;
  --rust-100: #F2D9DF;

  /* ---------------------------------------------------------------- Flächen */
  --surface-page: var(--paper-100);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--paper-200);

  /* ------------------------------------------------------------------- Text */
  --text-strong: var(--ink-800);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-dark: var(--paper-100);
  --text-brand: var(--tanne-700);
  --text-accent: var(--signal-700);
  --text-link: var(--signal-700);
  --text-link-hover: var(--ink-800);

  --brand: var(--tanne-700);
  --brand-050: var(--tanne-050);
  --brand-100: var(--tanne-100);
  --accent: var(--signal-700);        /* CTA */
  --accent-strong: var(--signal-800); /* CTA Hover — nie heller */
  --accent-pop: var(--fluo-500);      /* Grafik, niemals Text */

  /* ----------------------------------------------------------------- Kanten */
  --border-subtle: rgba(23, 33, 28, 0.12);
  --border-default: rgba(23, 33, 28, 0.24);
  --border-strong: rgba(23, 33, 28, 0.55);

  --danger: var(--rust-600);
  --danger-soft: var(--rust-100);

  --focus-ring: var(--tanne-700);
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  /* ------------------------------------------------------------- Typografie */
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-2xs: 0.6875rem;  /* 11 — nur Mono-Meta */
  --text-xs: 0.75rem;     /* 12 */
  --text-md: 0.875rem;    /* 14 — UI-Standard */
  --text-base: 1rem;      /* 16 — Fließtext UI */
  --text-xl: 1.375rem;    /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */

  --leading-relaxed: 1.62;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-ui);
  --type-ui-strong: var(--weight-semibold) var(--text-md) / 1.4 var(--font-ui);
  --type-meta: var(--weight-regular) var(--text-xs) / 1.4 var(--font-mono);

  /* ------------------------------------------------------- Raster, Abstände */
  /* Achterrhythmus, 4 nur als Haarabstand. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-11: 96px;
  --space-12: 128px;

  --container-page: 1240px;
  --container-narrow: 860px;
  --touch-min: 44px;

  /* ------------------------------------------------------ Kanten und Radien */
  /* Fast alles ist rechtwinklig: Kanten sind Kanten, wie im Satz. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-circle: 50%;
  --border-hairline: 1px;
  --border-thick: 3px;    /* aktive Auswahl, Zitat-Kante */

  /* -------------------------------------------------------------- Bewegung */
  /* Bewegung erklärt Zustand, sie unterhält nicht. */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-control: color var(--dur-fast) var(--ease-out),
                        background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out);

  /* --------------------------------------------------------------- Website */
  --web-margin: var(--space-6);
  --web-display: clamp(2.5rem, 6.4vw, 5.25rem);   /* 40 → 84 */
  --web-h2: clamp(1.625rem, 3vw, 2.25rem);        /* 26 → 36 */
  --web-h3: clamp(1.125rem, 1.8vw, 1.375rem);     /* 18 → 22 */
  --web-lead: clamp(1.0625rem, 1.5vw, 1.375rem);  /* 17 → 22 */
  --web-section: var(--space-11);                 /* 96 — Standardabstand */
  --web-cta-height: 48px;
  --web-cta-height-sm: 40px;

  /* -------------------------------------------------- Formular-Register */
  /* Eine Frage ist eine Überschrift, kein fettes Label: Serif fragt, Archivo antwortet.
     Fortschritt ist eine Punktreihe, nie ein Verlauf und nie ein Prozentring.
     Pflicht und Fehler sagen immer ein Wort dazu, Farbe allein zählt nicht. */
  --form-measure: 54ch;
  --form-container: 720px;
  --form-pad-block: var(--space-9);

  --form-step-stack: var(--space-8);
  --form-question-gap: var(--space-7);
  --form-group-gap: var(--space-5);
  --form-field-gap: var(--space-2);
  --form-choice-gap: var(--space-2);
  --form-actions-gap: var(--space-3);

  --form-control-h: 40px;
  --form-control-h-lg: 48px;
  --form-control-pad-x: var(--space-3);
  --form-control-pad-y: 9px;
  --form-control-radius: var(--radius-sm);
  --form-control-bg: var(--surface-card);
  --form-control-border: var(--border-default);
  --form-control-border-hover: var(--border-strong);
  --form-control-border-focus: var(--brand);
  --form-textarea-min-h: 120px;
  --form-textarea-max-h: 320px;

  --form-type-question: var(--weight-regular) var(--web-h2) / 1.12 var(--font-serif);
  --form-type-legend: var(--weight-semibold) var(--text-md) / 1.4 var(--font-ui);
  --form-type-label: var(--weight-semibold) var(--text-md) / 1.4 var(--font-ui);
  --form-type-input: var(--weight-regular) var(--text-base) / 1.4 var(--font-ui);
  --form-type-input-mono: var(--weight-regular) var(--text-base) / 1.4 var(--font-mono);
  --form-type-choice: var(--weight-medium) var(--text-base) / 1.35 var(--font-ui);
  --form-type-choice-note: var(--weight-regular) var(--text-md) / 1.45 var(--font-ui);
  --form-type-hint: var(--weight-regular) var(--text-xs) / 1.45 var(--font-mono);
  --form-type-error: var(--weight-medium) var(--text-xs) / 1.45 var(--font-mono);
  --form-type-step: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-mono);
  --form-type-counter: var(--weight-regular) var(--text-2xs) / 1.4 var(--font-mono);
  --form-type-consent: var(--weight-regular) var(--text-md) / 1.55 var(--font-ui);

  --form-choice-min-h: var(--touch-min);
  --form-choice-min-h-lg: 56px;
  --form-choice-pad-y: var(--space-3);
  --form-choice-pad-x: var(--space-4);
  --form-choice-radius: var(--radius-sm);
  --form-choice-bg: var(--surface-card);
  --form-choice-bg-selected: var(--brand-050);
  --form-choice-border: var(--border-default);
  --form-choice-border-hover: var(--brand);
  --form-choice-border-selected: var(--brand);
  --form-choice-edge: var(--border-thick);
  --form-choice-col-min: 232px;
  --form-marker-size: 18px;
  --form-marker-dot: 8px;
  --form-marker-line: 1.5px;
  --form-marker-gap: var(--space-3);

  --form-trail-dot: 9px;
  --form-trail-line: var(--border-hairline);
  --form-trail-gap: var(--space-3);
  --form-trail-label-gap: var(--space-2);
  --form-trail-done: var(--brand);
  --form-trail-current: var(--accent);
  --form-trail-todo: var(--border-default);

  --form-footer-h: 72px;
  --form-footer-h-sm: 64px;
  --form-cta-h: var(--web-cta-height);
  --form-cta-h-sm: var(--web-cta-height-sm);

  /* Der Haken sitzt immer auf Tanne, nie auf dem CTA-Rot. Er braucht deshalb eine eigene
     Farbe und nicht --text-on-dark: Papier auf Tanne traegt in beiden Modi (10:1 hell,
     5,5:1 dunkel), Tinte auf Tanne dagegen nur 2,9:1. */
  --form-check-color: var(--paper-100);

  --form-required-mark: var(--accent);
  --form-optional-text: var(--text-faint);
  --form-error: var(--danger);
  --form-disabled-opacity: 0.45;
  --form-transition: var(--transition-control),
                     box-shadow var(--dur-fast) var(--ease-out);

  --form-panel-bg: var(--surface-card);
  --form-panel-border: var(--border-subtle);
  --form-consent-bg: var(--surface-sunken);
  --form-legal-color: var(--text-muted);
  --form-autosave-color: var(--text-faint);
}

/* Dunkelvariante. Graphit mit Grünstich, nie reines Schwarz.
   Die Seite folgt der Systemeinstellung; ein Umschalter existiert nicht. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #121915;
    --surface-card: #17211C;
    --surface-sunken: #0E1411;

    --text-strong: var(--paper-100);
    --text-body: #DCE3DD;
    --text-muted: var(--ink-300);
    --text-faint: #6E7A72;
    --text-brand: var(--tanne-300);
    --text-accent: #C4708F;
    --text-link: #C4708F;
    --text-link-hover: var(--paper-100);

    --brand: var(--tanne-500);
    --brand-100: var(--tanne-700);
    --accent: #C4708F;
    --accent-strong: #A85677;
    --accent-pop: #FF7FA6;

    --border-subtle: rgba(243, 239, 228, 0.12);
    --border-default: rgba(243, 239, 228, 0.24);
    --border-strong: rgba(243, 239, 228, 0.5);
    --focus-ring: var(--tanne-300);

    --danger: #E08E9B;
    --danger-soft: #2E1A1E;

    --form-choice-bg-selected: rgba(47, 107, 84, 0.18);
    /* Abweichung vom Handoff: Dort bleibt --text-on-dark auch im Dunkelmodus Papier. Auf dem
       aufgehellten CTA-Rot (#C4708F) ergaebe das 3,0:1, zu wenig fuer Text. Tinte darauf
       ergibt 5,2:1. Der Haken auf Tanne bleibt davon unberuehrt, der hat --form-check-color. */
    --text-on-dark: var(--ink-900);
  }
}

/* Mobil: Kolumne wird zur Seite, Bedienelemente wachsen auf Touchmaß. */
@media (max-width: 767px) {
  :root {
    --form-pad-block: var(--space-7);
    --form-step-stack: var(--space-6);
    --form-question-gap: var(--space-6);
    --form-control-h: var(--form-control-h-lg);
    --form-choice-col-min: 100%;
    --form-footer-h: var(--form-footer-h-sm);
    --web-margin: var(--space-5);
    --web-section: var(--space-9);
  }
}

/* Bewegung erklärt Zustand. Wer sie abbestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}