/* ============================================================================
   base.css — Reset, Grundtypografie, Hintergrund, Fokus, Bewegung, Druck
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
  /* Anker landen nicht unter dem schwebenden Kopf (zweizeilig auf schmalen
     Schirmen, deshalb der höhere Wert zuerst). */
  scroll-padding-top: 7rem;
}
@media (min-width: 80em) {
  html { scroll-padding-top: 4.5rem; }
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);

  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Ein ruhiger Lichthof oben, der mit der Seite scrollt. Keine fixierte Ebene:
   die kostet auf schwachen Geräten bei jedem Scrollschritt Zeichenarbeit. */
body {
  background:
    radial-gradient(60rem 36rem at 88% -12rem, rgba(157, 143, 255, 0.09), transparent 70%) no-repeat,
    var(--bg);
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  /* Lange deutsche Komposita sind in Display-Größe breiter als ein 320-px-
     Schirm; ohne Trennung schiebt eine einzige Überschrift die Seite auf. */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--text);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 21ch;
  /* Deutsche Umlautpunkte stoßen bei engem Zeilenabstand an die Unterlängen
     der Zeile darüber — etwas Innenabstand oben verhindert Beschnitt beim
     Hintergrund-Clip. */
  padding-block: 0.04em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
  padding-block: 0.03em;
}
h3 { font-size: var(--fs-l); letter-spacing: -0.02em; }
h4 { font-size: var(--fs-base); }

p, ul, ol, dl { margin: 0 0 1rem; }
p { max-width: var(--measure); }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(200, 255, 60, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 150ms var(--ease), text-decoration-color 150ms var(--ease);
}
a:hover {
  color: var(--lime);
  text-decoration-color: var(--lime);
}

strong, b { font-weight: 650; }
em { font-style: italic; }

code {
  padding: 0.08em 0.4em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--glass-2);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

::selection {
  background: var(--lime);
  color: var(--on-lime);
  -webkit-text-fill-color: var(--on-lime);
}

::placeholder { color: var(--text-dim); opacity: 1; }

abbr[title] { text-decoration: none; }

table { border-collapse: collapse; width: 100%; }
caption { text-align: left; }

/* Rollbalken passend zur Fläche */
html { scrollbar-color: #2a2e38 var(--bg); }

/* ---- Fokus: immer sichtbar, mit Abstand zur Kante ---- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip-Link ---- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
  font-size: var(--fs-s);
  text-decoration: none;
  transition: top 150ms var(--ease);
}
.skip-link:focus { top: 0.75rem; color: var(--on-lime); }

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

/* ---- Seitenwechsel als weicher Übergang (Chromium, Safari 18.2+) ----
   Der Kopf bekommt einen eigenen Namen und bleibt dadurch beim Wechsel
   stehen, nur der Inhalt blendet über. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; }

/* ---- Bewegung nur, wenn erlaubt ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  @view-transition { navigation: none; }
}

/* ---- Hoher Kontrast / erzwungene Farben ---- */
@media (forced-colors: active) {
  h1, h2, .h1__sub, .pkg__price b, .lab__numbers b, .step::before {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .btn, .pkg, .lab, .faq__item, .proof, .path, .summary,
  .site-header__inner, .facts__row, .step, .pricetable-wrap,
  input, select, textarea { border: 1px solid ButtonText; }
  .pricetable th, .pricetable td { border-color: ButtonText; }
}

/* ---- Druck: hell, ruhig, ohne Effekte ---- */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --bg-raise: #fff; --bg-deep: #fff;
    --glass: transparent; --glass-2: transparent; --glass-3: transparent;
    --line: #bbb; --line-2: #999; --line-3: #666;
    --text: #000; --text-soft: #333; --text-dim: #444;
    --lime: #000; --on-lime: #fff; --violet: #000; --cyan: #000;
  }
  body::before, body::after, .section--hero::before, .section--hero::after { display: none !important; }
  h1, h2, .h1__sub, .pkg__price b, .lab__numbers b, .step::before {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }
  *, *::before, *::after { box-shadow: none !important; backdrop-filter: none !important; animation: none !important; }
  .site-header, .site-nav, .cta-row, .form__actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 0.8cm 0; }
  .pkg, .lab, .proof, .faq__item { break-inside: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="#"]::after { content: ""; }
}