/*
 * Seitenspezifische Bausteine: Hero, Zahlen-Grid, FAQ, Slider, Video-Facade.
 * Wird ab Phase 3 mit der Startseite gefüllt.
 */

/* -------------------------------------------------------------------- Hero */

/* Original: .section-pd — weisse Fläche unter dem grünen Header-Streifen */
.hero {
  position: relative;
  /* Mehr Luft zwischen grünem Header und Überschrift — 40px klebten. */
  padding-block: 72px 100px;
  text-align: center;
  overflow: hidden;
}

/*
 * 612px aus dem Export brachen die Zeile schon nach rund 22 Zeichen — bei
 * 3rem Schrift standen drei kurze, zerrissene Zeilen. Als ch-Wert wächst die
 * Breite mit der Schriftgrösse mit.
 *
 * `text-wrap: balance` aus base.css ist hier abgeschaltet: es zog die
 * deutsche Zeile ausgerechnet am Bindestrich auseinander
 * („Dein Aromatherapie-" / „Kompass für jede Lebenslage"), weil beide Hälften
 * dadurch gleichmässiger wurden. `pretty` bricht normal um und verhindert
 * nur die einzeln stehende letzte Zeile.
 */
.hero h1 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.hero__lead {
  /* 422px aus dem Export entsprachen rund 48 Zeichen — als ch-Wert wächst
     die Zeile jetzt mit der Schriftgrösse mit, statt zu brechen. */
  max-width: 48ch;
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/*
 * Mehrere Buttons nebeneinander — im Original die "buttons-row". Ohne
 * Ausrichtung schliesst sie links an den Text an (Zweispalter), mit
 * --center steht sie unter einem Raster.
 */
.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-row--center {
  justify-content: center;
  margin-top: var(--space-12);
}

/*
 * Original: .inner-section.v1-inner-section + .section-bg.
 * Der grüne Backdrop deckt nur das untere Drittel; das Gerätebild ragt oben
 * darüber hinaus. Das Original löst das über negative Ränder — hier reicht
 * ein absolut gesetztes Pseudoelement, das sich responsiv von selbst mitträgt.
 */
.hero__stage {
  position: relative;
  margin-top: 56px;
}

.hero__stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 46%;
  border-radius: var(--radius-footer);
  background-color: var(--brand-soft);
  background-image: url("/assets/images/hero-backdrop.webp");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
 * Etwas schmaler als die Bühne und mittig: sonst stossen die äusseren Geräte
 * direkt an die Kante des grünen Grunds.
 */
.hero__devices {
  display: block;
  width: 92%;
  margin-inline: auto;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .hero__stage {
    margin-top: 32px;
  }

  .hero__stage::before {
    height: 38%;
  }
}

/* ------------------------------------------------------------ Section-Titel */

/* Original: .h2._50ch — linksbündig trotz umgebendem .text-center */
/*
 * Der Abstand zur folgenden Inhaltsgruppe sitzt hier, nicht an den einzelnen
 * Grids. Im Export brachte jedes Grid seinen eigenen Wert mit (70px beim
 * Feature-Grid, 48px bei Proof und Posts, gar keinen beim FAQ, wo die
 * Überschrift dadurch am ersten Eintrag klebte).
 */
.section__title {
  max-width: 25ch;
  margin-bottom: var(--space-title);
}

/*
 * FAQ-Überschrift auf dieselbe Achse wie das Akkordeon. Das Akkordeon ist auf
 * 800px begrenzt und zentriert, die Überschrift stand im Export am linken
 * Containerrand — ein sichtbarer Versatz von rund 250px.
 */
.container:has(> .faq) > .section__title {
  max-width: 800px;
  margin-inline: auto;
}

/* ------------------------------------------------------------ Feature-Grid */

/*
 * Drei Spalten mit je zwei Karten. Das Original erreicht die Anordnung über
 * drei verschachtelte Spalten-Container; hier macht es grid-auto-flow bei
 * flacher Listen-Semantik. Reihe 1 zeigt dadurch Karte 1, 3 und 5.
 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: var(--space-8);
}

.feature-grid .card {
  gap: var(--space-4);
  justify-content: space-between;
  background-color: var(--brand-tint);
}

.feature-grid h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 600;
}

.feature-grid p {
  margin: 0;
}

/* align-self, sonst streckt der Flex-Container das Icon auf Kartenbreite */
.feature-grid__icon {
  align-self: flex-start;
  width: auto;
  height: 100px;
  margin-top: var(--space-6);
}

@media screen and (max-width: 991px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 24px;
  }
}

@media screen and (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- Zweispalter */

.section--tint {
  background-color: var(--brand-tint);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

.split__text h2 {
  margin-bottom: var(--space-4);
}

/*
 * Nur direkte Absätze. Ohne den Kindselektor traf die Regel auch die
 * Formularzeilen auf der Warteliste (.form__field ist ein <p>) und schob
 * deren Button 32px unter das Eingabefeld.
 */
.split__text > p {
  margin-bottom: var(--space-8);
  /* Zweispalter werden auf breiten Schirmen sonst zu lang zum Lesen */
  max-width: 54ch;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-card);
}

/*
 * Original: div_centered > div_desktop_video — Text zentriert, das Video
 * darunter über die volle Breite statt als halbe Spalte.
 */
.stack {
  display: grid;
  justify-items: center;
  gap: var(--space-10);
}

.stack__text {
  max-width: 62ch;
  text-align: center;
}

.stack__media {
  width: 100%;
  max-width: 1000px;
}

.stack__media .video {
  width: 100%;
}

/* Gerätebild unter dem Intro des Planbereichs. */
.plans__devices {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: var(--space-10) auto var(--space-16);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-bottom: var(--space-title);
}

.section__head h2 {
  max-width: 25ch;
  margin: 0;
}

/* ------------------------------------------------------------- CTA-Section */

/*
 * Original: .cta-section > .inner-section.cta-01 — der grüne Grund liegt als
 * Karte mit runden Ecken und Hintergrundbild im Inhalt, nicht als Streifen
 * über die volle Fensterbreite.
 */
.cta-section {
  padding-block: var(--section-padding);
}

.cta-card {
  padding: var(--space-12);
  border-radius: var(--radius-card);
  background-color: var(--brand-mid);
  background-image: url("/assets/images/cta-expert-bg.webp");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--surface);
  overflow: hidden;
}

.cta-card h2,
.cta-card p {
  color: var(--surface);
}

.cta-card p {
  font-size: 1.25rem;
}

/* Zitat im Zweispalter — abgesetzt, ohne als Kasten zu wirken. */
.split__quote {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-6);
  border-left: 3px solid var(--brand-light);
  max-width: 54ch;
}

.split__quote p {
  margin: 0;
  color: var(--brand-deep);
  font-style: normal;
  /* Manrope ist eine Variable Font (200–800), 450 wird also wirklich
     gezeichnet und nicht auf 400 oder 500 gerundet. */
  font-weight: 450;
}

.cta-card .split__quote p {
  color: var(--surface);
}

/* -------------------------------------------------------------- Proof-Grid */

/*
 * Original: zwei gleich breite Spalten — links ein Bild über die volle Höhe,
 * rechts die beiden Karten untereinander. Der Nachbau hatte das Bild
 * weggelassen und die Karten nebeneinander gestellt.
 */
.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

.proof__picture {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.proof-grid .card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-6);
}

.proof-grid h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 600;
}

.proof-grid p {
  margin: 0;
}

.proof-grid__icon {
  flex: none;
  width: 80px;
  height: 80px;
}

/* --------------------------------------------------------------- Post-Grid */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.post-grid .card {
  padding: 0;
  background-color: var(--surface);
  overflow: hidden;
}

.post-grid__link {
  color: inherit;
  text-decoration: none;
}

.post-grid__link:hover {
  text-decoration: none;
}

.post-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post-card__body h2,
.post-card__body h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

/* ---------------------------------------------------------- FAQ-Akkordeon */

.faq {
  max-width: 800px;
  margin-inline: auto;
}

/* Original: schmaler Text, darunter mittig der Button zur Kontaktseite. */
.faq__after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.faq__footnote {
  max-width: 46ch;
  margin: 0;
  text-align: center;
  color: var(--ink-muted);
}

/*
 * Akkordeon auf hellem Markengrün statt Weiss, damit sich die Fragen von der
 * Seite abheben. Text bewusst auf --ink (nicht --ink-muted): auf der getönten
 * Fläche braucht die Antwort den vollen Kontrast.
 */
.accordion {
  border: 1px solid var(--brand-pale);
  border-radius: var(--radius-card);
  background-color: var(--brand-tint);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.accordion__trigger,
.accordion__panel,
.accordion__panel p,
.accordion__panel li {
  color: var(--ink);
}

.accordion + .accordion {
  margin-top: var(--space-4);
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  font-size: var(--text-h3);
  font-weight: 700;
  text-align: left;
}

.accordion__icon {
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  /* Dunkleres Grün auf der hellgrünen Fläche — 5:1, gut sichtbar. */
  background-color: var(--brand);
  transition: transform var(--ease);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(0deg);
}

/*
 * Panel über grid-template-rows animiert — braucht keine feste Höhe.
 *
 * Grundzustand ist OFFEN: ohne JavaScript kann niemand aufklappen, also
 * müssen die Antworten von vornherein lesbar sein. Erst .js klappt zu und
 * überlässt die Steuerung dem Button. Der Zustand hängt an .is-open am
 * Container, nicht am Button — der steckt im <h3> und ist damit kein
 * Geschwister des Panels.
 */
.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--ease);
}

.js .accordion__panel {
  grid-template-rows: 0fr;
}

.js .accordion.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  margin: 0;
  padding: 0 var(--space-6) var(--space-6);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition: none;
  }
}

/* ------------------------------------------------------------------ Slider */

.slider__track {
  display: flex;
  gap: 24px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

/*
 * Der Track ist per Tastatur fokussierbar (sonst kommt man ohne Maus nicht
 * an die hinteren Karten). Der Rahmen liegt innen, weil ein äusserer am
 * überlaufenden Rand des Tracks abgeschnitten würde.
 */
.slider__track:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

/* Steuerzeile verschwindet, wenn alle Karten nebeneinander ins Bild passen. */
.slider__nav[hidden] {
  display: none;
}

.slider__slide {
  flex: 0 0 min(410px, 85vw);
  scroll-snap-align: start;
}

/* Steuerzeile: Pfeil, Punkte, Pfeil — mittig unter dem Slider. */
.slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--ink-strong);
  transition: background-color var(--ease), border-color var(--ease), opacity var(--ease);
}

.slider__arrow .icon {
  width: 18px;
  height: 18px;
}

/* Ein Symbol für beide Richtungen — gespiegelt statt doppelt im Sprite. */
.slider__arrow--prev .icon {
  transform: scaleX(-1);
}

.slider__arrow:hover:not(:disabled) {
  border-color: var(--brand);
  background-color: var(--brand);
  color: var(--surface);
}

/* Am ersten bzw. letzten Ausschnitt geht es in diese Richtung nicht weiter. */
.slider__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.slider__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
}

/*
 * Der Punkt bleibt klein, die Trefferfläche wird über Padding auf 24px
 * gebracht — darunter gilt das Ziel als zu klein für Touch-Bedienung. Der
 * Abstand sitzt deshalb im Padding, nicht im gap: so stehen die Punkte eng
 * beieinander, ohne dass die Ziele schrumpfen.
 */
.slider__dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  background-clip: content-box;
  border-radius: 50%;
  background-color: var(--border);
  transition: background-color var(--ease);
}

.slider__dot[aria-current="true"] {
  background-color: var(--brand);
}

/* Auf dem Telefon grössere Trefferfläche — der Punkt selbst bleibt gleich. */
@media screen and (max-width: 767px) {
  .slider__dot {
    width: 32px;
    height: 32px;
    padding: 12px;
  }
}

/*
 * Zitat über die volle Kartenhöhe, damit die Namenszeile unten andockt.
 * Vorher folgte sie direkt auf das Zitat — bei ungleich langen Stimmen
 * standen die Namen nebeneinanderliegender Karten auf verschiedenen Höhen.
 */
.slider__slide blockquote {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.slider__slide h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 600;
}

/* Das Zitat über der Stimme ist eine Zeile, keine Abschnittsüberschrift —
   auf Telefonbreite las es sich wie eine zweite h2. */
@media screen and (max-width: 560px) {
  .slider__slide h3 {
    font-size: 1.2rem;
  }
}

.slider__slide footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: var(--space-5);
}

.slider__slide cite {
  font-style: normal;
  font-weight: 700;
}

.slider__slide footer span {
  color: var(--ink-muted);
  font-size: .95rem;
}

/* ----------------------------------------------------------- Video-Facade */

/*
 * Kein eigener Hintergrund: das Poster deckt die Fläche, und an der gerundeten
 * Kante mischte sich sonst der dunkle Grund ins Antialiasing — sichtbar als
 * feiner Bogen in jeder Ecke.
 */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background-color: transparent;
  overflow: hidden;
  cursor: pointer;
}

/* Hochkant zeigt das Poster ein Smartphone, das seine Rundung mitbringt. */
.video--portrait {
  aspect-ratio: 9 / 16;
  border-radius: 0;
}

.video--portrait img {
  object-fit: contain;
}

.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--brand);
  font-size: 1.5rem;
  box-shadow: var(--shadow-raised);
  transition: transform var(--ease);
}

.video:hover .video__play {
  transform: scale(1.08);
}

.video__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------ Breakpoints */

@media screen and (max-width: 991px) {
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  /*
   * Beiträge zu zweit statt sofort einspaltig. Bei voller Breite wird eine
   * Kachel auf dem Tablet so gross, dass ihr Bild den halben Schirm füllt und
   * pro Bildschirmhöhe nur noch ein Beitrag zu sehen ist.
   */
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Erst wenn zwei Kacheln zu schmal für Titel und Bild werden, einspaltig. */
@media screen and (max-width: 620px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .hero {
    padding-block: 44px 64px;
  }

  .proof-grid .card {
    flex-direction: column;
  }

  .accordion__trigger {
    padding: 20px;
    font-size: 1.2rem;
  }

  .accordion__panel p {
    padding: 0 20px 20px;
  }
}

/* ============================================================== Preistabelle */

.pricing__intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.pricing__lead {
  color: var(--ink);
}

.pricing__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.pricing__periods {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
}

.pricing__period {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  color: var(--ink-muted);
  transition: background-color var(--ease), color var(--ease);
}

.pricing__period[aria-pressed="true"] {
  background-color: var(--brand);
  color: var(--surface);
}

.pricing__save {
  white-space: nowrap;
}

.pricing__currency {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
}

/*
 * Als Pille wie der Zeitraum-Umschalter daneben. appearance: none, weil der
 * Systemrahmen die Rundung sonst überzeichnet; der Pfeil kommt als
 * Hintergrundbild zurück.
 */
/* Nach einem Mausklick soll der Ring nicht stehen bleiben. */
.pricing__currency select:focus:not(:focus-visible) {
  outline: none;
}

.pricing__currency select {
  appearance: none;
  padding: 11px 38px 11px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}

/* Ohne JavaScript ist der Umschalter wirkungslos — dann lieber ausblenden. */
html:not(.js) .pricing__controls {
  display: none;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*
   * start liess die Karten unterschiedlich hoch enden (das height:100% am
   * Kind lief dabei ins Leere) — bei ungleich langen Leistungslisten standen
   * die Kartenböden treppenförmig versetzt.
   */
  align-items: stretch;
  gap: var(--space-8);
}

.pricing__card {
  gap: var(--space-5);
}

/*
 * Subgrid richtet Titel, Beschreibung, Preis, Button und Leistungsliste über
 * alle drei Karten auf gemeinsame Höhen aus. Ohne Subgrid bleiben die Karten
 * gleich hoch, nur die Zeilen darin sitzen wie bisher versetzt.
 */
@supports (grid-template-rows: subgrid) {
  .pricing__grid {
    grid-template-rows: auto auto auto auto auto;
  }

  .pricing__card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }

  /* Preis an den Fuss seiner Zeile, damit die Trennlinien darunter fluchten */
  .pricing__prices {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /*
   * Ohne JavaScript stehen alle acht Preisvarianten untereinander. Die
   * Preiszeile würde dann auf deren Höhe wachsen und in der Trial-Karte, die
   * nur "Free" zeigt, eine grosse Lücke hinterlassen.
   */
  html:not(.js) .pricing__grid {
    grid-template-rows: none;
  }

  html:not(.js) .pricing__card {
    display: flex;
    grid-row: auto;
  }
}

/*
 * Der meistgewählte Plan steht kräftiger da: getönte Fläche, Markenrahmen und
 * ein angehobener Schatten. Vorher unterschied ihn nur eine Rahmenfarbe.
 */
.pricing__card--featured {
  background-color: var(--brand-tint);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-raised);
}

.pricing__card h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.pricing__desc {
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
}

.pricing__prices {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.pricing__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.pricing__price + .pricing__price {
  margin-top: 4px;
}

.pricing__amount {
  font-size: 2.8rem;
  /* Grösser, aber leichter — bei 700 wirkte die Zahl wie eine Überschrift. */
  font-weight: 500;
  line-height: 1.1;
}

.pricing__code {
  margin-left: .15em;
  color: var(--ink-muted);
  font-size: 1.05rem;
  font-weight: 500;
}

.pricing__cadence {
  color: var(--ink-muted);
  font-size: .9rem;
}

.pricing__features {
  display: grid;
  gap: 12px;
  margin: 0;
}

.pricing__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  /* Im Original stehen die Leistungen auf Fliesstextgrösse, nicht kleiner. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.pricing__features .icon {
  width: 1.25em;
  height: 1.25em;
  margin-top: .15em;
  color: var(--brand);
}

.pricing__features .is-excluded {
  color: var(--ink-muted);
}

.pricing__features .is-excluded .icon {
  color: var(--ink-muted);
}

/*
 * Sichtbarkeitsregeln: greifen nur mit JavaScript. Ohne .js bleiben alle
 * Preisvarianten stehen, damit die Seite auch dann vollstaendig informiert.
 */
.js .pricing[data-period="year"] [data-period="month"],
.js .pricing[data-period="month"] [data-period="year"] {
  display: none;
}

.js .pricing[data-currency="eur"] .pricing__price[data-currency]:not([data-currency="eur"]),
.js .pricing[data-currency="chf"] .pricing__price[data-currency]:not([data-currency="chf"]),
.js .pricing[data-currency="gbp"] .pricing__price[data-currency]:not([data-currency="gbp"]),
.js .pricing[data-currency="usd"] .pricing__price[data-currency]:not([data-currency="usd"]) {
  display: none;
}

/*
 * Zwei Karten nebeneinander als Zwischenstufe. Vorher sprang das Raster von
 * drei Spalten direkt auf eine — schon ab 991px, wo zwei Karten noch bequem
 * nebeneinander passen. Einspaltig wird jede Karte so hoch, dass man für den
 * Vergleich dreimal scrollen muss.
 *
 * Subgrid wird dabei aufgehoben: es richtet fünf Zeilen über drei Karten aus
 * und geht schief, sobald die dritte Karte in eine zweite Reihe rutscht.
 */
@media screen and (max-width: 991px) {
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    grid-template-rows: none;
  }

  .pricing__card {
    display: flex;
    grid-row: auto;
  }

  /* Drei Karten in zwei Spalten lassen unten rechts eine Lücke — die dritte
     steht deshalb mittig unter den beiden anderen, nicht angeschlagen links. */
  .pricing__card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - var(--space-3));
    margin-inline: auto;
  }

  .pricing__controls {
    justify-content: center;
  }
}

@media screen and (max-width: 680px) {
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Einspaltig gibt es keine Lücke mehr zu füllen — die Sonderbreite der
     dritten Karte aus der zweispaltigen Stufe muss hier wieder weg. */
  .pricing__card:last-child {
    grid-column: auto;
    width: auto;
  }
}

/*
 * Der Preis trug am Telefon noch die Desktop-Grösse und stand dadurch fast so
 * gross da wie die Seitenüberschrift — neben dem 1rem-Text der Karte kippte
 * das Verhältnis.
 */
@media screen and (max-width: 480px) {
  .pricing__amount {
    font-size: 2rem;
  }
}

/* ========================================================= Vergleichstabelle */

.compare__intro {
  max-width: 60ch;
  margin: 0 auto 48px;
  text-align: center;
}

.compare__intro p {
  color: var(--ink);
}

/*
 * Vergleichstabelle — Aufbau wie im Webflow-Original: keine Umrandung, keine
 * getönten Gruppenzeilen, nur feine Trennlinien und eine senkrechte Kante vor
 * den Plan-Spalten. Auf schmalen Schirmen scrollt sie in sich, statt die
 * Seite zu dehnen.
 */
.compare__scroll {
  max-width: 980px;
  margin-inline: auto;
  overflow-x: auto;
}

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

/*
 * Kompaktere Zeilen als im Original: dort standen 16px Schrift in 90px hohen
 * Zeilen, was die Tabelle über zwei Bildschirmhöhen zog. Schrift etwas
 * grösser, Polster deutlich kleiner.
 */
.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}

.compare tbody th {
  font-size: 1.15rem;
  line-height: 1.45;
  font-weight: 400;
}

/*
 * Die Professional-Spalte leicht getönt, damit die beiden Pläne beim
 * Querlesen auseinanderzuhalten sind.
 */
.compare thead th:last-child,
.compare tbody td:last-child {
  background-color: var(--brand-tint);
}

/*
 * Plannamen stehen ungetrennt — die Spalten sind dafür breit genug. Der
 * Selektor nennt th mit, sonst gewinnt ".compare thead th span" darüber.
 */
.compare thead th .compare__plan {
  display: block;
  margin-top: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
}

/*
 * Kopfzeile: Planbezeichnung gross, Zusatz klein darunter. Oben ausgerichtet —
 * bei bottom sass "Professional" tiefer als "Home", weil sein Zusatz nur eine
 * statt zwei Zeilen braucht.
 */
.compare thead th {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--leading-tight);
  text-align: center;
  vertical-align: top;
}

/*
 * Nur die direkten Kinder: der Zusatz unter dem Plannamen. Ohne den
 * Kindselektor traf die Regel auch die Spans innerhalb von .compare__plan
 * (Kurzform und „Version") und hätte sie klein und grau gesetzt.
 */
.compare thead th > span {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: .9rem;
  font-weight: 400;
}

/* Kurzform „Pro" — erscheint erst, wenn die Spalte für den vollen Namen zu
   schmal wird. Der volle Name bleibt dann für Screenreader stehen. */
.compare__plan-short {
  display: none;
}

/*
 * Die erste Spalte trägt im Original keine Überschrift. Sie bleibt im Markup
 * stehen, damit Screenreader eine vollständige Kopfzeile vorfinden, wird aber
 * nicht angezeigt.
 */
.compare thead th:first-child {
  font-size: 0;
}

.compare thead th:not(:first-child),
.compare td {
  width: 210px;
  text-align: center;
}

/* Gruppenzeile: nur fett, ohne Farbfläche */
.compare tbody .compare__group th {
  padding-top: var(--space-8);
  font-weight: 700;
  text-align: left;
}

/* Senkrechte Kante vor den Plan-Spalten, wie im Original */
.compare thead th:nth-child(2),
.compare tbody td:first-of-type {
  border-left: 1px solid var(--border);
}

/*
 * Farbabstufung zwischen den Plänen: Home heller, Professional kräftiger.
 * Der Export nutzte dafür #90b67b und #4d8951 — ersterer kommt auf Weiss nur
 * auf 2,3:1 und wäre als bedeutungstragendes Symbol zu schwach. Beide Töne
 * sind so weit abgedunkelt, dass sie die 3:1-Schwelle für grafische Elemente
 * halten, der Helligkeitsunterschied aber erhalten bleibt.
 */
.compare td .icon {
  width: 1.5em;
  height: 1.5em;
}

.compare td:first-of-type .icon {
  color: #6f9c5c;
}

.compare td:last-child .icon {
  color: var(--brand);
}

.compare td.is-excluded .icon {
  color: #9aa096;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

/*
 * Auf dem Handy fiel die Professional-Spalte ganz aus dem Blickfeld: bei
 * 500px Mindestbreite passte neben der Merkmalsspalte nur noch Home auf den
 * Schirm — und in der Gruppe "Advanced Features" sah man dann eine Kolonne
 * aus lauter Kreuzen, ohne die Häkchen daneben, die den Unterschied erst
 * erklären. Die Tabelle hat aber genau diesen Vergleich zur Aufgabe, deshalb
 * gibt sie die Mindestbreite auf: Plan-Spalten auf Icon-Breite, Zusatz unter
 * dem Plannamen weg, Polster kleiner. So stehen beide Spalten ab 320px im
 * Bild und es muss nicht gewischt werden.
 */
/*
 * Ab Tabletbreite bekommen die beiden Häkchen-Spalten nur noch so viel Platz,
 * wie das Symbol braucht — die 210px aus der Desktop-Ansicht drückten die
 * Merkmalspalte auf ein Drittel der Tabelle, obwohl dort der ganze Text
 * steht. Das „Version" unter dem Plannamen fällt weg: es trägt nichts bei und
 * kostet eine Zeile. Zusammen mit der kleineren Mindestbreite muss ab hier
 * auch nicht mehr gewischt werden.
 */
@media screen and (max-width: 768px) {
  .compare {
    min-width: 0;
  }

  .compare thead th:not(:first-child),
  .compare td {
    width: 120px;
  }

  .compare thead th {
    font-size: 1.15rem;
  }

  .compare thead th .compare__plan {
    font-size: 1.1rem;
  }

  .compare__plan-suffix {
    display: none;
  }

  .compare th,
  .compare td {
    padding: var(--space-4) var(--space-3);
  }
}

@media screen and (max-width: 560px) {
  .compare {
    min-width: 0;
    table-layout: fixed;
  }

  .compare thead th:not(:first-child),
  .compare td {
    width: 76px;
  }

  .compare thead th {
    padding-bottom: var(--space-3);
    font-size: .95rem;
    overflow-wrap: break-word;
  }

  /* Der Zusatz unter dem Plannamen trägt hier nichts bei und drückt ihn in
     vier Zeilen — der Planname selbst (.compare__plan) bleibt. */
  .compare thead th > span:not(.compare__plan) {
    display: none;
  }

  /*
   * „Professional" braucht in einer 76px-Spalte drei gebrochene Zeilen und
   * ist so kaum zu lesen. Sichtbar steht deshalb „Pro"; der volle Name bleibt
   * für Screenreader im Dokument, und die Tabellenbeschriftung nennt ihn
   * ohnehin aus.
   */
  .compare__plan-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare__plan-short {
    display: inline;
  }

  .compare thead th .compare__plan {
    font-size: 1rem;
  }

  .compare th,
  .compare td {
    padding: var(--space-3) var(--space-2);
  }

  .compare tbody th {
    padding-left: 0;
    font-size: .9rem;
    /* Zusammensetzungen wie „Inhaltsstoffgruppen" sind bei 320px breiter als
       ihre Spalte und schoben den Text sonst unter die Nachbarspalte. */
    overflow-wrap: break-word;
  }

  .compare td .icon {
    width: 1.35em;
    height: 1.35em;
  }
}

/* Zweispalter mit vertauschter Reihenfolge (Bild links) */
.split--reverse .split__media {
  order: -1;
}

.split__media--narrow {
  max-width: 320px;
  margin-inline: auto;
}

@media screen and (max-width: 991px) {
  .split--reverse .split__media {
    order: 0;
  }
}

/* ================================================ Hinweisseiten (404, Danke) */

.notice__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.notice__icon {
  width: 47px;
  height: 59px;
  margin: 0 auto 32px;
}

.notice__badge {
  display: block;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 24px;
}

.notice__inner p {
  color: var(--ink);
}

.notice__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ========================================================== Textseiten / Bio */

/* Original: text-center im ersten Abschnitt der About-Seite. */
.prose--centered {
  margin-inline: auto;
  text-align: center;
}

.prose {
  max-width: 70ch;
  /* Rechtstexte enthalten lange URLs und Unterschriftslinien aus Unterstrichen.
     Ohne das schieben sie auf dem Telefon die ganze Seite nach rechts. */
  overflow-wrap: break-word;
}

.prose .lead {
  font-size: 1.25rem;
  color: var(--ink);
}

/*
 * Original: grid-2-columns _1-1fr-1fr align-stretch — zwei gleich breite
 * Spalten, beide auf dieselbe Höhe gezogen. Vorher stand das Portrait in
 * einer festen 320px-Spalte; weil die beiden Fotos unterschiedliche Formate
 * haben (Eliane hochkant, Sibylle quer), wirkten die Blöcke ungleich.
 */
.bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-12);
}

.bio + .bio {
  margin-top: var(--space-16);
}

/*
 * Beide Portraits füllen dieselbe Fläche — sie haben unterschiedliche
 * Seitenverhältnisse (Eliane hochkant, Sibylle quer), deshalb Ausschnitt
 * statt Verzerrung.
 */
.bio__portrait {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 520px;
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: 50% 30%;
}

.bio__text {
  align-self: center;
}

.bio--reverse .bio__portrait {
  order: 1;
}

/* Zeilenlänge begrenzen — über die volle Spaltenbreite wären es rund 100
   Zeichen pro Zeile, lesbar sind bis etwa 75. */
.bio__text p {
  max-width: 68ch;
}

.bio__text h2 {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .bio,
  .bio--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bio--reverse .bio__portrait {
    order: 0;
  }
}

/* ================================================================ Formulare */

.form-page {
  max-width: 760px;
  margin-inline: auto;
}

.form-page__intro {
  margin-bottom: 40px;
}

/*
 * Kontaktseite zweispaltig, wie im Original: Text links schmal, Formular
 * rechts. Nur hier — Warteliste und Webinar nutzen dieselben Klassen, sollen
 * aber einspaltig und zentriert bleiben.
 *
 * Unter 991px (dort schaltet auch die Navigation um) stapelt es wieder: zwei
 * Spalten lassen dem Formular sonst zu wenig Breite für die Feldpaare.
 */
@media screen and (min-width: 992px) {
  .page-contact .form-page {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
    max-width: 1100px;
  }

  .page-contact .form-page__intro {
    margin-bottom: 0;
    /* Überschrift und Formularkarte sollen oben auf einer Linie beginnen. */
    padding-top: var(--space-2);
  }
}

.form-page__intro p {
  color: var(--ink);
}

.form {
  display: grid;
  gap: 20px;
}

/*
 * Formularblock auf getöntem Grund, wie im Original. Der Nachbau setzte ihn
 * als weisse .card mit hauchfeinem Rahmen — auf der weissen Seite hob er sich
 * dadurch praktisch nicht ab. Die Felder bleiben weiss und stehen so für sich.
 */
.form.card {
  padding: var(--space-10);
  border-color: transparent;
  background-color: var(--brand-tint);
  box-shadow: none;
}

@media screen and (max-width: 767px) {
  .form.card {
    padding: var(--space-6);
  }
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form__field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.form__field label {
  font-size: .95rem;
  font-weight: 600;
}

.form__optional {
  color: var(--ink-muted);
  font-weight: 400;
}

.form input,
.form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
}

.form textarea {
  border-radius: var(--radius-card);
  resize: vertical;
}

.form input:focus-visible,
.form textarea:focus-visible {
  border-color: var(--brand);
}

.form .btn {
  justify-self: start;
}

.form--inline {
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-top: 24px;
}

.form--inline .btn {
  justify-self: stretch;
}

.form__done {
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background-color: var(--brand-tint);
  color: var(--ink);
}

/* Checkliste (Warteliste) */

.checklist {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.checklist .icon {
  margin-top: .25em;
  color: var(--brand);
}

/* Eckdaten-Liste (Webinar) */

.facts {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
}

.facts > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
}

.facts dt {
  font-weight: 700;
}

.facts dd {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .form__row,
  .form--inline {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== Blog */

.post-grid--index {
  margin-top: 48px;
}

.post-card__body {
  padding: var(--space-6);
  transition: background-color var(--ease);
}

/*
 * Beim Überfahren färbt sich der Textteil hellgrün — die Karte hebt sich
 * ohnehin schon an, die Fläche macht das Ziel deutlicher. Auch beim
 * Tastaturfokus, sonst sieht man als Tastaturnutzer nur den Rahmen.
 *
 * Der Rahmen geht dabei auf Markengrün: auf der Startseite steht das Raster
 * auf hellgrünem Grund, gegen den sich das helle --border kaum abhebt.
 */
.post-grid .card--hover:hover,
.post-grid .card:has(.post-grid__link:focus-visible) {
  border-color: var(--brand);
  background-color: var(--brand-tint);
}

.post-card__body h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Kategorie als getönte Pille, Datum daneben — auf Übersicht wie Startseite. */
.post__meta span {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
}

/* Auf der hellgrünen Hover-Fläche bräuchte die Pille sonst keinen Kontrast. */
.card--hover:hover .post__meta span,
.post-grid__link:focus-visible .post__meta span {
  background-color: var(--surface);
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: .9rem;
}

/*
 * Beitragsspalte mittig. Im Export klebte sie am linken Containerrand,
 * wodurch auf breiten Schirmen rechts knapp die halbe Seite leer blieb —
 * während FAQ, Formulare und Preis-Intro bereits zentriert liefen.
 */
/* 850px Textspalte — der Gutter des Containers liegt innen und kommt dazu. */
.post__inner {
  max-width: calc(850px + 2 * var(--gutter));
  margin-inline: auto;
}

/*
 * Kopf mittig, wie im Export. Der Titel steht dort mit 2.8rem und Gewicht
 * 600 — der Nachbau kam mit den globalen 3rem/700 und brach dadurch in der
 * schmalen Spalte nach jedem zweiten Wort um.
 */
.post__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.post__header h1 {
  font-size: 2.4rem;
  font-weight: 600;
}

.post__header .post__meta {
  justify-content: center;
}

/*
 * Hochformatige Titelbilder füllten sonst den halben Bildschirm, bevor der
 * Text anfängt. Die Höhe ist gedeckelt, der Ausschnitt sitzt mittig.
 */
.post__hero {
  width: 100%;
  max-height: 420px;
  margin-bottom: var(--space-10);
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: center;
}

/*
 * Der Beitrag endete bisher übergangslos: Button, dann direkt die Überschrift
 * der CTA-Bühne. Eine feine Linie über dem Button schliesst den Text sichtbar
 * ab, der grössere Abstand darunter trennt ihn vom nächsten Block.
 */
/*
 * Der Beitrag endet nicht mehr mit einem einzelnen Button ins Leere: darunter
 * folgt „Weitere Beiträge" (Partial `related-posts.*`) mit drei Kacheln auf
 * getöntem Grund, der Button steht in dessen Kopfzeile. `.post__back` ist
 * damit entfallen.
 */

/* Fliesstext in Beitraegen und Rechtsseiten */

/*
 * Etwas dichter gesetzt als der Rest der Site (1.5). Der Export fuhr den
 * Beitragstext mit 1.4 — das liest sich in der langen Spalte ruhiger, ohne
 * dass Absätze ineinanderlaufen. Schriftgrösse, Gewicht und Farbe sind
 * unverändert dieselben wie im Original (17.6px, 400, #1a1a1a).
 */
.post .prose {
  /* Die Spaltenbreite bestimmt hier .post__inner (850px); die 70ch aus
     .prose würden sie wieder auf rund 750px zurückschneiden. */
  max-width: none;
  line-height: 1.45;
}

/* Zwischenüberschriften im Beitrag in Markengrün. */
.post .prose h2,
.post .prose h3,
.post .prose h4 {
  color: var(--brand);
}

.prose h2 {
  margin-top: 1.8em;
  margin-bottom: .6em;
  font-size: 1.8rem;
}

.prose h3 {
  margin-top: 1.7em;
  margin-bottom: .5em;
  font-size: 1.35rem;
}

.prose h4 {
  margin-top: 1.6em;
  margin-bottom: .5em;
  font-size: 1.1rem;
}

/* Die erste Überschrift eines Textblocks braucht den Vorlauf nicht */
.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 1.15em 1.4em;
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: .5em;
  padding-left: .2em;
}

.prose table {
  width: 100%;
  margin-bottom: 1.5em;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose__source {
  color: var(--ink-muted);
  font-size: .9rem;
}

/* ------------------------------- Ergänzungen aus dem Abgleich (2026-09-17) */

/* Kategorie und Datum über dem Titel einer Blogkarte, wie im Original. */

@media screen and (max-width: 991px) {
  /* Bild über den Karten statt daneben — nebeneinander wird beides zu schmal. */
  .proof {
    grid-template-columns: 1fr;
  }

  .proof__picture {
    min-height: 260px;
    max-height: 320px;
  }

  .cta-card {
    padding: var(--space-8);
  }
}

/*
 * Umriss-Buttons in den Plankacheln tragen Markengrün statt Anthrazit — in
 * einer Reihe mit dem gefüllten Button der Home-Version wirkte Dunkelgrau
 * wie eine andere Aktion.
 */
.pricing__card .btn--ghost,
.post-grid__more .btn--ghost {
  border-color: var(--brand);
  color: var(--brand);
}

.pricing__card .btn--ghost:hover,
.post-grid__more .btn--ghost:hover {
  background-color: var(--brand);
  color: var(--surface);
}

/*
 * Der gestapelte Block auf /about ist zum Zweispalter geworden (gleiches
 * Layout wie auf der Startseite), deshalb gibt es hier keine Sonderregel
 * mehr. `.stack` bleibt für /features und /de/funktionen in Gebrauch.
 */