/* ==========================================================================
   VRW – Design Tokens
   Zwei Markenwelten, ein Unternehmen:
   - "Immobilien":     hell, warm, ruhig – Fachwerk/Altstadt als stiller Bezug
   - "Warenautomaten": dunkel, gefasst, professionell – technisches Blueprint statt Neon
   ========================================================================== */

:root {
  /* ---- Immobilien: Fachwerk-Terrakotta ----
     Bewusst etwas tiefer/entsaettigter als ein reines Baukasten-Orange
     fuer einen ruhigeren, gesetzteren Eindruck. */
  --immo-bg:            #fbf8f5;
  --immo-bg-raised:     #ffffff;
  --immo-ink:           #1c2230;
  --immo-ink-soft:      #5b6472;
  --immo-accent:        #a8502c;
  --immo-accent-dark:   #7f3c20;
  --immo-line:          #e4dcd3;
  --immo-cream:         #f2e9dd;

  /* ---- Warenautomaten: dunkles Wappen-Gruen ----
     Bewusst weg von Gold-auf-Schwarz (zu nah an warmen Terrakotta-Ton
     der Immobilienmarke) hin zu einem edlen, kuehlen Dunkelgruen +
     gedaempftem Champagner-Gold. Gruen+Gold ist zugleich die klassische
     Heraldik-Kombination, die zum VRW-Wappen passt. */
  --auto-bg:            #0b1f16;
  --auto-bg-raised:     #12291d;
  --auto-ink:           #eef2ef;
  --auto-ink-soft:      #9db3a6;
  --auto-accent:        #c9a769;
  --auto-accent-bright: #e3c78f;
  --auto-line:          #1f3b2c;
  --auto-glass:         rgba(18, 41, 29, 0.55);
  --auto-glass-edge:    rgba(227, 199, 143, 0.14);

  /* ---- Typografie ---- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.6rem, 2rem + 2.8vw, 4.2rem);

  /* ---- Layout ---- */
  --content-width: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --radius-s: 4px;
  --radius-m: 10px;

  /* ---- Bewegungssystem ----
     --ease bleibt der bisherige Allzweck-Wert (Kompatibilitaet), die
     spezifischen Tokens darunter werden gezielt nach Animationstyp
     eingesetzt (Emil-Kowalski-Entscheidungsbaum: entering/exiting =
     ease-out, on-screen movement = ease-in-out, Drawer/Sheet = eigene
     iOS-artige Kurve). */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press:  120ms;
  --dur-fast:   180ms;
  --dur-base:   220ms;
  --dur-drawer: 320ms;
  --dur-reveal: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}