/* =========================================================================
   V3 · BASE — Reset, Grundtypografie, Layout-Primitiven, Browserflächen
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.2 · 2.4.11 — Sprungziele dürfen nicht unter der Kopfzeile liegen */
  scroll-padding-top: calc(var(--nav-h) + var(--space-6));
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100svh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* -------------------------------------------------------------------------
   Typografie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--text-primary);
}

h1, .t-display {
  font-size: var(--step-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 640;
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--step-display-l);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  font-weight: 640;
  text-wrap: balance;
}
h2, .t-h2 { font-size: var(--step-h2); letter-spacing: -.028em; }
h3, .t-h3 { font-size: var(--step-h3); }
h4, .t-h4 { font-size: var(--step-h4); font-weight: 590; }

p { text-wrap: pretty; }

.t-lede {
  font-size: var(--step-lede);
  line-height: 1.55;
  letter-spacing: -.013em;
  color: var(--text-secondary);
  max-width: var(--measure);
}
.t-body  { max-width: var(--measure); color: var(--text-secondary); }
.t-sm    { font-size: var(--step-sm); }
.t-xs    { font-size: var(--step-xs); }
.t-muted { color: var(--text-secondary); }
.t-quiet { color: var(--text-tertiary); }
.t-nums  { font-variant-numeric: tabular-nums; }

strong, b { font-weight: 600; color: var(--text-primary); }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* Kicker — die Ordnungszahl über jedem Abschnitt */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.kicker b { color: var(--accent); font-weight: inherit; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.5;
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

/* -------------------------------------------------------------------------
   Browserflächen — gehören zum Designsystem, nicht zum Browser
   ------------------------------------------------------------------------- */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
:root { accent-color: var(--accent); caret-color: var(--accent); }

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
    border: 3px solid var(--bg);
    border-radius: var(--radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 62%, transparent); }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: color-mix(in srgb, var(--text-tertiary) 42%, transparent) transparent; scrollbar-width: thin; }
}

/* Fokus: ein Ring, überall gleich, nie entfernt */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-solid);
  color: #FFF;
  border-radius: var(--radius-sm);
  font-size: var(--step-sm);
  font-weight: 560;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-180%);
  transition: transform var(--dur-ui) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #FFF; }

/* -------------------------------------------------------------------------
   Layout-Primitiven
   ------------------------------------------------------------------------- */
.wrap         { width: var(--wrap);        margin-inline: auto; }
.wrap--wide   { width: var(--wrap-wide);   margin-inline: auto; }
.wrap--narrow { width: var(--wrap-narrow); margin-inline: auto; }

.section         { padding-block: var(--section-y); position: relative; }
.section--sm     { padding-block: var(--section-y-sm); }
.section--tint   { background: var(--bg-tint); }
.section--subtle { background: var(--bg-subtle); }
.section--sunken { background: var(--bg-sunken); }

/* Zwei gleich getönte Abschnitte hintereinander bekommen eine Trennlinie,
   sonst verschmelzen sie zu einem Block ohne Rhythmus. */
.section--tint + .section--tint,
.section--subtle + .section--subtle { border-top: 1px solid var(--border-subtle); }

.rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.nowrap { white-space: nowrap; }

/* Abschnittskopf: mehr Raum über der Überschrift als darunter */
.section-head { max-width: 44rem; margin-bottom: var(--space-9); }
.section-head > h2 + p { margin-top: var(--space-5); }
.section-head--split { display: grid; gap: var(--space-6); max-width: none; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-10); }
  .section-head--split > :last-child { padding-bottom: .3rem; }
}
.section-head--split > * { min-width: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Fließtext — Prosa-Blöcke auf Unterseiten
   ------------------------------------------------------------------------- */
.prose { max-width: var(--measure); color: var(--text-secondary); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  color: var(--text-primary);
  font-size: var(--step-h3);
  margin-top: var(--space-9);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { color: var(--text-primary); font-size: var(--step-h4); margin-top: var(--space-7); }
/* :is() deckt beide Fälle ab: Liste im Prosablock und Liste als Prosablock */
:is(.prose ul, .prose ol, ul.prose, ol.prose) { display: grid; gap: var(--space-3); }
:is(.prose, ul.prose, ol.prose) li { position: relative; padding-left: var(--space-6); }
:is(.prose ul, ul.prose) > li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 14px; height: 1px;
  background: var(--accent);
}
:is(.prose ol, ol.prose) { counter-reset: prose-step; }
:is(.prose ol, ol.prose) > li { counter-increment: prose-step; }
:is(.prose ol, ol.prose) > li::before {
  content: counter(prose-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: var(--step-2xs);
  color: var(--accent);
  line-height: 1.9;
}

/* -------------------------------------------------------------------------
   Reveal — einmalig, gestaffelt, nie blockierend
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Ohne JavaScript ist alles sofort sichtbar — Inhalt hängt nie an einem Skript */
.no-js .reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   Reduzierte Bewegung — jede Bewegung wird zu einer kurzen Blende
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: opacity, background-color, color, border-color, outline-color !important;
    scroll-behavior: auto !important;
  }
  .reveal { transform: none !important; transition-delay: 0ms !important; }
}

/* -------------------------------------------------------------------------
   Hoher Kontrast (Windows) — Systemfarben gewinnen, Ränder bleiben sichtbar
   ------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .service, .qa, .field input, .field select, .field textarea {
    border: 1px solid ButtonBorder;
  }
  :focus-visible { outline: 2px solid Highlight; }
}

/* -------------------------------------------------------------------------
   Druck
   ------------------------------------------------------------------------- */
@media print {
  .site-nav, .site-footer, .theme-toggle, .nav__toggle, .nav__panel,
  .skip-link, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
  .qa__body { display: block !important; }
}