/* ============================================================
   SEITE — Sektionslayout dieser Landingpage.

   Hier lebt alles, was diese eine LP ausmacht: Hero, Sektionen,
   Karten, Raster. Wird pro LP neu geschrieben.

   Was hier NICHT hingehoert: Farbwerte als Literal (nimm die Tokens
   aus kern.css), Knopfstile, Modal- oder Dialogmechanik. Wenn du hier
   etwas baust, das jede LP braeuchte, gehoert es in den Kern.

   Uebernommen von freebie-vertriebsguide/ und dort, wo die Seiten sich
   unterscheiden, angepasst: statt der fuenf Bausteine und der
   Inhaltskarten traegt diese Seite den Lehrplan (.lehrplan, .modul).
   ============================================================ */

/* --- aus styles.css --- */

.gold { color: var(--gold); }

/* ============================================
   HERO
   ============================================ */
.hero {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
}

/* Zeichenregen. Nur ab 901px, kern.js steigt darunter aus — das Canvas
   bleibt dann schlicht leer. 0.18 ist der Katalogwert: darueber liest es
   sich als Muster statt als Atmosphaere. */
.hero__matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
}

/* Die Aura: vier goldene Radialflaechen, Deckkraft zwischen 0.05 und 0.20.
   Sie laeuft als einziger autonomer Effekt auch auf Mobil. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(201, 168, 76, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 60%, rgba(201, 168, 76, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Die Drift. 20s, nicht 8s: bei 8s liest es sich als Pulsieren, bei 20s
   als Licht das sich bewegt. */
.hero__bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(201, 168, 76, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 20%, rgba(201, 168, 76, 0.05) 0%, transparent 50%);
  animation: heroShimmer 20s ease-in-out infinite alternate;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* Logo statt der frueheren Augenbraue. Bewusst klein: die Datei traegt eine
   cremefarbene Scheibe hinter dem Mandala und waere auf dem fast schwarzen
   Hero sonst die hellste und groesste Flaeche ueber der Headline. Bei 60px
   liest sie sich als Siegel. Ausserhalb des Kreises ist die Datei echt
   transparent — es entsteht kein Kasten. */
.hero__logo {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

/* Hiess frueher .hero__date-info und trug Datum, Ort und Knappheit in einer
   Zeile. Datum und Ort stehen jetzt in .hero__format direkt unter der H1 —
   hier bleibt nur die Platzzahl. */
.hero__knappheit {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.1vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 28px;
}

.hero__headline em {
  font-style: italic;
  color: var(--gold);
}

/* --- Hero-Video: Hintergrundmodus ---
   Das Video laeuft stumm in Schleife, unser eigener Knopf liegt
   flaechendeckend darueber. pointer-events:none haelt Vimeos
   Bedienelemente unerreichbar — ohne Hover blenden sie sich nie ein, und
   der einzige Weg hinein ist unser Knopf. Erst --ton gibt sie frei. */
/* Der Videokasten. Festes Seitenverhaeltnis, damit beim Nachladen des
   iframes nichts springt. Solange data-vimeo leer ist, laedt kern.js
   nichts und es bleibt bei der dunklen Flaeche mit dem Play-Kreis. */
.hero__video {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
}

.hero__video[hidden] { display: none; }

.hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Hero-Video: Hintergrundmodus ---
   Das Video laeuft stumm in Schleife, unser eigener Knopf liegt
   flaechendeckend darueber. pointer-events:none haelt Vimeos
   Bedienelemente unerreichbar — ohne Hover blenden sie sich nie ein, und
   der einzige Weg hinein ist unser Knopf. Erst --ton gibt sie frei. */
.hero__video--laeuft iframe { pointer-events: none; }

.hero__video--ton iframe { pointer-events: auto; }

.hero__video-replay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero__video-replay-btn {
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero__video-replay-btn:hover {
  transform: scale(1.12);
  color: var(--gold-light);
}

.hero__video-replay-btn svg {
  width: 100%;
  height: 100%;
}

/* Problem und Fuer-wen lagen auf Hintergrundfotos. Die beiden Dateien waren
   die PLATZHALTER aus dem Kern: schraffierte Flaechen mit der Aufschrift
   "HINTERGRUND PROBLEM 1920 x 1280" mitten im Bild. Auf der Seite stand
   damit das Wort PROBLEM sichtbar im Hintergrund.

   Fuer diese Seite gibt es keine echten Fotos, und sie braucht auch keine:
   ein E-Book hat keinen Seminarraum. Beide Sektionen tragen jetzt dieselben
   goldenen Radialverlaeufe wie die uebrigen. Wer spaeter doch ein Foto
   einsetzen will, holt das Verfahren aus seite.css der Money-Mind-Seite. */
.problem {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--black);
  position: relative;
}

.fuer-wen {
  background:
    radial-gradient(ellipse 65% 55% at 5% 5%,   rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

.fw__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.fw-card {
  border-radius: var(--radius-lg);
  padding: 38px 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  max-width: 100%;
}

/* Die Ja-Karte traegt einen goldenen Rahmen — sie ist die Spalte,
   in der sich der Leser wiedererkennen soll. */
.fw-card--yes {
  border-color: rgba(201, 168, 76, 0.34);
  background: rgba(201, 168, 76, 0.035);
}

.fw-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
  margin-bottom: 10px;
}

.fw-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

/* Punkte durch feine Linien getrennt statt als einzelne Boxen */
.fw-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.fw-item:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

/* Icon im runden Badge */
.fw-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 168, 76, 0.14);
  color: var(--gold);
  margin-top: 1px;
}

.fw-item__icon svg {
  width: 15px;
  height: 15px;
}

.fw-item__text {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
  min-width: 0;
}

/* Nein-Spalte: gedaempft statt golden */
.fw-card__list--no .fw-item__icon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-dim);
}

.fw-card__list--no .fw-item__text {
  color: var(--text-muted);
}

/* Schlusssatz unter den Karten */
.fw-conclusion {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--gold);
  text-align: center;
  max-width: 720px;
  margin: 52px auto 0;
  line-height: 1.4;
}

.fw-card {
  display: flex;
  flex-direction: column;
}

.fw-card__list {
  align-self: stretch;
}



/* ============================================
   DARKO
   ============================================ */
.darko-section {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--black);
  position: relative;
}


.darko__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.darko__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.darko__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.5) 0%, transparent 50%);
  pointer-events: none;
}

.darko__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) brightness(0.9);
  transition: filter 0.5s ease;
}

.darko__img:hover img {
  filter: grayscale(0%) brightness(1);
}

.darko__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.1;
}

.darko__role {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}

.darko__bio {
  font-size: 0.975rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.form__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

@media (max-width: 900px) {
.darko__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

.darko__img {
    max-width: 340px;
    margin: 0 auto;
  }

.darko__content {
    text-align: left;
  }

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

@media (max-width: 480px) {
.hero {
    padding: 48px 0 40px;
  }

.hero__headline {
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
  }

@media (max-width: 350px) {
.hero__headline { font-size: 1.95rem; }
}

.fw-card {
    padding: 28px 22px;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Jede Linie startet unsichtbar und wird vom Beobachter in seite.js per
   .section-divider-visible eingeblendet. Wer hier eine Sektion vergisst,
   deren Linie blitzt beim Laden auf; wer sie in seite.js vergisst, deren
   Linie bleibt fuer immer unsichtbar. Beide Listen zusammen pflegen. */
.problem::before,
.lehrplan::before,
.darko-section::before,
.fuer-wen::before,
.final-cta::before {
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* ============================================
   TRENNLINIEN
   Jede Sektion traegt ihre Linie NUR OBEN. Damit kann nie eine untere auf
   eine obere treffen und zwei 1px-Linien im Abstand von 1px stehen, was
   wie ein Fehler aussieht. Eine Sonderregel pro Nachbarpaar entfaellt, und
   mit ihr die Pflicht, sie bei jeder Umstellung nachzuziehen.

   Jede Sektion hier steht auch in der opacity-0-Liste weiter unten UND in
   trennlinien in seite.js. Fehlt sie in einer der beiden, blitzt die Linie
   beim Laden auf oder bleibt fuer immer unsichtbar.
   ============================================ */
.problem::before,
.lehrplan::before,
.darko-section::before,
.fuer-wen::before,
.final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(201, 168, 76, 0.55) 30%,
    rgba(201, 168, 76, 0.55) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
}

/* Weiche Variante fuer das Beiwerk: Person und Abschluss tragen den
   Argumentationsbogen nicht. */
.darko-section::before {
  background: linear-gradient(to right,
    transparent,
    rgba(201, 168, 76, 0.45) 30%,
    rgba(201, 168, 76, 0.45) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), 0 0 24px rgba(201, 168, 76, 0.12);
}



/* --- aus styles-moneymind.css --- */

/* --- Hero: Format-Zeile ---
   Sagt, dass hier eine Veranstaltung stattfindet. Optik wie .section__eyebrow,
   aber ohne dessen Untermarge und mit erlaubtem Umbruch: auf 320px passt
   "Tagesseminar in Wien · 17. Oktober 2026 · 09:00–17:00 Uhr" nicht in eine
   Zeile, und ein nowrap wuerde sie aus der Seite treiben. */
.hero__format {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  /* letter-spacing haengt hinter dem letzten Buchstaben ein Leerzeichen an —
     text-indent gleicht das aus, sonst sitzt die zentrierte Zeile zu weit links. */
  text-indent: 0.16em;
  line-height: 1.6;
  margin: -8px auto 26px;
  max-width: 620px;
}


/* --- Hero: die drei Punkte ---
   Ersetzen den fuenfzeiligen Fliesstext. Der Block ist zentriert, die Punkte
   selbst sind linksbuendig: zentrierter Flattersatz ueber mehrere Zeilen
   liest sich schlecht, und die Haken muessen untereinander stehen. */
.hero__punkte {
  list-style: none;
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__punkte li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

.hero__punkte li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}

/* Der Aufhaenger aus der Anzeige, direkt unter der Headline. Groesser als
   die Punkte darunter: er traegt den Gedanken, die Punkte belegen ihn nur. */
.hero__hook {
  max-width: 620px;
  margin: 22px auto 30px;
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.6;
  color: var(--text);
}

/* Einleitung der Problem-Sektion, zwischen Kopf und Karten. */
.pr-lead {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: -14px auto 40px;
  max-width: 640px;
}

/* Zielgruppen-Zeile. Bewusst abgesetzt und ohne Haken: sie beschreibt nicht,
   was du bekommst, sondern fuer wen der Tag ist. */
.hero__fuer {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero__fuer strong {
  color: var(--gold);
  font-weight: 600;
}


/* Die Knappheitszeile gilt fuer BEIDE Angebote und steht darum unter dem
   Kartenpaar, nicht in einer der Karten. */
.ticket__scarcity {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.03em;
}

/* --- 11. Final-CTA --- */
/* Liegt auf --surface: darko davor und der Footer danach liegen auf
   --black, der Grundton muss dazwischen wechseln. */
/* Die Schlusssektion steht als Block in der Mitte: Ueberschrift, Satz und
   Knopf auf einer Achse. Ohne text-align standen Titel und Knopf links,
   waehrend der Satz ueber margin:auto mittig lag. */
.final-cta {
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(201, 168, 76, 0.10) 0%, transparent 65%),
    var(--surface);
  text-align: center;
}

.final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 18px;
}

.final-cta__title em {
  color: var(--gold);
  font-style: italic;
}

.final-cta__sub {
  max-width: 560px;
  margin: 0 auto 8px;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.final-cta__countdown {
  margin-top: 28px;
  justify-content: center;
}

@media (max-width: 640px) {
/* Logo kleiner, damit die helle Scheibe der Headline nicht die Buehne nimmt */
.hero__logo { width: 48px; height: 48px; margin-bottom: 16px; }

.ticket__scarcity { font-size: 0.85rem; }

.form__note { font-size: 0.85rem; }
}


.pr__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Das Symbol steht ueber der Ueberschrift, anstelle einer Nummer. Die
   Nummern sind raus: sie suggerierten eine Reihenfolge, die es weder bei
   den Problemen noch bei den Inhalten gibt. */
.pr-card__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pr-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--gold);
}

.pr-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mit Symbol daneben braucht die Nummer ihre Untermarge nicht mehr, die
   traegt jetzt der gemeinsame Kopf. */
.pr-card__kopf .pr-card__nr {
  margin-bottom: 0;
}

.pr-card {
  /* Spalte statt Reihe: das Raster stammt aus der Money-Mind-Seite, wo
     links ein Icon neben dem Text stand. Hier sitzt die Nummer ueber der
     Ueberschrift, sonst quetscht sie den Titel in eine schmale Spalte. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  max-width: 100%;
}

.pr-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
  min-width: 0;
}

/* Der Satz, der in die Reframe-Sektion uebergibt. Bewusst ohne Gold und
   ohne Kursiv — das hebt ihn vom Schlusssatz der Ja/Nein-Karten ab. */
.pr-turn {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  max-width: 720px;
  margin: 52px auto 0;
}

@media (max-width: 860px) {
.pr__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

.pr-card { padding: 24px 22px; gap: 15px; }

.pr-card__icon { width: 34px; height: 34px; }

.pr-card__kopf { gap: 10px; margin-bottom: 12px; }

.pr-card__text { font-size: 0.96rem; line-height: 1.6; }

.pr-turn { margin-top: 40px; }

/* auf schmalen Screens bricht der Satz ohnehin — der harte Umbruch
     wuerde dort nur eine einsame Zeile erzeugen */
.pr-turn br { display: none; }
}


/* ============================================
   FREEBIE — Inhaltskarten
   Nutzen das Raster der Problem-Sektion (.pr__grid), tragen aber eine
   Nummer und eine Ueberschrift statt eines Icons.
   ============================================ */
.pr-card__nr {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 10px;
}
.pr-card__titel {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}


/* ============================================
   REDUZIERTE BEWEGUNG
   Pflicht, nicht optional. Jeder neue Effekt dieser Seite gehoert hier
   hinein. Der Regen prueft die Einstellung selbst in kern.js und zeichnet
   dann gar nicht erst.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Die Aura bleibt sichtbar, hoert aber auf zu atmen. */
  .hero__bg-overlay::after { animation: none; }
}


/* Bei ungerader Kartenzahl bliebe die letzte allein in der linken Spalte
   stehen und die rechte Haelfte leer. Ueber die ganze Breite gelegt sieht
   es nach Absicht aus statt nach Rest. */
.pr__grid > .pr-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .pr-lead { margin-bottom: 30px; font-size: 0.98rem; }
}


/* ============================================
   LEHRPLAN — fuenf Module, zwoelf Lektionen
   Gewichtete Karte nach Abschnitt 6.3 des Designsystems (dunkler
   Verlauf, goldener Rahmen, Lichtkante im Hover), wie die Bausteine
   der Vertriebsguide-Seite. Darin die Lektionen als Zeilen mit feinen
   Trennlinien. Bewusst ohne Lektionsnummern und ohne Minuten je Lektion:
   nur die Gesamtangabe (12 Lektionen, 45 Minuten) steht oben.
   ============================================ */
.lehrplan {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

/* Eine Spalte, auch am Desktop: die Lektionstitel sind teils lang, und
   die Reihenfolge der Module ist der Kurs. */
.lehrplan__liste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}

.modul {
  background: linear-gradient(155deg, #1c1810 0%, #141008 100%);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-lg);
  padding: 30px 32px 22px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color var(--transition), transform var(--transition);
}

.modul:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.modul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.6), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.modul:hover::before { opacity: 1; }

.modul__kopf {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.modul__nr {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  color: var(--gold);
  min-width: 42px;
}

.modul__titelzeile {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 4px;
}

.modul__titel {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}

/* Beschreibung und Lektionen fluchten mit dem Titel, nicht mit der Ziffer. */
.modul__text,
.modul__lektionen {
  margin-left: 64px;
}

.modul__text {
  margin-top: 10px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.modul__lektionen {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.modul__lektionen li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.96rem;
  line-height: 1.5;
}

.modul__lektionen li::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-top: 0.42em;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--gold);
}

.lektion__titel {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}

@media (max-width: 640px) {
  .modul { padding: 24px 22px 16px; }
  .modul__kopf { gap: 16px; }
  .modul__nr { font-size: 1.7rem; min-width: 32px; }
  .modul__titel { font-size: 1.15rem; }
  .modul__text,
  .modul__lektionen { margin-left: 0; }
  .modul__text { font-size: 0.96rem; line-height: 1.6; }
  .modul__lektionen li { gap: 12px; font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modul,
  .modul:hover { transform: none; }
}


/* ============================================
   ANMELDUNG ZUR ACADEMY
   Passwortfeld im letzten Funnel-Schritt und der Login-Link im Hero.
   ============================================ */
.form__pw-wrap { position: relative; }
.form__input--pw { padding-right: 96px; }
.form__pw-zeigen {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
}
.form__pw-zeigen:hover { color: var(--gold); }
.form__pw-hinweis {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: -6px;
  padding-left: 4px;
}

/* --- Schritt 2: Code aus der SMS --- */
.form--sms > :not(.form__sms):not([type="hidden"]) { display: none !important; }
.form__sms { display: flex; flex-direction: column; gap: 14px; text-align: center; animation: smsAuf 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
.form__sms[hidden] { display: none; }
@keyframes smsAuf { from { opacity: 0; transform: translateY(8px); } }
.form__sms-titel { font-family: var(--font-display); font-size: 1.35rem; color: var(--text); }
.form__sms-text { font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; }
.form__sms-text b { color: var(--text); font-weight: 600; white-space: nowrap; }
.form__input--code {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.45em;
  padding-left: calc(16px + 0.45em);
  font-variant-numeric: tabular-nums;
}
.form__input--code::placeholder { letter-spacing: 0.45em; opacity: 0.35; }
.form__sms .form__error-msg { margin-top: -6px; }
.form__sms-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; }
.form__sms-links button {
  background: none; border: 0; cursor: pointer; padding: 10px 4px; min-height: 40px;
  font-family: var(--font-body); font-size: 0.86rem; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px;
}
.form__sms-links button:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .form__sms { animation: none; } }

.hero__login {
  margin-top: -8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.hero__login a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   MODERNISIERUNG (12.11.2026) — angeglichen an die NOW Academy.
   Bewusst als ein Block am Ende: er ueberschreibt die aelteren Regeln
   oben, ohne sie einzeln anzufassen. Schriften Cormorant Garamond und
   Geist, Glaskarten mit goldener Lichtkante, Gold-Knopf mit Innenlicht,
   das NOW-Mandala in Lehrplan und Schluss (mandala.js).
   ============================================================ */
:root {
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* frueher ein heller Champagnerton; auf Wunsch wieder das NOW-Gold */
  --champagner: var(--gold);
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --glas-kante: linear-gradient(150deg, rgba(226, 201, 122, 0.42), rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.03) 70%, rgba(201, 168, 76, 0.22));
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Ueberschriften: Cormorant braucht etwas mehr Groesse als Fraunces --- */
.hero__headline { font-size: clamp(2.9rem, 6.6vw, 5.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.section__title { font-size: clamp(2.5rem, 5vw, 3.9rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.final-cta__title { font-size: clamp(2.6rem, 5.6vw, 4.2rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.darko__name { font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.015em; }
.hero__headline em, .section__title em, .final-cta__title em { color: var(--champagner); font-weight: 500; }
.pr-card__titel, .fw-card__title { font-weight: 600; letter-spacing: -0.005em; }
.pr-card__titel { font-size: 1.45rem; }
.fw-card__title { font-size: 1.6rem; }
.modul__titel { font-size: 1.6rem; font-weight: 600; line-height: 1.12; }
.pr-turn { font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 500; }
.fw-conclusion { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.section__subtitle, .pr-lead { text-wrap: pretty; }

/* --- Kleine Ueberschriften: ruhig und kursiv statt Grossbuchstaben --- */
.section__eyebrow, .hero__format {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: var(--champagner);
}

/* --- Knoepfe wie in der Academy --- */
.btn { text-transform: none; letter-spacing: 0.005em; border-radius: 14px; font-weight: 600; transition: transform 180ms var(--aus), box-shadow 180ms var(--aus), background-color 180ms ease; }
.btn--gold {
  color: #1a1408;
  background: linear-gradient(180deg, #E4C774 0%, var(--gold) 55%, #B08F3A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.65), inset 0 -1px 0 rgba(90, 64, 16, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -8px rgba(201, 168, 76, 0.55);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #EBD083 0%, #D2B256 55%, #B9963F 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.75), inset 0 -1px 0 rgba(90, 64, 16, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -8px rgba(201, 168, 76, 0.7);
}
.btn:active { transform: scale(0.97); }
.btn--large { min-height: 58px; padding: 0 36px; font-size: 1.04rem; }

/* --- Hero: Knopf und Zeilen darunter mit klarem Abstand, nichts ueberlappt --- */
.hero .btn--large { margin-top: 6px; }
/* Eigene Klasse statt .hero__knappheit: die blendet kern.js aus, sobald ein
   Termin "vorbei" ist, und ohne Termin gilt er als vorbei. */
.hero__hinweis { margin-top: 22px; margin-bottom: 6px; font-size: 0.86rem; color: var(--text-muted); }
.hero__login { margin-top: 6px; font-size: 0.92rem; position: relative; z-index: 1; }

/* --- Glaskarten mit Lichtkante --- */
.pr-card, .modul, .fw-card {
  position: relative;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 248, 235, 0.07), rgba(255, 248, 235, 0.03));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.75);
}
.pr-card::after, .modul::after, .fw-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glas-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.fw-card--yes { background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.04)); }
.fw-card--yes::after { background: linear-gradient(150deg, rgba(226, 201, 122, 0.7), rgba(201, 168, 76, 0.25) 40%, rgba(201, 168, 76, 0.12) 70%, rgba(226, 201, 122, 0.45)); }
.modul:hover { transform: translateY(-3px); }
.modul::before { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pr-card, .modul, .fw-card { background: rgba(30, 26, 20, 0.92); }
}

/* --- Icons in "Ehrlich gesagt": goldene Glas-Kacheln --- */
.pr-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 15px;
  color: var(--champagner);
  background: radial-gradient(circle at 30% 22%, rgba(201, 168, 76, 0.32), rgba(201, 168, 76, 0.1) 60%, rgba(201, 168, 76, 0.04));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.38), inset 0 1px 0 rgba(255, 246, 214, 0.28), 0 12px 26px -12px rgba(201, 168, 76, 0.55);
}
.pr-card__kopf { margin-bottom: 18px; }

/* --- Lehrplan: drei Themen ohne Nummern, am Desktop nebeneinander --- */
.lehrplan__liste { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.modul { padding: 30px 28px 18px; transition: transform 300ms var(--aus); }
.modul__kopf { display: block; }
.modul__titelzeile { padding-top: 0; }
.modul__text, .modul__lektionen { margin-left: 0; }
.modul__text { margin-top: 12px; font-size: 0.98rem; }
.modul__lektionen li { gap: 12px; font-size: 0.95rem; }
.modul__lektionen li::before {
  width: 6px; height: 6px; margin-top: 0.55em; border: 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px rgba(201, 168, 76, 0.7);
}
@media (max-width: 980px) {
  .lehrplan__liste { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
}

/* --- Darko: Bild mit Lichtkante --- */
.darko__img { border-radius: 22px; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.3), 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 100px -30px rgba(201, 168, 76, 0.35); }

/* --- Mandala-Sektionen --- */
[data-mandala] { position: relative; overflow: hidden; }
[data-mandala] > .container { position: relative; z-index: 1; }
.lp-mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
}
.lp-mandala canvas { display: block; animation: mandalaDrehen 900s linear infinite; }
.lp-mandala--leise { opacity: 0.12; }
.lp-mandala--voll { opacity: 0.17; }
@keyframes mandalaDrehen { to { transform: rotate(360deg); } }

/* --- Schluss: gleicher Grundton wie die Nachbarn, Linie oben (seite.js) --- */
.final-cta {
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 65%),
    var(--black);
}
.final-cta .btn--large { margin-top: 18px; }

/* --- Fusszeile: aufgeraeumt, mittig --- */
.footer__inner { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
.footer__logo { height: 52px; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.3), 0 8px 30px rgba(201, 168, 76, 0.3); }
.footer__tagline { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--champagner); }
.footer__bottom { justify-content: center; gap: 10px 26px; font-size: 0.86rem; }

/* --- Funnel: Antwortkarten und Felder im Glas-Stil --- */
.funnel-option { border-radius: 16px; transition: transform 180ms var(--aus), background-color 180ms ease, border-color 180ms ease; }
.funnel-option:active { transform: scale(0.98); }
.form__input, .form__select, .form__phone-wrap { border-radius: 14px; }
.funnel-step form > .form__input,
.funnel-step form > .form__phone-wrap,
.funnel-step form > .form__pw-wrap { margin-bottom: 10px; }
.form__phone-wrap .form__input { margin-bottom: 0; }
.funnel-step form > .btn { margin-top: 14px; }
.funnel-step .form__note { letter-spacing: 0; line-height: 1.55; margin-top: 14px; }
.funnel-step .form__pw-hinweis { margin-top: 0; }
.funnel-step__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--champagner);
}

@media (max-width: 640px) {
  .modul { padding: 26px 22px 14px; }
  .pr-card__icon { width: 50px; height: 50px; padding: 12px; }
  .lp-mandala--voll { opacity: 0.14; }
  .hero__format { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-mandala canvas { animation: none; }
}


/* --- Ueberarbeitung 12.11.2026, Runde 2 --- */

/* Karten einmal sanft einblenden, sobald sie im Bild sind. Die an die
   Scroll-Position gekoppelte Variante aus kern.css liess hohe Karten am
   Handy unscharf stehen, solange sie unten am Bildschirm waren. */
.js .reveal-card {
  animation: none;
  filter: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--aus), transform 0.7s var(--aus);
  will-change: auto;
}
.js .reveal-card.visible { opacity: 1; transform: none; }

/* Hero: aufgeraeumt, nur Titel, ein Satz, Knopf */
.hero__hook { max-width: 560px; margin-left: auto; margin-right: auto; font-size: 1.12rem; line-height: 1.65; }
.hero .btn--large { margin-top: 10px; }
.hero__login { margin-top: 18px; font-size: 0.88rem; color: var(--text-muted); }

/* Knopf am Ende jeder Sektion */
.sektion-cta { text-align: center; margin-top: 44px; }
.sektion-cta--links { text-align: left; margin-top: 30px; }
.fw-conclusion { margin-bottom: 0; }
@media (max-width: 900px) {
  .sektion-cta--links { text-align: center; }
}
@media (max-width: 640px) {
  .sektion-cta { margin-top: 34px; }
  .sektion-cta .btn--large, .hero .btn--large { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-card { opacity: 1; transform: none; transition: none; }
}


/* --- Cookie-Leiste als schwebende Glaskarte (12.11.2026) ---
   Statt eines Balkens ueber die ganze Breite: eine Karte mit Abstand zum
   Rand, Glas, goldener Lichtkante, gleich grossen Knoepfen (Ablehnen und
   Akzeptieren gleichwertig, wie bisher). */
.cookie-bar {
  left: 50%;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(860px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 18px 20px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(36, 31, 24, 0.82), rgba(18, 15, 12, 0.86));
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(201, 168, 76, 0.25);
  animation: cookieAuf 0.6s var(--aus) both;
}
.cookie-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glas-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
@keyframes cookieAuf { from { opacity: 0; transform: translate(-50%, 24px); } }
.cookie-bar__inner { flex-wrap: nowrap; justify-content: space-between; gap: 18px; }
.cookie-bar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 14px;
  color: var(--gold);
  background: radial-gradient(circle at 30% 22%, rgba(201, 168, 76, 0.32), rgba(201, 168, 76, 0.1) 60%, rgba(201, 168, 76, 0.04));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.38), inset 0 1px 0 rgba(255, 246, 214, 0.28);
}
.cookie-bar__icon svg { width: 100%; height: 100%; }
.cookie-bar__text { flex: 1 1 auto; font-size: 0.88rem; color: var(--text); }
.cookie-bar__btn {
  min-height: 46px;
  padding: 0 24px;
  border-radius: 14px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-size: 0.9rem;
  transition: transform 180ms var(--aus), box-shadow 180ms var(--aus), background-color 180ms ease, color 180ms ease;
}
.cookie-bar__btn:active { transform: scale(0.97); }
.cookie-bar__btn--accept {
  color: #1a1408;
  background: linear-gradient(180deg, #E4C774 0%, var(--gold) 55%, #B08F3A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.65), inset 0 -1px 0 rgba(90, 64, 16, 0.35), 0 8px 22px -8px rgba(201, 168, 76, 0.6);
}
.cookie-bar__btn--accept:hover { background: linear-gradient(180deg, #EBD083 0%, #D2B256 55%, #B9963F 100%); box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.75), 0 12px 30px -8px rgba(201, 168, 76, 0.75); }
.cookie-bar__btn--decline {
  color: var(--text);
  border: 0;
  background: rgba(255, 248, 235, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cookie-bar__btn--decline:hover { background: rgba(255, 248, 235, 0.1); color: var(--text); }
@media (max-width: 700px) {
  .cookie-bar { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 16px; border-radius: 22px; }
  .cookie-bar__inner { flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
  .cookie-bar__icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; }
  .cookie-bar__text { flex: 1 1 0; min-width: 0; font-size: 0.84rem; }
  .cookie-bar__btns { width: 100%; }
  .cookie-bar__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }

/* Fragen im Funnel: gleiche Schrift und Staerke wie die Hero-Ueberschrift
   (kern.css setzt 700, das war in Cormorant viel zu fett). */
.funnel-step__title {
  font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.funnel-step__title em { font-weight: 500; }