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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); }

/* Editorialer Serif-Akzent: EIN Schluesselwort pro grosser Headline, kursiv in Instrument
   Serif. Der Serif laeuft optisch etwas kleiner und ohne negatives Tracking -> leicht
   groesser setzen und Tracking zuruecksetzen, damit er sauber neben der engen Sans sitzt. */
.hl-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout-Helfer ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--surface { background: var(--surface); }

/* =========================================================================
   EINHEITLICHE AUSRICHTUNG · ein durchgaengiges Muster ueber die ganze Seite.
   Alle Abschnitte teilen denselben Rahmen (.container = --maxw) -> gleiche Raender.
   - Kicker, Ueberschriften (h2) und kurze Leads: ZENTRIERT (edel, ruhig).
   - Laengere Fliesstexte (mehrzeilige Absaetze): LINKSBUENDIG, in zentrierter Lesespalte.
   ========================================================================= */
.section__kicker { text-align: center; }
h2 { text-align: center; }
/* zentrierte Lesespalte (gleiche Breite ueberall); Inhalt je nach Laenge zentriert/links */
.lead,
.problem__text,
.about__intro,
.faq { max-width: var(--read); margin-inline: auto; }
.lead { text-align: center; }                  /* kurze Leads: zentriert */
/* Problem-Abschnitt ist bewusst durchgehend zentriert (Kicker, Ueberschrift, Fliesstext). */
.problem__text { text-align: center; }
/* laengere Fliesstexte sonst linksbuendig (zentrierte Texte lesen sich mehrzeilig schlecht).
   AUSNAHMEN bewusst zentriert: Problem (oben), Risiko-Sektion (Siegel-Block) und Ueber-uns
   (zentrierter Block auf Augenhoehe). Der Trumpf-Block bleibt linksbuendig. */
.trumpf__text { text-align: left; }

.section__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-dim);
  line-height: 1.55;
}

.text-dim { color: var(--text-dim); }
.accent-line {
  width: 56px; height: 3px; border: 0;
  background: var(--accent); border-radius: 2px;
  margin: 0 0 1.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;        /* Button-Beschriftung bricht nie um */
  transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Einheitlich: alle Buttons heben beim Hover leicht an, verkleinern sich beim Klick minimal. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary {
  background: var(--accent);
  color: #1a1206;
  box-shadow: 0 10px 30px -10px rgba(224, 178, 74, 0.5);
}
.btn--primary:hover { background: var(--accent-hi); box-shadow: 0 16px 38px -12px rgba(224, 178, 74, 0.6); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-hi); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-quiet {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-quiet:hover { color: var(--accent-hi); border-color: var(--accent); }