/* Netwise Solutions – Design-Tokens „Darmstädter Moderne, weich“, Schrift Geist (Branch design-darmstadt)
   Kontraste (WCAG 2.1, gerechnet):
   --ink #141821 auf --bg 16.7:1 · --ink-2 #545b66 auf --bg 6.5:1, auf --wash 6.0:1, auf --stone 6.0:1
   --slate #3a4560 auf --bg 9.0:1 · --cobalt #1c3f9e auf Weiß 9.3:1, auf --wash 8.2:1 · Weiß auf --action 6.1:1
   Dunkel (--deep #0f1a3a): --on-deep #eef2fb 15.2:1, --on-deep-2 #aab4c8 8.2:1, Links #8fb3ff 8.2:1
   --blue #3478fe (Logo-Blau): Marke, Grafik, eine Mosaik-Fliese; als Text erst ab 24px.
   Farbgesetz: kräftiges Blau trägt Handlungen (Buttons, Links, Telefonnummer); Flächen nur als zarter Blau-Hauch. */


@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); }
/* Metrisch angenäherte Ersatzschrift gegen Layoutsprünge beim Nachladen */
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* Farbe */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --stone: #eef0f3;
  --wash: #eaf1ff;          /* zarter Blau-Hauch */
  --ink: #141821;
  --ink-2: #545b66;
  --slate: #3a4560;
  --blue: #3478fe;          /* Logo-Blau */
  --cobalt: #1c3f9e;
  --action: #1d58d6;
  --action-hover: #1a4fc4;
  --deep: #0f1a3a;          /* dunkles Nachtblau statt Schwarz */
  --on-deep: #eef2fb;
  --on-deep-2: #aab4c8;
  --link-on-deep: #8fb3ff;
  --ok: #1d6b3a;
  --error: #b42318;

  /* Schrift */
  --font-display: "Geist", "Geist Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Geist Fallback", "Segoe UI", system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem);    /* 40–76, nur „IT-Berater in Darmstadt.“ */
  --fs-hero-2: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); /* zweite H1-Zeile */
  --fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;

  /* Raum */
  --section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --space-section: clamp(4rem, 2.75rem + 5vw, 7.5rem); /* ein Abstand zwischen allen Blöcken der Unterseiten (64–120 px) */
  --space-group: clamp(3rem, 2.4rem + 2.5vw, 4rem);     /* Teile, die zu einem Abschnitt gehören (48–64 px): Hero → Eckdaten, Über mich → Technik-Leiste */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --maxw: 74rem;
  --nav-h: 72px;

  /* Form: eine weiche Rundungsskala */
  --r-xs: 10px;
  --r-sm: 14px;     /* Felder, kleine Flächen */
  --r-md: 20px;     /* Mosaikflächen, Karte */
  --r-lg: 28px;     /* Kacheln, Formular, Fotos */
  --r-xl: 40px;     /* Abschnitte, Zitat-Panel */
  --r-pill: 999px;  /* Buttons, Navigation */
  --shadow-soft: 0 1px 2px rgba(20, 24, 33, .04), 0 12px 32px rgba(29, 88, 214, .08);
  --shadow-lift: 0 2px 4px rgba(20, 24, 33, .04), 0 20px 44px rgba(29, 88, 214, .14);

  /* Bewegung: weich auslaufend, keine Federn ohne Schwung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-short: 180ms;
  --dur-mid: 360ms;
  --dur-long: 720ms;
  --reveal-distance: 22px;
  --reveal-stagger: 80ms;

  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 6px rgba(29, 88, 214, .55);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-short: 0ms; --dur-mid: 150ms; --dur-long: 200ms; --reveal-distance: 0px; --reveal-stagger: 0ms; }
}