/* Selbst gehostete Webfont für h1/h2 (Dateien in static/webfont/). */
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../webfont/urbanist-v18-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben – helles Grundgerüst (Weiß + leichte Grautöne) mit dunkelblauem Akzent */
  --color-bg: #ffffff;
  --color-bg-alt: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-2: #eceef1;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-text: #14181f;
  --color-text-muted: #4b5563;
  --color-text-faint: #5b6472; /* WCAG AA (>=4.5:1) auf --color-bg und --color-bg-alt geprüft */
  --color-accent: #4a0e13; /* dunkles Marinebl 22437f */
  --color-accent-hover: #14294f;
  --color-accent-text: #ffffff;
  --color-accent-tint: #de959b; /* helle Variante des Akzents für Text/Icons auf dunklen Foto-Overlays (Hero) a9c2f2 */
  --color-accent-2: #4a0e13; /* zweite Akzentfarbe, dunkelrot – Flächen der Seiten-Heros (page-hero) */
  --color-accent-2-tint: #f0b8ae; /* helle Variante für Text/Eyebrow auf der dunkelroten Fläche */

  /* Typografie */
  --font-heading: "Urbanist", "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-h1: clamp(2.1rem, 5vw, 4rem);
  --fs-h2: clamp(1.7rem, 3.5vw, 2.6rem);
  --fs-h3: 1.3rem;
  --fs-body: 1.05rem;
  --lh-tight: 1.1;
  --lh-normal: 1.65;

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Layout */
  --container-width: 1280px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;

  /* Effekte */
  --shadow-card: 0 20px 50px -20px rgba(15, 23, 42, 0.3);
  --transition-fast: 180ms ease;
  --transition-medium: 400ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Gesamthöhe des fixen Headers = schmale Topbar (Telefon/Instagram) + Hauptzeile (Logo/Nav). */
  --topbar-height: 34px;
  --header-height: 134px;
}