/* Self-hosted Open Sans (DSGVO: keine CDN-Anfrage an Google); nur die genutzten Schnitte. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v44-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v44-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v44-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v44-latin-700.woff2") format("woff2");
}

:root {
  --font: "Open Sans", system-ui, -apple-system, sans-serif;

  --paper: #fafbfd;
  --paper-2: #ffffff;
  --ink: #353464; /* headings — deep indigo */
  --ink-2: #57585a; /* body text — grey */
  --ink-3: #84858c; /* muted */
  --line: #d9d9d9;
  --line-2: #e7e9ef;

  /* indigo = deep/structure · cyan = accent/glow */
  --petrol-900: #232255; /* indigo-900 */
  --petrol-700: #424093; /* indigo  — links, dark gradients */
  --petrol-600: #2e8593; /* cyan-700 — labels/eyebrows */
  --petrol-500: #2e8593; /* cyan-700 — primary button start */
  --teal-400: #3da6b6; /* cyan-600 */
  --aqua-300: #63c3d1; /* cyan */
  --aqua-100: #dcf2f5; /* cyan-100 */
  --champ: #e4e4f1; /* indigo-100 (cool fill) */

  --glass: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.7);
  --glass-3: rgba(255, 255, 255, 0.84);
  --glass-brd: rgba(255, 255, 255, 0.8);
  --glass-brd-2: rgba(66, 64, 147, 0.12);

  --sh-1:
    0 1px 2px rgba(40, 40, 90, 0.04), 0 8px 24px rgba(40, 40, 90, 0.06);
  --sh-2:
    0 2px 6px rgba(40, 40, 90, 0.05), 0 22px 50px rgba(40, 40, 90, 0.1);
  --sh-3: 0 32px 84px rgba(28, 28, 70, 0.18);
  --ring: 0 0 0 4px rgba(99, 195, 209, 0.35);

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --maxw: 1220px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}