/* ============================================================
   BASE (v6) — reset, self-hosted fonts, responsive frame, type
   helpers, the two glass CTAs, a11y. Everything comes from the
   Figma design base (see FIGMA-v6 in README).
   ============================================================ */

/* ---- fonts (self-hosted, variable) --------------------------------- */
@font-face {
  font-family: "Work Sans";
  src: url("../assets/fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../assets/fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ailerons";
  src: url("../assets/fonts/Ailerons-Typeface Kopie.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* ---- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ein Wisch nach links soll Karten schieben, nie die Seite verlassen:
   ohne diese Zeile wertet macOS ihn neben den Slidern als Zurück-Geste. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body {
  font-family: var(--type-family-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: var(--color-ink);
  background: var(--color-bg);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* ---- responsive frame ----------------------------------------------
   Backgrounds run edge to edge; content is inset by --edge, which keeps
   the 1440 design column centred above 1440 and hugs the gutter below.
   Gutter scale: 80 / 64 (≤1200) / 40 (≤1024) / 24 (≤768) / 16 (≤480). */
:root {
  --gutter: var(--grid-margin);
  --frame-max: 1760px;
  --edge: max(var(--gutter), calc((100% - var(--frame-max)) / 2 + var(--gutter)));
  --nav-h: 88px;
}
@media (max-width: 1200px) { :root { --gutter: 64px; } }
@media (max-width: 1024px) { :root { --gutter: 40px; } }
@media (max-width: 768px)  { :root { --gutter: 24px; } }
@media (max-width: 480px)  { :root { --gutter: 16px; } }
.wrap { padding-inline: var(--edge); }

/* ---- fluid display type -------------------------------------------- */
.t-stage {
  font-size: clamp(36px, 5vw, var(--type-stage-size));
  font-weight: var(--type-stage-weight);
  line-height: 1.12;
  text-transform: var(--type-stage-transform);
}
.t-section {
  font-size: clamp(28px, 3.4vw, var(--type-section-size));
  font-weight: var(--type-section-weight);
  line-height: 1.16;
  text-transform: var(--type-section-transform);
}
.t-card {
  font-size: clamp(28px, 2.8vw, var(--type-card-size));
  font-weight: var(--type-card-weight);
  line-height: 1;
  letter-spacing: -0.03em;
}
.t-row {
  font-size: clamp(24px, 2.4vw, var(--type-row-size));
  font-weight: var(--type-row-weight);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.t-lead {
  font-size: clamp(18px, 1.7vw, var(--type-lead-size));
  font-weight: var(--type-lead-weight);
  line-height: 1.4;
}
.t-lead-sm { font-size: clamp(16px, 1.4vw, var(--type-lead-sm-size)); font-weight: 300; line-height: 1.45; }
.t-number {
  font-size: clamp(48px, 6.1vw, var(--type-number-size));
  font-weight: var(--type-number-weight);
  line-height: 1;
  letter-spacing: -0.03em;
}
.t-h24 { font-size: 24px; font-weight: 500; line-height: 1.2; }
.t-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* gradient-filled type (numbers, plus signs) */
.grad-a, .grad-steps {
  background: var(--gradient-num-steps);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-b {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-a { background-image: var(--gradient-num-a); }
.grad-b { background-image: var(--gradient-num-b); }

/* ---- the two glass CTAs (only these two) ---------------------------
   .cta          → on dark: white 10% glass pill, Inter label
   .cta--light   → on light or imagery: white 20% + white stroke,
                   Work Sans Medium label (ink on white, add .on-media
                   for a white label over imagery)                    */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 160px;
  padding: 18px var(--space-3);
  border-radius: var(--radius-cta);
  font-family: var(--type-family-cta);
  font-size: var(--type-cta-size);
  font-weight: 400;
  line-height: var(--type-cta-line);
  white-space: nowrap;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 2px 2px 3px rgba(255, 255, 255, 0.22),
    inset -2px -3px 6px rgba(0, 0, 0, 0.28),
    inset 0 0 20px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.35s var(--motion-ease-out),
              background 0.35s var(--motion-ease-out),
              box-shadow 0.35s var(--motion-ease-out);
}
.cta:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
    inset -2px -3px 6px rgba(0, 0, 0, 0.28),
    0 10px 22px rgba(0, 0, 0, 0.3);
}
.cta:active { transform: translateY(-1px); }

.cta--light {
  font-family: var(--type-family-sans);
  font-weight: 400;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.3),
    0 4px 6px rgba(0, 0, 0, 0.1),
    inset -1px 4px 5px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cta--light:hover {
  background: rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
    0 9px 18px rgba(0, 0, 0, 0.16),
    inset -1px 4px 5px rgba(0, 0, 0, 0.12);
}
.cta--light.on-media { color: var(--color-white); }

/* ---- a11y ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--space-1) var(--space-2);
  background: var(--color-white); color: var(--color-ink);
}
.skip-link:focus { left: var(--space-2); }
:focus-visible { outline: 2px solid #4865C6; outline-offset: 2px; }
/* Nur für Vorleseprogramme da. Gebraucht, wo ein Bedienelement eine
   Beschriftung braucht, die auf dem Schirm schon aus dem Zusammenhang klar
   ist — der Branchenfilter heißt vorgelesen "Nach Branche filtern —
   Gesundheit", zu sehen ist nur "Gesundheit". */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}