/* IIINITY-Designvorlage v1.0.1 (2026-09-23) · Grundstil
   Nur Tokens, keine festen Farbwerte. Maße wie Vergleichsrechner.html. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--t-text);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--zeit-ruhig) var(--kurve-zustand), color var(--zeit-ruhig) var(--kurve-zustand);
}

h1, h2, h3, h4 { color: var(--color-marke-schrift); text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-ueberschrift); }
a { color: var(--color-blue-text); }
img { max-width: 100%; }

/* Ein Fokusring für alles: dunkles Band innen, helles außen, nur bei Tastaturbedienung */
:focus-visible {
  outline: var(--ring-staerke) solid var(--ring-innen);
  outline-offset: var(--ring-abstand);
  box-shadow: 0 0 0 calc(var(--ring-abstand) + 2 * var(--ring-staerke)) var(--ring-aussen);
}

.container { max-width: var(--container); margin: 0 auto; padding: 40px 24px; }
.container--breit { max-width: var(--container-breit); }

.seitentitel { font-family: var(--font-ueberschrift); font-weight: 200; font-size: var(--t-seite); letter-spacing: -0.5px; color: var(--color-marke-schrift); margin-bottom: 8px; }
.untertitel { font-size: var(--t-lead); color: var(--color-text); margin-bottom: 32px; max-width: 700px; }

/* Eyebrow: Gold als Schrift liegt auf hellem Grund unter 4,5:1 (A11Y-003, offen).
   Nur für kurze Kicker in Großbuchstaben, nie für Fließtext. */
.eyebrow { display: block; font-size: 11px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 14px; }

.abschnitt-teiler { font-weight: 300; font-size: var(--t-abschnitt); color: var(--color-marke-schrift); margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--color-akzent-linie); }
.abschnitt-teiler:first-of-type { margin-top: 0; }
.gold-strich { width: 60px; height: 2px; background: var(--color-akzent-linie); margin: 12px 0 20px; }

/* Nur für Vorlesesoftware sichtbar (Clip-Technik, bleibt im Zugänglichkeitsbaum) */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.raster--drei { grid-template-columns: 1fr 1fr 1fr; }
.feld--voll { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .raster, .raster--drei { grid-template-columns: 1fr; }
  .container { padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}