/* ============================================================
   Ästhetik-Akquise-Masterclass — Landingpage
   Style: „Die Erfolgsvisite" — dunkel · cream · gold · editorial
   ============================================================ */

:root {
  --ink:        #0d0c0a;
  --ink-2:      #100e0b;
  --panel:      #15120d;
  --panel-2:    #1b1812;
  --cream:      #f0e6cf;
  --cream-soft: #f5ecd6;
  --cream-dim:  rgba(240,230,207,0.74);
  --gold:       #c9b58f;
  --gold-deep:  #a8915f;
  --gold-muted: #8a7c60;
  --muted:      #8c8473;
  --line:       rgba(240,230,207,0.14);
  --line-soft:  rgba(240,230,207,0.08);
  --ok:         #7fae84;
  --font-sans:  "Figtree", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--cream-soft);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(201,181,143,0.10) 0%, rgba(13,12,10,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.90  0 0 0 0 0.81  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.section { padding: clamp(76px, 10vw, 160px) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }

/* divider line between sections */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; margin: 0; }

/* ---- shared type ---- */
.eyebrow {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(12px, 1.2vw, 13px); letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.h-sec {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.12; letter-spacing: -0.015em;
  color: #fbf4e3; margin: 0; text-wrap: balance;
}
.h-sec em { color: var(--gold); }
.lead {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.62;
  color: var(--cream-dim); margin: 18px 0 0; text-wrap: pretty;
}
.sec-head { text-align: center; max-width: 940px; margin: 0 auto clamp(40px, 5vw, 64px); }
.sec-head--wide { max-width: 1140px; }

.orn { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 0; }
.orn::before, .orn::after { content: ""; width: 64px; height: 1px; background: var(--line); }
.orn span { color: var(--gold); font-size: 10px; opacity: 0.8; letter-spacing: 0.2em; }

/* ============================================================
   CTA buttons
   ============================================================ */
.btn {
  appearance: none; cursor: pointer; border: 0; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.01em;
  border-radius: 999px; transition: transform .15s ease, box-shadow .3s ease, background .3s;
  white-space: nowrap;
}
.btn .arr { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(240,230,207,0.12); transition: transform .28s cubic-bezier(.4,0,.2,1), background .28s; }
.btn .arr svg { width: 14px; height: 14px; display: block; }
.btn:hover .arr { transform: translateX(4px); background: rgba(240,230,207,0.2); }
.btn--primary {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(240,230,207,0.45);
  padding: 17px 32px; font-size: clamp(15px, 1.5vw, 17px); font-weight: 700;
}
.btn--primary:hover { transform: translateY(-2px); background: rgba(240,230,207,0.08); border-color: var(--cream); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
@keyframes shimmer { 0%{background-position:-180% 0;} 55%{background-position:180% 0;} 100%{background-position:180% 0;} }
.btn--ghost {
  background: transparent; color: var(--cream);
  border: 1px solid var(--line); padding: 16px 30px; font-size: 15px; font-weight: 700;
}
.btn--ghost:hover { background: rgba(240,230,207,0.08); border-color: rgba(240,230,207,0.5); }
.btn--lg { padding: 21px 44px; font-size: clamp(16px, 1.7vw, 19px); }

.cta-note {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 0 0; font-size: 13px; color: var(--muted); letter-spacing: 0.02em;
}
.cta-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(201,181,143,0.7); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(13,12,10,0.72);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.topbar img { height: 30px; width: auto; }
.topbar .tb-cta { display: inline-flex; }
.topbar .btn--primary { padding: 12px 24px; font-size: 14px; animation-duration: 5s; }
@media (max-width: 600px) { .topbar .btn--primary { padding: 11px 18px; font-size: 13px; } .topbar img { height: 26px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(66px, 8.5vw, 124px); padding-bottom: clamp(40px, 5vw, 70px); position: relative; }
.hero .badge-row { display: flex; justify-content: center; margin: 0 0 26px; }
.kbadge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 20px; border-radius: 999px; line-height: 1.1;
  background: linear-gradient(180deg, rgba(201,181,143,0.16), rgba(201,181,143,0.05));
  border: 1px solid rgba(201,181,143,0.32);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream);
  white-space: nowrap;
}
.kbadge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,181,143,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(201,181,143,0.5);} 70%{box-shadow:0 0 0 12px rgba(201,181,143,0);} 100%{box-shadow:0 0 0 0 rgba(201,181,143,0);} }

.hero h1 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4.8vw, 58px); line-height: 1.08; letter-spacing: -0.02em;
  color: #fdf7e8; margin: 0 auto; text-align: center; max-width: 1040px;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero .hero-sub {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55;
  color: var(--cream-dim); text-align: center; max-width: 60ch; margin: 24px auto 0; text-wrap: pretty;
}

/* central video */
.hero-video-wrap { max-width: 880px; margin: clamp(36px, 4.5vw, 54px) auto 0; }
.video-border {
  border-radius: 18px; padding: 1.6px;
  background-image: linear-gradient(135deg,
    rgba(240,230,207,0.6) 0%, rgba(240,230,207,0.12) 26%,
    rgba(13,12,10,0) 52%, rgba(201,181,143,0.22) 76%, rgba(240,230,207,0.5) 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.4);
}
.video-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
}
.video-frame wistia-player { display: block; width: 100%; height: 100%; }
.video-ph {
  position: absolute; inset: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(201,181,143,0.12), rgba(13,12,10,0) 70%),
    linear-gradient(160deg, #1c1812 0%, #0d0c0a 100%);
}
.video-ph .play {
  width: 86px; height: 86px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(240,230,207,0.22), rgba(240,230,207,0.08));
  border: 1px solid rgba(240,230,207,0.55); display: grid; place-items: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 50px rgba(201,181,143,0.25);
  transition: transform .2s ease;
}
.video-ph:hover .play { transform: scale(1.07); }
.video-ph .play::after { content: ""; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid var(--cream); margin-left: 5px; }
.video-ph .ph-note { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,230,207,0.5); font-weight: 600; }
.video-ph .ph-time {
  position: absolute; right: 16px; bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--cream);
  background: rgba(13,12,10,0.7); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
}

.hero-cta { display: flex; flex-direction: column; align-items: center; margin-top: clamp(30px, 4vw, 44px); }

/* hero stat strip */
.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px);
  margin: clamp(34px, 4.5vw, 52px) auto 0; max-width: 820px;
}
.hstat { text-align: center; }
.hstat .n { font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 3.2vw, 40px); color: #fbf4e3; line-height: 1; }
.hstat .l { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 9px; font-weight: 600; }

/* ============================================================
   Trust logo strip
   ============================================================ */
.trust { padding: clamp(30px, 4vw, 44px) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trust .tlabel { text-align: center; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; font-weight: 700; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); }
.logos img { height: clamp(26px, 3vw, 36px); width: auto; opacity: 0.62; filter: brightness(0) invert(1); transition: opacity .25s; }
.logos img:hover { opacity: 0.95; }

/* ============================================================
   Module — eigenständige, alternierende Reihen
   ============================================================ */
.modrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.modrow + .modrow { margin-top: clamp(52px, 8vw, 104px); }
.modrow.alt .modrow-media { order: 2; }
.modrow-media { position: relative; }
.modrow-frame {
  position: relative; border-radius: 24px; padding: 1.6px; overflow: hidden;
  background-image: linear-gradient(150deg, rgba(240,230,207,0.5) 0%, rgba(13,12,10,0) 46%, rgba(201,181,143,0.34) 100%);
  box-shadow: 0 44px 90px rgba(0,0,0,0.5);
}
.modrow-inner {
  position: relative; border-radius: 23px; overflow: hidden; aspect-ratio: 5 / 4;
  background:
    radial-gradient(ellipse 78% 72% at 50% 122%, rgba(201,181,143,0.22), rgba(13,12,10,0) 64%),
    linear-gradient(165deg, #1b1610 0%, #0d0c0a 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.modrow-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -60px 80px rgba(13,12,10,0.6); }
.modrow-inner img { width: 90%; max-height: 112%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.55)); align-self: flex-end; position: relative; z-index: 1; }
.modrow-pill {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  font-family: var(--font-serif); font-style: italic; font-size: 14px; letter-spacing: 0.1em;
  color: #1a1610; background: var(--cream); padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.modrow-num { font-family: var(--font-serif); font-style: italic; font-size: 15px; letter-spacing: 0.2em; color: var(--gold); margin: 0 0 14px; }
.modrow-body h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(25px, 3.1vw, 38px); color: #fbf4e3; margin: 0 0 16px; line-height: 1.1; letter-spacing: -0.01em; }
.modrow-body .mdesc { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62; color: var(--cream-dim); margin: 0; }
.modrow-dur { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.modrow-dur::before { content: ""; width: 20px; height: 1px; background: var(--gold); }

.lessons { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lessons li { display: flex; align-items: flex-start; gap: 15px; font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.45; color: var(--cream-soft); }
.lessons .lm {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(201,181,143,0.22), rgba(201,181,143,0.06));
  border: 1px solid rgba(201,181,143,0.36); color: var(--gold);
  display: grid; place-items: center; margin-top: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.lessons .lm svg { width: 14px; height: 14px; }

/* Modul-Foto füllt den Rahmen */
.modrow-inner img.mod-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; filter: none; }
.modrow-inner .mphoto-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(13,12,10,0.05) 0%, rgba(13,12,10,0) 35%, rgba(13,12,10,0.45) 100%); }

/* Modul-Bild-Platzhalter (wie Video-Platzhalter) */
.mod-ph { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.mod-ph-ic {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(240,230,207,0.2), rgba(240,230,207,0.06));
  border: 1px solid rgba(240,230,207,0.5); display: grid; place-items: center; color: var(--cream);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 44px rgba(201,181,143,0.2);
}
.mod-ph-ic svg { width: 32px; height: 32px; }
.mod-ph .ph-note { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,230,207,0.5); font-weight: 600; }

/* ============================================================
   Sneak peek
   ============================================================ */
.peeks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); }
.peek { display: flex; flex-direction: column; }
.peek .video-border { border-radius: 15px; }
.peek .video-frame { border-radius: 13px; }
.peek h4 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.9vw, 23px); color: #fbf4e3; margin: 20px 0 8px; }
.peek p { font-size: 14.5px; line-height: 1.55; color: var(--cream-dim); margin: 0; }
.peek .ptag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 0; }

/* ============================================================
   Dozent
   ============================================================ */
.dozent { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.dozent-photo { position: relative; }
.dozent-photo .pf {
  border-radius: 22px; padding: 1.6px;
  background-image: linear-gradient(150deg, rgba(240,230,207,0.5), rgba(13,12,10,0) 50%, rgba(201,181,143,0.32));
  box-shadow: 0 44px 90px rgba(0,0,0,0.5);
}
.dozent-photo .pf-inner {
  position: relative; border-radius: 21px; overflow: hidden; aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 80% 70% at 50% 122%, rgba(201,181,143,0.22), rgba(13,12,10,0) 64%),
    linear-gradient(165deg, #1b1610 0%, #0d0c0a 100%);
  display: flex; align-items: flex-end; justify-content: center;
}
.dozent-photo .pf-inner img { height: 100%; width: auto; max-width: 116%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55)); border-radius: 0; }
.dozent-photo .pf-cap {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: 13px;
  background: rgba(13,12,10,0.66); backdrop-filter: blur(10px); border: 1px solid var(--line);
}
.dozent-photo .pf-cap .nm { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: #fbf4e3; }
.dozent-photo .pf-cap .rl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.dozent-body .h-sec { text-align: left; }
.dozent-body .eyebrow { margin-bottom: 16px; }
.dozent-quote {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45; color: var(--cream-soft); margin: 22px 0 0; padding-left: 22px;
  border-left: 2px solid var(--gold);
}
.dozent-facts { display: flex; flex-wrap: wrap; gap: 28px; margin: 28px 0 0; }
.dozent-facts .df .n { font-family: var(--font-serif); font-style: italic; font-size: 30px; color: var(--gold); line-height: 1; }
.dozent-facts .df .l { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 7px; font-weight: 600; }

/* Marken-Ökosystem (weiße Logos) */
.dozent-eco { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.dozent-eco .eco-label { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 16px; }
.eco-logos { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.eco-logos > * { opacity: 0.92; }
.eco-logos .eco-su { height: 26px; width: auto; display: block; }
.eco-mark { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.eco-mark.ps { font-family: var(--font-sans); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.eco-mark.ps .estar { width: 25px; height: 25px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,0.65); display: grid; place-items: center; flex: 0 0 auto; }
.eco-mark.ps .estar svg { width: 13px; height: 13px; color: #fff; }
.eco-mark.ev { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: #fff; letter-spacing: -0.01em; }
@media (max-width: 900px) { .dozent-eco { text-align: center; } .eco-logos { justify-content: center; } }

/* ============================================================
   Value stack
   ============================================================ */
.stack-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 4vw, 52px); align-items: start; }

/* Bonus-Karten mit Mockups */
.bonus-list { display: flex; flex-direction: column; gap: 18px; }
.bonus {
  display: grid; grid-template-columns: 176px 1fr; gap: 24px; align-items: center;
  padding: 18px; border-radius: 18px;
  background: linear-gradient(170deg, var(--panel) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(0,0,0,0.26);
}
.bonus.is-bonus { border-color: rgba(201,181,143,0.32); }
.bonus-mock {
  position: relative; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden;
  background: linear-gradient(160deg, #18130d, #0c0b09); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.4);
}
.bonus-tag { display: inline-block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: var(--gold); margin: 0 0 8px; }
.bonus h4 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(16px, 1.6vw, 18px); color: #fbf4e3; margin: 0 0 7px; line-height: 1.25; }
.bonus p { font-size: 13.5px; line-height: 1.52; color: var(--cream-dim); margin: 0; }
.bonus .bval { margin-top: 11px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--gold-muted); }

/* --- Mockup-Innereien --- */
.mk-play { position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #f4ecd7, #c9b58f); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.mk-play::after { content: ""; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #14110b; margin-left: 3px; }
.mk-rows { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.mk-rows i { height: 8px; border-radius: 3px; background: rgba(240,230,207,0.14); display: block; }
.mk-rows i.g { background: linear-gradient(90deg, rgba(201,181,143,0.75), rgba(201,181,143,0.12)); width: 64%; }

.mk-case-doc { position: absolute; border-radius: 9px; background: linear-gradient(160deg,#211b12,#15110b); border: 1px solid rgba(201,181,143,0.22); }
.mk-case-doc.d1 { inset: 26px 30px 18px 16px; transform: rotate(-5deg); }
.mk-case-doc.d2 { inset: 16px 16px 22px 26px; }
.mk-metric { position: absolute; top: 20px; right: 18px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--gold); z-index: 3; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

.mk-check-rows { position: absolute; inset: 18px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mk-check-row { display: flex; align-items: center; gap: 11px; }
.mk-check-box { width: 17px; height: 17px; border-radius: 5px; background: rgba(201,181,143,0.18); border: 1px solid rgba(201,181,143,0.42); display: grid; place-items: center; color: var(--gold); flex: 0 0 auto; }
.mk-check-box svg { width: 10px; height: 10px; }
.mk-check-line { height: 7px; border-radius: 3px; background: rgba(240,230,207,0.16); flex: 1; }
.mk-check-line.s { max-width: 60%; }

.mk-gauge { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6px; }
.mk-score { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: #fbf4e3; }
.mk-score b { color: var(--gold); font-size: 19px; }

/* dezente Mockup-Animationen */
@media (prefers-reduced-motion: no-preference) {
  .mk-play { animation: mkPlay 2.8s ease-in-out infinite; }
  @keyframes mkPlay {
    0%, 100% { transform: translate(-50%,-50%) scale(1); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
    50% { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 26px rgba(201,181,143,0.45); }
  }
  .mk-rows i.g { animation: mkRow 2.8s ease-in-out infinite; }
  @keyframes mkRow { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

  .mk-svg polyline { stroke-dasharray: 260; stroke-dashoffset: 260; animation: mkDraw 4s ease-in-out infinite; }
  @keyframes mkDraw { 0% { stroke-dashoffset: 260; } 38%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
  .mk-metric { animation: mkMetric 4s ease-in-out infinite; }
  @keyframes mkMetric { 0%, 20% { opacity: 0; transform: translateY(5px); } 48%, 100% { opacity: 1; transform: none; } }

  .mk-gauge svg line { transform-box: fill-box; transform-origin: 0% 100%; animation: mkNeedle 4s ease-in-out infinite; }
  @keyframes mkNeedle { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(7deg); } }

  .mk-check-box { animation: mkPop 3.4s ease-in-out infinite; }
  .mk-check-row:nth-child(2) .mk-check-box { animation-delay: .22s; }
  .mk-check-row:nth-child(3) .mk-check-box { animation-delay: .44s; }
  .mk-check-row:nth-child(4) .mk-check-box { animation-delay: .66s; }
  @keyframes mkPop { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } }
}

/* price card */
.price-card {
  position: sticky; top: 96px;
  border-radius: 20px; padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(165deg, var(--panel-2) 0%, var(--ink) 100%);
  border: 1px solid rgba(201,181,143,0.3);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 50px rgba(201,181,143,0.07) inset;
  text-align: center;
}
.price-card .pc-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.price-card .pc-total { margin: 18px 0 6px; font-size: 14px; color: var(--muted); }
.price-card .pc-total s { color: var(--gold-muted); }
.price-card .pc-price { font-family: var(--font-serif); font-style: italic; font-size: clamp(46px, 6vw, 64px); color: #fdf7e8; line-height: 1; }
.price-card .pc-price small { font-size: 0.42em; letter-spacing: 0.04em; color: var(--cream-dim); font-style: normal; display: block; margin-top: 10px; font-family: var(--font-sans); }
.price-card .btn { width: 100%; margin-top: 26px; }
.price-card .pc-list { text-align: left; margin: 26px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; }
.price-card .pc-list li { list-style: none; display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--cream-dim); }
.check { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px; background: rgba(201,181,143,0.16); border: 1px solid rgba(201,181,143,0.34); display: grid; place-items: center; margin-top: 1px; }
.check svg { width: 12px; height: 12px; color: var(--gold); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; color: var(--cream-soft);
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(16px, 1.7vw, 19px);
}
.faq-q .ic { flex: 0 0 auto; width: 26px; height: 26px; position: relative; transition: transform .3s; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: opacity .3s; }
.faq-q .ic::before { left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%); }
.faq-q .ic::after { top: 50%; left: 4px; right: 4px; height: 2px; transform: translateY(-50%); }
.faq-item.open .faq-q .ic::before { opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 4px 26px; font-size: 15.5px; line-height: 1.62; color: var(--cream-dim); max-width: 92%; }

/* ============================================================
   Final CTA
   ============================================================ */
.final { text-align: center; position: relative; }
.final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(201,181,143,0.12), transparent 70%);
}
.final .h-sec { max-width: 900px; margin: 0 auto; }
.final .lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
.final .hero-cta { margin-top: 36px; }

/* ============================================================
   Footer
   ============================================================ */
.foot { padding: 40px 0; border-top: 1px solid var(--line-soft); }
.foot .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot img { height: 26px; opacity: 0.85; }
.foot .fnote { font-size: 12.5px; color: var(--muted); }
.foot .flinks { display: flex; gap: 22px; font-size: 13px; }
.foot .flinks a { color: var(--cream-dim); text-decoration: none; }
.foot .flinks a:hover { color: var(--cream); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn--primary { animation: none; } }

/* ============================================================
   Reasons (logische Gründe)
   ============================================================ */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 22px); max-width: 1000px; margin: 0 auto; }
.reason {
  display: flex; gap: 18px; align-items: flex-start;
  padding: clamp(22px, 2.4vw, 30px); border-radius: 16px;
  background: linear-gradient(170deg, var(--panel) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.reason .ri {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(201,181,143,0.2), rgba(201,181,143,0.06));
  border: 1px solid rgba(201,181,143,0.34); color: var(--gold);
  display: grid; place-items: center;
}
.reason .ri svg { width: 23px; height: 23px; }
.reason h4 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 21px); color: #fbf4e3; margin: 0 0 7px; line-height: 1.2; }
.reason p { font-size: 14.5px; line-height: 1.55; color: var(--cream-dim); margin: 0; }

/* ============================================================
   Comparison table
   ============================================================ */
.compare { max-width: 1000px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(170deg, var(--panel), var(--ink-2)); }
.compare-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: stretch; }
.compare-row + .compare-row { border-top: 1px solid var(--line-soft); }
.compare-row > div { padding: clamp(15px, 1.7vw, 20px) clamp(14px, 1.8vw, 24px); display: flex; align-items: center; gap: 10px; font-size: clamp(13.5px, 1.45vw, 15.5px); }
.compare-row .cc-feat { color: var(--cream-soft); font-weight: 600; }
.compare-row .cc-us { color: #fbf4e3; background: rgba(201,181,143,0.07); border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); font-weight: 600; }
.compare-row .cc-them { color: var(--muted); }
.compare-head > div { font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.01em; font-size: clamp(13px, 1.5vw, 16px); text-transform: none; }
.compare-head { background: rgba(0,0,0,0.25); }
.compare-head .cc-us { color: var(--gold); background: rgba(201,181,143,0.12); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(15px,1.7vw,19px); }
.compare-head .cc-them { color: var(--cream-dim); }
.compare-head .cc-feat { color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.cc-ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.cc-ic.yes { background: rgba(201,181,143,0.18); color: var(--gold); }
.cc-ic.no { background: rgba(240,230,207,0.06); color: var(--muted); }
.cc-ic svg { width: 12px; height: 12px; }

/* ============================================================
   Scarcity band
   ============================================================ */
.scarcity-wrap { max-width: 940px; margin: 0 auto; text-align: center; padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 52px); border-radius: 20px; background: linear-gradient(165deg, var(--panel-2), var(--ink)); border: 1px solid rgba(201,181,143,0.3); box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 50px rgba(201,181,143,0.06) inset; }
.scarcity-wrap .eyebrow { text-align: center; }
.scarcity-msg { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: var(--cream-soft); margin: 0 auto 26px; max-width: 64ch; }
.scar-bar { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 0 auto 16px; max-width: 560px; }
.scar-cell { width: 30px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, rgba(201,181,143,0.85), rgba(168,145,95,0.7)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.scar-cell.free { background: rgba(240,230,207,0.1); border: 1px solid rgba(201,181,143,0.5); box-shadow: none; animation: scarBlink 1.15s ease-in-out infinite; }
.scar-cell.free.f2 { animation-delay: .35s; }
@keyframes scarBlink { 0%,100% { background: rgba(240,230,207,0.08); box-shadow: 0 0 0 rgba(201,181,143,0); } 50% { background: rgba(201,181,143,0.5); box-shadow: 0 0 14px rgba(201,181,143,0.6); } }
.scar-label { font-size: 13px; letter-spacing: 0.06em; color: var(--cream-dim); font-weight: 600; }
.scar-label b { color: var(--gold); }
.scarcity-wrap .scar-cta { margin-top: 26px; max-width: 100%; }
.btn { max-width: 100%; }
@media (max-width: 540px) {
  .scarcity-wrap .scar-cta { white-space: normal; padding: 15px 22px; font-size: 14px; text-align: center; }
}

/* ============================================================
   Eingebettetes Lektions-Thumbnail (Sneak-Peek-Vorschau)
   ============================================================ */
.peek .video-frame { cursor: pointer; }
.peek-thumb { position: absolute; inset: 0; overflow: hidden; }
.peek-thumb .pscale { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; }
.pt { position: relative; width: 1280px; height: 720px; overflow: hidden; color: #fff;
  background:
    radial-gradient(ellipse 60% 75% at 22% 48%, rgba(201,181,143,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 75% 95% at 80% 60%, rgba(60,48,28,0.5) 0%, transparent 64%),
    linear-gradient(150deg,#15110b 0%,#0d0c0a 48%,#070605 100%); }
.pt-glow { position: absolute; right: 8%; bottom: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,181,143,0.22) 0%, rgba(201,181,143,0.06) 44%, transparent 68%); }
.pt-cut { position: absolute; right: 1%; bottom: 0; height: 99%; width: 50%; overflow: hidden; }
.pt-cut img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto;
  filter: drop-shadow(0 14px 30px rgba(0,6,16,0.6));
  -webkit-mask-image: linear-gradient(to bottom,#000 88%,transparent 100%); mask-image: linear-gradient(to bottom,#000 88%,transparent 100%); }
.pt-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg,#070605 0%,rgba(7,6,5,0.5) 50%,transparent 100%); }
.pt-leftveil { position: absolute; inset: 0; background: linear-gradient(90deg,#0c0b09 12%,rgba(12,11,9,0.4) 34%,transparent 52%); }
.pt-brand { position: absolute; top: 52px; left: 60px; display: flex; align-items: center; gap: 16px; }
.pt-brand img { height: 34px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.pt-brand .div { width: 1px; height: 26px; background: var(--line); }
.pt-brand .mc { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--cream); }
.pt-play { position: absolute; left: 46%; top: 43%; transform: translate(-50%,-50%); width: 118px; height: 118px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(240,230,207,0.22), rgba(240,230,207,0.07));
  border: 1px solid rgba(240,230,207,0.55); display: grid; place-items: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 50px rgba(201,181,143,0.25); }
.pt-play::after { content: ""; width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 19px solid transparent; border-left: 32px solid var(--cream); margin-left: 7px; }
.pt-cap { position: absolute; left: 60px; bottom: 60px; right: 46%; }
.pt-pill { display: inline-flex; align-items: center; gap: 10px; padding: 11px 19px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(201,181,143,0.2), rgba(201,181,143,0.06));
  border: 1px solid rgba(201,181,143,0.38); margin: 0 0 20px;
  font-family: var(--font-sans); font-weight: 800; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.pt-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pt-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 60px; line-height: 1.08; letter-spacing: -0.015em; color: #fdf7e8; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.pt-frame { position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(240,230,207,0.12); }

/* ============================================================
   Consequences
   ============================================================ */
.conseq { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.conseq-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(30,22,14,0.55), rgba(16,14,11,0.55));
  border: 1px solid var(--line); border-left: 2px solid rgba(201,181,143,0.55);
}
.conseq-item .cx { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(201,181,143,0.12); color: var(--gold); display: grid; place-items: center; margin-top: 1px; }
.conseq-item .cx svg { width: 14px; height: 14px; }
.conseq-item p { margin: 0; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.5; color: var(--cream-soft); }
.conseq-item p b { color: #fbf4e3; }
.conseq-close { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.8vw, 21px); color: var(--cream-soft); margin: clamp(26px,3vw,38px) auto 0; max-width: 60ch; }

/* ============================================================
   Live notification badge
   ============================================================ */
.live-badge {
  position: fixed; left: 18px; bottom: 18px; z-index: 80;
  display: flex; align-items: center; gap: 13px; max-width: 340px;
  padding: 13px 16px 13px 13px; border-radius: 14px;
  background: rgba(16,14,11,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
.live-badge.show { transform: translateY(0); opacity: 1; }
.live-badge .lb-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, rgba(201,181,143,0.25), rgba(201,181,143,0.08)); border: 1px solid rgba(201,181,143,0.36); color: var(--gold); display: grid; place-items: center; }
.live-badge .lb-ic svg { width: 19px; height: 19px; }
.live-badge .lb-tx { min-width: 0; }
.live-badge .lb-tx .t { font-size: 13px; line-height: 1.32; color: var(--cream-soft); }
.live-badge .lb-tx .t b { color: #fbf4e3; font-weight: 700; }
.live-badge .lb-tx .m { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.live-badge .lb-tx .m .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px rgba(201,181,143,0.8); }
.live-badge .lb-x { position: absolute; top: 7px; right: 9px; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; background: none; border: 0; }
.live-badge .lb-x:hover { color: var(--cream); }
@media (max-width: 520px) {
  .live-badge { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}

/* ============================================================
   Responsive — neue Sektionen
   ============================================================ */
@media (max-width: 760px) {
  .reasons { grid-template-columns: 1fr; max-width: 460px; }
  .compare-row { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .compare-row > div { padding: 13px 12px; font-size: 12.5px; gap: 7px; }
  .compare-head .cc-us { font-size: 14px; }
  .compare-row .cc-feat { font-size: 12.5px; }
  .cc-ic { width: 19px; height: 19px; }
  .scar-cell { width: 24px; height: 14px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .modrow { grid-template-columns: 1fr; gap: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .modrow.alt .modrow-media { order: 0; }
  .modrow-media { max-width: 400px; margin: 0 auto; width: 100%; }
  .peeks { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .dozent { grid-template-columns: 1fr; gap: 32px; }
  .dozent-photo { max-width: 420px; margin: 0 auto; }
  .dozent-body .h-sec { text-align: center; }
  .dozent-body .eyebrow { text-align: center; }
  .dozent-facts { justify-content: center; }
  .stack-grid { grid-template-columns: 1fr; }
  .price-card { position: static; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 540px) {
  .bonus { grid-template-columns: 1fr; gap: 16px; }
  .bonus-mock { max-width: 240px; }
}

/* ============================================================
   Zusätzliche Mobile-Optimierungen für Smartphones (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {
  /* 1. Eyebrow-Headline & Hero-Section */
  .hero {
    padding-top: 36px !important;
    padding-bottom: 30px !important;
  }
  .hero .badge-row {
    margin-bottom: 14px !important;
  }
  .kbadge {
    font-size: 10px !important;
    padding: 6px 12px !important;
    letter-spacing: 0.1em !important;
  }
  .hero h1 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  .hero .hero-sub {
    font-size: 14px !important;
    margin-top: 14px !important;
    padding: 0 4px !important;
  }

  /* 2. CTA-Buttons Höhe & Padding (insb. in Hero-Section & Navbar) */
  .btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  .btn--lg {
    padding: 14px 28px !important;
    font-size: 15px !important;
  }
  .btn .arr {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  .btn .arr svg {
    width: 11px !important;
    height: 11px !important;
  }
  
  /* Topbar CTA-Button */
  .topbar .btn--primary {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Text unter dem Hero CTA zentrieren */
  .cta-note {
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    margin-top: 12px !important;
  }

  /* 3. Warum diese Masterclass (Reasons) - zu viel Margin/Abstand */
  .section {
    padding: 40px 0 !important; /* Reduziert die extremen Sektions-Abstände */
  }
  .section--tight {
    padding: 24px 0 !important;
  }
  
  /* 4. Tabelle "Ehrlicher Vergleich" fixen */
  .compare-row {
    grid-template-columns: 1.3fr 0.85fr 0.85fr !important;
  }
  .compare-row > div {
    padding: 10px 6px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .compare-head .cc-us {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  .compare-row .cc-feat {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  .cc-ic {
    width: 16px !important;
    height: 16px !important;
  }
  .cc-ic svg {
    width: 10px !important;
    height: 10px !important;
  }
  .scar-cell {
    width: 20px !important;
    height: 12px !important;
  }

  /* 5. Sektion "Das ist alles enthalten" (Module / peeks / stack-grid) */
  .modrow {
    gap: 16px !important;
  }
  .modrow + .modrow {
    margin-top: 36px !important;
  }
  .modrow-body h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  .modrow-body .mdesc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  .lessons {
    margin-top: 16px !important;
    gap: 10px !important;
  }
  .lessons li {
    font-size: 13px !important;
    gap: 10px !important;
  }
  .lessons .lm {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }
  .lessons .lm svg {
    width: 11px !important;
    height: 11px !important;
  }
  .modrow-pill {
    top: 12px !important;
    left: 12px !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
  }
  .modrow-num {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .modrow-dur {
    margin-top: 12px !important;
    font-size: 11px !important;
  }

  /* 6. Sektion "Ihr Dozent" */
  .dozent {
    gap: 20px !important;
  }
  .dozent-photo {
    max-width: 320px !important;
  }
  .dozent-quote {
    font-size: 15px !important;
    margin-top: 16px !important;
    padding-left: 14px !important;
  }
  .dozent-facts {
    gap: 16px !important;
    margin-top: 18px !important;
  }
  .dozent-facts .df .n {
    font-size: 24px !important;
  }
  .dozent-facts .df .l {
    font-size: 10px !important;
    margin-top: 4px !important;
  }
  .dozent-eco {
    margin-top: 20px !important;
    padding-top: 18px !important;
  }
  .dozent-eco .eco-label {
    margin-bottom: 10px !important;
  }
  .eco-logos {
    gap: 14px !important;
  }
  .eco-logos img {
    max-height: 20px !important;
    width: auto !important;
  }
}

/* ============================================================
   Styling für die neue "Warum Gratis" Sektion
   ============================================================ */
.gratis-box {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(201, 181, 143, 0.05);
  border: 1px solid rgba(201, 181, 143, 0.12);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.gratis-ornament {
  display: none;
}
.gratis-box p {
  font-family: var(--font-sans);
  text-align: center;
}
.gratis-p1 {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--cream-soft);
  margin: 0 0 20px;
}
.gratis-p2 {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--cream-dim);
  margin: 0;
}

/* ============================================================
   Styling für das Formular-Popup (Modal)
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 12, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-container {
  background: #15120d;
  border: 1px solid rgba(201, 181, 143, 0.18);
  width: 90%;
  max-width: 520px;
  border-radius: 16px;
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.active .modal-container {
  transform: scale(1);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--cream-dim);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.modal-close:hover {
  color: var(--gold);
}
.modal-close svg {
  width: 20px;
  height: 20px;
}
.modal-head {
  text-align: center;
  margin-bottom: 24px;
}
.modal-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 28px);
  color: #fdf7e8;
  margin: 0 0 8px;
  line-height: 1.2;
}
.modal-subtitle {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--cream-dim);
  margin: 0;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.form-group label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--cream-soft);
  font-weight: 500;
}
.form-input {
  background: rgba(240, 230, 207, 0.04);
  border: 1px solid rgba(201, 181, 143, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 181, 143, 0.15);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  text-align: left;
}
.form-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-checkbox-group label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--cream-dim);
  line-height: 1.4;
  cursor: pointer;
}
.form-checkbox-group label a {
  color: var(--gold);
  text-decoration: underline;
}
.form-submit-btn {
  width: 100%;
  margin-top: 12px;
}
@media (max-width: 480px) {
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Sektion 'Der ehrliche Vergleich' auf Smartphones ausblenden */
  #vergleich, 
  #vergleich + .rule,
  hr.rule:has(+ #vergleich),
  #vergleich-divider {
    display: none !important;
  }

  /* Modulboxen 'Das ist alles enthalten' auf Smartphones zentrieren */
  .bonus {
    text-align: center;
    justify-items: center;
  }
  .bonus-mock {
    margin: 0 auto 12px;
    max-width: 176px;
    width: 100%;
  }
}