/* ==========================================================================
   Base — Schriften, Reset-Ergänzungen, fluide Typografie
   ========================================================================== */

/*
 * Self-hosted Variable Fonts (DSGVO: kein fonts.googleapis.com).
 * Heading = Space Grotesk (moderne, charaktervolle Grotesk, wght),
 * Body    = Source Sans 3 (klar lesbar, wght).
 * Kein Schriftflackern: beide WOFF2 werden in partials/head.php per
 * <link rel="preload"> VOR dem ersten Stylesheet geladen; font-display: optional
 * verhindert FOUT/FOIT. Metrisch angepasste Fallbacks verhindern Layout-Shift.
 */
@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('../fonts/space-grotesk-heading.woff2') format('woff2');
  font-weight: 300 700;
  font-stretch: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Source Sans 3 Variable';
  src: url('../fonts/source-sans-body.woff2') format('woff2');
  font-weight: 400 700;
  font-display: optional;
}

/* Metrisch angepasste Fallbacks — greifen nur, falls die Schrift ausnahmsweise
   nicht rechtzeitig da ist. Werte grob an Space Grotesk/Source Sans angepasst. */
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --font-heading: 'Space Grotesk Variable', 'Space Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3 Variable', 'Source Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
  /* Offset für Sticky-Header bei Anker-Sprüngen */
  scroll-padding-top: 5.5rem;
}

@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;
  }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Heading-Schrift als Utility (aus @theme spiegelbar) */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

img { max-width: 100%; height: auto; display: block; }

/* Fluide Display-Headings ------------------------------------------------- */
.display-1 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.7rem + 3.3vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  /* Lange dt. Komposita (z. B. "Brennstoffzellenheizung") auf schmalen
     Viewports sauber trennen statt rechts abzuschneiden. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.display-2 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.9rem, 1.45rem + 2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Große Fehlercode-Ziffer (z. B. 404-Seite) */
.error-code {
  font-size: clamp(4rem, 8vw, 7rem);
}

/* Lesetypografie für Ratgeber-Fließtext ---------------------------------- */
.prose-guide {
  max-width: 44rem; /* ~68–72 Zeichen pro Zeile */
}
.prose-guide p {
  margin-block: 1.15em;
  color: var(--color-stone-700, #44403c);
}
.prose-guide h2 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.65rem, 1.35rem + 1.3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary-900, #1c2b30);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6rem;
}
.prose-guide h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  color: var(--color-primary-800, #24363c);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}
.prose-guide ul { margin-block: 1.15em; padding-left: 0; list-style: none; }
.prose-guide ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-block: 0.55rem;
  color: var(--color-stone-700, #44403c);
}
.prose-guide ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--color-ember-400, #e6a338);
  transform: rotate(45deg);
}
.prose-guide strong { color: var(--color-primary-900, #1c2b30); font-weight: 600; }
.prose-guide a {
  color: var(--color-primary-700, #2e4a52);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose-guide a:hover { color: var(--color-ember-700, #9a5b1e); }

/* Screenreader-only Helper (falls Tailwind-Klasse fehlt) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sanftes Aufdecken beim Scrollen — reines Progressive Enhancement.
   Inhalte/Bilder werden NUR versteckt, wenn JS aktiv ist (html.js). Ohne
   JavaScript oder bei einem Script-Fehler bleibt alles sofort sichtbar. */
[data-reveal] {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Section-Utilities (aus base) ------------------------------------------ */
.section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.section-wide { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .section-wide { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .section-wide { padding-inline: 2rem; } }

/* Print — Long-Read lesbar/druckbar ------------------------------------- */
@media print {
  header, footer, .no-print, [data-toc], .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  main { max-width: none; }
  .prose-guide { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  h2, h3 { break-after: avoid; }
  figure, img { break-inside: avoid; }
}