/* KEYTOS ENGINE · Theme „squarespace“ · Design-Tokens
   Werte 1:1 aus den Live-Stylesheets von de.squarespace.com (defaults.css, Startseiten-CSS, Preisseite),
   recherchiert 05.10.2026 – siehe README.md und bericht.md. Nur die Schrift ist ersetzt (Inter statt Clarkson).
   Prinzip: streng monochrom (Weiß/Schwarz + vier Grau), EIN Akzentblau nur für Preis-Badges, Farbe kommt
   ausschließlich aus Fotos/Videos. Kein zentrierter Container – 12 Spalten aus 100 vw, Gutter als Seitenrand. */
:root {
  /* ── Farben ─────────────────────────────────────────────────────────────────── */
  --primitive-white: #fff;
  --primitive-black: #000;
  --color-gray-200: #ddd;        /* Rahmen hell, Primary-Hover */
  --color-gray-400: #a8a8a8;     /* Sekundärtext auf dunklen Karten (#2f2f2f): 5,6:1 – gray-500 schafft dort nur 3,8:1 */
  --color-gray-500: #898989;     /* Footer-Links, Menü-Eyebrows, Linien; als Fließtext auf Weiß nur 3,5:1 → dafür gray-800 */
  --color-gray-800: #5a5a5a;     /* Rahmen/Linien auf Dunkel, Tags, inaktiv, Placeholder */
  --color-gray-900: #1a1a1a;     /* dunkle Panels, Light-Button-Hover */
  --color-blue: #0072f0;         /* NUR Preis-/Empfehlungs-Badges */
  --color-blue-pale: #e7f2ff;
  --color-focus: #087bb5;        /* Tastatur-Fokusring */
  --color-red: #db3642;
  --color-error: #d83b2b;
  --color-pink: #ff9898;
  --color-shade-t-black-50: #00000008;
  --color-shade-t-black-100: #0000000d;
  --color-shade-t-white-50: #ffffff14;
  --color-shade-t-white-100: #ffffff1f;
  --line-on-dark: #ffffff40;     /* 1-px-Linien auf Schwarz (Footer, FAQ, Menü) */
  --line-on-light: #e0e0e0;      /* 1-px-Linien auf Weiß */
  --panel-dark-1: #222;          /* Sprachwahl-Knopf im Footer */
  --panel-dark-2: #2f2f2f;       /* Feature-Karten auf Weiß */
  --divider-dark: #323232;       /* Trenner im Mega-Menü */
  --overlay-media: rgba(0, 0, 0, .3); /* Abdunkelung über Hero-Video/-Foto */

  /* ── Raster (kein Max-Width-Container!) ─────────────────────────────────────── */
  --grid-gutter-width: 16px;
  --grid-column-width: calc((100vw - 208px) / 12);   /* 12 Spalten, 11 Gutter, 2 Seitenränder */
  --global-nav-height: 64px;
  --promo-banner-height: 48px;
  --section-padding: 80px;                           /* ab 1280 px: 120px */

  /* ── Schatten (immer Schwarz mit 1–10 % Alpha, dreistufig) ───────────────────── */
  --shadow-100: 0 39px 23px #0000000d, 0 17px 17px #00000017, 0 4px 9px #0000001a;
  --shadow-200: 0 78px 47px #0000000d, 0 35px 35px #00000017, 0 9px 19px #0000001a;
  --shadow-menu: 0 134px 80px #0000000d, 0 60px 60px #00000017, 0 15px 33px #0000001a;

  /* ── Bewegung (nur zwei Haus-Kurven) ─────────────────────────────────────────── */
  --ease-cubic-in-out: cubic-bezier(.645, .045, .355, 1);  /* UI, Hover, Pfeil: 0,2–0,35 s */
  --ease-quart-out: cubic-bezier(.165, .84, .44, 1);       /* Menü, Reveal, Header: 0,25–0,75 s */
  --ease-quad-in-out: cubic-bezier(.455, .03, .515, .955); /* Header-top, Subnav */
  --ease-quint-out: cubic-bezier(.23, 1, .32, 1);
  --dur-fast: .2s;
  --dur-base: .35s;
  --dur-slow: .6s;

  /* ── Radien (4 Button · 6–8 Karte/Panel/Bild · 16 Glas · 24 Preis/Hero-Karte · ≥30 Pille) ── */
  --radius-button: 4px;
  --radius-blade: 6px;
  --radius-card: 8px;
  --radius-glass: 16px;
  --radius-pricing: 24px;
  --radius-pill: 100px;

  /* ── Schrift ────────────────────────────────────────────────────────────────── */
  --font-sans: "KeytosSans", Inter, Helvetica, Arial, sans-serif;
  --weight-light: 300;   /* große Titel */
  --weight-regular: 400; /* Text */
  --weight-bold: 500;    /* Eyebrows, Buttons, Betonung – es gibt kein 600/700 */
}
@media (min-width: 375px)  { :root { --global-nav-height: 68px; } }
@media (min-width: 600px)  { :root { --global-nav-height: 72px; } }
@media (min-width: 744px)  { :root { --grid-gutter-width: 24px; --grid-column-width: calc((100vw - 312px) / 12); } }
@media (min-width: 1280px) { :root { --grid-gutter-width: 40px; --grid-column-width: calc((100vw - 520px) / 12); --global-nav-height: 80px; --section-padding: 120px; } }

/* ── Basis ───────────────────────────────────────────────────────────────────── */
html { scroll-padding-top: var(--global-nav-height); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--primitive-white);
  color: var(--primitive-black);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
body :focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
body :focus:not(:focus-visible) { outline: none; }