/* =========================================================
   TOP-VERKAEUFERTRAINING — goldene Fassung
   Nach styles.css und training.css geladen, nur auf dieser Seite.

   Gold wie auf dem Titelbild des Trainings (images/tk-bild.jpeg): Titel in
   Cinzel mit Goldverlauf, Buttons und Haken in Gold, warmes Schwarz statt
   Gruen. Die Fuehrungskraefte-Seite ist die silberne Schwester
   (fuehrungskraeftetraining.css).

   Wie dort: styles.css leitet alle Alt-Namen (--blue-…, --gold-…) auf die
   --accent-Kette um. Diese Kette und die Grundtoene hier umzulegen reicht
   fuer Navigation, Footer und alle Bausteine.

   Kontrast: Gold als Schrift nur auf dunklem Grund (--accent-2). Auf hellem
   Grund traegt Schrift das dunkle Gold (--accent-deep, 5,7 : 1), Flaechen in
   Gold bekommen dunkle Schrift (--on-accent).
   ========================================================= */

:root{
  /* ---------- Akzent — Gold ---------- */
  --accent:           #b8892c;
  --accent-2:         #e2c06a;
  --accent-3:         #f3dfa0;
  --accent-deep:      #6b4e0e;
  --accent-electric:  #d4a94b;
  --accent-secondary: #8f6a1e;
  --accent-soft:      rgba(226,192,106,0.14);
  --accent-soft-light:rgba(107,78,14,0.12);
  --on-accent:        #1a1408;

  --shadow-rgb:      212, 169, 75;
  --shadow-rgb-soft: 120, 88, 24;

  /* ---------- Dunkel — warmes Schwarz ---------- */
  --bg:           #0d0c0a;
  --bg-2:         #14120e;
  --bg-3:         #1c1913;
  --surface:      #26221a;
  --line:         rgba(245,232,200,0.08);
  --line-strong:  rgba(245,232,200,0.18);
  --text:         #f4efe4;
  --text-dim:     #b6ad9b;
  --text-mute:    #8a8170;

  /* ---------- Hell — Elfenbein ---------- */
  --light:        #f7f4ee;
  --light-2:      #ede8de;
  --light-3:      #fffdf8;
  --line-light:   rgba(30,24,12,0.09);
  --line-light-strong: rgba(30,24,12,0.18);
  --ink:          #1c1810;
  --ink-dim:      #4b4436;
  --ink-mute:     #6f6857;

  /* Goldverlaeufe: hell fuer Schrift auf dunklem Grund, tief fuer Schrift
     auf hellem Grund, Flaeche fuer Buttons und Icon-Kreise */
  --gold:         linear-gradient(180deg, #fff6d6 0%, #f1d27a 34%, #b8862b 58%, #f5dd92 100%);
  --gold-tief:    linear-gradient(180deg, #9a7220 0%, #5f430b 55%, #8a6519 100%);
  --gold-flaeche: linear-gradient(145deg, #faecc0 0%, #dcb558 50%, #a97c26 100%);
}

::selection{ background: var(--accent); color: var(--on-accent); }

.section-light{ background: linear-gradient(180deg, var(--light) 0%, var(--light-2) 100%); }

/* ---------- Titel: Cinzel in Gold, wie auf dem Titelbild ---------- */
.training-hero .hero-title{
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
/* Die Umlautpunkte von Cinzel ragen ueber die Zeilenhoehe (siehe
   fuehrungskraeftetraining.css). Nur die erste Zeile hat Umlaute. */
.training-hero .hero-title .line > span{
  padding-top: 0.22em;
  color: #f1d27a;
  background-image:
    linear-gradient(105deg, transparent 41%, rgba(95,67,11,0.5) 46%, #fffbea 49.5%, #fffbea 50.5%, transparent 55%),
    var(--gold);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 110% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Glanz laeuft alle paar Sekunden ueber den Titel */
  animation: revealUp 1.1s var(--ease) forwards, glanz 7s ease-in-out infinite;
  animation-delay: 0.5s, 2.2s;
}
.training-hero .hero-title .line:nth-child(2) > span{ animation-delay: 0.65s, 2.35s; }
.training-hero .hero-title .line + .line{ margin-top: -0.04em; }
.training-hero .hero-title .line + .line > span{ padding-top: 0; }
@keyframes glanz{
  0%       { background-position: 110% 0, 0 0; }
  30%, 100%{ background-position: -10% 0, 0 0; }
}
@media (max-width:880px){
  .training-hero .hero-title{ line-height: 1.04; }
}

/* ---------- Hero-Bild: Coaching am Whiteboard, warm gedaempft, Spot von oben ---------- */
.hero .hero-image{
  background-image: url('./images/coaching.jpg');
  background-position: center 30%;
  filter: contrast(1.05) brightness(0.42) saturate(0.7) sepia(0.25) blur(2px);
  opacity: 1;
}
.training-hero .hero-overlay{
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(241,210,122,0.16), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 55%, var(--bg) 100%);
}
@media (max-width:880px){
  .hero .hero-image{ filter: contrast(1.05) brightness(0.32) saturate(0.7) sepia(0.25) blur(3px); }
}
.illuminated .illum-bg{ filter: contrast(1.05) brightness(0.45) saturate(0.7) sepia(0.2); }

/* ---------- Hervorhebungen: Gold auf dunklem, tiefes Gold auf hellem Grund ---------- */
.display em{
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.display-dark em,
.kennzahl strong{
  background: var(--gold-tief);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* ---------- Buttons: poliertes Gold, dunkle Schrift ---------- */
.btn-primary,
.cta-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 40%, transparent 55%, rgba(0,0,0,0.12) 100%),
    var(--gold-flaeche);
  border: 1px solid #ecd28c;
  color: var(--on-accent);
}
.erklaer-play,
.erklaer-play:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 40%, transparent 55%, rgba(0,0,0,0.12) 100%),
    var(--gold-flaeche);
  color: var(--on-accent);
}

/* ---------- Icon-Kreise und Haken in Gold ---------- */
.video-ph-icon,
.section-apply .apply-icon,
.check-circle,
.hero-bullets li .check{
  background: var(--gold-flaeche);
  border-color: #ecd28c;
  color: var(--on-accent);
  box-shadow: none;
}

/* =========================================================
   EIGENER AUFBAU DIESER SEITE
   Leitmotiv Formel und Aufstieg: Die Formel Leads × Quote × Provision
   traegt die Hebel und den Rechner, die Inhalte steigen in sechs Stufen
   zum Ziel, die Denkfehler werden durchgestrichen.
   ========================================================= */

/* ---------- Kennzahlen: goldene Linie zeichnet sich unter jeder Zahl ---------- */
.kennzahl strong{ position: relative; padding-bottom: 14px; }
.kennzahl strong::after{
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 56px; height: 2px;
  margin-left: -28px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 1s var(--ease) 0.5s;
}
.kennzahl.visible strong::after{ transform: scaleX(1); }

/* ---------- Formel ueber den drei Hebeln ---------- */
.formel{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 10px 18px;
  max-width: 980px;
  margin: 0 auto 56px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.formel-op{ color: var(--accent-2); font-weight: 300; font-size: 1.3em; line-height: 1; }
.formel-ergebnis{
  padding: 4px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-2);
}

.hebel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hebel{
  position: relative;
  padding: 36px 32px 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 60%, var(--bg) 100%);
  overflow: hidden;
}
/* Goldkante oben zeichnet sich beim Hereinscrollen */
.hebel::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease) 0.3s;
}
.hebel.visible::before{ transform: scaleX(1); }
.hebel:nth-child(2).visible::before{ transition-delay: 0.45s; }
.hebel:nth-child(3).visible::before{ transition-delay: 0.6s; }
.hebel-nr{
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hebel h3{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 12px;
}
.hebel p{ font-size: 15px; line-height: 1.7; color: var(--text-dim); }
@media (max-width:980px){
  .hebel-grid{ grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

/* ---------- Probleme: Beispieltag statt Foto ---------- */
.tagesplan{
  margin: 0;
  padding: 32px 30px 28px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
  background: var(--light-3);
  box-shadow: 0 30px 60px -40px rgba(30,24,12,0.35);
}
.tagesplan figcaption{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light-strong);
}
.tagesplan-kopf{ font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tagesplan-hinweis{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tagesplan-liste{ list-style: none; }
.tagesplan-liste li{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.tagesplan-liste time{ font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.tagesplan-liste em{
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Verkauf: goldener Rand, kraeftige Schrift. Alles andere grau. */
.tagesplan-liste .ist-umsatz{ border-left-color: var(--accent); background: var(--accent-soft-light); color: var(--ink); font-weight: 600; }
.tagesplan-liste .ist-umsatz em{ color: var(--accent-deep); }
.tagesplan-liste .ist-kein-umsatz em{ color: var(--ink-mute); }
.tagesplan-liste .ist-liegen{ border: 1px dashed var(--line-light-strong); border-left-width: 3px; }
.tagesplan-liste .ist-liegen span{ text-decoration: line-through; text-decoration-color: var(--ink-mute); }
.tagesplan-liste .ist-liegen em{ color: #8a2e1c; }
@media (max-width:480px){
  .tagesplan{ padding: 24px 16px 20px; }
  .tagesplan-liste li{ grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; font-size: 14px; }
  .tagesplan-liste em{ grid-column: 2; }
}

/* ---------- Rechner: Formel zum Selberrechnen ---------- */
.rechner-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.rechner-zitat{
  margin: 28px 0 36px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}
.rechner-zitat p{ font-size: 18px; line-height: 1.6; color: var(--text); }
.rechner-zitat footer{ margin-top: 10px; font-size: 13px; color: var(--text-dim); }

.rechner{
  padding: 36px 34px 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(13,12,10,0.78);
  backdrop-filter: blur(6px);
}
.rechner h3{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 22px;
}
.regler + .regler{ margin-top: 18px; }
.regler label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--text-dim);
}
.regler output{ font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* Schieberegler: Spur in Gold bis zum Daumen (--wert setzt das Skript) */
.regler input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  --wert: 30%;
}
.regler input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0 var(--wert), var(--line-strong) var(--wert) 100%);
}
.regler input[type="range"]::-moz-range-track{ height: 4px; border-radius: 2px; background: var(--line-strong); }
.regler input[type="range"]::-moz-range-progress{ height: 4px; border-radius: 2px; background: var(--accent); }
.regler input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--gold-flaeche);
  box-shadow: 0 0 0 1px var(--accent);
}
.regler input[type="range"]::-moz-range-thumb{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent);
}
.regler input[type="range"]:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

.rechner-ergebnis{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.rechner-zeile{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
}
.rechner-zeile + .rechner-zeile{ margin-top: 16px; }
.rechner-wer{ font-size: 14px; color: var(--text-dim); }
.rechner-zeile--top .rechner-wer{ color: var(--accent-2); font-weight: 600; }
.rechner-balken{
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}
.rechner-balken > span{
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--text-mute);
  transform: scaleX(var(--anteil, 0));
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.rechner-zeile--top .rechner-balken > span{ background: var(--gold-flaeche); }
.rechner-zahl{
  grid-column: 2;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.rechner-zahl strong{ color: var(--text); font-weight: 700; }
.rechner-zeile--top .rechner-zahl strong{ color: var(--accent-2); }
.rechner-hinweis{ margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
@media (max-width:980px){
  .rechner-grid{ grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width:480px){
  .rechner{ padding: 28px 20px 24px; }
  .rechner-zeile{ grid-template-columns: 1fr; }
  .rechner-zahl{ grid-column: 1; }
}

/* ---------- Inhalte: sechs Stufen, die zum Ziel aufsteigen ---------- */
.aufstieg{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
}
.schritt{
  position: relative;
  padding: 30px 28px 28px;
  /* Schmale Stufen: lange Woerter wie „Vertriebserfolgsformel“ trennen */
  hyphens: auto;
  overflow-wrap: break-word;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg) 100%);
}
.schritt-nr{
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.schritt h3{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 14px;
}
.schritt ul{ list-style: none; }
.schritt li{
  position: relative;
  padding: 7px 0 7px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}
.schritt li::before{
  content: '';
  position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.aufstieg-ziel{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 30px 32px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(241,210,122,0.14), transparent 70%),
    var(--bg-2);
}
.aufstieg-ziel .schritt-nr{ margin-bottom: 0; }
.aufstieg-ziel strong{
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aufstieg-ziel > span:last-child{ font-size: 15px; color: var(--text-dim); }
/* Breit: jede Stufe steht etwas hoeher als die vorige, wie eine Treppe.
   Die Goldkante links waechst mit der Stufe. */
@media (min-width:1081px){
  .aufstieg{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .schritt{ grid-row: 2; padding: 26px 20px 24px; }
  .schritt h3{ font-size: 18px; }
  .schritt:nth-child(1){ margin-bottom: 0; }
  .schritt:nth-child(2){ margin-bottom: 28px; }
  .schritt:nth-child(3){ margin-bottom: 56px; }
  .schritt:nth-child(4){ margin-bottom: 84px; }
  .schritt:nth-child(5){ margin-bottom: 112px; }
  .schritt:nth-child(6){ margin-bottom: 140px; }
  .schritt.reveal{ transform: translateY(64px); transition-duration: 1s; }
  .schritt.reveal.visible{ transform: none; }
  .schritt:nth-child(2).reveal{ transition-delay: 0.08s; }
  .schritt:nth-child(3).reveal{ transition-delay: 0.16s; }
  .schritt:nth-child(4).reveal{ transition-delay: 0.24s; }
  .schritt:nth-child(5).reveal{ transition-delay: 0.32s; }
  .schritt:nth-child(6).reveal{ transition-delay: 0.4s; }
  /* Das Ziel steht oben rechts, dort wo die Treppe hinfuehrt */
  .aufstieg-ziel{ grid-row: 1; grid-column: 4 / -1; margin-bottom: 8px; }
}
@media (max-width:1080px) and (min-width:701px){
  .aufstieg{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:700px){
  .aufstieg{ grid-template-columns: 1fr; }
}

/* ---------- Denkfehler: der Satz aus dem Mittelfeld wird durchgestrichen ---------- */
.denkfehler-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.denkfehler{
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--line-light-strong);
  border-radius: var(--radius);
  background: var(--light-3);
}
.denkfehler-wer{
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.denkfehler-satz{
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-dim);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-light);
}
/* Strich zeichnet sich beim Hereinscrollen von links nach rechts */
.denkfehler-satz s{
  text-decoration: none;
  background: linear-gradient(var(--ink-mute), var(--ink-mute)) no-repeat 0 58% / 0% 1.5px;
  transition: background-size 1s var(--ease) 0.5s;
}
.denkfehler.visible .denkfehler-satz s{ background-size: 100% 1.5px; }
.denkfehler-antwort{ font-size: 15px; line-height: 1.65; color: var(--ink); }
.denkfehler-antwort .denkfehler-wer{ color: var(--accent-deep); }
.denkfehler--cta{
  justify-content: center;
  border-color: transparent;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(241,210,122,0.18), transparent 70%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg) 100%);
  color: var(--text);
}
.denkfehler--cta h3{ font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 10px; }
.denkfehler--cta p{ font-size: 15px; line-height: 1.65; color: var(--text-dim); margin-bottom: 24px; }
.denkfehler--cta .btn{ align-self: flex-start; }
@media (max-width:1080px){
  .denkfehler-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:700px){
  .denkfehler-grid{ grid-template-columns: 1fr; }
  .denkfehler--cta .btn{ align-self: stretch; justify-content: center; }
}

/* ---------- Voraussetzungen (unter „Fuer wen“) ---------- */
.voraussetzungen{
  margin-bottom: 56px;
  padding: 36px 36px 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.voraussetzungen h3{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 24px;
}
.voraussetzungen ul{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.voraussetzungen strong{ display: block; font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.voraussetzungen p{ font-size: 14px; line-height: 1.65; color: var(--text-dim); }
@media (max-width:880px){
  .voraussetzungen ul{ grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width:600px){
  .voraussetzungen{ padding: 28px 22px 24px; }
}

/* =========================================================
   ANIMATIONEN
   Jede Bewegung zeigt etwas: Die Formel baut
   sich auf, eine Jetzt-Linie läuft durch den Beispieltag, die Stufen
   leuchten nacheinander, die Antwort folgt dem durchgestrichenen Satz.
   Gestartet wird über .visible (script.js, beim Hereinscrollen).
   Bei „Bewegung reduzieren“ steht alles sofort am Ziel (ganz unten).
   ========================================================= */

/* ---------- Hero ---------- */
/* Der Hauptbutton atmet leise, damit das Auge ihn findet */
.hero-cta .btn-primary{ animation: ctapuls 4s ease-in-out 3s infinite; }
@keyframes ctapuls{
  0%, 70%, 100%{ box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.25), 0 0 0 0 rgba(241,210,122,0); }
  82%          { box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.25), 0 0 0 12px rgba(241,210,122,0.16); }
}

/* ---------- Überschriften: ein Glanz läuft einmal über die Hervorhebung ---------- */
.visible .display em{
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.85) 50%, transparent 58%), var(--gold);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: emglanz 1.8s var(--ease) .5s both;
}
.visible .display-dark em{
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,248,225,0.95) 50%, transparent 58%), var(--gold-tief);
}
@keyframes emglanz{ from{ background-position: 120% 0, 0 0; } to{ background-position: -20% 0, 0 0; } }

/* ---------- Formel: baut sich Glied für Glied auf; jeder Hebel zeigt seinen Teil ---------- */
.formel > span{ position: relative; opacity: 0; transition: color .3s, text-shadow .3s, background-color .3s, box-shadow .3s; }
.formel.visible > span{ animation: formelein .6s var(--ease) both; animation-delay: calc(.15s + var(--n) * .16s); }
.formel > span:nth-child(1){ --n: 0; } .formel > span:nth-child(2){ --n: 1; } .formel > span:nth-child(3){ --n: 2; }
.formel > span:nth-child(4){ --n: 3; } .formel > span:nth-child(5){ --n: 4; } .formel > span:nth-child(6){ --n: 5; }
.formel > span:nth-child(7){ --n: 7; }
@keyframes formelein{ from{ opacity: 0; transform: translateY(16px) scale(.94); } to{ opacity: 1; transform: none; } }
.formel.visible .formel-ergebnis{ animation: formelein .6s var(--ease) both, ergebnis 1.6s ease both; animation-delay: calc(.15s + 7 * .16s), calc(.4s + 7 * .16s); }
@keyframes ergebnis{
  0%  { box-shadow: 0 0 0 0 rgba(226,192,106,0); }
  35% { box-shadow: 0 0 0 8px rgba(226,192,106,0.22), 0 0 40px rgba(226,192,106,0.35); background-color: rgba(226,192,106,0.12); }
  100%{ box-shadow: 0 0 0 0 rgba(226,192,106,0); }
}
.formel-teil[data-hebel]::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent-2); transform: scaleX(0); transition: transform .35s var(--ease);
}
.formel-teil.ist-aktiv{ color: var(--accent-2); text-shadow: 0 0 18px rgba(241,210,122,0.55); }
.formel-teil.ist-aktiv::after{ transform: scaleX(1); }
.formel.ist-aktiv .formel-ergebnis{ background-color: var(--accent-soft); box-shadow: 0 0 0 4px rgba(226,192,106,0.14), 0 0 30px rgba(226,192,106,0.3); }

/* ---------- Hebel: ein Lichtfleck folgt der Maus, die Karte hebt sich ---------- */
.hebel.reveal{ transition: opacity 1s var(--ease), transform 1s var(--ease), translate .35s var(--ease), border-color .35s, box-shadow .35s; }
.hebel > *{ position: relative; z-index: 1; }
.hebel::after{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(241,210,122,0.16), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.hebel:hover, .hebel.ist-aktiv{ translate: 0 -6px; border-color: rgba(226,192,106,0.45); box-shadow: 0 26px 60px -30px rgba(212,169,75,0.5); }
.hebel:hover::after, .hebel.ist-aktiv::after{ opacity: 1; }

/* ---------- Beispieltag: eine Jetzt-Linie läuft durch den Tag ---------- */
.tagesplan-liste{ position: relative; }
.tagesplan-liste .tagesplan-jetzt{
  position: absolute; left: -10px; right: -10px; top: 0;
  display: block; height: 2px; padding: 0; margin: 0; border: 0; border-radius: 1px;
  background: #C0392B; box-shadow: 0 0 10px rgba(192,57,43,0.45);
  opacity: 0; z-index: 2;
}
.tagesplan-liste .tagesplan-jetzt::before{ content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #C0392B; }
.tagesplan.visible .tagesplan-jetzt{ animation: jetzt 4.2s linear .4s both; }
@keyframes jetzt{ 0%{ top: 0; opacity: 1; } 96%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } }
.tagesplan.visible .ist-kein-umsatz{ animation: verblasst .5s ease calc(.66s + var(--i) * .52s) both; }
@keyframes verblasst{ to{ opacity: .62; filter: grayscale(1); } }
.tagesplan.visible .ist-umsatz{ animation: verkauf .8s var(--ease) calc(.66s + var(--i) * .52s) both; }
@keyframes verkauf{
  0%  { box-shadow: 0 0 0 0 rgba(212,169,75,0); }
  40% { box-shadow: 0 0 0 6px rgba(212,169,75,0.3); transform: scale(1.025); }
  100%{ box-shadow: 0 0 0 0 rgba(212,169,75,0); transform: none; }
}
.tagesplan.visible .ist-liegen{ animation: wackeln .6s ease calc(.66s + var(--i) * .52s) both; }
@keyframes wackeln{
  0%, 100%{ transform: none; }
  20%{ transform: translateX(-6px) rotate(-.6deg); } 40%{ transform: translateX(6px) rotate(.6deg); }
  60%{ transform: translateX(-3px); } 80%{ transform: translateX(3px); }
}

/* ---------- Treppe: jede Stufe bekommt nacheinander ihre Goldkante, das Ziel glänzt ---------- */
.schritt::after{
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  border-radius: 8px 8px 0 0; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}
.schritt.visible::after{ animation: stufe .7s var(--ease) both; animation-delay: calc(.6s + var(--n) * .2s); }
.schritt:nth-child(1){ --n: 0; } .schritt:nth-child(2){ --n: 1; } .schritt:nth-child(3){ --n: 2; }
.schritt:nth-child(4){ --n: 3; } .schritt:nth-child(5){ --n: 4; } .schritt:nth-child(6){ --n: 5; }
@keyframes stufe{ to{ transform: scaleX(1); } }
.aufstieg-ziel{ position: relative; overflow: hidden; }
.aufstieg-ziel::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,246,214,0.22) 50%, transparent 65%);
  transform: translateX(-110%);
}
.aufstieg-ziel.visible::after{ animation: zielglanz 6s ease-in-out 1.8s infinite; }
@keyframes zielglanz{ 0%{ transform: translateX(-110%); } 35%, 100%{ transform: translateX(110%); } }
.aufstieg-ziel.visible{ animation: zielpuls 1.6s ease 1.9s both; }
@keyframes zielpuls{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(226,192,106,0); } 40%{ box-shadow: 0 0 0 6px rgba(226,192,106,0.18), 0 0 50px rgba(226,192,106,0.3); } }

/* ---------- Denkfehler: erst der Strich, dann die Antwort ---------- */
.denkfehler-antwort{ opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) 1.3s, transform .6s var(--ease) 1.3s; }
.denkfehler.visible .denkfehler-antwort{ opacity: 1; transform: none; }

/* ---------- Vorher/nachher: die Haken springen nacheinander auf ---------- */
.vergleich-spalte--mit .vergleich-icon{ transform: scale(0); }
.vergleich-spalte--mit.visible .vergleich-icon{ animation: haken .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.vergleich-spalte--mit.visible li:nth-child(1) .vergleich-icon{ animation-delay: .5s; }
.vergleich-spalte--mit.visible li:nth-child(2) .vergleich-icon{ animation-delay: .65s; }
.vergleich-spalte--mit.visible li:nth-child(3) .vergleich-icon{ animation-delay: .8s; }
.vergleich-spalte--mit.visible li:nth-child(4) .vergleich-icon{ animation-delay: .95s; }
.vergleich-spalte--mit.visible li:nth-child(5) .vergleich-icon{ animation-delay: 1.1s; }
@keyframes haken{ from{ transform: scale(0); } to{ transform: scale(1); } }

/* ---------- Weniger Bewegung: alles sofort an seinem Platz ---------- */
@media (prefers-reduced-motion: reduce){
  .training-hero .hero-title .line > span{ animation: revealUp 0.01s forwards; }
  .hebel::before,
  .kennzahl strong::after{ transform: none; transition: none; }
  .denkfehler-satz s{ background-size: 100% 1.5px; transition: none; }
  .schritt.reveal{ transform: none; }
  .rechner-balken > span{ transition: none; }
  .hero-cta .btn-primary, .visible .display em, .aufstieg-ziel.visible, .aufstieg-ziel.visible::after{ animation: none; }
  .formel > span, .formel.visible > span, .formel.visible .formel-ergebnis{ opacity: 1; animation: none; }
  .tagesplan-liste .tagesplan-jetzt{ display: none; }
  .tagesplan .ist-kein-umsatz, .tagesplan.visible .ist-kein-umsatz{ animation: none; opacity: .62; filter: grayscale(1); }
  .tagesplan.visible .ist-umsatz, .tagesplan.visible .ist-liegen{ animation: none; }
  .schritt::after, .schritt.visible::after{ animation: none; transform: scaleX(1); }
  .denkfehler-antwort{ opacity: 1; transform: none; transition: none; }
  .vergleich-spalte--mit .vergleich-icon, .vergleich-spalte--mit.visible .vergleich-icon{ animation: none; transform: none; }
  .hebel:hover, .hebel.ist-aktiv{ translate: none; }
}