/* ==========================================================================
   Magic Flow 8.0 — sections.css (V2 Visual Parity, 2026-07-06)
   Per-Sektion-Styles für den pixelnahen 1:1-Nachbau von magicflowevent.com.
   Referenz: QA/parity/orig/* + content/_source/live_home.html.
   main.css liefert Tokens/Basics — dieses File die Original-Optik.
   ========================================================================== */

/* ------------------------------------------------------------------ Basis */

/* Original-Seitengrund: sattes Violett (Projekt-oktopus-Textur liegt via
   render.js mit LEICHTEM Overlay auf dem Body) */
body {
  background: linear-gradient(165deg, #4a1358 0%, #351048 45%, #23112f 100%);
  background-color: #2c0f3e;
}

/* V16 (Jonas): Einheitliche Sektionstitel — Marken-Schrift Montserrat (--mf-font-head),
   700, klare Grösse. Vorher Arial 32/400 → wirkte nicht „aus einem Guss". */
.mf-h {
  font-family: var(--mf-font-head);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.2px;
  margin: 0 auto;
  padding-bottom: 26px;
  text-align: center;
  color: #fff;
  text-wrap: balance;
}
.mf-h--gold { color: #FBC201; }
.mf-h .is-gold { color: #FBC201; }
.mf-h .is-goldbrown { color: #FBC201; }
@media (max-width: 767px) {
  .mf-h { font-size: 26px; line-height: 1.3; }
}

/* V4 B1 (Jonas): Primär-CTA einheitlich GOLD (vorher dunkel-lila Grafik-Pill
   mit Violett-Streifen — "kein Grau/Violett-Streifen mehr"). Gold-Gradient-
   Familie wie die Ticket-Elemente, dunkler Text; permanenter Puls + Gold-
   Glow-Atmung siehe css/motion-v4.css. Wortlaut/Grösse/Uppercase unverändert. */
.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 18px 30px;
  border: 0;
  border-radius: 50px;
  font-family: var(--mf-font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: rgb(26, 14, 46);
  background: linear-gradient(180deg, #ffe9a3 0%, var(--mf-gold-soft) 38%, var(--mf-gold-bright) 100%);
  box-shadow:
    rgba(251, 194, 1, 0.32) 0 8px 30px,
    rgba(5, 3, 11, 0.4) 0 5px 16px,
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.25s var(--mf-ease), box-shadow 0.25s var(--mf-ease), filter 0.25s;
}
.mf-btn:hover, .mf-btn:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.07);
  color: rgb(26, 14, 46);
  box-shadow:
    rgba(251, 194, 1, 0.5) 0 10px 36px,
    rgba(5, 3, 11, 0.4) 0 5px 16px,
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.mf-btn:active { transform: translateY(0) scale(0.99); }

/* Gold-Pill (mobile CTA-Bar) */
.mf-btn--goldpill {
  background: linear-gradient(180deg, var(--mf-gold-soft), var(--mf-gold-bright));
  color: rgb(10, 10, 10);
  font-size: 13px;
  padding: 14px 22px;
  box-shadow: rgba(0, 0, 0, 0.35) 0 4px 14px;
}
.mf-btn--goldpill:hover, .mf-btn--goldpill:focus-visible { color: rgb(10, 10, 10); filter: brightness(1.06); }

/* Rating-Strip (Web-65) + Garantie-Block (Web-72) */
.mf-rating { width: min(384px, 86%); margin: 22px auto 0; }
.mf-garantie { width: min(360px, 86%); margin: 18px auto 0; }

/* Sektions-Default kompakter (orig: 50px 1px) */
.mf-section { padding: 50px var(--mf-pad); }
.mf-container { max-width: 1200px; }

/* ---------------------------------------------------- 1. Countdown-Bar --- */
.mf-announce {
  position: sticky;
  top: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 94px;
  padding: 10px 30px;
  background: #C9A472;
  border-bottom: 0;
  text-align: left;
}
.mf-announce__headline {
  flex: 1 1 auto;
  max-width: 700px;
  margin: 0;
  color: #000;
  font-family: var(--mf-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
}
.mf-announce__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}
.mf-announce__arrow { width: 119px; height: auto; flex: 0 0 auto; }
@media (max-width: 1180px) {
  .mf-announce__arrow { display: none; }
  .mf-announce__headline { font-size: 18px; }
}
/* Original: countdown-bar ist mobile versteckt (tcb-mobile-hidden) */
@media (max-width: 767px) { .mf-announce { display: none; } }

/* Countdown: nackte Gold-Ziffern mit ':'-Trennern + Mini-Labels */
.mf-countdown { display: flex; gap: 0; }
.mf-countdown__tiles { display: flex; align-items: flex-start; gap: 0; }
.mf-countdown__tile {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.mf-countdown__tile + .mf-countdown__tile::before {
  content: ':';
  position: absolute;
  left: -4px;
  top: 2px;
  font-family: var(--mf-font-head);
  font-size: 18px;
  font-weight: 500;
  /* V4.1: Trenner passend zu den weissen Ziffern */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.mf-countdown__num {
  /* V4.1 (Jonas-Review 2026-07-07): Ziffern waren auf der Gold-Bar kaum
     sichtbar (gedecktes Gold #E3CC84 auf Gold-BG) → WEISS mit dunklem
     Schatten für ausreichend Kontrast. (Bar ist nur Desktop sichtbar —
     mobil ist .mf-announce display:none.) */
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1;
  padding: 0 12px;
}
.mf-countdown__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  /* V4.1: Labels wie die Ziffern WEISS mit Kontrast-Schatten (Jonas) */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.mf-countdown__pulse { display: none; }
.mf-countdown__expired { color: #000; }

/* --------------------------------------------------------- 2. CTA-Bar --- */
/* Original: NUR mobile sichtbar — schwarze Leiste, Text links, Gold-Pill rechts */
.mf-ctastrip {
  display: none;
}
@media (max-width: 767px) {
  .mf-ctastrip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 74px;
    padding: 8px 15px;
    background: #000;
    border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 320;
  }
  .mf-ctastrip__text {
    font-family: var(--mf-font-head);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-align: left;
    white-space: nowrap;
  }
  .mf-ctastrip .mf-btn--goldpill { padding: 12px 16px; font-size: 12.5px; letter-spacing: 1px; }
}

/* ------------------------------------------------------------ 3. Hero --- */
.mf-hero {
  min-height: 0;
  display: block;
  padding: 0;
  background: #000;
  overflow: visible;
}
.mf-hero::before, .mf-hero::after { content: none; }
.mf-hero__img,
.mf-hero picture img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: fill;
  display: block;
  /* V4.9 (Jonas 07.07.): Untere Bildkante weich ausblenden — die Grafik fadet
     in der Mitte ins Schwarz, an den Rändern (Crowd) schnitt sie hart ab. Die
     Mask löst die ganze Unterkante gleichmässig in den #000-Hintergrund auf →
     kein sichtbarer Farbverlauf-Bruch mehr. */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
}

/* -------------------------------- 3b. Hero-Split (Foto rechts + Text links) --- */
.mf-herox {
  position: relative;
  min-height: 860px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.mf-herox__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0; /* V16.4 (Jonas): Foto bündig unter Sticky-Bar — schwarze Lücke oben eliminiert */
  width: 66%;
  background-size: cover;
  background-position: center 22%;
  z-index: 0;
}
/* smooth: ALLE Kanten des Fotos weich ins Schwarz — untere Kante lang ausgezogen,
   damit das Foto bis unter den Button „hinunterschifft" (Jonas 07.07.). */
.mf-herox__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 14%, rgba(0, 0, 0, 0) 48%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 12%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0) 40%);
}
/* Magic-Flow-Logo (Handschrift) oben rechts */
.mf-herox__logo {
  position: absolute;
  top: 92px; right: 44px; /* V13/V15 (Jonas): Logo tiefer */
  width: clamp(150px, 13vw, 230px);
  height: auto;
  z-index: 4;
  opacity: 0.96;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
/* 47€-Sonderpreis-Badge (reines CSS, Preis in der Config editierbar).
   Premium radialer Lila-Verlauf (Bild #16): heller Glanz oben links → tiefes
   Violett unten rechts, weicher Aussen-Glow + Innenlicht = edel/hochwertig. */
.mf-herox__badge {
  position: absolute;
  right: 6%;
  bottom: 25%;
  width: clamp(170px, 15vw, 226px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 4;
  background:
    radial-gradient(circle at 44% 25%, #c569ea 0%, #ab48d6 24%, #8330ba 50%, #5c1f92 76%, #391460 100%);
  box-shadow:
    0 14px 48px rgba(64, 20, 100, 0.62),
    0 0 74px rgba(168, 72, 214, 0.48),
    inset 0 4px 18px rgba(255, 255, 255, 0.22),
    inset 0 -16px 38px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; line-height: 1.06;
  font-family: var(--mf-font-head);
  padding: 12px;
}
.mf-herox__badge-l1 { font-size: clamp(12px, 1.15vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.mf-herox__badge-price { font-size: clamp(40px, 4.1vw, 60px); font-weight: 800; color: #FBC201; line-height: 1; margin: 4px 0; text-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.mf-herox__badge-l2 { font-size: clamp(12px, 1.15vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.mf-herox__badge-old { font-size: clamp(11px, 1vw, 15px); font-weight: 700; text-transform: uppercase; opacity: 0.95; margin-top: 4px; }
.mf-herox__oldprice { position: relative; display: inline-block; }
.mf-herox__oldprice::after {
  content: '';
  position: absolute;
  left: -8%; right: -8%;
  top: 50%;
  height: 3px;
  background: #e2371f;
  transform: rotate(-12deg);
  border-radius: 2px;
}
.mf-herox__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mf-max-wide);
  margin: 0 auto;
  /* V16.4 (Jonas): grosse Leerlücke oben eliminiert — Text startet knapp unter der
     Sticky-Bar, nur ~0,5 cm Abstand (war 158px). */
  padding: 40px var(--mf-pad) 56px;
}
.mf-herox__text { max-width: 640px; }
.mf-herox__date {
  color: #fff;
  font-family: var(--mf-font-head);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 30px);
  margin: 0 0 14px;
}
.mf-herox__headline {
  font-family: var(--mf-font-head);
  font-weight: 800;
  text-transform: uppercase;
  color: #FBC201;
  font-size: clamp(24px, 3.1vw, 42px);
  letter-spacing: 0.5px;
  line-height: 1.14;
  margin: 0 0 28px;
}
.mf-herox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mf-herox__item { display: flex; align-items: flex-start; gap: 16px; }
.mf-herox__check {
  width: 27px; height: 27px;
  border: 2px solid #FBC201;
  border-radius: 4px;
  position: relative;
  flex: 0 0 auto;
  margin-top: 4px;
}
.mf-herox__check::after {
  content: '';
  position: absolute;
  left: 8px; top: 2px;
  width: 7px; height: 13px;
  border: solid #FBC201;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.mf-herox__itemtext {
  color: #fff;
  font-family: var(--mf-font-body);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.42;
}
.mf-herox__itemtext strong { font-weight: 700; }
@media (max-width: 767px) {
  /* Mobil (Bild #14): Foto als Banner oben, Logo TR + Badge an der Fotokante,
     darunter Datum + Headline + Checkliste auf Schwarz. */
  .mf-herox { display: block; min-height: 0; }
  .mf-herox__photo {
    position: relative;
    top: 0; /* V16 (Jonas): Desktop-top:52px zurücksetzen → kein schwarzer Rand oben */
    width: 100%;
    height: 104vw; /* V16.4 (Bild #47): Foto prominent, aber Datum+Headline+Checkliste passen auf einen Blick */
    max-height: 430px;
    background-position: 56% 14%; /* Mann horizontal zentriert, Kopf knapp unter Oberkante */
  }
  .mf-herox__photo::before {
    background:
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 30%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%);
  }
  .mf-herox__logo { top: 14px; right: 16px; width: 128px; }
  .mf-herox__badge {
    right: 5%;
    bottom: 4%;
    top: auto;
    width: 142px; /* V16.1 (Bild #44): Badge prominenter an der Fotokante */
  }
  .mf-herox__inner { padding: 16px var(--mf-pad) 8px; }         /* V16.31: weniger Luft unter Ticketleiste → näher am CTA */
  .mf-herox__text { max-width: none; }
  .mf-herox__date { font-size: 22px; margin-bottom: 22px; }     /* V16.31: mehr Luft Datum → Headline */
  .mf-herox__headline { font-size: 25px; margin-bottom: 22px; }
  .mf-herox__itemtext { font-size: 17px; }
  .mf-herox__ticketbar { margin-top: 42px; }                    /* V16.31: klar von der Checkliste getrennt (eigene "Sektion") */
}

/* ------------------------------------------- 4. Hero-CTA + Logo-Leiste --- */
.sec-ctalogos {
  /* V10 (Jonas): oben transparent → das Hero-Foto schifft sauber durch (Button
     unter die Hand, Logos an die Foto-Unterkante), danach in tiefes Violett. */
  background: linear-gradient(180deg, transparent 0%, transparent 66%, #0b0618 88%, #1c0e33 100%);
  padding: 0 0 8px;
}
.sec-ctalogos__btnrow {
  position: relative;
  z-index: 5;
  margin: -200px 0 40px; /* V10: Button hoch bis fast unter die Hand */
  text-align: center;
}
.mf-logostrip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.5vw, 64px);
  margin: 0;
  padding: 10px 24px 14px;
}
.mf-logostrip img {
  height: auto;
  width: auto;
  opacity: 1;
  filter: none;
}
/* V4.1 (Jonas-Review 2026-07-07): Desktop wieder ALLE 6 Logos wie Original
   (V3-Werte wiederhergestellt); wrap statt nowrap, damit die Reihe bei
   schmaleren Desktops wie im Original in 4+2 umbrechen kann. */
.mf-logostrip .logo-bz { width: 185px; }
.mf-logostrip .logo-dnk { width: 130px; }
.mf-logostrip .logo-web19 { width: 96px; }
.mf-logostrip .logo-web17 { width: 84px; }
/* V4.9 (Jonas 07.07.): Zauberformel-Logo ist als Einziges gold — auf Weiss
   angleichen wie die übrigen Logos (transparentes PNG → reines Weiss). */
.mf-logostrip .logo-quer { width: 182px; filter: brightness(0) invert(1); }
.mf-logostrip .logo-web33 { width: 172px; }
.mf-logostrip .logo-web21 { display: none; }
@media (max-width: 767px) {
  /* V4 A1: Schwarz reicht bis UNTER den "JA! ICH BIN BEREIT!"-Button —
     die ersten ~170px bleiben voll schwarz (Button + Luft), erst danach
     läuft der BG weich ins Violett aus. */
  .sec-ctalogos { background: linear-gradient(180deg, #000 0%, #000 170px, #0b0618 300px, #1c0e33 100%); }
  /* V16.3 (Jonas): KEIN negativer Zug mehr auf Mobile — der Button wurde in die
     Hero-Checkliste hochgezogen und überlappte (Checklisten-Länge variiert je
     Gerät → jeder Negativwert ist unsicher). margin-top:0 lässt den Button IMMER
     unter dem Hero-Bottom-Padding sitzen, egal wie lang der Text wird. */
  .sec-ctalogos__btnrow { margin: 6px 0 20px; }
  .sec-ctalogos__btnrow .mf-btn { width: min(332px, 88%); }
  /* V4.1: Mobil nur 4 Logos (BZ · DNK · Aquion · BlueOcean) und ALLE in
     EINER Zeile (Jonas) — Grössen so gesetzt, dass die Reihe bei 390px
     inkl. Gaps sicher passt (84+66+50+94 + 3×14 = 336px < 342px netto). */
  .mf-logostrip { flex-wrap: nowrap; gap: 14px; padding: 10px 12px 14px; }
  .mf-logostrip .logo--desktop-only { display: none; }
  .mf-logostrip .logo-bz { width: 84px; }
  .mf-logostrip .logo-dnk { width: 66px; }
  .mf-logostrip .logo-web17 { width: 50px; }
  .mf-logostrip .logo-web33 { width: 94px; }
}

/* ------------------------------------------------ 5. Hero-Video + Stats --- */
.sec-video {
  /* V2-Verify r1: Original zeigt hinter Video+Stats ein dunkles Violett,
     das nach unten wieder in Schwarz ausläuft (kein reines Schwarz) */
  background: linear-gradient(180deg, #1c0e33 0%, #200f38 30%, #150b26 65%, #070410 100%);
  padding: 24px var(--mf-pad) 56px;
}
.sec-video .mf-container--narrow { max-width: 800px; }
.mf-video {
  border-radius: 6px;
  border: 2px solid #FBC201;
  box-shadow: none;
  background: #1a0b28;
}
.mf-video__btn { background: none; }
.mf-video__btn:hover { background: rgba(0, 0, 0, 0.12); }
/* weisser Play-Kreis mit dunklem Dreieck (Hero) */
.mf-video__play {
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.mf-video__play svg { fill: #2b2b33; }
/* Consent-Hinweis dezent: erst bei Hover/Fokus sichtbar */
.mf-video__hint { opacity: 0; transition: opacity 0.2s; }
.mf-video__btn:hover .mf-video__hint,
.mf-video__btn:focus-visible .mf-video__hint { opacity: 1; }

/* Stats: 4 nackte weisse Textspalten */
.mf-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 44px auto 0;
  max-width: 1160px;
  position: relative;
}
.mf-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--mf-font-head);
  font-size: 23px;
  font-weight: 400;
  line-height: 31px;
  color: #fff;
  text-align: center;
}
.mf-badge strong { font-weight: 700; }
.sec-video__mascot { display: none; }
@media (max-width: 767px) {
  .sec-video { padding: 16px 12px 40px; }
  .mf-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 8px; }
  .mf-badge { font-size: 18px; line-height: 25px; }
  .sec-video__mascot {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    /* V4 A18: Zentrierung über die eigenständige translate-Property statt
       transform — so kann die Maskottchen-Animation (mf-mascot, nur
       transform-Keyframes) darüberliegen, ohne die Position zu kippen. */
    translate: -50% -50%;
  }
}

/* --------------------------------------------------------- 6. Stipendium --- */
.sec-stip { text-align: center; position: relative; padding-bottom: 70px; }
.sec-stip .mf-container { max-width: 1198px; position: relative; }
.sec-stip__intro {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 30.4px;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 26px;
}
.sec-stip__hero { width: min(731px, 92%); margin: 6px auto 26px; display: block; }
.sec-stip__price {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 6px;
}
.sec-stip__price .mf-arrow {
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 10px;
  vertical-align: -3px;
  background: #f5a623;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h14l-5-5 2-2 9 9-9 9-2-2 5-5H2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h14l-5-5 2-2 9 9-9 9-2-2 5-5H2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mf-ellipse { position: relative; display: inline-block; padding: 2px 10px; }
.mf-ellipse::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
  border: 3px solid #FBC201;
  border-radius: 50%;
  transform: rotate(-2.5deg);
  pointer-events: none;
}
.sec-stip__small {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: #fff;
  margin: 0 0 34px;
}
.sec-stip__best {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #FBC201;
  margin: 0 0 22px;
}
.sec-stip__bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto 34px;
  max-width: 620px;
  text-align: left;
  display: grid;
  gap: 14px;
}
.sec-stip__bullets li {
  position: relative;
  padding-left: 26px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
}
.sec-stip__bullets li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FBC201;
}
.sec-stip__octo {
  position: absolute;
  right: 4%;
  bottom: -20px;
  width: 154px;
  height: auto;
}
.sec-stip__terms {
  max-width: 860px;
  margin: 26px auto 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.sec-stip__terms summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--mf-font-head);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding: 6px;
  min-height: 0;
}
.sec-stip__terms summary::-webkit-details-marker { display: none; }
.sec-stip__terms summary::after { content: ' ↘'; font-size: 13px; }
.sec-stip__terms .mf-acc__body {
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  padding: 14px 10px 0;
}
@media (max-width: 767px) {
  .sec-stip__octo { position: static; margin: 22px auto 0; display: block; }
  .sec-stip__intro { font-size: 17px; line-height: 27px; }
  .sec-stip__intro .mf-marker { background: rgba(112, 41, 125, 0.85); padding: 0 4px; }
}

/* ---------------------------------------------------------- 7. Proof-Bar --- */
.sec-proof { padding: 30px var(--mf-pad); }
.sec-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: end;
}
.sec-proof__item { text-align: center; }
.sec-proof__item img { margin: 0 auto 20px; }
.sec-proof__item:nth-child(1) img { width: 209px; }
.sec-proof__item:nth-child(2) img { width: 297px; }
.sec-proof__item:nth-child(3) img { width: 286px; }
.sec-proof__text {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 30.4px;
  color: #fff;
  max-width: 472px;
  margin: 0 auto;
}
.sec-proof__text .is-gold { color: #FBC201; }
@media (max-width: 767px) {
  .sec-proof__grid { grid-template-columns: 1fr; gap: 56px; }
  .sec-proof__item img { width: min(260px, 60%) !important; }
  .sec-proof__text { font-size: 17px; line-height: 27px; }
}

/* -------------------------------------------------------- 8. Pain-Points --- */
.sec-pain {
  text-align: center;
  padding-bottom: 70px;
  /* V2-Verify r1: Original = dunkler Violett-Verlauf mit Magenta-Glow links,
     nicht die helle Ray-Textur des Body-BGs */
  background:
    radial-gradient(1100px 900px at -5% 28%, rgba(163, 38, 160, 0.45), transparent 62%),
    linear-gradient(155deg, rgba(38, 17, 66, 0.92) 0%, rgba(27, 12, 49, 0.94) 45%, rgba(18, 9, 36, 0.96) 100%);
}
.sec-pain .mf-container { max-width: 1200px; }
.sec-pain__list { list-style: none; padding: 0; margin: 30px 0 46px; }
.sec-pain__bubble {
  box-sizing: border-box;
  border: 2px solid #FBC201;
  border-radius: 16px;
  background:
    linear-gradient(rgba(34, 20, 64, 0.78), rgba(34, 20, 64, 0.78)),
    linear-gradient(120deg, #2c1550, #3a1a66);
  padding: 16px 22px;
  margin: 0 0 34px;
  font-family: var(--mf-font-head);
  font-size: 19px;
  font-weight: 500;
  line-height: 26.6px;
  color: #fff;
  text-align: center;
}
.sec-pain__bubble .q-intro { font-weight: 700; display: block; }
.sec-pain__bubble .q-quote { font-weight: 400; }
@media (min-width: 1000px) {
  .sec-pain__bubble { position: relative; }
  .sec-pain__bubble:nth-child(1) { width: 646px; margin-left: 370px; }
  .sec-pain__bubble:nth-child(2) { width: 590px; margin-left: 83px; }
  .sec-pain__bubble:nth-child(3) { width: 713px; margin-left: 361px; }
  .sec-pain__bubble:nth-child(4) { width: 559px; margin-left: 197px; }
  .sec-pain__bubble:nth-child(5) { width: 771px; margin-left: 306px; }
  .sec-pain__bubble:nth-child(6) { width: 703px; margin-left: 48px; }
  .sec-pain__bubble:nth-child(7) { width: 903px; margin-left: 177px; }
}
.sec-pain__outro {
  font-family: var(--mf-font-head);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  max-width: 1100px;
  margin: 0 auto 40px;
}
.sec-pain__outro .u-gold {
  border-bottom: 3px solid #FBC201;
  padding-bottom: 1px;
}
@media (max-width: 767px) {
  /* V16.4 (Jonas): NICHT komplett gelb — weisser Text, nur EINER/UNBEDINGT gold
     unterstrichen (wie Desktop). */
  .sec-pain__outro { font-size: 22px; color: #fff; }
}

/* ------------------------------------------------- 9. Highlight-Mosaik --- */
.sec-tiles { padding: 0; }
.sec-tiles__grid {
  display: grid;
  grid-template-columns: 22% 15.5% 27.5% 16% 19%;
  height: 326px;
  width: 100%;
}
.sec-tiles__col { display: grid; grid-template-rows: 1fr; }
.sec-tiles__col--split { grid-template-rows: 1fr 1fr; }
.sec-tiles__cell {
  position: relative;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sec-tiles__label {
  margin: 0;
  padding: 0 8px;
  font-family: var(--mf-font-head);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
.sec-tiles__label span {
  background: #000;
  padding: 2px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sec-tiles__cell--tl { align-items: start; justify-items: start; padding-top: 12px; }
.sec-tiles__cell--bl { align-items: end; padding-bottom: 26px; }
/* Center-Tile */
.sec-tiles__center { display: grid; place-items: end center; background-position: center top !important; padding-bottom: 18px; }
.sec-tiles__center-inner { text-align: center; display: grid; gap: 6px; justify-items: center; }
.sec-tiles__center-logo { width: 200px; margin-bottom: 4px; }
.sec-tiles__center .line-bold span { background: #000; padding: 1px 8px; font-weight: 700; }
.sec-tiles__center .line-reg span { background: #000; padding: 1px 8px; font-weight: 400; }
.sec-tiles__center p { margin: 0; color: #fff; font-family: var(--mf-font-head); font-size: 19px; line-height: 1.55; }
@media (max-width: 767px) {
  .sec-tiles__grid { display: block; height: auto; }
  .sec-tiles__mgrid { display: grid; grid-template-columns: 1fr 1fr; }
  .sec-tiles__mgrid .sec-tiles__cell { min-height: 160px; }
  /* V2-Verify r1: Vollbreiten-Kacheln (Auflösen + Kakao) wie Original ~310px hoch */
  .sec-tiles__cell--wide { min-height: 310px; }
  .sec-tiles__center { min-height: 310px; }
}

/* ----------------------------------------------------------- 10. Outcomes --- */
.sec-outcomes {
  padding: 30px var(--mf-pad) 50px;
  /* V2-Verify r1: Original-Zone ist fast schwarz mit dezenter Gras-Textur
     hinter den Karten — Body-Rays hier abdecken */
  background:
    /* V3 Basis-Fix #5: oberste ~8px voll deckend — die Regenbogen-Kante der
       Gras-Textur blitzte sonst als bunter Pixel-Streifen durch */
    linear-gradient(180deg, #06040c 0, #06040c 8px, rgba(6, 4, 12, 0) 8px),
    linear-gradient(180deg, rgba(4, 3, 10, 0.93) 0%, rgba(15, 9, 29, 0.86) 40%, rgba(16, 9, 30, 0.86) 70%, rgba(8, 5, 17, 0.94) 100%),
    url('../assets/img/d6ce95d1-d9ca-4140-8b3d-0a0d2dba02f1-min.webp') center / cover;
}
.sec-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 50px;
  max-width: 1160px;
  margin: 24px auto 0;
}
.mf-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 560px;
  padding: 30px 22px 26px;
  border-radius: 6px;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 -8px 12px, rgba(0, 0, 0, 0.35) 0 10px 24px;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.mf-benefit img { width: 223px; margin: 12px auto 26px; }
.mf-benefit p { color: #fff; font-size: 16px; line-height: 26px; }
.mf-benefit p.mf-benefit__tag { /* V2-Verify r1: Spezifität > '.mf-benefit p' (war vorher wirkungslos → 16px weiss) */
  order: 10;
  /* V4.3 (Jonas 07.07.): Schlagwort sass per margin-top:auto ganz unten (grosse
     Leere über dem Wort). Jetzt fixer, harmonischer Abstand direkt unter dem Text. */
  margin-top: 22px;
  padding-top: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  color: #FBC201;
  margin-bottom: 0;
}
@media (max-width: 1000px) {
  .sec-outcomes__grid { grid-template-columns: 1fr; max-width: 400px; }
  .mf-benefit { min-height: 0; }
  .mf-benefit img { width: min(300px, 80%); }
  .mf-benefit p.mf-benefit__tag { font-size: 24px; }
}

/* ------------------------------------------------------- 11. Testimonials --- */
.sec-testi {
  padding: 30px var(--mf-pad) 60px;
  /* V2-Verify r1: Original = dunkles Navy/Schwarz, keine hellen Rays */
  background: linear-gradient(180deg, #0a0714 0%, #100a1f 45%, #070510 100%);
}
.sec-testi__videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1160px;
  margin: 24px auto 44px;
}
.sec-testi .mf-video {
  border: 0;
  border-radius: 16px; /* V10: gleiche Rundung wie die Review-Karten (einheitlich) */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* Gold-Glow-Trenner zwischen Video-Postern und Review-Karten */
.sec-testi__divider {
  height: 2px;
  width: min(760px, 82%);
  margin: 40px auto 40px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.15) 12%, rgba(201, 168, 76, 0.8) 32%, #e9c96a 50%, rgba(201, 168, 76, 0.8) 68%, rgba(201, 168, 76, 0.15) 88%, transparent 100%);
  box-shadow: 0 0 16px rgba(251, 194, 1, 0.35);
  border-radius: 2px;
}
/* Schmetterlinge als dezente magische Deko über den Reviews */
.sec-testi__reviews { position: relative; }
.sec-testi__bfly {
  position: absolute;
  width: 74px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.sec-testi__bfly--1 { top: -34px; left: -30px; transform: rotate(-14deg); }
.sec-testi__bfly--2 { bottom: -26px; right: -24px; width: 58px; transform: rotate(12deg); }
@media (max-width: 767px) {
  .sec-testi__bfly--1 { left: 4px; width: 54px; }
  .sec-testi__bfly--2 { right: 4px; width: 44px; }
}
.sec-testi .mf-video__play {
  width: 44px;
  height: 44px;
  background: rgba(90, 90, 100, 0.55);
  box-shadow: none;
}
.sec-testi .mf-video__play svg { fill: #fff; }
.sec-testi__reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch; /* Karten einer Zeile gleich hoch */
  max-width: 1160px;
  margin: 0 auto;
}
/* V8 (Jonas 07.07.): magische Review-Karte — kosmischer Violett-Verlauf wie die
   Video-Poster oben, feiner Gold-Rahmen + Sparkles = edel, passt zur Restseite.
   Gleiche Höhe (Grid-stretch), gleiche Breite, oben-bündig, gleicher Innenabstand. */
.sec-testi__card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(120% 85% at 28% 10%, rgba(158, 74, 214, 0.5), transparent 60%),
    radial-gradient(120% 100% at 88% 104%, rgba(196, 52, 168, 0.32), transparent 56%),
    linear-gradient(158deg, #4a2385 0%, #341664 52%, #23103f 100%);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(120, 50, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Sparkle-Overlay (dezente Sterne wie die kosmischen Video-Poster) */
.sec-testi__card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 72% 14%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.7px 1.7px at 86% 58%, rgba(255, 240, 200, 0.5), transparent),
    radial-gradient(1.1px 1.1px at 34% 82%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 58% 92%, rgba(255, 255, 255, 0.35), transparent);
}
.sec-testi__reviewimg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  align-self: flex-start;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
  .sec-testi__videos { grid-template-columns: 1fr; max-width: 420px; }
  .sec-testi__reviews { grid-template-columns: 1fr; max-width: 420px; }
}

/* -------------------------------- ProvenExpert-Trust-Badge (V10) --- */
.sec-proven { padding: 44px var(--mf-pad); text-align: center; background: linear-gradient(180deg, #0d0819 0%, #100a1f 100%); }
.sec-proven__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 22px 44px;
  border-radius: 16px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(139, 63, 201, 0.28), transparent 68%),
    linear-gradient(160deg, #2a1550 0%, #1a0e33 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 44px rgba(120, 50, 180, 0.22);
}
.sec-proven__stars { color: #FBC201; font-size: 30px; letter-spacing: 5px; line-height: 1; text-shadow: 0 0 14px rgba(251, 194, 1, 0.35); }
.sec-proven__rating { margin: 0; color: #fff; font-family: var(--mf-font-head); font-size: 21px; font-weight: 700; }
.sec-proven__rating strong { color: #FBC201; }
.sec-proven__count { margin: 0; color: #cdbfe6; font-family: var(--mf-font-body); font-size: 15px; }
.sec-proven__count strong { color: #fff; font-weight: 700; }

/* -------------------------------------------------- 12. Ticket-Progress --- */
.sec-progress { text-align: center; padding: 50px var(--mf-pad) 64px; background-position: center bottom !important; }
.sec-progress .mf-h { max-width: 1198px; }
.mf-progress__gauge { width: 198px; margin: 8px auto 18px; }
.mf-progress__value {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
}
.mf-progress__label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .sec-progress .mf-h { font-size: 20px; font-weight: 700; }
  .mf-progress__gauge { width: 180px; }
}

/* --------------------------------------------- 13. Highlights-Heading --- */
.sec-hlhead {
  padding: 50px var(--mf-pad) 40px;
  background:
    radial-gradient(900px 640px at 50% 36%, rgba(196, 74, 205, 0.55), rgba(120, 38, 132, 0.35) 45%, rgba(74, 21, 88, 0) 75%),
    linear-gradient(180deg, #5c1e6e, #451456 70%, #351048);
  text-align: center;
}
.sec-hlhead__tilecloud { width: min(863px, 94%); margin: 0 auto; display: block; }
.sec-hlhead__circles { width: min(1030px, 96%); margin: -40px auto 0; display: block; }

/* ------------------------------------------------ 14. Was Dich erwartet --- */
.sec-erwartet { padding: 50px var(--mf-pad) 60px; }
.sec-erwartet .mf-container { max-width: 1200px; }
.sec-erwartet__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 287px;
  background: #fff;
  border: 2px solid #FBC201;
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 34px;
}
.sec-erwartet__media { position: relative; min-height: 220px; }
.sec-erwartet__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-erwartet__body {
  position: relative;
  padding: 28px 96px 26px 30px;
  text-align: left;
}
.sec-erwartet__card--imgright .sec-erwartet__media { order: 2; }
.sec-erwartet__card--imgright .sec-erwartet__body { padding: 28px 30px 26px 30px; padding-right: 96px; }
.sec-erwartet__body h3 {
  font-family: var(--mf-font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 30.4px;
  color: rgb(30, 28, 27);
  margin: 0 0 14px;
}
.sec-erwartet__body p {
  font-family: var(--mf-font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgb(30, 28, 27);
  margin: 0;
}
.sec-erwartet__butterfly {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 78px;
  height: auto;
}
@media (max-width: 900px) {
  .sec-erwartet__card { grid-template-columns: 1fr; }
  .sec-erwartet__card--imgright .sec-erwartet__media { order: 0; }
  .sec-erwartet__media { min-height: 200px; }
  .sec-erwartet__body, .sec-erwartet__card--imgright .sec-erwartet__body { padding: 22px 70px 22px 20px; }
}

/* --------------------------------------- 15. Breakthrough-Challenge --- */
.sec-break { padding: 80px var(--mf-pad); }
.sec-break .mf-container { max-width: 1200px; }
.sec-break__top { position: relative; display: flex; gap: 20px; margin-bottom: 22px; }
.sec-break__img1 { width: 345px; height: 366px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
/* V10 (Jonas): Headline clean auf dem magischen Dunkel-Grund, mittig neben dem
   Foto — das verzerrte Fisheye-Backdrop (img2) raus. */
.sec-break__hlwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 366px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sec-break__img2 { display: none; }
.sec-break__headline {
  position: relative;
  z-index: 1;
  padding: 0 0 0 48px;
  text-align: left;
  font-family: var(--mf-font-head);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
  margin: 0;
}
.sec-break__headline .is-gold { color: #FBC201; }
.sec-break__sub {
  position: relative;
  z-index: 1;
  padding-left: 48px;
  text-align: left;
  font-size: 17px;
  color: #fff;
  margin: 12px 0 0;
}
.sec-break__bottom {
  display: grid;
  grid-template-columns: 403px 1fr;
  gap: 40px;
  align-items: start;
}
.sec-break__copy {
  text-align: left;
  font-family: var(--mf-font-body);
  font-size: 17px;
  line-height: 26.35px;
  color: #fff;
  margin: 0;
}
/* V4 A8: Copy in Absätzen (render.js liefert <p> je Sinnabschnitt) */
.sec-break__copy p { margin: 0 0 14px; }
.sec-break__copy p:last-child { margin-bottom: 0; }
.sec-break__photos { display: flex; gap: 20px; justify-content: flex-end; }
/* V10 (Jonas): beide unteren Fotos gleich gross + cover → einheitlich, nichts verzerrt */
.sec-break__photos img { flex: 1 1 0; min-width: 0; width: 100%; height: 240px; border-radius: 10px; object-fit: cover; }
.sec-break__photos img:nth-child(1) { width: 338px; height: 390px; }
.sec-break__photos img:nth-child(2) { width: 317px; height: 390px; }
@media (max-width: 1000px) {
  .sec-break { padding: 50px var(--mf-pad); }
  .sec-break__top { flex-direction: column; }
  .sec-break__img1 { width: 100%; height: 330px; }
  .sec-break__hlwrap { min-height: 0; }
  /* V2-Verify r2: Original zeigt das Tunnel-Foto mobil als eigenes,
     ungedimmtes Vollbreiten-Bild VOR der Headline (orig/mobile/section-17) */
  .sec-break__img2 {
    position: static;
    display: block;
    width: 100%;
    height: 330px;
    filter: none;
    margin-bottom: 16px;
  }
  .sec-break__headline { padding: 10px 0 0; font-size: 30px; }
  .sec-break__sub { padding-left: 0; }
  .sec-break__bottom { grid-template-columns: 1fr; }
  .sec-break__photos { flex-direction: column; }
  .sec-break__photos img { width: 100% !important; height: 330px !important; }
}

/* ------------------------------------------------------ 16. 5 Gründe --- */
.sec-gruende { text-align: center; padding: 40px var(--mf-pad) 80px; }
.sec-gruende__hlrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 56px 0 10px;
}
.sec-gruende__hlrow .mf-h { padding-bottom: 0; font-weight: 600; }
.sec-gruende__orn { width: min(478px, 30vw); height: auto; }
.sec-gruende__sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 36.8px;
  color: #fff;
  margin: 22px 0 84px; /* V2-Verify r1: Original hat deutlich mehr Luft (Sektion 1727px) */
}
.sec-gruende__list {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 0 auto 20px;
  max-width: 760px;
  display: grid;
  gap: 16px; /* V10 (Jonas): enger statt 96px */
  text-align: left;
}
/* V10: jeder Grund als dezente Karte mit Gold-Rahmen (grafisch aufgewertet, clean) */
.sec-gruende__list li {
  position: relative;
  padding: 18px 26px 18px 82px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 29px;
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 0;
  background: linear-gradient(160deg, rgba(74, 35, 133, 0.3) 0%, rgba(35, 16, 63, 0.32) 100%);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.sec-gruende__list li::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: url('../assets/img/43bfd7dc5bf1da4e353753d5a3d301b5-min.webp') center / contain no-repeat;
}
.sec-gruende__wordmark {
  display: block;
  width: 315px;
  margin: 48px 8% 10px auto;
}
.sec-gruende__outro {
  font-family: var(--mf-font-head);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 36px 0 44px;
}
@media (max-width: 767px) {
  .sec-gruende__orn { width: 26vw; }
  .sec-gruende__wordmark { margin: 10px auto; width: min(280px, 70%); }
}

/* ---------------------------------------------------- 17. Werte-Fit --- */
.sec-werte {
  padding: 50px var(--mf-pad) 60px;
  /* V2-Verify r1: Original = sehr dunkles Navy/Schwarz (keine hellen Rays) */
  background: linear-gradient(180deg, #0b0817 0%, #110c22 45%, #0d0919 100%);
}
.sec-werte .mf-container { max-width: 1200px; }
.sec-werte__divider { display: block; width: min(870px, 90%); margin: 0 auto 34px; }
.mf-values {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  max-width: 1160px;
  margin: 10px auto 60px;
}
.mf-value { width: 207px; text-align: center; }
/* V2-Verify r1: einheitliche Icon-Höhe (Original 207×207) — sonst rutschen
   Labels bei höheren Icons (Butterfly) unterschiedlich tief */
.mf-value img { width: auto; max-width: min(207px, 100%); height: 185px; object-fit: contain; margin: 0 auto 2px; }
.mf-value figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 43.2px;
  letter-spacing: 0;
  color: #fff;
}
.mf-value:nth-child(2), .mf-value:nth-child(4) { margin-top: 60px; }
/* V3 Basis-Fix #6: 20px-Offset des 5. Icons entfernt — "Magie"-Label sass
   sonst sichtbar tiefer als "Connection"/"Leichtigkeit" */
@media (max-width: 900px) {
  .mf-values { flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin-bottom: 40px; }
  /* V2-Verify r2: UA-Default-figure-Margin (40px seitlich) killte das
     2-Spalten-Wrap → alles war einspaltig gestapelt. Original (orig/mobile/
     section-21): 2er-Reihen, Klarheit allein zentriert in eigener Reihe. */
  .mf-value { width: 44%; margin: 0 0 14px !important; }
  /* V2-Verify r1: Original-Mobile-Reihenfolge Connection/Transformation/Klarheit/Magie/Leichtigkeit */
  .mf-value:nth-child(1) { order: 1; }
  .mf-value:nth-child(2) { order: 2; }
  .mf-value:nth-child(3) { order: 5; } /* Leichtigkeit ans Ende */
  .mf-value:nth-child(4) { order: 3; width: 100%; } /* Klarheit: eigene Reihe, zentriert (r2) */
  .mf-value:nth-child(5) { order: 4; }
  .mf-value img { width: auto; max-width: min(126px, 70%); height: 118px; }
  .mf-value:nth-child(4) img { max-width: min(160px, 80%); height: 150px; } /* Klarheit grösser wie Original */
  .mf-value figcaption { font-size: 20px; line-height: 1.5; }
}
/* NICHTS/NUR-Karten */
.sec-werte__fitgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto 80px;
}
.sec-werte__fitcard {
  background: linear-gradient(181deg, rgb(40, 25, 84) 0%, rgb(106, 32, 134) 24%, rgb(34, 20, 64) 61%, rgb(34, 20, 64) 100%);
  border: 1px solid rgb(245, 205, 72);
  border-radius: 15px;
  box-shadow: none;
  padding: 26px 30px 34px;
}
.sec-werte__fitcard h3 {
  font-family: var(--mf-font-head);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin: 0 0 26px;
}
.sec-werte__fitcard .mf-checklist { gap: 14px; }
.sec-werte__fitcard .mf-checklist li { font-size: 16px; line-height: 1.5; color: #fff; }
/* V2-Verify r1: Original nutzt hier PLAIN-Häkchen (grün, ohne Kreis-Badge)
   bzw. rot UMRANDETE Kreis-X — nicht die gefüllten Kreis-Badges */
.sec-werte__fitcard .mf-checklist li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2 18.9 4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2 18.9 4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec-werte__fitcard .mf-checklist--cross li::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm3.5 4.5-3.5 3.5-3.5-3.5L7 10l3.5 3.5L7 17l1.5 1.5 3.5-3.5 3.5 3.5L17 17l-3.5-3.5L17 10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm3.5 4.5-3.5 3.5-3.5-3.5L7 10l3.5 3.5L7 17l1.5 1.5 3.5-3.5 3.5 3.5L17 17l-3.5-3.5L17 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 900px) {
  /* V3 Basis-Fix #8: mobile Riesen-Lücke vor "Connection & Fun" reduziert */
  .sec-werte__fitgrid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
  .sec-werte__fun { margin-bottom: 40px; }
}
/* Connection & Fun — V4 A11 (2026-07-06): eigener ruhiger BG-Switch.
   Der Block bekommt eine eigene, klar erkennbare stille Bühne (flaches
   dunkles Panel mit Gold-Haarlinie) statt auf dem unruhigen Nebel-BG der
   Werte-Sektion zu schwimmen — mobil deutlich beruhigt. */
.sec-werte__fun {
  display: grid;
  grid-template-columns: 541px 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto 70px;
  padding: 40px 44px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 10, 32, 0.96) 0%, rgba(12, 8, 23, 0.98) 100%);
  box-shadow: 0 20px 46px rgba(3, 2, 8, 0.4);
}
.sec-werte__fun img { border-radius: 10px; }
.sec-werte__fun img { width: 100%; height: auto; }
.sec-werte__fun h3 {
  font-family: var(--mf-font-head);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-align: center;
  margin: 0 0 26px;
}
.sec-werte__fun-copy p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 30.4px;
  color: #fff;
  text-align: center;
  margin: 0 0 22px;
}
@media (max-width: 900px) {
  /* V4 A11 mobil: ruhiges Vollbreiten-Band mit weichen Kanten statt Karte */
  .sec-werte__fun {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-left: calc(-1 * var(--mf-pad));
    margin-right: calc(-1 * var(--mf-pad));
    padding: 34px var(--mf-pad) 38px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
.sec-werte__outro {
  font-family: var(--mf-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.55;
  color: #FBC201;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.sec-werte__outro u { text-underline-offset: 4px; }
@media (max-width: 767px) {
  .sec-werte__outro { font-size: 20px; }
}

/* ------------------------------------------------------- 18. Tickets --- */
.sec-tickets {
  padding: 60px var(--mf-pad) 70px;
  /* V3 Basis-Fix #4: eigener ruhiger BG statt durchscheinender Body-Rays
     (vorher: heller Radial-Fleck + harte Kanten oben/unten). Themes A/B
     übersteuern per body[data-theme]-Scope. */
  background: linear-gradient(180deg, #1a0c2e 0%, #2a1142 38%, #241038 72%, #190b2c 100%);
}
.sec-tickets .mf-container { max-width: 1200px; }
/* V3 Basis-Fix #3 (Jonas): Sektions-Headline "Magic Flow 8.0" fett + präsent */
.sec-tickets .mf-h { font-weight: 700; }
.sec-tickets__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin: 4px 0 56px;
}
.sec-tickets__date::before,
.sec-tickets__date::after {
  content: '';
  width: 200px;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
}
.mf-tickets {
  display: grid;
  grid-template-columns: repeat(3, 361px);
  justify-content: center;
  gap: 38px;
  align-items: start;
}
.mf-ticket {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: none;
  box-shadow: none;
  color: rgb(10, 10, 10);
  text-align: center;
}
.mf-ticket:hover, .mf-ticket:focus-visible {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  color: rgb(10, 10, 10);
}
.mf-ticket__name {
  /* V3 Basis-Fix #1 (Jonas): Karten-Überschriften ("Magic … Weekend") FETT,
     klare Hierarchie — Wortlaut unverändert aus config.json */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px 8px 0 0;
  padding: 8px 5px;
  margin: 0;
}
.mf-ticket--silver .mf-ticket__name { background: rgb(198, 196, 196); }
.mf-ticket--gold .mf-ticket__name { background: linear-gradient(185deg, rgb(189, 148, 106) 0%, rgb(245, 205, 72) 100%); }
.mf-ticket--diamond .mf-ticket__name { background: linear-gradient(185deg, rgb(194, 86, 224) 0%, rgb(218, 149, 237) 100%); }
.mf-ticket__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  flex: 0 0 auto;
}
.mf-ticket__features li {
  padding: 19px 10px; /* V2-Verify r1: Original-Zeilen sind höher (Karte 2351px statt 1655px) */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #000;
  background: #fff;
  text-align: center;
}
.mf-ticket__features li:nth-child(odd) { background: rgb(245, 245, 245); }
.mf-ticket__features li::before { content: none; }
.mf-ticket__features li.is-bold { font-weight: 700; }
/* V16.26 (Jonas, Bild #80): '+'-Trennzeile als eingekreistes Plus (⊕) in Violett.
   Als echtes Span-Element (nicht ::before) → immun gegen Zebra-/Gold-Basisregeln. */
.mf-ticket__features li.is-plus {
  background: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
.mf-ticket__features li.is-plus::before { content: none !important; }
.mf-ticket__features li.is-plus .mf-plusicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid #7C6BB0;   /* Marken-Violett */
  border-radius: 50%;
  color: #7C6BB0;
  font-size: 24px;
  line-height: 1;
}
/* V16.27 (Jonas, Bild #81): Überschrift der zusätzlichen Vorteile (nach dem ⊕) */
.mf-ticket__features li.is-vorteil-head {
  background: #fff !important;
  color: #7C6BB0;
  font-weight: 800;
  font-size: 17px;
  padding: 4px 16px 12px;
}
/* Preisblock unten */
.mf-ticket__pricebox {
  margin: 0;
  padding: 18px 16px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  align-items: center;
}
.mf-ticket--silver .mf-ticket__pricebox { background: linear-gradient(180deg, #e6e6e6, #b9b7b7); }
.mf-ticket--gold .mf-ticket__pricebox { background: linear-gradient(185deg, rgb(189, 148, 106) 0%, rgb(245, 205, 72) 100%); }
.mf-ticket--diamond .mf-ticket__pricebox { background: rgb(200, 120, 230); }
.mf-ticket__price {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #000;
}
.mf-ticket__strike {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  margin: 0;
}
.mf-ticket__strike::before,
.mf-ticket__strike::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  height: 3px;
  background: rgb(217, 30, 24);
  border-radius: 2px;
}
.mf-ticket__strike::before { transform: rotate(14deg); }
.mf-ticket__strike::after { transform: rotate(-14deg); }
.mf-ticket__pricelabel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000;
  display: block;
  padding-top: 8px;
}
.mf-ticket__cta {
  /* V3 Basis-Fix #2 (Jonas): "> Her mit Meinem Ticket <" fett + präsent.
     V4 B1/A12 (Jonas): das Grau war "nicht einladend" → Gold-Gradient in der
     Familie der Primär-CTAs, dunkler Text; Puls/Glow in motion-v4.css.
     Wortlaut unverändert. */
  margin: 0;
  padding: 15px 10px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #ffe9a3 0%, rgb(245, 205, 72) 42%, rgb(251, 194, 1) 100%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: rgb(26, 14, 46);
  text-shadow: none;
  text-align: center;
  transition: filter 0.25s;
}
.mf-ticket:hover .mf-ticket__cta,
.mf-ticket:focus-visible .mf-ticket__cta { filter: brightness(1.07); }
.mf-ticket:active .mf-ticket__cta { filter: brightness(0.97); }
.mf-ticket__badge {
  background: none;
  color: #fff;
  border-radius: 0;
  padding: 0;
  margin: 22px auto 0;
  width: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.mf-ticket__badge::before,
.mf-ticket__badge::after {
  content: '';
  width: 58px;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
}
.mf-ticket__badge2 {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
  margin: 8px 0 0;
}
.sec-tickets__cardwrap { display: flex; flex-direction: column; }
@media (max-width: 1200px) {
  .mf-tickets { grid-template-columns: repeat(auto-fit, minmax(300px, 361px)); }
}
@media (max-width: 767px) {
  /* V4 A12: Datum bleibt einzeilig (u-nowrap) — Grösse/Deko so verkleinert,
     dass "10.10. & 11.10.2026" auf 390px ohne H-Scroll passt */
  .sec-tickets__date { font-size: 21px; gap: 14px; }
  .sec-tickets__date::before, .sec-tickets__date::after { width: 38px; }
}

/* --------------------------------------------- 19. Charity + Garantien --- */
.sec-charity {
  padding: 60px var(--mf-pad) 70px;
  /* V2-Verify r2: Original-Aussenbereich ist dunkles Violett-Navy (Ø rgb(31,21,56)) —
     ohne eigenen BG schienen die hellen Body-Rays durch (Ø rgb(49,18,74)) */
  background: linear-gradient(180deg, #241536 0%, #2a1740 45%, #1c1030 100%);
}
.sec-charity .mf-container { max-width: 1200px; }
.sec-charity__logos {
  display: block;
  width: min(982px, 92%);
  margin: 0 auto -88px;
  position: relative;
  z-index: 2;
}
.sec-charity__panel {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  padding: 130px 60px 60px;
  text-align: center;
}
.sec-charity__panel p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 35.2px;
  color: #fff;
  max-width: 980px;
  margin: 0 auto 24px;
}
.sec-charity__script { width: min(340px, 70%); margin: 18px auto 30px; display: block; }
.sec-charity__org { margin-top: 34px; }
.sec-charity__org h4 {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 0 0 12px;
}
.sec-charity__org p { font-size: 18px; line-height: 28.8px; margin: 0 auto; }
.sec-charity__trust-h { margin-top: 90px; }
.sec-charity__trustgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 363px));
  justify-content: center;
  gap: 34px;
  align-items: stretch;
  margin-top: 110px;
}
.sec-charity__trustcell { display: flex; flex-direction: column; }
.sec-charity__badge {
  width: 172px;
  margin: 0 auto -86px;
  position: relative;
  z-index: 2;
}
.sec-charity__trustcard {
  flex: 1;
  background-size: cover;
  background-position: center;
  border: 2px dotted rgb(245, 205, 72);
  border-radius: 15px;
  padding: 104px 26px 40px;
  text-align: center;
}
.sec-charity__trustcard h3 {
  font-family: var(--mf-font-head);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
  margin: 0 0 26px;
}
.sec-charity__trustcard p {
  font-size: 16px;
  line-height: 26px;
  color: #fff;
  margin: 0;
}
.sec-charity__outro {
  font-family: var(--mf-font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  max-width: 1050px;
  margin: 80px auto 34px;
}
@media (max-width: 1000px) {
  .sec-charity__panel { padding: 110px 22px 40px; }
  .sec-charity__panel p { font-size: 18px; line-height: 28px; }
  .sec-charity__trustgrid { grid-template-columns: minmax(0, 363px); gap: 110px; }
  .sec-charity__logos { margin-bottom: -40px; }
  .sec-charity__outro { font-size: 22px; }
}

/* ------------------------------------------------- 20/22. Galerien --- */
.sec-galerie { padding: 100px 0 90px; overflow: hidden; }
.sec-galerie__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  margin: 0 -60px 26px;
}
.sec-galerie__row img { flex: 0 0 auto; height: auto; border: 0; border-radius: 0; }
.sec-galerie__row img:nth-child(6n+1) { width: 155px; margin-top: 16px; }
.sec-galerie__row img:nth-child(6n+2) { width: 190px; margin-top: 0; }
.sec-galerie__row img:nth-child(6n+3) { width: 145px; margin-top: 38px; }
.sec-galerie__row img:nth-child(6n+4) { width: 160px; margin-top: 8px; }
.sec-galerie__row img:nth-child(6n+5) { width: 200px; margin-top: 26px; }
.sec-galerie__row img:nth-child(6n+6) { width: 150px; margin-top: 44px; }
/* Mobile-Galerie: kompakte Mini-Collage auf Party-Foto-BG (wie Original) */
.sec-galerie--mobile {
  padding: 20px 0 26px;
  background-image:
    linear-gradient(rgba(8, 4, 16, 0.42), rgba(8, 4, 16, 0.42)),
    url('../assets/img/Magic-Flow-Desktop-Grafiken-und-Header-fuer-Landingpage-18-min.webp');
  background-size: cover;
  background-position: center;
}
/* V2-Verify r1: Original-Mobil-Collage kompakter (333px hoch) → Bubbles kleiner */
.sec-galerie--mobile { padding: 14px 0 18px; }
.sec-galerie--mobile .sec-galerie__row { gap: 5px; margin: 0 -18px 6px; }
.sec-galerie--mobile .sec-galerie__row img:nth-child(n) { width: 56px; margin-top: 0; }
.sec-galerie--mobile .sec-galerie__row:nth-child(2) img:nth-child(n) { width: 70px; margin-top: 3px; }
.sec-galerie--mobile .sec-galerie__row:nth-child(3) img:nth-child(n) { width: 78px; margin-top: 2px; }
.sec-galerie--mobile .sec-galerie__row:nth-child(4) img:nth-child(n) { width: 84px; }

/* ----------------------------------------------------------- 21. Zitat --- */
/* V4.1 (Jonas-Review 2026-07-07): Desktop-Basis = ORIGINAL-Layout (V3-Stand,
   Werte aus Commit 3f60be6^) — Zitat linksbündig auf dem sichtbaren
   Jonas-Foto als Hintergrund (Inline-BG via render.js, Theme B verfeinert
   die Nähte); das V4-A13-Redesign (grosses Portrait-Element + Gold-
   Anführungszeichen) lebt NUR noch im Mobil-Scope (max-width 900px). */
.mf-quote {
  position: relative;
  min-height: 679px;
  display: flex;
  align-items: center;
  padding: 60px var(--mf-pad);
  border: 0;
  background-color: #16090f;
  background-size: cover;
  background-position: center right;
  text-align: left;
}
.mf-quote__inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.mf-quote__figure { margin: 0; }
.mf-quote__figure::before { content: none; }
.mf-quote blockquote {
  margin: 0 0 0 44px;
  max-width: 420px; /* V2-Verify r1: Original bricht in 4 Zeilen um */
  border-left: 2px solid #fff;
  padding-left: 40px;
  font-family: 'Quicksand', var(--mf-font-body);
  font-size: 33px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.mf-quote figcaption {
  margin: 34px 0 0 128px;
  font-family: var(--mf-font-body);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #fff;
}
.mf-quote__sig { width: 234px; margin: 14px 0 0 150px; }
/* Desktop: das V4-Portrait-Element bleibt aus — Foto ist der Hintergrund */
.mf-quote__media { display: none; }
@media (max-width: 900px) {
  /* V4 A13 REDESIGN (2026-07-06), ab V4.1 NUR Mobil: Portrait als eigenes,
     grosses Bild-Element (reingezoomter Ausschnitt via object-fit/position —
     der fleckige Gelb-Blob am rechten Bildrand bleibt draussen), Quote-Typo
     mit grossem Gold-Anführungszeichen, Signatur elegant, ruhiger Violett-BG
     (!important schlägt das Desktop-Inline-BG-Foto; Theme B übersteuert die
     Nahtfarben). Copy unverändert. */
  .mf-quote {
    min-height: 0;
    display: block;
    padding: 56px var(--mf-pad) 64px;
    background:
      radial-gradient(880px 560px at 72% 30%, rgba(139, 63, 201, 0.16), transparent 64%),
      linear-gradient(180deg, #0d0819 0%, #180d2b 45%, #0d0819 100%) !important;
  }
  .mf-quote__inner {
    max-width: 1120px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
  }
  .mf-quote__figure { position: relative; padding-top: 44px; }
  .mf-quote__figure::before {
    /* grosses typografisches Gold-Anführungszeichen */
    content: '\201C';
    position: absolute;
    top: -12px;
    left: -6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: rgba(251, 194, 1, 0.55);
    pointer-events: none;
  }
  .mf-quote blockquote {
    margin: 0;
    max-width: none;
    border: 0;
    padding: 0;
    font-size: 23px;
    line-height: 1.5;
    color: #fff;
    text-wrap: balance;
  }
  .mf-quote figcaption {
    margin: 22px 0 0 2px;
    font-family: var(--mf-font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(251, 194, 1, 0.85);
  }
  .mf-quote figcaption::before {
    content: '';
    display: inline-block;
    width: 34px;
    height: 1px;
    margin-right: 14px;
    vertical-align: 4px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.9), rgba(201, 168, 76, 0.2));
  }
  .mf-quote__sig { width: 200px; margin: 22px 0 0; opacity: 0.95; }
  /* Mobil: Portrait zuerst — gross und reingezoomt, Quote darunter */
  .mf-quote__media {
    display: block;
    order: -1;
    position: relative;
    aspect-ratio: 4 / 3.4;
    max-height: 400px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.35);
    box-shadow: 0 24px 60px rgba(3, 2, 8, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
  .mf-quote__media::after {
    /* leiser Lesbarkeits-/Tiefen-Verlauf unten statt fleckigem Gelb */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(13, 8, 25, 0.05) 55%, rgba(13, 8, 25, 0.4) 100%);
  }
  .mf-quote__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Quell-Foto ist 1600x524 (sehr breit) → cover zoomt automatisch stark
       rein; 66% horizontal = Jonas-Portrait prominent, Gelb-Blob (rechte
       20%) bleibt grösstenteils ausserhalb des Ausschnitts */
    object-position: 66% 30%;
  }
}

/* ------------------------------------------------------ 23. Drei Lehren --- */
.sec-lehren { padding: 90px var(--mf-pad); }
.sec-lehren__block { text-align: center; max-width: 1160px; margin: 0 auto 150px; }
.sec-lehren__block:last-child { margin-bottom: 0; }
.sec-lehren__block img { margin: 0 auto 30px; }
.sec-lehren__block:nth-child(1) img { width: 197px; }
.sec-lehren__block:nth-child(2) img { width: 266px; }
.sec-lehren__block:nth-child(3) img { width: 151px; }
.sec-lehren__block h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 51.2px;
  color: #fff;
  margin: 0 0 26px;
}
.sec-lehren__block h3 .is-goldbrown { color: #FBC201; }
.sec-lehren__block p {
  font-family: var(--mf-font-body);
  font-size: 17px;
  line-height: 27.2px;
  color: #fff;
  max-width: 1126px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .sec-lehren__block { margin-bottom: 90px; }
  .sec-lehren__block h3 { font-size: 24px; line-height: 1.5; }
  .sec-lehren__block:nth-child(n) img { width: min(180px, 46%); }
}

/* -------------------------------------------------------- 24. Gastgeber --- */
.sec-host { padding: 50px var(--mf-pad) 80px; }
/* V16 (Jonas): „Mehr über Jonas" als klar klickbarer Gold-Pill-Button mit Pfeil */
.sec-host__toggle { max-width: 460px; margin: 26px auto 0; text-align: center; }
.sec-host__toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 30px;
  border: 1.5px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  color: #fff;
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: 17px;
  background: rgba(201, 168, 76, 0.1);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sec-host__toggle > summary::-webkit-details-marker { display: none; }
.sec-host__toggle > summary::after {
  content: '⌄';
  font-size: 22px;
  line-height: 1;
  color: #FBC201;
  transition: transform 0.25s;
  margin-top: -4px;
}
.sec-host__toggle[open] > summary::after { transform: rotate(180deg); }
.sec-host__toggle > summary:hover {
  background: rgba(201, 168, 76, 0.2);
  border-color: #FBC201;
  box-shadow: 0 0 22px rgba(251, 194, 1, 0.25);
}
.sec-host__toggle .mf-acc__body { margin-top: 22px; }
.sec-host .mf-container { max-width: 1200px; }
.sec-host__card {
  position: relative;
  max-width: 1128px;
  margin: 0 auto;
  border-radius: 46px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 12px;
  padding: 54px 44px 40px;
}
.sec-host__hey {
  text-align: center;
  font-family: var(--mf-font-head);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.69);
  margin: 0 0 8px;
}
.sec-host__jonas {
  text-align: center;
  font-family: var(--mf-font-head);
  font-size: 61px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #FBC201;
  margin: 0 0 46px;
}
.sec-host__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  margin: 0 40px;
}
.mf-stat {
  text-align: left;
  padding: 26px 0 30px;
  border: 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.sec-host__stats .mf-stat:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.mf-stat__value {
  font-family: var(--mf-font-head);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #FBC201;
  margin-bottom: 14px;
}
.mf-stat__label {
  font-family: var(--mf-font-head);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.5px;
  color: #fff;
}
.sec-host__mc {
  text-align: center;
  font-family: var(--mf-font-head);
  font-size: 20px;
  font-weight: 400;
  color: #FBC201;
  margin: 56px 0 26px;
}
.sec-host__copy p {
  font-family: var(--mf-font-body);
  font-size: 16.5px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 18px;
}
.sec-host__toggle {
  max-width: 820px;
  margin: 26px auto 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.sec-host__toggle summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--mf-font-head);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  min-height: 0;
  padding: 6px;
}
.sec-host__toggle summary::-webkit-details-marker { display: none; }
.sec-host__toggle summary::after { content: '  ⤵'; }
.sec-host__toggle .mf-acc__body { color: rgba(255, 255, 255, 0.88); text-align: center; }
@media (max-width: 900px) {
  .sec-host__card { padding: 38px 20px 28px; border-radius: 30px; }
  .sec-host__jonas { font-size: 42px; }
  .sec-host__stats { grid-template-columns: 1fr 1fr; column-gap: 22px; margin: 0; }
  .mf-stat__value { font-size: 20px; }
  .mf-stat__label { font-size: 15px; }
}

/* -------------------------------------------- 25. Team + Location --- */
.sec-team {
  padding: 50px 0 0;
  /* V2-Verify r1: Original oben dunkles Violett statt heller Body-Rays.
     V3 Basis-Fix #7: läuft unten deckend in das Schwarz des __black-Blocks
     aus — vorher harte Violett→Schwarz-Kante mitten in der Sektion. */
  background: linear-gradient(180deg, rgba(30, 13, 52, 0.9) 0%, rgba(22, 10, 40, 0.92) 45%, rgba(10, 6, 20, 0.96) 78%, #060608 100%);
}
.sec-team__head { max-width: 1200px; margin: 0 auto; padding: 0 var(--mf-pad); text-align: center; }
.sec-team__sub {
  font-family: var(--mf-font-body);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 26px;
}
.mf-teamphoto {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  max-width: min(100%, 660px);
  margin: 0 auto 60px;
}
.sec-team__black {
  /* V4 A16 (2026-07-06): das zu dunkle Schwarz → weicher dunkler
     Violett-Verlauf (Treatment-Familie); Theme B verfeinert die Nähte. */
  background: linear-gradient(180deg, #100a1e 0%, #140b24 40%, #0e0919 75%, #0a0714 100%);
  padding: 60px var(--mf-pad) 70px;
  text-align: center;
}
/* V4 A16: "Location und Daten" = eigener klarer BG-Switch — Vollbreiten-Band
   mit eigener Bühne und weichen Übergängen oben/unten. */
.sec-team__locwrap {
  margin: 90px calc(-1 * var(--mf-pad)) 0;
  padding: 70px var(--mf-pad) 76px;
  background:
    linear-gradient(180deg, #140b24 0, rgba(20, 11, 36, 0) 130px),
    linear-gradient(0deg, #0e0919 0, rgba(14, 9, 25, 0) 130px),
    radial-gradient(760px 420px at 50% 20%, rgba(139, 63, 201, 0.16), transparent 64%),
    linear-gradient(180deg, #170d29 0%, #1d1132 50%, #130b23 100%);
}
.sec-team__locwrap .sec-team__loc-h { margin: 0 0 54px; }
.sec-team__black .mf-h { padding-bottom: 14px; }
.sec-team__closercopy {
  font-family: var(--mf-font-body);
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  margin: 30px auto 0;
}
.sec-team__loc-h {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-align: center;
  margin: 90px 0 60px;
}
.sec-team__locgrid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 70px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.sec-team__map { position: relative; }
.sec-team__map img { width: 100%; height: auto; }
/* Pin ist bereits in der Karten-Grafik (Landingpage-17) enthalten */
.sec-team__chip {
  position: absolute;
  background: #000;
  color: #fff;
  font-family: var(--mf-font-head);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 3px;
  white-space: nowrap;
}
.sec-team__chip--city { left: 41%; top: 27%; font-size: 20px; }
.sec-team__chip--date { left: 41%; top: 42%; font-size: 17px; }
.sec-team__infocard {
  position: relative;
  background: #fff;
  border: 2px solid #C9A84C;
  border-radius: 4px;
  padding: 40px 34px;
  text-align: left;
}
.sec-team__infocard h4 {
  font-family: var(--mf-font-head);
  font-size: 19px;
  font-weight: 700;
  color: #000;
  margin: 0 0 20px;
}
.sec-team__infocard h4.u { text-decoration: underline; text-underline-offset: 4px; }
.sec-team__infocard .day { font-weight: 700; color: #000; margin: 0 0 2px; font-size: 16px; }
.sec-team__infocard .time { color: #000; margin: 0 0 16px; font-size: 16px; }
.sec-team__infocard .addr { color: #000; margin: 0; font-size: 16px; line-height: 1.6; }
.sec-team__butterfly {
  position: absolute;
  top: -22px;
  right: -8px;
  width: 64px;
}
/* Team-Galerie-Slider */
.sec-team__slider { position: relative; max-width: 1200px; margin: 80px auto 0; }
.sec-team__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px;
}
.sec-team__track::-webkit-scrollbar { display: none; }
.sec-team__track img {
  flex: 0 0 auto;
  width: 363px;
  height: 242px;
  object-fit: cover;
  scroll-snap-align: start;
  border-radius: 0;
}
.sec-team__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
}
.sec-team__nav--prev { left: -8px; }
.sec-team__nav--next { right: -8px; }
@media (max-width: 900px) {
  .sec-team__locgrid { grid-template-columns: 1fr; gap: 44px; }
  .sec-team__track img { width: 300px; height: 200px; }
  .sec-team__closer-h .l2 { color: #FBC201; }
}
.sec-team__closer-h .l1, .sec-team__closer-h .l2 { display: block; }
@media (min-width: 901px) {
  .sec-team__closer-h .l1, .sec-team__closer-h .l2 { display: inline; }
}

/* ------------------------------------------------------------- 26. FAQ --- */
.sec-faq {
  background: #000;
  padding: 60px var(--mf-pad) 100px;
}
.sec-faq .mf-container { max-width: 1200px; }
.sec-faq__cols { columns: 2; column-gap: 24px; }
.sec-faq .mf-acc {
  break-inside: avoid;
  border: 0;
  border-radius: 5px;
  margin-bottom: 19px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, rgb(168, 36, 171) 0%, rgb(122, 31, 140) 45%, rgb(86, 21, 105) 100%);
  overflow: hidden;
}
.sec-faq .mf-acc summary {
  font-family: var(--mf-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  padding: 17px 46px 17px 18px;
}
.sec-faq .mf-acc summary::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 6.4h2.9l6.3 6.3V7.4h2v9h-9v-2h5.3L6.4 8.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 6.4h2.9l6.3 6.3V7.4h2v9h-9v-2h5.3L6.4 8.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: #fff;
}
.sec-faq .mf-acc[open] summary::after { transform: rotate(90deg); }
.sec-faq .mf-acc__body { color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.25); padding-top: 12px; }
.sec-faq__badge { display: none; }
@media (max-width: 900px) {
  .sec-faq__cols { columns: 1; }
  .sec-faq__badge { display: block; width: min(296px, 80%); margin: 40px auto 0; }
  /* V2-Verify r1: Original mobile kompakter (Sektion 2382px statt 2865px) */
  .sec-faq { padding: 44px var(--mf-pad) 70px; }
  .sec-faq .mf-acc { margin-bottom: 15px; }
  .sec-faq .mf-acc summary { font-size: 17px; padding: 13px 42px 13px 16px; }
}

/* ---------------------------------------------------------- 27. Footer --- */
/* V4 A17 (2026-07-06): Abschluss im jonasschiffmann.com-Stil (Referenz-Analyse
   QA/v4/REFERENZEN.md §2) — Stockwerk A: Violett-Dom-Bühne mit gesperrter
   Brand-Zeile, grossem Gradient-Schriftzug, Jahr, Ornament-Trenner und
   "POWERED BY Magnificus"-Plakette, die auf einer 3px-Gold-Gradient-Linie
   steht. Stockwerk B: fast-schwarze Legal-Leiste (© · Impressum · Datenschutz)
   im 12px-uppercase-Stil der Referenz. Nur self-hosted Fonts. */
.mf-footer { padding: 0; border-top: 0; }
.mf-footer__stage {
  text-align: center;
  padding: 84px var(--mf-pad) 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 20, 0.95) 0%, rgba(11, 7, 20, 0) 26%),
    radial-gradient(ellipse 140% 100% at 50% 58%, rgba(90, 22, 144, 0.55) 0%, rgba(58, 15, 110, 0.45) 48%, rgba(11, 7, 20, 0.9) 100%),
    linear-gradient(180deg, #0b0714 0%, #170b2c 55%, #0d0716 100%);
}
.mf-footer__brand {
  margin: 0 0 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
}
.mf-footer__big {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 5vw, 3.1rem);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(130deg, #fff 20%, #fbc201 50%, #fff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mf-footer__year {
  margin: 10px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 8px;
  color: rgba(251, 194, 1, 0.45);
}
/* Ornament-Trenner (Hairlines + Sterne + Punkt) */
.mf-footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 400px;
  margin: 2.4rem auto;
}
.mf-footer__ornament .orn-line {
  flex: 1 1 auto;
  height: 1px;
}
.mf-footer__ornament .orn-line--l { background: linear-gradient(90deg, transparent, rgba(251, 194, 1, 0.32)); }
.mf-footer__ornament .orn-line--r { background: linear-gradient(90deg, rgba(251, 194, 1, 0.32), transparent); }
.mf-footer__ornament .orn-star { font-size: 12px; line-height: 1; color: rgba(251, 194, 1, 0.45); }
.mf-footer__ornament .orn-dash { width: 6px; height: 1px; background: rgba(251, 194, 1, 0.4); }
.mf-footer__ornament .orn-dot { font-size: 14px; line-height: 1; color: rgba(251, 194, 1, 0.3); }
/* "Powered by"-Plakette — Bogen oben, steht bündig auf der Gold-Linie */
.mf-footer__plaque {
  display: inline-block;
  margin: 0;
  padding: 1rem 3rem 0.7rem;
  min-width: 200px;
  border-radius: 60px 60px 0 0;
  background: linear-gradient(180deg, rgba(90, 40, 140, 0.5), rgba(60, 20, 100, 0.3));
  vertical-align: bottom;
}
.mf-footer__powered {
  margin: 0 0 0.35rem;
  font-family: var(--mf-font-head);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.mf-footer__magnificus {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  letter-spacing: 5px;
  text-transform: uppercase;
  background: linear-gradient(130deg, #f5e6b8 10%, #fbc201 45%, #fff8dd 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.92;
}
/* 3px-Gold-Gradient-Linie (Plakette steht darauf) */
.mf-footer__goldline {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.3) 20%, rgba(201, 168, 76, 0.55) 50%, rgba(201, 168, 76, 0.3) 80%, transparent);
}
/* Stockwerk B — Legal-Leiste */
.mf-footer__bar {
  background: #030108;
  padding: 1.7rem var(--mf-pad);
  text-align: center;
}
.mf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  font-family: var(--mf-font-head);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.mf-footer__copy { letter-spacing: 1px; text-transform: none; }
.mf-footer a {
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  padding: 8px 4px;
  text-decoration: none;
}
.mf-footer a:hover, .mf-footer a:focus-visible { color: var(--mf-gold-bright); }
.mf-footer .sep { color: rgba(255, 255, 255, 0.4); }
@media (max-width: 767px) {
  .mf-footer__stage { padding-top: 64px; }
  .mf-footer__ornament { max-width: 300px; margin: 2rem auto; }
  .mf-footer__plaque { padding: 0.9rem 2.2rem 0.6rem; }
  /* Legal-Leiste: ©-Zeile eigene Zeile, Links sauber in Zeile 2 (kein
     hängender Trennpunkt am Zeilenende) */
  .mf-footer__legal { font-size: 11px; letter-spacing: 0.16em; }
  .mf-footer__copy { flex-basis: 100%; }
  .mf-footer__copy + .sep { display: none; }
}

/* ------------------------------------------------ globale Feinheiten --- */

/* V3 Theme-Infra (Basis-Fix #9): Sektions-BGs aus content/config.json laufen
   nicht mehr als Inline-Styles, sondern über CSS-Variablen — render.js setzt
   --mf-bg-* + das data-mf-bg-Attribut. Diese Regel steht bewusst am ENDE der
   Datei (gewinnt bei gleicher Spezifität gegen frühere Klassen-Regeln, exakt
   wie vorher die Inline-Styles). Themes überschreiben per
   body[data-theme="a"/"b"] .sec-x { background: … } in css/theme-a/b.css. */
[data-mf-bg] {
  background-image: var(--mf-bg-image);
  background-size: var(--mf-bg-size, cover);
  background-position: var(--mf-bg-position, center);
  background-repeat: var(--mf-bg-repeat, repeat);
}

/* Scroll-Progress-Goldlinie kollidiert mit Original-Look → aus */
.mf-scrollprogress { display: none; }

/* Anker-Ziel unter der Sticky-Bar */
section[id], [id^='tve-jump'] { scroll-margin-top: 100px; }

/* ============================================================
   V16 — Einheitlichkeit & Sektions-Abgrenzung (aus einem Guss)
   Append-only Override-Block, gewinnt per Quell-Reihenfolge.
   ============================================================ */

/* --- 2. Sektions-Abgrenzung: dezenter Gold-Glow-Divider oben ---
   behebt das „freischwebende / lost"-Problem der betroffenen Sektionen */
.sec-progress, .sec-lehren, .sec-team, .sec-gruende, .sec-stip { position: relative; }
.sec-progress::before,
.sec-lehren::before,
.sec-team::before,
.sec-gruende::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 62%);
  height: 2px;
  background: linear-gradient(90deg, transparent, #FBC201 50%, transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* --- 2b. Ticket-Progress in eine geschlossene Kachel ---
   „Hol Dir Dein Ticket"-Zeile + Tacho + CTA als Container */
.sec-progress .mf-progress {
  max-width: 840px;
  margin: 26px auto 0;
  background: linear-gradient(180deg, rgba(62, 27, 96, 0.34), rgba(20, 10, 36, 0.5));
  border: 1px solid rgba(251, 194, 1, 0.32);
  border-radius: 22px;
  padding: 36px 30px 42px;
  box-shadow: 0 0 46px rgba(120, 60, 180, 0.16);
}

/* --- 1./4. drei-Lehren: Montserrat + smarter, grösserer Text, enger --- */
.sec-lehren__block { margin-bottom: 96px; }
.sec-lehren__block h3 {
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  margin-bottom: 20px;
}
.sec-lehren__block p {
  font-size: 19px;
  line-height: 1.62;
  max-width: 760px;      /* franzelt nicht mehr über die volle Breite aus */
  margin-left: auto;
  margin-right: auto;
}

/* --- 3. Magic-Stipendium: Pulldown als klar klickbarer Gold-Pill-Button --- */
.sec-stip__terms {
  max-width: 620px;
  text-align: center;
}
.sec-stip__terms summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* V16.28 (Jonas, Bild #83): Button violett statt gold */
  background: linear-gradient(180deg, rgba(124, 107, 176, 0.18), rgba(124, 107, 176, 0.07));
  border: 1.5px solid #7C6BB0;
  border-radius: 999px;
  padding: 13px 28px;
  font-family: var(--mf-font-head);
  font-size: 16px;
  font-weight: 600;
  color: #A896D8;
  transition: background 0.2s ease, transform 0.15s ease;
}
.sec-stip__terms summary:hover {
  background: rgba(124, 107, 176, 0.26);
  transform: translateY(-1px);
}
.sec-stip__terms summary::after {
  content: '⌄';
  font-size: 19px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.sec-stip__terms[open] summary::after { transform: rotate(180deg); }
.sec-stip__terms .mf-acc__body {
  border: 1px solid rgba(251, 194, 1, 0.22);
  border-radius: 16px;
  background: rgba(20, 10, 36, 0.4);
  padding: 20px 22px;
  margin-top: 16px;
}

/* --- 7b. Kunden-/ProvenExpert-Bewertungssiegel jetzt AUCH auf Desktop ---
   (war nur mobil sichtbar; Jonas: „Desktop braucht das Siegel"). */
@media (min-width: 901px) {
  .sec-faq__badge {
    display: block;
    width: min(260px, 30%);
    margin: 46px auto 0;
  }
}

/* ============================================================
   V16.4 — Sticky-Ticket-Bar erst beim Scrollen + Desktop-FOMO-Widget (Jonas)
   ============================================================ */

/* (C) Die obere Ticket-/Countdown-Bar (Desktop .mf-announce, Mobil .mf-ctastrip)
   ist am Seitenanfang WEG und fährt erst ein, wenn man zu scrollen beginnt.
   Dafür fixed statt sticky (kein Flow-Platz → Hero startet bündig ganz oben). */
.mf-announce,
.mf-ctastrip {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
body.topbar-on .mf-announce,
body.topbar-on .mf-ctastrip {
  transform: translateY(0);
}

/* (D) Desktop-FOMO-Widget: persistenter Early-Bird-Hinweis unten links, der
   beim Scrollen erscheint und bleibt („nicht wegklickbar" → Close minimiert nur
   zu einem Flammen-Button, der es wieder aufklappt). Nur Desktop. */
.mf-fomo {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 340;
  width: min(330px, 86vw);
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3a1d66 0%, #1c0e33 100%);
  border: 1.5px solid var(--mf-gold-bright, #FBC201);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 40px rgba(168, 72, 214, 0.28);
  transform: translateY(26px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
}
body.fomo-on .mf-fomo { opacity: 1; transform: none; pointer-events: auto; }
.mf-fomo__flame { font-size: 26px; line-height: 1; flex: 0 0 auto; margin-top: 2px; }
.mf-fomo__body { display: flex; flex-direction: column; gap: 4px; }
.mf-fomo__body strong { font-family: var(--mf-font-head); font-size: 16px; color: var(--mf-gold-bright, #FBC201); }
.mf-fomo__body span { font-family: var(--mf-font-body); font-size: 13.5px; line-height: 1.4; color: #fff; }
.mf-fomo__body span b { color: var(--mf-gold-bright, #FBC201); }
.mf-fomo__cta {
  margin-top: 8px;
  align-self: flex-start;
  background: var(--mf-gold-bright, #FBC201);
  color: #1c0e33;
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.mf-fomo__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mf-fomo__close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.mf-fomo__close:hover { color: #fff; }
/* minimiert: schrumpft auf einen kleinen Flammen-Kreis, den man wieder aufklappt */
.mf-fomo.is-min {
  width: 56px; height: 56px; padding: 0;
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.mf-fomo.is-min .mf-fomo__body,
.mf-fomo.is-min .mf-fomo__close { display: none; }
.mf-fomo.is-min .mf-fomo__flame { margin: 0; font-size: 24px; }
@media (max-width: 767px) { .mf-fomo { display: none !important; } }

/* V16.4 — Bio „Der Millionenchemiker": Intro-Copy UND Ausklapp-Text identisch
   formatiert + schmalere, leichter lesbare Spalte (Jonas: „muss das Gleiche sein,
   leicht zu lesen"). */
.sec-host__copy p,
.sec-host__toggle .mf-acc__body p {
  font-family: var(--mf-font-body);
  font-size: 17.5px;
  line-height: 1.72;
  color: #fff;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 16px;
}
.sec-host__copy p:last-child,
.sec-host__toggle .mf-acc__body p:last-child { margin-bottom: 0; }
.sec-host__toggle { max-width: 760px; }

/* ============================================================
   V16.5 — EINHEITLICHES TYPO-SYSTEM (Jonas)
   3 Rollen (Überschrift · Claim · CTA), 2 Schriften:
   Montserrat = alles „Laute" (Headings/Claims/CTAs), Figtree = Fliesstext.
   Arial/Inter/Georgia/Quicksand aus Headings/Claims/CTAs entfernt.
   Feste Skala; Headings weiss (Gold nur als Keyword), Claims weiss (Gold nur
   unterstrichen), CTAs eine Grösse (dunkel auf Gold, nie voll-gelbe Schrift).
   ============================================================ */
:root {
  --t-heading: clamp(26px, 3vw, 40px);
  --t-display: clamp(30px, 4.4vw, 48px);
  --t-sub:     clamp(19px, 1.6vw, 22px);
  --t-claim:   clamp(19px, 2.1vw, 25px);
  --t-cta:     15px;
}

/* --- ROLLE 1: ÜBERSCHRIFTEN (Sektionstitel) — Montserrat 700, WEISS --- */
.mf-h, .mf-h--gold {
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: var(--t-heading);
  line-height: 1.22;
  color: #fff;
}
.mf-h--gold { color: #fff; }                 /* zufälliges Voll-Gold raus → einheitlich weiss */
.sec-team__loc-h {                            /* war Georgia-Serif */
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: var(--t-heading);
}
/* Display-Headlines gebändigt (waren 60/61px „gigantisch") */
.sec-break__headline { font-family: var(--mf-font-head); font-weight: 700; font-size: var(--t-display); }
.sec-host__jonas     { font-family: var(--mf-font-head); font-size: var(--t-display); }

/* --- ROLLE 1b: SUB-/KARTEN-ÜBERSCHRIFTEN — Montserrat 700, ~20px, weiss --- */
.mf-value figcaption,
.sec-werte__fitcard h3,
.sec-charity__trustcard h3,
.sec-charity__org h4,
.sec-erwartet__body h3,
.sec-team__infocard h4,
.sec-tiles__label,
.sec-host__mc {
  font-family: var(--mf-font-head);
  font-weight: 700;
  font-size: var(--t-sub);
}
.sec-host__mc         { color: #fff; }        /* „Der Millionenchemiker" = Überschrift → weiss */
.mf-value figcaption  { color: #fff; }
.sec-lehren__block h3 { font-family: var(--mf-font-head); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); }

/* --- ROLLE 2: CLAIMS — Montserrat 600, weiss, kleiner, Gold NUR unterstrichen/Keyword --- */
.sec-gruende__outro,
.sec-werte__outro,
.sec-pain__outro,
.sec-charity__outro,
.sec-team__closer-h,
.sec-gruende__sub,
.sec-break__sub,
.sec-tiles__center p {
  font-family: var(--mf-font-head);
  font-weight: 600;
  font-size: var(--t-claim);
  line-height: 1.5;
  color: #fff;
}
.sec-werte__outro { color: #fff; }            /* war voll-gold → weiss (JETZT bleibt gold unterstrichen) */

/* --- Prosa-Claims & Zahlen: Fremdschriften → Marken-Schriften --- */
.sec-stip__intro, .sec-stip__price { font-family: var(--mf-font-body); }
.mf-progress__value, .mf-progress__label,
.sec-tickets__date, .mf-ticket__name, .mf-ticket__price, .mf-ticket__cta {
  font-family: var(--mf-font-head);
}
.mf-quote blockquote { font-family: var(--mf-font-head); font-weight: 400; }

/* Tags kleiner (waren Arial 32px) — Spezifität an Basisregel (.mf-benefit p.mf-benefit__tag) angeglichen */
.mf-benefit p.mf-benefit__tag { font-family: var(--mf-font-head); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #FBC201; }

/* --- ROLLE 3: CTA-Buttons — EINE Grösse (dunkel auf Gold) --- */
.mf-ticket__cta { font-size: var(--t-cta); }

/* V16.7 — echte Ticketpay-Zahl: „freie Plätze"-Zeile im Ticket-Tacho */
.mf-progress__avail {
  font-family: var(--mf-font-head);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  color: #fff;
  margin: 12px 0 0;
}
.mf-progress__avail strong { color: var(--mf-gold-bright, #FBC201); font-weight: 800; }

/* V16.9 — Header: Countdown-Timer + Ticket-Status-Bar UNTER dem Text (Jonas) */
.mf-herox__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-top: 26px;
}
.mf-herox__timer .mf-countdown__num { font-size: clamp(20px, 2vw, 28px); color: #d96fe0; font-weight: 800; }
.mf-herox__timer .mf-countdown__label { font-size: 11px; color: rgba(255, 255, 255, 0.78); }
/* Ticket-Status-Bar */
.mf-herox__ticketbar { min-width: 230px; flex: 1 1 250px; max-width: 360px; }
.mf-herox__ticketbar-label { font-family: var(--mf-font-head); font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.mf-herox__ticketbar-label strong { color: #d96fe0; font-weight: 800; }
.mf-herox__ticketbar-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.mf-herox__ticketbar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8330ba 0%, #ab48d6 45%, #d96fe0 100%); box-shadow: 0 0 12px rgba(168, 72, 214, 0.6); transition: width 0.6s ease; }
@media (max-width: 767px) {
  .mf-herox__meta { gap: 10px 18px; margin-top: 18px; }
  .mf-herox__ticketbar { max-width: none; flex-basis: 200px; }
}

/* V16.10 — ProvenExpert-Badge klickbar (Link zu ProvenExpert) */
a.sec-proven__badge { text-decoration: none; cursor: pointer; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.sec-proven__badge:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(120, 60, 180, 0.4); }

/* V16.12 — Galerie Endlos-Marquee: scroll-snap aus, sonst blockiert es den Auto-Scroll */
.sec-team__track.is-marquee { scroll-snap-type: none; scroll-behavior: auto; }
.sec-team__track.is-marquee > * { scroll-snap-align: none; }

/* V16.13 — Map optimiert (Jonas): LP-Gold-Karte, Labels als Text neben dem Pin
   (überdecken Pin/Basel NICHT), Zoom bei Hover, Google-Maps-Link, modular. */
a.sec-team__map { display: block; text-decoration: none; cursor: pointer; }
.sec-team__mapzoom { overflow: hidden; border-radius: 14px; }
.sec-team__mapzoom img { display: block; width: 100%; height: auto; transition: transform 0.7s cubic-bezier(0.2, 1, 0.36, 1); }
.sec-team__map:hover .sec-team__mapzoom img { transform: scale(1.08); }
/* Labels: reiner Text (kein schwarzer Kasten), rechts neben dem Pin, Pin+Basel frei */
.sec-team__chip {
  background: none;
  color: #fff;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}
.sec-team__chip--city { left: 48%; top: 15%; font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; }
.sec-team__chip--date { left: 48%; top: 23%; font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; }
/* Adresse als Google-Maps-Link */
a.addr--link { text-decoration: none; color: inherit; cursor: pointer; transition: color 0.15s ease; }
a.addr--link:hover { color: var(--mf-gold-bright, #FBC201); text-decoration: underline; }
@media (max-width: 767px) {
  .sec-team__chip--city { left: 50%; top: 12%; }
  .sec-team__chip--date { left: 50%; top: 20%; }
}

/* V16.14 — mehr Schmetterlinge (Branding) + sanfte Flatter-Bewegung */
@keyframes mf-bfly-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 5deg)); }
}
.sec-lehren, .sec-stip { position: relative; }
.sec-lehren__bfly, .sec-stip__bfly {
  position: absolute; z-index: 1; opacity: 0.5; pointer-events: none;
  animation: mf-bfly-float 6s ease-in-out infinite;
}
.sec-lehren__bfly--1 { top: 70px;  left: 5%;  width: 54px; --r: -12deg; }
.sec-lehren__bfly--2 { bottom: 90px; right: 6%; width: 66px; --r: 10deg; animation-delay: -3s; }
.sec-stip__bfly      { top: 46px;  right: 7%; width: 58px; --r: 8deg;  animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) {
  .sec-lehren__bfly, .sec-stip__bfly { animation: none; }
}
@media (max-width: 767px) {
  .sec-lehren__bfly, .sec-stip__bfly { width: 40px; opacity: 0.38; }
  .sec-lehren__bfly--1 { left: 2%; } .sec-lehren__bfly--2 { right: 2%; }
}

/* V16.15 — Verfügbarkeit pro Ticket-Kategorie (Jonas, Ref #68) */
.mf-ticket__avail { margin: 4px 0 12px; padding: 0 4px; }
.mf-ticket__avail-label {
  font-family: var(--mf-font-head); font-size: 13px; font-weight: 700;
  color: #1e1c1b; margin: 0 0 6px; text-align: center; letter-spacing: 0.2px;
}
.mf-ticket__avail-label strong { color: #8330ba; font-weight: 800; }
.mf-ticket__avail-track {
  height: 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.12); overflow: hidden;
}
.mf-ticket__avail-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #8330ba 0%, #ab48d6 45%, #d96fe0 100%);
  box-shadow: 0 0 8px rgba(168, 72, 214, 0.5);
}

/* V16.16 — Füllbalken animieren (0 → Ziel) + Ticket-Verfügbarkeit klar lesbar */
.mf-herox__ticketbar-fill,
.mf-ticket__avail-fill { transition: width 1.2s cubic-bezier(0.2, 1, 0.36, 1); }

/* Ticket-Verfügbarkeit: eigenes dunkles Panel → weisser Text immer lesbar, klare Füllanzeige */
.mf-ticket__avail {
  margin: 4px 12px 12px;
  padding: 10px 12px;
  background: rgba(20, 10, 36, 0.62);
  border-radius: 12px;
}
.mf-ticket__avail-label {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}
.mf-ticket__avail-label strong { color: #e46fd0; font-weight: 800; }
.mf-ticket__avail-track { height: 13px; background: rgba(255, 255, 255, 0.16); }

/* V16.18 — klickbares ProvenExpert-Badge vor der Location (statt Karte über Team) */
a.sec-team__proven { display: block; text-decoration: none; cursor: pointer; margin: 8px auto 26px; max-width: 420px; transition: transform 0.15s ease, filter 0.15s ease; }
a.sec-team__proven:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* V16.18 — Mobile Hero-Header-Fixes (Jonas) */
@media (max-width: 767px) {
  .mf-herox__logo { width: 96px; top: 12px; right: 14px; }        /* Logo kleiner */
  .mf-herox__inner { padding-top: 6px; }                          /* Textblock ~1cm höher */
  .mf-herox__text { display: flex; flex-direction: column; }
  .mf-herox__meta { order: -1; margin: 0 0 14px; }                /* Timer/Status ÜBER das Datum */
}

/* V16.19 — Header: nur Countdown oben, Status-Bar unten beim Button (Jonas) */
.mf-herox__timer { margin: 0 0 16px; }
.mf-herox__ticketbar { max-width: 380px; margin: 20px 0 0; min-width: 0; }
@media (max-width: 767px) {
  .mf-herox__ticketbar { max-width: none; }
}

/* V16.19 — Ticket-Verfügbarkeit INTEGRIERT (weisses Card-Feld statt dunklem Kasten)
   + Balken & CTA in der jeweiligen Tier-Farbe (Jonas) */
.mf-ticket__avail {
  margin: 0;
  padding: 12px 16px 14px;
  background: #fff;
  border-radius: 0;
}
.mf-ticket__avail-label { color: #1e1c1b; font-size: 13.5px; }
.mf-ticket__avail-track { height: 13px; background: rgba(0, 0, 0, 0.1); }

/* Silber */
.mf-ticket--silver .mf-ticket__avail-fill { background: linear-gradient(90deg, #9b9999, #d8d6d6); }
.mf-ticket--silver .mf-ticket__avail-label strong { color: #6f6d6d; }
.mf-ticket--silver .mf-ticket__cta { background: linear-gradient(180deg, #e6e6e6, #b9b7b7); color: #1c0e33; }
/* Gold */
.mf-ticket--gold .mf-ticket__avail-fill { background: linear-gradient(90deg, rgb(189,148,106), rgb(245,205,72)); }
.mf-ticket--gold .mf-ticket__avail-label strong { color: rgb(176,128,50); }
.mf-ticket--gold .mf-ticket__cta { background: linear-gradient(185deg, rgb(189,148,106) 0%, rgb(245,205,72) 100%); color: #1c0e33; }
/* Diamond */
.mf-ticket--diamond .mf-ticket__avail-fill { background: linear-gradient(90deg, rgb(194,86,224), rgb(218,149,237)); }
.mf-ticket--diamond .mf-ticket__avail-label strong { color: rgb(168,64,208); }
.mf-ticket--diamond .mf-ticket__cta { background: linear-gradient(185deg, rgb(194,86,224) 0%, rgb(218,149,237) 100%); color: #fff; }

/* V16.20 — Timer links+kleiner; Ticket-CTA klarer/pulsierend; Verfügbarkeit sichtbarer (Jonas) */

/* Timer: ganz links, kleiner als das Datum */
.mf-herox__timer { justify-content: flex-start; }
.mf-herox__timer .mf-countdown,
.mf-herox__timer .mf-countdown__tiles { justify-content: flex-start; }
.mf-herox__timer .mf-countdown__num { font-size: 16px; }
.mf-herox__timer .mf-countdown__label { font-size: 9px; }

/* Ticket-CTA klarer + stärker pulsierend (obvious clickable) */
@keyframes mf-ticketcta-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
  50%      { transform: scale(1.035); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42); }
}
.mf-ticket__cta {
  animation: mf-ticketcta-pulse 1.7s ease-in-out infinite;
  font-size: 17px !important;
  letter-spacing: 0.5px;
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) { .mf-ticket__cta { animation: none; } }

/* Verfügbarkeit sichtbarer (v.a. Silber: dunklerer Track + kräftigerer Fill) */
.mf-ticket__avail-track { height: 14px; background: rgba(0, 0, 0, 0.17); }
.mf-ticket__avail-label { font-size: 14px; font-weight: 800; }
.mf-ticket--silver .mf-ticket__avail-fill { background: linear-gradient(90deg, #6f6d6d, #a3a1a1); }

/* V16.22 — Diamond-CTA-Text schwarz (Jonas) */
.mf-ticket--diamond .mf-ticket__cta { color: #1c0e33; }

/* V16.29 (Jonas, Bild #82): Countdown-Leiste direkt über dem CTA-Button.
   Desktop: Hero-Timer oben ausgeblendet, Countdown wandert zum Button.
   Mobil: bleibt der obere Countdown, diese Leiste ist ausgeblendet. */
.mf-ctatimer { display: none; }
@media (min-width: 768px) {
  .mf-herox__timer { display: none !important; }
  .sec-ctalogos__btnrow .mf-ctatimer {
    display: block;
    margin: 0 auto 14px;
  }
  .sec-ctalogos__btnrow .mf-ctatimer .mf-countdown,
  .sec-ctalogos__btnrow .mf-ctatimer .mf-countdown__tiles {
    justify-content: center;
  }
  .sec-ctalogos__btnrow .mf-ctatimer .mf-countdown__num {
    font-size: 26px; color: #d96fe0; font-weight: 800;
  }
  .sec-ctalogos__btnrow .mf-ctatimer .mf-countdown__label {
    font-size: 11px; color: rgba(255, 255, 255, 0.82);
  }
}

/* V16.31 (Jonas) — Mobile-Feinschliff: horizontales Wackeln + Highlights-Labels */
html, body { overflow-x: hidden; }
@media (max-width: 767px) {
  /* Highlights-Kacheln: Label UNTEN ins Bild setzen (nicht mittig drüber, damit
     das Foto nicht verdeckt wird) — gilt für alle Mobile-Kacheln inkl. Vollbreite. */
  .mf-hide-desktop .sec-tiles__cell {
    align-items: end;
    justify-items: center;
    padding-top: 0;
    padding-bottom: 14px;
  }
  .mf-hide-desktop .sec-tiles__label { line-height: 1.35; }
}

/* V16.32 (Jonas): Social-Kanäle im Footer über Impressum/Datenschutz */
.mf-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 0 0 16px;
}
.mf-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease, transform 0.2s ease;
}
.mf-footer__social-link:hover,
.mf-footer__social-link:focus-visible { color: #FBC201; transform: translateY(-2px); }

/* V16.33 (Jonas, Bild #83): weicher Farbverlauf-Übergang von der Hero-Foto-
   Unterkante in die Folgesektion — über die GANZE Breite, damit es auf jedem
   Monitor (schmal wie breit) sauber ins Dunkel schmilzt statt harter Cut. */
@media (min-width: 768px) {
  .mf-herox::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: clamp(180px, 26vh, 300px);
    background: linear-gradient(180deg, rgba(11, 6, 24, 0) 0%, rgba(11, 6, 24, 0.55) 58%, #0b0618 100%);
    z-index: 2;
    pointer-events: none;
  }
}