/* emrelebt — Verkaufsseite 30-Tage-Meditationskurs
   Baut auf styles.css auf und nutzt nur dessen Tokens.
   „Grün“ = --gut (Oliv/Salbei aus dem Theme), „Rot“ = --fehler (--destructive). */

:root {
  --gut: var(--link);                    /* hell: --accent, dunkel: --primary */
  --gut-flaeche: var(--flaeche-warm);
  --rot: var(--fehler);
  --rot-flaeche: #FBEDEC;
  --spalte: 44rem;
  --spalte-breit: 64rem;
}


/* ---------- Grundgerüst ---------- */
.f-spalte { width: 100%; max-width: var(--spalte); margin-inline: auto; padding-inline: 1.125rem; }
.f-breit { width: 100%; max-width: var(--spalte-breit); margin-inline: auto; padding-inline: 1.125rem; }
@media (min-width: 45rem) { .f-spalte, .f-breit { padding-inline: var(--s-3); } }

.f-abschnitt { padding-block: var(--s-6); }
@media (min-width: 64rem) { .f-abschnitt { padding-block: var(--s-7); } }

.f-abschnitt h2 { text-align: center; margin-inline: auto; max-width: 22ch; }
.f-unterzeile { text-align: center; color: var(--text-leise); margin: calc(var(--s-2) * -1) auto var(--s-4); }
.f-zentriert { text-align: center; margin-inline: auto; }
.f-text p { max-width: none; }
.f-text p + p { margin-top: var(--s-2); }

.ueberzeile {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gut); margin: 0 0 var(--s-2);
}

/* Textmarker für Kernaussagen */
.f-text strong,
.marker {
  font-weight: 700;
  background: linear-gradient(transparent 58%, rgb(var(--glow) / 0.55) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.1em;
}

.rot { color: var(--rot); }
.gruen { color: var(--gut); }

/* ---------- Kopf ---------- */
.f-kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--held) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--held-linie);
}
.f-kopf__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 4rem; }
.f-kopf .marke { color: var(--text); flex: none; text-decoration: none; }
.f-kopf__start {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 44px; padding-inline: 0.25rem;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  margin-right: auto;
}
.f-kopf__start svg { width: 16px; height: 16px; }
.f-kopf__start:hover { color: var(--link); }
@media (max-width: 29.9rem) {
  .f-kopf__inner { gap: 0.6rem; }
  .f-kopf .marke { font-size: 1.3rem; gap: 0.45rem; }
  .f-kopf__start { font-size: 0.875rem; }
  .f-kopf__start svg { display: none; }
  .f-kopf__cta.btn { padding-inline: 0.9rem; font-size: 0.875rem; }
}
.f-nav { display: none; }
.f-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-3); }
.f-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding-block: 0.5rem; }
.f-nav a:hover { color: var(--link); box-shadow: inset 0 -2px 0 var(--primary); }
.f-kopf__cta.btn { width: auto; min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; animation: none; gap: 0; white-space: pre; }
.f-kopf__preis { display: none; }
@media (min-width: 60rem) {
  .f-nav { display: block; margin-left: auto; }
  .f-kopf__cta.btn { margin-left: var(--s-2); }
  .f-kopf__preis { display: inline; }
}
/* Sprungziele nicht unter der festen Kopfleiste verstecken */
section[id], [id="angebot"] { scroll-margin-top: 4.5rem; }

/* Kurzer Satz über dem Video: am Desktop eine Zeile */
.f-hero__kurz {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem); line-height: 1.3;
  color: var(--text);
  max-width: none; margin: 0 auto var(--s-3);
  text-wrap: balance;
}
@media (min-width: 72rem) {
  .f-hero__kurz { white-space: nowrap; margin-inline: -10rem; }
}
.f-hero__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); margin-bottom: var(--s-4); }
.f-hero__video iframe, .f-hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Hero ---------- */
.f-hero { background: var(--held); padding-block: var(--s-2) var(--s-6); text-align: center; }
.f-hero .ueberzeile { margin-bottom: var(--s-3); }
.f-hero__bild {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius); box-shadow: var(--schatten);
  margin-bottom: var(--s-4);
}
@media (min-width: 45rem) { .f-hero__bild { aspect-ratio: 16 / 9; object-position: center 22%; } }
.f-hero h1 {
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  line-height: 1.18; letter-spacing: -0.02em;
  margin: 0 auto var(--s-3); max-width: 24ch;
}
.f-hero .lead { color: var(--auf-held-leise); margin: 0 auto var(--s-4); font-style: italic; font-family: var(--serif); }

.badge {
  display: inline-block;
  background: var(--gut-flaeche); color: var(--text);
  border-radius: 999px; padding: 0.45rem 1rem;
  font-size: 0.9375rem; line-height: 1.4;
}
.badge strong { color: var(--gut); }
.badge-zeile { display: block; margin-bottom: var(--s-3); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.chips li {
  font-size: var(--fs-klein); padding: 0.4rem 0.85rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--linie); border-radius: 999px;
}

/* ---------- CTA ---------- */
.cta { display: grid; justify-items: center; gap: 0.75rem; margin-top: var(--s-4); }
.cta--start { margin-top: 0; }
.btn--kauf {
  background: var(--primary); color: var(--primary-foreground);
  font-size: 1.0625rem; min-height: 56px; padding: 0.9rem 2rem;
  width: 100%; max-width: 24rem;
  animation: puls 2.6s ease-in-out infinite;
}
.btn--kauf:hover { background: color-mix(in srgb, var(--primary) 82%, #ffffff); }
.btn--weiter { background: var(--accent); color: var(--accent-foreground); }
.btn--weiter:hover { background: color-mix(in srgb, var(--accent) 85%, #000000); }


@keyframes puls {
  0%, 100% { box-shadow: var(--schatten), 0 0 0 0 rgb(var(--glow) / 0.55); }
  50% { box-shadow: var(--schatten), 0 0 0 10px rgb(var(--glow) / 0); }
}
.vertrauen { font-size: 0.8125rem; color: var(--text-leise); margin: 0; text-align: center; max-width: none; }

/* ---------- Karten allgemein ---------- */
.karte {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--s-3);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) {
  .karte--hover:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--schatten), 0 12px 28px -12px rgb(0 0 0 / 0.18);
  }
}

/* ---------- Kennst du das? ---------- */
.kennst-karten { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.kennst-karte { display: flex; gap: var(--s-2); align-items: flex-start; border-left: 4px solid var(--primary); }
.kennst-karte p { margin: 0; }
.emoji { font-size: 1.5rem; line-height: 1.2; flex: none; }

/* Einblendung beim Scrollen (nur mit JS) */
.js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }

/* ---------- Band ---------- */
.band {
  position: relative;
  background: var(--accent); color: var(--accent-foreground);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4) var(--s-4);
  margin-block: var(--s-5);
  text-align: center;
  overflow: hidden;
}
.band::before {
  content: "\201C";
  position: absolute; top: -0.15em; left: 0.2em;
  font-family: var(--serif); font-size: 9rem; line-height: 1;
  color: rgb(255 255 255 / 0.16);
  pointer-events: none;
}
.band blockquote { margin: 0 0 var(--s-2); }
.band blockquote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35;
  margin: 0 auto; max-width: 26ch;
}
.band > p { margin: 0 auto; color: rgb(255 255 255 / 0.88); }

/* ---------- Schritte ---------- */
.schritte { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-5); counter-reset: schritt; }
.schritt { counter-increment: schritt; position: relative; padding-top: var(--s-3); }
.schritt::before {
  content: counter(schritt);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  font-family: var(--serif); font-size: 1.15rem;
  margin-bottom: var(--s-2);
}
.schritt h3 { font-size: 1.25rem; margin-bottom: var(--s-1); }
.schritt p { margin: 0; }
.schritt small { display: block; margin-top: var(--s-1); color: var(--text-leise); font-size: 0.8125rem; }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(3, 1fr); } }

/* Kette „Vom Denker zum Beobachter“ */
.kette-titel { text-align: center; font-size: 1.375rem; }
.kette { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.35rem; list-style: none; padding: 0; margin: 0; }
.kette li { display: inline-flex; align-items: center; gap: 0.35rem; }
.kette li + li::before { content: "\2192"; color: var(--text-leise); }
.kette span {
  font-size: 0.875rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--linie); background: var(--card); color: var(--card-foreground);
  border-radius: 999px;
}
.kette li:last-child span { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); font-weight: 700; }

/* ---------- Story ---------- */
.story { display: grid; gap: var(--s-4); align-items: start; }
.story__bild {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%;
  border-radius: var(--radius); box-shadow: var(--schatten);
  max-width: 26rem; margin-inline: auto;
}
.story h2 { text-align: left; margin-inline: 0; }
@media (min-width: 52rem) { .story { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-5); } }

.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin: var(--s-5) 0 var(--s-3); padding: 0; list-style: none; }
.zahl { text-align: center; padding: var(--s-2) 0.4rem; }
.zahl strong { display: block; white-space: nowrap; font-family: var(--serif); font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.875rem); font-weight: 500; color: var(--gut); line-height: 1.2; }
.zahl > span { font-size: 0.8125rem; color: var(--text-leise); line-height: 1.35; display: block; margin-top: 0.25rem; }

/* ---------- Karussell mit Handy-Rahmen ---------- */
.karussell {
  display: flex; gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--s-1) 1.125rem var(--s-3);
  margin-inline: -1.125rem;
  scrollbar-width: none;
  list-style: none;
}
.karussell::-webkit-scrollbar { display: none; }
.karussell > li { flex: 0 0 86%; scroll-snap-align: center; }
.karussell-hinweis { text-align: center; font-size: var(--fs-klein); color: var(--text-leise); margin: 0 auto var(--s-1); }
@media (min-width: 52rem) {
  .karussell { justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--s-4); }
  .karussell > li { flex: 0 1 20rem; }
  .karussell-hinweis { display: none; }
}
/* Spalten gleich hoch, Bildunterschrift wächst mit: alle Handy-Screenshots starten auf einer Höhe */
.beleg { margin: 0; height: 100%; display: flex; flex-direction: column; }
.beleg figcaption { flex: 1 0 auto; text-align: center; margin-bottom: var(--s-2); min-height: 4.6rem; display: flex; flex-direction: column; justify-content: flex-end; }
.beleg__titel { font-family: var(--sans); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.35; letter-spacing: var(--letter-spacing); margin: 0 0 0.35rem; max-width: none; }
.beleg__name { color: var(--gut); font-weight: 700; font-size: 1rem; margin: 0; max-width: none; }
.handy {
  background: #1a1a1a;
  border-radius: 2.4rem;
  padding: 0.6rem;
  box-shadow: var(--schatten), 0 18px 34px -18px rgb(0 0 0 / 0.45);
}
.handy img { width: 100%; height: auto; border-radius: 1.85rem; display: block; }

.fallbeispiel { max-width: var(--spalte); margin: 0 auto var(--s-4); border-left: 4px solid var(--primary); }
.fallbeispiel p:last-child { margin-bottom: 0; }

/* ---------- „Das bekommst du“ im Hero ---------- */
.paket {
  text-align: left;
  background: var(--card); color: var(--card-foreground);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--s-3);
  margin: 0 auto var(--s-3);
  max-width: 34rem;
}
.paket__titel { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--s-2); }
.paket__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.paket__liste li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.45; }
.paket__icon {
  flex: none; width: 2rem; height: 2rem; border-radius: 0.6rem;
  display: grid; place-items: center;
  background: var(--gut-flaeche); font-size: 1rem;
}
.paket__liste strong { font-weight: 700; }

/* ---------- Das brauchst du NICHT ---------- */
.nicht { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.nicht li { display: flex; align-items: center; gap: var(--s-2); }
.nicht li::before {
  content: "\2715"; flex: none;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--rot); color: #ffffff; font-size: 0.9rem; font-weight: 700;
}
.nicht strong { color: var(--rot); }
@media (min-width: 45rem) { .nicht { grid-template-columns: 1fr 1fr; } }

/* ---------- Vorteile & Studien ---------- */
.vorteile { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-6); counter-reset: vorteil; }
.vorteile li { counter-increment: vorteil; display: flex; align-items: center; gap: var(--s-2); font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; }
.vorteile li::before {
  content: counter(vorteil); flex: none;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 0 0 6px rgb(var(--glow) / 0.3);
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
}
.studien-titel { text-align: center; }
.studien { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.studie h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.35rem; display: flex; gap: 0.5rem; align-items: baseline; }
.studie p { margin: 0 0 var(--s-1); }
.studie cite { font-size: 0.8125rem; color: var(--text-leise); }
.studie cite a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding-block: 0.35rem; }
.studie cite a::after { content: " \2197"; }
@media (min-width: 45rem) { .studien { grid-template-columns: 1fr 1fr; } }

/* Kursseite: helle Karten über bewegtem Shader (assets/js/shader-karten.js) */
.studien--shader { gap: var(--s-3); }
.studien--shader .studie {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 17rem; padding: var(--s-4) var(--s-3) var(--s-3);
  display: flex; flex-direction: column;
  background: var(--held); color: var(--text);
  border: 2px solid var(--primary); border-radius: 1.5rem;
  box-shadow: var(--schatten);
}
.studie__shader {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, #e4eae1, #f8f3ec 55%, #f3e6d2);  /* ohne WebGL */
}
.studie__shader.ist-aktiv { background: none; }
.studien--shader .studie::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(253 251 247 / 0.55);  /* heller Schleier: Muster sichtbar, Text gut lesbar */
}
.studien--shader .studie h4 { font-size: 1.3rem; flex-direction: column; gap: var(--s-2); }
.studien--shader .studie h4 span { font-size: 2.25rem; line-height: 1; }
.studien--shader .studie p { flex-grow: 1; }
.studien--shader .studie cite { color: var(--text-leise); font-weight: 600; }
/* Dunkelmodus: dunkler Schleier über dem Muster */

@media (min-width: 64rem) { .studien--shader { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Chat-Testimonials ---------- */
.chat {
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-3);
  margin-top: var(--s-4);
  display: grid; gap: var(--s-3);
  background-color: var(--flaeche-warm);
  background-image: radial-gradient(rgb(0 0 0 / 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
.nachricht { margin: 0; }
.nachricht figcaption { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; font-weight: 700; font-size: 1rem; }
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-foreground);
  font-weight: 700; font-size: 0.95rem;
}
.nachricht blockquote {
  position: relative; margin: 0;
  background: var(--card); color: var(--card-foreground);
  border-radius: 0 1.1rem 1.1rem 1.1rem;
  padding: 1.1rem 1.3rem;
  box-shadow: var(--schatten);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}
.nachricht blockquote::before {
  content: ""; position: absolute; top: 0; left: -8px;
  border-top: 10px solid var(--card); border-left: 8px solid transparent;
}
.nachricht blockquote p { margin: 0; }

/* ---------- Vorher / Nachher ---------- */
.reise { display: grid; gap: var(--s-3); }
.reise__seite { border-radius: var(--radius); padding: var(--s-4) var(--s-3); }
.reise__seite h3 { font-size: 1.375rem; margin-bottom: var(--s-3); }
.reise__seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.reise__seite li { display: flex; gap: 0.75rem; align-items: flex-start; }
.reise__seite li::before {
  flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  color: #ffffff; font-size: 0.75rem; font-weight: 700; margin-top: 0.1rem;
}
.reise__seite--vorher { background: var(--rot-flaeche); }
.reise__seite--vorher li::before { content: "\2715"; background: var(--rot); }
.reise__seite--nachher { background: var(--gut-flaeche); }
.reise__seite--nachher li::before { content: "\2713"; background: var(--accent); }
@media (min-width: 40rem) { .reise { grid-template-columns: 1fr 1fr; } }

/* ---------- Angebot ---------- */
.platzhalter-medium {
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--feld-rand); border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  padding: var(--s-3); margin-bottom: var(--s-4);
  color: var(--text-leise); font-size: var(--fs-klein);
}
.angebot { padding: var(--s-2) var(--s-3); }
.posten { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem var(--s-2); align-items: start; padding-block: var(--s-3); border-bottom: 1px solid var(--linie); }
.posten > .wert { grid-column: 2; }
@media (min-width: 40rem) {
  .posten { grid-template-columns: auto 1fr auto; }
  .posten > .wert { grid-column: auto; }
}
.posten:last-child { border-bottom: 0; }
.kachel {
  width: 2.75rem; height: 2.75rem; border-radius: 0.8rem;
  display: grid; place-items: center;
  background: var(--gut-flaeche); font-size: 1.3rem;
}
.posten h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: var(--letter-spacing); margin: 0 0 0.25rem; line-height: 1.4; }
.posten p { margin: 0; font-size: 0.95rem; color: var(--text-leise); }
.tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--accent); color: var(--accent-foreground);
  border-radius: 999px; padding: 0.15rem 0.55rem; margin-bottom: 0.35rem;
}
.wert { white-space: nowrap; font-weight: 600; }
s, .wert s { color: var(--rot); text-decoration-thickness: 2px; }
.posten.posten--summe { grid-template-columns: 1fr auto; align-items: center; font-weight: 700; }
.posten--summe > .wert { grid-column: auto; }
.posten--summe .wert { font-size: 1.25rem; }
.posten--module { display: block; padding-top: 0; }

.angebotsbox {
  position: relative;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card); color: var(--card-foreground);
  box-shadow: var(--schatten), 0 18px 40px -20px rgb(0 0 0 / 0.25);
  padding: var(--s-4) var(--s-3);
  margin-top: var(--s-4);
  text-align: center;
}
.angebotsbox > p { margin-inline: auto; }
.preis-gross { display: flex; justify-content: center; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0; }
.preis-gross s { font-size: 1.5rem; }
.preis-gross strong { font-family: var(--serif); font-size: clamp(3rem, 2.4rem + 3vw, 4.25rem); line-height: 1; color: var(--gut); font-weight: 600; }
.klein { font-size: 0.8125rem; color: var(--text-leise); }
.zahlarten { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.zahlarten svg { display: block; width: 3.5rem; height: auto; }  /* Kartenlogos bleiben auch im Dunkelmodus weiß */

/* ---------- Akkordeon (Module + FAQ) ---------- */
.akkordeon { list-style: none; margin: 0; padding: 0; }
.akkordeon > li { border-bottom: 1px solid var(--linie); }
.akkordeon > li:first-child { border-top: 1px solid var(--linie); }
.akk-knopf {
  width: 100%; min-height: 52px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text); text-align: left;
  font: 600 1rem/1.4 var(--sans); letter-spacing: var(--letter-spacing);
}
.akk-knopf svg { width: 20px; height: 20px; flex: none; color: var(--gut); transition: transform 250ms var(--ease); }
.akk-knopf[aria-expanded="true"] svg { transform: rotate(45deg); }
.akk-inhalt { display: grid; grid-template-rows: 1fr; }
.akk-inhalt > div { overflow: hidden; }
/* Zugeklappt nur mit JS – ohne JS bleibt alles lesbar */
.js .akk-inhalt { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms var(--ease), visibility 0s linear 300ms; }
.js .akk-knopf[aria-expanded="true"] + .akk-inhalt { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease); }
.akk-inhalt ul { margin: 0 0 var(--s-2); padding-left: 1.2rem; color: var(--text-leise); }
.akk-inhalt li { margin-bottom: 0.35rem; }
.akk-inhalt p { margin: 0 0 var(--s-2); max-width: none; color: var(--text-leise); }
.faq-liste .akk-knopf { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; }

/* ---------- Garantie ---------- */
.garantie {
  display: grid; gap: var(--s-3); align-items: center; justify-items: center; text-align: center;
  border: 2px dashed var(--primary); border-radius: var(--radius);
  padding: var(--s-4) var(--s-3);
}
.siegel {
  width: 8.5rem; height: 8.5rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--accent); color: var(--accent-foreground);
  font-weight: 800; font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.06em;
  padding: var(--s-2);
  box-shadow: 0 0 0 6px var(--background), 0 0 0 8px var(--accent);
}
.garantie h2 { margin-bottom: var(--s-2); }
.garantie p { margin: 0; }
@media (min-width: 45rem) {
  .garantie { grid-template-columns: auto 1fr; text-align: left; justify-items: start; padding: var(--s-4); gap: var(--s-4); }
  .garantie h2 { text-align: left; margin-inline: 0; }
}

/* ---------- Stell dir vor ---------- */
.vorstellung {
  position: relative;
  background-size: cover; background-position: center 40%;
  padding-block: var(--s-7);
}
.vorstellung::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--held) 84%, transparent); }
.vorstellung > * { position: relative; }
.vorstellung blockquote { margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 3px solid var(--accent); }
.vorstellung blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.4; margin: 0; max-width: none; }
.vorstellung .frage { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); text-align: center; margin: var(--s-4) 0 0; max-width: none; }

/* ---------- Letzte Box ---------- */
.letzte { margin-top: calc(var(--s-6) + 2rem); padding-top: 6.5rem; }
.rundfoto {
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  box-shadow: 0 0 0 5px var(--card), var(--schatten);
}
.letzte .rundfoto {
  position: absolute; top: 0; left: 50%;
  width: clamp(140px, 30vw, 170px); height: clamp(140px, 30vw, 170px);
  transform: translate(-50%, -50%);
}

/* ---------- Verabschiedung & Fuß ---------- */
.abschied { text-align: center; }
.abschied .rundfoto { width: 7.5rem; height: 7.5rem; margin: 0 auto var(--s-3); }
.abschied p { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.45; margin-inline: auto; max-width: 30ch; }
.abschied .signatur { font-style: normal; font-weight: 600; margin-top: var(--s-2); }

.f-fuss { background: var(--fuss-bg); color: var(--fuss-text); padding-block: var(--s-5) calc(var(--s-5) + 5rem); text-align: center; }
.f-fuss .marke { color: var(--fuss-text); justify-content: center; }
.f-fuss p { margin: var(--s-2) auto 0; color: var(--fuss-leise); font-size: var(--fs-klein); }
.f-fuss a { color: var(--fuss-text); }
.f-fuss :focus-visible { outline-color: var(--fuss-text); }
@media (min-width: 45rem) { .f-fuss { padding-bottom: var(--s-5); } }

/* ---------- Feste Kaufleiste (nur Handy) ---------- */
.kaufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 0.75rem 1.125rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--glas);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 20px -10px rgb(0 0 0 / 0.25);
  transform: translateY(110%);
  transition: transform 300ms var(--ease);
}
.kaufleiste.ist-sichtbar { transform: none; }
.kaufleiste__preis { display: flex; align-items: baseline; gap: 0.5rem; }
.kaufleiste__preis strong { font-family: var(--serif); font-size: 1.6rem; color: var(--gut); font-weight: 600; }
.kaufleiste .btn { min-height: 48px; padding-inline: 1.4rem; }
@media (min-width: 45rem) { .kaufleiste { display: none; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--kauf { animation: none; }
  .js .einblenden { opacity: 1; transform: none; transition: none; }
  .karte, .akk-inhalt, .akk-knopf svg, .kaufleiste { transition: none; }
}

/* ---------- Wert sichtbar machen: 997 € durchgestrichen neben 47 € ---------- */
.preis-zeile { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; margin: 0; max-width: none; }
.preis-zeile s { font-size: 1.25rem; font-weight: 600; }
.preis-zeile strong { font-family: var(--serif); font-size: 2.25rem; line-height: 1; font-weight: 600; color: var(--gut); }

.f-kopf__wert { display: none; margin: 0; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.f-kopf__wert s { font-size: 0.95rem; font-weight: 600; }
.f-kopf__wert strong { font-family: var(--serif); font-size: 1.35rem; color: var(--gut); font-weight: 600; }
@media (min-width: 75rem) { .f-kopf__wert { display: inline-flex; margin-left: var(--s-2); } .f-kopf__cta.btn { margin-left: 0; } }

.paket__wert {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem;
  margin: var(--s-3) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--linie);
  font-weight: 600; max-width: none;
}
.paket__wert span { color: var(--text-leise); font-weight: 500; }
.paket__wert strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--gut); }

/* Sprachwahl: im Kopf erst ab Tablet, auf dem Handy unten im Fuß */
.sprache--funnel { display: none; flex: none; }
.sprache--funnel summary.rund-knopf { width: 44px; height: 44px; color: var(--text); }
@media (min-width: 30rem) { .sprache--funnel { display: block; } }
.f-fuss .sprache-zeile a[aria-current] { font-weight: 700; text-decoration: none; }
.f-nav a { white-space: nowrap; }
@media (min-width: 60rem) and (max-width: 87.5rem) { .f-nav ul { gap: var(--s-2); } }

/* ---------- Anpassung an die neue Website: Schriften Newsreader + Figtree, Farben E und F ---------- */
/* Newsreader gibt es nur aufrecht: keine künstliche Kursivschrift */
.f-hero .lead, .vorstellung blockquote p, .abschied p, em { font-style: normal; }
h1, h2 { font-weight: 400; letter-spacing: -0.015em; }

/* Farbumschalter (nur Vorschau, kommt aus ../assets/js/main.js) */
.palette-switch {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: flex; align-items: center; gap: .35rem;
  background: #fff; color: #0F3A3E; padding: .4rem .5rem .4rem .9rem; border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); font: 500 .8125rem/1 var(--sans);
}
.palette-switch button { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font: 500 .75rem/1 var(--sans); color: #fff; text-shadow: 0 0 3px #000; }
.palette-switch button[aria-pressed="true"] { border-color: #0F3A3E; box-shadow: inset 0 0 0 2px #fff; }
.palette-switch [data-p="e"] { background: linear-gradient(135deg, #0F3A3E 50%, #AFBEA5 50%); }
.palette-switch [data-p="f"] { background: linear-gradient(135deg, #AFBEA5 50%, #F8F3EC 50%); color: #000; text-shadow: 0 0 3px #fff; }
@media (max-width: 719px) { .palette-switch { bottom: 5.5rem; } }
.band blockquote p { font-style: normal; }
/* Logo der Website (zwei Kraniche) statt des Punkts */
.marke__logo { width: 2rem; height: 2rem; flex: none; background: currentColor; -webkit-mask: url("../../img/logo.svg") center/contain no-repeat; mask: url("../../img/logo.svg") center/contain no-repeat; }
.marke { color: var(--foreground); }

/* =====================================================================
   Stil der neuen Website auf dem Grundgerüst des Funnels
   Gleiche Bausteine wie emrelebt.de: Newsreader 300, Figtree, Pillen-Buttons,
   Sprechblasen mit 22px Radius, weiche Schatten, Petrol-, Salbei- und Leinenflächen.
   E = Petrol (Standard), F = Oliv und Salbei des alten Funnels.
   ===================================================================== */
:root {
  --w-main: #0F3A3E; --w-deep: #0A2B2E; --w-rgb: 15, 58, 62;
  --w-accent: #AFBEA5; --w-ground: #F8F3EC; --w-tint: #E9EDE3;
  --w-cream: #FCFAF6; --w-text: #4F534D; --w-ink: #0F3A3E; --w-paper: #FFFFFF;
  --w-strike: #B3261E; --w-line: rgba(15, 58, 62, .14);
  --w-btn: var(--w-main); --w-btn-text: #FFFFFF; --w-btn-hover: var(--w-deep);
  --w-ease: cubic-bezier(.16, 1, .3, 1);
  --w-shadow: 0 1px 0 var(--w-line), 0 24px 50px -36px rgba(var(--w-rgb), .55);
  --w-bubble: 22px;
  --w-h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
}
[data-palette="f"] {
  --w-main: #495940; --w-deep: #3D4A35; --w-rgb: 73, 89, 64;
  --w-tint: #E4EAE1; --w-text: #5C554D; --w-ink: #000000; --w-paper: #FDFDFD;
  --w-line: rgba(73, 89, 64, .16);
  --w-btn: #AFBEA5; --w-btn-text: #000000; --w-btn-hover: #9DAE92;
}

/* Grundlagen */
body { background: var(--w-ground); color: var(--w-text); font-family: var(--sans); font-size: 1.0625rem; letter-spacing: 0; }
h1, h2, h3, h4 { color: var(--w-ink); font-weight: 300; letter-spacing: -.015em; }
.f-abschnitt h2, .f-abschnitt > .f-spalte > h2, .f-abschnitt > .f-breit > h2 { font-size: var(--w-h2); line-height: 1.06; max-width: 18ch; }
h3 { font-weight: 400; }
strong { font-weight: 600; color: var(--w-ink); }
::selection { background: var(--w-accent); color: var(--w-deep); }
:focus-visible { outline: 2px solid var(--w-main); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: rgba(var(--w-rgb), .45) var(--w-ground); }
.f-abschnitt { padding-block: clamp(4rem, 3rem + 3.5vw, 6.25rem); }
.f-unterzeile { font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); color: inherit; opacity: .9; }

/* Flächen im Wechsel wie auf der Website */
.nebel { background: var(--w-ground); }
.licht { background: var(--w-tint); }
.nacht { background: var(--w-main); color: #F8F3EC; }
.nacht h2, .nacht h3 { color: #FFFFFF; }
section[aria-labelledby="kennst-titel"] { background: var(--w-tint); }
section[aria-labelledby="schuld-titel"] { background: var(--w-accent); color: var(--w-ink); }
section[aria-labelledby="schuld-titel"] p { color: var(--w-ink); }
section[aria-labelledby="nicht-titel"] { background: var(--w-cream); }
section[aria-labelledby="community-titel"] { background: var(--w-accent); }
section[aria-labelledby="angebot-titel"] { background: var(--w-tint); }
section[aria-labelledby="garantie-titel"] { background: var(--w-ground); }
section[aria-labelledby="start-titel"] { background: var(--w-cream); }
.abschied { background: var(--w-tint); color: var(--w-text); }
.abschied h2, .abschied p { color: var(--w-ink); }

/* Kopfzeile: nur Logo, Preis und Kaufen, Petrol-Linie wie auf der Website */
.f-kopf { position: sticky; background: color-mix(in srgb, var(--w-ground) 92%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 0; box-shadow: inset 0 -2px 0 var(--w-main); }
.f-kopf__inner { min-height: 4.25rem; }
.marke { display: inline-flex; align-items: center; gap: .6rem; font: 500 1.0625rem/1 var(--sans); letter-spacing: .01em; color: var(--w-main); }
.marke__logo { width: 2.25rem; height: 2.25rem; }
.f-kopf__wert { margin: 0 0 0 auto; display: none; align-items: baseline; gap: .5rem; }
.f-kopf__wert s { color: var(--w-strike); font: 300 1.05rem/1 var(--serif); }
.f-kopf__wert strong { font: 400 1.5rem/1 var(--serif); color: var(--w-main); }
@media (min-width: 40rem) { .f-kopf__wert { display: inline-flex; } }
.f-kopf__cta.btn { min-height: 2.75rem; padding: .6rem 1.25rem; font-size: .9375rem; }

/* Buttons: volle Pillen, ruhiges Atmen statt Pulsieren */
.btn { border-radius: 999px; font: 500 1.0625rem/1.2 var(--sans); letter-spacing: 0; transition: transform .25s var(--w-ease), box-shadow .25s var(--w-ease), background-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn--kauf, .btn--weiter { background: var(--w-btn); color: var(--w-btn-text); min-height: 3.5rem; padding: .95rem 1.9rem; box-shadow: 0 10px 30px -12px rgba(var(--w-rgb), .45); }
.btn--kauf:hover, .btn--weiter:hover { background: var(--w-btn-hover); }
@keyframes w-atmen { 0%, 100% { box-shadow: 0 10px 30px -12px rgba(var(--w-rgb), .45), 0 0 0 0 rgba(var(--w-rgb), .22); } 50% { box-shadow: 0 14px 34px -12px rgba(var(--w-rgb), .5), 0 0 0 10px rgba(var(--w-rgb), 0); } }
.btn--kauf { animation: w-atmen 3.6s var(--w-ease) infinite; }
.nacht .btn--weiter { background: var(--w-ground); color: var(--w-main); }
[data-palette="f"] .nacht .btn--weiter { color: #000; }
.f-kopf__cta.btn { animation: none; }

/* Vertrauenszeile mit Linien-Icons */
.vertrauen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; font-size: .875rem; color: var(--w-text); }
.vertrauen li { display: inline-flex; align-items: center; gap: .4rem; }
.vertrauen svg { width: 1rem; height: 1rem; color: var(--w-main); flex: none; }

/* Textmarker in Salbei */
.f-text strong, .marker { font-weight: 600; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 92%, transparent 92%); color: var(--w-ink); }
section[aria-labelledby="schuld-titel"] .f-text strong, section[aria-labelledby="schuld-titel"] .marker { background: linear-gradient(transparent 58%, rgba(255,255,255,.7) 58%, rgba(255,255,255,.7) 92%, transparent 92%); }

/* Icons in Kacheln */
.paket__icon, .kachel, .emoji { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--w-tint); color: var(--w-main); }
.paket__icon { width: 2.25rem; height: 2.25rem; }
.paket__icon svg { width: 1.15rem; height: 1.15rem; }
.kachel { width: 3rem; height: 3rem; border-radius: 14px; }
.kachel svg { width: 1.5rem; height: 1.5rem; }
.emoji { width: 2.5rem; height: 2.5rem; }
.emoji svg { width: 1.45rem; height: 1.45rem; }

/* Einstieg */
.f-hero { background: var(--w-ground); padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.f-hero__kurz { font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.3 var(--serif); color: var(--w-ink); }
.f-hero__bild { border-radius: var(--w-bubble); box-shadow: 0 30px 60px -34px rgba(var(--w-rgb), .6); }
.f-hero h1 { font-weight: 300; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; color: var(--w-ink); }
.f-hero .lead { font: 400 clamp(1.15rem, 1.05rem + .45vw, 1.35rem)/1.5 var(--sans); color: var(--w-text); }
.paket { border: 0; border-radius: 28px; background: var(--w-paper); box-shadow: var(--w-shadow); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.paket__titel { font: 400 1.5rem/1.2 var(--serif); color: var(--w-ink); }
.paket__liste { gap: .85rem; }
.paket__liste li { align-items: center; }
.paket__liste strong { font-weight: 600; }
.paket__wert { color: var(--w-ink); }
.paket__wert strong { font: 400 1.9rem/1 var(--serif); color: var(--w-main); }
.badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--w-paper); color: var(--w-ink); box-shadow: 0 1px 0 var(--w-line); font-size: .9375rem; }
.badge svg { width: 1.1rem; height: 1.1rem; color: var(--w-main); }
.badge strong { color: var(--w-ink); font-weight: 600; }
.preis-zeile strong, .preis-gross strong { font-family: var(--serif); font-weight: 300; color: var(--w-main); }
.preis-zeile s, .preis-gross s, .wert s, s { color: var(--w-strike); font-family: var(--serif); font-weight: 300; }
.chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; background: var(--w-paper); border: 0; box-shadow: 0 1px 0 var(--w-line); color: var(--w-ink); }
.chips svg { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--w-tint); color: var(--w-main); flex: none; }

/* Karten allgemein */
.karte { border: 0; border-radius: var(--w-bubble); background: var(--w-paper); box-shadow: var(--w-shadow); color: var(--w-text); }
@media (hover: hover) { .karte--hover:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 1px 0 var(--w-line), 0 34px 60px -36px rgba(var(--w-rgb), .6); } }

/* Kennst du das? als empfangene Nachrichten wie auf der Website */
section[aria-labelledby="kennst-titel"] h2 { font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem); line-height: 1; max-width: none; }
.kennst-karte { border: 0; border-radius: var(--w-bubble); align-items: center; padding: .9rem 1.15rem; }
.kennst-karten { max-width: 38rem; margin-inline: auto; }

/* Nicht deine Schuld auf Salbei, Band in Petrol wie die Kernaussage der Website */
.band { background: var(--w-main); color: #FFFFFF; border-radius: var(--w-bubble); border-bottom-left-radius: 6px; box-shadow: 0 18px 40px -18px rgba(var(--w-rgb), .6); }
.band blockquote p { font: 300 clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem)/1.2 var(--serif); color: #FFFFFF; max-width: 22ch; }
.band > p { color: rgba(255,255,255,.88); }
.band::before { color: rgba(175, 190, 165, .35); }
.schritt { background: var(--w-paper); }
.schritt::before { width: 3.25rem; height: 3.25rem; background: var(--w-main); color: #FFFFFF; border: 2px solid var(--w-accent); font: 300 1.6rem/1 var(--serif); }
.schritt h3 { font-size: 1.45rem; color: var(--w-ink); }
.schritt small { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--w-tint); color: var(--w-ink); }
.kette-titel { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.kette span { border: 1px solid rgba(var(--w-rgb), .25); background: transparent; color: var(--w-ink); font-size: .9375rem; padding: .45rem .95rem; }
.kette li + li::before { color: var(--w-main); }
.kette li:last-child span { background: var(--w-main); border-color: var(--w-main); color: #FFFFFF; font-weight: 500; }

/* Geschichte */
.story__bild { border-radius: var(--w-bubble); box-shadow: 0 30px 60px -34px rgba(var(--w-rgb), .6); }
.story h2 { font-size: var(--w-h2); }
.zahl { background: var(--w-main); color: #F8F3EC; box-shadow: none; }
.zahl strong { color: #FFFFFF; font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.zahl > span { color: rgba(248, 243, 236, .85); }
.fallbeispiel { border-left: 0; border-bottom-left-radius: 6px; }

/* Teilnehmer auf Petrol, Handy-Rahmen wie auf der Website */
.nacht .f-unterzeile, .nacht .karussell-hinweis { color: #F8F3EC; }
.beleg__titel { font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.25 var(--serif); color: #FFFFFF; }
.beleg__name { color: var(--w-accent); font-weight: 500; }
.handy { background: #161616; border-radius: 2.3rem; padding: .55rem; box-shadow: 0 22px 44px -20px rgba(0,0,0,.65); }
section[aria-labelledby="community-titel"] .beleg__titel { color: var(--w-ink); }
section[aria-labelledby="community-titel"] .beleg__name { color: var(--w-main); }

/* Das brauchst du NICHT */
.nicht li { border: 0; font: 300 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.25 var(--serif); color: var(--w-ink); }
.nicht li::before { background: color-mix(in srgb, var(--w-strike) 12%, transparent); color: var(--w-strike); font-family: var(--sans); font-size: .85rem; }
.nicht strong { color: var(--w-strike); font-weight: 400; }

/* Was diesen Kurs anders macht */
.vorteile li { font: 300 clamp(1.2rem, 1.1rem + .5vw, 1.45rem)/1.3 var(--serif); color: var(--w-ink); }
.vorteile li::before { background: var(--w-main); color: #FFFFFF; box-shadow: 0 0 0 6px color-mix(in srgb, var(--w-accent) 45%, transparent); font: 300 1.2rem/1 var(--serif); }
.studien-titel { font-size: var(--w-h2); }
.studien--shader .studie { border: 0; border-radius: var(--w-bubble); box-shadow: var(--w-shadow); }
.studien--shader .studie h4 { font: 400 1.4rem/1.2 var(--serif); color: var(--w-ink); }
.studien--shader .studie h4 span { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.75); color: var(--w-main); }
.studien--shader .studie h4 span svg { width: 1.45rem; height: 1.45rem; }
.studie cite { font-style: normal; }

/* Stimmen als Sprechblasen auf Salbei */
.chat { background: transparent; padding: 0; }
.avatar { background: var(--w-main); color: #FFFFFF; font-weight: 500; }
.nachricht figcaption { font-weight: 500; color: var(--w-ink); }
.nachricht blockquote { border-radius: var(--w-bubble); border-top-left-radius: 6px; background: var(--w-paper); box-shadow: 0 18px 40px -26px rgba(var(--w-rgb), .5); color: var(--w-text); }
.nachricht blockquote::before { display: none; }

/* Vorher, nachher auf Petrol */
.reise__seite { border-radius: 28px; }
.reise__seite h3 { font-size: 1.75rem; font-weight: 300; }
.reise__seite--vorher { background: var(--w-paper); color: var(--w-text); }
.reise__seite--vorher h3 { color: var(--w-ink); }
.reise__seite--vorher li::before { background: color-mix(in srgb, var(--w-strike) 14%, transparent); color: var(--w-strike); }
.reise__seite--nachher { background: var(--w-accent); color: var(--w-deep); }
.reise__seite--nachher h3 { color: var(--w-deep); }
.reise__seite--nachher li::before { background: var(--w-main); color: #FFFFFF; }
[data-palette="f"] .reise__seite--nachher, [data-palette="f"] .reise__seite--nachher h3 { color: #000; }

/* Angebot */
.platzhalter-medium { border-color: rgba(var(--w-rgb), .35); border-radius: var(--w-bubble); background: rgba(255,255,255,.5); color: var(--w-text); }
.karte.angebot { border-radius: 28px; }
.posten h3 { font: 400 1.35rem/1.2 var(--serif); color: var(--w-ink); }
.tag { background: var(--w-main); color: #FFFFFF; font-weight: 500; letter-spacing: .04em; }
.posten--summe { color: var(--w-ink); font-weight: 500; }
.angebotsbox { border: 2px solid var(--w-main); border-radius: 28px; background: var(--w-paper); box-shadow: 0 30px 60px -36px rgba(var(--w-rgb), .6); }
.akk-knopf { color: var(--w-ink); font-weight: 500; }
.akk-knopf svg { width: 1.9rem; height: 1.9rem; padding: .4rem; border-radius: 50%; background: var(--w-tint); color: var(--w-main); transition: transform .35s var(--w-ease), background-color .2s; }
.akk-knopf[aria-expanded="true"] svg { transform: rotate(135deg); background: var(--w-main); color: #FFFFFF; }

/* Garantie */
.garantie { border-color: rgba(var(--w-rgb), .4); border-radius: 28px; background: var(--w-paper); }
.siegel { background: var(--w-main); color: #FFFFFF; font-weight: 600; box-shadow: 0 0 0 6px var(--w-paper), 0 0 0 8px var(--w-accent); }
.garantie h2 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); }

/* Stell dir vor: Foto mit Petrol-Schleier, helle Schrift */
.vorstellung::before { background: linear-gradient(180deg, rgba(var(--w-rgb), .86), rgba(var(--w-rgb), .94)); }
.vorstellung, .vorstellung blockquote p, .vorstellung .frage { color: #FFFFFF; }
.vorstellung blockquote { border-left-color: var(--w-accent); }
.vorstellung blockquote p { font-weight: 300; }
.vorstellung .frage { font-weight: 300; font-size: var(--w-h2); }

/* Letzte Box und Abschied */
.letzte { border-color: var(--w-main); }
.rundfoto { box-shadow: 0 0 0 6px var(--w-paper), 0 20px 40px -20px rgba(var(--w-rgb), .6); }
.abschied p { font: 300 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.3 var(--serif); }
.abschied .signatur { font: 500 1.125rem/1 var(--sans); color: var(--w-main); }

/* Fragen: einzelne weiße Karten wie auf der Website */
.faq-liste { display: grid; gap: .6rem; }
.faq-liste > li, .faq-liste > li:first-child { border: 0; border-radius: 20px; background: var(--w-paper); box-shadow: 0 1px 0 var(--w-line); padding-inline: 1.4rem; transition: box-shadow .35s var(--w-ease); }
.faq-liste > li:has([aria-expanded="true"]) { box-shadow: 0 1px 0 var(--w-line), 0 28px 50px -30px rgba(var(--w-rgb), .55); }
.faq-liste .akk-knopf { font: 400 1.2rem/1.3 var(--serif); padding-block: 1.1rem; }

/* Fußzeile wie auf der Website */
.f-fuss { background: var(--w-deep); color: #F8F3EC; }
[data-palette="f"] .f-fuss { background: #495940; }
.f-fuss .marke { color: #FFFFFF; }
.f-fuss p { color: rgba(248, 243, 236, .85); }
.f-fuss a { color: #FFFFFF; }
.f-fuss__krise { max-width: 40rem; }

/* Kaufleiste */
.kaufleiste { background: color-mix(in srgb, var(--w-paper) 94%, transparent); border-top: 0; box-shadow: 0 -1px 0 var(--w-line), 0 -14px 30px -20px rgba(var(--w-rgb), .45); }
.kaufleiste__preis strong { font-weight: 300; color: var(--w-main); }
.kaufleiste .btn { animation: none; min-height: 3rem; }

/* Helle Schrift auf dunklen Flächen hat Vorrang */
.band p, section .band > p { color: rgba(255,255,255,.9); }
.band blockquote p { color: #FFFFFF; }
.nacht h2, .nacht h3, .vorstellung h2, .vorstellung h3, .vorstellung .frage, .vorstellung p { color: #FFFFFF; }
.nacht .fallbeispiel h3, .nacht .karte h3 { color: var(--w-ink); }
.reise__seite--vorher h3 { color: var(--w-ink); }
.reise__seite--nachher h3 { color: var(--w-deep); }
[data-palette="f"] .reise__seite--nachher h3 { color: #000; }
.abschied h2 { color: var(--w-ink); }

/* ---------- Statusbalken oben: Anmeldung erfolgreich, aber noch nicht abgeschlossen ---------- */
.f-kopf--status .f-kopf__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(.75rem, 2vw, 2rem); min-height: 4.5rem; }
.status { display: grid; gap: .45rem; justify-items: center; text-align: center; }
.status__text { margin: 0; max-width: none; font-size: .9375rem; line-height: 1.3; color: var(--w-ink); }
.status__text strong { font-weight: 600; }
.status__balken { width: min(100%, 26rem); height: .6rem; border-radius: 999px; background: rgba(var(--w-rgb), .12); overflow: hidden; }
.status__balken span { display: block; height: 100%; width: 80%; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, var(--w-main) 0 10px, color-mix(in srgb, var(--w-main) 78%, #fff) 10px 20px);
  background-size: 28px 28px; animation: w-streifen 1.2s linear infinite; }
@keyframes w-streifen { to { background-position: 28px 0; } }
.f-kopf--status .f-kopf__cta.btn { white-space: nowrap; animation: w-atmen 3.6s var(--w-ease) infinite; }
@media (max-width: 47.99rem) {
  .f-kopf--status .f-kopf__inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo status" "cta cta"; row-gap: .6rem; padding-block: .6rem; }
  .f-kopf--status .marke { grid-area: logo; }
  .f-kopf--status .marke__name { display: none; }
  .f-kopf--status .status { grid-area: status; justify-items: start; text-align: left; }
  .status__text { font-size: .8125rem; }
  .status__text span { display: block; }
  .f-kopf--status .f-kopf__cta.btn { grid-area: cta; width: 100%; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .status__balken span { animation: none; } }

/* Glückwunsch über dem Video */
.f-hero__glueck { display: inline-block; margin: 0 auto var(--s-2); max-width: none; padding: .55rem 1.1rem; border-radius: var(--w-bubble); border-bottom-left-radius: 6px; background: var(--w-main); color: #FFFFFF; font-size: 1rem; box-shadow: 0 18px 40px -20px rgba(var(--w-rgb), .6); }
.f-hero__glueck strong { color: #FFFFFF; }
[data-palette="f"] .f-hero__glueck { background: var(--w-accent); color: #000; }
[data-palette="f"] .f-hero__glueck strong { color: #000; }
section[id], [id="angebot"] { scroll-margin-top: 7rem; }
.f-kopf--status .status { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }

/* Statusbalken v2: Text steht im Balken, Balken breiter, mit Abstand zum Rand */
.f-kopf--status .f-kopf__inner { min-height: 5rem; padding-block: .85rem; }
.status { justify-items: stretch; }
.status__balken { position: relative; width: 100%; max-width: 40rem; margin-inline: auto; height: auto; min-height: 2.6rem; padding: .55rem 1.25rem; border-radius: 999px; background: rgba(var(--w-rgb), .12); overflow: hidden; display: grid; place-items: center; }
.status__fuellung { position: absolute; inset: 0 auto 0 0; width: 80%; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, var(--w-main) 0 12px, color-mix(in srgb, var(--w-main) 82%, #fff) 12px 24px);
  background-size: 34px 34px; animation: w-streifen2 1.4s linear infinite; }
@keyframes w-streifen2 { to { background-position: 34px 0; } }
.status__balken .status__text { position: relative; z-index: 1; margin: 0; color: #FFFFFF; font-size: .9375rem; line-height: 1.3; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.status__balken .status__text strong { color: #FFFFFF; }
[data-palette="f"] .status__fuellung { background: repeating-linear-gradient(-45deg, #495940 0 12px, #5d6e53 12px 24px); background-size: 34px 34px; }
@media (max-width: 47.99rem) {
  .status__balken { padding: .45rem .9rem; border-radius: 18px; }
  .status__balken .status__text { font-size: .8125rem; text-align: left; }
  .status__fuellung { border-radius: 18px 0 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .status__fuellung { animation: none; } }

/* Glückwunsch als ruhige Zeile, ohne Fläche */
.f-hero__glueck { display: block; background: none; box-shadow: none; padding: 0; border-radius: 0; color: var(--w-ink); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin: clamp(1rem, .5rem + 1.5vw, 1.75rem) auto .35rem; }
.f-hero__glueck strong { color: var(--w-main); }
[data-palette="f"] .f-hero__glueck { background: none; color: #000; }
[data-palette="f"] .f-hero__glueck strong { color: #495940; }
/* Text immer lesbar: ganzer Balken dunkel, Fortschritt als helle Streifen darüber */
.f-kopf--status .f-kopf__inner { padding-block: 1.1rem; min-height: 5.5rem; }
.status__balken { background: var(--w-deep); min-height: 2.9rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.status__fuellung { background: repeating-linear-gradient(-45deg, var(--w-main) 0 12px, color-mix(in srgb, var(--w-main) 70%, #fff) 12px 24px); background-size: 34px 34px; }
[data-palette="f"] .status__balken { background: #3D4A35; }
[data-palette="f"] .status__fuellung { background: repeating-linear-gradient(-45deg, #5d6e53 0 12px, #72836a 12px 24px); background-size: 34px 34px; }
.f-hero { padding-top: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.f-hero__glueck { margin-top: 0; }
/* Statusbalken v3: schmaler und kürzer, 80 % gefüllt, Rest weiß, Text in der Füllung */
.status__balken { max-width: 27rem; min-height: 2.35rem; padding: 0; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(var(--w-rgb), .25); display: block; }
[data-palette="f"] .status__balken { background: #FFFFFF; }
.status__fuellung { position: absolute; inset: 3px auto 3px 3px; width: calc(80% - 3px); display: grid; place-items: center; padding: 0 .75rem; }
.status__balken .status__text { font-size: .875rem; white-space: nowrap; }
@media (max-width: 47.99rem) {
  .status__balken { border-radius: 999px; min-height: 2.2rem; }
  .status__fuellung { border-radius: 999px; }
  .status__balken .status__text { font-size: .75rem; text-align: center; }
}
.status__fuellung { display: flex; align-items: center; justify-content: center; }
.status__balken .status__text { display: block; position: static; background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; line-height: 1; }
.status__balken .status__text { width: auto; height: auto; background: none; animation: none; }
.status__balken .status__fuellung { display: flex; align-items: center; justify-content: center; height: auto; }
/* Statusbalken v4: ruhige Vollfarbe wie der Button, volle Höhe, gerade Kante bei 80 % */
.status__balken .status__fuellung,
[data-palette="f"] .status__balken .status__fuellung { inset: 0 auto 0 0; width: 80%; border-radius: 0; background: var(--w-btn); animation: none; }
.status__balken { overflow: hidden; }
.status__balken .status__text, .status__balken .status__text strong { color: var(--w-btn-text); text-shadow: none; }
@media (max-width: 47.99rem) { .status__balken .status__fuellung { border-radius: 0; } }

/* ---------- Kurs-Mockup im Angebot ---------- */
.kurs-mockup { margin: 0 0 var(--s-4); text-align: center; }
.kurs-mockup img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--w-shadow); }
.kurs-mockup figcaption { margin-top: 1.25rem; }
.kurs-mockup__titel { margin: 0 auto .5rem; max-width: none; font: 300 clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem)/1.1 var(--serif); color: var(--w-ink); letter-spacing: -.015em; }
.kurs-mockup__punkte { margin: 0 auto; max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; font-size: .9375rem; color: var(--w-text); }
.kurs-mockup__punkte span + span::before { content: ""; display: inline-block; width: .35rem; height: .35rem; margin-right: .9rem; border-radius: 50%; background: var(--w-accent); vertical-align: middle; }
@media (min-width: 64rem) { section[aria-labelledby="angebot-titel"] .kurs-mockup { margin-inline: -8rem; } }
@media (max-width: 29.99rem) {
  .kurs-mockup__punkte { font-size: .8125rem; gap: .3rem .5rem; flex-wrap: nowrap; }
  .kurs-mockup__punkte span + span::before { margin-right: .5rem; width: .3rem; height: .3rem; }
}
/* Kopf symmetrisch: Logo links, Balken exakt mittig, Button rechts, gleiche Abstände */
@media (min-width: 48rem) {
  .f-kopf--status .f-kopf__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .f-kopf--status .marke { justify-self: start; }
  .f-kopf--status .status { justify-self: center; width: clamp(16rem, 32vw, 27rem); }
  .f-kopf--status .f-kopf__cta.btn { justify-self: end; }
}
/* Gleiche Abstände: Logo – Balken – Button verteilen sich gleichmäßig */
@media (min-width: 48rem) {
  .f-kopf--status .f-kopf__inner { display: flex; justify-content: space-between; align-items: center; }
  .f-kopf--status .status { flex: 0 1 clamp(16rem, 32vw, 27rem); width: auto; }
}
@media (min-width: 48rem) { .f-kopf--status .status, .f-kopf--status .marke, .f-kopf--status .f-kopf__cta { align-self: center; margin-block: 0; } }

/* =====================================================================
   Mehr Tiefe: Kaufblock unter dem Video, Geschichte als Bildband,
   Wortband, Lichtscheine, Einblendungen, hervorgehobene Fragen
   ===================================================================== */

/* Kaufblock direkt unter dem Video */
.sofort-kauf { position: relative; margin: 0 auto var(--s-5); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: 28px; background: var(--w-paper); box-shadow: 0 1px 0 var(--w-line), 0 30px 60px -36px rgba(var(--w-rgb), .55); display: grid; justify-items: center; gap: .9rem; text-align: center; }
.sofort-kauf::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--w-accent), transparent 40%, transparent 60%, var(--w-accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sofort-kauf__wert { margin: 0; max-width: none; display: flex; align-items: baseline; justify-content: center; gap: .6rem; color: var(--w-text); }
.sofort-kauf__wert s { font: 300 1.6rem/1 var(--serif); }
.sofort-kauf__wert strong { font: 300 clamp(2.8rem, 2.2rem + 2.4vw, 3.6rem)/1 var(--serif); color: var(--w-main); }
.btn--gross { width: 100%; max-width: 28rem; min-height: 3.75rem; font-size: 1.125rem; }
.zahlarten--klein { margin: 0; gap: .4rem; }
.zahlarten--klein svg { width: 3rem; }
.sofort-kauf__garantie { margin: .25rem 0 0; max-width: 32rem; display: flex; gap: .75rem; align-items: flex-start; text-align: left; padding: .9rem 1.1rem; border-radius: 18px; background: var(--w-tint); font-size: .9375rem; color: var(--w-text); }
.sofort-kauf__garantie svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--w-main); }
.sofort-kauf__garantie strong { display: block; color: var(--w-ink); }

/* Lichtschein hinter dem Einstieg */
.f-hero { position: relative; overflow: clip; }
.f-hero::before { content: ""; position: absolute; inset: -10% -20% auto; height: 60%; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--w-accent) 40%, transparent), transparent 62%); pointer-events: none; }
.f-hero > * { position: relative; }

/* Bewegtes Wortband */
.wortband { overflow: hidden; background: var(--w-main); color: var(--w-accent); padding: 1.1rem 0; }
.wortband__spur { display: flex; align-items: center; gap: 1.75rem; width: max-content; animation: w-band 40s linear infinite; }
.wortband span { font: 300 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--serif); white-space: nowrap; }
.wortband i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .6; flex: none; }
@keyframes w-band { to { transform: translateX(-50%); } }
[data-palette="f"] .wortband { color: var(--w-ground); }

/* Geschichte als Bildband wie auf der Website */
.story-band { padding-top: 0; background: var(--w-ground); }
.story-band__bild { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(88svh, 48rem); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); background: var(--w-main); }
.story-band__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.story-band__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--w-rgb), .94) 0%, rgba(var(--w-rgb), .78) 42%, rgba(var(--w-rgb), .08) 75%); }
.story-band__text { position: relative; z-index: 1; padding-block: 8rem clamp(2.25rem, 1.5rem + 3vw, 4rem); color: #F8F3EC; }
.story-band__text h2 { color: #FFFFFF; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem); max-width: 20ch; margin: 0 0 1.25rem; text-align: left; }
.story-band__hallo { font: 400 clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem)/1.2 var(--serif); color: var(--w-accent); margin: 0 0 1rem; }
.story-band__text p { color: #F8F3EC; font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); max-width: 36rem; }
.story-band__text strong { color: #FFFFFF; background: none; }
[data-palette="f"] .story-band__hallo { color: #E4EAE1; }
@media (min-width: 56rem) {
  .story-band__bild { align-items: center; }
  .story-band__bild img { width: 150%; max-width: none; object-position: 50% 24%; }
  .story-band__bild::after { background: linear-gradient(90deg, rgba(var(--w-rgb), .92) 0%, rgba(var(--w-rgb), .75) 36%, rgba(var(--w-rgb), .05) 66%); }
  .story-band__text { padding-block: 6rem; }
  .story-band__text > * { max-width: 34rem; }
}
.story-band__rest { font-size: 1.0625rem; }

/* NICHT-Liste: Zeilen gleiten nacheinander herein */
.js .nicht--animiert li { opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--w-ease), transform .6s var(--w-ease); }
.js .nicht--animiert.ist-sichtbar li { opacity: 1; transform: none; }
.js .nicht--animiert.ist-sichtbar li:nth-child(2) { transition-delay: .08s; }
.js .nicht--animiert.ist-sichtbar li:nth-child(3) { transition-delay: .16s; }
.js .nicht--animiert.ist-sichtbar li:nth-child(4) { transition-delay: .24s; }
.js .nicht--animiert.ist-sichtbar li:nth-child(5) { transition-delay: .32s; }
.js .nicht--animiert.ist-sichtbar li:nth-child(6) { transition-delay: .4s; }

/* Einblendung mit leichter Unschärfe */
.js .einblenden { filter: blur(3px); transition: opacity .7s var(--w-ease), transform .7s var(--w-ease), filter .7s var(--w-ease); }
.js .einblenden.ist-sichtbar { filter: none; }

/* Lichtscheine in einzelnen Flächen */
section[aria-labelledby="studien-titel"], section[aria-labelledby="angebot-titel"] { position: relative; background-image: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--w-accent) 35%, transparent), transparent 55%); }
.nacht { background-image: radial-gradient(ellipse at 50% 0%, rgba(175, 190, 165, .18), transparent 60%); }

/* Fragen hervorgehoben: dunkle Fläche, helle Karten */
#fragen { background: var(--w-main); background-image: radial-gradient(ellipse at 50% 100%, rgba(175, 190, 165, .2), transparent 60%); }
#fragen h2 { color: #FFFFFF; }
#fragen .faq-liste > li { box-shadow: 0 18px 40px -26px rgba(0,0,0,.55); }
#fragen .faq-liste > li:has([aria-expanded="true"]) { box-shadow: 0 0 0 2px var(--w-accent), 0 24px 50px -24px rgba(0,0,0,.6); }
#fragen .akk-inhalt p { color: var(--w-text); }
@media (prefers-reduced-motion: reduce) { .wortband__spur { animation: none; } }
/* Was du bekommst, im Kaufblock unter dem Video */
.sofort-kauf__liste { list-style: none; margin: .25rem 0 0; padding: 1rem 1.25rem; width: 100%; max-width: 32rem; display: grid; gap: .7rem; border-radius: 18px; background: var(--w-tint); text-align: left; }
.sofort-kauf__liste li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: var(--w-ink); }
.sofort-kauf__liste svg { width: 2rem; height: 2rem; flex: none; padding: .4rem; border-radius: 50%; background: var(--w-paper); color: var(--w-main); }
.sofort-kauf__liste strong { font-weight: 500; }

/* Kaufblock unter dem Video: Button, Leistungen, Vertrauen, Zahlarten, Preis, Button */
.sofort-kauf__titel { margin: .4rem 0 -.3rem; max-width: none; font: 400 1.35rem/1.2 var(--serif); color: var(--w-ink); }
.sofort-kauf__liste { margin-top: 0; }
.sofort-kauf .vertrauen { margin-top: .2rem; }
.sofort-kauf__wert { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--w-line); width: 100%; max-width: 32rem; }

/* Einheitliches Kaufmodul: überall gleich – Preis, Button, Vertrauen, Zahlarten */
.kauf-modul { width: 100%; max-width: 32rem; margin: var(--s-4) auto 0; display: grid; justify-items: center; gap: .85rem; text-align: center; }
.kauf-preis { margin: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem .6rem; color: var(--w-text); }
.kauf-preis > span { font-size: .9375rem; }
.kauf-preis s { font: 300 1.6rem/1 var(--serif); color: var(--w-strike); }
.kauf-preis strong { font: 300 clamp(2.8rem, 2.2rem + 2.4vw, 3.6rem)/1 var(--serif); color: var(--w-main); }
.kauf-modul .btn--gross { width: 100%; }
.kauf-modul .vertrauen { margin: 0; }
.kauf-modul .zahlarten { margin: 0; }
.sofort-kauf .kauf-modul { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--w-line); }
.angebotsbox .kauf-modul, .letzte .kauf-modul { margin-top: var(--s-3); }
/* Kaufleiste am Handy: gleiche Preisdarstellung in klein */
.kaufleiste__preis s { font: 300 1.1rem/1 var(--serif); color: var(--w-strike); }
.kaufleiste__preis strong { font: 300 1.9rem/1 var(--serif); color: var(--w-main); }
/* Vertrauenszeile im Kaufmodul bricht überall gleich um: zwei Punkte oben, Ablefy darunter */
.kauf-modul .vertrauen { display: grid; grid-template-columns: auto auto; justify-content: center; gap: .35rem .9rem; font-size: .8125rem; }
.kauf-modul .vertrauen li:last-child { grid-column: 1 / -1; justify-self: center; }

/* „Stell dir mal vor …“: Foto unter cremefarbenem Schleier, Zeilen fliegen nacheinander von links herein */
.vorstellung--creme::before { background: linear-gradient(180deg, rgba(248, 243, 236, .86), rgba(248, 243, 236, .93)); }
.vorstellung--creme h2 { margin: 0 0 var(--s-4); text-align: center; font-weight: 300; color: var(--w-ink); }
.vorstellung--creme, .vorstellung--creme blockquote p, .vorstellung--creme .frage, .vorstellung--creme p { color: var(--w-ink); }
.vorstellung--creme blockquote { border-left-color: var(--w-main); }
.js .vorstellung--creme .einfliegen { transform: translateX(-48px); }
.js .vorstellung--creme .frage.einfliegen { transform: translateY(18px) scale(.96); }
.js .vorstellung--creme .einfliegen.ist-sichtbar { transform: none; }
.vorstellung--creme blockquote:nth-of-type(1) { transition-delay: .05s !important; }
.vorstellung--creme blockquote:nth-of-type(2) { transition-delay: .2s !important; }
.vorstellung--creme blockquote:nth-of-type(3) { transition-delay: .35s !important; }
.vorstellung--creme blockquote:nth-of-type(4) { transition-delay: .5s !important; }
.vorstellung--creme .frage { transition-delay: .7s !important; }
@media (prefers-reduced-motion: reduce) { .js .vorstellung--creme .einfliegen { transform: none; } }
.vorstellung--creme h2 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); line-height: 1.1; }

/* Vom Denker zum Beobachter: die gefüllte Markierung wandert ständig von Meditation bis Ruhe & Klarheit und beginnt von vorn */
@keyframes w-kette { 0% { background: transparent; border-color: rgba(var(--w-rgb), .25); color: var(--w-ink); } 3%, 11% { background: var(--w-main); border-color: var(--w-main); color: #FFFFFF; } 15%, 100% { background: transparent; border-color: rgba(var(--w-rgb), .25); color: var(--w-ink); } }
.kette li span, .kette li:last-child span { background: transparent; border-color: rgba(var(--w-rgb), .25); color: var(--w-ink); font-weight: 400; animation: w-kette 9.9s linear infinite both; }
.kette li:nth-child(1) span { animation-delay: 0.0s; }
.kette li:nth-child(2) span { animation-delay: 1.1s; }
.kette li:nth-child(3) span { animation-delay: 2.2s; }
.kette li:nth-child(4) span { animation-delay: 3.3s; }
.kette li:nth-child(5) span { animation-delay: 4.4s; }
.kette li:nth-child(6) span { animation-delay: 5.5s; }
.kette li:nth-child(7) span { animation-delay: 6.6s; }
.kette li:nth-child(8) span { animation-delay: 7.7s; }
.kette li:nth-child(9) span { animation-delay: 8.8s; }
@media (prefers-reduced-motion: reduce) { .kette li span { animation: none; } .kette li:last-child span { background: var(--w-main); border-color: var(--w-main); color: #FFFFFF; } }

/* Geschichte in vier Kapiteln: Bild und Text, am Desktop abwechselnd links und rechts */
.kapitel-liste { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); margin-block: var(--s-5); }
.kapitel { display: grid; gap: 1.25rem; align-items: center; }
.kapitel__bild { margin: 0; border-radius: 24px; overflow: hidden; background: var(--w-tint); box-shadow: 0 30px 60px -36px rgba(var(--w-rgb), .55); }
.kapitel__bild img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kapitel--buch .kapitel__bild { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.kapitel--buch .kapitel__bild img { object-fit: contain; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); }
.kapitel--heute .kapitel__bild img { object-position: 50% 30%; }
.kapitel__text { color: var(--w-text); }
.kapitel__text p { margin: 0 0 1rem; }
.kapitel__text p:last-child { margin-bottom: 0; }
.kapitel__nr { display: block; margin-bottom: .5rem; font: 300 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--serif); color: var(--w-accent); }
@media (min-width: 56rem) {
  .kapitel { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .kapitel:nth-child(odd) .kapitel__bild { order: 2; }
  .kapitel:nth-child(odd) { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

/* Kapitel wie „Heute sieht mein Leben so aus“ auf der Website: gleiche Bildhöhe, Ecken, Raster 7/5 */
.kapitel-liste { width: min(62rem, 100%); margin-inline: auto; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.kapitel { grid-template-columns: none; gap: 1.25rem; }
.kapitel__bild { display: grid; border-radius: 22px; box-shadow: none; background: none; overflow: visible; padding: 0; }
.kapitel__bild img { width: 100%; height: clamp(16rem, 40vw, 26rem); aspect-ratio: auto; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.kapitel--tiefpunkt .kapitel__bild img { object-position: 50% 30%; }
.kapitel--heute .kapitel__bild img { object-position: 50% 18%; }
.kapitel--tagebuch .kapitel__bild img { object-position: 50% 70%; }
.kapitel--buch .kapitel__bild { padding: 0; }
.kapitel--buch .kapitel__bild picture { display: grid; place-items: center; height: clamp(16rem, 40vw, 26rem); border-radius: 22px; background: var(--w-tint); box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.kapitel--buch .kapitel__bild img { width: auto; height: 82%; object-fit: contain; border-radius: 4px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .35); }
.kapitel__text h3 { font: 300 clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .6rem; color: var(--w-ink); }
.kapitel__text p { max-width: 34ch; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
@media (min-width: 56rem) {
  .kapitel, .kapitel:nth-child(odd) { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
  .kapitel:nth-child(odd) .kapitel__bild { order: 0; }
  .kapitel:nth-child(even) .kapitel__bild { order: 2; }
  .kapitel:nth-child(even) { grid-template-columns: 5fr 7fr; }
}
.kapitel--buch .kapitel__bild img { height: clamp(13rem, 33vw, 21.5rem); max-width: 90%; }

/* Geschichte als Zeitstrahl wie auf der Website, im Funnel mit Bild + Text je Station */
.zeitstrahl { list-style: none; margin: var(--s-5) auto; padding: 0; width: min(66rem, 100%); position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.zeitstrahl::before { content: ""; position: absolute; top: .9rem; bottom: .9rem; left: .55rem; width: 2px; background: linear-gradient(180deg, var(--w-main) 0%, var(--w-main) 70%, var(--w-accent) 100%); opacity: .35; }
.zs-schritt { position: relative; display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); column-gap: 1.25rem; }
.zs-wann { grid-column: 2; display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; }
.zs-num { font: 300 clamp(2.75rem, 2rem + 3vw, 4.5rem)/1 var(--serif); color: var(--w-ink); letter-spacing: -.02em; }
.zs-label { font-size: .9375rem; color: var(--w-text); }
.zs-word { font: 300 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem)/1 var(--serif); color: var(--w-ink); }
.zs-punkt { grid-column: 1; grid-row: 1; align-self: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--w-ground); border: 2px solid var(--w-main); position: relative; z-index: 1; transition: background .6s var(--w-ease), box-shadow .6s var(--w-ease); }
.zs-schritt.ist-sichtbar .zs-punkt { background: var(--w-main); box-shadow: 0 0 0 6px rgba(var(--w-rgb), .1); }
.zs-schritt--heute .zs-punkt, .zs-schritt--heute.ist-sichtbar .zs-punkt { background: var(--w-accent); border-color: var(--w-accent); }
.zs-inhalt { grid-column: 2; display: grid; gap: 1.1rem; }
.zs-bild { margin: 0; display: grid; }
.zs-bild img { width: 100%; height: clamp(16rem, 40vw, 22rem); object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.zs-schritt--tiefpunkt .zs-bild img { object-position: 50% 30%; }
.zs-schritt--tagebuch .zs-bild img { object-position: 50% 70%; }
.zs-schritt--heute .zs-bild img { object-position: 50% 18%; }
.zs-schritt--buch .zs-bild picture { display: grid; place-items: center; height: clamp(16rem, 40vw, 22rem); border-radius: 22px; background: var(--w-tint); box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.zs-schritt--buch .zs-bild img { width: auto; max-width: 90%; height: clamp(13rem, 33vw, 18rem); object-fit: contain; border-radius: 4px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .35); }
.zs-text h3 { font: 300 clamp(1.45rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); margin: 0 0 .6rem; color: var(--w-ink); }
.zs-text p { margin: 0 0 .9rem; max-width: 38ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.zs-text p:last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .zeitstrahl::before { left: calc(11rem + 1.5rem + .55rem); }
  .zs-schritt { grid-template-columns: 11rem 1.15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .zs-wann { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-end; gap: .2rem; margin: 0; padding-top: .4rem; text-align: right; }
  .zs-punkt { grid-column: 2; grid-row: 1; align-self: start; margin-top: .9rem; }
  .zs-inhalt { grid-column: 3; grid-row: 1; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.25rem; align-items: center; }
}
.zeitstrahl.f-breit { padding-block: 0; padding-inline: 1.125rem; box-sizing: border-box; width: min(66rem, 100%); }
.zeitstrahl::before { left: calc(1.125rem + .55rem); }
@media (min-width: 56rem) { .zeitstrahl::before { left: calc(1.125rem + 11rem + 1.5rem + .55rem); } }
@media (min-width: 56rem) { .zs-word { font-size: clamp(1.6rem, 1.2rem + .8vw, 2rem); } }

/* Zeitstrahl v2: Aufbau wie „Wie alles anfing“ auf der Website – Text im Vordergrund, nur ein kleines Bild */
.zeitstrahl.f-breit { width: min(62rem, 100%); }
.zeitstrahl { gap: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.zs-inhalt { gap: .9rem; }
.zs-text h3 { font: 300 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.15 var(--serif); margin: 0 0 .5rem; }
.zs-text p { max-width: 40rem; font-size: clamp(1.1rem, 1.02rem + .35vw, 1.25rem); line-height: 1.6; }
.zs-bild { width: min(100%, 17rem); }
.zs-bild img { height: 11rem; border-radius: 16px; box-shadow: 0 18px 36px -26px rgba(var(--w-rgb), .55); }
.zs-schritt--buch .zs-bild picture { height: 11rem; border-radius: 16px; box-shadow: 0 18px 36px -26px rgba(var(--w-rgb), .55); }
.zs-schritt--buch .zs-bild img { height: 8.75rem; max-width: 70%; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .35); }
@media (min-width: 56rem) {
  .zeitstrahl::before { left: calc(1.125rem + 13rem + 1.5rem + .55rem); }
  .zs-schritt { grid-template-columns: 13rem 1.15rem minmax(0, 1fr); }
  .zs-word { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
  .zs-inhalt { grid-template-columns: minmax(0, 1fr) 12rem; gap: 2rem; align-items: start; padding-top: .4rem; }
  .zs-bild { order: 2; width: 12rem; }
  .zs-bild img, .zs-schritt--buch .zs-bild picture { height: 14rem; }
  .zs-schritt--buch .zs-bild img { height: 11rem; }
}
@media (max-width: 55.99rem) {
  .zs-bild { order: 2; width: 11rem; }
  .zs-bild img, .zs-schritt--buch .zs-bild picture { height: 8.5rem; }
  .zs-schritt--buch .zs-bild img { height: 6.75rem; }
}

/* Zeitstrahl v3 – wie „Wie alles anfing“ auf der Website: links kleine Bildkachel + Zeitmarke, Linie mit Punkt, rechts Überschrift + Text */
.zs-schritt { grid-template-columns: 1.15rem minmax(0, 1fr); column-gap: 1.25rem; }
.zs-wann { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .9rem; margin: 0 0 .8rem; }
.zs-marke { display: flex; align-items: baseline; gap: .5rem; }
.zs-kachel { margin: 0; flex: none; width: 4.75rem; height: 4.75rem; border-radius: 14px; overflow: hidden; background: var(--w-tint); box-shadow: 0 12px 26px -18px rgba(var(--w-rgb), .6); display: grid; place-items: center; }
.zs-kachel picture { display: contents; }
.zs-kachel img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.zs-schritt--tiefpunkt .zs-kachel img { object-position: 50% 25%; }
.zs-schritt--tagebuch .zs-kachel img { object-position: 50% 75%; }
.zs-schritt--heute .zs-kachel img { object-position: 50% 15%; }
.zs-schritt--buch .zs-kachel img { width: auto; height: 78%; object-fit: contain; border-radius: 3px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35); }
.zs-punkt { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.zs-inhalt { grid-column: 2; grid-row: 2; display: block; padding: 0; }
.zs-inhalt h3 { font: 300 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.2 var(--serif); margin: 0 0 .5rem; color: var(--w-ink); }
.zs-inhalt p { margin: 0 0 .9rem; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.175rem); line-height: 1.65; }
.zs-inhalt p:last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .zeitstrahl::before { left: calc(1.125rem + 13rem + 1.5rem + .55rem); }
  .zs-schritt { grid-template-columns: 13rem 1.15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .zs-wann { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-end; gap: .7rem; margin: 0; text-align: right; }
  .zs-marke { flex-direction: column; align-items: flex-end; gap: .2rem; }
  .zs-kachel { width: 8.5rem; height: 8.5rem; border-radius: 18px; }
  .zs-punkt { grid-column: 2; grid-row: 1; align-self: start; margin-top: .9rem; }
  .zs-inhalt { grid-column: 3; grid-row: 1; padding-top: .4rem; }
}

/* Geschichte als S-Linie: Karten im Wechsel rechts/links, Bild gegenüber, Linie (SVG aus s-weg.js) schwingt von Karte zu Karte */
.s-weg { position: relative; width: min(66rem, 100%); margin: var(--s-5) auto; }
.s-linie { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.s-linie path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-linie__spur { stroke: rgba(var(--w-rgb), .14); stroke-width: 2; }
.s-linie__pfad { stroke: var(--w-main); stroke-width: 2.5; transition: stroke-dashoffset .15s linear; }
.s-liste { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
.s-station { display: grid; gap: 1.1rem; }
.s-bild { margin: 0; }
.s-bild img { display: block; width: 100%; height: clamp(15rem, 55vw, 20rem); object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.s-station--tagebuch .s-bild img { object-position: 50% 70%; }
.s-station--tiefpunkt .s-bild img { object-position: 50% 0; }
.s-station--heute .s-bild img { object-position: 50% 18%; }
.s-station--buch .s-bild picture { display: grid; place-items: center; height: clamp(15rem, 55vw, 20rem); border-radius: 22px; background: var(--w-tint); box-shadow: 0 24px 50px -34px rgba(var(--w-rgb), .55); }
.s-station--buch .s-bild img { width: auto; max-width: 80%; height: 78%; object-fit: contain; border-radius: 4px; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .35); }
.s-karte { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: 22px; background: var(--w-paper); box-shadow: 0 1px 0 var(--w-line), 0 24px 50px -38px rgba(var(--w-rgb), .5); }
.s-punkt { position: absolute; top: 0; left: 50%; width: 1.15rem; height: 1.15rem; margin: -.575rem 0 0 -.575rem; border-radius: 50%; background: var(--w-ground); border: 2px solid var(--w-main); transition: background .6s var(--w-ease), box-shadow .6s var(--w-ease); }
.s-karte.ist-sichtbar .s-punkt { background: var(--w-main); box-shadow: 0 0 0 6px rgba(var(--w-rgb), .1); }
.s-station--heute .s-karte .s-punkt { background: var(--w-accent); border-color: var(--w-accent); }
.s-wann { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: .2rem 0 .6rem; max-width: none; }
.s-wort { font: 300 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.1 var(--serif); color: var(--w-ink); }
.s-num { font: 300 clamp(2.4rem, 2rem + 2vw, 3.4rem)/1 var(--serif); color: var(--w-ink); letter-spacing: -.02em; }
.s-label { font-size: .9375rem; color: var(--w-text); }
.s-karte h3 { text-align: center; font: 400 clamp(1.15rem, 1.05rem + .4vw, 1.35rem)/1.3 var(--sans); color: var(--w-main); margin: 0 0 .7rem; }
.s-karte p:not(.s-wann) { margin: 0; max-width: none; font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem); line-height: 1.65; color: var(--w-text); }
.s-karte strong { font-weight: 600; color: var(--w-ink); }
@media (max-width: 55.99rem) {
  .s-station { grid-template-areas: "karte" "bild"; }
  .s-karte { grid-area: karte; }
  .s-bild { grid-area: bild; }
}
@media (min-width: 56rem) {
  .s-liste { gap: clamp(3.5rem, 2rem + 4vw, 6rem); padding-top: 4.5rem; }
  .s-station { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 2rem + 5vw, 7rem); align-items: center; }
  .s-station--rechts .s-bild { order: 1; } .s-station--rechts .s-karte { order: 2; }
  .s-station--links .s-karte { order: 1; } .s-station--links .s-bild { order: 2; }
  .s-bild img, .s-station--buch .s-bild picture { height: clamp(20rem, 24vw, 26rem); }
  .s-karte { padding: 2rem 2rem 1.9rem; }
}
.s-station--buch .s-bild img { height: clamp(11.5rem, 42vw, 15.5rem); }
@media (min-width: 56rem) {
  .s-liste { gap: clamp(5rem, 3rem + 4vw, 7.5rem); }
  .s-station--buch .s-bild img { height: clamp(15.5rem, 19vw, 20rem); }
}

/* S-Linie: alle Kästen gleich groß – Bild und Text pro Station gleich hoch, über alle Stationen dieselbe Höhe */
.s-karte { display: flex; flex-direction: column; justify-content: center; }
.s-station--buch .s-bild img { height: 86%; max-width: 86%; }
.s-station--buch .s-bild picture { padding: 0; }
@media (max-width: 55.99rem) {
  .s-bild img, .s-station--buch .s-bild picture { height: 18rem; }
  .s-station--buch .s-bild img { height: 15.5rem; }
}
@media (min-width: 56rem) {
  .s-station { align-items: stretch; }
  .s-karte { min-height: 26rem; }
  .s-bild { display: grid; }
  .s-bild picture { display: block; height: 100%; min-height: 26rem; }
  .s-bild img { height: 100%; min-height: 26rem; }
  .s-station--buch .s-bild picture { display: grid; place-items: center; height: 100%; min-height: 26rem; }
  .s-station--buch .s-bild img { height: 22rem; min-height: 0; max-width: 88%; }
}

/* Abschluss der Geschichte: die drei Zahlen groß und breit */
.story-band .zahlen { width: min(62rem, calc(100vw - 2.25rem)); margin: var(--s-6) 0 var(--s-4) 50%; transform: translateX(-50%); gap: clamp(.6rem, .4rem + 1vw, 1.25rem); }
.story-band .zahl { padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) .6rem; border-radius: 22px; }
.story-band .zahl strong { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1.05; }
.story-band .zahl > span { font-size: clamp(.875rem, .8rem + .35vw, 1.125rem); margin-top: .5rem; }
.story-band .zahlen + p { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
@media (min-width: 56rem) {
  .s-karte { min-height: 27rem; }
  .s-bild picture { position: relative; min-height: 27rem; }
  .s-bild picture img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
  .s-station--buch .s-bild picture img { position: static; width: auto; height: 23rem; max-width: 88%; }
}
.story-band .zahlen { width: 100%; margin: var(--s-6) 0 var(--s-4); transform: none; }
@media (min-width: 48rem) { .story-band .zahlen { width: min(62rem, calc(100vw - 2.25rem)); margin-left: 50%; transform: translateX(-50%); } }
@media (max-width: 47.99rem) {
  .story-band .zahl { padding: 1.2rem .3rem; }
  .story-band .zahl strong { font-size: clamp(1.45rem, .9rem + 2.6vw, 2rem); }
}
@media (min-width: 48rem) { .story-band .zahl strong { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); } }
@media (min-width: 48rem) { .story-band .zahl { padding-inline: clamp(1rem, .5rem + 1.5vw, 2rem); } .story-band .zahl strong { font-size: clamp(1.8rem, 1rem + 2.3vw, 3.1rem); } }

/* S-Linie: Kästen ca. 25 % niedriger, farbige Umrandung, Tagebuch-Bild mit Decke und Meer */
.s-karte, .s-bild img, .s-station--buch .s-bild picture { border: 1.5px solid var(--w-accent); }
.s-station--buch .s-bild picture img { border: 0; }
.s-station--tagebuch .s-bild img { object-position: 50% 6%; }
@media (max-width: 55.99rem) {
  .s-bild img, .s-station--buch .s-bild picture { height: 13.5rem; }
  .s-station--buch .s-bild img { height: 11.5rem; }
}
@media (min-width: 56rem) {
  .s-karte { min-height: 20.5rem; padding: 1.5rem 1.9rem 1.4rem; }
  .s-karte p:not(.s-wann) { font-size: 1.0625rem; line-height: 1.6; }
  .s-wann { margin: 0 0 .4rem; }
  .s-karte h3 { margin-bottom: .5rem; }
  .s-bild picture { min-height: 20.5rem; }
  .s-station--buch .s-bild picture { min-height: 20.5rem; place-items: center; justify-content: center; align-content: center; }
  .s-station--buch .s-bild picture img { height: 17rem; margin: auto; }
}
@media (min-width: 56rem) { .s-karte, .s-bild picture, .s-station--buch .s-bild picture { min-height: 21.5rem; } }
/* Buch ohne Leerbalken: Seitenverhältnis frei, größer im Kasten, oben und unten gleicher Abstand */
.s-station--buch .s-bild picture img { width: auto; max-width: none; object-fit: fill; aspect-ratio: 723 / 992; height: 11.5rem; margin: auto; }
@media (min-width: 56rem) { .s-station--buch .s-bild picture img { height: 18.5rem; } }
.s-bild picture source { display: none; } .s-station--buch .s-bild picture { align-content: center; justify-content: center; }

/* Das sagen Teilnehmer: oben zwei Screenshots nebeneinander, darunter drei */
.belege { list-style: none; margin: var(--s-4) auto 0; padding: 0; display: grid; gap: clamp(1rem, .6rem + 2vw, 2rem); justify-content: center; align-items: end; }
.belege--zwei { grid-template-columns: repeat(2, minmax(0, 15rem)); }
.belege--drei { grid-template-columns: repeat(3, minmax(0, 15rem)); margin-top: clamp(1.75rem, 1rem + 3vw, 3rem); }
.belege .beleg figcaption { min-height: 0; }
.belege .beleg__titel { font-size: clamp(.8rem, .75rem + .3vw, .95rem); }
@media (max-width: 47.99rem) {
  .belege--zwei, .belege--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belege--drei li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
  .handy { padding: .35rem; border-radius: 1.5rem; }
  .handy img { border-radius: 1.2rem; }
}
/* Kopf: Balken genau auf die Seitenmitte, Button um denselben Weg nach rechts (Breite Button − Breite Logo) / 2 ≈ 3rem */
@media (min-width: 48rem) { .f-kopf--status .status, .f-kopf--status .f-kopf__cta { position: relative; left: 3rem; } }
@media (min-width: 48rem) and (max-width: 74.99rem) { .f-kopf--status .f-kopf__cta { left: 0; } .f-kopf--status .status { left: 1.5rem; } }

/* Letzter Punkt („Heute“) wie alle anderen dunkel */
.s-station--heute .s-karte .s-punkt { background: var(--w-ground); border-color: var(--w-main); }
.s-station--heute .s-karte.ist-sichtbar .s-punkt { background: var(--w-main); }
/* Kopf, schmale Desktopbreite: Balkentext passt in die Füllung */
@media (min-width: 48rem) and (max-width: 63.99rem) { .status__balken .status__text, .status__balken .status__text strong { font-size: .72rem; white-space: nowrap; } }

/* Teilnehmer v2: oben drei, darunter zwei, Screenshots größer, Aussagen groß und hervorgehoben */
#erfahrungen .f-breit { max-width: 66rem; }
.belege { gap: clamp(1rem, .5rem + 2.5vw, 2.75rem); align-items: stretch; }
.belege--drei { grid-template-columns: repeat(3, minmax(0, 18.5rem)); margin-top: var(--s-4); }
.belege--zwei { grid-template-columns: repeat(2, minmax(0, 18.5rem)); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.belege .beleg figcaption { justify-content: flex-end; margin-bottom: 1rem; }
.belege .beleg__titel { font: 400 clamp(1.1rem, .95rem + .6vw, 1.45rem)/1.3 var(--serif); color: #FFFFFF; margin: 0 0 .45rem; max-width: none; text-wrap: balance; }
.belege .beleg__name { display: inline-block; align-self: center; margin: 0; padding: .2rem .75rem; border-radius: 999px; background: rgba(175, 190, 165, .18); color: var(--w-accent); font-size: .875rem; font-weight: 500; letter-spacing: .02em; }
#erfahrungen .f-unterzeile { font-style: normal; }
@media (max-width: 47.99rem) {
  .belege--drei, .belege--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belege--drei li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
  .belege--zwei li:last-child { grid-column: auto; width: auto; }
  .belege .beleg__titel { font-size: 1rem; }
}

/* Kopf: Button „Ich will Meditation lernen“ so hoch wie der Statusbalken (Länge wie zuvor) */
@media (min-width: 48rem) { .f-kopf--status .f-kopf__cta.btn { min-height: 0; height: 2.35rem; padding-block: 0; display: inline-flex; align-items: center; } }

/* Was die Wissenschaft sagt: Kästen farbig umrandet, damit sie sich klar abheben */
.studien--shader .studie { border: 2px solid color-mix(in srgb, var(--w-main) 45%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 26px 50px -30px rgba(var(--w-rgb), .55); }
.studien--shader .studie h4 span { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--w-main) 35%, transparent); }

/* Community: zwei Screenshots auf heller Fläche */
.belege--hell .beleg__titel { color: var(--w-ink); }
.belege--hell .beleg__name { background: var(--w-tint); color: var(--w-main); }

/* Deine Reise in 30 Tagen: Vorher gedämpft, Nachher leuchtet, Pfeil dazwischen */
.reise { position: relative; gap: clamp(1.25rem, .75rem + 2.5vw, 3rem); align-items: stretch; }
.reise__seite { position: relative; padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); }
.reise__tag { display: inline-block; margin-bottom: .6rem; padding: .25rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.reise__seite h3 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); margin: 0 0 1.1rem; }
.reise__seite li { font-size: clamp(1.02rem, .97rem + .25vw, 1.125rem); }
.reise__seite--vorher { background: rgba(255,255,255,.9); border: 2px solid color-mix(in srgb, var(--w-strike) 30%, transparent); box-shadow: 0 24px 50px -36px rgba(0,0,0,.6); }
.reise__seite--vorher .reise__tag { background: color-mix(in srgb, var(--w-strike) 12%, transparent); color: var(--w-strike); }
.reise__seite--vorher h3 { color: var(--w-strike); }
.reise__seite--vorher li { opacity: .85; }
.reise__seite--nachher { background: linear-gradient(160deg, #C9D5BF 0%, var(--w-accent) 55%, #9DAF92 100%); border: 2px solid rgba(255,255,255,.75); box-shadow: 0 0 0 8px rgba(175,190,165,.18), 0 40px 80px -30px rgba(0,0,0,.55); }
.reise__seite--nachher .reise__tag { background: var(--w-main); color: #FFFFFF; }
.reise__seite--nachher li { font-weight: 500; }
.reise__pfeil { display: none; }
@media (min-width: 40rem) {
  .reise__seite--nachher { transform: scale(1.04); }
  .reise::after { content: "→"; position: absolute; left: 50%; top: 50%; z-index: 2; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--w-main); color: #FFFFFF; font-size: 1.5rem; box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 14px 30px -10px rgba(0,0,0,.5); }
}
@media (max-width: 39.99rem) {
  .reise::after { content: "↓"; display: grid; place-items: center; justify-self: center; width: 2.75rem; height: 2.75rem; margin: -.4rem auto; border-radius: 50%; background: var(--w-main); color: #FFFFFF; font-size: 1.25rem; box-shadow: 0 0 0 5px rgba(255,255,255,.9); position: relative; z-index: 2; order: 1; }
  .reise__seite--vorher { order: 0; } .reise__seite--nachher { order: 2; }
}

/* „Wäre es dir das wert?“ mit Button darunter */
.vorstellung .frage-cta { margin: var(--s-3) auto 0; max-width: none; display: flex; justify-content: center; transition-delay: .85s !important; }
.vorstellung .frage-cta .btn { width: auto; min-width: min(100%, 20rem); }
.js .vorstellung--creme .frage-cta.einfliegen { transform: translateY(18px); }
.js .vorstellung--creme .frage-cta.einfliegen.ist-sichtbar { transform: none; }

/* NICHT-Abschnitt: Kästen gleichmäßig größer und breiter */
.nicht { gap: clamp(.8rem, .5rem + 1vw, 1.25rem); }
.nicht li { min-height: 5.25rem; padding: 1.15rem 1.4rem; gap: 1rem; }
.nicht li::before { flex: none; width: 2.1rem; height: 2.1rem; font-size: 1rem; }
@media (min-width: 45rem) {
  .nicht { width: min(60rem, calc(100vw - 2.25rem)); margin-left: 50%; transform: translateX(-50%); grid-auto-rows: 1fr; }
  .nicht li { min-height: 6rem; padding: 1.4rem 1.75rem; }
}
@media (min-width: 45rem) { .nicht { margin-left: calc(50% - min(30rem, 50vw - 1.125rem)); margin-right: 0; transform: none; } }

/* Das bekommst du: Mockup + Titel in einem Kasten, Rest rückt nach oben */
.kurs-mockup { margin: 0 0 var(--s-3); border-radius: 28px; overflow: hidden; background: var(--w-paper); box-shadow: var(--w-shadow); border: 1.5px solid color-mix(in srgb, var(--w-accent) 70%, transparent); }
.kurs-mockup img { display: block; border-radius: 0; box-shadow: none; }
.kurs-mockup figcaption { margin: 0; padding: .9rem 1.25rem 1.3rem; }

/* Was diesen Kurs anders macht: Überschrift in einer Zeile */
#anders-titel { white-space: nowrap; max-width: none; font-size: clamp(1.45rem, .9rem + 3.3vw, var(--w-h2)); }
#anders-titel { font-size: clamp(1.25rem, .7rem + 3.2vw, 2.6rem); }
.kurs-mockup { position: relative; }
.kurs-mockup__punkte span { white-space: nowrap; }
@media (max-width: 47.99rem) { .kurs-mockup__punkte { flex-wrap: wrap; } }
@media (min-width: 48rem) {
  .kurs-mockup figcaption { position: absolute; left: 0; right: 0; bottom: clamp(.6rem, -.4rem + 2vw, 1.6rem); padding: 0 1.25rem; background: none; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) { .kurs-mockup figcaption { position: static; padding: .9rem 1.25rem 1.3rem; } }

/* Alle Kästen im Funnel einheitlich umrandet, damit sie herausstechen */
:root { --w-rand: 1.5px solid color-mix(in srgb, var(--w-main) 32%, transparent); }
.karte, .paket, .sofort-kauf, .nachricht blockquote, .chips li, .garantie, .s-karte, .kurs-mockup, .reise__seite--vorher { border: var(--w-rand); }
.angebotsbox { border-width: 2px; }
.nicht li.karte { border: 1.5px solid color-mix(in srgb, var(--w-strike) 28%, transparent); }
.zahl.karte { border: 1.5px solid var(--w-accent); }
.nacht .karte, #fragen .faq-liste > li { border: 1.5px solid color-mix(in srgb, var(--w-accent) 80%, transparent); }
.studien--shader .studie { border: 2px solid color-mix(in srgb, var(--w-main) 45%, transparent); }
.sofort-kauf::before { display: none; }

/* Kaufblock unter dem Video wie Vorlage: Überschrift, Normalpreis / Für nur, Garantie-Siegel, Leistungen, Kaufbereich */
.sofort-kauf__headline { margin: .2rem auto 0; max-width: 30rem; font: 400 clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem)/1.25 var(--serif); color: var(--w-ink); text-wrap: balance; }
.sofort-kauf__headline span { color: var(--w-main); font-weight: 500; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--w-accent) 55%, transparent) 62%, color-mix(in srgb, var(--w-accent) 55%, transparent) 92%, transparent 92%); }
.sofort-kauf__preise { display: grid; gap: .15rem; justify-items: center; margin-top: .3rem; }
.sofort-kauf__normal { margin: 0; max-width: none; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.2 var(--sans); }
.sofort-kauf__normal s { color: var(--w-strike); font-family: var(--sans); text-decoration-thickness: 2px; }
.sofort-kauf__nur { margin: 0; max-width: none; font: 500 clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem)/1.15 var(--sans); color: var(--w-ink); }
.sofort-kauf__nur strong { font: 300 clamp(2.6rem, 2rem + 2.6vw, 3.6rem)/1 var(--serif); color: var(--w-main); }
.sofort-kauf .siegel { width: clamp(8.5rem, 7rem + 6vw, 11rem); height: auto; margin: .3rem 0 .2rem; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25)); }
.sofort-kauf svg.siegel { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; outline: 0; aspect-ratio: 1; }
.sofort-kauf .kauf-modul--ohne-preis { margin-top: .2rem; padding-top: 0; border-top: 0; }

/* 1b · Fahrplan + alle Inhalte im Überblick: eigener Abschnitt, Karten abwechselnd Bild links/rechts */
.f-hero { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.inhalte-abschnitt { background: var(--w-tint); background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .55), transparent 60%); text-align: center; }
.inhalte-abschnitt h1 { margin-top: 0; }
.inhalte-titel { margin: var(--s-5) 0 var(--s-4); font-size: var(--w-h2); }
.inhalte-titel span { color: var(--w-main); font-style: normal; }
.inhalte { list-style: none; padding: 0; display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); width: min(66rem, calc(100vw - 2.25rem)); margin: 0 0 var(--s-5) calc(50% - min(33rem, 50vw - 1.125rem)); text-align: left; }
.inhalt { display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: 28px; background: var(--w-paper); border: var(--w-rand); box-shadow: 0 30px 60px -40px rgba(var(--w-rgb), .55); }
.inhalt__bild { display: grid; place-items: center; min-height: 13rem; border-radius: 20px; background: var(--w-ground); overflow: hidden; }
.inhalt__bild > img, .inhalt__bild picture img { display: block; width: 100%; height: auto; }
.inhalt--emre .inhalt__bild img { height: 17rem; object-fit: cover; object-position: 50% 20%; }
.inhalt--community .inhalt__bild { padding: 1.25rem 0; }
.inhalt--community .handy { width: 11rem; }
.inhalt__icon { display: grid; place-items: center; gap: .6rem; color: var(--w-main); }
.inhalt__icon svg { width: 5rem; height: 5rem; padding: 1.1rem; border-radius: 50%; background: var(--w-paper); border: var(--w-rand); }
.inhalt__icon span { font: 300 1.6rem/1 var(--serif); color: var(--w-ink); }
.inhalt__text h3 { margin: 0 0 .6rem; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 var(--serif); color: var(--w-ink); }
.inhalt__text p { margin: 0 0 1rem; max-width: 36rem; font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.6; color: var(--w-text); }
.inhalt__wert { display: inline-block; margin: 0 !important; padding: .55rem 1.1rem; border-radius: 14px; background: var(--w-tint); border: var(--w-rand); font-weight: 600; color: var(--w-ink); }
.inhalt__wert s { color: var(--w-strike); font: 400 1.05rem/1 var(--sans); }
@media (min-width: 56rem) {
  .inhalt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
  .inhalt:nth-child(even) .inhalt__bild { order: 2; }
  .inhalt:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .inhalt__bild { min-height: 17rem; }
}
.inhalt__wert strong { color: var(--w-main); font-weight: 600; }

/* 1b · H1 am Desktop breiter und kleiner: höchstens 3 Zeilen */
@media (min-width: 64rem) {
  .inhalte-abschnitt h1 { width: min(66rem, calc(100vw - 4rem)); max-width: none; margin-left: calc(50% - min(33rem, 50vw - 2rem)); font-size: clamp(2.75rem, 1.5rem + 2vw, 3.2rem); line-height: 1.12; }
}

/* 1b · Schlüsselwörter der H1 markiert (gleicher Marker wie im Kaufblock) */
.h1-mark { color: var(--w-main); font-weight: 400; background: linear-gradient(transparent 64%, color-mix(in srgb, var(--w-accent) 55%, transparent) 64%, color-mix(in srgb, var(--w-accent) 55%, transparent) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 1b · „Das bekommst du im Überblick“ in einer Zeile */
.inhalte-abschnitt > .f-spalte > h2.inhalte-titel { max-width: none; }
@media (min-width: 45rem) { .inhalte-abschnitt > .f-spalte > h2.inhalte-titel { white-space: nowrap; text-align: center; width: min(66rem, calc(100vw - 2.25rem)); margin-left: calc(50% - min(33rem, 50vw - 1.125rem)); } }

/* 1b · alle vier Kästen gleich groß wie der Kurs-Kasten: Bildfläche fest 17rem, Handy oben angeschnitten */
.inhalt__bild { height: 17rem; min-height: 0; }
.inhalt--kurs .inhalt__bild, .inhalt--tracker .inhalt__bild { height: 13rem; }
.inhalt--community .inhalt__bild { align-items: center; padding: .9rem 0; }
.inhalt--community .handy { width: auto; padding: .4rem; border-radius: 1.7rem; }
.inhalt--community .handy img { width: auto; height: 14.4rem; border-radius: 1.35rem; }
@media (min-width: 56rem) {
  .inhalt .inhalt__bild, .inhalt--kurs .inhalt__bild, .inhalt--tracker .inhalt__bild { height: 17rem; }
}

/* Garantiesiegel in allen Kaufbereichen zwischen Preis und Button (wie im Kaufblock oben) */
.kauf-modul svg.siegel--kauf { width: clamp(8.5rem, 7rem + 6vw, 11rem); height: auto; aspect-ratio: 1; margin: .3rem 0 .2rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25)); }

/* 1b · Kaufbereich unter den vier Kästen als eigener Kasten (wie der Kaufblock oben) */
.kauf-kasten { max-width: 41rem; margin: 0 auto; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border-radius: 28px; background: var(--w-paper); border: var(--w-rand); box-shadow: 0 1px 0 var(--w-line), 0 30px 60px -36px rgba(var(--w-rgb), .55); text-align: center; }
.kauf-kasten .kauf-modul { margin-top: 0; }
.kauf-kasten .chips { margin-top: var(--s-3); }
@media (max-width: 30rem) { :is(.kauf-kasten, .sofort-kauf__launch) .badge { display: inline-block; padding-inline: .8rem; line-height: 1.45; font-size: .8125rem; white-space: nowrap; } :is(.kauf-kasten, .sofort-kauf__launch) .badge svg { display: inline-block; vertical-align: -.2em; margin-right: .25rem; } }

/* 1b · Launch-Phase im Kauf-Kasten hervorgehoben: Gold wie das Garantiesiegel, sanftes Leuchten */
:is(.kauf-kasten, .sofort-kauf__launch) .badge { background: linear-gradient(135deg, #FFF6D6, #F6E3A1); border: 1.5px solid #D4A646; color: #0F3A3E; box-shadow: 0 8px 22px -12px rgba(154, 107, 31, .6); animation: launch-glanz 2.8s ease-in-out infinite; }
:is(.kauf-kasten, .sofort-kauf__launch) .badge svg { color: #9A6B1F; }
:is(.kauf-kasten, .sofort-kauf__launch) .badge strong { color: #7A5418; }
@keyframes launch-glanz { 0%, 100% { box-shadow: 0 8px 22px -12px rgba(154, 107, 31, .6), 0 0 0 0 rgba(212, 166, 70, .45); } 50% { box-shadow: 0 8px 22px -12px rgba(154, 107, 31, .6), 0 0 0 7px rgba(212, 166, 70, 0); } }
@media (prefers-reduced-motion: reduce) { :is(.kauf-kasten, .sofort-kauf__launch) .badge { animation: none; } }

/* Wortband heller: Salbei-Fläche statt dunklem Petrol, Wörter in Petrol */
.wortband, [data-palette="f"] .wortband { background: var(--w-accent); color: var(--w-main); }
.wortband i { opacity: .45; }

/* 2 · Kennst du das?: Kästen breiter, größere Schrift, farbige Icons; Wunsch-Satz als vierter Kasten */
.kennst-karten { width: min(48rem, calc(100vw - 2.25rem)); max-width: none; margin-left: calc(50% - min(24rem, 50vw - 1.125rem)); margin-right: 0; }
.kennst-karte { gap: 1.1rem; padding: 1.15rem 1.5rem; }
.kennst-karte p { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--w-text); }
.kennst-karte .emoji { width: 3.25rem; height: 3.25rem; background: var(--w-main); color: #FFFFFF; box-shadow: 0 0 0 5px color-mix(in srgb, var(--w-accent) 45%, transparent); }
.kennst-karte .emoji svg { width: 1.6rem; height: 1.6rem; }

/* 3 · Nicht deine Schuld: drei „ausprobiert“-Kästen mit rotem Kreuz + großer Petrol-Kasten statt Fließtext */
.versucht { list-style: none; padding: 0; margin: var(--s-3) auto var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + 1vw, 1.25rem); max-width: 40rem; }
.versucht__item { display: grid; justify-items: center; gap: .7rem; padding: clamp(1rem, .8rem + 1vw, 1.5rem) .5rem; border-radius: 22px; background: var(--w-paper); border: var(--w-rand); box-shadow: 0 24px 44px -34px rgba(var(--w-rgb), .6); font: 600 clamp(.95rem, .9rem + .3vw, 1.15rem)/1.2 var(--sans); color: var(--w-ink); }
.versucht__icon { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--w-tint); color: var(--w-main); }
.versucht__icon > svg { width: 1.6rem; height: 1.6rem; }
.versucht__x { position: absolute; right: -.35rem; bottom: -.25rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--w-strike); color: #FFFFFF; box-shadow: 0 0 0 3px var(--w-paper); }
.versucht__x svg { width: .85rem; height: .85rem; stroke-width: 2.6; }
.schuld-kasten { width: min(48rem, calc(100vw - 2.25rem)); margin: 0 0 var(--s-5) calc(50% - min(24rem, 50vw - 1.125rem)); padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem) clamp(1.25rem, 1rem + 2vw, 3rem); border-radius: 28px; background: var(--w-main); text-align: center; box-shadow: 0 40px 70px -40px rgba(var(--w-rgb), .8); }
section[aria-labelledby="schuld-titel"] .schuld-kasten p { margin: 0 auto; max-width: 34rem; color: rgba(255, 255, 255, .85); font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; }
section[aria-labelledby="schuld-titel"] .schuld-kasten p + p { margin-top: .6rem; }
section[aria-labelledby="schuld-titel"] .schuld-kasten .schuld-kasten__satz { max-width: none; margin-bottom: 1rem; font: 300 clamp(2.2rem, 1.5rem + 3.2vw, 3.8rem)/1.25 var(--serif); letter-spacing: -.02em; color: #FFFFFF; }
.schuld-kasten__satz em { font-style: italic; color: var(--w-accent); padding: 0 .06em .14em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C30 3.5 70 2.8 117 6.2' fill='none' stroke='%23AFBEA5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% .2em; }
section[aria-labelledby="schuld-titel"] .schuld-kasten strong { color: #FFFFFF; font-weight: 600; text-decoration: none; box-shadow: none; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--w-accent) 55%, transparent) 60%, color-mix(in srgb, var(--w-accent) 55%, transparent) 92%, transparent 92%); }

/* 5 · Das sagen Teilnehmer: Unterzeile klein, dicht unter der H2, mehr Luft zu den Zitaten */
#erfahrungen h2 { margin-bottom: .35rem; }
#erfahrungen .f-unterzeile { margin: 0 auto clamp(2.5rem, 2rem + 2.5vw, 4rem); font-size: clamp(.8rem, .76rem + .2vw, .9rem); letter-spacing: .04em; opacity: .65; }

/* Zwischen-Buttons (Kennst du das, Methode, Geschichte): führen zum Angebot */
.zwischen-cta { display: flex; justify-content: center; max-width: none; margin: clamp(2rem, 1.6rem + 1.8vw, 3rem) auto 0; }
.zwischen-cta .btn { width: auto; min-width: min(100%, 20rem); }

/* 8 · Community über Emre: Überschrift in einer Zeile (ab Tablet) */
@media (min-width: 45rem) { section[aria-labelledby="community-titel"] .f-breit > h2 { max-width: none; white-space: nowrap; } }

/* 11 · Garantie: goldenes Siegel statt Text-Kreis */
.garantie svg.siegel--garantie { width: clamp(8.5rem, 7rem + 5vw, 10.5rem); height: auto; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .22)); flex: none; }
/* 8 · Zitat-Titel Michelle/Basti gleich lang: ab Tablet breiter als die Handy-Spalte */
@media (min-width: 56rem) { .belege--hell .beleg__titel { width: 23rem; margin-left: calc((100% - 23rem) / 2); } }
/* Zwischen-Button auf dunkler Fläche (Reise in 30 Tagen): Salbei mit dunkler Schrift */
.nacht .zwischen-cta .btn { background: var(--w-accent); color: var(--w-deep); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
.nacht .zwischen-cta .btn:hover { background: #C3D0BA; color: var(--w-deep); }

/* Einheitliche Abschnitts-Überschriften: gleiche Größe, kräftiger (Garantie behält ihre eigene Größe) */
#inhalt :is(h2, h3.studien-titel, h3.kette-titel) { font-family: var(--serif); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
#inhalt #anders-titel { white-space: normal; }
@media (min-width: 56rem) { #inhalt #anders-titel { white-space: nowrap; } }
#inhalt .story-band__text h2 { max-width: 22ch; }
#inhalt h3.kette-titel { max-width: none; }
@media (min-width: 56rem) { #inhalt h3.kette-titel { white-space: nowrap; } }
#inhalt .garantie h2 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); font-weight: 300; }

/* 4 · Geschichte: „Hey, ich bin Emre.“ größer und in hellem Grün */
#inhalt .story-band__hallo, [data-palette="f"] #inhalt .story-band__hallo { font: 400 clamp(2rem, 1.4rem + 2.2vw, 3rem)/1.15 var(--serif); color: #C2DBB0; margin: 0 0 1rem; }

/* ===== NUR HANDY (< 768 px) – Einstieg nach Vorlage Growth Marketer ===== */
@media (max-width: 47.99rem) {
  /* Kopf: Logo zentriert oben, darunter Statusbalken in voller Breite, kein Button, scrollt mit */
  .f-kopf.f-kopf--status { position: relative; }
  .f-kopf--status .f-kopf__inner { display: grid; grid-template-columns: 1fr; grid-template-areas: "logo" "status"; justify-items: center; row-gap: .85rem; min-height: 0; padding-block: 1rem 1.1rem; }
  .f-kopf--status .marke { grid-area: logo; justify-self: center; }
  .f-kopf--status .marke__name { display: inline; }
  .f-kopf--status .status { grid-area: status; width: 100%; justify-self: stretch; left: 0; }
  .f-kopf--status .status__balken { max-width: none; min-height: 2.6rem; }
  .f-kopf--status .status__balken .status__text, .f-kopf--status .status__balken .status__text strong { font-size: .9rem; }
  .f-kopf--status .f-kopf__cta { display: none; }
  /* Bild im Einstieg im Video-Format 16:9 statt hochkant */
  .f-hero .f-hero__bild { aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center 22%; }
}
/* Gratulation: auf dem Desktop unverändert (mark ohne eigene Optik) */
.f-hero__glueck2 mark { background: none; color: inherit; }
@media (max-width: 47.99rem) {
  /* Statusbalken fast randlos wie bei Growth Marketer, Linie unter dem Kopf etwas höher */
  .f-kopf--status .f-kopf__inner { padding-inline: .6rem; padding-block: .8rem .7rem; row-gap: .7rem; }
  .f-kopf--status .status__balken { min-height: 2.3rem; }
  /* Gratulation: Zeile 1 „Gratulation …“, Zeile 2 fett „Ich habe noch etwas für dich.“ mit Marker auf „für dich“ */
  .f-hero__glueck2 { display: block; margin-top: .3rem; font-weight: 700; font-size: 1.2rem; color: var(--w-ink); }
  .f-hero__glueck2 mark { color: var(--w-main); padding: 0 .1em; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--w-accent) 80%, transparent) 55%, color-mix(in srgb, var(--w-accent) 80%, transparent) 92%, transparent 92%); }
}
/* „Jetzt Video anschauen ↓“ – nur Handy */
.video-hinweis { display: none; }
@media (max-width: 47.99rem) {
  .video-hinweis { display: flex; align-items: center; justify-content: center; gap: .45rem; max-width: none; margin: .9rem auto .6rem; font: 700 1rem/1.2 var(--sans); color: var(--w-main); }
  .video-hinweis svg { width: 1.35rem; height: 1.35rem; padding: .2rem; border-radius: 50%; background: var(--w-main); color: #FFFFFF; transform: rotate(90deg); animation: hinweis-wippen 1.4s ease-in-out infinite; }
}
@keyframes hinweis-wippen { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .video-hinweis svg { animation: none; } }
/* Einstieg Handy, Runde 3 – Desktop: Zusatz-Elemente ausgeblendet */
.video-trenner, .sofort-kauf__headline--draussen { display: none; }
@media (max-width: 47.99rem) {
  /* keine Linie unter dem Kopf */
  .f-kopf.f-kopf--status { box-shadow: none; border-bottom: 0; }
  /* Gratulation: Zeile 1 klein, Versalien, Gold – Zeile 2 groß, „für dich“ in Gold */
  .f-hero .f-hero__glueck { margin-top: .4rem; }
  .f-hero__glueck > strong { display: block; font: 600 .82rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9A6B1F; }
  .f-hero__glueck2 { margin-top: .45rem; font: 600 clamp(1.7rem, 1.4rem + 1.5vw, 2rem)/1.15 var(--serif); letter-spacing: -.01em; color: var(--w-ink); }
  .f-hero__glueck2 mark { padding: 0; background: none; color: #B07D22; font-style: italic; }
  /* „Jetzt Video anschauen“ etwas höher, darunter eine feine Linie als Stopp vor dem Video */
  .video-hinweis { margin: 1.1rem auto 0; }
  .video-trenner { display: block; width: 70%; height: 0; margin: 1.1rem auto 1.25rem; border: 0; border-top: 1px solid rgba(var(--w-rgb), .2); }
  /* „Sichere dir jetzt deinen Platz …“ unter dem Video außerhalb des Kastens; Kasten startet mit dem Preis */
  .sofort-kauf__headline--draussen { display: block; margin: .25rem auto 1.25rem; text-align: center; }
  .sofort-kauf .sofort-kauf__headline--drinnen { display: none; }
}
/* Einstieg Handy, Runde 4: durchgehend Creme, Abstände wie Growth Marketer, Zeile 2 in Versalien */
@media (max-width: 47.99rem) {
  .f-kopf.f-kopf--status { background: var(--w-ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .f-hero { background: var(--w-ground); }
  .f-hero::before { display: none; }
  .f-hero__glueck2 { margin-top: 1.1rem; font: 600 clamp(1.75rem, 1.45rem + 1.5vw, 2.05rem)/1.12 var(--serif); text-transform: uppercase; letter-spacing: .01em; }
  .f-hero__glueck2 mark { display: block; margin-top: .1rem; font-weight: 700; font-style: italic; color: #B07D22; }
  .f-hero .f-hero__kurz { margin-top: 1.25rem; }
}
/* Launch-Phase im Preis-Kasten unter dem Video – nur Handy */
.sofort-kauf__launch { display: none; }
@media (max-width: 47.99rem) { .sofort-kauf .sofort-kauf__launch { display: block; margin: 0 0 .2rem; } }
@media (max-width: 47.99rem) { .f-hero__glueck2 mark { font-style: normal; } }
/* Vom Denker zum Beobachter – nur Handy: dunkler Petrol-Kasten, goldenes Lauflicht */
@media (max-width: 47.99rem) {
  .kette-box { margin-top: var(--s-5); padding: 2rem 1rem 2.1rem; border-radius: 28px; background: var(--w-main); box-shadow: 0 40px 70px -40px rgba(var(--w-rgb), .8); }
  #inhalt .kette-box h3.kette-titel { color: #FFFFFF; margin-top: 0; margin-bottom: 1.4rem; }
  .kette-box .kette { gap: .55rem .35rem; }
  .kette-box .kette li + li::before { color: rgba(255, 255, 255, .55); }
  .kette-box .kette li span, .kette-box .kette li:last-child span { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; animation-name: w-kette-dunkel; }
  .kette-box .kette li:last-child span { border-color: #D4A646; color: #F6E3A1; font-weight: 600; }
  .kette-box + .zwischen-cta { margin-top: 1.75rem; }
}
@keyframes w-kette-dunkel { 0%, 1% { background: transparent; border-color: rgba(255, 255, 255, .3); color: #FFFFFF; } 3%, 11% { background: #D4A646; border-color: #D4A646; color: #0A2B2E; } 13%, 100% { background: transparent; border-color: rgba(255, 255, 255, .3); color: #FFFFFF; } }
@keyframes w-kette-dunkel-ziel { 0%, 1% { background: transparent; color: #F6E3A1; } 3%, 11% { background: #D4A646; color: #0A2B2E; } 13%, 100% { background: transparent; color: #F6E3A1; } }
@media (max-width: 47.99rem) { .kette-box .kette li:last-child span { animation-name: w-kette-dunkel-ziel; } }
@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) { .kette-box .kette li:last-child span { background: #D4A646; color: var(--w-deep); } }
/* Geschichte – nur Handy: Foto nur als Hintergrund, Text oben; Kästen/Bilder schmaler, gleich groß, gleiche Abstände */
@media (max-width: 47.99rem) {
  .story-band__bild { min-height: 0; align-items: flex-start; }
  .story-band__bild img { object-position: 50% 25%; }
  .story-band__bild::after { background: linear-gradient(180deg, rgba(var(--w-rgb), .86) 0%, rgba(var(--w-rgb), .72) 55%, rgba(var(--w-rgb), .86) 100%); }
  .story-band__text { padding-block: 2.6rem 2.4rem; }
  .s-liste { gap: 2.25rem; }
  .s-station { gap: 2.25rem; justify-items: center; }
  .s-karte, .s-bild { width: 80%; }
  .s-liste > .s-station:first-child .s-punkt { visibility: hidden; }
  .s-karte { min-height: 23.75rem; padding: 1.3rem 1.1rem 1.25rem; justify-content: center; }
  .s-karte p:not(.s-wann) { font-size: .95rem; line-height: 1.55; }
  .s-bild img, .s-station--buch .s-bild picture { height: 19rem; }
  .s-station--buch .s-bild picture img { height: 15rem; }
}
/* Abschnitt „Apps, Bücher …“ bis „Vom Denker zum Beobachter“ – nur Handy: Creme statt Salbei */
@media (max-width: 47.99rem) {
  section[aria-labelledby="schuld-titel"] { background: var(--w-ground); background-image: none; }
}
/* Geschichte-Band – nur Handy: weicher Verlauf Creme → Foto → Petrol (Text) → Creme */
@media (max-width: 47.99rem) {
  .story-band__bild img { object-position: 50% 18%; }
  .story-band__bild::after { background: linear-gradient(180deg,
    rgb(248, 243, 236) 0%,
    rgba(248, 243, 236, 0) 12%,
    rgba(var(--w-rgb), .15) 22%,
    rgba(var(--w-rgb), .78) 42%,
    rgba(var(--w-rgb), .9) 58%,
    rgba(var(--w-rgb), .9) 100%); }
  .story-band__text { padding-block: 12.5rem 2.6rem; }
}
/* Geschichte – nur Handy: Textkästen genau so hoch wie die Bilder (19rem); zu langer Text wird vorerst abgeschnitten */
@media (max-width: 47.99rem) {
  .s-karte { min-height: 0; height: 19rem; overflow: visible; }
  .s-karte p:not(.s-wann) { flex: 0 1 auto; min-height: 0; overflow: hidden; }
}
/* Zahlen-Blöcke unter der Geschichte – nur Handy: untereinander, Breite wie die Bilder (80 %), Zahl mittig, Text darunter */
@media (max-width: 47.99rem) {
  .story-band .zahlen { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1rem; width: 100%; }
  .story-band .zahl { display: grid; justify-items: center; gap: .35rem; width: 80%; padding: 1.4rem 1rem; text-align: center; }
  .story-band .zahl strong { font-size: 2.5rem; }
  .story-band .zahl > span { margin-top: 0; font-size: 1.05rem; }
}
/* Das sagen Teilnehmer – nur Handy: 2 × 2 Raster (zweite Julia ausgeblendet), Titel je 2 Zeilen, Unterzeile kleiner */
@media (max-width: 47.99rem) {
  #erfahrungen .f-breit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; row-gap: 1.75rem; align-items: start; }
  #erfahrungen .f-breit > :not(.belege) { grid-column: 1 / -1; }
  #erfahrungen .belege { display: contents; }
  #erfahrungen .beleg--julia2 { display: none; }
  #erfahrungen .belege li { width: auto; grid-column: auto; }
  #erfahrungen .f-unterzeile { font-size: .72rem; letter-spacing: .02em; margin-bottom: 1.5rem; }
  #erfahrungen .beleg__titel { font-size: .75rem; line-height: 1.3; text-wrap: balance; }
}
/* Geschichte-Band – nur Handy: Foto höher (Kopf knapp unter der Oberkante), Text höher, kurzer Übergang oben */
@media (max-width: 47.99rem) {
  .story-band__bild img { top: -15%; height: 120%; inset-inline: 0; bottom: auto; object-position: 50% 0%; }
  .story-band__bild::after { background: linear-gradient(180deg,
    rgb(248, 243, 236) 0%,
    rgba(248, 243, 236, 0) 5%,
    rgba(var(--w-rgb), .1) 12%,
    rgba(var(--w-rgb), .78) 34%,
    rgba(var(--w-rgb), .9) 50%,
    rgba(var(--w-rgb), .9) 100%); }
  .story-band__text { padding-block: 8.5rem 2.6rem; }
}

/* Marker-Span in den Wissenschafts-Überschriften: nicht wie der Icon-Kreis stylen (gilt überall) */
.studien--shader .studie h4 span.studie__mark { display: inline; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; place-items: normal; }

/* ===== NUR HANDY – Runde 10 ===== */
@media (max-width: 47.99rem) {
  /* Einstieg: leichter Grünschimmer im oberen Bereich (oben an der Kante Creme, kein Übergang zum Kopf) */
  .f-hero { background: radial-gradient(ellipse 95% 40% at 50% 32%, color-mix(in srgb, var(--w-accent) 50%, transparent), transparent 78%), var(--w-ground); }

  /* Button unter „Vom Denker zum Beobachter“: Gold, damit er sich vom Petrol-Kasten abhebt */
  .kette-box + .zwischen-cta .btn { background: linear-gradient(135deg, #F6E3A1, #D4A646); color: var(--w-deep); box-shadow: 0 16px 34px -16px rgba(154, 107, 31, .7); }

  /* Nachrichten (Teilnehmer + Community): Aussage über dem Screenshot, Name darunter, Aussagen gleich hoch */
  .belege .beleg { display: flex; flex-direction: column; }
  .belege .beleg figcaption { display: contents; }
  .belege .beleg__name { order: 1; align-self: center; margin: 0 0 .5rem; }
  .belege .beleg__titel { order: 2; min-height: 2.6em; margin: 0; display: flex; align-items: flex-start; justify-content: center; font-size: .75rem; line-height: 1.3; }
  .belege .beleg::after { content: ""; order: 3; align-self: center; width: 2.5rem; height: 1.5px; margin: .6rem 0 .75rem; border-radius: 2px; background: currentColor; opacity: .35; }
  .belege .beleg .handy { order: 4; }

  /* Was diesen Kurs besonders macht: alle Kästen gleich hoch */
  .vorteile { grid-auto-rows: 1fr; }

  /* Wissenschaft: Icon neben der Überschrift, Überschrift markiert, Kästen gleich hoch */
  .studien--shader { grid-auto-rows: 1fr; }
  .studien--shader .studie h4 { flex-direction: row; align-items: center; gap: .7rem; font-size: 1.25rem; }
  .studien--shader .studie h4 span { flex: none; width: 2.4rem; height: 2.4rem; }
  .studien--shader .studie h4 span svg { width: 1.25rem; height: 1.25rem; }
  .studien--shader .studie h4 { background: none; }
  .studien--shader .studie h4::after { content: none; }
  .studien--shader .studie h4 span.studie__mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* Es ist NICHT deine Schuld: „nicht“ in Großbuchstaben */
  .schuld-kasten__satz em { text-transform: uppercase; }

  /* Vorher → Nachher: Pfeil blinkt weiß */
  .reise::after { animation: pfeil-blinken 1.6s ease-in-out infinite; }

  /* Das bekommst du: farbige Trennlinien zwischen den Bereichen */
  .angebot .posten { border-bottom: 2px solid var(--w-accent); }
  .angebot .posten--summe { border-bottom: 0; }
}
@keyframes pfeil-blinken { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .reise::after { animation: none; } }
/* Nur Handy: keine Punkte im Zeitstrahl (unsichtbar, Position bleibt für die Linie); Community-Aussagen gleich hoch */
@media (max-width: 47.99rem) {
  .s-weg .s-punkt { visibility: hidden; }
  section[aria-labelledby="community-titel"] .belege .beleg__titel { min-height: 3.9em; }
}
@media (max-width: 47.99rem) { .f-hero__glueck > strong { font-size: min(1.02rem, 4vw); letter-spacing: .035em; white-space: nowrap; } }
/* Nur Handy: „Das sagen Teilnehmer“ einzeilig, Unterzeile direkt darunter; Chat-Nachrichten fliegen abwechselnd von links/rechts herein */
@media (max-width: 47.99rem) {
  #inhalt #teilnehmer-titel { white-space: nowrap; font-size: min(2.1rem, 8.4vw); margin-bottom: .2rem; }
  #erfahrungen .f-unterzeile { margin-top: 0; }
  .js .chat .nachricht.einblenden { transform: translateX(-48px); transition: opacity .7s var(--w-ease), transform .7s var(--w-ease); }
  .js .chat .nachricht.einblenden:nth-of-type(even) { transform: translateX(48px); }
  .js .chat .nachricht.einblenden.ist-sichtbar { transform: none; }
}

/* Das bekommst du: aufklappbare Modul-Liste (Ebene 1: alle Module, Ebene 2: einzelnes Modul) */
.module-liste { grid-column: 1 / -1; margin-top: .4rem; border-radius: 16px; background: var(--w-tint); border: 1.5px solid color-mix(in srgb, var(--w-main) 22%, transparent); }
.module-liste > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font: 600 1rem/1.3 var(--sans); color: var(--w-main); }
.module-liste summary::-webkit-details-marker { display: none; }
.module-liste > summary::after { content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .25s var(--w-ease); }
.module-liste[open] > summary::after { transform: translateY(15%) rotate(-135deg); }
.module-liste__inhalt { display: grid; gap: .5rem; padding: 0 .6rem .7rem; }
.modul { border-radius: 12px; background: var(--w-paper); border: 1px solid color-mix(in srgb, var(--w-main) 14%, transparent); }
.modul > summary { display: flex; align-items: baseline; gap: .55rem; padding: .75rem .9rem; cursor: pointer; list-style: none; font: 400 1.02rem/1.35 var(--serif); color: var(--w-ink); }
.modul > summary::after { content: "+"; margin-left: auto; flex: none; font: 400 1.25rem/1 var(--sans); color: var(--w-main); transition: transform .25s var(--w-ease); }
.modul[open] > summary::after { transform: rotate(45deg); }
.modul__nr { flex: none; font: 600 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--w-main); padding: .3rem .5rem; border-radius: 999px; background: var(--w-tint); }
.modul ul { margin: 0; padding: 0 1rem .9rem 2.1rem; display: grid; gap: .35rem; font-size: .95rem; line-height: 1.45; color: var(--w-text); }
.modul li::marker { color: var(--w-accent); }
.wert--inklusive { font-weight: 600; color: var(--w-main); }
/* ===== NUR HANDY – Runde 12 ===== */
@media (max-width: 47.99rem) {
  /* Das sagen Teilnehmer: kein Rasterabstand zwischen Überschrift und Unterzeile */
  #erfahrungen .f-breit { row-gap: 0; }
  #erfahrungen .f-breit > .f-unterzeile { margin: .15rem 0 1.4rem; }
  #erfahrungen .belege li { margin-bottom: 1.75rem; }

  /* Namen als weiße Pille mit dunkler Schrift (Teilnehmer + Community gleich) */
  .belege .beleg__name { background: #FFFFFF; color: var(--w-main); font-weight: 600; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .45); }

  /* Aussagen größer, bis zu 3 Zeilen, alle gleich hoch */
  .belege .beleg__titel { font-size: .9rem; line-height: 1.3; min-height: 3.9em; }
  section[aria-labelledby="community-titel"] .belege .beleg__titel { min-height: 3.9em; }
  .belege .beleg::after { margin: .45rem 0 .7rem; }

  /* Community-Nachrichten wie Chat-Nachrichten: Avatar links unten, Blase mit Name, Text, Häkchen */
  .chat .nachricht { position: relative; padding-left: 2.85rem; }
  .chat .nachricht figcaption { margin: 0; padding: .7rem 1rem .1rem; border: var(--w-rand); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--w-paper); font: 600 .85rem/1.2 var(--sans); color: var(--w-main); }
  .chat .nachricht .avatar { position: absolute; left: 0; bottom: 0; width: 2.25rem; height: 2.25rem; font-size: .9rem; }
  .chat .nachricht blockquote { position: relative; margin: 0; padding: .35rem 1rem .6rem; border: var(--w-rand); border-top: 0; border-radius: 0 0 18px 4px; box-shadow: 0 18px 34px -24px rgba(var(--w-rgb), .55); font-size: .98rem; line-height: 1.5; }
  .chat .nachricht blockquote p::after { content: "✓✓"; float: right; margin: .45rem 0 0 .75rem; font: 600 .7rem/1 var(--sans); letter-spacing: -.12em; color: #4FAE6A; }
  .chat .nachricht blockquote::after { content: ""; position: absolute; left: -7px; bottom: -1.5px; width: 12px; height: 14px; background: var(--w-paper); border-left: var(--w-rand); border-bottom: var(--w-rand); border-bottom-left-radius: 12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 47.99rem) {
  /* Teilnehmer-Aussagen größer: alle genau 3 Zeilen */
  #erfahrungen .belege .beleg__titel { font-size: 1.1rem; }
  /* Vorher → Nachher: Kreis mit dauerhaft weißem Rand, nur leichtes Blinken */
  .reise::after { border: 2px solid #FFFFFF; animation: pfeil-leicht 2.4s ease-in-out infinite; }
}
@keyframes pfeil-leicht { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .28); } }
@media (max-width: 47.99rem) {
  /* Teilnehmer-Aussagen größer: alle genau 3 Zeilen */
  #erfahrungen .belege .beleg__titel { font-size: 1.1rem; }
  /* Vorher → Nachher: Kreis mit dauerhaft weißem Rand, nur leichtes Blinken */
  .reise::after { border: 2px solid #FFFFFF; animation: pfeil-leicht 2.4s ease-in-out infinite; }
  /* Nachher-Kasten: mattes, ruhiges Salbeigrün statt glänzendem Verlauf */
  .reise__seite--nachher { background: #C5D3BA; border: 1.5px solid rgba(255, 255, 255, .4); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55); }
}
@keyframes pfeil-leicht { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .28); } }

/* Das bekommst du: Gesamtwert als Abschluss-Kasten mit heutigem Preis (Handy + Desktop) */
.angebot .posten--summe { grid-template-columns: 1fr auto; row-gap: .9rem; margin-top: .4rem; padding: 1.1rem 1.2rem 1.3rem; border: 0; border-radius: 18px; background: var(--w-tint); }
.angebot .posten--summe > span:first-child { font: 600 1rem/1.2 var(--sans); color: var(--w-ink); }
.angebot .posten--summe .wert s { font: 300 1.5rem/1 var(--serif); color: var(--w-strike); }
.summe-heute { grid-column: 1 / -1; display: grid; justify-items: center; gap: .3rem; padding: 1rem .75rem 1.1rem; border-radius: 14px; background: var(--w-main); color: #FFFFFF; text-align: center; }
.summe-heute__label { font: 600 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #F6E3A1; }
.summe-heute__preis { font: 400 clamp(2.6rem, 2rem + 2.5vw, 3.4rem)/1 var(--serif); color: #FFFFFF; }
.summe-heute__spar { display: inline-block; margin-top: .25rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(246, 227, 161, .16); border: 1px solid rgba(246, 227, 161, .45); font: 600 .8rem/1.3 var(--sans); color: #F6E3A1; }

/* Das sagen Teilnehmer – nur Handy: Abstände wie bei der Community */
@media (max-width: 47.99rem) {
  #inhalt #teilnehmer-titel { margin-bottom: 0; }
  #erfahrungen .f-breit > .f-unterzeile { margin: .1rem 0 2.4rem; }
  #erfahrungen .belege li { margin-bottom: 2.9rem; }
  #erfahrungen .f-breit > .cta { margin-top: -.6rem; }
}
.summe-heute__hinweis { font: 400 .78rem/1.3 var(--sans); color: rgba(255, 255, 255, .7); }
/* Titel über den vier Kästen ist jetzt länger: Umbruch erlauben */
@media (min-width: 45rem) { .inhalte-abschnitt > .f-spalte > h2.inhalte-titel { white-space: normal; text-wrap: balance; } }
.inhalte-titel span { white-space: nowrap; }
@media (max-width: 47.99rem) { section[aria-labelledby="community-titel"] { overflow-x: clip; } }
/* Titel über den vier Kästen: 47 € markiert, Unterzeile „im Überblick“ */
.inhalte-titel mark { color: var(--w-main); font-weight: 600; padding: 0 .08em; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--w-accent) 85%, transparent) 58%, color-mix(in srgb, var(--w-accent) 85%, transparent) 92%, transparent 92%); }
.inhalte-abschnitt .inhalte-titel { margin-bottom: .6rem; }
.inhalte-unterzeile { margin: 0 auto var(--s-4); max-width: none; text-align: center; font: 600 .85rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--w-main); }
/* Unterzeile „Was du bekommst – im Überblick“: gleicher Abstand wie H1 → Lead (24 px), größer */
.inhalte-abschnitt .inhalte-titel { margin-bottom: 0; }
.inhalte-unterzeile { margin-top: 24px; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); letter-spacing: .08em; }
/* Vom Denker zum Beobachter – nur Handy: letzte Pille wie alle anderen; Button im selben Gold wie das Lauflicht */
@media (max-width: 47.99rem) {
  .kette-box .kette li:last-child span { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; font-weight: 400; animation-name: w-kette-dunkel; }
  .kette-box + .zwischen-cta .btn { background: #D4A646; color: #0A2B2E; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) { .kette-box .kette li:last-child span { background: transparent; color: #FFFFFF; } }
@media (max-width: 47.99rem) { #methode { padding-bottom: 0; } #methode .kette-box + .zwischen-cta { margin-bottom: 36px; } }
/* Nur Handy: Kette näher an die Methoden-Kästen, Button näher an die Kette, mehr Luft zum Foto-Band */
@media (max-width: 47.99rem) {
  #methode .kette-box { margin-top: 16px; }
  #methode .schritte { margin-bottom: 0; }
  #methode .kette-box + .zwischen-cta { margin-top: 40px; margin-bottom: 52px; }
}
@media (max-width: 47.99rem) { #methode .kette-box { background: linear-gradient(180deg, #4A7170 0%, #3A6566 100%); box-shadow: 0 30px 60px -40px rgba(var(--w-rgb), .6); } }
@media (max-width: 47.99rem) { #methode .kette-box { background: linear-gradient(180deg, #2F5A5C 0%, #24494C 100%); } }
/* Alle Abschnitts-Überschriften gleich groß (auch Teilnehmer am Handy, „Wäre es dir das wert?“ gleiche Stärke) */
#inhalt #teilnehmer-titel { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); white-space: normal; }
#inhalt .vorstellung .frage, #inhalt .vorstellung .frage strong { font-weight: 400; }
/* Titel über den vier Kästen – nur Handy: weißer Kasten, Unterzeile als Petrol-Pille */
@media (max-width: 47.99rem) {
  .inhalte-kopf { margin-bottom: var(--s-4); padding: 1.6rem 1.1rem 1.5rem; border-radius: 28px; background: var(--w-paper); border: var(--w-rand); box-shadow: 0 30px 60px -40px rgba(var(--w-rgb), .55); text-align: center; }
  .inhalte-kopf .inhalte-titel { margin-top: 0; }
  .inhalte-kopf .inhalte-unterzeile { display: inline-block; margin: 24px 0 0; padding: .55rem 1.1rem; border-radius: 999px; background: var(--w-main); color: #FFFFFF; font-size: .9rem; letter-spacing: .06em; }
}
@media (max-width: 47.99rem) { .inhalte-kopf { margin-top: 2rem; } }
/* Nur Handy: Pille „Was du bekommst“ zwischen weißem Titel-Kasten und erstem Kasten, mittig */
@media (max-width: 47.99rem) {
  .inhalte-kopf { margin-bottom: 0; }
  .inhalte-abschnitt .inhalte-unterzeile { display: table; margin: 1.5rem auto; padding: .55rem 1.1rem; border-radius: 999px; background: var(--w-main); color: #FFFFFF; font-size: .9rem; letter-spacing: .06em; }
  .inhalte-abschnitt .inhalte-unterzeile + .inhalte { margin-top: 0; }
}
@media (max-width: 47.99rem) { .inhalte-kopf .inhalte-titel { margin-bottom: 0; } .inhalte-kopf { padding-block: 1.5rem; } }
/* Wortband – nur Handy: gleiche Farbe wie der Kasten „Vom Denker zum Beobachter“, helle Schrift */
@media (max-width: 47.99rem) {
  .wortband, [data-palette="f"] .wortband { background: linear-gradient(180deg, #2F5A5C 0%, #24494C 100%); color: #FFFFFF; }
  .wortband i { background: #D4A646; opacity: 1; }
}

@media (max-width: 47.99rem) { .wortband i { background: #FFFFFF; opacity: .8; } }

/* Variante A: ein Schlüsselwort pro Abschnitts-Überschrift in Petrol mit Salbei-Marker (wie „47 €“) */
mark.hw { color: var(--w-main); font-weight: 500; padding: 0 .06em; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--w-accent) 75%, transparent) 60%, color-mix(in srgb, var(--w-accent) 75%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* auf dunklen Flächen: Wort bleibt weiß, Marker zarter */
:is(.nacht, #fragen, .story-band__text, .kette-box, .vorstellung:not(.vorstellung--creme)) mark.hw { color: #FFFFFF; background: linear-gradient(transparent 60%, rgba(175, 190, 165, .45) 60%, rgba(175, 190, 165, .45) 92%, transparent 92%); }
/* Marker unter den Schlüsselwörtern wieder raus: nur noch kräftig und in Petrol (auf dunklen Flächen weiß) */
mark.hw, :is(.nacht, #fragen, .story-band__text, .kette-box, .vorstellung) mark.hw { background: none; padding: 0; }
/* Nur Handy: Statusbalken etwas tiefer, Abstand zum Logo wie bei Growth Marketer (ca. 22 px) */
@media (max-width: 47.99rem) { .f-kopf--status .f-kopf__inner { row-gap: 22px; } }
@media (max-width: 47.99rem) { .f-kopf--status .f-kopf__inner { padding-top: calc(.8rem + 6px); } }
@media (max-width: 47.99rem) { .f-kopf--status .marke { font-size: 1.2rem; gap: .7rem; } .f-kopf--status .marke__logo { width: 2.6rem; height: 2.6rem; } }
/* Test: Marker deckt das ganze Wort ab statt nur die untere Hälfte */
.f-text strong, .marker { background: linear-gradient(transparent 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 94%, transparent 94%); padding: 0 .18em; border-radius: 4px; }
section[aria-labelledby="schuld-titel"] .f-text strong, section[aria-labelledby="schuld-titel"] .marker { background: linear-gradient(transparent 6%, rgba(255,255,255,.7) 6%, rgba(255,255,255,.7) 94%, transparent 94%); }
/* Feste Zeilenumbrüche nur am Handy (Safari verteilt Überschriften nicht automatisch gleichmäßig) */
.br-handy { display: none; }
@media (max-width: 47.99rem) { .br-handy { display: inline; } }

/* Abschnitt 3 geteilt: „Nicht deine Schuld“ + Zitat | „So funktioniert die Methode“ als eigener Abschnitt */
/* Desktop: optisch wie vorher (eine Salbei-Fläche, kein zusätzlicher Abstand) */
.methode-abschnitt { background: var(--w-accent); color: var(--w-ink); }
.methode-abschnitt p { color: var(--w-ink); }
@media (min-width: 48rem) {
  section[aria-labelledby="schuld-titel"] { padding-bottom: 0; }
  .methode-abschnitt { padding-top: 0; }
}
/* Nur Handy: Zitat frei ohne Kasten, Methode als neuer Abschnitt auf hellgrüner Fläche */
@media (max-width: 47.99rem) {
  section[aria-labelledby="schuld-titel"] .band { margin: 0; padding: 2.75rem .5rem .5rem; background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  section[aria-labelledby="schuld-titel"] .band::before { content: "\201C"; top: -.6rem; left: 50%; transform: translateX(-50%); font-size: 6.5rem; line-height: 1; color: var(--w-accent); }
  section[aria-labelledby="schuld-titel"] .band blockquote p { color: var(--w-ink); font: 400 clamp(1.6rem, 1.3rem + 1.4vw, 2rem)/1.25 var(--serif); font-style: italic; max-width: 20ch; }
  section[aria-labelledby="schuld-titel"] .band > p { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1.5px solid color-mix(in srgb, var(--w-main) 18%, transparent); color: var(--w-text); font-size: 1rem; line-height: 1.55; max-width: 30ch; }
  .methode-abschnitt { background: var(--w-tint); padding-top: 3.25rem; }
}
section[aria-labelledby="schuld-titel"], .methode-abschnitt { display: flow-root; }
/* Nur Handy: „Es ist nicht deine Schuld“-Kasten weicher – gleiches Petrol wie „Vom Denker zum Beobachter“, sanfter Schatten */
@media (max-width: 47.99rem) { .schuld-kasten { background: linear-gradient(180deg, #2F5A5C 0%, #24494C 100%); box-shadow: 0 24px 50px -34px rgba(15, 58, 62, .55); } }
/* Zitat-Satz: Kernbegriffe mit Salbei-Marker (auf Desktop im dunklen Band weiß-transparent) */
.band > p .marker { color: #FFFFFF; background: linear-gradient(transparent 6%, rgba(175,190,165,.35) 6%, rgba(175,190,165,.35) 94%, transparent 94%); }
@media (max-width: 47.99rem) {
  section[aria-labelledby="schuld-titel"] .band > p { color: var(--w-ink); font-size: 1.05rem; }
  section[aria-labelledby="schuld-titel"] .band > p .marker { color: var(--w-ink); background: linear-gradient(transparent 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 94%, transparent 94%); }
}
/* Nur Handy: Geschichten-Block auf dem Foto mittig */
@media (max-width: 47.99rem) { .story-band__text, #inhalt .story-band__text h2 { text-align: center; } .story-band__text > * { margin-inline: auto; } }
/* Zeitleiste mit kurzen Texten – nur Handy: Kästen kompakt, alle gleich hoch, Text etwas größer */
@media (max-width: 47.99rem) {
  .s-karte { height: auto; min-height: 13.5rem; padding: 1.4rem 1.25rem; justify-content: center; }
  .s-karte p:not(.s-wann) { font-size: 1.05rem; line-height: 1.6; overflow: visible; }
}
@media (max-width: 47.99rem) { .s-karte { min-height: 17.5rem; } }
/* Zeitleiste – nur Handy: Texte ohne Kasten, klare Rangfolge (Zeitmarke klein → Titel groß → Satz); Bilder bleiben im Kasten */
@media (max-width: 47.99rem) {
  .s-karte { min-height: 0; height: auto; padding: .9rem .4rem; background: var(--w-ground); border: 0; box-shadow: none; border-radius: 0; }
  .s-wann { margin: 0 0 .45rem; gap: .35rem; align-items: baseline; }
  .s-wort, .s-num, .s-label { font: 600 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--w-main); }
  .s-karte h3 { margin: 0 0 .6rem; font: 400 clamp(1.6rem, 1.35rem + 1.2vw, 1.9rem)/1.15 var(--serif); color: var(--w-ink); }
  .s-karte p:not(.s-wann) { font-size: 1.05rem; line-height: 1.6; color: var(--w-text); }
}
@media (max-width: 47.99rem) { .s-karte p:not(.s-wann) { text-align: center; max-width: 30ch; margin-inline: auto; } }

/* Texte nach Mert: neue Elemente im Einstieg, Angebot und Abschied */
.f-hero .f-hero__kurz .h1-mark { font-weight: 500; }
.f-hero__lead { margin: .9rem auto 0; max-width: 34rem; font-size: clamp(1rem, .96rem + .25vw, 1.15rem); line-height: 1.55; color: var(--w-text); }
.start-cta__text { margin: 1.5rem auto .25rem; max-width: 30rem; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--w-text); }
.start-cta { margin-top: .75rem; }
.angebot-schritt { margin: 0 0 .6rem; font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem)/1.15 var(--serif); color: var(--w-ink); }
.abschied-cta { margin-top: var(--s-4); }
.nein-danke { margin: 1rem auto 0; text-align: center; font-size: .9rem; }
.nein-danke a { color: var(--w-text); text-decoration: underline; text-underline-offset: .2em; }
/* Nur Handy: neue, längere Gratulationszeile darf umbrechen; Kernaussage groß */
@media (max-width: 47.99rem) {
  .f-hero__glueck > strong { white-space: normal; font-size: .9rem; letter-spacing: .08em; line-height: 1.35; }
  .f-hero .f-hero__kurz { margin-top: 1.4rem; font: 400 clamp(1.65rem, 1.35rem + 1.4vw, 2rem)/1.2 var(--serif); color: var(--w-ink); text-wrap: balance; }
}
/* „Dein Kopf darf endlich …“ ist jetzt die H1: Aussehen wie vorher als Kernsatz */
.f-hero h1.f-hero__kurz { margin: 0 auto var(--s-3); max-width: 24ch; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.3 var(--serif); letter-spacing: 0; color: var(--w-ink); }
@media (max-width: 47.99rem) { .f-hero h1.f-hero__kurz { margin-top: 1.4rem; margin-bottom: 0; max-width: none; font: 400 clamp(1.65rem, 1.35rem + 1.4vw, 2rem)/1.2 var(--serif); text-wrap: balance; } }
/* Teilnehmer + Community: Screenshots untereinander statt nebeneinander (Handy + Desktop) */
.belege.belege--untereinander { grid-template-columns: minmax(0, 18.5rem); }
@media (max-width: 47.99rem) {
  #erfahrungen .f-breit { display: block; }
  #erfahrungen .belege.belege--untereinander { display: grid; grid-template-columns: minmax(0, 17rem); row-gap: 0; }
  .belege--untereinander li, .belege--untereinander li:last-child { grid-column: auto; width: auto; justify-self: stretch; }
}
/* Das bekommst du: Garantie als vierter Posten mit Siegel statt Kachel (Handy + Desktop) */
.angebot .posten--garantie svg.siegel--posten { width: 3.6rem; height: auto; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
/* Das bekommst du: ein Abschluss im Kasten – Gesamtwert, heutiger Preis, Button (Handy + Desktop) */
.angebot-abschluss { display: grid; justify-items: center; gap: .35rem; padding: 1.6rem 0 .4rem; text-align: center; }
.angebot-abschluss__wert { margin: 0; font: 600 .95rem/1.3 var(--sans); color: var(--w-ink); }
.angebot-abschluss__wert s { margin-left: .35rem; font-size: 1.35rem; }
.angebot-abschluss__heute { margin: 0 0 .9rem; font: 400 clamp(1.5rem, 1.3rem + 1vw, 1.9rem)/1.2 var(--serif); color: var(--w-ink); }
.angebot-abschluss__heute strong { font-weight: 500; color: var(--w-main); font-size: 1.25em; }
.angebot-abschluss .btn { width: 100%; max-width: 22rem; }
.angebot .posten--garantie { border-bottom: 0; }
/* Das bekommst du: ein Abschluss im Kasten – Gesamtwert, heutiger Preis, Button (Handy + Desktop) */
.angebot-abschluss { display: grid; justify-items: center; gap: .35rem; padding: 1.6rem 0 .4rem; text-align: center; }
.angebot-abschluss__wert { margin: 0; font: 600 .95rem/1.3 var(--sans); color: var(--w-ink); }
.angebot-abschluss__wert s { margin-left: .35rem; font-size: 1.35rem; }
.angebot-abschluss__heute { margin: 0 0 .9rem; font: 400 clamp(1.5rem, 1.3rem + 1vw, 1.9rem)/1.2 var(--serif); color: var(--w-ink); }
.angebot-abschluss__heute strong { font-weight: 500; color: var(--w-main); font-size: 1.25em; }
.angebot-abschluss .btn { width: 100%; max-width: 22rem; }
.angebot .posten--garantie { border-bottom: 0; }
/* „Dein nächster Schritt“: gleiche Salbei-Trennlinien wie im Angebot – Preis | Garantie | Button */
.kauf-trenner { width: 100%; height: 0; margin: .2rem 0; border: 0; border-top: 2px solid var(--w-accent); }
/* Fortschritt statt Statusbalken: zwei Schritte abgehakt, einer offen (Handy + Desktop) */
.fortschritt { position: relative; display: grid; gap: .55rem; width: 100%; max-width: 27rem; margin: 0 auto; padding: .8rem 1rem; list-style: none; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(var(--w-rgb), .18), 0 14px 30px -22px rgba(var(--w-rgb), .5); text-align: left; }
.fortschritt__schritt { position: relative; display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: start; gap: .6rem; margin: 0; font-size: .84rem; line-height: 1.35; color: var(--w-ink); }
.fortschritt__schritt strong { font-weight: 700; }
.fortschritt__punkt { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; margin-top: .02rem; border-radius: 50%; background: var(--w-main); }
.fortschritt__schritt--fertig .fortschritt__punkt::after { content: ""; position: absolute; left: .4rem; top: .2rem; width: .28rem; height: .55rem; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Verbindungslinie zwischen den Punkten */
.fortschritt__schritt:not(:last-child)::before { content: ""; position: absolute; left: calc(.575rem - 1px); top: 1.15rem; bottom: -.55rem; width: 2px; background: var(--w-main); }
.fortschritt__schritt--fertig:has(+ .fortschritt__schritt--offen)::before { background: repeating-linear-gradient(to bottom, var(--w-main) 0 3px, transparent 3px 6px); }
.fortschritt__schritt--offen { color: var(--w-main); }
.fortschritt__schritt--offen .fortschritt__punkt { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--w-main); animation: fortschritt-puls 2.2s var(--w-ease) infinite; }
.fortschritt__schritt--offen .fortschritt__punkt::after { content: ""; position: absolute; inset: .33rem; border-radius: 50%; background: var(--w-main); }
@keyframes fortschritt-puls { 0%, 100% { box-shadow: inset 0 0 0 2px var(--w-main), 0 0 0 0 rgba(var(--w-rgb), .35); } 60% { box-shadow: inset 0 0 0 2px var(--w-main), 0 0 0 7px rgba(var(--w-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .fortschritt__schritt--offen .fortschritt__punkt { animation: none; } }
[data-palette="f"] .fortschritt__punkt { background: #495940; }
[data-palette="f"] .fortschritt__schritt:not(:last-child)::before { background: #495940; }
[data-palette="f"] .fortschritt__schritt--offen { color: #495940; }
[data-palette="f"] .fortschritt__schritt--offen .fortschritt__punkt { background: #FFFFFF; box-shadow: inset 0 0 0 2px #495940; }
[data-palette="f"] .fortschritt__schritt--offen .fortschritt__punkt::after { background: #495940; }
@media (min-width: 48rem) { .fortschritt { padding: .6rem .9rem; gap: .35rem; } .fortschritt__schritt { font-size: .78rem; } .fortschritt__schritt:not(:last-child)::before { bottom: -.35rem; } }
/* Fortschritt größer und in den Seitenfarben: erledigt = Petrol, offen = Gold wie „noch etwas zeigen“ */
.fortschritt { --gold: #B07D22; gap: .5rem; max-width: 30rem; padding: .7rem; border-radius: 20px; background: color-mix(in srgb, var(--w-main) 7%, #FFFFFF); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-main) 22%, transparent), 0 18px 36px -24px rgba(var(--w-rgb), .55); }
.fortschritt__schritt { grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .45rem .6rem; font-size: 1rem; line-height: 1.35; }
.fortschritt__punkt { width: 1.6rem; height: 1.6rem; margin: 0; }
.fortschritt__schritt--fertig .fortschritt__punkt::after { left: .56rem; top: .3rem; width: .38rem; height: .75rem; border-width: 0 2.5px 2.5px 0; }
.fortschritt__schritt:not(:last-child)::before { left: calc(.6rem + .8rem - 1px); top: calc(50% + .8rem); bottom: calc(-50% + .3rem); }
.fortschritt__schritt--fertig:has(+ .fortschritt__schritt--offen)::before { background: repeating-linear-gradient(to bottom, var(--gold) 0 3px, transparent 3px 6px); }
.fortschritt__schritt--offen { border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--gold); color: var(--w-ink); }
.fortschritt__schritt--offen strong { color: var(--gold); }
.fortschritt__schritt--offen .fortschritt__punkt { box-shadow: inset 0 0 0 2.5px var(--gold); animation-name: fortschritt-puls-gold; }
.fortschritt__schritt--offen .fortschritt__punkt::after { inset: .45rem; background: var(--gold); }
@keyframes fortschritt-puls-gold { 0%, 100% { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 0 0 rgba(176, 125, 34, .45); } 60% { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 0 9px rgba(176, 125, 34, 0); } }
[data-palette="f"] .fortschritt { background: color-mix(in srgb, #495940 8%, #FFFFFF); }
[data-palette="f"] .fortschritt__schritt--offen { color: #000; }
[data-palette="f"] .fortschritt__schritt--offen .fortschritt__punkt { box-shadow: inset 0 0 0 2.5px var(--gold); }
[data-palette="f"] .fortschritt__schritt--offen .fortschritt__punkt::after { background: var(--gold); }
@media (min-width: 48rem) { .fortschritt { padding: .4rem; gap: .25rem; } .fortschritt__schritt { padding: .3rem .55rem; font-size: .85rem; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .55rem; } .fortschritt__punkt { width: 1.3rem; height: 1.3rem; } .fortschritt__schritt--fertig .fortschritt__punkt::after { left: .46rem; top: .24rem; width: .3rem; height: .6rem; } .fortschritt__schritt--offen .fortschritt__punkt::after { inset: .36rem; } .fortschritt__schritt:not(:last-child)::before { left: calc(.55rem + .65rem - 1px); top: calc(50% + .65rem); } }
@media (min-width: 48rem) { .f-kopf--status .status { flex-basis: clamp(22rem, 38vw, 30rem); width: clamp(22rem, 38vw, 30rem); } .fortschritt__schritt--fertig { white-space: nowrap; } }
/* Nur noch ein Schritt: „Geschafft! …“ als hervorgehobene Petrol-Pille mit weißem Haken */
.fortschritt { padding: 0; background: none; box-shadow: none; }
.fortschritt .fortschritt__schritt--fertig { padding: .75rem 1.1rem; border-radius: 999px; background: var(--w-main); color: #FFFFFF; font-size: 1.02rem; box-shadow: 0 16px 34px -18px rgba(var(--w-rgb), .7); }
.fortschritt .fortschritt__schritt--fertig strong { color: #FFFFFF; }
.fortschritt .fortschritt__schritt--fertig .fortschritt__punkt { background: #FFFFFF; }
.fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { border-color: var(--w-main); }
.fortschritt .fortschritt__schritt::before { content: none; }
[data-palette="f"] .fortschritt .fortschritt__schritt--fertig { background: #495940; }
[data-palette="f"] .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt { background: #FFFFFF; }
[data-palette="f"] .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { border-color: #495940; }
@media (max-width: 47.99rem) { .fortschritt .fortschritt__schritt--fertig { border-radius: 20px; } }
@media (min-width: 48rem) { .fortschritt { padding: 0; } .fortschritt .fortschritt__schritt--fertig { padding: .5rem 1rem; font-size: .9rem; } }
/* Trustpilot-Band statt Wortband: Bewertungskarten laufen langsam durch, Stopp beim Drüberfahren */
.tp-band { --tp-gruen: #00B67A; overflow: hidden; padding: 1.6rem 0 1.2rem; background: var(--w-main); color: #FFFFFF; }
.tp-band__kopf { padding-inline: 16px; text-align: center; }
.tp-band__titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem .7rem; margin: 0 0 1.1rem; font: 600 1rem/1.2 var(--sans); color: #FFFFFF; }
.tp-logo { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.tp-logo__stern { width: 1.15rem; height: 1.15rem; background: var(--tp-gruen); clip-path: polygon(50% 0, 61% 36%, 100% 36%, 69% 58%, 80% 95%, 50% 72%, 20% 95%, 31% 58%, 0 36%, 39% 36%); }
.tp-band__score { font-weight: 400; opacity: .85; font-size: .9rem; }
.tp-sterne { display: inline-flex; gap: 2px; vertical-align: middle; }
.tp-sterne i { width: 1.2rem; height: 1.2rem; background: var(--tp-gruen); position: relative; }
.tp-sterne i::after { content: ""; position: absolute; inset: 18%; background: #FFFFFF; clip-path: polygon(50% 0, 61% 36%, 100% 36%, 69% 58%, 80% 95%, 50% 72%, 20% 95%, 31% 58%, 0 36%, 39% 36%); }
.tp-band__fenster { overflow: hidden; }
.tp-band__spur { display: flex; gap: 1rem; width: max-content; margin: 0; padding: .2rem 0 .4rem; list-style: none; animation: w-band 60s linear infinite; }
.tp-band__fenster:hover .tp-band__spur { animation-play-state: paused; }
.tp-karte { display: grid; align-content: start; gap: .6rem; width: min(78vw, 20rem); margin: 0; padding: 1rem 1.1rem; border-radius: 18px; background: #FFFFFF; color: var(--w-ink); box-shadow: 0 14px 30px -20px rgba(0,0,0,.45); }
.tp-karte blockquote { margin: 0; }
.tp-karte blockquote p { margin: 0; max-width: none; font-size: .95rem; line-height: 1.45; color: var(--w-ink); }
.tp-karte__name { margin: 0; font-size: .85rem; font-weight: 700; color: var(--w-text); }
.tp-band__fuss { margin: .9rem 0 0; padding-inline: 16px; text-align: center; font-size: .8rem; color: rgba(255,255,255,.85); }
.tp-band__fuss a { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }
[data-palette="f"] .tp-band { background: #495940; }
@media (prefers-reduced-motion: reduce) {
  .tp-band__fenster { overflow-x: auto; scroll-snap-type: x mandatory; }
  .tp-band__spur { animation: none; padding-inline: 16px; }
  .tp-karte { scroll-snap-align: start; }
  .tp-karte[aria-hidden="true"] { display: none; }
}
.tp-band__spur { padding-right: 1rem; }
.tp-band .tp-band__fuss { max-width: none; margin-inline: auto; }
/* Trustpilot-Siegel unter dem Video (schlicht wie bei Andreas): Logo, Sterne, Score */
.tp-siegel { display: flex; width: fit-content; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem .6rem; margin: .9rem auto 0; color: var(--w-ink); text-decoration: none; }
.tp-siegel .tp-logo { font-size: 1.1rem; color: var(--w-ink); }
.tp-siegel .tp-logo__stern, .tp-siegel .tp-sterne i { --tp-gruen: #00B67A; }
.tp-siegel .tp-logo__stern { background: #00B67A; }
.tp-siegel .tp-sterne i { background: #00B67A; width: 1.3rem; height: 1.3rem; }
.tp-siegel__zahl { font-size: .9rem; color: var(--w-text); }
.tp-siegel:hover .tp-siegel__zahl { text-decoration: underline; text-underline-offset: .2em; }
/* TrustScore 4,1 = 4 grüne Sterne, der fünfte grau (wie Trustpilot es anzeigt) */
.tp-sterne--4 i:last-child { background: #DCDCE6; }
.tp-siegel .tp-sterne--4 i:last-child { background: #DCDCE6; }
.tp-sterne, .tp-logo, .tp-siegel { --tp-gruen: #00B67A; }
.tp-siegel { justify-content: center; margin-inline: auto; text-align: center; }
.f-hero .tp-siegel { margin-top: .5rem; margin-bottom: 1.75rem; }
.f-hero .f-hero__bild:has(+ .tp-siegel) { margin-bottom: 0; }
.f-hero .tp-siegel { margin-top: 1.1rem; }
/* Trustpilot klein unter dem Start-Button: Siegel + schmale, laufende Bewertungskarten in der Spalte */
.f-hero .start-cta + .tp-klein { margin-top: 1.4rem; }
.tp-klein .tp-siegel, .f-hero .tp-klein .tp-siegel { margin: 0 auto .7rem; }
.tp-klein__fenster { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tp-klein__spur { display: flex; gap: .7rem; width: max-content; margin: 0; padding: .2rem .7rem .6rem 0; list-style: none; animation: w-band 77s linear infinite; }
.tp-klein__fenster:hover .tp-klein__spur { animation-play-state: paused; }
.tp-klein .tp-karte { width: 15rem; gap: .4rem; padding: .7rem .85rem; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(var(--w-rgb), .12), 0 10px 22px -18px rgba(var(--w-rgb), .5); text-align: left; }
.tp-klein .tp-karte blockquote p { font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tp-klein .tp-karte__name { font-size: .75rem; }
.tp-klein .tp-karte .tp-sterne i { width: .95rem; height: .95rem; }
@media (prefers-reduced-motion: reduce) {
  .tp-klein__fenster { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tp-klein__spur { animation: none; }
  .tp-klein .tp-karte[aria-hidden="true"] { display: none; }
}
/* „Kennst du das?“ näher ans Video und kompakter, damit die Schmerzpunkte früh sichtbar sind */
.f-hero { padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.f-abschnitt.kennst-abschnitt { padding-block: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.kennst-abschnitt h2 { margin-bottom: clamp(.9rem, .7rem + .6vw, 1.25rem); }
.kennst-abschnitt .kennst-karten { gap: .55rem; margin-bottom: 0; }
.kennst-abschnitt .kennst-karte { gap: .8rem; padding: .7rem 1rem; }
.kennst-abschnitt .kennst-karte p { font-size: clamp(.98rem, .94rem + .25vw, 1.1rem); line-height: 1.42; }
.kennst-abschnitt .kennst-karte .emoji { width: 2.5rem; height: 2.5rem; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-accent) 45%, transparent); }
.kennst-abschnitt .kennst-karte .emoji svg { width: 1.25rem; height: 1.25rem; }
/* Creme-Fläche unter den Bewertungen halbiert, „Kennst du das?“ beginnt früher */
.f-hero { padding-bottom: clamp(.75rem, .6rem + .5vw, 1.1rem); }
.f-abschnitt.kennst-abschnitt { padding-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
/* Bewertungskarten: erst der Text, darunter Name mit den Sternen daneben */
.tp-karte__fuss { display: flex; align-items: center; gap: .5rem; margin: 0; margin-top: auto; }
.tp-klein .tp-karte { grid-template-rows: 1fr auto; }
.tp-karte__fuss .tp-karte__name { font-size: .75rem; font-weight: 700; color: var(--w-text); }
/* Etwas mehr Luft zwischen Bewertungen und „Kennst du das?“ (zwischen vorher und zu eng) */
.f-hero { padding-bottom: clamp(1.15rem, .9rem + .8vw, 1.7rem); }
.f-abschnitt.kennst-abschnitt { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
/* „Geschafft!“-Fläche: zweite Zeile „auf dem Weg in dein Postfach“, Breite nur so groß wie der Text (≈ „Bevor du es öffnest,“) */
.fortschritt__zeile2 { display: block; white-space: nowrap; }
.fortschritt { width: fit-content; max-width: 100%; }
.fortschritt .fortschritt__schritt--fertig { padding-inline: .8rem 1.3rem; line-height: 1.3; }
@media (max-width: 47.99rem) { .fortschritt .fortschritt__schritt--fertig { font-size: 1.14rem; padding-block: .7rem; } .fortschritt .fortschritt__punkt { width: 1.75rem; height: 1.75rem; } .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { left: .62rem; top: .34rem; width: .42rem; height: .82rem; } .fortschritt .fortschritt__schritt { grid-template-columns: 1.75rem minmax(0, 1fr); } }
@media (min-width: 48rem) { .fortschritt .fortschritt__schritt--fertig { font-size: .95rem; } }
@media (max-width: 47.99rem) { .fortschritt .fortschritt__schritt--fertig { font-size: 1.22rem; } }
/* Handy: „Geschafft!“-Balken genau so breit wie „BEVOR DU ES ÖFFNEST“ (B bis T, ohne Komma) und ein Stück tiefer */
@media (max-width: 47.99rem) {
  .f-kopf--status .fortschritt { --h1: clamp(1.75rem, 1.45rem + 1.5vw, 2.05rem); width: calc(var(--h1) * 11.64); max-width: 100%; justify-self: center; transform: translate(calc(var(--h1) * -.127), 8px); }
  .f-kopf--status .fortschritt .fortschritt__schritt--fertig { width: 100%; box-sizing: border-box; }
}
/* Unterzeile im Einstieg: „Ein paar Minuten am Tag, ohne Vorkenntnisse.“ in eigener Zeile */
.f-hero__lead .lead-zeile { display: block; white-space: nowrap; }
/* Wunsch-Karte: „Und eigentlich wünschst du dir nur eins:“ oben, „dass es … leiser wird.“ darunter, jeweils ohne Umbruch */
.kennst-karte .kennst-zeile { display: block; width: fit-content; white-space: nowrap; }
.kennst-karte .kennst-zeile { white-space: normal; width: auto; }
/* Handy: „Geschafft!“-Balken kleiner und kompakter, damit „Bevor du es öffnest“ präsenter ist */
@media (max-width: 47.99rem) {
  .f-kopf--status .fortschritt { width: fit-content; transform: translateY(6px); }
  .fortschritt .fortschritt__schritt--fertig { font-size: .95rem; padding: .5rem 1.05rem .5rem .6rem; gap: .55rem; line-height: 1.25; }
  .fortschritt .fortschritt__schritt { grid-template-columns: 1.35rem minmax(0, 1fr); }
  .fortschritt .fortschritt__punkt { width: 1.35rem; height: 1.35rem; }
  .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { left: .48rem; top: .26rem; width: .32rem; height: .62rem; border-width: 0 2px 2px 0; }
}
.kennst-karte span.kennst-zeile { white-space: nowrap; }
/* Wunsch-Karte: Markierung nur hinter dem Text (nicht als Kasten) */
.kennst-karte strong.kennst-zeile { display: inline; white-space: normal; }
.kennst-karte--wunsch strong.marker { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* „Kennst du das?“: Karten breiter (Handy: 10 px Rand links und rechts, symmetrisch), Text einen Tick größer */
.kennst-abschnitt .kennst-karten { position: relative; left: 50%; transform: translateX(-50%); width: min(50rem, calc(100vw - 20px)); max-width: none; margin-left: 0; margin-right: 0; }
.kennst-abschnitt .kennst-karte p { font-size: clamp(1.04rem, .99rem + .25vw, 1.16rem); }
.kennst-abschnitt .kennst-karte { padding: .8rem 1.1rem .8rem .9rem; }
.kennst-abschnitt .kennst-karten { grid-template-columns: minmax(0, 1fr); }
.kennst-abschnitt .kennst-karte { padding-right: .8rem; min-width: 0; }
.kennst-abschnitt .kennst-karte p { min-width: 0; }
@media (max-width: 47.99rem) { .kennst-karte span.kennst-zeile { font-size: min(1em, 4.1vw); } }
/* Fett: „nicht“ in „Es ist nicht deine Schuld.“ */
section[aria-labelledby="schuld-titel"] .schuld-kasten__satz em { font-weight: 700; }
/* Handy: „Geschafft!“-Balken wieder so breit wie „BEVOR DU ES ÖFFNEST“, Schrift etwas größer, Inhalt mittig */
@media (max-width: 47.99rem) {
  .f-kopf--status .fortschritt { --h1: clamp(1.75rem, 1.45rem + 1.5vw, 2.05rem); width: calc(var(--h1) * 11.64); max-width: 100%; transform: translate(calc(var(--h1) * -.127), 6px); }
  .fortschritt .fortschritt__schritt--fertig { width: 100%; box-sizing: border-box; justify-content: center; grid-template-columns: 1.55rem auto; font-size: 1.08rem; padding: .6rem 1rem; gap: .65rem; }
  .fortschritt .fortschritt__punkt { width: 1.55rem; height: 1.55rem; }
  .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { left: .55rem; top: .3rem; width: .36rem; height: .72rem; border-width: 0 2.5px 2.5px 0; }
}
/* „Es ist nicht deine Schuld“-Kasten: Zeilen gleichmäßig lang umbrechen */
section[aria-labelledby="schuld-titel"] .schuld-kasten p { text-wrap: balance; }
/* Handy: „Nicht deine Schuld“-Kasten so breit wie die „Kennst du das?“-Karten (10 px Rand), etwas weniger Innenabstand */
@media (max-width: 47.99rem) {
  .schuld-kasten { width: calc(100vw - 20px); margin-left: calc(50% - 50vw + 10px); margin-right: 0; padding-inline: 1rem; box-sizing: border-box; }
}
/* Handy: Logo + Name als Briefkopf – feine, auslaufende Linien links und rechts, Name etwas kräftiger, näher am Balken */
@media (max-width: 47.99rem) {
  .f-kopf--status .f-kopf__inner { row-gap: 16px; }
  .f-kopf--status .marke { justify-self: stretch; width: 100%; justify-content: center; }
  .f-kopf--status .marke::before, .f-kopf--status .marke::after { content: ""; flex: 1 1 0; max-width: 6rem; height: 1.5px; border-radius: 1px; }
  .f-kopf--status .marke::before { margin-right: .35rem; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--w-main) 45%, transparent)); }
  .f-kopf--status .marke::after { margin-left: .35rem; background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--w-main) 45%, transparent)); }
  .f-kopf--status .marke__name { font-weight: 600; letter-spacing: .02em; }
}
/* Bewertungskarten: Name oben, Text in der Mitte, Sterne unten links */
.tp-klein .tp-karte { grid-template-rows: auto 1fr auto; }
.tp-klein .tp-karte .tp-karte__name { margin: 0; font-size: .78rem; font-weight: 700; color: var(--w-ink); }
.tp-klein .tp-karte > .tp-sterne { justify-self: start; align-self: end; }
/* Geschichte: neue Bilder – Kindheit (Gesicht mittig, Personen am Rand weg), Bruder im Auto */
.s-station--kindheit .s-bild img { object-position: 50% 0; }
.s-station--jugend .s-bild img { object-position: 50% 0; }
@media (min-width: 56rem) { .s-station--jugend .s-bild img { object-position: 50% 30%; } }

/* S-Linie: Kastentexte als gleichmäßige Blöcke umbrechen (alle Zeilen etwa gleich lang) */
.s-karte p:not(.s-wann) { text-wrap: balance; }

/* S-Linie: Heilungsreise – Meditationsfoto statt Buchcover, Kopf oben im Bild */
.s-station--heilung .s-bild img { object-position: 50% 15%; }

/* Vom Denker zum Beobachter als Kreis: Zeichen in der Mitte mit weichem Lichtschein, sechs gleich große Chips stehen symmetrisch darum */
.auge-kreis { --r: 42%; position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin: 0 auto; }
.auge-kreis::before { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--w-rgb), .14) 0%, rgba(var(--w-rgb), .06) 45%, transparent 70%); }
.auge-kreis__auge { position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; translate: -50% -50%; color: var(--w-main); stroke-width: 1.2; filter: drop-shadow(0 6px 14px rgba(var(--w-rgb), .25)); }
.kette.kette--kreis { position: absolute; inset: 0; display: block; margin: 0; }
.kette--kreis li { position: absolute; left: calc(50% + var(--rx, var(--r)) * cos(var(--i) * 60deg - 90deg)); top: calc(50% + var(--ry, var(--r)) * sin(var(--i) * 60deg - 90deg)); translate: -50% -50%; width: max-content; }
.kette--kreis li + li::before { content: none; }
.kette--kreis span { display: block; box-sizing: border-box; width: 9rem; text-align: center; white-space: nowrap; font-size: 1.0625rem; padding: .6rem .5rem; }
.kette--kreis li span, .kette--kreis li:last-child span, .kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span { animation: none; font-weight: 500; color: var(--w-ink); background: var(--w-paper); border: 1.5px solid rgba(var(--w-rgb), .45); box-shadow: 0 10px 22px -12px rgba(var(--w-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .8); }
@media (max-width: 47.99rem) {
  .auge-kreis { --r: 36%; margin-top: -1.25rem; }
  .auge-kreis::before { inset: 22%; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .07) 45%, transparent 70%); }
  .auge-kreis__auge { width: 30%; height: 30%; color: #FFFFFF; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .45)); }
  .kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span { width: 6.9rem; padding: .55rem .4rem; font-size: .9375rem; color: #FFFFFF; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(175, 190, 165, .6); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(4px); }
  #inhalt .kette-box h3.kette-titel mark.hw { color: #E8C46A; }
}
/* Punkt im Kreis: feiner Ring, der langsam atmet (ein Atemzug ca. 8 Sekunden), Lichtschein atmet mit */
.auge-kreis__auge { stroke-width: .7; }
.auge-kreis__ring { transform-box: fill-box; transform-origin: center; animation: w-atmen-ring 8s ease-in-out infinite; }
.auge-kreis::before { animation: w-atmen-schein 8s ease-in-out infinite; }
@keyframes w-atmen-ring { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes w-atmen-schein { 0%, 100% { scale: .85; opacity: .6; } 50% { scale: 1.08; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kette.kette--kreis, .kette--kreis li { animation: none; } .auge-kreis__ring, .auge-kreis::before { animation: none; } }

/* Studien-Karten: Text als gleichmäßige Blöcke umbrechen, wie bei den Kästen der Geschichte */
.studie p, .studie h4 { text-wrap: balance; }

/* Mehr Luft im Hero: Bild → Button → Trustpilot → Bewertungen → „Kennst du das?“ etwas großzügiger, damit jedes Element für sich wirkt */
.f-hero .start-cta { margin-top: 2.5rem; }
.f-hero .start-cta + .tp-klein { margin-top: 2rem; }
.tp-klein .tp-siegel, .f-hero .tp-klein .tp-siegel { margin: 0 auto 1.1rem; }
.f-hero { padding-bottom: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.f-abschnitt.kennst-abschnitt { padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); }

/* Einheitlicher Abschnittsabstand: überall gleich viel Luft vom Abschnittsrand bis zum Inhalt (Handy 64 px, Desktop ca. 93 px) */
#inhalt { --abstand-abschnitt: clamp(4rem, 3rem + 3.5vw, 6.25rem); }
#inhalt .f-abschnitt.kennst-abschnitt,
#inhalt #methode,
#inhalt section[aria-labelledby="schuld-titel"],
#inhalt .vorstellung,
#inhalt #erfahrungen,
#inhalt section[aria-labelledby="start-titel"] { padding-block: var(--abstand-abschnitt); }
#inhalt #erfahrungen .belege > li:last-child,
#inhalt section[aria-labelledby="schuld-titel"] .band:last-child,
#inhalt section[aria-labelledby="start-titel"] .schritte { margin-bottom: 0; }

/* Farbliche Trennung: „Was die Wissenschaft dazu sagt“ auf Creme, damit es sich vom grünen Methoden-Abschnitt davor abhebt */
#inhalt section[aria-labelledby="studien-titel"] { background: var(--w-ground); }

/* „Das ist möglich. / Schritt für Schritt.“ als eine Aussage: enger Zeilenabstand wie bei einer Überschrift */
#inhalt .vorstellung .frage { line-height: 1.15; }

/* Buttons, die farblich untergingen: im dunklen Teilnehmer-Abschnitt in Gold, im hellen Abschluss im normalen Petrol */
#inhalt #erfahrungen .btn--kauf { background: #D4A646; color: var(--w-deep); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .45); }
#inhalt #erfahrungen .btn--kauf:hover { background: #C4943A; color: var(--w-deep); }
#inhalt .abschied .btn--kauf { background: var(--w-main); color: #FFFFFF; box-shadow: 0 16px 34px -16px rgba(var(--w-rgb), .6); }
#inhalt .abschied .btn--kauf:hover { background: var(--w-deep); color: #FFFFFF; }

/* Zeitstrahl der Geschichte: Punkte in Dreiergruppen statt Strich, leise vorgezeichnet, beim Scrollen füllen sie sich nacheinander */
.s-linie__spur, .s-linie__pfad { stroke: transparent; }
.s-linie__punkte circle { fill: rgba(var(--w-rgb), .16); transform-box: fill-box; transform-origin: center; scale: .7; transition: fill .5s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1); }
.s-linie__punkte circle.ist-an { fill: var(--w-main); scale: 1; }
@media (prefers-reduced-motion: reduce) { .s-linie__punkte circle { transition: none; } }

/* ===== Desktop wie Handy (Stand 08.11.2026): gleiche Farben und Elemente, nur breiteres Layout ===== */
@media (min-width: 48rem) {
  /* Einstieg mit leichtem Grünschimmer */
  .f-hero { background: radial-gradient(ellipse 95% 40% at 50% 32%, color-mix(in srgb, var(--w-accent) 50%, transparent), transparent 78%), var(--w-ground); }
  /* „Apps, Bücher, YouTube“ auf Creme, Methode auf Hellgrün wie am Handy */
  #inhalt section[aria-labelledby="schuld-titel"] { background: var(--w-ground); }
  #inhalt .methode-abschnitt { background: var(--w-tint); }
  /* „Es ist nicht deine Schuld“-Kasten weich im Petrol-Verlauf */
  .schuld-kasten { background: linear-gradient(180deg, #2F5A5C 0%, #24494C 100%); box-shadow: 0 24px 50px -34px rgba(15, 58, 62, .55); }
  /* Zitat frei ohne dunklen Kasten */
  section[aria-labelledby="schuld-titel"] .band { margin: 0 auto; padding: 3rem .5rem .5rem; background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  section[aria-labelledby="schuld-titel"] .band::before { content: "\201C"; top: -.6rem; left: 50%; transform: translateX(-50%); font-size: 7rem; line-height: 1; color: var(--w-accent); }
  section[aria-labelledby="schuld-titel"] .band blockquote p { color: var(--w-ink); font: 400 clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem)/1.25 var(--serif); font-style: italic; max-width: 24ch; margin-inline: auto; }
  section[aria-labelledby="schuld-titel"] .band > p { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1.5px solid color-mix(in srgb, var(--w-main) 18%, transparent); color: var(--w-ink); font-size: 1.125rem; line-height: 1.6; max-width: 42ch; }
  section[aria-labelledby="schuld-titel"] .band > p .marker { color: var(--w-ink); background: linear-gradient(transparent 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 6%, color-mix(in srgb, var(--w-accent) 70%, transparent) 94%, transparent 94%); }
  /* Vom Denker zum Beobachter: dunkler Petrol-Kasten, weißer atmender Kreis, Chips mit Salbei-Rand */
  #inhalt .kette-box { margin-top: var(--s-5); padding: 2.75rem 2rem 2.5rem; border-radius: 28px; background: linear-gradient(180deg, #2F5A5C 0%, #24494C 100%); box-shadow: 0 30px 60px -40px rgba(var(--w-rgb), .6); }
  #inhalt .kette-box h3.kette-titel { color: #FFFFFF; margin-top: 0; margin-bottom: 1.4rem; }
  #inhalt .kette-box h3.kette-titel mark.hw { color: #E8C46A; }
  .auge-kreis { --r: 38%; margin-top: -1rem; }
  .auge-kreis::before { inset: 24%; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .07) 45%, transparent 70%); }
  .auge-kreis__auge { color: #FFFFFF; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .45)); }
  .kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span { color: #FFFFFF; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(175, 190, 165, .6); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(4px); }
}
@media (min-width: 48rem) { #inhalt .kette-box h3.kette-titel { white-space: normal; } }
/* Zeitstrahl-Punkte vorerst ausgeblendet, neue Darstellung folgt */
.s-linie__punkte { display: none; }
@media (min-width: 48rem) {
  /* Kopfleiste scrollt mit weg wie am Handy (nicht mehr festgeklebt) */
  .f-kopf.f-kopf--status { position: relative; }
  /* Einstieg: Hinweis „Bevor du es öffnest …“ und Überschrift wie am Handy, sauber umbrochen */
  .f-hero__glueck2 { display: block; margin-top: 1.1rem; font: 600 clamp(2rem, 1.5rem + 1.4vw, 2.6rem)/1.12 var(--serif); text-transform: uppercase; letter-spacing: .01em; color: var(--w-ink); }
  .f-hero__glueck2 mark { display: block; margin-top: .1rem; padding: 0; background: none; font-weight: 700; font-style: normal; color: #B07D22; }
  #inhalt .f-hero h1.f-hero__kurz { white-space: normal; margin: 1.4rem auto 0; max-width: 26ch; font: 400 clamp(2rem, 1.5rem + 1.3vw, 2.6rem)/1.2 var(--serif); color: var(--w-ink); text-wrap: balance; }
  /* Geschichte: Texte frei ohne Kasten, kleine Kapitel-Zeile, Bilder fast quadratisch wie am Handy, keine Punkte */
  .s-karte { min-height: 0; height: auto; padding: 1rem 1.5rem; background: transparent; border: 0; box-shadow: none; border-radius: 0; text-align: center; }
  .s-wann { justify-content: center; margin: 0 0 .5rem; gap: .35rem; align-items: baseline; }
  .s-wort, .s-num, .s-label { font: 600 .85rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--w-main); }
  .s-karte h3 { margin: 0 0 .7rem; font: 400 clamp(1.8rem, 1.4rem + 1vw, 2.2rem)/1.15 var(--serif); color: var(--w-ink); }
  .s-karte p:not(.s-wann) { font-size: 1.125rem; line-height: 1.6; color: var(--w-text); text-align: center; max-width: 34ch; margin-inline: auto; }
  .s-weg .s-punkt { visibility: hidden; }
  #inhalt .s-bild { justify-self: center; width: min(100%, 25rem); }
  #inhalt .s-bild picture { min-height: 0; height: auto; aspect-ratio: 1 / 1; }
  /* Teilnehmer: drei Nachrichten nebeneinander, Aufbau wie am Handy (Name, Aussage, Strich, Screenshot) */
  #erfahrungen .belege.belege--untereinander { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 62rem; margin-inline: auto; }
  #erfahrungen .belege--untereinander li, #erfahrungen .belege--untereinander li:last-child { grid-column: auto; width: auto; margin: 0; }
  .belege .beleg { display: flex; flex-direction: column; }
  .belege .beleg figcaption { display: contents; }
  .belege .beleg__name { order: 1; align-self: center; margin: 0 0 .6rem; background: #FFFFFF; color: var(--w-main); font-weight: 600; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .45); }
  .belege .beleg__titel { order: 2; min-height: 2.7em; margin: 0; display: flex; align-items: flex-start; justify-content: center; text-align: center; font-size: 1.1rem; line-height: 1.3; text-wrap: balance; }
  .belege .beleg::after { content: ""; order: 3; align-self: center; width: 2.5rem; height: 1.5px; margin: .6rem 0 .9rem; border-radius: 2px; background: currentColor; opacity: .35; }
  .belege .beleg .handy { order: 4; }
}
@media (min-width: 48rem) {
  /* Hinweis „Schau dir zuerst das kurze Video an“ und Trennlinie auch am Desktop */
  .video-hinweis { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: none; margin: 1.25rem auto 0; font: 700 1.05rem/1.2 var(--sans); color: var(--w-main); }
  .video-hinweis svg { width: 1.45rem; height: 1.45rem; padding: .22rem; border-radius: 50%; background: var(--w-main); color: #FFFFFF; transform: rotate(90deg); animation: hinweis-wippen 1.4s ease-in-out infinite; }
  .video-trenner { display: block; width: 16rem; height: 0; margin: 1.25rem auto 1.5rem; border: 0; border-top: 1px solid rgba(var(--w-rgb), .2); }
}
@media (min-width: 48rem) {
  /* Wissenschafts-Karten: Symbol neben der Überschrift, Überschrift mit Salbei-Marker wie am Handy */
  .studien--shader .studie h4 { flex-direction: row; align-items: center; gap: .7rem; font-size: 1.3rem; background: none; }
  .studien--shader .studie h4::after { content: none; }
  .studien--shader .studie h4 span { flex: none; width: 2.5rem; height: 2.5rem; }
  .studien--shader .studie h4 span svg { width: 1.3rem; height: 1.3rem; }
  .studien--shader .studie h4 span.studie__mark { flex: 1 1 auto; min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.25; width: auto; height: auto; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 58%, color-mix(in srgb, var(--w-accent) 75%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
@media (min-width: 48rem) {
  .studien--shader .studie h4 span.studie__mark { background: none; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--w-accent) 75%, transparent); text-decoration-thickness: .38em; text-underline-offset: -.22em; text-decoration-skip-ink: none; }
}

/* ===== Runde 09.11.2026 ===== */
/* Zeitstrahl Desktop: weiche geschwungene Linie von Text zu Text, ruhig und ohne Animation. Handy: keine Linie */
.s-linie__punkte { display: none; }
@media (min-width: 48rem) {
  .s-weg .s-linie__spur { stroke: var(--w-ink); stroke-width: 1.5; stroke-dasharray: none; }
  .s-weg .s-linie__pfad { stroke: transparent; }
}
/* Trustpilot am Desktop: breiteres Band, fünf Bewertungen gleichzeitig sichtbar */
@media (min-width: 64rem) {
  .f-hero .tp-klein { width: min(80rem, calc(100vw - 4rem)); margin-left: 50%; transform: translateX(-50%); }
  .f-hero .tp-klein .tp-karte { width: 14.5rem; }
}
/* „Kennst du das?“ am Desktop größer */
@media (min-width: 48rem) {
  .kennst-abschnitt .kennst-karten { width: min(56rem, calc(100vw - 4rem)); gap: .9rem; }
  .kennst-abschnitt .kennst-karte { padding: 1.15rem 1.5rem 1.15rem 1.2rem; gap: 1.1rem; }
  .kennst-abschnitt .kennst-karte p { font-size: 1.25rem; line-height: 1.5; }
  .kennst-abschnitt .kennst-karte .emoji { width: 3rem; height: 3rem; }
  .kennst-abschnitt .kennst-karte .emoji svg { width: 1.45rem; height: 1.45rem; }
  /* „Es ist NICHT deine Schuld“: NICHT groß geschrieben wie am Handy */
  .schuld-kasten__satz em { text-transform: uppercase; }
}

/* ===== Desktop nutzt die Breite (09.11.2026): weniger Zeilen, weniger Scrollen. Farben und Reihenfolge wie am Handy ===== */
@media (min-width: 64rem) {
  /* 6 · Abschnitte etwas kompakter, weiterhin überall gleich */
  #inhalt { --abstand-abschnitt: 4.75rem; }
  #inhalt .f-abschnitt:not(#geschichte) { padding-block: var(--abstand-abschnitt); }
  #inhalt #geschichte { padding-bottom: var(--abstand-abschnitt); }

  /* 1 · Einstieg: Hinweis, Überschrift und Text je 2 Zeilen, Video flacher – Button auf dem ersten Bildschirm */
  .f-hero .f-spalte { max-width: 62rem; }
  .f-hero__glueck2 { margin-top: .3rem; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
  .f-hero__glueck2 mark { display: block; margin-top: 0; }
  #inhalt .f-hero h1.f-hero__kurz { margin-top: .7rem; max-width: 36ch; font-size: clamp(1.9rem, 1.4rem + 1vw, 2.35rem); }
  .f-hero__lead { max-width: 46rem; margin-top: .7rem; }
  .f-hero__lead .lead-zeile { display: inline; white-space: normal; }
  .video-hinweis { margin-top: .75rem; }
  .video-trenner { margin: .75rem auto .9rem; }
  .f-hero .f-hero__bild { width: min(100%, 32rem); margin-inline: auto; }
  .f-hero .start-cta { margin-top: 1.4rem; }

  /* 2 · Texte breiter: weniger, aber gut lesbare Zeilen */
  #inhalt .f-spalte { max-width: 52rem; }
  .f-zentriert.f-text, #inhalt .story-band .zahlen + p { max-width: 46rem; margin-inline: auto; }
  section[aria-labelledby="schuld-titel"] .band blockquote p { max-width: 30ch; }
  section[aria-labelledby="schuld-titel"] .band > p { max-width: 58ch; }
  .schuld-kasten { max-width: 52rem; margin-inline: auto; }

  /* 3 · „Kennst du das?“ als Raster: vier Situationen 2 × 2, Wunsch über die volle Breite */
  .kennst-abschnitt .kennst-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(64rem, calc(100vw - 4rem)); gap: 1rem; }
  .kennst-abschnitt .kennst-karte { align-items: center; }
  .kennst-abschnitt .kennst-karte--wunsch { grid-column: 1 / -1; justify-content: center; }
  .kennst-abschnitt .kennst-karte--wunsch p { text-align: center; }

  /* 5 · „Das bekommst du“: Mockup links, Angebot rechts */
  #angebot .f-spalte { max-width: 74rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 2.5rem; align-items: start; }
  #angebot .f-spalte > h2 { grid-column: 1 / -1; }
  #angebot .kurs-mockup { margin: 0; position: sticky; top: 1.5rem; }
  #angebot .kurs-mockup figcaption { position: static; padding: .9rem 1.25rem 1.3rem; }
  section[aria-labelledby="angebot-titel"] .kurs-mockup { margin-inline: 0; }
  #angebot .karte.angebot { margin: 0; }
}

/* 7 · Kleiner fester Button oben rechts, sobald der Einstieg vorbei ist (nur Desktop) */
.mini-cta { display: none; }
@media (min-width: 64rem) {
  #inhalt ~ .mini-cta, .mini-cta.btn { width: auto; min-width: 0; min-height: 0; padding: .65rem 1.2rem; font-size: .95rem; animation: none; }
  .mini-cta { display: inline-flex; position: fixed; top: 1rem; right: 1.25rem; z-index: 50; opacity: 0; translate: 0 -.75rem; pointer-events: none; transition: opacity .3s ease, translate .3s ease; box-shadow: 0 14px 30px -14px rgba(var(--w-rgb), .6); }
  .mini-cta.ist-sichtbar { opacity: 1; translate: 0 0; pointer-events: auto; }
}

/* Zeilenumbruch nur am Desktop */
.br-desktop { display: none; }
@media (min-width: 64rem) {
  .br-desktop { display: inline; }
  /* Trustpilot am Desktop: drei Bewertungen ganz, links und rechts je eine halb, die ausblendet */
  .f-hero .tp-klein { width: calc(4 * 14.5rem + 3 * .7rem); }
  .f-hero .tp-klein__fenster { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12.5%, #000 87.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12.5%, #000 87.5%, transparent 100%); }
}
/* „Stell dir mal vor …“ am Desktop wieder wie vorher: untereinander in der schmalen Spalte */
@media (min-width: 64rem) { #inhalt .vorstellung .f-spalte { max-width: var(--spalte); } }
/* Abschnittsüberschriften am Desktop breit: eine Zeile, wenn es passt, sonst zwei ausgeglichene */
@media (min-width: 64rem) {
  #inhalt section:not(.story-band) > .f-spalte > h2, #inhalt section:not(.story-band) > .f-breit > h2 { max-width: 60rem; margin-inline: auto; white-space: normal; text-wrap: balance; }
}
/* „Kennst du das?“ am Desktop: Karten fliegen der Reihe nach ein – links oben, rechts oben, links Mitte, rechts Mitte, unten */
@media (min-width: 64rem) {
  .kennst-karten .kennst-karte:nth-child(1) { transition-delay: 0s !important; }
  .kennst-karten .kennst-karte:nth-child(2) { transition-delay: .15s !important; }
  .kennst-karten .kennst-karte:nth-child(3) { transition-delay: .3s !important; }
  .kennst-karten .kennst-karte:nth-child(4) { transition-delay: .45s !important; }
  .kennst-karten .kennst-karte:nth-child(5) { transition-delay: .6s !important; }
}
/* Vom Denker zum Beobachter am Desktop: größerer Kreis, größere Chips – füllt den Kasten besser */
@media (min-width: 64rem) {
  .auge-kreis { width: min(100%, 32rem); --r: 40%; --rx: 54%; --ry: 35%; margin-block: -.75rem -1.5rem; }
  .kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span { width: 10rem; padding: .7rem .5rem; font-size: 1.15rem; font-weight: 500; }
  /* Kasten näher an die Methoden-Karten, Überschrift einzeilig, alles enger – passt ganz auf einen Bildschirm */
  #inhalt #methode .kette-box { margin-top: 2rem; padding: 2rem 2rem 1.75rem; }
  #inhalt #methode .kette-box h3.kette-titel { white-space: nowrap; margin-bottom: 1rem; }
}

/* „Stell dir mal vor …“ besser lesbar: Foto stärker abgedeckt, jede Vorstellung auf heller Karte, Schrift kräftiger und dunkler */
.vorstellung--creme::before { background: linear-gradient(180deg, rgba(248, 243, 236, .92), rgba(248, 243, 236, .96)); }
.vorstellung--creme blockquote { margin: 0 0 .9rem; padding: 1rem 1.25rem 1rem 1.2rem; border-left: 4px solid var(--w-main); border-radius: 4px 16px 16px 4px; background: rgba(255, 255, 255, .82); box-shadow: 0 12px 26px -20px rgba(var(--w-rgb), .55); }
.vorstellung--creme blockquote p { font-weight: 400; color: var(--w-ink); line-height: 1.45; }
/* Teilnehmer-Namen (BB, Julia, Basti) gedämpft statt grellweiß, damit der Blick auf Aussage und Nachricht geht */
@media (min-width: 48rem) {
  #erfahrungen .belege .beleg__name { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
}
/* Handy wie Desktop: Teilnehmer-Namen gedämpft, Zeitstrahl als feine dunkle Bögen zwischen den Stationen */
#erfahrungen .belege .beleg__name { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
@media (max-width: 47.99rem) {
  /* Bögen liegen über Schatten der Bilder, etwas mehr Luft zwischen Bild und nächster Station, damit der Bogen sichtbar ist */
}

@media (max-width: 47.99rem) {
  /* Teilnehmer: Aussage und Strich enger zusammen, wie am Desktop */
  #erfahrungen .belege .beleg__titel { min-height: 0; }
  #erfahrungen .belege .beleg::after { margin: .6rem 0 .9rem; }
  /* Zeitstrahl Handy: statt Linie ein umrandeter, sanft leuchtender Punkt oben mittig an jedem Bild */
  .s-weg .s-bild { position: relative; overflow: visible; }
}
@keyframes w-punkt-leuchten { 0%, 100% { box-shadow: 0 0 0 3px var(--w-ground), 0 0 0 4.5px color-mix(in srgb, var(--w-main) 45%, transparent), 0 0 0 0 rgba(var(--w-rgb), .35); } 50% { box-shadow: 0 0 0 3px var(--w-ground), 0 0 0 4.5px color-mix(in srgb, var(--w-main) 45%, transparent), 0 0 14px 8px rgba(var(--w-rgb), .22); } }
@media (prefers-reduced-motion: reduce) { .s-weg .s-bild::before { animation: none; } }

/* Zeitstrahl Handy wieder wie am Anfang: zarte Spur, dunkle Linie zeichnet sich beim Scrollen nach unten */
@media (max-width: 47.99rem) {
  .s-weg .s-linie__spur { stroke: rgba(var(--w-rgb), .14); stroke-width: 2; }
  .s-weg .s-linie__pfad { stroke: var(--w-main); stroke-width: 2.5; }
}

/* Kaufleiste Handy: Gesamtwert rot durchgestrichen vor dem Preis */
.kaufleiste__alt { margin-right: .35rem; font-size: .95rem; color: var(--w-strike); text-decoration-color: var(--w-strike); text-decoration-thickness: 1.5px; }

/* Desktop: „Geschafft! Dein Geschenk ist auf dem Weg in dein Postfach.“ in einer Zeile, Chip passt sich an */
@media (min-width: 48rem) {
  .f-kopf--status .status { flex-basis: auto; width: auto; }
  .f-kopf--status .fortschritt { width: max-content; max-width: none; }
  .fortschritt__zeile2 { display: inline; }
  .fortschritt .fortschritt__schritt--fertig { white-space: nowrap; grid-template-columns: 1.35rem auto; padding: .55rem 1.25rem .55rem .7rem; border-radius: 999px; }
  /* Hinweis „Schau dir zuerst das kurze Video an“ deutlich größer */
  .video-hinweis { gap: .7rem; margin-top: 1.1rem; font-size: clamp(1.3rem, 1.05rem + .6vw, 1.6rem); }
  .video-hinweis svg { width: 2.1rem; height: 2.1rem; padding: .32rem; }
}

/* Desktop: „Apps, Bücher, YouTube“-Kacheln fast so breit wie „Es ist nicht deine Schuld“, Kacheln größer;
   Zitat und Absatz darunter mit sauberen Umbrüchen */
@media (min-width: 64rem) {
  .versucht { width: min(46rem, calc(100vw - 4rem)); max-width: none; gap: 1.25rem; margin-bottom: 1.5rem; }
  .versucht__item { gap: 1rem; padding: 1.9rem .75rem 1.7rem; border-radius: 26px; font-size: 1.35rem; }
  .versucht__icon { width: 4.5rem; height: 4.5rem; }
  .versucht__icon > svg { width: 2.15rem; height: 2.15rem; }
  .versucht__x { width: 1.9rem; height: 1.9rem; right: -.4rem; bottom: -.3rem; }
  .versucht__x svg { width: 1.05rem; height: 1.05rem; }
  section[aria-labelledby="schuld-titel"] .band blockquote p { max-width: none; text-wrap: balance; }
  section[aria-labelledby="schuld-titel"] .band > p { max-width: 46rem; }
}

/* Desktop-Zeitstrahl: Bilder kleiner und mehr Abstand zwischen den Stationen, damit die Linie Luft hat und nicht an den Bildern entlangschrammt */
@media (min-width: 48rem) {
  #inhalt .s-weg .s-bild { width: min(100%, 19rem); }
  .s-weg .s-liste { gap: clamp(5.5rem, 3.5rem + 4vw, 8.5rem); }
}

/* Handy: Hinweis „Schau dir zuerst das kurze Video an“ größer, damit er nicht untergeht (eine Zeile) */
@media (max-width: 47.99rem) {
  .video-hinweis { gap: .5rem; margin-top: 1.2rem; font-size: clamp(1.05rem, 4.9vw, 1.35rem); white-space: nowrap; }
  .video-hinweis svg { flex: none; width: 1.8rem; height: 1.8rem; padding: .28rem; }
}

/* Desktop-Zeitstrahl: Bilder wieder etwas größer, noch mehr Luft zwischen den Stationen für die Linie;
   Kapitel-Zeile („Wie alles anfing“) größer, Überschrift etwas kleiner → stimmigeres Verhältnis */
@media (min-width: 48rem) {
  #inhalt .s-weg .s-bild { width: min(100%, 22rem); }
  .s-weg .s-liste { gap: clamp(7rem, 4.5rem + 5vw, 10.5rem); }
  .s-weg .s-wann { margin-bottom: .65rem; }
  .s-weg .s-wort, .s-weg .s-num, .s-weg .s-label { font-size: 1.05rem; letter-spacing: .16em; }
  .s-weg .s-karte h3 { font-size: clamp(1.7rem, 1.35rem + .8vw, 2rem); margin-bottom: .8rem; }
}


/* „Kennst du das?“: kurzes Schlagwort über jeder Karte, damit man nicht viel lesen muss */
.kennst-karte .kennst-text { min-width: 0; }
.kennst-karte__titel { margin: 0 0 .2rem; font: 600 clamp(1.08rem, 1rem + .35vw, 1.25rem)/1.25 var(--sans); letter-spacing: 0; color: var(--w-ink); }
@media (min-width: 64rem) { .kennst-karte__titel { font-size: 1.3rem; margin-bottom: .3rem; } }

/* =====================================================================
   „Kennst du das?“: Doodle-Illustrationen, gleich große Karten, Bild links (2 Spalten),
   Wunsch-Karte gleich groß mittig darunter
   ===================================================================== */
.kennst-abschnitt .kennst-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; grid-template-columns: none; }
.kennst-abschnitt .kennst-karte, .kennst-abschnitt .kennst-karte--wunsch {
  flex: 0 1 calc(50% - 8px); min-width: 0; min-height: 0; height: auto;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px;
  padding: 26px 28px; border-radius: 26px; background: #FFFFFF; text-align: left;
}
.kennst-abschnitt .kennst-karte--wunsch { background: #FCFAF6; }
.kennst-abschnitt .kennst-karte--wunsch p { text-align: left; }
.kennst-illu { flex: none; width: 104px; height: 104px; overflow: visible; }
.kennst-abschnitt .kennst-karte__titel { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); margin-bottom: .35rem; }
@media (min-width: 64rem) { .kennst-abschnitt .kennst-karten { width: min(64rem, calc(100vw - 4rem)); } }
@media (max-width: 47.99rem) {
  .kennst-abschnitt .kennst-karte, .kennst-abschnitt .kennst-karte--wunsch { flex-basis: 100%; gap: 16px; padding: 18px 18px 18px 14px; }
  .kennst-illu { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kennst-illu .tw { animation: kennst-tw 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .kennst-illu .tw2 { animation-delay: 1.5s; }
  .kennst-illu .schweb { animation: kennst-schweb 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes kennst-tw { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes kennst-schweb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (min-width: 48rem) { .kennst-abschnitt .kennst-karte, .kennst-abschnitt .kennst-karte--wunsch { min-height: 13rem; } }


/* Call-to-Action-Buttons im Terrakotta-Verlauf (aus dem neuen Modell übernommen) */
:root {
  --w-cta: linear-gradient(120deg, #D9825C 0%, #B8573A 50%, #94412B 100%);
  --w-cta-hover: linear-gradient(120deg, #CF7651 0%, #A94D31 50%, #853824 100%);
  --w-cta-text: #FFFFFF;
}
.btn.btn--kauf { background: var(--w-cta) !important; color: var(--w-cta-text) !important; box-shadow: 0 14px 28px -16px rgba(140, 60, 35, .55); }
.btn.btn--kauf:hover { background: var(--w-cta-hover) !important; color: var(--w-cta-text) !important; }

/* „Apps, Bücher, YouTube“: Doodle-Illustrationen im Stil von „Kennst du das?“ */
.versucht__illu { width: 6.5rem; height: 6.5rem; overflow: visible; }
@media (min-width: 64rem) { .versucht__illu { width: 7.5rem; height: 7.5rem; } }
@media (max-width: 47.99rem) { .versucht__illu { width: 5rem; height: 5rem; } }

/* Zahlen-Kacheln „8 Jahre / 30.000 € / 1“: Sand statt schwerem Petrol (Variante Mix) */
.zahl, .story-band .zahl { background: #EFE3CF; border: 1.5px solid #DCCBAE; box-shadow: none; }
.zahl strong, .story-band .zahl strong { color: var(--w-main); }
.zahl > span, .story-band .zahl > span { color: var(--w-text); }

/* =====================================================================
   Hervorhebungen überall: Original-Salbei, nur untere Hälfte (wie ein Textmarker-Unterstrich)
   ===================================================================== */
:root { --w-marker: rgba(175, 190, 165, .7); }  /* Original-Salbei */
.f-text strong, .marker, .kennst-karte p strong.marker,
section[aria-labelledby="schuld-titel"] .f-text strong, section[aria-labelledby="schuld-titel"] .marker,
section[aria-labelledby="schuld-titel"] .band > p .marker, .band > p .marker {
  color: var(--w-ink); padding: 0 .06em; border-radius: 0;
  background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.h1-mark { background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%); }
.studien--shader .studie h4 span.studie__mark { background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%); text-decoration: none; }
/* auf dunklem Grund: Schrift bleibt weiß, Honig etwas zurückgenommen */
section[aria-labelledby="schuld-titel"] .schuld-kasten strong { color: #FFFFFF; padding: 0 .06em; background: linear-gradient(transparent 66%, rgba(175,190,165,.6) 66%, rgba(175,190,165,.6) 92%, transparent 92%); }

/* „NICHT“ im Kasten „Es ist nicht deine Schuld“: Gold wie „noch etwas zeigen“ (auf dunklem Grund minimal aufgehellt) */
.schuld-kasten__satz em, section[aria-labelledby="schuld-titel"] .schuld-kasten__satz em {
  color: #C9952E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C30 3.5 70 2.8 117 6.2' fill='none' stroke='%23C9952E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* „Hey, ich bin Emre.“: Gold wie „Beobachter“ */
#inhalt .story-band__hallo, [data-palette] #inhalt .story-band__hallo, .story-band__hallo { color: #E9C46A; }

/* Wissenschafts-Überschriften: Strich nur unter den Wörtern (wie überall), nicht über die ganze Breite */
.studien--shader .studie h4 span.studie__mark, .studien--shader .studie h4 span.studie__mark:is(*) { background: none !important; text-decoration: none !important; }
.studie__mark-text { padding: 0 .06em; background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Einheitliches Gold (wie „Hey, ich bin Emre“): NICHT, NOCH ETWAS ZEIGEN, Beobachter */
:root { --w-gold: #E9C46A; }
.schuld-kasten__satz em, section[aria-labelledby="schuld-titel"] .schuld-kasten__satz em {
  color: var(--w-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C30 3.5 70 2.8 117 6.2' fill='none' stroke='%23E9C46A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.f-hero__glueck2 mark, #inhalt .f-hero__glueck2 mark { color: var(--w-gold); }
#inhalt .kette-box h3.kette-titel mark.hw, .kette-box h3.kette-titel mark.hw { color: var(--w-gold); }
.studien--shader .studie h4 span.studie__mark-text { display: inline; width: auto; height: auto; border-radius: 0; box-shadow: none; font: inherit; line-height: inherit; color: inherit; place-items: normal; flex: none;
  background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%); }

/* Zahlen-Kacheln: Petrol aus dem Verlauf im Story-Bild (passt zu „Nicht deine Schuld“) */
.zahl, .story-band .zahl { background: #264849; border: 1.5px solid #3B5E5F; box-shadow: none; }
.zahl strong, .story-band .zahl strong { color: #FFFFFF; }
.zahl > span, .story-band .zahl > span { color: rgba(255, 255, 255, .82); }

/* „Vom Denker zum Beobachter“: Chips in Gold gefüllt, „Beobachter“ fett in Weiß (ohne Strich) */
.kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span {
  background: #E9C46A !important; border: 1.5px solid #E9C46A !important; color: #1F3A3B !important;
  backdrop-filter: none; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55);
}
#inhalt .kette-box h3.kette-titel mark.hw, .kette-box h3.kette-titel mark.hw { color: #FFFFFF; font-weight: 600; background: none; }

/* =====================================================================
   Bewegtes Muster wie „Was die Wissenschaft dazu sagt“ (shader-karten.js)
   hell: Methode + So startest du · dunkel (Petrol): Nicht deine Schuld + Zahlen-Kacheln
   ===================================================================== */
.muster { position: relative; isolation: isolate; overflow: hidden; }
.muster > .studie__shader { position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.muster > .studie__shader::after { content: ""; position: absolute; inset: 0; background: var(--muster-schleier); }
.muster--hell { --muster-schleier: rgba(253, 251, 247, .55); background: linear-gradient(135deg, #f8f3ec, #f3e6d2 55%, #f5e7de) !important; border: 2px solid color-mix(in srgb, var(--w-main) 38%, transparent) !important; }
.muster--hell > .studie__shader:not(.ist-aktiv) { background: none; }
.muster--dunkel { --muster-schleier: rgba(20, 46, 46, .4); background: #264849 !important; }
.muster--dunkel > .studie__shader:not(.ist-aktiv) { background: none; }
.schritt.muster > *:not(.studie__shader) { position: relative; }
.kette-box.muster > *:not(.studie__shader) { position: relative; }

/* Nummern 1-2-3 (Methode + So startest du): ruhig wie die Icons der Wissenschafts-Karten – weißer Kreis, feiner Ring, Petrol-Ziffer */
.schritt::before, .schritt.muster::before {
  width: 2.75rem !important; height: 2.75rem !important;
  background: rgba(255, 255, 255, .75) !important; color: var(--w-main) !important;
  border: 0 !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--w-main) 35%, transparent) !important;
  font: 300 1.35rem/1 var(--serif) !important; z-index: 1;
}

/* Zahlen-Kacheln + Denker-Box wieder ohne bewegtes Muster (feste Fläche) */
.kette-box { background: #264849; }

/* Denker-Box: Auge größer – äußerer Ring und Punkt */
.auge-kreis__auge { width: 40% !important; height: 40% !important; }
@media (max-width: 47.99rem) { .auge-kreis__auge { width: 38% !important; height: 38% !important; } }
.auge-kreis::before { inset: 16% !important; }

/* „Stell dir mal vor …“: Doodle links neben jedem Punkt */
.vorstellung--creme blockquote.vorstellung-zeile { display: flex; align-items: center; gap: 1rem; padding-left: .7rem; }
.vorstellung-illu { flex: none; width: 5.4rem; height: 5.4rem; overflow: visible; }
@media (max-width: 47.99rem) { .vorstellung-illu { width: 4.2rem; height: 4.2rem; } .vorstellung--creme blockquote.vorstellung-zeile { gap: .7rem; } }

/* „Geschafft!“-Chip: Leinen mit Petrol-Rand (tritt neben dem Terrakotta-Button zurück) */
.fortschritt .fortschritt__schritt--fertig, [data-palette] .fortschritt .fortschritt__schritt--fertig {
  background: #FBFAF6 !important; color: var(--w-main) !important;
  box-shadow: inset 0 0 0 1.5px rgba(15, 58, 62, .4) !important;
}
.fortschritt .fortschritt__schritt--fertig strong { color: var(--w-main) !important; }
.fortschritt .fortschritt__schritt--fertig .fortschritt__punkt, [data-palette] .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt { background: var(--w-main) !important; }
.fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after, [data-palette] .fortschritt .fortschritt__schritt--fertig .fortschritt__punkt::after { border-color: #FFFFFF !important; }

/* „Stell dir mal vor …“: Überschrift + kurzer Text je Punkt, mehr Luft vor „Das ist möglich.“ */
.vorstellung-text { min-width: 0; }
.vorstellung--creme .vorstellung-titel { margin: 0 0 .2rem; font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.25 var(--sans); color: var(--w-ink); letter-spacing: 0; }
.vorstellung--creme blockquote.vorstellung-zeile p { margin: 0; }
#inhalt .vorstellung .frage, .vorstellung--creme .frage { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; }

/* Einstieg: eine feste Farbe (Sand) statt Verlauf */
.f-hero, #inhalt .f-hero { background: #EFE3CF !important; }
.f-hero::before { display: none !important; }

/* „So funktioniert die Methode“ + „Vom Denker zum Beobachter“: Sand statt Salbei (wie der Einstieg) */
#methode, #methode.licht, .methode-abschnitt { background: #EFE3CF !important; }

/* Einstieg: wieder alte Version mit Salbei-Schein hinter der Überschrift (ersetzt Sand) */
.f-hero, #inhalt .f-hero { background: radial-gradient(ellipse 95% 40% at 50% 32%, color-mix(in srgb, var(--w-accent) 50%, transparent), transparent 78%), var(--w-ground) !important; }

/* „So funktioniert die Methode“: Warmweiß statt Sand · Denker-Chips: nur Gold-Rand, weiße Schrift */
#methode, #methode.licht, .methode-abschnitt { background: #FCFAF6 !important; }
.kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span {
  background: rgba(255, 255, 255, .05) !important; border: 1.5px solid #E9C46A !important; color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Denker-Chips wieder voll Gold gefüllt */
.kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span {
  background: #E9C46A !important; border: 1.5px solid #E9C46A !important; color: #1F3A3B !important;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55) !important;
}

/* =====================================================================
   Einheitliches Gold = Bernstein (#E0A955)
   NICHT · Hey, ich bin Emre · Denker-Chips · Nummern 1-2-3 (gefüllt)
   „noch etwas zeigen“ auf hellem Grund im dunkleren Bernstein-Ton (lesbar)
   ===================================================================== */
:root { --w-bernstein: #E0A955; --w-bernstein-tief: #A86B1E; }
.schuld-kasten__satz em, section[aria-labelledby="schuld-titel"] .schuld-kasten__satz em {
  color: var(--w-bernstein);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C30 3.5 70 2.8 117 6.2' fill='none' stroke='%23E0A955' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
#inhalt .story-band__hallo, [data-palette] #inhalt .story-band__hallo, .story-band__hallo { color: var(--w-bernstein); }
.f-hero__glueck2 mark, #inhalt .f-hero__glueck2 mark { color: var(--w-bernstein-tief); }
.kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span {
  background: var(--w-bernstein) !important; border-color: var(--w-bernstein) !important; color: #1F2A2B !important;
}
.schritt::before, .schritt.muster::before {
  background: var(--w-bernstein) !important; color: #1F2A2B !important; box-shadow: none !important; font-weight: 400 !important;
}

/* Nummern 1-2-3 (Methode + So startest du) wieder weiß – ruhig wie die Wissenschafts-Icons */
.schritt::before, .schritt.muster::before {
  background: rgba(255, 255, 255, .75) !important; color: var(--w-main) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--w-main) 35%, transparent) !important; font-weight: 300 !important;
}

/* Handy: Auge im Denker-Kasten wieder in der früheren Größe (Ring + Punkt) */
@media (max-width: 47.99rem) {
  .auge-kreis__auge { width: 30% !important; height: 30% !important; }
  .auge-kreis__auge circle:not(.auge-kreis__ring) { r: 1.8px; }
  .auge-kreis::before { inset: 22% !important; }
}

/* Handy: Denker-Chips einen Tick kleiner, gleich breit, symmetrisch im Sechseck um das Auge */
@media (max-width: 47.99rem) {
  .kette-box .kette--kreis li span, .kette-box .kette--kreis li:last-child span {
    width: 6.1rem; padding: .48rem .3rem; font-size: .84rem; text-align: center; box-sizing: border-box;
  }
  .auge-kreis { --rx: 35%; --ry: 39%; }
}
/* Handy: Chips enger zusammen, damit sie optisch einen runden Kreis bilden */
@media (max-width: 47.99rem) {
  .auge-kreis { --rx: 37%; --ry: 31%; aspect-ratio: 1 / .82; margin-block: -.5rem -.25rem; }
}
/* Handy: Ring wieder etwas großzügiger – mehr Luft zwischen Chips und Auge */
@media (max-width: 47.99rem) {
  .auge-kreis { --rx: 39.5%; --ry: 34.5%; aspect-ratio: 1 / .9; margin-block: -.25rem 0; }
}

/* „Wenige Minuten täglich, ohne Vorkenntnisse.“ hervorgehoben (Salbei, untere Hälfte) */
.lead-mark { color: var(--w-ink); font-weight: 600; padding: 0 .06em; background: linear-gradient(transparent 62%, var(--w-marker) 62%, var(--w-marker) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Gleichmäßige Umbrüche: Kennst-Karten und Timeline-Texte */
.kennst-karte p, .s-karte p:not(.s-wann) { text-wrap: pretty; }
@media (max-width: 47.99rem) { .kennst-karte p, .s-karte p:not(.s-wann) { text-wrap: balance; } }
.marker.nowrap { white-space: nowrap; }
/* „Wenige Minuten täglich …“: nur farblich abgesetzt, ohne Strich */
.lead-mark { background: none !important; padding: 0; color: var(--w-main); font-weight: 600; }
.nowrap-m { white-space: nowrap; }
/* Handy: Timeline-Text etwas breiter, damit „Depression, Zwangsgedanken, Angst,“ in eine Zeile passt */

@media (max-width: 47.99rem) { :is(.s-station--tiefpunkt,.s-station--heilung) .s-karte { width: 100%; padding-inline: .25rem; } :is(.s-station--tiefpunkt,.s-station--heilung) .s-karte p:not(.s-wann) { max-width: 36ch; } }
/* „Das bekommst du“: Geräte-Bild ohne Unterzeile, Liste folgt direkt */
#angebot .kurs-mockup { padding-bottom: 0; }
#angebot .kurs-mockup + .karte.angebot { margin-top: 1rem; }

/* „So funktioniert die Methode“: Modul-Chips in Bernstein */
.schritt small, #methode .schritt small { background: var(--w-bernstein, #E0A955) !important; color: #1F2A2B !important; font-weight: 500; }

/* Desktop: Größenverhältnis wie am Handy – „Bevor du es öffnest …“ größer als „Dein Kopf darf endlich …“ */
@media (min-width: 48rem) {
  .f-hero__glueck2 { font-size: clamp(2.1rem, 1.6rem + 1.1vw, 2.5rem) !important; line-height: 1.1; }
  #inhalt .f-hero h1.f-hero__kurz, .f-hero h1.f-hero__kurz { font-size: clamp(1.8rem, 1.45rem + .8vw, 2.15rem) !important; }
}
@media (min-width: 64rem) { .f-hero__glueck2 { max-width: none !important; white-space: nowrap; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .f-hero__glueck2 { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.2rem) !important; text-wrap: balance; } }

/* Einfliegen schneller: feste Verzögerungen kürzen, damit Buttons rechtzeitig da sind (alle Seiten) */
.vorstellung--creme blockquote:nth-of-type(1) { transition-delay: 0s !important; }
.vorstellung--creme blockquote:nth-of-type(2) { transition-delay: .08s !important; }
.vorstellung--creme blockquote:nth-of-type(3) { transition-delay: .16s !important; }
.vorstellung--creme blockquote:nth-of-type(4) { transition-delay: .24s !important; }
.vorstellung--creme .frage { transition-delay: .2s !important; }
.vorstellung .frage-cta { transition-delay: .25s !important; }
.js .einblenden { transition-duration: .45s !important; }

/* „Kennst du das?“: einen Tick größer und etwas weiter nach oben */
#inhalt .kennst-abschnitt h2, .kennst-abschnitt h2#kennst-titel { font-size: calc(var(--w-h2, 2.5rem) * 1.18) !important; }
@media (max-width: 47.99rem) { #inhalt .kennst-abschnitt h2, .kennst-abschnitt h2#kennst-titel { font-size: 2.45rem !important; } }
@media (min-width: 48rem) { #inhalt .kennst-abschnitt h2, .kennst-abschnitt h2#kennst-titel { font-size: 3.9rem !important; } }
#inhalt .f-abschnitt.kennst-abschnitt { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) !important; }

/* Timeline: „Ein Verlust verändert alles“ in einer Zeile */
.s-station--kindheit .s-karte h3 { white-space: nowrap; max-width: none; }
@media (max-width: 47.99rem) { .s-station--kindheit .s-karte h3 { font-size: min(1.9rem, 7.4vw) !important; } }

/* Wissenschafts-Karten: Überschriften größer, damit sie sofort ins Auge fallen */
.studien--shader .studie h4 { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.7rem) !important; line-height: 1.2 !important; }
@media (max-width: 47.99rem) {
  .studien--shader .studie h4 { font-size: 1.4rem !important; }
  .studien--shader .studie h4 span.studie__mark, .studien--shader .studie h4 .studie__mark-text { white-space: normal !important; min-width: 0; flex: 1 1 auto; }
}