/* ==========================================================================
   ILLUMOR DESIGN SYSTEM — base.css
   Reset · Fonts · Typografie · Container · Barrierefreiheit
   ========================================================================== */

/* ---- FONTS · selbst gehostet, variabel --------------------------------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Header-Höhe freihalten, damit Anker nicht unter die Navigation rutschen */
  scroll-padding-top: 6rem;
}

body {
  background: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Theme-Wechsel als weicher Übergang, nicht als Sprung */
  transition: background-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
/* Kein globaler fill-Reset: CSS schlägt Präsentationsattribute, und gefüllte
   Assets (Plattform-Marken, Wordmark) tragen ihr fill selbst. */

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

[hidden] { display: none !important; }

/* ---- TYPOGRAFIE --------------------------------------------------------- */
.t-display-xl,
.t-display-lg {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-display-xl); }
.t-display-lg { font-size: var(--t-display-lg); }

h1, h2, h3, h4, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1, .t-h1 { font-size: var(--t-h1); }
h2, .t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); }
h4, .t-h4 { font-size: var(--t-h4); font-weight: 600; }

.t-overline {
  display: block;
  font-family: var(--f-text);
  font-size: var(--t-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-relaxed); }
.t-body-sm { font-size: var(--t-body-sm); }
.t-caption { font-size: var(--t-caption); color: var(--ink-tertiary); }

.t-lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-secondary);
  max-width: 48ch;
}

.t-muted     { color: var(--ink-secondary); }
.t-quiet     { color: var(--ink-tertiary); }
.t-prose     { max-width: 68ch; }
.t-nums      { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.t-wordmark  { font-family: var(--f-display); letter-spacing: var(--ls-wordmark); text-transform: uppercase; }

/* ---- LAYOUT ------------------------------------------------------------- */
.container,
.container-wide,
.container-prose {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container       { max-width: calc(var(--w-content) + 2 * var(--gutter)); }
.container-wide  { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.container-prose { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--sunken { background: var(--surface-sunken); }

/* Bewusst KEIN content-visibility: auto auf Sektionen.
   Der Rendering-Gewinn ist auf einer Seite mit sechs Sektionen und ohnehin
   lazy geladenen Bildern klein; dafür meldet jede noch nicht gerenderte
   Sektion die Platzhalterhöhe aus contain-intrinsic-size. Die Seitenhöhe
   stimmt dann erst nach dem Durchscrollen, Sprungziele landen daneben, und
   die Scrollbar wandert. Vorhersagbares Layout schlägt hier die Optik der
   Messwerte. */

.stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }

.grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
/* Die Spaltenzahl wird pro Breakpoint direkt in grid-template-columns
   aufgelöst, nicht über eine Neuzuweisung von --cols. Zwei Gründe:
   --cols: var(--cols-md, var(--cols, 1)) referenziert sich selbst und ist
   damit zyklisch, und ein --cols aus dem style-Attribut würde jede
   Zuweisung im Stylesheet ohnehin schlagen. */
@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(var(--cols-md, var(--cols, 1)), minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(var(--cols-lg, var(--cols-md, var(--cols, 1))), minmax(0, 1fr)); }
}

.hairline {
  border: 0;
  border-block-start: 1px solid var(--edge-subtle);
  margin: 0;
}

/* ---- BARRIEREFREIHEIT --------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: -100%;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { inset-block-start: var(--sp-4); }

/* Ein einziger Fokus-Stil für das gesamte System. Wird nie entfernt. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tube-core);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- REDUCED MOTION ----------------------------------------------------- */
@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;
  }
}

/* ---- VERSALIEN-DISPLAY -------------------------------------------------
   Beide Referenzbilder setzen die Headline in Versalien. In Versalien
   braucht Outfit mehr Laufweite, sonst kleben die Buchstaben; negatives
   Tracking wie in Satzschrift wäre hier falsch. */
.t-caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-display-caps);
  line-height: var(--lh-caps);
}

/* ---- THEME-EXKLUSIVE ELEMENTE -----------------------------------------
   Manche Bausteine existieren nur in einem Theme — die Hero-Bühne ist im
   Light Mode eine Linienzeichnung und im Dark Mode ein Leuchtrohr. Beide
   liegen im Markup, nur eines ist sichtbar. */
.theme-only--light { display: none; }
[data-theme="light"] .theme-only--dark,
.theme-light .theme-only--dark { display: none; }
[data-theme="light"] .theme-only--light,
.theme-light .theme-only--light { display: block; }