/* ─── Richter Immobilien · Global Stylesheet ──────────────────────────────
   Brand-Farben aus den extrahierten Section-CSSs übernommen.
   Die Page-Sections bringen ihre Styles selbst mit (eigener Namespace).
   Hier nur: Reset + Variablen + Body-Basics + Layout-Hilfsklassen.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --color-brand-main:       #004A95;   /* Primärblau (CTAs, Links) */
  --color-brand-darker:     #103A66;   /* Hover, Akzent dunkler */
  --color-brand-deep:       #0E1824;   /* Hero-Background, Footer */

  /* Light Tints */
  --color-bg-light:         #FFFFFF;
  --color-bg-tint-1:        #EEF4FB;
  --color-bg-tint-2:        #D8E6F2;

  /* Text */
  --color-heading:          #0E1824;
  --color-body:             #2E3A4A;
  --color-text-muted:       #7A94A8;
  --color-text-secondary:   #4A6580;

  /* Borders */
  --color-border:           #D8E6F2;
  --color-border-strong:    #C0D2E3;

  /* Typography */
  --font-main:              'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-size-body:         17px;
  --line-height-body:       1.55;

  /* Layout */
  --max-width:              1240px;
  --section-padding:        120px 40px;
  --section-padding-mobile: 64px 20px;

  /* Form */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              16px;

  /* Easing */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Ankersprünge nicht unter den fixierten Header laufen lassen ───────────
   Mobil-Audit 2026-08-08. `.ri-hdr` ist position:fixed (76px am Seitenanfang,
   64px im gescrollten Zustand). Ohne diesen Wert landet ein Sprungziel exakt
   bei y=0 und seine ersten ~64px liegen hinter dem Header.
   Gemessen auf /sie-wollen-verkaufen/#bewertung — dem Ziel des Nav-CTAs und
   damit dem meistgenutzten Sprung der Site: die Überschrift „Wertermittlung
   anfragen" saß bei y=9 (mobil) bzw. y=22 (Desktop), also komplett verdeckt.
   Betraf beide Viewports gleichermaßen, deshalb hier global und nicht in
   css/tablet.css.

   88px = 76 (Header am Seitenanfang) + 12 Luft; gegen den gescrollten
   64px-Header bleiben 24px. Von 9 Ankerzielen der Site war nur dieses eine
   betroffen — die übrigen haben genug eigenes padding-top; für sie bedeutet
   der Wert lediglich etwas mehr Luft.

   Deckt BEIDE Wege ab — nachgemessen, nicht angenommen: den Direktaufruf
   einer URL mit #hash (native Fragment-Navigation) und den Klick auf einen
   Anker, den Lenis abfängt (`anchors: true`, build.mjs). Lenis liest
   `scroll-padding-top` seit 1.3.x selbst aus; beide Wege landen danach auf
   dasselbe Pixel (Titel y=97 mobil / y=110 Desktop).
   ⚠️ Deshalb in build.mjs KEIN zusätzliches `anchors: { offset: … }` setzen —
   das addiert sich und verdoppelt den Abstand (gemessen: y=185 statt 97). */
html { scroll-padding-top: 88px; }

body {
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
  background: var(--color-bg-light);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Skip link */
.ri-skip {
  position: absolute; top: -40px; left: 8px; z-index: 100;
  background: var(--color-brand-deep); color: #fff;
  padding: 8px 12px; border-radius: 4px;
  font-size: 14px;
  transition: top 0.2s;
}
.ri-skip:focus { top: 8px; }

/* ─── Reveal helper ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }