/* ============================================================
   THAEVEN Buchungssystem — DESIGN-SYSTEM (Tokens + Basis-Primitives)
   ------------------------------------------------------------
   Stil-Welt: dark/platin, cinematic — JETZT mit Cyan-Akzent
   (wie THAEVEN KI-Assistent) + Dark/Light-Theme-System.

   Zwei Token-Sets:
     :root,[data-theme="dark"]  = Default (Marken-Welt: dark + Cyan)
     [data-theme="light"]       = überschreibt NUR Farb-/Glow-Tokens

   Akzent-Ableitungen IMMER aus --accent-rgb (eine Quelle), damit
   der Theme-Wechsel automatisch greift.
   ============================================================ */

:root, [data-theme="dark"]{
  /* ============================================================
     DARK-MODE (Default = Marken-Welt: dark/platin + Cyan-Akzent)
     ============================================================ */

  /* ---- FLÄCHEN / TEXT (Ink-Grund, platin) ---- */
  --bg:      #08080A;                       /* Ink-Grund */
  --bg-2:    #0E0E12;                        /* erhöhte Fläche / Karte */
  --ink:     #F4F4F2;                        /* Text auf dunkel */
  --muted:   rgba(244,244,242,.46);          /* sekundärer Text */
  --line:    rgba(244,244,242,.10);          /* Hairlines / Rahmen */

  /* ---- AKZENT (CYAN/TÜRKIS — Theos leuchtende Augen) ----
     Dezent-edel, kein Neon: leuchtendes Cyan auf Ink. Die platin/weiße
     Grundstimmung bleibt; Cyan ist der Akzent (Eyebrows, Links, CTA-Glow,
     Highlights, aktive Nav). Alle Cyan-Tints leiten sich hieraus ab. */
  --accent:        #45D6E8;                       /* Marken-Cyan (Dark) */
  --accent-2:      #7FE6F2;                       /* helleres Cyan (Gradient-Top, Highlights) */
  --accent-deep:   #2BB6C8;                       /* tieferes Cyan (Gradient-Boden, Hover) */
  --glow:          rgba(69,214,232,.85);          /* Cyan-Glow (Dots/Cores) */
  --accent-rgb:    69,214,232;                     /* für rgba()-Ableitungen (eine Quelle) */
  --ease:    cubic-bezier(.7,0,.2,1);        /* Signatur-Easing der Marke */

  /* ---- ABGELEITETE SEMANTISCHE FARB-TOKENS ---- */
  --bg-3:        #131318;                     /* Karte „erhabener" (Preis-Karte/Input) */
  --ink-2:       rgba(244,244,242,.72);       /* Fließtext (zwischen ink & muted) */
  --line-strong: rgba(244,244,242,.18);       /* aktiver Rahmen / Fokus-Hairline */

  /* Cyan-Tints (Flächen/Ränder) — aus --accent-rgb abgeleitet, eine Quelle */
  --accent-soft:   rgba(var(--accent-rgb), .12);   /* Akzent-Fläche dezent (Icon-Kachel/Pill/Badge) */
  --accent-line:   rgba(var(--accent-rgb), .28);   /* Akzent-Rahmen (Icon-Kachel, Status-Pill) */
  --accent-line-2: rgba(var(--accent-rgb), .45);   /* stärkerer Akzent-Rahmen (Hover/Slot-hot) */
  --accent-hover:  rgba(var(--accent-rgb), .08);   /* Akzent-Fläche on hover (Ghost-Button) */
  --accent-ink:    #04181C;                        /* Text AUF Akzent-Flächen (dunkles Teal-Schwarz) */

  /* Akzent-Verlauf für gefüllte Akzent-Flächen (Primary-Button, Num-Badges, Preis-Zahl)
     — Cyan statt Weiß→Platin, damit die Seite Farbe bekommt. */
  --accent-grad:   linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);

  --scrim:       rgba(8,8,10,.72);            /* Lese-Scrim über bewegtem Bild */
  --gift-gold:   #E7C994;                      /* warmer Platin-Stich (sparsam) */

  /* Hero-Akzent-Textverlauf (Headline-Highlight) — weiß→Cyan */
  --accent-text-grad: linear-gradient(180deg, #FFFFFF 0%, var(--accent) 92%);
  --hero-aura:   rgba(var(--accent-rgb), .15);     /* Hero-Aura-Glow (an Bühne gekoppelt) */
  --hero-aura-2: rgba(var(--accent-rgb), .05);     /* Aura-Auslauf */

  /* Liquid-Glass (Live-Tagesplan-Karte) — Boden/Füllung/Tint aus Tokens */
  --glass-base:   rgba(8,8,10,.55);          /* Glass Boden */
  --glass-fill:   rgba(14,14,18,.66);        /* Glass Grundfüllung */
  --glass-sheen:  rgba(var(--accent-rgb), .05);   /* oberer Glass-Sheen (Cyan-Hauch) */
  --glass-halo:   rgba(var(--accent-rgb), .16);   /* Glass-Halo (radial oben) */
  --panel-tint:   rgba(8,8,10,.35);          /* dunkler Tint in Glass-Leisten (Kopf) */
  --panel-tint-2: rgba(8,8,10,.30);          /* dunkler Tint (Fuß) */
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.06); /* obere Lichtkante */

  /* Logo-Filter: Dark = weißes Mark unverändert sichtbar. */
  --logo-filter: none;
  --btn-ghost-bg: rgba(244,244,242,.03);     /* Ghost-Button Grundfläche (neutral, dezent) */
  --header-bg:    rgba(8,8,10,.72);          /* angedockter Header */
  --header-bg-2:  rgba(8,8,10,.92);          /* mobiles Nav-Panel (deckender) */
  --chip-bg:      rgba(244,244,242,.03);     /* Branchen-Tag/Chip-Grundfläche */

  /* Fehler/Danger (Formular) — auf Dunkel hell genug */
  --danger:       #E7A4A4;
  --danger-2:     #F0C9C9;
  --danger-line:  rgba(231,164,164,.5);
  --danger-soft:  rgba(231,164,164,.06);

  /* Atmosphäre-Hintergrund des Body (radiale Glows) */
  --body-grad-1: rgba(var(--accent-rgb), .055);
  --body-grad-2: rgba(150,180,205,.05);

  /* ---- EASING-KURVEN ---- */
  --ease-brand:  cubic-bezier(.7,0,.2,1);     /* = Mutter --ease (Reveals, Slides) */
  --ease-out:    cubic-bezier(.16,1,.3,1);    /* sanftes Auslaufen (Hover, kleine UI) */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);/* leichter Overshoot (Pill „rastet ein") */

  /* ---- TYPO ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; /* Preise, %, Tab-Zahlen */

  /* Fluide Type-Scale (clamp, mobil→3440 deckt). Display eng & schwer. */
  --fs-display: clamp(2.6rem, 1.4rem + 5.4vw, 6.2rem);   /* Hero-H1 */
  --fs-h2:      clamp(1.9rem, 1.2rem + 2.9vw, 3.4rem);   /* Sektions-H2 */
  --fs-h3:      clamp(1.2rem, 1.0rem + 0.9vw, 1.6rem);   /* Karten-Titel */
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); /* Intro-/Sub-Text */
  --fs-body:    clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);/* Fließtext */
  --fs-small:   clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);/* Microcopy */
  --fs-eyebrow: clamp(0.7rem, 0.68rem + 0.1vw, 0.78rem); /* Kicker (gesperrt) */
  --fs-price:   clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);   /* große Preis-Zahl */

  --lh-tight:   1.04;   /* Display */
  --lh-snug:    1.18;   /* H2/H3 */
  --lh-body:    1.62;   /* Fließtext (luftig, Lesbarkeit) */
  --track-tight:-0.02em;/* Display: enges, teures Tracking */
  --track-wide: 0.34em; /* Eyebrow/Phase: gesperrt wie Mutter-Loader */

  /* ---- SPACING-SCALE (8er-Basis, fluide Sektions-Schritte) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem);   /* vertikaler Sektions-Rhythmus */
  --gutter:     clamp(1.25rem, 0.8rem + 2.4vw, 3rem); /* horizontaler Seitenrand */

  /* ---- CONTAINER-STUFEN (Wide-Guard: koppeln, nicht strecken) ---- */
  --wrap-narrow: 720px;    /* Lese-Spalten */
  --wrap:        1200px;   /* Standard-Inhaltsbreite */
  --wrap-wide:   1440px;   /* Hero / breite Grids */
  --wrap-ultra:  1680px;   /* eigene Stufe ab ~2560/3440 (kein 1440-Strecken) */

  /* ---- RADIUS ---- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- SCHATTEN / GLOW-STUFEN ---- */
  --sh-1: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
  --sh-2: 0 2px 0 rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.5);
  --sh-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.55);
  --glow-1: 0 0 18px rgba(var(--accent-rgb),.20);
  --glow-2: 0 0 0 1px rgba(var(--accent-rgb),.18), 0 0 34px rgba(var(--accent-rgb),.24);

  /* ---- HEADER-HÖHE = schlanker dunkler Menü-/Blur-Balken ---- */
  --header-h: 76px;
  --logo-mark-h: 38px;       /* Höhe der Bildmarke (Säulen-Symbol) im Lockup */
  --logo-wm-name-h: 17px;    /* Höhe Wortmarke „THAEVEN" (echte Serifenschrift) */
  --logo-wm-web-h: 9px;      /* Höhe Wortmarke „<web/>" */

  /* ---- MOTION-DAUERN ---- */
  --d-fast: .28s; --d-mid: .5s; --d-slow: .8s;
}

/* ============================================================
   LIGHT-MODE — überschreibt NUR die Farb-/Glow-Tokens.
   Spacing/Type/Radius/Motion bleiben (kommen aus :root).
   Helle, warm-neutrale Basis + Light-taugliche Cyan-Variante
   (tieferes Teal, damit es auf Hell lesbar & WCAG-tauglich ist).
   Glows/Schatten dezenter; Glass auf Hell ein helles Milchglas.
   ============================================================ */
[data-theme="light"]{
  /* ---- FLÄCHEN / TEXT ---- */
  --bg:      #F4F5F7;                        /* warm-neutrale, helle Basis */
  --bg-2:    #FFFFFF;                         /* Panel/Karte (rein weiß) */
  --bg-3:    #FBFCFD;                         /* erhabene Karte (Preis/Input) */
  --ink:     #0E1116;                         /* Haupttext (dunkel) */
  --muted:   rgba(14,17,22,.52);              /* sekundärer Text */
  --ink-2:   rgba(14,17,22,.74);              /* Fließtext */
  --line:        rgba(14,17,22,.12);          /* Hairlines / Rahmen */
  --line-strong: rgba(14,17,22,.22);          /* aktiver Rahmen / Fokus-Hairline */

  /* ---- AKZENT (Light-Cyan: tieferes Teal für Kontrast auf Hell, WCAG-AA) ----
     #0B7C8A trägt Text auf #F4F5F7 mit 4.5:1 (Normaltext) und Weiß-auf-Akzent
     mit 4.9:1 (Button) — beides AA. Ein lebendiges, edles Teal, kein Grau. */
  --accent:        #0B7C8A;                       /* lesbares Teal auf Hell (Text/Links/Eyebrow) */
  --accent-2:      #0E96A8;                       /* helleres Teal (Gradient-Top, dezente Highlights) */
  --accent-deep:   #086470;                       /* tieferes Teal (Gradient-Boden/Hover) */
  --glow:          rgba(11,124,138,.50);          /* dezenterer Teal-Glow */
  --accent-rgb:    11,124,138;                     /* Light-Teal rgb für Ableitungen */

  /* Cyan-Tints — auf Hell etwas kräftiger nötig, damit sie sichtbar bleiben */
  --accent-soft:   rgba(var(--accent-rgb), .10);
  --accent-line:   rgba(var(--accent-rgb), .30);
  --accent-line-2: rgba(var(--accent-rgb), .42);
  --accent-hover:  rgba(var(--accent-rgb), .10);
  --accent-ink:    #FFFFFF;                        /* Text AUF gefülltem Teal = weiß */

  /* Button-Verlauf auf Hell: enger gehalten (Akzent → tiefer), damit Weiß
     über die GANZE Fläche ≥4.5:1 trägt (auch oben). */
  --accent-grad:   linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  /* Hero-Akzent-Text auf Hell: tiefes Teal → Akzent (6.3:1 / 4.5:1). */
  --accent-text-grad: linear-gradient(180deg, var(--accent-deep) 0%, var(--accent) 92%);
  --hero-aura:   rgba(var(--accent-rgb), .10);
  --hero-aura-2: rgba(var(--accent-rgb), .04);

  --scrim:       rgba(244,245,247,.72);

  /* Liquid-Glass auf Hell: helles Milchglas (nicht dunkel), dezenter Halo */
  --glass-base:   rgba(255,255,255,.55);
  --glass-fill:   rgba(255,255,255,.74);
  --glass-sheen:  rgba(var(--accent-rgb), .05);
  --glass-halo:   rgba(var(--accent-rgb), .12);
  --panel-tint:   rgba(244,245,247,.55);
  --panel-tint-2: rgba(244,245,247,.50);
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.8);

  --gift-gold:   #9A7430;

  /* Logo: weißes Mark → im Light dunkel einfärben (invert + leichte Tonkorrektur). */
  --logo-filter: invert(1) brightness(.18) saturate(0);
  --btn-ghost-bg: rgba(14,17,22,.025);       /* Ghost-Button Grundfläche auf Hell */
  --header-bg:    rgba(255,255,255,.78);     /* angedockter Header auf Hell */
  --header-bg-2:  rgba(255,255,255,.94);     /* mobiles Nav-Panel auf Hell */
  --chip-bg:      rgba(14,17,22,.03);        /* Chip-Grundfläche auf Hell */

  /* Fehler/Danger — auf Hell dunkler/lesbar */
  --danger:       #B23B3B;
  --danger-2:     #B23B3B;
  --danger-line:  rgba(178,59,59,.45);
  --danger-soft:  rgba(178,59,59,.06);

  /* ---- SCHATTEN / GLOW (im Light dezenter, nicht „leuchtend") ---- */
  --sh-1: 0 1px 2px rgba(14,17,22,.05), 0 8px 22px rgba(14,17,22,.07);
  --sh-2: 0 2px 4px rgba(14,17,22,.06), 0 18px 44px rgba(14,17,22,.10);
  --sh-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px rgba(14,17,22,.08);
  --glow-1: 0 0 14px rgba(var(--accent-rgb), .14);
  --glow-2: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 6px 22px rgba(var(--accent-rgb), .16);

  --body-grad-1: rgba(var(--accent-rgb), .05);
  --body-grad-2: rgba(120,150,175,.05);
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }

html{
  /* Sticky/Smooth-Scroll-Schutz: clip (NICHT hidden), nur auf html. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto; /* Smooth übernimmt Lenis; native Anker bleiben aus */
}

body{
  /* Atmosphäre wie Mutter, jetzt mit Cyan-Stich (Dark) bzw. dezent (Light) */
  background:
    radial-gradient(60% 50% at 50% -2%, var(--body-grad-1), transparent 60%),
    radial-gradient(55% 60% at 82% 102%, var(--body-grad-2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100%;
  transition: background-color var(--d-mid) var(--ease-out), color var(--d-mid) var(--ease-out);
}

img, svg, video, canvas{ display:block; max-width:100%; }
.media-cover{ width:100%; height:100%; object-fit:cover; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }

/* ============================================================
   LAYOUT-PRIMITIVES
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:var(--wrap-narrow); }
.wrap--wide{   max-width:var(--wrap-wide); }
.wrap--ultra{  max-width:var(--wrap-ultra); }

.section{ padding-block:var(--sp-section); position:relative; }

.hairline{ border:0; height:1px; background:var(--line); }

/* ============================================================
   TYPO-SKALA (Primitives — keine globale h1/h2/h3-FARBE setzen!)
   ============================================================ */
.eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.display{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  font-weight:680;
  text-wrap:balance;
}
.h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-snug);
  letter-spacing:-0.015em;
  font-weight:640;
  text-wrap:balance;
}
.h3{
  font-size:var(--fs-h3);
  line-height:var(--lh-snug);
  letter-spacing:-0.01em;
  font-weight:600;
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--ink-2);
  text-wrap:pretty;
  max-width:62ch;
}
.body{ font-size:var(--fs-body); color:var(--ink-2); }
.muted{ color:var(--muted); }
.small{ font-size:var(--fs-small); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.04em; }

/* ============================================================
   BUTTON-SYSTEM (Marken-Look: Pill, Hairline, Cyan-Glow on hover)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:var(--fs-small);
  letter-spacing:.06em;
  font-weight:600;
  padding:.95em 1.6em;
  border-radius:var(--r-pill);
  color:var(--ink);
  background:var(--btn-ghost-bg);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
  will-change:transform;
}
.btn:hover{
  background:var(--accent-hover);
  border-color:var(--accent-line-2);
  box-shadow:var(--glow-2);
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  color:var(--accent-ink);
  background:var(--accent-grad);
  border-color:transparent;
  box-shadow:var(--glow-1);
}
.btn--primary:hover{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent-deep) 100%);
  box-shadow:var(--glow-2);
  transform:translateY(-1px);
}

.btn--lg{ padding:1.1em 2em; font-size:var(--fs-body); }

.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--glow);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} }

/* ============================================================
   REVEAL-UTILITY (.rv)
   ============================================================ */
.rv{
  opacity:0;
  transform:translateY(22px);
  transition: opacity var(--d-slow) var(--ease-brand),
              transform var(--d-slow) var(--ease-brand);
  will-change:opacity, transform;
}
.rv.is-in{ opacity:1; transform:none; }
.rv--stagger{ transition-delay: calc(var(--rv-i, 0) * 90ms); }
.rv--left{  transform:translateX(-28px); }
.rv--right{ transform:translateX(28px); }
.rv--left.is-in, .rv--right.is-in{ transform:none; }
.rv--scale{ transform:scale(.96); }
.rv--scale.is-in{ transform:none; }

.grain{ position:relative; isolation:isolate; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.15s !important; scroll-behavior:auto !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .dot{ animation:none !important; }
}