:root {
  /* ---------- Radien: alles kantig, außer Pills und Runden Buttons ---------- */
  --radius-none: 0; /* @kind radius */
  --radius-hair: 2px; /* @kind radius */ /* nur Karten-Popups (Leaflet) */
  --radius-pill: 100px; /* @kind radius */ /* Filter-Pills */
  --radius-circle: 50%; /* @kind radius */ /* Stepper-Buttons, Punkte */

  /* ---------- Rahmen ---------- */
  --border-hair: 1px solid var(--rule); /* @kind other */
  --border-strong: 1px solid var(--rule-strong); /* @kind other */
  --border-accent: 2px solid var(--primary); /* @kind other */ /* linke Kante der Architektur-Karte */

  /* ---------- Schatten: extrem sparsam, nur für Overlays ---------- */
  --shadow-none: none; /* @kind shadow */
  --shadow-popup: 0 16px 38px rgba(43, 46, 42, 0.22); /* @kind shadow */
  --shadow-modal: 0 30px 70px rgba(43, 46, 42, 0.35); /* @kind shadow */
  --shadow-pin: 0 4px 10px rgba(43, 46, 42, 0.28); /* @kind shadow */

  /* ---------- Bewegung ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 0.2s; /* @kind other */
  --dur-mid: 0.3s; /* @kind other */
  --dur-slow: 1s; /* @kind other */
  --dur-image: 1.2s; /* @kind other */ /* Bild-Zoom beim Hover */

  /* ---------- Blur / Transparenz ---------- */
  --nav-bg: rgba(249, 248, 246, 0.92); /* @kind color */
  --nav-blur: saturate(180%) blur(12px); /* @kind other */
  --modal-blur: blur(3px); /* @kind other */

  /* ---------- Bildformate ---------- */
  --ratio-room: 4 / 3; /* @kind other */
  --ratio-room-portrait: 3 / 4; /* @kind other */
  --ratio-gallery-wide: 16 / 10; /* @kind other */
  --ratio-map: 1000 / 720; /* @kind other */
}