/* ============================================================
   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.

   Ausgangspunkt war seite.css der Vertriebsguide-Seite (gleiche
   Bausteine). Neu hier: Titelblatt im Hero, Heute/Morgen-Tabelle (.gap).
   ============================================================ */

/* --- 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: Buch-Mockup des Leitfadens ---
   Steht dort, wo auf anderen Seiten das Video sitzt. Querformat und
   bewusst klein: das fruehere Titelblatt im Hochformat machte den Hero zu
   lang und schob Hook und Knopf aus dem ersten Blick. */
.hero__cover {
  position: relative;
  width: min(380px, 74vw);
  margin: 0 auto 26px;
}
/* Ein Hauch Goldlicht hinter dem Buch, damit es nicht auf dem Schwarz klebt */
.hero__cover::before {
  content: '';
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(201, 168, 76, 0.22) 0%, transparent 70%);
  filter: blur(18px);
}

.hero__cover img {
  display: block;
  width: 100%;
  height: auto;
  /* Freigestellt: der Schatten folgt der Buchform, kein Kasten */
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65));
}

/* 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(--surface);
  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(--black);
  position: relative;
}

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

.fw-card {
  /* Flaeche, Lichtkante und Radius: Glas aus kern.css */
  padding: 38px 34px 30px;
  box-sizing: border-box;
  max-width: 100%;
}

.fw-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  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.4rem, 2.4vw, 1.8rem);
  font-weight: 500;
  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;
}

/* ============================================
   DAS SEMINAR — Sektionsgrund
   Liegt auf --black, die Problem-Sektion darueber auf --surface.
   ============================================ */
.inhalte {
  background:
    radial-gradient(ellipse 55% 65% at 15% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 85% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
    var(--black);
  position: relative;
}


/* ============================================
   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(--surface);
  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(2.8rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  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,
.bausteine::before,
.gap::before,
.darko-section::before,
.fuer-wen::before,
.inhalte::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,
.bausteine::before,
.gap::before,
.darko-section::before,
.fuer-wen::before,
.inhalte::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 {
  /* Schrift, Farbe und Schreibweise (kursiv, Gold) kommen aus kern.css */
  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 {
  /* Groesse, Staerke und <em> in Gold: kern.css */
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 18px;
}

.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 {
  /* Goldene Glas-Kachel aus kern.css */
  flex: 0 0 auto;
}

/* 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;
  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.45rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  max-width: 720px;
  margin: 52px auto 0;
  text-wrap: balance;   /* sonst steht ein einzelnes Wort ("Talent.") allein */
}

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

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

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

.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;
}
/* Wort mit Bindestrich, das nicht am Bindestrich umbrechen soll */
.am-stueck { white-space: nowrap; }

.pr-card__titel {
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 1.45rem;
  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; }
}


/* ============================================
   WARUM SO VIELE HAENGEN BLEIBEN (Klasse .bausteine aus der
   Vertriebsguide-Seite, liegt auf --surface). Fragen: .frage-zeile, unten.
   ============================================ */
.bausteine {
  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;
}


/* ============================================================
   WUNSCHREALITAET — Sektionsgrund (--black). Karten: .stapel, unten.
   ============================================================ */
.gap {
  background:
    radial-gradient(ellipse 55% 65% at 15% 50%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 85% 50%, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    var(--black);
  position: relative;
}


/* ============================================================
   SMS-BESTAETIGUNG (sms.js) — Schritt 2 im Kontaktformular, gleiche
   Optik wie beim Videokurs. Solange der Code offen ist, blendet
   .form--sms alle Felder darueber aus.
   ============================================================ */
.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; } }


/* ============================================================
   KNOPFTEXT AM HANDY
   "Vertriebsteam-Formel kostenlos sichern" (Wording der Anzeige) ist
   zwischen 381 und 640px breiter als der Knopf: der Kern erlaubt den
   Umbruch erst ab 380px (NOW-DESIGNSYSTEM 8.2), darueber stand der Text
   ueber den Knopfrand hinaus. Hier bricht er ausgeglichen auf zwei Zeilen.
   ============================================================ */
@media (max-width: 640px) {
  .btn--large {
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    line-height: 1.3;
    padding: 12px 22px;
  }
  /* Rasterkind mit Text: ohne min-width 0 bestimmt das laengste Wort die
     Mindestbreite der Spalte (NOW-DESIGNSYSTEM 8.4). */
  .darko__content { min-width: 0; }
}


/* ============================================================
   BEWEGUNG (bewegung.js) — uebernommen von der NOW-Webseite
   Alles Bewegte haengt an html.bewegung (im <head> gesetzt, fehlt bei
   "Bewegung reduzieren"). Ohne die Klasse und ohne das Skript sind alle
   drei Sektionen vollstaendig und statisch lesbar. Bewegt wird nur ueber
   transform, opacity, filter und clip-path.
   ============================================================ */

/* Die gestapelten Karten (position: sticky) brauchen einen body ohne
   overflow-x: hidden: der body wird sonst selbst zum Scroll-Container,
   und sticky klebt an einem Kasten, der nie scrollt (NOW-DESIGNSYSTEM 8.1). Seitliches Wischen
   verhindert weiter das overflow-x: clip am html aus dem Kern; die drei
   Sektionen schneiden zusaetzlich selbst (overflow: clip ist KEIN
   Scroll-Container, sticky darin funktioniert). qa/breiten.py prueft
   alle Breiten. */
body { overflow-x: visible; }
.gap, .bausteine, .inhalte { overflow: clip; }


/* ---------- 1. Gestapelte Karten: Heute gegen Mit deinem Vertriebsteam ----------
   Jede Karte klebt oben (sticky), die naechste legt sich darueber. Die
   Karten sind deckend, sonst schienen die darunter durch. Links warmes,
   entsaettigtes Graphit (Stein, nicht Blau), rechts warmes Dunkelgold:
   der Unterschied liegt in Helligkeit und Glanz. Alle Karten gleich hoch
   (--stapel-hoehe aus bewegung.js), damit der Stapel saubere Kanten hat.
   --licht (0..1): Team-Haelfte leuchtet, "Heute" wird durchgestrichen
   (bewegung.js; ohne Skript 1). --tiefe: Karten darueber. */
.stapel {
  list-style: none;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.stapel__karte {
  --licht: 1;
  --tiefe: 0;
  position: sticky;
  top: calc(48px + var(--k, 0) * 14px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 0 minmax(0, 1.1fr);
  min-height: var(--stapel-hoehe, 230px);
  border-radius: 26px;
  overflow: hidden;
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--tiefe) * 0.03));
  filter: brightness(calc(1 - min(var(--tiefe), 2) * 0.22));
  box-shadow: 0 -20px 44px -26px rgba(0, 0, 0, 0.9), 0 44px 80px -44px rgba(0, 0, 0, 0.95);
}
.stapel__karte::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 40%, rgba(201, 168, 76, 0.18) 70%, rgba(226, 201, 122, 0.45));
  -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;
}

.stapel__heute,
.stapel__morgen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px 48px;
  min-width: 0;
}

/* Heute: warmes Graphit, matt */
.stapel__heute {
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, rgba(255, 245, 230, 0.035) 0%, transparent 60%),
    linear-gradient(165deg, #1d1b19 0%, #151412 100%);
}

/* Mit deinem Vertriebsteam: warm, mit Licht aus der oberen Ecke */
.stapel__morgen {
  background: linear-gradient(165deg, #231c11 0%, #17130c 100%);
}
.stapel__morgen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 110% at 100% 0%, rgba(201, 168, 76, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(201, 168, 76, 0.07) 0%, transparent 60%);
  opacity: var(--licht);
}
.stapel__morgen > * { position: relative; }

.stapel__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stapel__heute .stapel__label  { color: var(--text-muted); }
.stapel__morgen .stapel__label { color: var(--gold); opacity: calc(0.45 + var(--licht) * 0.55); }

.stapel__satz {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.stapel__heute .stapel__satz {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.32;
  color: var(--text-muted);
}
/* Durchstreichen, zeilenweise: der Strich ist ein Hintergrund, der mit
   --licht von links nach rechts waechst (box-decoration-break: jede
   Zeile bekommt ihren eigenen Strich) */
.stapel__strich {
  background-image: linear-gradient(rgba(201, 168, 76, 0.75), rgba(201, 168, 76, 0.75));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: calc(var(--licht) * 100%) 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.stapel__morgen .stapel__satz {
  font-size: clamp(1.75rem, 2.9vw, 2.35rem);
  line-height: 1.16;
  color: var(--white);
  opacity: calc(0.35 + var(--licht) * 0.65);
  translate: calc((1 - var(--licht)) * 16px) 0;
}
.stapel__satz em { font-style: italic; color: var(--gold); }

/* Die Naht: eine feine Goldlinie, die mit --licht aufglueht */
.stapel__naht {
  position: relative;
  z-index: 2;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(226, 201, 122, 0.85) 30%, rgba(226, 201, 122, 0.85) 70%, transparent);
  opacity: calc(0.3 + var(--licht) * 0.7);
  box-shadow: 0 0 calc(4px + var(--licht) * 14px) rgba(201, 168, 76, 0.6);
}

@media (max-width: 640px) {
  .stapel { gap: 22px; }
  .stapel__karte {
    top: calc(14px + var(--k, 0) * 10px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1px auto;
    border-radius: 22px;
  }
  .stapel__heute, .stapel__morgen { padding: 24px 24px 26px; gap: 10px; justify-content: flex-start; }
  .stapel__heute .stapel__satz { font-size: 1.12rem; }
  .stapel__morgen .stapel__satz { font-size: clamp(1.4rem, 6.4vw, 1.65rem); translate: 0 calc((1 - var(--licht)) * 8px); }
  .stapel__label { font-size: 0.68rem; }
  .stapel__naht {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(226, 201, 122, 0.85) 25%, rgba(226, 201, 122, 0.85) 75%, transparent);
  }
}


/* ---------- 2. Die vier Fragen: redaktionell, Wort fuer Wort ----------
   Grosse Fragen untereinander, getrennt durch feine Goldlinien. Mit
   Bewegung sind die Woerter zuerst gedaempft und leuchten beim Lesen
   nacheinander auf (bewegung.js setzt .ist-an je Wort). */
.fragen-liste {
  max-width: 900px;
  margin: 0 auto;
}

.frage-zeile {
  position: relative;
  padding: 44px 0 46px;
}
.frage-zeile + .frage-zeile::before,
.frage-zeile:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.45) 20%, rgba(201, 168, 76, 0.45) 80%, transparent);
}

.frage-zeile__frage {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.7vw, 3rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}

.frage-zeile__text {
  max-width: 640px;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Mit Bewegung */
.bewegung .fragen-liste--aktiv .wort {
  color: rgba(242, 239, 233, 0.16);
  transition: color 0.45s ease, text-shadow 0.8s ease;
}
.bewegung .fragen-liste--aktiv .wort.ist-an {
  color: var(--white);
  text-shadow: 0 0 22px rgba(226, 201, 122, 0.18);
}
.bewegung .fragen-liste--aktiv .frage-zeile__text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.7s ease, translate 0.9s var(--aus);
}
.bewegung .fragen-liste--aktiv .frage-zeile.ist-gelesen .frage-zeile__text { opacity: 1; translate: 0 0; }

@media (max-width: 640px) {
  .frage-zeile { padding: 32px 0 34px; }
  .frage-zeile__frage { font-size: clamp(1.6rem, 7.2vw, 2rem); margin-bottom: 12px; }
  .frage-zeile__text { font-size: 0.96rem; }
}


/* ---------- 3. Puzzle ----------
   Die Form (Hals und Kopf, Nasen und Loecher, gerade Aussenkanten)
   zeichnet bewegung.js als SVG (.puzzle__form) passend zur Kartengroesse.
   Ohne Skript bleibt es bei Glaskarten im Raster. */
.puzzle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.puzzle__teil.pr-card { padding: 44px 40px 42px; }

/* Mit Form: keine Luecken, das Glas des Kerns weicht dem SVG */
.puzzle--form { gap: 0; }
.puzzle--form .puzzle__teil.pr-card {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}
.puzzle--form .puzzle__teil.pr-card::after { content: none; }
.puzzle__teil > :not(.puzzle__form) { position: relative; z-index: 1; }

.puzzle__form {
  position: absolute;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
}

/* Fertig: kein Schimmer darueber, sondern von hinten pulsiert das Mandala
   der Sektion auf (Hellerwerden der Huelle aus kern.css, keine eigene
   Positionierung) und ein Goldschein atmet hinter dem Puzzle. */
.puzzle::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201, 168, 76, 0.22) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
}
.puzzle.ist-komplett::before { animation: puzzleGlut 3.2s var(--aus) both; }
@keyframes puzzleGlut {
  0%   { opacity: 0; }
  28%  { opacity: 1; }
  100% { opacity: 0.35; }
}
.inhalte.ist-komplett .lp-mandala { animation: mandalaPuls 3.2s var(--aus) both; }
@keyframes mandalaPuls {
  0%   { opacity: 0.12; }
  28%  { opacity: 0.5; }
  100% { opacity: 0.2; }
}

/* Ein Teil rastet ein: die Kante glueht kurz auf */
.puzzle__teil.ist-gesetzt .puzzle__form { animation: teilSitzt 1s var(--aus) 1; }
@keyframes teilSitzt {
  0%   { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0 rgba(226, 201, 122, 0)); }
  35%  { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(226, 201, 122, 0.55)); }
  100% { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0 rgba(226, 201, 122, 0)); }
}

/* Mit Bewegung: Teile liegen verstreut (--px, --py, --pr aus bewegung.js) */
.bewegung .puzzle--aktiv .puzzle__teil {
  transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg));
  will-change: transform;
}

/* Tablet und Handy: zwei Teile nebeneinander, drei Reihen */
@media (max-width: 900px) {
  .puzzle { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .puzzle__teil.pr-card { padding: 40px 36px 38px; }
}
@media (max-width: 640px) {
  .puzzle { gap: 10px; }
  .puzzle--form { gap: 0; }
  .puzzle__teil.pr-card { padding: 26px 22px 26px; }
  .puzzle .pr-card__kopf { margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
  .puzzle .pr-card__icon { width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
  .puzzle .pr-card__nr { font-size: 0.62rem; letter-spacing: 0.08em; }
  .puzzle .pr-card__titel { font-size: 1.08rem; line-height: 1.2; margin-bottom: 6px; hyphens: auto; }
  .puzzle .pr-card__text { font-size: 0.82rem; line-height: 1.5; hyphens: auto; }
}


/* Notfall-Breite (iPhone SE 1. Gen.): Titel etwas kleiner, sonst trennt
   fast jedes Wort */
@media (max-width: 380px) {
  .puzzle__teil.pr-card { padding: 24px 20px; }
  .puzzle .pr-card__titel { font-size: 0.98rem; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .puzzle.ist-komplett::before, .inhalte.ist-komplett .lp-mandala, .puzzle__teil.ist-gesetzt .puzzle__form { animation: none; }
}


/* ============================================================
   HERO KOMPAKT (13.11.2026)
   Ziel: der ganze Hero samt Knopf im ersten Bild, auch mit Safaris
   Adress- und Tableiste (sichtbar rund 660 bis 750px), und trotzdem Luft.
   Darum: keine Format-Zeile, ein Satz als Hook, die drei Punkte als
   kurze Einzeiler (am Desktop in einer Reihe), Zielgruppe unter dem Knopf.
   Ueberschreibt die aelteren Hero-Regeln weiter oben.
   ============================================================ */
/* Der Hero ist genau so hoch wie der sichtbare Bildschirm (svh = mit
   eingeblendeten Browserleisten, hoechstens 1000px) und verteilt den
   freien Platz GLEICHMAESSIG zwischen fuenf Bloecken: Logo, Ueberschrift,
   Buch, Satz mit Punkten, Knopf mit Zielgruppe (space-evenly). So landet
   die Luft zwischen den Elementen statt als leerer Rand. Auf niedrigen
   Bildschirmen ruecken die Bloecke bis auf den Mindestabstand (gap)
   zusammen, und Ueberschrift und Buch richten sich nach der Hoehe. */
.hero { align-items: stretch; padding: 0; }
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 14px;
  min-height: 100vh;
  min-height: min(100svh, 1000px);
  padding-top: 18px;
  padding-bottom: 22px;
  box-sizing: border-box;
}
.hero__content > * { margin-top: 0; margin-bottom: 0; }
.hero__logo { width: 52px; height: 52px; }
.hero__headline { font-size: clamp(2.9rem, min(6.6vw, 8vh), 5.4rem); }
/* Buch: Breite auch nach der Hoehe begrenzt (Seitenverhaeltnis 1000 x 683) */
.hero__cover { width: min(400px, 74vw, calc(26vh * 1.464)); }

.hero__hook {
  margin: 0 auto 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--gold);
}

/* Drei Punkte in einer Reihe; jeder ein Einzeiler */
.hero__punkte {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  max-width: 820px;
  margin: 0 auto;
}
.hero__punkte li { padding-left: 24px; font-size: 0.98rem; white-space: nowrap; }
/* Breiter Bildschirm: Hero-Inhalt 1000px, damit die Ueberschrift in zwei
   Zeilen bleibt; die Punkte-Reihe darf noch etwas darueber hinaus, damit
   alle drei nebeneinander passen */
@media (min-width: 1100px) {
  .hero__content { max-width: 1000px; }
  .hero__punkte { max-width: none; margin-left: -40px; margin-right: -40px; }
}
.hero__punkte li::before { left: 0; }

.hero__mitte, .hero__aktion { width: 100%; }
.hero__fuer {
  margin: 16px auto 0;
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 460px;
}

@media (max-width: 640px) {
  .hero__content { gap: 10px; padding-top: 14px; padding-bottom: 18px; }
  .hero__logo { width: 44px; height: 44px; }
  .hero__headline { font-size: clamp(2.1rem, min(9.4vw, 5vh), 3rem); line-height: 1.06; }
  .hero__cover { width: min(320px, 78vw, calc(23vh * 1.464)); }
  .hero__hook { font-size: 1.36rem; margin-bottom: 12px; }
  /* Untereinander, als Block mittig, Haken buendig */
  .hero__punkte {
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    gap: 8px;
  }
  .hero__punkte li { font-size: 0.97rem; white-space: normal; }
}
/* Schmale Handys (360px, viele Android-Geraete): eine Spur kleiner, damit
   jeder Punkt eine Zeile bleibt ("Das Provisionsmodell fuer Top-Performer") */
@media (max-width: 374px) {
  .hero__punkte li { font-size: 0.9rem; padding-left: 22px; }
  .hero__fuer { margin-top: 12px; font-size: 0.82rem; }
}