/* ============================================================
   goldenroom yoga | Tokens — QUALITY-VARIANTE
   Farbwelt, Typografie-Rollen, Spacing-/Type-Scale, Z-Ebenen.
   Keine Selektoren hier, nur Custom Properties.

   Diese Datei ist die 15.09.2026 überarbeitete Palette/Typografie für
   die separate "Goldenroom Yoga Quality"-Kopie (auf Wunsch: freie Wahl
   bei Texten/Header/Farben, Hauptsache "spürbar hochwertiger als
   Kontrast zur aktuellen Website" – Gold muss vorkommen, sonst freie
   Hand). Variablennamen bleiben identisch zum Original, damit
   components.css/base.css unverändert funktionieren – nur die WERTE
   sind neu. Die Original-Site (Ordner "Goldenroom Yoga") bleibt
   unangetastet.
   ============================================================ */

:root {
  /* Farbwelt – vertiefte, "antike" Gold-Note statt des vorherigen
     flachen Senfgelbs, dazu eine echte dreistufige Gold-Rampe (die
     Original-Site hatte hier bewusst "Testmodus": alle drei Stufen auf
     denselben Wert gesetzt). --gold-700 ist die Stufe, die als
     Schriftfarbe auf --cream läuft (Überschriften, Mono-Labels) – dunkel
     genug für echten Kontrast auf großem Text. */
  --gold-500: #C79A4B;   /* Grundton: Linien, Rahmen, Rules, Deko */
  --gold-600: #AD7F3A;   /* Zwischenstufe: Hover-Zustände, sekundäre Akzente */
  --gold-700: #93672C;   /* dunkelste Stufe: Überschriften-/Label-Text auf Cream */
  --gold-soft: #E9D6AC;  /* helle Gold-Lasur für Flächen-Tints/Hover-Washes */

  --graubraun: #6E6259;  /* warmes Taupe-Braun, Fließtext auf --cream */
  --cream: #FBF7F1;      /* Hintergrund: warmes Off-White */
  --greige: #EFE6D8;     /* zweite, etwas kräftigere Fläche für Section-Wechsel */

  /* Umgedrehtes Gold: dunkle Schrift auf voller Gold-Fläche (Buttons) –
     sehr dunkles Espresso-Braun statt Schwarz, bleibt warm. */
  --ink-on-gold: #26190D;
  --taupe-dark: #372A1E;  /* dunkler Sektionshintergrund (Mobile-Menü) */
  /* --taupe (19.09.2026, auf Wunsch: "Footer bei der Mobile-Ansicht
     nicht so dunkel, wirkt zu aggressiv"): genau zwischen --taupe-dark
     und --graubraun gemischt. Bewusst kein Sprung auf eine helle
     Fläche (--greige/--cream) – das Footer-Logo (footer-logo-crop.png)
     ist eine sehr helle, blasse Version des "YOGA"-Schriftzugs, extra
     fürs Lesen auf dunklem Grund gemacht, auf Hell wäre sie praktisch
     unsichtbar. Bei diesem Mischton bleiben alle Footer-Textfarben
     inkl. der goldenen Spalten-Labels noch über der 3:1-Kontrastgrenze
     (WCAG AA für großen Text/UI), nur insgesamt spürbar weicher als
     --taupe-dark. Nur mobil verwendet, siehe .site-footer. */
  --taupe: #55493E;
  --footer-grau: #5C554E; /* Footer, angelehnt an das Menü-Grau (05.10.2026) */

  --white: #FFFFFF;
  --rose: #A97764;
  --ink: #241B14;
  --espresso: #211610;    /* tiefstes Dunkel: Footer, Signature-Section */

  /* Zusätzliche Akzentfarbe: gedecktes Moos-Grün statt des vorherigen
     helleren Olivs – ruhiger, passt besser zur insgesamt vertieften
     Palette. Aktuell wie im Original ungenutzt, bleibt als Reserve für
     Badges/Akzentflächen erhalten. */
  --olive: #6E7952;
  --olive-soft: #A3AD81;

  /* Weiche, gedeckte Terracotta-Note – ein Hauch wärmer/rosiger als
     reines Braun, bewusst gedeckt statt eines satten Orange-Terracotta
     (das würde zu sehr nach Standard-Web-Akzent aussehen). */
  --clay-soft: #CD9A76;

  /* Semantische Alias-Schicht für die Section-Hintergrund-Abwechslung. */
  --surface-a: var(--cream);
  --surface-b: var(--greige);

  /* Schrift-Rollen – 23.09.2026 zunächst komplett auf Oswald umgestellt
     (siehe Git-Historie), direkt danach (2. Runde, auf Wunsch: "für die
     Überschriften diese alte Schriftart, die etwas geschwungener ist")
     --font-display wieder auf Instrument Serif zurück – nur die
     Überschriften-Rolle, --font-body/--font-mono (Fließtext, Buttons,
     Nav, Labels) bleiben bei Oswald, das war ausdrücklich gewünscht.
     Ergebnis: klassische Zweier-Kombination, editoriale Serife für
     Headlines + kondensierte Grotesk für alles andere. */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* Überschriften, Zitate, große Zahlen */
  --font-body: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fließtext, Nav, Buttons, Formulare */
  --font-mono: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Utility-Labels, Footer-Headings, Meta – klein, fett, tracked */
  /* --font-script bewusst unverändert – bleibt Instrument Serif kursiv
     für Hero-Kicker/Motto-Reveal, Alex Brush bleibt separat für
     .leitsatz__text. */
  --font-script: 'Instrument Serif', Georgia, serif; /* Schreibschrift-Ersatz – IMMER mit font-style:italic kombiniert, siehe components.css */
  /* --font-flourish (19.09.2026, auf Wunsch): einzelner, bewusst
     seltener Rückgriff auf eine echte Handschrift statt der kursiven
     Instrument-Serif-Ersatzlösung oben – nur für Stellen, die
     ausdrücklich wie die goldene Logo-Unterschrift wirken sollen
     (aktuell nur .leitsatz__text, siehe components.css). Kein
     font-style:italic nötig, siehe fonts/fonts.css. */
  --font-flourish: 'Alex Brush', cursive;

  /* Type-Scale – Überschriften in Groß-/Kleinschreibung (statt der
     vorherigen Versalien) brauchen etwas mehr Fläche, um dieselbe
     Präsenz wie zuvor zu erreichen, daher leicht angehoben. */
  --step-titel: clamp(2.3rem, 3.9vw, 3.75rem);
  /* Eigene, größere Stufe nur für Unterseiten-Haupttitel
     (.page-intro__title) – 23.09.2026 ergänzt, auf Wunsch: Section-
     Überschriften (h2, --step-titel) sollen alle gleich groß bleiben,
     Unterseiten-Titel (h1) sollen sich davon klar abheben und größer
     wirken. */
  --step-page-title: clamp(2.6rem, 5.6vw, 4.6rem);
  --step-lead: clamp(1.2rem, 1.45vw, 1.4rem);
  --step-card-title: 1.25rem;

  /* Layout-Konstanten */
  --container-max: 1440px;
  --space-section-y: clamp(6rem, 16vh, 11rem);
  --space-section-x: clamp(1.6rem, 5vw, 4rem);
  --radius-pill: 999px;
  --logo-size: 124px;
  --logo-img-size: 180px;

  /* Burger-Button (.site-header__burger) */
  --burger-pad: 0.5rem;
  --burger-span-w: 22px;
  --burger-span-h: 2px;
  --burger-gap: 5px;

  /* Z-Ebenen */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-sticky: 10;
}

@media (min-width: 901px) {
  :root {
    --burger-pad: 0.65rem;
    --burger-span-w: 32px;
    --burger-span-h: 3px;
    --burger-gap: 7px;
  }
}

/* Breakpoints (Referenz, keine Custom Properties möglich in Media Queries):
   1024px – Header/Nav wechselt auf mobiles Hamburger-Menü (Baustein 1)
   900px  – Sticky-Spalten (Baustein 5) und Sticky-Image (Baustein 4)
            stapeln sich, position: static statt sticky
   640px  – "echte" Handy-Breite: --space-section-y unten wird deutlich
            kleiner, siehe Kommentar dort */

@media (max-width: 640px) {
  :root {
    --space-section-y: clamp(2.5rem, 9vw, 4rem);
    /* --greige nur auf Handy sanfter (28.09.2026, auf Wunsch: "die
       beiden Hintergrundfarben passen nicht so gut zusammen" – Kathrin
       fand den Sprung zwischen --cream (#FBF7F1, sehr helles Off-White)
       und --greige (vorher #EFE6D8, deutlich gelbstichiger/kräftiger)
       zu groß, wirkte eher wie Weiß-vs-Beige als wie zwei Abstufungen
       derselben Beige-Familie). Näher an --cream herangerückt, bleibt
       aber als zweite Fläche für den Section-Wechsel klar erkennbar.
       Desktop bewusst unverändert (nicht gefragt). */
    --greige: #F3EEE3;
  }
}

/* Die frühere Handy-only-Sonderregel (21.09.2026: --font-body/--font-mono
   auf ≤900px separat auf Bebas Neue gesetzt) ist mit der Umstellung auf
   Oswald oben (23.09.2026, einheitlich Desktop+Handy) hinfällig und
   entfernt – Bebas Neue hatte ohnehin keine echten Kleinbuchstaben,
   genau das Problem, das der ganze Schriftwechsel lösen soll. */