/* ==========================================================================
   Seitenspezifische Styles „Leuchtturm-Gespräch“
   Grundlage: PAGE_SPEC_LEUCHTTURM.md (Messwerte der Live-Seite)
   Globale Werte kommen aus design-system.css.

   --u = eine Basis-Einheit (15,75 px Desktop/Tablet, 14 px Mobile).
   Abstände werden als Vielfache davon angegeben, z. B. calc(1.5 * var(--u)).
   ========================================================================== */

:root {
  --u: var(--font-size-base);
  --col-gap: calc(2.4375 * var(--u));   /* 38,4 px – Abstand Text ↔ Bild */
  --notch: var(--u);                    /* Tiefe der Chevron-Kerbe */

  /* Seitenspezifische Abstände (Mobile-Werte weiter unten) */
  --sp-h-lg: calc(2 * var(--u));        /* unter großen Section-Überschriften */
  --sp-h-md: calc(1.5 * var(--u));      /* unter Überschriften vor Spalten */
  --sp-h3: var(--u);                    /* über/unter H3 in Spalten */
  --sp-compact: calc(0.9 * var(--u));   /* Absätze in Spalten */
  --sp-outro: calc(2 * var(--u));       /* Schlussabsatz Section 2 */
  --sp-bars: var(--u);                  /* Abstand um die Balken-Aussagen */
}

.icon-sprite {
  display: none;
}

/* ---------- Kopfleiste ---------- */
.site-header__inner {
  width: min(var(--container-width), 100% - 20px);
  margin: 0 auto;
  padding: 10px 0;
}
.site-header__logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* ---------- Sections (Grundgerüst) ---------- */
.section__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Vertikaler Fluss: Absätze, Bilder, Buttons usw. untereinander */
.flow > p,
.flow > .button-row,
.flow > .callout,
.flow > .media,
.flow > .quote { margin-block: var(--space-paragraph); }

.section__inner.flow > :first-child,
.hero__text > :first-child { margin-top: 0; }
.section__inner.flow > :last-child,
.hero__text > :last-child { margin-bottom: 0; }

/* In Spalten sind Absätze etwas enger (0,9 × Basis) */
.flow--compact > p,
.flow--compact .callout p { margin-block: var(--sp-compact); }
.flow--compact > h3 { margin-block: var(--sp-h3); }

/* Überschriften-Abstände nach unten */
.heading-lg { margin-bottom: var(--sp-h-lg); }   /* 31,5 px */
.heading-md { margin-bottom: var(--sp-h-md); }   /* 23,6 px */
h4 { margin-bottom: calc(0.6 * var(--u)); }

/* Button-Zeile */
.button-row {
  display: flex;
}
.button-row--center {
  justify-content: center;
}

/* Label über einer Überschrift */
.label {
  display: flex;
  width: fit-content;
}

.media {
  width: 100%;
  height: auto;
}

/* ---------- Spalten ---------- */
.cols {
  display: grid;
  column-gap: var(--col-gap);
  align-items: start;
}
/* 60/40 bzw. 40/60 wie bei Gamma: 60 % der (Breite + Abstand) minus Abstand */
.cols--60-40 { grid-template-columns: calc(60% - 0.4 * var(--col-gap)) minmax(0, 1fr); }
.cols--40-60 { grid-template-columns: calc(40% - 0.6 * var(--col-gap)) minmax(0, 1fr); }
.cols--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
}

/* ======================================================================
   1 · Hero
   ====================================================================== */
.hero__inner {
  display: grid;
  grid-template-columns: 62.5% 37.5%;
  max-width: var(--container-width);
  margin: 0 auto;
}
.hero__text {
  align-self: center;
  padding: var(--section-padding-y) var(--section-padding-x);
}
.hero h1 {
  margin: calc(0.38 * var(--u)) 0 var(--sp-h-md);
}
.hero__media {
  padding: var(--u) 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ======================================================================
   2 · Nummerierte Punkte
   ====================================================================== */
.numbered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-grid);
  row-gap: calc(1.75 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.numbered__number {
  display: block;
  padding-bottom: calc(0.27 * var(--u));
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: calc(0.63 * var(--u));
  font-family: var(--font-heading);
  line-height: 1.25;
}
.numbered__item p {
  margin: 0;
}
.numbered__outro {
  margin: var(--sp-outro) 0 0;
}

/* ======================================================================
   4 · Chevron-Schritte und Info-Boxen
   ====================================================================== */
.steps {
  display: grid;
  gap: var(--notch);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: calc(5 * var(--u)) 1fr;
  column-gap: var(--u);
}
/* Pfeilform: äußere Fläche = Rahmenfarbe, innere Fläche = Füllfarbe */
.step__marker {
  position: relative;
  height: calc(100% + var(--notch));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
}
.step__marker::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--color-surface-subtle);
  clip-path: polygon(0 0, 50% calc(var(--notch) - 0.5px), 100% 0, 100% calc(100% - var(--notch) + 0.5px), 50% 100%, 0 calc(100% - var(--notch) + 0.5px));
}
.step__icon {
  position: relative;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  color: var(--color-text);
}
.step__content {
  padding-top: var(--u);
}
.step__content p {
  margin: calc(0.6 * var(--u)) 0 0;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid);
  margin-top: calc(var(--notch) + var(--space-paragraph));
}
.box {
  padding: var(--u);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
.box p {
  margin: 0;
}

/* ======================================================================
   5 · Warum JETZT
   ====================================================================== */
.callout--heading .callout__icon {
  width: calc(1.5625 * var(--u));
  height: calc(1.25 * var(--u));
  margin-top: calc(1.15 * var(--u));
}
.callout--heading h4 {
  margin-block: var(--sp-h3);
}

/* ======================================================================
   6 · Wer bin ich?
   ====================================================================== */
.about__spacer {
  height: calc(23.65 * var(--u));
}

/* ======================================================================
   7 · Testimonials
   ====================================================================== */
.testimonial {
  position: relative;
  margin: 0;
  padding: calc(1.5 * var(--u));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-background);
}
.testimonial blockquote {
  margin: 0;
}
.testimonial p {
  margin: 0;
}
.testimonial figcaption {
  margin-top: calc(0.6 * var(--u));
}
.testimonial__mark {
  position: absolute;
  width: calc(1.2 * var(--u));
  height: calc(1.2 * var(--u));
  fill: var(--color-primary);
}
.testimonial__mark--open {
  top: -8px;
  left: -8px;
  filter: drop-shadow(0.25em 0 0 var(--color-background)) drop-shadow(0 0.25em 0 var(--color-background));
}
.testimonial__mark--close {
  right: -7px;
  bottom: -7px;
  filter: drop-shadow(-0.25em 0 0 var(--color-background)) drop-shadow(0 -0.25em 0 var(--color-background));
}
.testimonials__outro {
  margin-bottom: 0;
}

/* ======================================================================
   8 · FAQ
   ====================================================================== */
.faq__heading {
  margin-top: calc(0.38 * var(--u));
}
.faq__item {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-background);
}
.faq__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(3 * var(--u));
  border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;
  background: var(--color-surface-subtle);
}
.faq__head svg {
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  color: var(--color-text);
}
.faq__body {
  flex: 1;
  min-width: 0;
  padding: var(--u);
}
.faq__body p {
  margin: calc(0.6 * var(--u)) 0 0;
}

/* ======================================================================
   9 · Bist du bereit? (Aussagen mit rotem Balken)
   ====================================================================== */
.bars {
  display: grid;
  gap: calc(1.714 * var(--u));
  margin: var(--sp-bars) 0;
}
.bar {
  position: relative;
  padding: 2px 0 2px calc(1.27 * var(--u));
}
.bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: var(--color-primary);
}
.flow--compact .bar p { margin: var(--sp-compact) 0 0; }
.flow--compact .bar p:first-child { margin-top: 0; }

/* ======================================================================
   10 · Abschluss mit Hintergrundbild
   ====================================================================== */
.closing {
  position: relative;
  isolation: isolate;
}
/* Leuchtturm-Hintergrundbild (Original ATxETZoCQedgvpdV7AwB4.png):
   füllt die ganze Section, „cover“, zentriert, mit 85 % Überlagerung
   in Hintergrundfarbe. (Gamma blendet es von 90 % Größe auf 100 % ein;
   die Animation wird nicht nachgebaut, nur der Endzustand.) */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--color-background-mask), var(--color-background-mask)),
    url("../images/ATxETZoCQedgvpdV7AwB4.png") center / cover no-repeat;
}
.lead {
  font-size: var(--font-size-lead);
  line-height: 1.6;
}
.flow--compact > .lead {
  margin-block: var(--sp-compact);
}
.closing__portrait {
  width: calc(20.44 * var(--u));
  max-width: 100%;
  aspect-ratio: 1.5646;
  margin-block: var(--space-paragraph);
}
.closing__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.quote p {
  margin-block: var(--sp-compact);
}

/* ======================================================================
   Mobile (< 768 px): alles einspaltig
   ====================================================================== */
@media (max-width: 767px) {
  :root {
    --sp-h-lg: calc(1.571 * var(--u));  /* 22 px */
    --sp-h-md: var(--u);                /* 14 px */
    --sp-h3: calc(0.8 * var(--u));
    --sp-compact: calc(0.8 * var(--u));
    --sp-outro: calc(1.5 * var(--u));
    --sp-bars: 9px;
  }

  .bar {
    padding-bottom: 0;
  }

  .numbered {
    row-gap: calc(1.82 * var(--u));
  }

  .hero__inner,
  .cols,
  .cols--60-40,
  .cols--40-60,
  .cols--50-50,
  .grid-2,
  .numbered,
  .boxes {
    grid-template-columns: minmax(0, 1fr);
  }

  .button-row .button {
    width: 100%;
  }

  .hero__media {
    padding: 16px 18.5px;
  }
  .hero__media img {
    height: auto;
    aspect-ratio: 338 / 292;
    border-radius: 0;
  }

  .about__spacer {
    height: calc(23.15 * var(--u));
  }

  /* Leuchtturm-Hintergrund auf Mobile ohne Rundung */
  .closing::before {
    border-radius: 0;
  }

  /* FAQ: Kopfzeile wird zur linken Icon-Spalte */
  .faq__item {
    flex-direction: row;
  }
  .faq__head {
    flex: none;
    width: 56px;
    height: auto;
    border-radius: calc(var(--radius-card) - 2px) 0 0 calc(var(--radius-card) - 2px);
  }
}