/* Digital Real Estate — Landing Page
   Theme-Tokens & globale Regeln.
   Das übrige Styling steckt als inline-styles direkt im HTML (portabel,
   leicht in WordPress/Custom-HTML zu übernehmen). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); }
::selection { background: #F4A24C; color: #15120D; }

/* ---- Farbschema: Dunkel (Standard) ---- */
:root,
[data-theme="dark"] {
  --bg: #15120D; --bg-alt: #1A1610; --surface: #1E1A13;
  --text: #F7F1E5; --text-2: #E6DECF; --text-3: #C9C0B0; --text-4: #D8D0C0; /*#8E8576 muted #9A9082 muted-2 */
  --muted: #D8D0C0; --muted-2: #D8D0C0; --faint: #5B5346;
  --hair: rgba(247,241,229,0.08); --border: rgba(247,241,229,0.10); --border-2: rgba(247,241,229,0.12); --border-3: rgba(247,241,229,0.16); --border-btn: rgba(247,241,229,0.26);
  --accent: #F4A24C; --accent-bright: #FFBA6B; --accent-ink: #F4A24C; --on-accent: #15120D;
  --logo: #F7F1E5;
  --nav-bg: color-mix(in oklab, #15120D 84%, transparent);
}

/* ---- Farbschema: Hell ---- */
[data-theme="light"] {
  --bg: #FAF6EF; --bg-alt: #F1E9DA; --surface: #FFFDF8;
  --text: #1E1813; --text-2: #2E261B; --text-3: #544A39; --text-4: #473D2D;
  --muted: #857A66; --muted-2: #766C59; --faint: #B6AB95;
  --hair: rgba(31,24,13,0.07); --border: rgba(31,24,13,0.12); --border-2: rgba(31,24,13,0.14); --border-3: rgba(31,24,13,0.18); --border-btn: rgba(31,24,13,0.26);
  --accent: #F4A24C; --accent-bright: #FFBA6B; --accent-ink: #AE5C16; --on-accent: #15120D;
  --logo: #1E1813;
  --nav-bg: color-mix(in oklab, #FAF6EF 86%, transparent);
}

/* Aktives Segment im Theme-Umschalter */
[data-theme="dark"] [data-theme-btn="dark"],
[data-theme="light"] [data-theme-btn="light"] { background: var(--accent) !important; color: var(--on-accent) !important; }

/* Logo wird per JS getauscht (script.js) — siehe .dre-logo */

/* Hover-/Active-Zustände (entsprechen den Interaktionen im Original) */
.scp0:hover { color: var(--accent-ink); }
.scp1:hover { background: var(--accent-bright); }
.scp2:active { transform: translateY(2px); }
.scp3:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
#dre-play { transition: transform 160ms cubic-bezier(0.22,1,0.36,1); }
#dre-play:hover .dre-play-circle { transform: translate(-50%, -50%) scale(1.06); }