/* ============================================================================
   DESIGN-TOKENS – Enzi Goldbeck Digital
   ----------------------------------------------------------------------------
   Einziger Ort für Farbe, Typo, Radius, Abstand, Motion. Kein Wert wird
   irgendwo anders hart notiert. Wer die Marke anfassen will, fasst diese Datei
   an – sonst nichts.

   FARBSYSTEM (bewusst nur 4 Grundwerte):
     #FFFFFF  Weiß          – Fläche hell
     #141414  Warmes Schwarz– Text & Fläche dunkel
     #FFC800  Gelb          – AKZENT, niemals Fläche
     #6B6B6B  Neutralgrau   – Sekundärtext & Linien

   REGEL ZU GELB (WCAG): Gelb auf Weiß erreicht 1,55:1 und ist damit als
   Textfarbe im Hellmodus unbrauchbar (AA verlangt 4,5:1). Gelb wird deshalb
   ausschließlich als FLÄCHE UNTER schwarzem Text (12,9:1 – exzellent) oder als
   rein grafisches Element (Balken, Marker, Rahmen) eingesetzt. Schwarzer Text
   auf Gelb ist die einzige erlaubte Gelb-Text-Kombination im Hellmodus.
   Im Dunkelmodus erreicht Gelb auf #141414 12,0:1 und darf dort auch Text sein –
   wir nutzen das trotzdem nur sparsam, damit beide Modi gleich aussehen.

   NEUTRALGRAU: #6B6B6B auf Weiß = 5,3:1 (AA ✓). Auf #141414 wäre derselbe Grau
   nur 2,6:1 (AA ✗). Der Dunkelmodus hellt Sekundärtext deshalb auf #A3A3A3 auf
   (7,5:1) – gleiche Rolle im System, anderer Wert. Das ist Absicht, kein Bruch.
============================================================================ */

/* ---------------------------------------------------------------------------
   Schriften – lokal eingebunden, kein Google-CDN.
   Rechtlich (DSGVO): Google Fonts vom CDN überträgt die IP der Besucher in die
   USA und war bereits Gegenstand von Abmahnungen. Für eine Agentur, die
   Websites verkauft, wäre das ein Eigentor – deshalb liegen beide Schriften
   als woff2 im Projekt und werden von der eigenen Domain ausgeliefert.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- Farben: Hellmodus (Standard) --- */
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #ebebeb;

  /* Invers-Paar für bewusst dunkle Blöcke im Hellmodus (z. B. Empfehlungs-Paket).
     Dreht sich im Dunkelmodus automatisch mit, weil es aus --text/--bg abgeleitet ist. */
  --surface-invert: #141414;
  --text-invert: #ffffff;
  --text-invert-muted: #a3a3a3;

  --text: #141414;
  --text-muted: #6b6b6b;

  --border: rgba(20, 20, 20, 0.14);
  --border-strong: rgba(20, 20, 20, 0.34);
  --border-invert: rgba(255, 255, 255, 0.18);

  --accent: #ffc800;
  --accent-hover: #e6b400;
  --accent-ink: #141414; /* Textfarbe AUF Gelb – immer Schwarz, in beiden Modi */
  --accent-soft: rgba(255, 200, 0, 0.16); /* nur für großflächig-dezente Tönung */

  --error: #b3261e;
  --error-soft: rgba(179, 38, 30, 0.1);

  /* --- Schwebende Sticky-Nav (Zustand 2 beim Scrollen) ---
     Zustand 1 (ganz oben, ungescrollt) bleibt unverändert transparent – diese
     Werte gelten ausschließlich für .site-header.is-scrolled. Bewusst an
     --bg gekoppelt (nicht fest wie beim Footer), damit die Leiste im
     Dunkelmodus dunkel bleibt statt als weißer Fremdkörper aufzublitzen.
     Alles hier anpassen, um Größe/Abstand/Rundung/Schatten/Timing der
     schwebenden Leiste zu justieren. Den Scroll-Schwellenwert (px, ab wann
     Zustand 2 greift) stellt man in main.js ein (SCROLL_ENTER/SCROLL_EXIT). */
  --nav-float-top: 16px; /* Abstand zum oberen Bildschirmrand */
  --nav-float-side: 24px; /* Abstand links/rechts zum Bildschirmrand */
  --nav-float-max-width: 1320px; /* deckelt die Breite auf sehr breiten Screens */
  --nav-float-radius: 28px; /* groß, aber bewusst kein Voll-Pill-Radius */
  --nav-float-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --nav-float-blur: 16px;
  --nav-float-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  --nav-transition-dur: 0.35s;

  /* --- Footer: fest schwarz ---
     Bewusst NICHT aus --surface-invert abgeleitet: dieses Paar dreht sich in
     KEINEM Modus um, damit der Footer in Hell- und Dunkelmodus identisch
     schwarz bleibt (wird deshalb auch nicht im Dark-Mode-Block überschrieben). */
  --footer-bg: #141414;
  --footer-text: #ffffff;
  --footer-text-muted: #a3a3a3;
  --footer-border: rgba(255, 255, 255, 0.16);

  /* Placeholder-Ton fürs Chat-Eingabefeld im Hero: heller/transparenter als
     --text-muted, damit der getippte Text eindeutig als Platzhalter statt
     als eingegebener Wert wirkt. */
  --chat-placeholder: rgba(20, 20, 20, 0.35);

  /* Schatten bewusst neutral-grau statt farbig: ein farbiger Glow würde die
     strenge 4-Farben-Logik aufweichen und billig wirken. */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 10px 24px -12px rgba(20, 20, 20, 0.22), 0 2px 6px -2px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 24px 56px -24px rgba(20, 20, 20, 0.3), 0 4px 12px -4px rgba(20, 20, 20, 0.1);

  /* Logo */
  --logo-plate: #141414;
  --logo-letter: #ffffff;
  --logo-accent: #ffc800;
  --logo-ring: transparent;

  /* --- Typografie ---
     Space Grotesk = Display: geometrisches Grundgerüst mit eigenwilligen
     Details (G, R, a, k). Trägt Charakter, ohne verspielt zu sein.
     Inter = Fließtext: maximal ruhig und bildschirmoptimiert. Charakter gehört
     in die Headline, Lesbarkeit in den Absatz. */
  --font-display: "Space Grotesk", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.15rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-3xl: clamp(2.4rem, 1.7rem + 3vw, 3.9rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.65;
  --tracking-display: -0.025em;
  --tracking-caps: 0.14em;

  /* --- Radius: Squircle-Charakter ---
     Klein und definiert. Scharfe 0°-Kanten wirken technisch-kalt und
     abweisend, Vollrundung (pill) wirkt verspielt und billig. 10–26px auf
     großen Flächen liegt genau dazwischen: freundlich, aber gebaut. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px; /* ausschließlich für Mini-Elemente: Punkte, 3px-Striche */

  /* --- Abstände: 8px-Raster --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(20px, 5vw, 56px);
  --nav-h: 76px;

  /* --- Motion: kurz und sachlich. Lange, weiche Animationen wirken
     "Agentur-Show"; kurze, präzise wirken nach Werkzeug. --- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-reveal: 900ms;

  /* --- Ablauf-Karussell ---
     Ein Schritt im Fokus, Nachbarn peeken an den Rändern. Alles hier
     justierbar: --carousel-peek steuert, wie viel von den Nachbarkarten am
     Rand sichtbar ist (größerer Wert = schmalere Fokuskarte, mehr Peek).
     --carousel-dur/--carousel-ease bestimmen Tempo und Federung des
     Schrittwechsels, --carousel-onboard-bounce den Ausschlag des einmaligen
     Skip-Hinweises beim ersten Sichtbarwerden. */
  --carousel-peek: clamp(20px, 6vw, 72px);
  --carousel-gap: var(--space-5);
  --carousel-dur: 0.5s;
  --carousel-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --carousel-onboard-bounce: 12px;

  /* --- Leistungen: Expanding Spotlight Cards ---
     "Bibliotheksregal"-Effekt: Betrifft ausschließlich die 4 Karten in
     #leistungen auf der Startseite. Die gehoverte/fokussierte Karte wird
     deutlich größer, die direkten Nachbarn (d1) etwas kleiner, die
     übernächsten (d2) noch kleiner, die am weitesten entfernte (d3) am
     kleinsten – wie Bücher, die beim Vorbeifahren des Fingers aufklappen.
     --spotlight-grow-active: wie stark die aktive Karte wächst.
     --spotlight-grow-d1/-d2/-d3: wie stark die Nachbarn nach Distanz
     zurücktreten (1 = neutral, kleiner = schmaler).
     --spotlight-dim-d1/-d2/-d3: Abdunkelung (Opacity) nach Distanz.
     --spotlight-lift: Anheben der aktiven Karte in px.
     --spotlight-dur/-ease: Tempo und Federung des Wechsels. */
  --spotlight-grow-active: 3.2;
  --spotlight-grow-d1: 0.65;
  --spotlight-grow-d2: 0.42;
  --spotlight-grow-d3: 0.28;
  --spotlight-dim-d1: 0.8;
  --spotlight-dim-d2: 0.55;
  --spotlight-dim-d3: 0.35;
  --spotlight-lift: -10px;
  --spotlight-dur: 0.55s;
  --spotlight-ease: cubic-bezier(0.34, 1.8, 0.64, 1);
}

/* ---------------------------------------------------------------------------
   Dunkelmodus – automatisch über die Systemeinstellung.
   Schwarz wird Grund, Weiß wird Text, Gelb bleibt unverändert der Akzent.
--------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --bg-elevated: #181818;
    --surface: #1c1c1c;
    --surface-2: #242424;
    --surface-3: #2e2e2e;

    --surface-invert: #ffffff;
    --text-invert: #141414;
    --text-invert-muted: #6b6b6b;

    --text: #ffffff;
    --text-muted: #a3a3a3; /* aufgehellt: #6B6B6B erreicht auf Schwarz kein AA */

    --border: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.4);
    --border-invert: rgba(20, 20, 20, 0.18);

    --accent: #ffc800;
    --accent-hover: #ffd633; /* im Dunkeln wird Hover heller statt dunkler */
    --accent-ink: #141414;
    --accent-soft: rgba(255, 200, 0, 0.14);

    --error: #ff8a80;
    --error-soft: rgba(255, 138, 128, 0.12);

    --chat-placeholder: rgba(255, 255, 255, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 56px -24px rgba(0, 0, 0, 0.8), 0 4px 12px -4px rgba(0, 0, 0, 0.5);

    --nav-float-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    --logo-plate: #1f1f1f;
    --logo-letter: #ffffff;
    --logo-accent: #ffc800;
    --logo-ring: rgba(255, 255, 255, 0.16);
  }
}

/* ---------------------------------------------------------------------------
   Squircle – Progressive Enhancement.
   Browser mit `corner-shape` bekommen eine echte Superellipse statt eines
   Kreisbogens: der Übergang Kante→Ecke ist stetig, die Form wirkt "gefräst"
   statt "abgerundet". Alle anderen sehen den normalen border-radius und
   verlieren nichts.
--------------------------------------------------------------------------- */
@supports (corner-shape: superellipse(2)) {
  .card,
  .input,
  textarea.input,
  .photo-frame,
  .badge,
  .icon-badge,
  .step-number,
  .price-card,
  .nav-toggle,
  .logo-plate,
  .hero-chat,
  .modal,
  .modal-close,
  .process-slide {
    corner-shape: superellipse(2.6);
  }
}