/*
 * Design-Tokens – die einzige Quelle für Farbe, Typografie, Abstand, Form, Bewegung und Ebenen.
 * Regel für alle weiteren Stylesheets: ausschließlich var(--…), keine eigenen Hex- oder px-Werte
 * (Ausnahmen: 0, 1px-Haarlinien und Media-Query-Grenzen).
 */

:root {
  /* ---------- Farben: Flächen und Text ---------- */
  --c-bg: #0B0B0C;
  --c-surface: #141416;
  --c-surface-2: #1C1C1F;
  --c-line: rgba(243, 237, 226, .12);
  --c-line-strong: rgba(243, 237, 226, .40);
  --c-glass: rgba(20, 20, 22, .78);
  --c-glass-deep: rgba(11, 11, 12, .96);
  --c-text: #F3EDE2;
  --c-text-muted: rgba(243, 237, 226, .66);

  /* ---------- Farben: Gold und Holz ---------- */
  --c-gold: #C9A24D;
  --c-gold-light: #E3C77A;
  --c-gold-deep: #9A7429;
  --c-gold-bg: rgba(201, 162, 77, .12);
  --c-wood: #6B4A2B;

  /* ---------- Farben: Signale ---------- */
  --c-success: #3FA97A;
  --c-success-bg: rgba(63, 169, 122, .12);
  --c-warning: #D9A441;
  --c-warning-bg: rgba(217, 164, 65, .12);
  --c-danger: #D95C4A;
  /* Auf getoenter Flaeche reicht --c-danger nicht: gemessen 4.31:1 auf --c-surface. Diese
     hellere Stufe traegt Text auf --c-danger-bg und den Statusabzeichen (>= 6:1). */
  --c-danger-light: #E8836F;
  --c-danger-bg: rgba(217, 92, 74, .12);
  --c-info: #5B9BD5;
  --c-info-bg: rgba(91, 155, 213, .12);
  --c-wa: #25D366;
  --c-wa-hell: #3EE47F;

  /* ---------- Typografie ---------- */
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, .9rem + .7vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --fs-display: clamp(2.75rem, 6.4vw, 5.25rem);
  --fs-display-eng: clamp(2rem, 9vw, 2.75rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.62;
  --ls-tight: -.015em;
  --ls-wide: .18em;
  --ls-label: .12em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Abstand ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --section: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Form ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- Schatten und Glanz ---------- */
  --glow-gold: 0 0 0 1px rgba(201, 162, 77, .25), 0 20px 60px rgba(201, 162, 77, .12);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, .55);
  --shadow-card: 0 12px 34px rgba(0, 0, 0, .38);

  /* ---------- Bewegung ---------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;
  --t-scroll: 1.9s;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---------- Ebenen ---------- */
  --z-header: 100;
  --z-menu: 110;
  --z-modal: 200;
  --z-toast: 300;

  /* ---------- Maße ---------- */
  --container: 1240px;
  --container-narrow: 780px;
  --header-h: 76px;
  --tap-min: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --bar-h: 3px;
  --rule-w: 2px;
  --lift: 2px;
  --focus-w: 2px;
  --focus-offset: 3px;
  --blur-glass: 14px;
  --blur-menu: 22px;
  --logo-w: 168px;
  --logo-h: 44px;

  /* ---------- Hero: Schleier über dem Bild, Zoom, Zeilenmaske ---------- */
  --hero-h: 100svh;
  --hero-h-min: 600px;
  --hero-h-max: 980px;
  --c-schleier-weich: rgba(11, 11, 12, .42);
  --c-schleier-mittel: rgba(11, 11, 12, .60);
  --c-schleier-tief: rgba(11, 11, 12, .97);
  --c-schleier-seite: rgba(11, 11, 12, .84);
  --hero-zoom: 1.06;
  --zeile-versatz: 118%;
  --hero-max-text: 22ch;
  --maske-luft: .08em;

  /* ---------- Laufband ---------- */
  --marquee-dauer: 42s;
  --marquee-weg: -25%;
  --marquee-hoehe: 84px;
  --marquee-punkt: 6px;

  /* ---------- Sektionen: Leistungen, Galerie, Salon ---------- */
  --vorspann-max: 58ch;
  --karte-min: 300px;
  --galerie-spalten: 3;
  --salon-oben: calc(var(--header-h) + var(--s-10));
  --salon-versatz: 12%;

  /* ---------- Sektionen: Team, Bewertungen, Zeiten, FAQ, Abschluss ---------- */
  --team-min: 300px;
  --avatar-groesse: 120px;
  --leer-max: 36ch;
  --folien-breite: 300px;
  --punkt: 8px;
  --punkt-aktiv: 22px;
  --zeiten-min: 300px;
  --cta-titel-max: 18ch;
  --deckkraft-aus: .4;

  /* ---------- Zeigerspiele: Neigung, Lichtkegel, Magnet ---------- */
  --tilt-tiefe: 900px;
  --tilt-max: 5deg;
  --licht-radius: 260px;
  --magnet-weg: 6px;

  /* ---------- Lichtbox ---------- */
  --lichtbox-breite: 1100px;
  --lichtbox-hoehe: 72svh;
  --c-lichtbox-grund: rgba(11, 11, 12, .92);

  /* ---------- Dekor: Hexagon-Raster (Anspielung auf die LED-Decke) ---------- */
  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23C9A24D' fill-opacity='.85' fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81V33.5zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
  --hex-size: 72px;
  --hex-deckkraft: .12;
}