/* ══════════════════════════════════════════════════
   CAGE QUESTS — Design Tokens
   Einzige Quelle der Wahrheit für alle CSS Custom Properties.
   ══════════════════════════════════════════════════ */

/* ── Font Face ─────────────────────────────────── */
@font-face {
    font-family: 'Formular';
    src: url('../assets/fonts/formular-v2/Formular-Light.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Formular';
    src: url('../assets/fonts/formular-v2/Formular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Formular';
    src: url('../assets/fonts/formular-v2/Formular-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Formular';
    src: url('../assets/fonts/formular-v2/Formular-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════
   FARBROLLEN — Gold (primaer) und Gold-Light (sekundaer)
   ══════════════════════════════════════════════════

   Die Marke hat EINE Akzentfarbe in zwei Abstufungen, mit klarer
   Rollenverteilung. Verteilung im Code: Gold 97%, Sekundaer-Ton 3%.
   (Bis 21.08.2026 war der zweite Ton Teal — systemfremd, siehe unten.)

   GOLD  (#B29474)  PRIMAER / MARKE / STABILITAET
   ─────────────────────────────────────────────────
   Einsatz:
     - Alle Haupt-CTAs (Jetzt buchen, Gutschein kaufen)
     - Headline-Akzente (<span class="cq-headline-gold">)
     - Gold-Linien (.cq-gold-line), Trenner, Corner-Markierungen
     - Rating-Sterne, Proof-Grid
     - Step-Nummern in nummerierten Listen (ausser Schritt 2)
     - Brand-Typography-Akzente

   SEKUNDAER  (--gold-light, #C8A886)  RHYTHMUS / LEBENDIGKEIT
   ──────────────────────────────────────────────────────────────
   Einsatz (bewusst sparsam fuer Rhythmus-Wirkung):
     - Schritt 2 in nummerierten Listen (.cq-step:nth-child(2))
     - Live-Indikatoren (pulsierende Dots, Live-Labels)
     - Stat-Highlights auf Standort-Hero (Rooms-Count)
     - Firmen-Event-Hover-States (border-color)
     - Uppercase-Labels an 4 spezifischen Event-Sections

   DAUMENREGEL
   ───────────
   Im Zweifel GOLD. Der Sekundaer-Ton nur, wenn die Abstufung ein
   bewusstes Stilmittel ist (Rhythmus, Aufmerksamkeit). Eine dritte Farbe
   kommt nicht dazu — das Design-System kennt Schwarz, Weiss und Gold.

   Neue Code-Stellen: bitte die semantischen Aliase unten verwenden
   (--brand, --highlight) statt --gold / --accent direkt — so bleibt
   die Intention ablesbar.
   ══════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────── */
:root {
    /* Depth System */
    --black: #000000;
    --surface: #0A0A0A;
    --elevated: #111111;
    --white: #ffffff;

    /* Gold Accent — PRIMAER / Marke */
    --gold: #B29474;
    --gold-light: #C8A886;
    --gold-dark: #9B7E62;

    /* Glass */
    --glass: rgba(255, 255, 255, 0.02);
    --glass-medium: rgba(255, 255, 255, 0.05);
    --glass-heavy: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.18);

    /* Semantic */
    --ok: #18c27e;
    --warn: #FFA500;
    --error: #e74c3c;
    --muted: #d4d4d4;
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* Text — Single Source of Truth fuer alle Textfarben.
       Vorher implizit via rgba(255,255,255,*) ueberall verstreut. */
    --text:            rgba(255, 255, 255, 0.85); /* Body-Default */
    --text-strong:     rgba(255, 255, 255, 1);    /* H1/H2, starke Betonung */
    --text-muted:      rgba(255, 255, 255, 0.6);  /* Captions, Labels */
    --text-dim:        rgba(255, 255, 255, 0.4);  /* Platzhalter, Disabled */
    --text-on-gold:    #0A0A0A;                   /* Text auf Gold-Flaechen */
    --text-on-accent:  #0A0A0A;                   /* Text auf Akzentflaechen (Gold) */

    /* Sekundaer-Akzent — SEKUNDAER / Rhythmus.
       Bis 21.08.2026 Teal (#5BAFA0). Das Design-System kennt nur Schwarz,
       Weiss und Gold; ein zweiter Farbton war ein Regelbruch und ist als
       "andere Farbe als der Rest" auch aufgefallen. Die Rolle bleibt, der
       Ton kommt jetzt aus der Palette: --gold-light, im System ohnehin fuer
       aktive Zustaende und Leuchteffekte vorgesehen. */
    --accent: var(--gold-light);
    --accent-glow: rgba(200, 168, 134, 0.10);
    --accent-border: rgba(200, 168, 134, 0.25);

    /* Glass — zusätzliche Stärke */
    --glass-border-strong: rgba(255, 255, 255, 0.22);

    /* Motion */
    --blur-amount: 20px;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --expand-duration: 0.6s;

    /* Layout */
    --header-height: 110px;
    --header-height-mobile: 90px;
    --content-max: 1400px;
    --sidebar-width: 340px;
    --section-pad: clamp(60px, 8vw, 120px);
    --section-pad-x: clamp(20px, 4vw, 60px);

    /* Typography */
    --font-primary: 'Formular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Courier New', monospace;

    /* ─── Semantische Aliase (neue Code-Stellen bitte DIESE verwenden) ─── */
    /* Primär-Marke — fuer alle Marken-CTAs, Headline-Akzente, Trenner, Sterne */
    --brand:            var(--gold);
    --brand-light:      var(--gold-light);
    --brand-dark:       var(--gold-dark);
    --brand-contrast:   var(--text-on-gold);

    /* Sekundär-Highlight — fuer Live-Dots, Step 2, Stat-Highlights, Hover */
    --highlight:        var(--accent);
    --highlight-glow:   var(--accent-glow);
    --highlight-border: var(--accent-border);
    --highlight-contrast: var(--text-on-accent);
}