/* ==========================================================================
   corelay - Design-Tokens
   --------------------------------------------------------------------------
   Einzige Quelle fuer Farben, Typo-Skala, Abstaende, Radien, Schatten und
   Ebenen. Alle weiteren Stylesheets verwenden ausschliesslich diese
   Custom Properties - keine harten Hex-Werte in Komponenten.

   Inhalt
     1. Farben - dunkle Flaechen
     2. Farben - helle Flaechen
     3. Farben - Akzent (Blau)
     4. Farben - Text
     5. Farben - Signal (Formular-Fehler)
     6. Schriftfamilien
     7. Typo-Skala (Groessen, Gewichte, Zeilenhoehen, Tracking)
     8. Abstands-Skala (4px-Basis)
     9. Layout-Masse
    10. Radien
    11. Schatten
    12. Bewegung
    13. Ebenen (z-index)
   ========================================================================== */

:root {

  /* --- 1. Farben - dunkle Flaechen --------------------------------------- */
  --ink-950: #080C16;                    /* tiefstes Schwarzblau, Footer      */
  --ink-900: #0B1120;                    /* Standard-Dunkelflaeche            */
  --ink-850: #0F172A;                    /* Karten auf dunklem Grund          */
  --ink-800: #152036;                    /* Hover dunkler Karten              */
  --ink-border: rgba(255, 255, 255, .09);/* 1px-Rahmen dunkler Karten         */

  /* --- 2. Farben - helle Flaechen ---------------------------------------- */
  --paper: #FFFFFF;                      /* Karten, FAQ, Buchungs-Haelfte     */
  --paper-50: #F7FAFD;                   /* Sektionsgrund Leistungen/Prozess  */
  --paper-100: #F1F5FA;                  /* Logo-Band, FAQ-Zeilen, Kalender   */
  --paper-200: #E4EBF3;                  /* Rahmen und Trennlinien            */

  /* --- 3. Farben - Akzent (Blau) ----------------------------------------- */
  --blue-500: #2F80FF;                   /* Primaerbuttons, aktive Zustaende  */
  --blue-400: #4A9EFF;                   /* Headline-Zweitzeile, Icons dunkel */
  --blue-600: #1D6BE5;                   /* Button-Hover                      */
  --blue-700: #1A5FCC;                   /* Blau-Text auf Hell, AA-sicher     */
  --blue-50: #E8F1FF;                    /* Icon-Kachel auf hellem Grund      */
  --blue-glow: rgba(47, 128, 255, .28);  /* radialer Schein hinter dem Mockup */

  /* Abgeleitete Blau-Transparenzen (Hover-Rahmen, dunkle Icon-Kacheln) */
  --blue-a14: rgba(47, 128, 255, .14);   /* Icon-Kachel auf dunklem Grund     */
  --blue-a18: rgba(47, 128, 255, .18);   /* Kartenrahmen im Hover             */
  --blue-a15: rgba(47, 128, 255, .15);   /* Fokusring der Formularfelder      */

  /* --- 4. Farben - Text --------------------------------------------------- */
  --t-on-dark: #FFFFFF;
  --t-on-dark-soft: #A7B4C8;
  --t-on-dark-mute: #7E8CA3;
  --t-on-light: #0B1120;
  --t-on-light-soft: #4A5A72;
  /* Gegenueber der Farbtabelle abgedunkelt (#8494AB -> #5F6E85): der Ton
     traegt fast ausschliesslich 11-13px kleinen Text (Partnerband, Wochentage,
     Platzhalter, Micro-Zeilen) und verfehlte mit 3.09:1 auf --paper,
     2.95:1 auf --paper-50 und 2.82:1 auf --paper-100 die geforderte
     AA-Schwelle von 4.5:1. Neu: 5.18 / 4.94 / 4.73:1 - und weiterhin klar
     heller als --t-on-light-soft (7.01:1). */
  --t-on-light-mute: #5F6E85;

  /* --- 5. Farben - Signal -------------------------------------------------- */
  --danger: #D92D20;                     /* Fehlermeldungen im Formular       */
  --danger-soft: #FFF2F1;                /* Hinterlegung fehlerhafter Felder  */

  /* --- 6. Schriftfamilien -------------------------------------------------- */
  --ff-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ff-script: 'Caveat', cursive;

  /* --- 7. Typo-Skala ------------------------------------------------------- */
  /* Groessen */
  --fs-h1: clamp(2.4rem, 4.6vw, 3.75rem);   /* Hero-H1, Desktop ca. 60px      */
  --fs-h2: clamp(1.75rem, 3vw, 2.35rem);    /* Sektions-H2, ca. 38px          */
  --fs-h3: clamp(1.4rem, 2.2vw, 1.75rem);   /* ca. 28px                       */
  --fs-card-title: 1.0625rem;               /* 17px                           */
  --fs-eyebrow: .75rem;                     /* 12px                           */
  --fs-body: .9375rem;                      /* 15px                           */
  --fs-body-sm: .875rem;                    /* 14px                           */
  --fs-micro: .75rem;                       /* 12px                           */
  --fs-btn: .9375rem;                       /* 15px                           */
  --fs-script: clamp(1.5rem, 2vw, 1.75rem); /* 24-28px                        */

  /* Gewichte */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Zeilenhoehen */
  --lh-h1: 1.08;
  --lh-h2: 1.18;
  --lh-h3: 1.25;
  --lh-card-title: 1.3;
  --lh-eyebrow: 1.2;
  --lh-body: 1.7;
  --lh-body-sm: 1.65;
  --lh-micro: 1.5;
  --lh-script: 1.15;

  /* Tracking */
  --ls-h1: -.03em;
  --ls-h2: -.02em;
  --ls-h3: -.02em;
  --ls-card-title: -.01em;
  --ls-eyebrow: .16em;
  --ls-btn: -.01em;
  --ls-brand: -.03em;
  --ls-claim: .18em;

  /* --- 8. Abstands-Skala (4px-Basis) --------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-13: 52px;
  --sp-14: 56px;
  --sp-15: 60px;
  --sp-16: 64px;

  /* --- 9. Layout-Masse ------------------------------------------------------ */
  --wrap: 1200px;                        /* Inhaltsbreite                      */
  --wrap-pad: 24px;                      /* Seitenpadding Desktop              */
  --wrap-pad-sm: 20px;                   /* Seitenpadding mobil                */
  --header-h: 76px;                      /* Header-Hoehe                       */
  --section-y: clamp(64px, 7vw, 96px);   /* vertikaler Sektionsabstand         */
  --half-pad: clamp(40px, 5vw, 64px);    /* Innenabstand geteilter Sektionen   */
  --prose-w: 780px;                      /* Lesebreite Rechtstexte             */
  --head-w: 720px;                       /* Breite zentrierter Sektionskoepfe  */

  /* --- 10. Radien ----------------------------------------------------------- */
  --r-card: 14px;                        /* Karten                             */
  --r-tile: 12px;                        /* Icon-Kacheln                       */
  --r-field: 12px;                       /* Formularfelder                     */
  --r-faq: 10px;                         /* FAQ-Zeilen                         */
  --r-pill: 999px;                       /* Buttons, Chips                     */
  --r-input: 999px;                      /* Newsletter-Feld, Zeit-Pillen       */

  /* --- 11. Schatten --------------------------------------------------------- */
  --sh-card: 0 1px 2px rgba(11, 17, 32, .04), 0 8px 24px rgba(11, 17, 32, .05);
  --sh-lift: 0 12px 34px rgba(11, 17, 32, .10);
  --sh-blue: 0 8px 24px rgba(47, 128, 255, .28);
  --sh-ring: 0 0 0 3px var(--blue-a15);  /* weicher Fokusring an Eingaben      */

  /* --- 12. Bewegung ---------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;                          /* Standarddauer                      */
  --dur-slow: 420ms;                     /* Overlay, Akkordeon                 */
  --dur-reveal: 620ms;                   /* Einblenden beim Scrollen           */

  /* --- 13. Ebenen (z-index) --------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;                         /* Inhalt ueber Hintergrund-Effekten  */
  --z-sticky: 100;                       /* klebende Teilelemente              */
  --z-overlay: 200;                      /* mobiles Menue                      */
  --z-header: 300;                       /* Website-Header, ueber dem Menue    */
  --z-skip: 400;                         /* Skip-Link, immer ganz oben         */
}