/* ==========================================================================
   Startseite – seitenspezifische Styles
   Tokens & Komponenten: styles.css · Abstände nur aus der Spacing-Scale
   ========================================================================== */

/* 01 Hero ---------------------------------------------------------------- */
.hero { padding-top: var(--spacer-huge); padding-bottom: var(--section-large); }
.hero__grid { display: grid; gap: var(--spacer-xlarge); align-items: center; }
.hero__content .label { margin-bottom: var(--space-small); }
.hero__content .display { margin-bottom: var(--space-small); }
.hero__content .body-l { max-width: var(--max-width-medium); }
.hero__content .btn-row { margin-top: var(--space-medium); }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-xxsmall) var(--space-small);
  margin-top: var(--spacer-large); padding-top: var(--space-medium);
  border-top: 1px solid var(--c-linie);
  font-size: var(--fs-small); color: var(--c-text-2); font-weight: 500;
}
.hero__trust li { display: flex; align-items: center; gap: var(--space-xxsmall); }
.hero__trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-moos); }

.hero__visual { width: 100%; max-width: var(--max-width-small); justify-self: center; }

/* Animierte E-Mail-Benachrichtigungen */
.notif-feed {
  --notif-h: 7rem;
  --notif-gap: var(--space-xsmall);
  position: relative;
  height: calc(var(--notif-h) * 3 + var(--notif-gap) * 2);
}
.notif {
  position: absolute; inset: 0 0 auto 0; height: var(--notif-h);
  display: grid; align-content: center; gap: var(--space-tiny);
  padding: var(--space-xsmall) var(--space-small);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--c-linie); border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform-origin: center top;
  transform: translateY(calc(var(--i, 0) * (var(--notif-h) + var(--notif-gap)))) scale(calc(1 - var(--i, 0) * 0.03));
  opacity: calc(1 - var(--i, 0) * 0.18);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  z-index: calc(10 - var(--i, 0));
}
.notif.is-entering { transform: translateY(calc(-1 * var(--space-small))) scale(0.96); opacity: 0; transition: none; }
/* Älteste Meldung sinkt hinter die vorletzte und blendet aus */
.notif.is-leaving { opacity: 0; transform: translateY(calc(2 * (var(--notif-h) + var(--notif-gap)) + var(--space-xsmall))) scale(0.88); }
.notif__head { display: flex; align-items: center; gap: var(--space-xxsmall); font-size: var(--fs-small); color: var(--c-meta); }
.notif__icon { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-s); flex: none; }
.notif__icon--outlook { border-radius: 0; object-fit: contain; }
.notif__app { font-weight: 500; }
.notif__time { margin-left: auto; white-space: nowrap; }
.notif__title { font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif__sub { font-size: var(--fs-small); color: var(--c-text-2); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__visual-note { font-size: var(--fs-label); color: var(--c-meta); text-align: right; margin-top: var(--space-small); }

@media (min-width: 992px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-xxlarge); }
  .hero__visual { justify-self: end; }
}
@media (max-width: 479px) {
  .notif-feed { --notif-h: 7rem; }
  .notif { padding: var(--space-xsmall); }
}

/* 02 Ergebnisse ------------------------------------------------------------ */
.results { padding-block: var(--section-medium); border-block: 1px solid var(--c-linie); background: var(--c-weiss); }
.results__title { margin-bottom: var(--spacer-large); }
.results__grid { display: grid; gap: var(--spacer-large) var(--space-medium); grid-template-columns: 1fr; }
.result { border-left: 2px solid var(--c-linie); padding-left: var(--space-small); }
.result:first-child { border-left-color: var(--c-koralle); }
.result__number { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.result__text { color: var(--c-text-2); margin-top: var(--space-xxsmall); }
.result { display: flex; flex-direction: column; }
/* Kundenlogo dezent unter dem Ergebnis – Höhe je Logo über --logo-h (px, optisch ausgeglichen) */
.result__logo {
  height: calc(var(--logo-h, 32) * 0.9px); width: auto; max-width: 100%;
  margin-top: auto; padding-top: var(--space-small);
  box-sizing: content-box; opacity: 0.6; object-fit: contain; object-position: left center;
}
@media (min-width: 480px) { .results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .results__grid { grid-template-columns: repeat(4, 1fr); } }


/* 03 Probleme -------------------------------------------------------------- */
.problem { padding-top: var(--space-small); }
.problem__no { font-size: var(--fs-label); font-weight: 600; color: var(--c-meta); letter-spacing: 0.08em; margin-bottom: var(--space-small); }
.problem h3 { margin-bottom: var(--space-xsmall); }

/* 04 Unterschied ----------------------------------------------------------- */
.compare { display: grid; gap: var(--space-medium); }
.compare__col .label { margin-bottom: var(--space-medium); }
.compare__label-strong { color: var(--c-waldgruen); }
.compare__list > div {
  display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-xsmall);
  padding-block: var(--space-small); border-top: 1px solid var(--c-linie);
}
.compare__list > div:last-child { padding-bottom: 0; }
.card--sage .compare__list > div { border-top-color: rgba(47, 107, 87, 0.2); }
.compare__list dt { font-size: var(--fs-small); font-weight: 600; color: var(--c-meta); padding-top: 0.1em; }
.compare__list dd { margin: 0; }
.card--paper .compare__list dd { color: var(--c-text-2); }
.card--sage .compare__list dd { font-weight: 500; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .compare__list > div { grid-template-columns: 1fr; gap: var(--space-tiny); } }

/* 05 Leistung / Säulen ----------------------------------------------------- */
.pillar { border-top: 1px solid var(--c-line-dark); padding-top: var(--space-medium); }
.pillar__media {
  margin: 0 0 var(--space-medium); aspect-ratio: 5 / 4;
  background: var(--c-papier); border-radius: var(--radius-l); overflow: hidden;
}
/* Bild füllt die Fläche komplett aus (ohne Rand links/rechts) */
.pillar__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pillar__no { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-koralle); margin-bottom: var(--space-xxsmall); }
.pillar h3 { margin-bottom: var(--space-xsmall); }
.pillar p:last-child { color: var(--c-on-dark); line-height: 1.6; }

/* 06 Ablauf ---------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-medium); }
.step { position: relative; }
.step__no {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--c-waldgruen); color: var(--c-papier); font-weight: 700; margin-bottom: var(--space-small);
}
.step:last-child .step__no { background: var(--c-koralle); color: var(--c-waldgruen); }
.step h3 { margin-bottom: var(--space-xsmall); }
.steps + .btn-row { margin-top: var(--spacer-xlarge); }
@media (min-width: 992px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Verbindungslinie zwischen den Nummern */
  .step:not(:last-child)::after {
    content: ''; position: absolute; top: calc(var(--space-large) + 1.5rem);
    left: calc(var(--space-large) + 4rem); right: calc(-1 * var(--space-medium) + var(--space-xsmall));
    border-top: 2px dashed var(--c-linie);
  }
}

/* 07 Über mich + Vorteile -------------------------------------------------- */
.about { display: grid; gap: var(--spacer-xlarge); align-items: start; }
.about__media img { border-radius: var(--radius-l); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.about__content .label { margin-bottom: var(--space-xsmall); }
.about__content .body-l { max-width: var(--max-width-large); }
.benefits {
  display: grid; gap: var(--space-medium);
  margin-top: var(--spacer-large); padding-top: var(--spacer-large); border-top: 1px solid var(--c-linie);
}
.benefits h3 { margin-bottom: var(--space-xxsmall); }
@media (min-width: 480px) { .benefits { grid-template-columns: 1fr 1fr; gap: var(--space-large) var(--space-medium); } }
@media (min-width: 992px) {
  .about { grid-template-columns: 5fr 7fr; gap: var(--space-xxlarge); }
  .about__media { position: sticky; top: calc(var(--navbar-height) + var(--space-medium)); }
}

/* Logo-Laufband: Stile in styles.css (Komponente .marquee) */
.logos__title { margin-bottom: var(--spacer-large); }

/* 08 Kundenstimmen --------------------------------------------------------- */
.testimonials { display: grid; gap: var(--space-medium); }
.testimonial { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-large); margin: 0; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font-size: var(--fs-body); line-height: 1.65; }
.testimonial.card--dark blockquote p { font-size: var(--fs-body-l); line-height: 1.55; }
.testimonial figcaption { display: grid; gap: var(--space-tiny); padding-top: var(--space-small); border-top: 1px solid var(--c-linie); }
.card--dark.testimonial figcaption { border-top-color: var(--c-line-dark); }
.testimonial__name { font-weight: 600; }
.testimonial__role { font-size: var(--fs-small); color: var(--c-meta); }
.card--dark .testimonial__role { color: var(--c-on-dark-meta); }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }

/* 09 Preis ----------------------------------------------------------------- */
.pricing { display: grid; gap: var(--spacer-xlarge); }
.phases { display: grid; gap: var(--space-large); }
.phase .label { margin-bottom: var(--space-xxsmall); }
.phase h3 { margin-bottom: var(--space-xxsmall); }
.price-options { display: grid; gap: var(--space-medium); }
.price { display: flex; flex-direction: column; }
.price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xsmall); }
.price__amount { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--space-medium); }
.price__note { color: var(--c-text-2); font-size: var(--fs-small); margin-top: var(--space-xxsmall); margin-bottom: var(--space-large); }
.card--dark .price__note { color: var(--c-on-dark); }
.card--dark .label { color: var(--c-on-dark-meta); }
.price .btn { margin-top: auto; }
.pricing__notes { display: grid; gap: var(--space-xsmall); margin-top: var(--space-medium); }
.pricing__followup {
  padding: var(--space-small); border-radius: var(--radius-l);
  background: var(--c-salbei); color: var(--c-waldgruen);
}
@media (min-width: 768px) {
  .phases { grid-template-columns: repeat(3, 1fr); gap: var(--space-medium); }
  .price-options { grid-template-columns: 1fr 1fr; }
}

/* 10 Für wen --------------------------------------------------------------- */
.fit { display: grid; gap: var(--spacer-large); align-items: center; }
.fit__head .label { margin-bottom: var(--space-xsmall); }
.fit__head .body-l { max-width: var(--max-width-small); }
.fit__card { padding: var(--space-medium); }
.fit__card .checklist { gap: var(--space-small); font-size: var(--fs-body); line-height: 1.55; }
.fit__card .checklist li::before { background-color: var(--c-weiss); }
@media (min-width: 992px) {
  .fit { grid-template-columns: 5fr 7fr; gap: var(--space-xxlarge); }
  .fit__card { padding: var(--space-large); }
}

/* 11 FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-linie); }
.faq__item { border-bottom: 1px solid var(--c-linie); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-medium);
  padding: var(--space-small) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-body-l); font-weight: 600; line-height: 1.4;
}
@media (min-width: 768px) { .faq__item summary { padding-block: var(--space-medium); } }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316302A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--c-salbei); }
.faq__item summary:hover { color: var(--c-moos); }
.faq__answer { padding: 0 var(--space-xlarge) var(--space-medium) 0; color: var(--c-text-2); line-height: 1.65; }
@media (max-width: 479px) { .faq__answer { padding-right: 0; } }

/* 12 Abschluss-CTA --------------------------------------------------------- */
.cta { text-align: center; padding: var(--spacer-xxlarge) var(--space-medium); }
.cta h2 { color: var(--c-papier); max-width: var(--max-width-large); margin-inline: auto; }
.cta .body-l { color: var(--c-on-dark); margin: var(--space-small) auto 0; max-width: var(--max-width-medium); }
.cta__actions { justify-content: center; margin-top: var(--space-medium); }