/* ==========================================================================
   Meinfluss Videokurs - Landingpage
   Nachbau von kurs.meinfluss.com
   ========================================================================== */

/* Selbst gehostet, damit beim Seitenaufruf keine Verbindung zu Google entsteht.
   Variable Schrift, deshalb genügen zwei Schnitte für alle Gewichte. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/jakarta-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/jakarta-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/jakarta-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gold: #bb9a65;
  --gold-light: #d4b98a;
  --gold-dark: #9a7d4e;
  /* Dunkle Schrift auf Gold: 7:1 statt 2,7:1 mit Weiß, damit WCAG AA erfüllt ist */
  --on-gold: #1a1408;
  --bg: #0d0d0d;
  --bg-elev: #181818;
  --bg-elev-2: #1f1f1f;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --text-dim: #6f6f6f;
  --green: #25d366;
  --green-dark: #1da851;
  --radius: 14px;
  --radius-lg: 20px;
  --container: 1080px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

p {
  margin: 0;
}

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

.narrow {
  max-width: 760px;
  margin-inline: auto;
}

.center {
  text-align: center;
}

/* --------------------------------------------------------------- Topbar */

.topbar {
  background: var(--gold);
  color: #1a1408;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10px 0;
  position: relative;
  z-index: 40;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.topbar strong {
  font-weight: 800;
}

.topbar-right {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.85;
}

/* ----------------------------------------------------------------- Logo */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.logo svg {
  height: 26px;
  width: auto;
}

/* --------------------------------------------------------------- Button */

.btn {
  --btn-bg: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-bg);
  color: var(--on-gold);
  border: 0;
  border-radius: 10px;
  padding: 17px 32px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 8px 24px rgba(187, 154, 101, 0.22);
}

.btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(187, 154, 101, 0.34);
}

.btn:active {
  transform: translateY(0);
}

.btn .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2b1f0c;
  box-shadow: 0 0 0 0 rgba(26, 20, 8, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(26, 20, 8, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 20, 8, 0);
  }
}

.btn-lg {
  padding: 20px 44px;
  font-size: 17px;
}

/* ---------------------------------------------------------------- Badge */

.badge {
  display: inline-block;
  border: 1px solid rgba(187, 154, 101, 0.45);
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(187, 154, 101, 0.07);
}

.badge-solid {
  background: var(--gold);
  color: #1a1408;
  border-color: transparent;
}

/* -------------------------------------------------------------- Section */

section {
  padding: 84px 0;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 38px);
  text-align: center;
}

.section-sub {
  color: var(--text-muted);
  text-align: center;
  font-size: 15px;
  margin-top: 18px;
}

/* ----------------------------------------------------------------- Hero */

.hero {
  padding: 40px 0 40px;
  text-align: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -200px 0 auto 50%;
  translate: -50% 0;
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side, rgba(187, 154, 101, 0.13), transparent);
  pointer-events: none;
}

.hero > * {
  position: relative;
}

.hero .logo {
  margin-bottom: 24px;
}

/* Das Label steht klein über der Headline, damit die eigentliche Aussage
   die größte Schrift auf der Seite bekommt und nicht der Kursname. */
.eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.hero h1 {
  /* Kleiner gesetzt als das Original, weil die Headline den Avatar mitnennt und
     dadurch länger ist. Mehr Zeichen pro Zeile heißt weniger Zeilen im Hero. */
  font-size: clamp(27px, 3.5vw, 39px);
  line-height: 1.18;
  max-width: 940px;
  margin-inline: auto;
  text-wrap: balance; /* verhindert ein einzelnes Wort in der letzten Zeile */
}

/* Das Nutzenversprechen bekommt die goldene Linie, damit das Auge beim
   Überfliegen daran hängen bleibt. */
.hero h1 .mark {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: none;
  text-underline-offset: 7px;
}

.video {
  position: relative;
  margin: 26px auto 0;
  max-width: 740px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.video:hover {
  transform: scale(1.012);
}

/* Auf niedrigen Fenstern schrumpft das Video mit, damit der CTA über der Falz bleibt.
   Der Abzug entspricht der Höhe von Topbar, Logo, Label, Headline, Subline, Button
   und Presse-Logos. */
@media (min-width: 901px) {
  .video {
    width: max(330px, min(740px, calc((100vh - 590px) * 16 / 9)));
  }
}

.video::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  pointer-events: none;
}

.hero-sub {
  color: var(--text-muted);
  max-width: 700px;
  margin: 22px auto 0;
  font-size: 16px;
}

.hero .btn {
  margin-top: 22px;
}

.disclaimer {
  max-width: 760px;
  margin: 46px auto 0;
  background: #240f0f;
  border: 1px solid rgba(220, 80, 80, 0.22);
  border-radius: var(--radius);
  padding: 24px 28px;
  font-size: 14px;
  color: #e8dcdc;
}

/* Auf dem Handy zählt nur eins: Der CTA muss ohne Scrollen sichtbar sein, und zwar
   auch bei sichtbarer Browserleiste (dvh statt vh). Dafür rückt der Button per order
   direkt unter das Video, die längere Subline wandert darunter, und Headline, Video
   und Abstände werden gedeckelt. Wer hier etwas ändert, prüft mit einem iframe in
   390x745 nach, ob die Presse-Logos noch komplett im Viewport liegen. */
@media (max-width: 600px) {
  .hero {
    padding-top: 22px;
  }

  .hero .container {
    display: flex;
    flex-direction: column;
  }

  .hero .logo { order: 1; margin-bottom: 14px; }
  .eyebrow    { order: 2; margin-bottom: 8px; font-size: 12px; }
  .hero h1    { order: 3; font-size: 23px; }
  .video      { order: 4; margin-top: 18px; max-height: 26dvh; }
  .hero .btn  { order: 5; margin-top: 18px; }
  .press      { order: 6; margin-top: 20px; }
  .hero-sub   { order: 7; font-size: 15px; margin-top: 22px; }
  .disclaimer { order: 8; }

  .press-row img:nth-child(1) { height: 28px; }
  .press-row img:nth-child(2) { height: 33px; }
  .press-row img:nth-child(3) { height: 20px; }
  .press-row img:nth-child(4) { height: 29px; }

  /* Der CTA bleibt einzeilig, sonst rutscht der Punkt vor dem Text nach außen */
  .hero .btn-lg {
    font-size: 16px;
    padding-inline: 18px;
    white-space: nowrap;
  }

  /* max-height greift nur, wenn das Bild mitzieht */
  .video picture,
  .video img {
    max-height: inherit;
    width: auto;
    margin-inline: auto;
  }
}

.disclaimer strong {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------- Logo-Leiste */

/* Die Logos stehen im Hero direkt unter dem CTA, deshalb kompakt gehalten:
   sie sollen den Button stützen und ihn nicht von der Falz schieben. */
.press {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 38px);
  flex-wrap: wrap;
  margin-top: 20px;
}

.press-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.press-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 46px);
  flex-wrap: wrap;
  opacity: 0.55;
}

.press-row img {
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
}

/* Originalproportionen der Logos beibehalten */
.press-row img:nth-child(1) {
  height: 30px;
}

.press-row img:nth-child(2) {
  height: 36px;
}

.press-row img:nth-child(3) {
  height: 21px;
}

.press-row img:nth-child(4) {
  height: 31px;
}

/* ------------------------------------------------------------ Ergebnisse */

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 46px;
}

.results-grid img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.cta-row {
  text-align: center;
  margin-top: 52px;
}

/* -------------------------------------------------------------- Timeline */

.timeline {
  position: relative;
  margin-top: 64px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

.step {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
}

.step:last-child {
  margin-bottom: 0;
}

.step-text {
  padding-right: 50px;
}

.step-media {
  padding-left: 50px;
}

.step.flip .step-text {
  order: 3;
  padding-right: 0;
  padding-left: 50px;
}

.step.flip .step-media {
  order: 1;
  padding-left: 0;
  padding-right: 50px;
}

.step.flip .step-num {
  order: 2;
}

.step h3 {
  font-size: clamp(19px, 2.2vw, 24px);
  margin-bottom: 14px;
}

.step p {
  color: var(--text-muted);
  font-size: 15px;
}

.step-num {
  justify-self: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 10px var(--bg);
}

.step-media img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* -------------------------------------------------------- Kooperationen */

.stars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.stars-grid img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ----------------------------------------------------------- Offer */

.offer {
  background: linear-gradient(180deg, #0d0d0d, #131313 40%, #0d0d0d);
}

.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
}

.offer-media img {
  width: 100%;
}

.offer-card h3 {
  font-size: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 18px;
}

.price-now {
  font-size: 42px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.03em;
}

/* Kein durchgestrichener Preis mehr, sondern ein Wertanker. Der Kurs war nie
   für 325 € im Verkauf, der Betrag ist der Gegenwert aus dem Consulting. */
.price-old {
  color: var(--text-muted);
  font-size: 15px;
}

.offer-card > p {
  color: var(--text-muted);
  font-size: 15px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 32px;
  display: grid;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #d9d9d9;
}

.check-list svg {
  flex: none;
  color: var(--gold);
}

/* --------------------------------------------------------- Testimonials */

.testi-block {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-top: 44px;
}

.testi-block + .testi-block {
  margin-top: 22px;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.testi {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.testi img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 2px solid rgba(255, 255, 255, 0.12);
}

.testi h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.testi .role {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 3px;
}

.testi .followers {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.testi .followers span {
  background: linear-gradient(90deg, #f9008e, #a020f0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.testi .quote {
  color: var(--text-muted);
  font-size: 13.5px;
  /* Kein Blocksatz: in drei schmalen Spalten reißt er Löcher in die Zeilen */
  text-align: left;
  margin-top: 18px;
  flex: 1;
}

/* ------------------------------------------------------------------ FAQ */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 44px;
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.faq-q svg {
  flex: none;
  color: var(--gold);
  transition: transform 0.25s ease;
}

.faq-item.open .faq-q svg {
  transform: rotate(90deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  color: var(--text-muted);
  font-size: 14.5px;
  padding: 0 0 20px 28px;
}

/* ------------------------------------------------------------ Final CTA */

.final {
  text-align: center;
  padding-bottom: 90px;
}

.final h2 {
  font-size: clamp(28px, 4.2vw, 46px);
  margin: 24px auto 0;
  max-width: 720px;
}

.final h2 em {
  font-style: italic;
  font-weight: 800;
}

.final .btn {
  margin-top: 36px;
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 34px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 700;
}

.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.trust-row svg {
  color: var(--gold);
}

/* --------------------------------------------------------------- Footer */

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  text-align: center;
}

footer nav {
  font-size: 13px;
  color: var(--gold);
}

footer nav a {
  text-decoration: none;
}

footer nav a:hover {
  text-decoration: underline;
}

.footer-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: grid;
  place-items: center;
  margin: 24px auto 0;
}

/* ------------------------------------------------------------ Sticky CTA */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

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

.sticky-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sticky-cta p {
  font-size: 14px;
  color: var(--text-muted);
}

.sticky-cta strong {
  color: var(--text);
}

.sticky-cta .btn {
  padding: 14px 26px;
  font-size: 15px;
  flex: none;
}

@media (max-width: 900px) {
  .sticky-cta p {
    display: none;
  }

  .sticky-cta .btn {
    width: 100%;
  }
}

/* ----------------------------------------------------------- Animationen */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 900px) {
  section {
    padding: 60px 0;
  }

  .topbar .container {
    justify-content: center;
    text-align: center;
  }

  .topbar-right {
    display: none;
  }

  .results-grid,
  .stars-grid,
  .testi-grid,
  .faq-grid,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .offer-grid {
    gap: 34px;
  }

  .testi-block {
    padding: 26px 20px;
  }

  .testi .quote {
    text-align: left;
  }

  .timeline::before {
    left: 27px;
  }

  .step {
    grid-template-columns: 54px 1fr;
    gap: 20px;
    margin-bottom: 42px;
  }

  .step .step-num {
    order: 1;
    grid-row: 1;
  }

  .step .step-text {
    order: 2;
    grid-row: 1;
    padding: 0;
  }

  .step .step-media {
    order: 3;
    grid-column: 2;
    padding: 0;
    margin-top: 18px;
  }

  .step.flip .step-text {
    order: 2;
    padding: 0;
  }

  .step.flip .step-media {
    order: 3;
    padding: 0;
    margin-top: 18px;
  }

  .step.flip .step-num {
    order: 1;
  }
}