:root {
  --cream: #f6f4ec;
  --cream-2: #fbfaf3;
  --forest: #2f3e34;
  /* War #6f7d70 und blieb mit 3,94:1 auf Creme unter der WCAG-Grenze von
     4,5:1 — der halbe Fliesstext der Seite steht in dieser Farbe.
     #5f6d62 liegt bei 4,95:1 und behält den ruhigen Grünstich. */
  --muted: #5f6d62;
  --green: #4e7a5e;
  --green-dark: #3f6b50;
  --sage: #8aa88f;
  /* --peach ist reine Dekoration (der Punkt in der Eyebrow-Zeile). */
  --peach: #eaa07f;
  /* Ein Fokusrahmen ist Bedienung, keine Dekoration, und braucht 3:1.
     Peach schaffte nur 1,94:1. #c26f47 liegt bei 3,37:1 — mit Abstand
     zur Grenze, damit ein späterer Feinschliff sie nicht sofort reisst. */
  --focus: #c26f47;
  --peach-soft: #f3c9b3;
  --white: #ffffff;
  --line: rgba(78, 122, 94, 0.16);
  --line-strong: rgba(78, 122, 94, 0.3);
  --shadow-sm: 0 12px 34px -24px rgba(47, 62, 52, 0.35);
  --shadow-lg: 0 28px 80px -42px rgba(47, 62, 52, 0.42);
  --radius-sm: 0.9rem;
  --radius-md: 1.4rem;
  --radius-lg: 2rem;
  --section-space: clamp(4.5rem, 8vw, 7.5rem);
  --content: 72rem;
  --reading: 45rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--forest);
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
audio:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

::selection {
  background: rgba(234, 160, 127, 0.38);
  color: var(--forest);
}

.shell {
  width: min(100% - 2.25rem, var(--content));
  margin-inline: auto;
}

.reading {
  width: min(100%, var(--reading));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section--soft {
  background: rgba(255, 255, 255, 0.5);
  border-block: 1px solid rgba(78, 122, 94, 0.08);
}

.section-kicker {
  margin: 0 0 0.9rem;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Deutlich kleiner als der Hero: Sonst tragen alle Abschnitte dasselbe
   Gewicht, und der Blick findet keinen Anfang mehr. */
.section-heading {
  max-width: 15ch;
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.95rem, 3.6vw, 3.3rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-kicker--center {
  text-align: center;
}

.section-intro {
  max-width: 41rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: clamp(1.03rem, 2vw, 1.2rem);
}

.section-intro--center {
  margin-inline: auto;
  text-align: center;
}

.text-accent {
  color: var(--green);
}

.text-warm {
  color: #c86f47;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(78, 122, 94, 0.12);
  background: rgba(246, 244, 236, 0.94);
  backdrop-filter: blur(16px);
}

.header-row {
  min-height: 4.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand img {
  width: auto;
  height: 2.25rem;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.desktop-nav a,
.mobile-menu a {
  text-decoration: none;
}

.desktop-nav a:hover,
.mobile-menu a:hover {
  color: var(--forest);
}

.header-buy {
  min-height: 2.8rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
}

.mobile-menu-button {
  width: 2.9rem;
  height: 2.9rem;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.mobile-menu-button svg {
  width: 1.25rem;
}

.mobile-menu {
  padding: 0 1.1rem 1rem;
  border-top: 1px solid var(--line);
}

.mobile-menu-inner {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.65rem;
}

.mobile-menu a {
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem;
  color: var(--forest);
  font-weight: 850;
}

.mobile-menu a:hover {
  background: var(--white);
}

/* Die kleinere Überschrift liess oben Leerraum entstehen. Der Preis und
   die Knöpfe gehören über die Falte, nicht knapp darunter. */
.hero {
  position: relative;
  padding: clamp(2.4rem, 4.4vw, 4rem) 0 clamp(3.6rem, 6vw, 5.6rem);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 15% 18%, rgba(138, 168, 143, 0.22), transparent 32rem),
    radial-gradient(circle at 88% 70%, rgba(234, 160, 127, 0.16), transparent 25rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(22rem, 0.94fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}

.eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--peach);
}

/* Die Überschrift lief bis 6,6rem und drückte Preis und Knöpfe unter die
   Falte. Kleiner heisst hier: mehr Verkaufsargumente ohne Scrollen. */
.hero h1 {
  max-width: 24ch;
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(2.2rem, 4.1vw, 3.6rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

/* Die H1 trägt seit dem 2026-08-29 zwei Teile: das Ziel und den Aufwand.
   Beide gleich gross gesetzt ergaben auf 1600 px sechs Zeilen und 352 px
   Höhe — der Kaufknopf rutschte unter die Falte, also genau der Fehler,
   den der Kommentar darüber schon einmal beschreibt.

   Der Zusatz steht deshalb kleiner und auf eigener Zeile. Das ändert den
   Satz nicht, nur sein Gewicht: Das Ziel trägt die Überschrift, der
   Aufwand beantwortet sie. Gemessen mit scripts/pruefe_hero_layout.js. */
.hero-h1-zusatz {
  display: block;
  margin-top: 0.38em;
  max-width: 30ch;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.hero-copy {
  max-width: 38rem;
  margin: 1.65rem 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.hero-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem 1rem;
  margin-top: 1.8rem;
}

.hero-price {
  font-family: "Fraunces", serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* „Ab" ist die Einordnung, nicht der Preis — es tritt bewusst zurück. */
.hero-price-prefix {
  font-size: 0.62em;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.hero-price-note {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
}

/* Ruhig gesetzt, nicht als Warnkasten. Ein roter Rahmen würde aus einer
   ehrlichen Auskunft eine Abschreckung machen. */
/* Genau die Breite des Einleitungsabsatzes darüber (41rem). Auf 46rem stand
   der Kasten neben dem Raster, über die volle Containerbreite liefen die
   Zeilen auf rund 150 Zeichen — beides bricht den Rhythmus ausgerechnet
   direkt vor der Kaufentscheidung. */
.grenzen-hinweis {
  width: min(100%, 41rem);
  margin: 2.4rem auto 0;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--sage);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: left;
}

/* Der Wendesatz benennt, was der Leser selbst noch nicht formuliert hat.
   Er steht im selben Absatz, damit er als Schluss der Szene gelesen wird
   und nicht als neue Behauptung. */
.hero-wende {
  display: block;
  margin-top: 0.7rem;
  color: var(--forest);
  font-weight: 800;
}

/* Der zweite Absatz nennt das Angebot. Er steht bewusst näher am ersten,
   damit Szene und Antwort als ein Gedanke gelesen werden. */
.hero-copy--angebot {
  margin-top: 0.9rem;
}

/* Die Hörprobe stand als zweiter, gleich grosser Knopf neben dem Kaufweg.
   Zwei gleichrangige Knöpfe teilen die Aufmerksamkeit und lassen den Blick
   raten, was gemeint ist. Als Textlink bleibt sie erreichbar und tritt
   trotzdem hinter den einen klaren Weg zurück. */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}

.hero-link:hover {
  color: var(--forest);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.7rem;
}

.button {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.78rem 1.3rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 16px 36px -20px rgba(63, 107, 80, 0.82);
}

.button--primary:hover {
  background: var(--green-dark);
}

.button--secondary {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.58);
  color: var(--forest);
}

.button--secondary:hover {
  border-color: var(--green);
  background: var(--white);
}

.button--dark {
  background: var(--forest);
  color: var(--white);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  margin: 1.5rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  list-style: none;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.trust-row li::before {
  content: "✓";
  color: var(--green);
  font-weight: 1000;
}

.hero-media {
  position: relative;
}

.hero-picture {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.8rem, 4vw, 3rem);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Das Bild war höher als die Textspalte. Weil beide Spalten mittig
   ausgerichtet sind, schob es den Text nach unten — und mit ihm den
   Kaufknopf unter die Falte. Ein flacheres Format bringt ihn zurück. */
.hero-picture img {
  width: 100%;
  /* Ohne height:auto bleibt das height-Attribut aus dem HTML (1024) eine
     feste Höhe — und `aspect-ratio` wird stillschweigend ignoriert. Genau
     daran ist die erste Korrektur wirkungslos verpufft. */
  height: auto;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
}

.hero-note {
  position: absolute;
  right: -1rem;
  bottom: 1.4rem;
  max-width: 12rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
}

.hero-note strong {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 1.55rem;
  line-height: 1;
}

.hero-note span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.benefit-card {
  min-height: 12rem;
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-sm);
}

.benefit-number {
  display: block;
  margin-bottom: 1.7rem;
  color: var(--sage);
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
}

.benefit-card h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.55rem;
  font-weight: 570;
  line-height: 1.12;
}

.benefit-card p {
  margin: 0.7rem 0 0;
  color: var(--muted);
}

.audio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}

/* Die Bedienzeile sitzt am unteren Kartenrand. Vorher hielt eine feste
   Mindesthöhe am Beschreibungstext den Platz frei — bei einzeiligem Text
   blieb darunter ein Drittel der Karte leer. */
.audio-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.audio-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.audio-card h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.55rem;
  font-weight: 570;
}

.audio-card small {
  flex: none;
  color: var(--sage);
  font-weight: 900;
}

.audio-card p {
  margin: 0.55rem 0 1.4rem;
  color: var(--muted);
}

.audio-card audio {
  width: 100%;
}

/* Eigene Bedienung statt der grauen Systemleiste. Sie erscheint erst, wenn
   das Skript sie übernommen hat — vorher steht die native Leiste bereit. */
/* Knopf, Balken und Zeit stehen in einer Zeile auf derselben optischen
   Achse. Lagen Balken und Zeit übereinander, schwebte der Balken sichtbar
   über der Mitte des runden Knopfes. */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
}

.player-knopf {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  transition: background 0.2s ease;
}

.player-knopf:hover {
  background: var(--green-dark);
}

.player-knopf svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Ein Knopf zeigt immer nur eines: abspielen oder anhalten. */
.player-knopf .player-pause,
.player.is-playing .player-knopf .player-play {
  display: none;
}

.player.is-playing .player-knopf .player-pause {
  display: block;
}

.player-spur {
  display: contents;
}

.player-fortschritt {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(78, 122, 94, 0.16);
  cursor: pointer;
  overflow: hidden;
}

.player-fortschritt span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}

.player-zeit {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.safety-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Acht Zeilen für acht Bausteine je Karte: Label, Name, Preis, Meta,
   Merkmalsliste, Workbook, Knopf, Link. Die Karten übernehmen dieses
   Raster per `subgrid`, damit jede Zeile über alle drei Karten hinweg auf
   derselben Höhe bricht. Vorher richtete `align-items: stretch` nur die
   Aussenkanten aus — innen liefen die Zeilen um bis zu 25 px auseinander,
   sobald eine Aufzählung anders umbrach. */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  align-items: stretch;
  gap: 1rem;
  margin-top: 3rem;
}

.package-card {
  position: relative;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  align-content: start;
  padding: clamp(1.4rem, 2.7vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Das Anheben um 0.75rem hob die Empfehlung hervor — und liess zugleich
   Workbook-Kasten, Knopf und Link dieser Karte 12 px über denen der beiden
   Nachbarn stehen. Drei Knöpfe nebeneinander, die nicht auf einer Linie
   sitzen, lesen sich als Layoutfehler. Rahmen, Verlauf und der kräftigere
   Schatten heben genug hervor. */
.package-card.is-recommended {
  border-color: var(--green);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(78, 122, 94, 0.08), var(--white) 35%);
  box-shadow: 0 30px 70px -42px rgba(47, 62, 52, 0.75);
}

/* Das Etikett stand im Textfluss und schob den Inhalt der dritten Karte
   um rund acht Pixel nach unten. Aus dem Fluss genommen sitzt es über der
   Kartenkante, ohne die Zeilen der Nachbarkarten zu verschieben. */
.recommendation {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: max-content;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.package-card h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 2rem;
  font-weight: 600;
}

.package-price {
  margin-top: 0.25rem;
  font-family: "Fraunces", serif;
  font-size: 3rem;
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1;
}

.package-meta {
  margin: 0.35rem 0 1.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.package-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.92rem;
  list-style: none;
}

.package-list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.5rem;
}

.package-list li::before {
  content: "✓";
  color: var(--green);
  font-weight: 1000;
}

/* Die drei Karten haben unterschiedlich lange Merkmalslisten. Ohne diese
   Regel brechen Workbook-Kasten und Knopf auf drei verschiedenen Höhen —
   nebeneinander gestellte Karten sollen an denselben Linien brechen. */
.package-list {
  flex: 1;
}

.package-bonus {
  margin: 1.2rem 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(234, 160, 127, 0.35);
  border-radius: 0.9rem;
  background: rgba(243, 201, 179, 0.2);
  font-size: 0.85rem;
  font-weight: 900;
}

.package-card .button {
  width: 100%;
  margin-top: auto;
}

.package-link {
  display: block;
  margin-top: 0.75rem;
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

/* Die Tabelle bekommt die Breite der Textspalte statt der vollen
   Kartenreihe — randbreit gelesen fiel sie aus dem Rhythmus der Seite. */
.matrix-wrap {
  width: min(100%, 56rem);
  margin-inline: auto;
}

.payment-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.2rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.matrix-wrap {
  margin-top: 2.4rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.matrix-scroll {
  overflow-x: auto;
}

/* Die feste Mindestbreite von 42rem gilt nur dort, wo sie hineinpasst.
   Auf dem Handy machte sie aus der Tabelle eine Spalte mit elf leeren
   Zeilen — die Zahlen lagen unsichtbar rechts daneben. Die Aufhebung steht
   weiter unten im 760px-Block und muss hinter dieser Regel bleiben, sonst
   gewinnt hier die spätere Deklaration. */
#matrix {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  /* Lag bei 0.88rem und damit unter jedem anderen Fliesstext der Seite —
     die Tabelle fiel aus der Schriftskala. */
  font-size: 0.95rem;
}

/* Die Zeilen standen bei 0.75rem und damit viel enger als alles darüber —
   nach den luftigen Preiskarten las sich die Tabelle wie ein Fremdkörper
   aus einem anderen Entwurf. Zwei Prüfläufe haben das unabhängig genannt. */
#matrix th,
#matrix td {
  padding: 1.05rem 0.9rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

#matrix thead th {
  border-top: 0;
  background: var(--cream-2);
  color: var(--forest);
}

/* Ohne feste Breite der Zahlenspalten zog die Themenspalte den ganzen
   Rest an sich, und zwischen Name und erster Zahl lagen mehrere hundert
   Pixel Leere — genau dort verliert der Blick die Zeile.
   ⚠️ Nur ab Tabletbreite: Auf 390 px belegen drei Spalten à 8.5rem mehr
   Platz als vorhanden, die Themenspalte wird auf ein Zeichen gequetscht
   und jeder Name bricht buchstabenweise um. Genau das ist am 2026-08-28
   passiert — die Seite wuchs auf 18.000 px Höhe. */
@media (min-width: 761px) {
  #matrix thead th:not(:first-child) {
    width: 8.5rem;
  }
}

/* Elf gleich schwere Zeilen ohne Gruppierung sind schwer zu verfolgen.
   Der Wechsel ist so leise gewählt, dass er die ruhige Fläche nicht stört. */
#matrix tbody tr {
  background: var(--white);
}

#matrix tbody tr:nth-child(even) {
  background: #f7f8f6;
}

/* Beim seitlichen Wischen muss die Themenspalte stehen bleiben — sonst
   stehen die Zahlen ohne Beschriftung da und sagen nichts mehr aus. */
/* `background: inherit` statt eines festen Weiss: Sonst deckt die
   feststehende Spalte den Zeilenwechsel darunter zu und die erste Spalte
   bliebe als einzige ungestreift. */
#matrix th:first-child,
#matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  text-align: left;
}

#matrix thead th:first-child,
#matrix tfoot th:first-child,
#matrix tfoot td:first-child {
  background: var(--cream-2);
}

#matrix tfoot {
  background: var(--cream-2);
  font-weight: 950;
}

.details-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.detail-stack {
  display: grid;
  gap: 0.8rem;
}

.detail-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.detail-panel summary,
.catalog-shell > summary {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.detail-panel summary::-webkit-details-marker,
.catalog-shell > summary::-webkit-details-marker {
  display: none;
}

.detail-panel summary::after,
.catalog-shell > summary::after {
  content: "+";
  color: var(--green);
  font-family: "Fraunces", serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms ease;
}

.detail-panel[open] summary::after,
.catalog-shell[open] > summary::after {
  transform: rotate(45deg);
}

.detail-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted);
}

.step-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
}

.step-list strong {
  display: block;
  color: var(--forest);
}

.step-number {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(78, 122, 94, 0.1);
  color: var(--green-dark);
  font-family: "Fraunces", serif;
  font-weight: 700;
}

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

.category-card {
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
}

.category-card img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 0.75rem;
  object-fit: cover;
}

.category-card strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.2;
}

.category-card span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.editorial-picture {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.editorial-picture img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.fact {
  padding-top: 0.8rem;
  border-top: 2px solid var(--line-strong);
}

.fact strong {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
}

.fact span {
  color: var(--muted);
  font-size: 0.8rem;
}

.workbook-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.workbook-copy ul {
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.workbook-copy li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.55rem;
}

.workbook-copy li::before {
  content: "✓";
  color: var(--green);
  font-weight: 1000;
}

.workbook-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.workbook-page {
  margin: 0;
  scroll-snap-align: center;
}

.workbook-page div {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.workbook-page img {
  width: 100%;
  height: auto;
}

.workbook-page figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  text-align: center;
}

.catalog-shell {
  margin-top: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.catalog-shell > summary {
  padding: 1.3rem clamp(1.2rem, 3vw, 2rem);
  font-family: "Fraunces", serif;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 570;
}

.catalog-content {
  padding: 0 clamp(1.2rem, 3vw, 2rem) 2rem;
}

.catalog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.package-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-button {
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.filter-button[aria-pressed="true"] {
  border-color: var(--green);
  background: rgba(78, 122, 94, 0.1);
  color: var(--green-dark);
}

.search-field {
  min-height: 2.85rem;
  width: min(100%, 19rem);
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--forest);
}

.catalog-summary {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 850;
}

.session-worlds {
  display: grid;
  gap: 0.55rem;
}

.world-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
}

.world-panel summary {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.world-panel summary::-webkit-details-marker {
  display: none;
}

.world-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.world-title img {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: 0.65rem;
  object-fit: cover;
}

.world-title strong,
.world-title small {
  display: block;
}

.world-title strong {
  line-height: 1.2;
}

.world-title small,
.world-count {
  color: var(--muted);
  font-size: 0.8rem;
}

.world-count {
  flex: none;
  font-weight: 900;
}

.session-list {
  margin: 0;
  padding: 0 0.9rem 0.7rem;
  list-style: none;
}

.session-list li {
  min-height: 2.6rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}

.session-number {
  color: var(--sage);
  font-family: "Fraunces", serif;
  text-align: right;
}

/* Die Paketmarke stand bei 0.67rem = 10,7 px. Sie sagt dem Besucher, in
   welchem Paket eine Session steckt — das ist Kaufinformation, nicht
   Kleingedrucktes. */
.package-mark {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

.studio-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(110deg, rgba(78, 122, 94, 0.1), rgba(255, 255, 255, 0.82) 55%, rgba(234, 160, 127, 0.12));
  box-shadow: var(--shadow-sm);
}

.studio-card h2 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.studio-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.8rem 1.4rem;
  margin: 1.2rem 0 0;
}

.studio-fakten dt {
  color: var(--green-dark);
  font-weight: 900;
}

.studio-fakten dd {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
}

.studio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.studio-tag {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

.faq-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 2.5rem;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
}

.faq-item summary {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--green);
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 1rem 1rem;
  color: var(--muted);
}

.final-cta {
  padding-block: var(--section-space);
  text-align: center;
}

.final-cta .section-heading {
  margin-inline: auto;
}

.final-cta .section-intro {
  margin-inline: auto;
}

.final-cta .actions {
  justify-content: center;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--cream-2);
}

.footer-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 2rem 4rem;
  padding-block: 2.4rem 1.5rem;
}

.footer-main img {
  width: auto;
  height: 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem 1.2rem;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.footer-meta {
  padding-bottom: 2.2rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.footer-meta p {
  margin: 0.4rem 0 0;
}

.sticky-buy {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  transform: translateY(110%);
  transition: transform 220ms ease;
}

.sticky-buy.is-visible {
  transform: translateY(0);
}

body.mp-consent-offen #sticky-buy {
  display: none;
}

.sticky-buy-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -16px 36px -28px rgba(47, 62, 52, 0.65);
  backdrop-filter: blur(16px);
}

.sticky-price {
  line-height: 1.1;
}

.sticky-price small,
.sticky-price strong {
  display: block;
}

/* Steht in der mitlaufenden Kaufleiste und nennt das Paket zum Preis.
   Wer den Namen nicht lesen kann, weiss nicht, was er kauft. */
.sticky-price small {
  color: var(--muted);
  font-size: 0.8rem;
}

.sticky-price strong {
  font-family: "Fraunces", serif;
  font-size: 1.25rem;
}

.sticky-buy .button {
  min-height: 2.9rem;
  padding: 0.65rem 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 960px) {
  .hero-grid,
  .editorial-grid,
  .workbook-layout,
  .details-intro {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 42rem;
  }

  .hero-media {
    width: min(100%, 39rem);
    margin-inline: auto;
  }

  .editorial-picture {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .details-intro {
    gap: 2.2rem;
  }

  .workbook-layout {
    gap: 2.4rem;
  }
}

@media (max-width: 800px) {
  .workbook-strip {
    display: flex;
    gap: 0.85rem;
    padding: 0.3rem 0 0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .workbook-page {
    flex: 0 0 min(82vw, 36rem);
  }
}

@media (min-width: 761px) {
  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 5.3rem;
  }

  .desktop-nav,
  .header-buy {
    display: none;
  }

  .mobile-menu-button {
    display: grid;
  }

  .hero-grid {
    gap: 2.6rem;
  }

  .hero h1 {
    max-width: 16ch;
  }

  .benefit-grid,
  .audio-grid,
  .package-grid,
  .fact-grid {
    grid-template-columns: 1fr;
  }

  /* Die Tabelle passt hier vollständig hinein: engere Spalten, umbrechende
     Themennamen. Ein Wischhinweis wäre nur die Entschuldigung dafür, dass
     elf Zeilen leer aussehen. */
  #matrix {
    min-width: 0;
    font-size: 0.8rem;
  }

  #matrix th,
  #matrix td {
    padding: 0.55rem 0.3rem;
  }

  #matrix th:first-child,
  #matrix td:first-child {
    /* `overflow-wrap: anywhere` stand hier und brach die Themennamen
       buchstabenweise um, sobald die Spalte zu schmal wurde. Silben-
       trennung reicht — und eine Mindestbreite verhindert, dass die
       Spalte überhaupt so eng wird. */
    min-width: 7.5rem;
    hyphens: auto;
  }

  .benefit-card {
    min-height: 0;
  }

  .benefit-number {
    margin-bottom: 1rem;
  }

  .package-card.is-recommended {
    transform: none;
  }

  .recommendation {
    margin-top: -2.45rem;
  }

  .workbook-strip {
    display: flex;
    gap: 0.85rem;
    padding: 0.3rem 0 0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .workbook-page {
    flex: 0 0 min(82vw, 21rem);
  }

  .studio-card {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .studio-card .button {
    width: 100%;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .sticky-buy {
    display: block;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(100% - 1.4rem, var(--content));
  }

  .section {
    padding-block: clamp(4rem, 16vw, 5rem);
  }

  .hero {
    padding-top: 2.6rem;
  }

  .hero h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.5rem);
  }

  .hero-note {
    right: 0.6rem;
    bottom: 0.6rem;
  }

  .actions,
  .actions .button {
    width: 100%;
  }

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

  .catalog-tools,
  .search-field {
    width: 100%;
  }

  .session-list li {
    grid-template-columns: 2rem 1fr;
  }

  .package-mark {
    grid-column: 2;
    justify-self: start;
  }

  .world-title small {
    display: none;
  }

  .world-count {
    max-width: 4.5rem;
    text-align: right;
  }
}

/* Auf dem Handy trägt jede Zeile mehr Gewicht — dort steht der Besucher
   mit einer Hand am Gerät. Was am Schreibtisch als feines Kleingedrucktes
   funktioniert, ist auf 390 px schlicht nicht mehr lesbar.
   Untergrenze: 0.85rem, das sind 13,6 px. */
@media (max-width: 560px) {
  .section-kicker,
  .eyebrow,
  .hero-note span,
  .recommendation,
  .package-label,
  .package-meta,
  .payment-strip,
  .category-card span,
  .fact span,
  .workbook-page figcaption,
  .world-count,
  .studio-tag,
  .footer-meta,
  .package-mark,
  .sticky-price small {
    font-size: 0.85rem;
  }

  /* Der Cookie-Hinweis wird von assets/consent.js erzeugt und von der
     Live-Seite mitbenutzt. Deshalb nur hier zurückdrängen, statt die
     gemeinsame Datei anzufassen. */
  body .mp-consent__text {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  body .mp-consent__inner {
    gap: 9px;
    padding: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}