/* ============================================================================
   SALES-SYSTEM 2026 · eigener Layer fuer die Digistore-Verkaufsseiten
   ----------------------------------------------------------------------------
   Angelegt 30.08.2026 fuer den Neubau von non-sleep-deep-rest.html.

   WARUM EINE EIGENE DATEI: Alexander hat die erste, nach lp.css gebaute Fassung
   abgelehnt, wortwoertlich "das sieht aus wie eine 2015 standard wordpress
   seite", "rechts zu viel freiraum", "das ist so super langweilig". Die
   Kernursache war strukturell und nicht kosmetisch: lp.css setzt Textsektionen
   als schmale Spalte (max-width 70ch bzw. 46ch) in ein 12-Spalten-Raster, die
   rechten sechs Spalten bleiben dabei leer. Bei einer Informationsseite ist das
   editorial und gewollt, bei einer Verkaufsseite wirkt es unfertig.

   Dieser Layer loest das anders: JEDE Sektion fuellt die Breite mit einer
   Komposition aus Text UND Flaeche (Bild, Kachel, Zahl oder Visual). Es gibt
   hier keine Sektion, die nur aus einer Textspalte besteht.

   lp.css bleibt komplett unangetastet, weil preis-und-positionierung.html,
   dein-next-level-mit-gong-und-klang.html, entfalte-die-kraft-deiner-stimme.html,
   gong-marketing.html und sound-spa.html live darauf laufen und von Alexander
   abgenommen sind. Wird dieses System hier abgenommen, ziehen die anderen
   Seiten nacheinander nach, nicht in einer Aenderungswelle.

   Design-Grundlage unveraendert: Tokens aus style.css (:root), Gold #d19947 als
   CTA, Bordeaux #701512 als Sekundaerton, Syntax LT Pro nur in 400 und 700,
   kein Gruen, Schrift gross genug fuer 40+.

   Recherchierte Muster, die hier umgesetzt sind (Stand 2026): Bento-Grid statt
   gleichfoermiger Kachelreihen, ueberdimensionierte Typografie als visueller
   Anker, Produkterlebnis vor der Kaufaufforderung (die Hoerprobe steht direkt
   unter dem Hero), Rhythmuswechsel durch dunkle Kontrastblaenke, ein
   wiederkehrender CTA statt vieler konkurrierender Ziele.
   ========================================================================= */

/* ---------- 1 Sektions-Grundlagen ---------- */

.s-sec {
  padding-block: clamp(72px, 8vw, 132px);
  position: relative;
}
.s-sec--tight { padding-block: clamp(48px, 5vw, 84px); }
.s-sec--paper { background: var(--paper); }
.s-sec--sand  { background: var(--sand); }
.s-sec--dark {
  background: var(--black);
  color: rgb(250, 244, 234);
}
.s-sec--dark h2,
.s-sec--dark h3 { color: rgb(250, 244, 234); }
.s-sec--dark .s-lede { color: rgba(250, 244, 234, 0.78); }
.s-sec--dark .s-eyebrow { color: var(--gold-soft); }

/* Abschnittskopf. Bewusst NICHT auf 46ch gedeckelt: die schmale, zentrierte
   Kopfspalte war einer der Gruende fuer den "zu viel frei"-Eindruck. Der Kopf
   laeuft jetzt zweispaltig, Ueberschrift links, Lede rechts, damit die Zeile
   ueber die volle Breite traegt. */
.s-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.s-head--solo { grid-template-columns: 1fr; }
.s-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 14px;
}
.s-eyebrow::before {
  content: ""; width: clamp(24px, 4vw, 56px); height: 1px;
  background: currentColor; flex: none;
}
.s-head h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin: 0;
}
.s-lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 2 Hero ----------
   Dunkel und atmosphaerisch statt hell und leer. Links Versprechen, Haken,
   Preis und zwei Handlungswege, rechts das Cover als grosse Flaeche. Der
   Preis steht bewusst schon hier, nicht erst unten: bei einem 39-Euro-Produkt
   ist der Preis ein Kaufargument und kein Einwand, den man verstecken muss. */

.s-hero {
  background: var(--black);
  color: rgb(250, 244, 234);
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6vw, 104px);
  position: relative;
  overflow: hidden;
}
/* Weiches Lichtfeld hinter dem Cover, damit die Flaeche nicht tot wirkt */
.s-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 78% 30%, rgba(209, 153, 71, 0.18), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(112, 21, 18, 0.30), transparent 72%);
  pointer-events: none;
}
.s-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.s-hero h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(16px, 2vw, 26px);
  color: rgb(250, 244, 234);
}
.s-hero__sub {
  font-size: var(--fs-lede);
  color: var(--gold-soft);
  font-weight: 700;
  margin: 0 0 clamp(18px, 2vw, 28px);
}
.s-hero__lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(250, 244, 234, 0.82);
  max-width: 46ch;
  margin: 0 0 clamp(24px, 3vw, 34px);
}
/* 3:2 statt 1:1, seit dem Bildtausch am 30.08.2026: im Hero steht jetzt die
   Nutzungssituation (Frau mit Kopfhoerern im Sessel) statt des Produktcovers. Das
   Cover trug einen eingebrannten Titel, der die H1 direkt daneben wortgleich
   wiederholte (Befund Checker Jody). */
.s-hero__cover {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.9);
}
.s-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Haken-Liste. Zweispaltig, damit sie in die Breite geht statt als schmale
   Kolonne zu haengen. */
.s-ticks {
  list-style: none; margin: 0 0 clamp(26px, 3vw, 36px); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px clamp(20px, 2.5vw, 36px);
}
.s-ticks li {
  position: relative; padding-left: 30px;
  font-size: var(--fs-small); line-height: 1.4;
  color: rgba(250, 244, 234, 0.92);
}
.s-ticks li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}

/* Preiszeile im Hero: Zahl gross, Zusatz klein daneben */
.s-price {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.s-price__num {
  font-size: clamp(2.6rem, 4.6vw, 3.9rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.s-price__note {
  font-size: var(--fs-small);
  color: rgba(250, 244, 234, 0.72);
}
.s-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.s-actions .btn { margin: 0; }
.s-linkbtn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 700;
  color: var(--gold-soft); text-decoration: none;
  border-bottom: 1px solid rgba(230, 192, 134, 0.45);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.s-linkbtn:hover { color: rgb(250, 244, 234); border-color: rgb(250, 244, 234); }

/* ---------- 3 Trust-Leiste ----------
   Schmales Band direkt unter dem Hero. Nimmt die drei Einwaende vorweg, die
   bei einem digitalen Kauf zuerst kommen: Was kostet es wirklich, wann habe
   ich es, was, wenn es nichts taugt. */

.s-strip {
  background: var(--black);
  border-top: 1px solid rgba(230, 192, 134, 0.22);
  color: rgba(250, 244, 234, 0.9);
}
.s-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.s-strip__item {
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 32px);
  border-left: 1px solid rgba(230, 192, 134, 0.22);
  display: flex; align-items: baseline; gap: 12px;
}
.s-strip__item:first-child { border-left: 0; padding-left: 0; }
.s-strip__k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); flex: none;
}
.s-strip__v { font-size: var(--fs-small); line-height: 1.4; }

/* ---------- 4 Hoerprobe ----------
   Steht bewusst direkt unter dem Hero. Bei einem Audio-Produkt ist die Probe
   das staerkste Verkaufsargument, weil der Interessent das Produkt sofort
   erlebt statt es beschrieben zu bekommen. Player links, Flaeche rechts. */

.s-player__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.s-player__box {
  background: var(--white);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.s-player__head { padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px) 0; }
/* min-width:0 ist hier Pflicht, nicht Kosmetik: das native <audio>-Element bringt eine
   eigene Mindestbreite mit (gemessen 30.08.2026: 420px), die width:100% nicht
   unterschreitet. In einer schmalen Spalte schiebt es dadurch das ganze Dokument
   auseinander. Siehe auch .s-track__title weiter unten, gleicher Mechanismus. */
.s-player__head audio { width: 100%; min-width: 0; max-width: 100%; display: block; }
.s-player__list { list-style: none; margin: 0; padding: 8px clamp(12px, 1.6vw, 20px) clamp(14px, 1.8vw, 22px); }
.s-track {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--rule);
  padding: 15px 12px; cursor: pointer;
  font-family: inherit; color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.s-player__list li:first-child .s-track { border-top: 0; }
.s-track:hover { background: var(--gold-tint); }
.s-track[data-active="true"] { background: var(--gold-tint); color: var(--bordeaux); font-weight: 700; }
.s-track__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.s-track[data-active="true"] .s-track__num {
  background: var(--bordeaux); border-color: var(--bordeaux); color: var(--white);
}
/* min-width:0 hebt die Voreinstellung min-width:auto eines Flex-Kindes auf. Ohne sie
   kann der Titel nicht unter seine laengste Zeile schrumpfen, der Kasten waechst mit
   und das ganze Dokument wird breiter als der Schirm. Gemessen am 30.08.2026 bei
   390px Viewport: scrollWidth 486px, Ursache war genau diese Zeile. */
.s-track__title { flex: 1; min-width: 0; font-size: var(--fs-small); }
.s-track__time { flex: none; font-size: var(--fs-micro); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Rechte Spalte: Video oben, Hinweiskasten darunter. Der Kasten ist kein
   Fueller, er nimmt die zwei Fragen vorweg, die beim Probehoeren aufkommen.
   Zugleich fuellt er die Spaltenhoehe, sodass das Video sein 16:9 behalten kann,
   statt auf Spaltenhoehe gestreckt und dabei seitlich beschnitten zu werden
   (gemessen am 30.08.2026: der eingebrannte Schriftzug des YouTube-Standbilds
   war links angeschnitten). */
.s-player__side { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.s-player__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; flex: none;
  background: var(--black);
}
.s-player__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.s-player__media:hover img { transform: scale(1.04); }
.s-player__note {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(20px, 2.2vw, 30px);
  display: flex; flex-direction: column; justify-content: center;
}
.s-player__note h3 { font-size: var(--fs-h3); margin: 0 0 10px; letter-spacing: -0.018em; }
.s-player__note p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); margin: 0; }
.s-player__note p + p { margin-top: 12px; }

/* ---------- 5 Bento-Raster ----------
   Der zentrale Baustein gegen den gleichfoermigen Kacheleindruck: sechs Zellen
   in drei verschiedenen Groessen, zwei davon mit Bild, eine mit einer grossen
   Zahl. Die Groessenunterschiede tragen die Hierarchie, ohne dass eine Kachel
   einen Rahmen oder Schatten braucht. */

.s-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.s-cell {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 38px);
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
}
.s-sec--paper .s-cell { background: var(--white); }
.s-sec--dark .s-cell {
  background: rgba(250, 244, 234, 0.04);
  border-color: rgba(230, 192, 134, 0.22);
}
.s-cell--w4 { grid-column: span 4; }
.s-cell--w5 { grid-column: span 5; }
.s-cell--w6 { grid-column: span 6; }
.s-cell--w7 { grid-column: span 7; }
.s-cell--w8 { grid-column: span 8; }
.s-cell--w12 { grid-column: span 12; }
.s-cell--tall { grid-row: span 2; }
/* Bildzelle: Bild fuellt die Zelle randlos, kein Innenabstand */
.s-cell--media { padding: 0; overflow: hidden; position: relative; min-height: 220px; }
.s-cell--media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.s-cell--media:hover img { transform: scale(1.05); }
/* Akzentzelle in Gold, fuer den Bonus oder das staerkste Argument */
.s-cell--accent {
  background: var(--gold-tint);
  border-color: rgba(176, 126, 48, 0.35);
}
.s-sec--dark .s-cell--accent {
  background: rgba(209, 153, 71, 0.14);
  border-color: rgba(230, 192, 134, 0.4);
}
.s-cell h3 {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.018em;
  margin: 0 0 10px; line-height: 1.15;
}
.s-cell p {
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); margin: 0;
}
.s-sec--dark .s-cell p { color: rgba(250, 244, 234, 0.74); }
.s-cell__k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px;
}
.s-sec--dark .s-cell__k { color: var(--gold-soft); }
/* Grosse Zahl als visueller Anker in einer Zelle */
.s-cell__num {
  font-size: clamp(3rem, 5.4vw, 5rem); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.04em; color: var(--gold-soft);
  margin-bottom: 12px;
}
/* Einheit unter der Zahl, nicht daneben: auf gemeinsamer Grundlinie wirkte das
   kleine Wort neben der sehr grossen Ziffer gequetscht (gerendert geprueft
   30.08.2026). */
.s-cell__unit {
  display: block; margin-top: 6px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.s-sec--dark .s-cell__unit { color: rgba(250, 244, 234, 0.6); }
/* Bildunterschrift auf einer Medienzelle, unten liegend */
.s-cell__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(to top, rgba(20, 19, 17, 0.86), transparent);
  color: rgb(250, 244, 234);
}
.s-cell__cap strong { display: block; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 4px; }
.s-cell__cap span { font-size: var(--fs-small); color: rgba(250, 244, 234, 0.8); }

/* ---------- 6 Split: Text und randabfallendes Bild ----------
   Ersetzt die frueheren reinen Textsektionen. Das Bild laeuft bis an den
   Viewport-Rand, dadurch bleibt rechts nichts leer. */

.s-split {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(12, minmax(0, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 12)))
    minmax(var(--gutter), 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px) 0;
}
.s-split__body { grid-column: 2 / 8; }
.s-split__media { grid-column: 9 / -1; position: relative; overflow: hidden; align-self: stretch; min-height: clamp(320px, 42vw, 560px); }
/* Gespiegelt: Bild links, Text rechts */
.s-split--flip .s-split__media { grid-column: 1 / 7; }
.s-split--flip .s-split__body { grid-column: 8 / 14; }
.s-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.s-split__media:hover img { transform: scale(1.04); }
.s-split__body h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; line-height: 1.05; margin: 0 0 18px; }
.s-split__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.s-split__body p.s-lede { font-size: var(--fs-lede); color: var(--ink); }
.s-sec--dark .s-split__body p { color: rgba(250, 244, 234, 0.76); }
.s-sec--dark .s-split__body p.s-lede { color: rgb(250, 244, 234); }

/* Aufzaehlung mit Zeitangabe, fuer die drei Sessions */
.s-list { list-style: none; margin: 24px 0 0; padding: 0; }
.s-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px;
  align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.s-sec--dark .s-list li { border-color: rgba(230, 192, 134, 0.2); }
.s-list li:last-child { border-bottom: 1px solid var(--rule); }
.s-sec--dark .s-list li:last-child { border-color: rgba(230, 192, 134, 0.2); }
.s-list__time {
  font-size: var(--fs-h3); font-weight: 700; color: var(--gold-deep);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  white-space: nowrap;
}
.s-sec--dark .s-list__time { color: var(--gold-soft); }
.s-list__t { font-weight: 700; font-size: var(--fs-body); }
.s-list__d { grid-column: 2; font-size: var(--fs-small); color: var(--ink-soft); }
.s-sec--dark .s-list__d { color: rgba(250, 244, 234, 0.7); }

/* ---------- 7 Full-Bleed-Hoehepunkt ----------
   Ein einziges grosses Bild ueber die volle Breite mit einem Statement darauf.
   Bricht den Rhythmus und gibt dem Auge eine Pause. */

.s-full {
  position: relative;
  min-height: clamp(420px, 62vh, 720px);
  display: grid; align-items: center;
  overflow: hidden;
}
/* .shell traegt margin-inline:auto (style.css). In einem Grid-Container hebt ein
   auto-Rand das Strecken auf, das Item bekommt dann seine Inhaltsbreite und wird
   zentriert. Gemessen am 30.08.2026: die Ueberschrift begann dadurch bei 476px
   statt bei den 72px Gutter aller anderen Sektionen. Deshalb hier ausdruecklich
   auf volle Breite zwingen. */
.s-full > .shell { width: 100%; }
.s-full__img { position: absolute; inset: 0; }
.s-full__img img { width: 100%; height: 100%; object-fit: cover; }
.s-full::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 19, 17, 0.82) 0%, rgba(20, 19, 17, 0.52) 46%, rgba(20, 19, 17, 0.16) 100%);
}
.s-full__body { position: relative; z-index: 1; color: rgb(250, 244, 234); max-width: 52ch; }
.s-full__body h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.032em;
  margin: 0 0 18px; color: rgb(250, 244, 234);
}
.s-full__body p { font-size: var(--fs-lede); line-height: 1.55; color: rgba(250, 244, 234, 0.86); margin: 0; }

/* ---------- 8 Frequenz-Visual ----------
   Selbst gezeichnetes SVG statt Stockfoto: drei uebereinanderliegende
   Sinuskurven in verschiedenen Frequenzen, als Bild fuer die
   Frequenz-Folge-Reaktion, um die es in diesem Abschnitt inhaltlich geht.
   Kostet keine Credits und trifft das Thema genauer als jedes Foto. */

/* overflow:hidden an beiden Stellen: die Pfade laufen bewusst doppelt so weit wie der
   sichtbare Bereich (viewBox 1200, Pfadbreite 2400), damit die Drift-Animation nahtlos
   loopt. Sichtbar sein soll davon nur der Ausschnitt. */
/* Rechts und links ausblenden statt hart anzuschneiden: eine endlose Welle, die mitten
   in der Kurve an einer Containerkante endet, sieht nach Fehler aus (Befund Checker Jody,
   30.08.2026). */
.s-wave {
  position: relative; width: 100%; height: clamp(200px, 26vw, 340px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.s-wave svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.s-wave path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.s-wave__a { stroke: var(--gold); stroke-width: 2; opacity: 0.95; }
.s-wave__b { stroke: var(--gold-soft); stroke-width: 1.5; opacity: 0.6; }
.s-wave__c { stroke: rgba(230, 192, 134, 0.4); stroke-width: 1; }
@keyframes s-wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.s-wave__track { animation: s-wave-drift 22s linear infinite; }
.s-wave__track--slow { animation-duration: 34s; }
.s-wave__track--fast { animation-duration: 15s; }
/* Frequenzangaben unter den Kurven */
.s-freq {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(24px, 3vw, 40px);
}
/* Im Zitat-Raster stehen die drei Kacheln untereinander statt nebeneinander */
.s-quote__grid .s-freq { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.s-freq__item { border-top: 1px solid rgba(230, 192, 134, 0.28); padding-top: 16px; }
.s-freq__hz {
  font-size: var(--fs-h3); font-weight: 700; color: var(--gold-soft);
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.s-freq__t { font-size: var(--fs-small); color: rgba(250, 244, 234, 0.72); }

/* ---------- 9 Angebot ----------
   Preis gross, Garantie daneben, ein Knopf. Zweispaltig, damit rechts nichts
   leer bleibt. */

.s-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}
/* Die Ueberschrift haengt am Raster, nicht am Sektions-Modifier: die Schluss-Sektion
   benutzt .s-offer__grid, trug aber selbst kein .s-offer und fiel deshalb auf die
   Browser-Vorgabe von 25,5px zurueck, waehrend alle anderen H2 der Seite auf 51,84px
   stehen (gemessen von Checker Jody am 30.08.2026). Das betraf ausgerechnet den
   letzten Kaufaufruf der Seite. */
.s-offer h2,
.s-offer__grid h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 20px;
}
.s-offer__big {
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 700; line-height: 0.86; letter-spacing: -0.045em;
  color: var(--gold);
  margin: clamp(20px, 3vw, 36px) 0 6px;
}
.s-offer__sub { font-size: var(--fs-small); color: rgba(250, 244, 234, 0.72); margin: 0 0 clamp(24px, 3vw, 34px); }
/* Fuellt die Spaltenhoehe, statt rund 300px vor dem Sektionsende aufzuhoeren,
   waehrend links noch Preis und Knopf laufen (Befund Checker Jody, 30.08.2026). */
.s-guarantee {
  border: 1px solid rgba(230, 192, 134, 0.32);
  padding: clamp(22px, 2.6vw, 34px);
  background: rgba(250, 244, 234, 0.04);
  display: flex; flex-direction: column; justify-content: center;
}
.s-guarantee p { font-size: var(--fs-small); line-height: 1.55; color: rgba(250, 244, 234, 0.78); margin: 0; }
/* Zwei Klassen tief, weil .s-guarantee p (0,1,1) sonst gegen .s-guarantee__k (0,1,0)
   gewinnt und die grosse Zahl auf Fliesstextgroesse zusammenfaellt. Gemessen am
   30.08.2026: 16,8px statt der vorgesehenen rund 48px. */
.s-guarantee .s-guarantee__k {
  font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1;
  color: var(--gold-soft); letter-spacing: -0.03em; margin-bottom: 12px;
}
.s-guarantee__points { list-style: none; margin: 18px 0 0; padding: 0; }
.s-guarantee__points li {
  position: relative; padding-left: 26px; margin-top: 10px;
  font-size: var(--fs-small); line-height: 1.45; color: rgba(250, 244, 234, 0.78);
}
.s-guarantee__points li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}

/* ---------- 9b Fragen mit Kaufkasten ----------
   Die FAQ war in der ersten Fassung die einzige Sektion, die Alexanders Kernkritik
   unveraendert zeigte: Fragen links, rechts rund 430px leer (gemessen von Checker Jody,
   30.08.2026). Statt dort ein Bild hinzustellen steht jetzt der Kaufkasten daneben. Das
   ist die Stelle, an der die letzten Einwaende fallen, der Knopf gehoert genau dorthin.
   Er laeuft mit (sticky), solange die Fragen gelesen werden. */
.s-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.s-faq__aside {
  position: sticky; top: clamp(90px, 12vh, 130px);
  border: 1px solid var(--rule);
  background: var(--white);
  padding: clamp(24px, 2.8vw, 38px);
}
.s-faq__aside .s-price__num { font-size: clamp(2.4rem, 3.6vw, 3.2rem); color: var(--bordeaux); }
.s-faq__aside h3 { font-size: var(--fs-h3); margin: 0 0 10px; letter-spacing: -0.018em; }
.s-faq__aside p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
.s-faq__aside .btn { width: 100%; justify-content: center; text-align: center; }
.s-faq__points { list-style: none; margin: 20px 0 0; padding: 0; }
.s-faq__points li {
  position: relative; padding-left: 26px; margin-top: 10px;
  font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45;
}
.s-faq__points li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold-deep); font-weight: 700;
}

/* ---------- 10 Zitat ---------- */
/* Zweispaltig, damit rechts neben dem Zitat keine leere Flaeche steht (Befund Checker
   Jody, 30.08.2026: rund 440px leerer schwarzer Grund). Rechts stehen die drei
   Frequenz-Kacheln, die vorher darueber lagen. */
.s-quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(36px, 4.5vw, 64px);
}
.s-quote {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.28; letter-spacing: -0.02em;
  font-weight: 400; margin: 0;
}
.s-quote__src { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 18px; }
.s-sec--dark .s-quote__src { color: rgba(250, 244, 234, 0.6); }

/* ---------- 11 Responsive ----------
   Ein einziger Bruchpunkt fuer die Grossstruktur, ein zweiter fuer die
   Feinheiten. Wichtig: unter 1024px werden aus allen mehrspaltigen Rastern
   einspaltige Stapel, die Bilder bleiben dabei erhalten und verschwinden
   nicht, damit auch mobil keine reine Textwueste entsteht. */

@media (max-width: 1023px) {
  /* Ueberall minmax(0, 1fr) statt 1fr: eine reine 1fr-Spalte hat als Mindestbreite die
     Inhaltsbreite ihres breitesten Kindes und kann darunter nicht schrumpfen. Genau daran
     ist die erste Fassung bei 390px gescheitert. */
  .s-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .s-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
  .s-hero__cover { max-width: 460px; }
  .s-player__grid { grid-template-columns: minmax(0, 1fr); }
  .s-split { display: block; }
  .s-split__body,
  .s-split--flip .s-split__body { padding-inline: var(--gutter); }
  .s-split__media,
  .s-split--flip .s-split__media {
    min-height: clamp(260px, 52vw, 420px);
    margin-top: clamp(24px, 4vw, 40px);
  }
  .s-split--flip .s-split__media { margin-top: 0; margin-bottom: clamp(24px, 4vw, 40px); }
  .s-offer__grid { grid-template-columns: minmax(0, 1fr); }
  .s-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .s-faq__aside { position: static; }
  .s-quote__grid { grid-template-columns: minmax(0, 1fr); }
  .s-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-cell--w4, .s-cell--w5 { grid-column: span 3; }
  .s-cell--w6, .s-cell--w7, .s-cell--w8, .s-cell--w12 { grid-column: span 6; }
  .s-cell--tall { grid-row: auto; }
  .s-freq { grid-template-columns: 1fr; }
  .s-strip__grid { grid-template-columns: 1fr; }
  .s-strip__item { border-left: 0; border-top: 1px solid rgba(230, 192, 134, 0.22); padding-left: 0; }
  .s-strip__item:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  .s-ticks { grid-template-columns: minmax(0, 1fr); }
  .s-bento { grid-template-columns: minmax(0, 1fr); }
  .s-cell--w4, .s-cell--w5, .s-cell--w6,
  .s-cell--w7, .s-cell--w8, .s-cell--w12 { grid-column: span 1; }
  .s-cell--media { min-height: 200px; }
  .s-quote { max-width: none; }
  .s-track { padding: 14px 8px; gap: 12px; }
}

/* ---------- 12 Fussbereich und Kaufleiste ----------
   Rechtshinweis-Zeile: liegt zwischen der dunklen Schluss-Sektion und dem ebenfalls
   dunklen Footer. Ohne eigene Kante lief das ueber rund 800px als eine einzige schwarze
   Flaeche durch, die vorhandene Trennlinie in rgba(38,38,38,.14) ist auf diesem Grund
   unsichtbar (Befund Checker Jody, 30.08.2026). Genau dieser Gleichstand von letzter
   Sektion und Footer ist ein Fehler, den Alexander wiederholt geruegt hat. Jetzt eine
   goldene Haarlinie wie im Footer selbst. */
.s-legal {
  background: var(--black);
  border-top: 1px solid rgba(230, 192, 134, 0.28);
}
.s-legal p {
  font-size: var(--fs-micro);
  color: rgba(250, 244, 234, 0.62);
  text-align: center;
  padding-block: clamp(18px, 2vw, 26px);
  margin: 0;
}
.s-legal a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.s-legal a:hover { color: rgb(250, 244, 234); }

/* Mitlaufende Kaufleiste erst nach dem Hero: beim Laden lag sie bei 390px ueber dem
   Kaufknopf im Hero und schnitt ihn zur Haelfte ab (Befund Checker Jody). Der Schalter
   kommt aus main.js dieser Seite. Ohne Javascript bleibt die Leiste sichtbar, damit der
   Kaufweg in keinem Fall verloren geht. */
.js body.has-buybar .buybar {
  transform: translateY(115%);
  transition: transform 0.42s var(--ease);
}
.js body.has-buybar.buybar-on .buybar { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js body.has-buybar .buybar { transition: none; }
  .s-wave__track { animation: none; }
  .s-player__media img,
  .s-cell--media img,
  .s-split__media img { transition: none; }
}

/* ---------- 13 Verlaufskurve ----------
   Angelegt 31.08.2026 fuer meditation-mit-dem-gong.html, am selben Tag nach Jodys Befund
   grundlegend umgebaut. Baut die Grafik der alten Live-Seite nach, die den Verlauf der
   Gehirnwellen ueber die 40 Minuten zeigt (bewusst/beta, entspannt/alpha, meditativ/theta).
   Alexander dazu: "inhaltlich ist es total wichtig und spricht die faktenorientierten
   Menschen an". Das Original war grafisch schwach (graue Rasterlinien, systemfremde
   Schrift, Tippfehler "meditatitiv"), inhaltlich aber der beste Teil des Altmaterials.

   WARUM DIE BESCHRIFTUNG NICHT IM SVG STEHT: in der ersten Fassung lagen die Achsentexte
   als <text> im SVG. Da das SVG ueber die viewBox skaliert, schrumpfte die Schrift mit der
   Breite mit: gemessen 22px bei 1440, aber nur 11,8px bei 768 und 5,7px bei 390, also
   unlesbar (Befund Checker Jody, 31.08.2026). Jetzt tragen HTML-Elemente die Beschriftung,
   sie folgen damit der normalen Schriftskala und bleiben auf jedem Geraet lesbar. Im SVG
   stehen nur noch Linien und Punkte, gestreckt ueber preserveAspectRatio="none", die
   Strichstaerke haelt vector-effect="non-scaling-stroke" konstant.

   Die Datenpunkte sind aus dem Original abgelesen, nicht erfunden: Start bei beta, nach
   acht Minuten theta erreicht, dort gehalten bis Minute 39, danach Anstieg auf alpha.
   Von Checker Jody gegen die Originalgrafik nachgerechnet und bestaetigt. */
.s-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(12px, 1.6vw, 24px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
/* Die drei Ebenen-Beschriftungen sitzen auf den Linienhoehen des Diagramms: erste Zeile
   oben, letzte unten, mittlere dazwischen. Deshalb dieselbe Hoehe wie die Zeichenflaeche
   und space-between. */
/* Absolut auf die Linienhoehen gesetzt statt mit space-between verteilt. Die erste
   Fassung schob erste und letzte Zeile per translateY um eine halbe Zeilenhoehe nach
   aussen, dadurch sassen sie 15px (1440) bzw. 9,5px neben ihrer Linie, nur die mittlere
   stimmte (Befund Checker Jody, 31.08.2026). Die Ebenen liegen im SVG bei y=10, 100 und
   190 von 200, also bei 5, 50 und 95 Prozent der Zeichenflaeche. */
.s-chart__y {
  position: relative;
  height: clamp(190px, 24vw, 300px);
  text-align: right;
}
.s-chart__y > div {
  position: absolute; right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.s-chart__y > div:nth-child(1) { top: 5%; }
.s-chart__y > div:nth-child(2) { top: 50%; }
.s-chart__y > div:nth-child(3) { top: 95%; }
/* GEMESSENER FEHLER, 01.09.2026, behoben ohne Eingriff in die bestehenden Seiten.
   Die drei Beschriftungen sind `position: absolute` mit `right: 0`. Dadurch hat
   .s-chart__y KEINE Inhaltsbreite, die Grid-Spalte `auto` wird 0px breit, und die
   Beschriftungen wachsen nach LINKS aus ihrer Spalte heraus. Ein Ueberstand nach links
   erhoeht `scrollWidth` NICHT, deshalb faellt er durch die uebliche Overflow-Messung
   (clientWidth gegen scrollWidth) vollstaendig durch. Er ist nur zu finden, wenn man die
   linke Kante der Beschriftungen einzeln gegen 0 prueft.

   Gemessen im iframe (echte Layoutbreite, nicht --window-size) an allen vier Seiten:
     bei 1440px   "entspannt / alpha"            left = -1px    (alle Seiten, harmlos)
                  "tief entspannt / tiefes Alpha" left = -30px  (nur schnell-entspannen)
     bei 390px    "entspannt / alpha"            left = -49px   (alle Seiten)
                  "tief entspannt / tiefes Alpha" left = -78px  (nur schnell-entspannen)

   Die 1px auf non-sleep-deep-rest, meditation-mit-dem-gong und creative-sounds sind
   unsichtbar, die 49px bei 390px sind es NICHT. Alle drei Seiten sind aber von Alexander
   abgenommen und live, und der Bauplan verbietet die Aenderungswelle an abgenommenen
   Seiten. Deshalb wirkt die Korrektur NUR ueber die zusaetzliche Klasse
   `.s-chart--labels` und laesst die drei bestehenden Seiten bitgenau unveraendert. Der
   Befund zu 390px auf diesen drei Seiten ist an Alexander gemeldet, die Umstellung dort
   ist seine Entscheidung und kein stiller Nebeneffekt dieser Seite.

   min-width gibt der auto-Spalte eine echte Breite. Die Beschriftungen enden dann an
   deren rechter Kante, statt weit in den Gutter und aus dem Viewport zu laufen.
   Der Wert deckt die laengste Beschriftung dieser Seite ("tief entspannt", gemessen
   102px bei 16,8px Schriftgroesse) mit vier Pixel Luft.
   NACHGEMESSEN von Checker Jody, 01.09.2026: bei echten 390px ragt die laengste
   Beschriftung noch 5,7px ueber die linke Kante der .s-chart-Box hinaus, vorher waren es
   78px. Dieser Rest bleibt innerhalb der Polsterung der .shell, es ist im Bild nichts
   abgeschnitten, visuell gegengesehen. "Innerhalb des Rasters" waere also zu viel
   behauptet, richtig ist: innerhalb des sichtbaren Bereichs. */
.s-chart--labels .s-chart__y { min-width: 106px; }
@media (max-width: 560px) {
  /* Auf schmalen Schirmen zaehlt jeder Pixel der Zeichenflaeche. Die Fachbezeichnung ist
     dort schon auf 0.78rem verkleinert, damit wird die laengste Beschriftung schmaler. */
  .s-chart--labels .s-chart__y { min-width: 96px; }
}
.s-chart__y b {
  display: block; font-size: var(--fs-small); font-weight: 700; line-height: 1.15;
  color: rgba(250, 244, 234, 0.86);
}
.s-chart__y span {
  display: block; font-size: var(--fs-micro); line-height: 1.2;
  color: rgba(250, 244, 234, 0.45);
}
.s-chart__plot { position: relative; height: clamp(190px, 24vw, 300px); }
.s-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Die Kurve liegt in einer zweiten Zeichenflaeche darueber, damit sie einzeln freigelegt
   werden kann, ohne dass die Ebenenlinien mitwandern. */
.s-chart__fg { z-index: 1; }
.s-chart__grid { stroke: rgba(230, 192, 134, 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-chart__line {
  fill: none; stroke: var(--gold); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Die Datenpunkte liegen als HTML ueber der Zeichenflaeche, nicht als <circle> im SVG.
   Grund: preserveAspectRatio="none" streckt die x-Achse anders als die y-Achse, dadurch
   wurden aus Kreisen Ellipsen, gemessen 16,8 x 21,0px bei 1440 und 3,6 x 13,3px bei 390,
   also senkrechte Striche. vector-effect rettet nur die Strichstaerke, nicht die Geometrie.
   Zusaetzlich lag der Endpunkt genau auf dem viewBox-Rand und wurde zur Haelfte
   abgeschnitten (Befund Checker Jody, 31.08.2026). Als HTML bleiben sie auf jeder Breite
   rund und vollstaendig sichtbar. */
.s-chart__dots { position: absolute; inset: 0; pointer-events: none; }
.s-chart__dots i {
  position: absolute; display: block;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
}
/* Zeitachse unter der Zeichenflaeche, in der zweiten Rasterspalte */
.s-chart__x {
  grid-column: 2;
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(230, 192, 134, 0.4);
  margin-top: 10px; padding-top: 8px;
}
.s-chart__x span { font-size: var(--fs-micro); color: rgba(250, 244, 234, 0.5); font-variant-numeric: tabular-nums; }
.s-chart__cap {
  grid-column: 2; margin: 14px 0 0;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(250, 244, 234, 0.5);
  text-align: center;
}
/* Die Kurve zeichnet sich, sobald die Sektion eingeblendet wird. */
/* Die Kurve baut sich von links nach rechts auf, entlang der Zeitachse. Umgesetzt als
   einmalige Animation, NICHT als Uebergang zwischen zwei Zustaenden. Der Unterschied ist
   entscheidend fuer die Verlaesslichkeit: der Ruhezustand ist "vollstaendig sichtbar", die
   Animation ist nur ein Aufsatz darauf. Laeuft sie aus irgendeinem Grund nicht, faellt kein
   Inhalt weg. In der Fassung davor war es umgekehrt, der Ruhezustand war "verdeckt", und
   jedes Stolpern der Animation liess die Kurve halb oder ganz verschwinden.

   Der Weg dorthin ging ueber drei gescheiterte Anlaeufe, alle brachen die Linie vor ihrem
   Endpunkt ab oder liefen gar nicht an:
   1. stroke-dasharray mit festem Pixelwert (1400): die Pfadlaenge im viewBox-System ist
      1137, die gestreckte Linie auf dem Schirm aber 1496px bei 1440px Fensterbreite. Es
      fehlten die letzten rund 96px.
   2. stroke-dasharray mit pathLength="1": schlimmer, Abbruch bei rund drei Vierteln. Die
      Normierung rechnet im viewBox-System, vector-effect="non-scaling-stroke" rendert im
      Bildschirmsystem, das Verhaeltnis 1137 zu 1496 schlaegt voll durch.
   3. clip-path als Uebergang, auf dem SVG und auf einem HTML-Wrapper: laeuft nicht an, der
      Wert bleibt auf dem Startwert stehen. Im Browser einzeln nachgemessen.
   Beide sichtbaren Fehler hat Alexander am Screenshot entdeckt, 31.08.2026. */
.s-chart__fg {
  -webkit-mask-image: linear-gradient(to right, #000, #000);
          mask-image: linear-gradient(to right, #000, #000);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@keyframes s-chart-reveal {
  from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
  to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
.js [data-rv].in .s-chart__fg { animation: s-chart-reveal 2.6s var(--ease) 0.25s both; }
.js [data-rv] .s-chart__dots { opacity: 0; }
.js [data-rv].in .s-chart__dots { transition: opacity 0.5s var(--ease) 2.2s; opacity: 1; }
/* Auf schmalen Schirmen bleibt die Hauptbeschriftung auf Fliesstextgroesse, nur die
   Fachbezeichnung darunter wird kleiner. Die Zielgruppe ist 40 plus, unter 15px effektiv
   wird die Achse zur Zumutung, und genau daran ist die erste Fassung gescheitert. */
@media (max-width: 560px) {
  .s-chart { gap: 0 10px; }
  .s-chart__y span { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rv].in .s-chart__fg { animation: none; }
  .js [data-rv] .s-chart__dots { opacity: 1; }
}

/* ---------- 14 Hoerprobe mit nur einer Spur ----------
   Bei einem einzelnen Track ist die linke Spalte deutlich kuerzer als die rechte. Durch das
   Strecken auf gleiche Hoehe entstand rund 170px totes Weiss im Kasten (Befund Checker Jody,
   31.08.2026), also genau das, was dieses System vermeiden soll. Mit diesem Modifier richten
   sich beide Spalten oben aus und behalten ihre eigene Hoehe. */
/* Jodys Vorschlag vom 31.08.2026 umgesetzt: mit align-items:start schloss zwar der Kasten,
   die Leere wurde aber groesser statt kleiner, sie stand nur nicht mehr im Rahmen (gemessen
   410px hoher leerer Block unter der linken Spalte). Jetzt traegt die linke Spalte Player
   UND Hinweiskasten, das Bild rechts laeuft ueber die volle Hoehe. Damit schliessen beide
   Spalten. */
.s-player__grid--single { align-items: stretch; }
.s-player__grid--single .s-player__side { height: 100%; }
.s-player__grid--single .s-player__media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.s-player__grid--single .s-player__col {
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
}