/* ==========================================================================
   JHA | Webinar 16.09.2026 — Optin-Landingpage
   Design: Figma "Webinar_Funnel" (Desktop 1444 px / Mobile 390 px)
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------- */
@font-face{font-family:'Supreme';src:url('../fonts/Supreme-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/Supreme-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/Supreme-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/Supreme-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/Supreme-Extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* Farben — 1:1 aus Figma ausgelesen */
  --c-navy:        #16015C;
  --c-blue:        #01068D;
  --c-blue-modal:  #360BD6;
  --c-yellow:      #F5C001;
  --c-yellow-hi:   #FFDB59;
  --c-bg:          #F6F6F6;
  --c-grey-100:    #FDFDFD;
  --c-grey-200:    #E4E4E4;
  --c-grey-300:    #CCCCCC;
  --c-plaque-a:    #E5E5E5;
  --c-plaque-b:    #E0E0E0;

  --grad-cta:   linear-gradient(90deg, #F5C001 0%, #FFDB59 50.48%, #F5C001 97.6%);
  --grad-plaque:linear-gradient(180deg, #E5E5E5 0%, #E0E0E0 100%);

  --r-card: 35px;
  --r-cta:  39px;

  --font: 'Supreme', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Skalierungs-Einheit.
     --u ist "ein Design-Pixel". Design-Maße werden als calc(<zahl> * var(--u))
     gesetzt, damit die Seite unterhalb der Artboard-Breite proportional
     mitskaliert statt umzubrechen. 1cqw = 1 % der Bühnenbreite, deshalb
     --u = (100 / Artboard-Breite) cqw. */
  --u: calc(100cqw / 390);        /* Mobile-Artboard, per MQ überschrieben */
  --stage: 390px;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-navy);
  font-family:var(--font);
  font-weight:400;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px}

/* ==========================================================================
   MOBILE (Basis) — Artboard 390 px
   ========================================================================== */
:root{ --stage: min(100%, 480px); }

.hero{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
}
.hero__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1184 * var(--u));
}

/* Dunkle Hero-Karte: 390 × 1036, top -48, Radius 35 */
.hero__card{
  position:absolute;
  left:0; right:0;
  top:calc(-48 * var(--u));
  height:calc(1036 * var(--u));
  border-radius:calc(35 * var(--u));
  background:var(--c-navy);
  overflow:hidden;
  isolation:isolate;
}

/* Arena-Hintergrund */
.hero__bg{
  position:absolute;
  left:50%; top:calc(21 * var(--u));
  width:calc(1386 * var(--u));
  height:calc(925 * var(--u));
  transform:translateX(-50%);
  object-fit:cover;
  opacity:.82;
  /* Im Design verschwindet die Foto-Struktur nach unten/rechts hinter dem
     Glow — die Maske übernimmt genau das. */
  -webkit-mask-image:linear-gradient(168deg,#000 0%,#000 32%,rgba(0,0,0,.28) 60%,rgba(0,0,0,0) 82%);
          mask-image:linear-gradient(168deg,#000 0%,#000 32%,rgba(0,0,0,.28) 60%,rgba(0,0,0,0) 82%);
}
/* Glow-Ellipsen (im Design zwei große, weich auslaufende Blau-Ellipsen unter
   der Kartenmitte — als Gradient statt SVG: exakter steuerbar, kein Request) */
/* Navy-Schleier über der Arena: im Design ist das Foto deutlich kühler und
   dunkler als das Original, vor allem oben rechts. */
.hero__veil{
  position:absolute; inset:0;
  pointer-events:none;
  /* Mobile: Textbereich stark abgedunkelt, damit die Arena nicht mit der
     Headline konkurriert (im Design ebenso). */
  background:
    linear-gradient(180deg, rgba(19,1,80,.92) 0%, rgba(19,1,80,.86) 26%, rgba(20,1,86,.34) 46%, rgba(20,1,86,0) 62%),
    linear-gradient(90deg, rgba(22,1,92,.55) 0%, rgba(22,1,92,.20) 50%, rgba(22,1,92,.55) 100%);
}
@media (min-width:1000px){
.hero__veil{
  background:
    radial-gradient(38% 17% at 100% 0%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.26) 50%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(20,1,86,.38) 0%, rgba(20,1,86,0) 24%),
    linear-gradient(90deg, rgba(22,1,92,.98) 0%, rgba(22,1,92,.46) 14%, rgba(22,1,92,0) 30%);
}}

.hero__glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(48% 62% at 103% 74%, rgba(8,0,255,.88) 0%, rgba(5,0,235,.34) 54%, rgba(0,0,200,0) 84%),
    radial-gradient(140% 152% at 70% 122%, rgba(10,0,255,1) 0%, rgba(8,0,250,.74) 32%, rgba(4,0,228,.30) 58%, rgba(0,0,200,0) 88%),
    radial-gradient(60% 50% at 18% 128%, rgba(10,0,242,.60) 0%, rgba(8,0,218,.20) 52%, rgba(0,0,180,0) 86%);
  mix-blend-mode:screen;
}

/* --- Textspalte: left 16, top 32, width 358, gap 24 ---------------------- */
.hero__content{
  position:absolute;
  left:calc(16 * var(--u));
  top:calc(80 * var(--u));            /* 32 im Frame + 48 Karten-Offset */
  width:calc(358 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(24 * var(--u));
  z-index:2;
}

/* Die beiden Gruppierungs-Wrapper existieren nur für die Desktop-Abstände
   (Figma 5:16 / 5:17 / 5:18). Auf Mobile liegen alle vier Elemente direkt in
   der Spalte mit einem einheitlichen Abstand von 24 px. */
.hero__head,
.hero__headtop{display:contents}

/* Live-Badge */
.eyebrow{
  display:flex; align-items:center;
  gap:calc(8 * var(--u));
}
.eyebrow__dot{
  width:calc(16 * var(--u)); height:calc(16 * var(--u));
  flex:none;
}
.eyebrow__txt{
  font-weight:500; font-style:italic;
  font-size:calc(14 * var(--u));
  color:var(--c-grey-100);
  white-space:nowrap;
}

/* Kicker (🎁) — nur Desktop, im Mobile-Design nicht vorhanden */
.kicker{display:none}

/* H1 */
.hero__h1{
  font-weight:700;
  font-size:calc(28 * var(--u));
  line-height:1.15;
  letter-spacing:calc(.28 * var(--u));
  text-transform:uppercase;
  color:#fff;
}
.hero__h1 .lead{font-weight:700}
.hero__h1 .hl{color:var(--c-yellow)}

/* Subline */
.hero__sub{
  font-size:calc(16 * var(--u));
  line-height:1.4;
  color:var(--c-grey-200);
}

/* --- CTA ---------------------------------------------------------------- */
.cta{
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-cta);
  border:.25px solid #fff;
  border-radius:calc(39 * var(--u));
  color:var(--c-navy);
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,192,1,.35)}
.cta:active{transform:translateY(0)}
.cta--hero{
  width:100%;
  padding:calc(18 * var(--u)) calc(24 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.1;
}

/* --- Speaker-Card ------------------------------------------------------- */
/* Union-Karte: left 15, top 505.5, 345.42 × 445.637 (Koordinaten der Hero-Karte) */
.speaker{
  position:absolute;
  left:calc(15 * var(--u));
  top:calc(505.5 * var(--u));
  width:calc(345.42 * var(--u));
  height:calc(445.637 * var(--u));
  border-radius:calc(20 * var(--u));
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFD 72%,#EDEDED 92%,#E4E4E4 100%);
  box-shadow:0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(4,0,40,.28);
  z-index:2;
}
.speaker__label{
  position:absolute;
  left:calc(28.58 * var(--u));                 /* 43.58 - 15 */
  top:calc(19.9 * var(--u));
  width:calc(166.416 * var(--u));
  font-weight:700;
  font-size:calc(18.973 * var(--u));
  line-height:1.12;
  color:var(--c-blue);
}
.speaker__date{
  position:absolute;
  left:calc(279 * var(--u));                   /* 294 - 15 */
  top:calc(15 * var(--u));
  width:calc(72 * var(--u));
  font-weight:700;
  font-size:calc(23.066 * var(--u));
  line-height:1.05;
  color:var(--c-blue);
}
/* Fotorahmen: left 42.9, top 492.07 → relativ zur Karte 27.9 / -13.43 */
.speaker__frame{
  position:absolute;
  left:calc(27.9 * var(--u));
  top:calc(75.4 * var(--u));
  width:calc(288.596 * var(--u));
  height:calc(344.4 * var(--u));
  border-radius:calc(4 * var(--u));
  overflow:hidden;
  background:#1B06AE;
}
/* Arena im Rahmen: deckungsgleich mit dem Hero-Hintergrund.
   Hero-Bild sitzt bei (277|-147) der Karte, der Rahmen bei (865|240)
   → Offset im Rahmen: (-588|-387). */
.speaker__bg{
  opacity:.5;
  position:absolute;
  left:calc(-540.9 * var(--u)); top:calc(-559.9 * var(--u));
  width:calc(1386 * var(--u)); height:calc(925 * var(--u));
  max-width:none;
  object-fit:cover;
}
.speaker__tint{
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(22,1,92,.62) 0%, rgba(22,1,92,.18) 40%, rgba(22,1,92,.42) 100%),
    radial-gradient(120% 96% at 42% 104%, rgba(58,26,255,.92) 0%, rgba(48,18,246,.48) 58%, rgba(27,6,174,.10) 100%);
}
/* JH-Freisteller: Design-Element bei Karten-Koordinate (744|111), 690 × 863.
   Relativ zur Speaker-Card also (-80.5|-19.5). Beschnitten wird nur
   links / rechts / unten auf die Rahmenkanten — oben ragt er heraus. */
.speaker__jh{
  position:absolute;
  left:calc(-55.6 * var(--u));
  top:calc(-13.43 * var(--u));
  width:calc(475.6 * var(--u));
  height:calc(594.4 * var(--u));
  max-width:none;
  z-index:2;
  clip-path:inset(0 calc(103.5 * var(--u)) calc(161.6 * var(--u)) calc(83.5 * var(--u)));
}
/* Namensplakette: left 111.08, top 878.47, 249.336 × 61.301, Radius 16.531 */
.speaker__plaque{
  position:absolute;
  left:calc(96.08 * var(--u));                 /* 111.08 - 15 */
  top:calc(372.97 * var(--u));                 /* 878.47 - 505.5 */
  width:calc(249.336 * var(--u));
  height:calc(61.301 * var(--u));
  border-radius:calc(16.531 * var(--u));
  background:var(--grad-plaque);
  display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.speaker__name{
  font-weight:800;
  text-transform:uppercase;
  font-size:calc(26.173 * var(--u));
  line-height:1;
  color:var(--c-navy);
  white-space:nowrap;
}

/* --- Scroll-Indikator --------------------------------------------------- */
.scrolldown{
  position:absolute;
  left:50%;
  top:calc(943 * var(--u));
  width:calc(121 * var(--u));
  height:calc(121 * var(--u));
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--c-bg);
  display:grid; place-items:center;
  z-index:4;
}
/* Feiner gepunkteter Ring — border:dashed liefert je Browser andere
   Strichlängen, deshalb als SVG mit fixer dasharray. */
.scrolldown__ring{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.scrolldown__ring circle{
  fill:none;
  stroke:#4B2FE0;
  stroke-width:1.4;
  stroke-dasharray:1.5 4.2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.scrolldown__arrow{
  width:calc(26 * var(--u));
  height:calc(55 * var(--u));
  stroke:#3B1DD8; stroke-width:2; fill:none;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(14%)}}
@media (prefers-reduced-motion:reduce){.scrolldown__arrow{animation:none}}

/* --- Presse-Logobar ----------------------------------------------------- */
/* Mobile: eine durchlaufende Reihe (im Design 826 px breit auf 390 px Artboard
   → als Marquee umgesetzt). Desktop: feste Positionen. */
.press{
  position:absolute;
  left:0; right:0;
  top:calc(1106 * var(--u));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.press__track{
  display:flex; align-items:center; width:max-content;
  gap:calc(36.381 * var(--u));
  animation:marquee 52s linear infinite;
}
.press__track > * + *{margin-left:0}
.press__item{
  flex:none;
  width:calc(107.411 * var(--u));
  opacity:.45;
}
.press__item img{width:100%;height:auto;object-fit:contain}
@keyframes marquee{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .press__track{animation:none}
  .press{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ==========================================================================
   DESKTOP — Artboard 1444 px, Karte 1418 × 889 mit 10 px Rand
   ========================================================================== */
@media (min-width:1000px){
  :root{
    /* Die Bühne wächst über die Artboard-Breite hinaus mit, damit der weiße
       Rahmen links/rechts genauso schmal bleibt wie oben — die Komposition
       skaliert dabei proportional weiter (--u wird > 1px). */
    --stage: min(100%, 2400px);
    --u: calc(100cqw / 1444);
  }

  .hero{padding-bottom:0}
  .hero__stage{
    width:var(--stage);
    height:calc(1030 * var(--u));
  }
  .hero__card{
    /* Im Artboard sitzt die Karte bei 10 links / 16 rechts — eine
       Unsauberkeit im Design. Hier bewusst symmetrisch mit 10 auf beiden
       Seiten, damit der weiße Rahmen gleichmäßig ist. */
    left:calc(10 * var(--u));
    right:calc(10 * var(--u));
    top:calc(10 * var(--u));
    width:auto;
    height:calc(889 * var(--u));
  }

  .hero__bg{
    left:calc(277 * var(--u));
    top:calc(-147 * var(--u));
    width:calc(1386 * var(--u));
    height:calc(925 * var(--u));
    transform:none;
  }
  .hero__glow--1{
    left:calc(148 * var(--u)); top:calc(202 * var(--u));
    width:calc(1644 * var(--u)); height:calc(1644 * var(--u));
    transform:none;
  }
  .hero__glow--2{
    left:calc(486 * var(--u)); top:calc(512 * var(--u));
  }

  /* Textspalte: left 73, top 237, width 695, gap 54 */
  .hero__content{
    left:calc(73 * var(--u));
    top:calc(237 * var(--u));
    width:calc(695 * var(--u));
    gap:calc(54 * var(--u));
  }
  .hero__head{display:flex;flex-direction:column;gap:calc(25 * var(--u))}
  .hero__headtop{display:flex;flex-direction:column;gap:calc(17 * var(--u))}

  .eyebrow{
    position:absolute;
    left:0;
    top:calc(-106 * var(--u));            /* 131 - 237 */
    gap:calc(11 * var(--u));
  }
  .eyebrow__dot{width:calc(25 * var(--u));height:calc(25 * var(--u))}
  .eyebrow__txt{
    font-size:calc(21 * var(--u));
    letter-spacing:calc(.21 * var(--u));
  }

  /* Kicker mit Geschenk-Icon — Design: Box 39 px, Icon bei 0/0,
     Text bei 56/7 (Figma-Grid 5:19) */
  .kicker{
    display:block; position:relative;
    height:calc(39 * var(--u));
  }
  /* Geschenk-Icon am 08.09. entfernt (Justin) — der Text rückt an den
     linken Rand der Textspalte, auf Höhe der Headline darunter. */
  .kicker__txt{
    position:absolute;
    left:0; top:calc(7 * var(--u));
    height:calc(25 * var(--u));
    display:flex; align-items:center;
    font-weight:500; font-style:italic;
    font-size:calc(25 * var(--u));
    letter-spacing:calc(.25 * var(--u));
    color:var(--c-grey-300);
    line-height:1;
    white-space:nowrap;
  }

  .hero__h1{
    font-size:calc(38 * var(--u));
    line-height:1.05;
    letter-spacing:calc(.38 * var(--u));
  }
  .hero__h1 .lead{font-weight:800}

  .hero__sub{
    width:calc(503 * var(--u));
    font-size:calc(21 * var(--u));
    line-height:1.3;
  }

  .cta--hero{
    width:calc(360 * var(--u));
    height:calc(58.154 * var(--u));
    padding:0;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }

  /* Speaker-Card: 824.5 / 130.5 / 501.5 × 647 */
  .speaker{
    left:calc(824.5 * var(--u));
    top:calc(130.5 * var(--u));
    width:calc(501.5 * var(--u));
    height:calc(647 * var(--u));
    border-radius:calc(28 * var(--u));
    box-shadow:0 calc(26 * var(--u)) calc(64 * var(--u)) rgba(4,0,40,.32);
  }
  .speaker__label{
    left:calc(41.5 * var(--u));                /* 866 - 824.5 */
    top:calc(38 * var(--u));
    width:calc(240 * var(--u));
    font-size:calc(27.2 * var(--u));
    line-height:1.12;
  }
  .speaker__date{
    left:calc(392.5 * var(--u));               /* 1217 - 824.5 */
    top:calc(20 * var(--u));
    width:calc(96 * var(--u));
    font-size:calc(35 * var(--u));
    line-height:1.16;
  }
  .speaker__date .day{font-size:calc(40 * var(--u))}
  .speaker__frame{
    left:calc(40.5 * var(--u));                /* 865 - 824.5 */
    top:calc(109.5 * var(--u));                /* 240 - 130.5 */
    width:calc(419 * var(--u));
    height:calc(500 * var(--u));
    border-radius:calc(6 * var(--u));
  }
  /* Arena-Fenster: Hero-Bild bei (277|-147) der Karte, Rahmen bei (865|240) */
  .speaker__bg{
    left:calc(-588 * var(--u));
    top:calc(-387 * var(--u));
  }
  /* JH-Freisteller: Design-Element (744|111), 690 × 863 */
  .speaker__jh{
    left:calc(-80.5 * var(--u));
    top:calc(-19.5 * var(--u));
    width:calc(690 * var(--u));
    height:calc(863 * var(--u));
    clip-path:inset(0 calc(150 * var(--u)) calc(234 * var(--u)) calc(121 * var(--u)));
  }
  .speaker__plaque{
    left:calc(139.5 * var(--u));               /* 964 - 824.5 */
    top:calc(541.5 * var(--u));                /* 672 - 130.5 */
    width:calc(362 * var(--u));
    height:calc(89 * var(--u));
    border-radius:calc(24 * var(--u));
  }
  .speaker__name{font-size:calc(38 * var(--u))}

  /* Scroll-Indikator: 140 px, zentriert, top 856 */
  .scrolldown{
    top:calc(856 * var(--u));
    width:calc(140 * var(--u));
    height:calc(140 * var(--u));
  }
  .scrolldown__arrow{
    width:calc(30 * var(--u));
    height:calc(64 * var(--u));
  }

  /* Presse-Logobar: läuft wie auf Mobile durch — die Logos ziehen unter dem
     Scroll-Kreis hindurch. Die Maske blendet sie an den Seitenrändern und
     links/rechts des Kreises aus, damit der Durchlauf sauber aussieht.
     Kreisrand liegt bei 45,2 % / 54,9 % der Artboard-Breite. */
  .press{
    position:absolute;
    left:0; right:0;
    top:calc(902 * var(--u));
    height:calc(128 * var(--u));
    padding:0;
    overflow:hidden;
    --press-mask:linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.5) 5%, #000 11%,
      #000 25%, rgba(0,0,0,.55) 33%, rgba(0,0,0,.14) 39%, transparent 43%,
      transparent 57%, rgba(0,0,0,.14) 61%, rgba(0,0,0,.55) 67%, #000 75%,
      #000 89%, rgba(0,0,0,.5) 95%, transparent 100%);
    -webkit-mask-image:var(--press-mask);
            mask-image:var(--press-mask);
  }
  .press__track{
    align-items:flex-start;
    padding-top:calc(6 * var(--u));      /* hält die Logo-Mitte auf der Achse aus dem Design */
    gap:calc(78 * var(--u));
    animation-duration:51s;              /* ~44 px/s, wie vor der Vergrößerung */
  }
  .press__item{
    width:calc(146 * var(--u));           /* Design: 124 — auf Justins Wunsch etwas größer */
  }
}

/* --- Utilities ---------------------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   SEKTION 2 — „Dein Leben verändert sich …"
   Figma: Desktop 5:46 (1444 × 706) · Mobile 6:424 (390 × 1123)
   ========================================================================== */
.s2{
  display:flex;
  justify-content:center;
  background:var(--c-bg);
}
.s2__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1123 * var(--u));
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s2__eyebrow{
  position:absolute;
  left:50%; top:calc(46 * var(--u));
  width:calc(316 * var(--u));
  transform:translateX(-50%);
  font-weight:700; font-style:italic;
  font-size:calc(21 * var(--u));
  letter-spacing:calc(.21 * var(--u));
  line-height:1;
  color:#02074A;
}
.s2__h2{
  position:absolute;
  left:50%; top:calc(93 * var(--u));      /* 46 + 21 + 26 Gap */
  width:calc(316 * var(--u));
  transform:translateX(-50%);
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.05;
  letter-spacing:calc(.24 * var(--u));
  text-transform:uppercase;
  color:#02074A;
}

/* Gestrichelter Pfeil */
.s2__arrow{
  position:absolute;
  left:calc(202 * var(--u)); top:calc(218 * var(--u));
  width:calc(146 * var(--u)); height:auto;
  transform:rotate(14.37deg);
  transform-origin:center;
  opacity:.75;
  z-index:3;      /* liegt im Design über der Karte */
}

/* --- Kartenstapel -------------------------------------------------------- */
.s2__cards{position:absolute; inset:0; pointer-events:none}
.s2__card{
  position:absolute;
  border-radius:calc(5.893 * var(--u));
}
.s2__card--back{
  left:calc(21.32 * var(--u)); top:calc(258.96 * var(--u));
  width:calc(329.711 * var(--u)); height:calc(643.968 * var(--u));
  background:var(--c-plaque-a);
  transform:rotate(-1.77deg) skewX(-.09deg);
  transform-origin:center;
}
.s2__card--front{
  left:50%; top:calc(269.94 * var(--u));
  width:calc(323 * var(--u)); height:calc(649.569 * var(--u));
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(2,7,74,.07);
  overflow:hidden;
  pointer-events:auto;
}
.s2__cardtext{
  position:absolute;
  left:calc(18.5 * var(--u)); top:calc(33.91 * var(--u));
  width:calc(286 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(12 * var(--u));
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:#010F31;
  z-index:2;
}
.s2__cardtext strong{font-weight:700}
/* JH-Wasserzeichen — vier gedrehte Vektorteile, Anteile prozentual im
   Wrapper, damit sich Desktop/Mobile nur über die Wrapper-Größe unterscheiden */
.s2__wm{
  position:absolute;
  left:calc(195.5 * var(--u)); top:calc(838.2 * var(--u));
  width:calc(85.6 * var(--u)); height:calc(58.3 * var(--u));
  transform:rotate(3.7deg);
  opacity:.06;
  filter:brightness(0);
  pointer-events:none;
  z-index:1;
}

/* Harte Zeilenumbrüche der H2 — im Design pro Breakpoint unterschiedlich */
.brk-d{display:none}
.brk-m{display:inline}

/* --- Teilnehmer + CTA ---------------------------------------------------- */
.s2__attendees{
  position:absolute;
  left:calc(16 * var(--u)); top:calc(959 * var(--u));
  width:calc(358 * var(--u));
  display:flex; align-items:center; justify-content:center;
}
.s2__attendees img{
  width:calc(48 * var(--u)); height:calc(48 * var(--u));
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.s2__attendees img + img{margin-left:calc(-12 * var(--u))}

.cta--blue{
  background:linear-gradient(90deg,#3700EA 0%,#4265FF 47.736%,#3700EA 100%);
  border:.5px solid #fff;
  color:var(--c-bg);
}
.cta--blue:hover{box-shadow:0 10px 26px rgba(55,0,234,.34)}
.s2__cta{
  position:absolute;
  left:calc(16 * var(--u)); top:calc(1031 * var(--u));   /* 959 + 48 + 24 */
  width:calc(358 * var(--u));
  padding:calc(18 * var(--u)) calc(24 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.1;
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s2__stage{height:calc(706 * var(--u))}

  .s2__eyebrow{
    left:calc(93 * var(--u)); top:calc(111 * var(--u));
    width:calc(300 * var(--u));
    transform:none;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(.21 * var(--u));
  }
  .s2__h2{
    left:calc(90 * var(--u)); top:calc(148.2 * var(--u));
    width:calc(682 * var(--u));
    transform:none;
    font-size:calc(38 * var(--u));
    letter-spacing:calc(.38 * var(--u));
  }

  .s2__cta{
    left:calc(90 * var(--u)); top:calc(359 * var(--u));
    width:calc(430.161 * var(--u));
    height:calc(58.154 * var(--u));
    padding:0;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }

  .s2__arrow{
    left:calc(544 * var(--u)); top:calc(377 * var(--u));
    width:calc(166 * var(--u));
    transform:none;
  }

  /* Im Design sitzen die vier Kreise auf festen X-Positionen mit
     ungleichmäßiger Überlappung (159 / 218 / 283 / 343) */
  .s2__attendees{
    left:0; top:calc(440 * var(--u));
    width:100%;
    display:block;
  }
  .s2__attendees img{
    position:absolute; top:0;
    width:calc(88 * var(--u)); height:calc(88 * var(--u));
  }
  .s2__attendees img + img{margin-left:0}
  .s2__attendees img:nth-child(1){left:calc(159 * var(--u))}
  .s2__attendees img:nth-child(2){left:calc(218 * var(--u))}
  .s2__attendees img:nth-child(3){left:calc(283 * var(--u))}
  .s2__attendees img:nth-child(4){left:calc(343 * var(--u))}

  /* Beide Karten teilen im Design denselben Mittelpunkt (1031 | 353) */
  .s2__card{border-radius:calc(9 * var(--u))}
  .s2__card--back{
    left:calc(785 * var(--u)); top:calc(98 * var(--u));
    width:calc(492 * var(--u)); height:calc(510 * var(--u));
    transform:rotate(-.32deg);
  }
  .s2__card--front{
    left:calc(785 * var(--u)); top:calc(98 * var(--u));
    width:calc(492 * var(--u)); height:calc(510 * var(--u));
    transform:rotate(3.7deg);
    box-shadow:0 calc(14 * var(--u)) calc(38 * var(--u)) rgba(2,7,74,.10);
  }
  .s2__cardtext{
    left:calc(46.35 * var(--u)); top:calc(50.09 * var(--u));
    width:calc(402 * var(--u));
    gap:calc(8 * var(--u));
  }
  .s2__wm{
    left:calc(947.6 * var(--u)); top:calc(516.2 * var(--u));
    width:calc(108.77 * var(--u)); height:calc(74.15 * var(--u));
  }
  .brk-d{display:inline}
  .brk-m{display:none}
}

/* ==========================================================================
   SEKTION 3 — „Was in deinem Leben möglich wird …"
   Figma: Desktop 5:71 (1444 × 775) · Mobile 6:422 (390 × 1305)
   ========================================================================== */
.s3{
  display:flex; justify-content:center;
  background:var(--c-bg);
  overflow:hidden;              /* fängt die überstehenden Notch-Kreise ab */
}
.s3__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1305 * var(--u));
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s3__card{
  position:absolute;
  left:calc(11 * var(--u)); top:calc(15 * var(--u));
  width:calc(368 * var(--u)); height:calc(1286 * var(--u));
  border-radius:calc(14.366 * var(--u));
  background:var(--c-navy);
  overflow:hidden;
  isolation:isolate;
}
.s3__bg{
  position:absolute;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
}
.s3__bg--left{
  left:calc(-70 * var(--u)); top:calc(90 * var(--u));
  width:calc(470 * var(--u)); height:calc(313 * var(--u));
  opacity:.1;
}
.s3__bg--right{
  left:calc(-100 * var(--u)); top:calc(360 * var(--u));
  width:calc(565 * var(--u)); height:calc(411 * var(--u));
  border-radius:calc(4.458 * var(--u));
  object-position:bottom;
  opacity:.12;
}
.s3__glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(90% 44% at 50% 104%, rgba(10,0,255,.95) 0%, rgba(8,0,242,.52) 44%, rgba(22,1,92,0) 80%),
    radial-gradient(80% 30% at 46% -6%, rgba(8,0,220,.55) 0%, rgba(22,1,92,0) 78%);
  mix-blend-mode:screen;
}
/* Gestrichelter Innenrahmen */
.s3__dash{
  position:absolute;
  left:50%; top:50%;
  width:calc(340 * var(--u)); height:calc(1258 * var(--u));
  transform:translate(-50%,-50%);
  border:calc(1 * var(--u)) dashed #C5C5C5;
  border-radius:calc(7.431 * var(--u));
  opacity:.45;
  pointer-events:none;
}

.s3__h2{
  position:absolute;
  left:50%; top:calc(69 * var(--u));
  width:calc(336 * var(--u));
  transform:translateX(-50%);
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.15;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  z-index:2;
}

/* --- Benefit-Spalten ----------------------------------------------------- */
.s3__cols{
  list-style:none; margin:0; padding:0;
  position:absolute; inset:0;
  z-index:2;
}
.s3__col{
  position:absolute;
  left:calc(23 * var(--u));
  width:calc(312 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(25 * var(--u));
}
.s3__col:nth-child(1){top:calc(224 * var(--u))}
.s3__col:nth-child(2){top:calc(518 * var(--u))}
.s3__col:nth-child(3){top:calc(828 * var(--u))}

.s3__ico{
  position:relative; display:block;
  width:calc(52 * var(--u)); height:calc(52 * var(--u));
  margin-left:calc(5 * var(--u));
}
.s3__ring{position:absolute; inset:0; width:100%; height:100%}
.s3__ring circle{
  fill:none; stroke:#FCFF47; stroke-width:1.2;
  stroke-dasharray:1.4 4; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.75;
}
.s3__glyph{position:absolute}
.s3__glyph--compass-ring{left:calc(7 * var(--u)); top:calc(8 * var(--u)); width:calc(37 * var(--u)); height:calc(36.94 * var(--u))}
.s3__glyph--compass{left:calc(18 * var(--u)); top:calc(18 * var(--u)); width:calc(16 * var(--u)); height:calc(17 * var(--u))}
.s3__glyph--shield{left:calc(12 * var(--u)); top:calc(11 * var(--u)); width:calc(27 * var(--u)); height:calc(30 * var(--u))}
.s3__glyph--chart{left:calc(13 * var(--u)); top:calc(10 * var(--u)); width:calc(25 * var(--u)); height:calc(28.63 * var(--u))}

.s3__title{
  font-weight:700;
  font-size:calc(18 * var(--u));
  line-height:1;
  letter-spacing:calc(.18 * var(--u));
  text-transform:uppercase;
  color:#FCFF47;
}
.s3__copy{
  width:calc(301 * var(--u));
  font-size:calc(16 * var(--u));
  line-height:1.2;
  color:#fff;
}

.s3__cta{
  position:absolute;
  left:50%; top:calc(1151 * var(--u));
  width:calc(325 * var(--u));
  transform:translateX(-50%);
  padding:calc(18 * var(--u)) calc(24 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.1;
  z-index:3;
}
.only-d{display:none}
.only-m{display:inline}

/* --- Notch-Kreise -------------------------------------------------------- */
.s3__notch{
  position:absolute;
  width:calc(81.24 * var(--u)); height:calc(81.24 * var(--u));
  border-radius:50%;
  background:var(--c-bg);
  z-index:4;
}
.s3__notch--a{left:50%; top:calc(10 * var(--u));   transform:translate(-50%,-50%)}
.s3__notch--b{left:50%; top:calc(1306 * var(--u)); transform:translate(-50%,-50%)}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s3__stage{height:calc(775 * var(--u))}

  .s3__card{
    left:calc(23 * var(--u)); top:0;
    width:calc(1403 * var(--u)); height:calc(743 * var(--u));
    border-radius:calc(29 * var(--u));
  }
  .s3__bg--left{
    left:calc(-215 * var(--u)); top:calc(-113 * var(--u));
    width:calc(947 * var(--u)); height:calc(632 * var(--u));
  }
  .s3__bg--right{
    left:calc(720 * var(--u)); top:calc(-146 * var(--u));
    width:calc(1035 * var(--u)); height:calc(752 * var(--u));
    border-radius:calc(9 * var(--u));
  }
  .s3__glow{
    background:
      radial-gradient(72% 58% at 50% 108%, rgba(10,0,255,.98) 0%, rgba(8,0,246,.55) 42%, rgba(22,1,92,0) 80%),
      radial-gradient(58% 64% at 62% 2%, rgba(6,0,255,.52) 0%, rgba(6,0,240,.22) 46%, rgba(22,1,92,0) 78%),
      radial-gradient(46% 40% at 8% 30%, rgba(6,0,235,.30) 0%, rgba(22,1,92,0) 76%);
  }
  .s3__dash{
    left:calc(50% + .5 * var(--u)); top:50%;
    width:calc(1374 * var(--u)); height:calc(715 * var(--u));
    border-radius:calc(15 * var(--u));
  }

  .s3__h2{
    left:calc(50% + .5 * var(--u)); top:calc(96.15 * var(--u));
    width:calc(852 * var(--u));
    font-size:calc(38 * var(--u));
    line-height:1.05;
    letter-spacing:calc(.38 * var(--u));
  }

  /* Drei Spalten: 328 breit, Gap 80, Gruppe zentriert → Start 129.5 */
  .s3__col{
    width:calc(328 * var(--u));
    gap:0;
  }
  .s3__col:nth-child(1){left:calc(129.5 * var(--u)); top:calc(312.5 * var(--u))}
  .s3__col:nth-child(2){left:calc(537.5 * var(--u)); top:calc(312.5 * var(--u))}
  .s3__col:nth-child(3){left:calc(945.5 * var(--u)); top:calc(312.5 * var(--u))}

  .s3__ico{margin-left:calc(.5 * var(--u))}
  .s3__title{margin-top:calc(20.5 * var(--u))}      /* Icon 312.5+52 → Titel 385 */
  .s3__copy{
    margin-top:calc(24 * var(--u));
    width:calc(312 * var(--u));
    line-height:1.3;
  }

  .s3__cta{
    left:calc(462 * var(--u));                      /* 23 + 439 */
    top:calc(633 * var(--u));
    width:calc(525 * var(--u));
    height:calc(61 * var(--u));
    padding:0;
    transform:none;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }
  .only-d{display:inline}
  .only-m{display:none}

  /* Notches links und rechts, vertikal zentriert */
  .s3__notch{
    width:calc(164 * var(--u)); height:calc(164 * var(--u));
    top:calc(388 * var(--u));
  }
  .s3__notch--a{left:calc(-96 * var(--u));   transform:translateY(-50%)}
  .s3__notch--b{left:calc(1371 * var(--u)); transform:translateY(-50%)}
}

/* ==========================================================================
   SEKTION 4 — „Durchbrich die Grenzen …"
   Figma: Desktop 5:111 (1444 × 1041) · Mobile 6:429 (390 × 1715)
   ========================================================================== */
.s4{
  display:flex; justify-content:center;
  background:var(--c-bg);
  overflow:hidden;
}
.s4__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1715 * var(--u));
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s4__wordmark{display:none}
.s4__shadow{display:none}

.s4__h2{
  position:absolute;
  left:50%; top:calc(92 * var(--u));
  width:calc(326 * var(--u));
  transform:translateX(-50%);
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.15;
  letter-spacing:calc(.24 * var(--u));
  text-transform:uppercase;
  text-align:center;
  color:#02074A;
}

/* --- Karten -------------------------------------------------------------- */
.s4__card{
  position:absolute;
  left:calc(19 * var(--u));
  width:calc(352 * var(--u));
  border-radius:calc(9 * var(--u));
  padding:calc(31 * var(--u)) calc(12 * var(--u)) 0 calc(22 * var(--u));
}
.s4__card::before{
  content:"";
  position:absolute;
  inset:calc(8 * var(--u));
  border:calc(2 * var(--u)) dashed currentColor;
  border-radius:calc(9 * var(--u));
  pointer-events:none;
}
.s4__card--before{
  top:calc(247 * var(--u));
  height:calc(591 * var(--u));
  background:#EBEBEB;
  color:var(--c-bg);                /* Farbe der gestrichelten Linie */
}
.s4__card--after{
  top:calc(903 * var(--u));
  height:calc(631 * var(--u));
  padding-top:calc(54 * var(--u));
  padding-left:calc(26 * var(--u));
  background:#fff;
  color:#3700EA;
}

.s4__title{
  font-weight:800;
  font-size:calc(23 * var(--u));
  line-height:1.05;
  letter-spacing:calc(.23 * var(--u));
  text-transform:uppercase;
  text-align:center;
  color:#616161;
  margin-bottom:calc(26 * var(--u));
}
.s4__title--grad{
  background:linear-gradient(90deg,#3700EA 0%,#4265FF 47.736%,#3700EA 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

.s4__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:calc(16 * var(--u));
}
.s4__list li{
  display:flex; align-items:flex-start;
  gap:calc(10 * var(--u));
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:#3B3B3B;
}
.s4__card--after .s4__list li{color:#010F38}
.s4__ico{
  flex:none;
  width:calc(18 * var(--u)); height:calc(18 * var(--u));
  margin-top:calc(2 * var(--u));
}

/* --- JH-Badge ------------------------------------------------------------ */
.s4__badge{
  position:absolute;
  left:calc(255 * var(--u)); top:calc(865 * var(--u));
  width:calc(94 * var(--u)); height:calc(94 * var(--u));
  border-radius:50%;
  background:radial-gradient(120% 120% at 28% 18%, #5B3BFF 0%, #3B18F0 46%, #2A08D8 100%);
  box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(43,10,214,.4);
  display:grid; place-items:center;
  z-index:5;
}
/* gestrichelter weißer Ring liegt im Design innen */
.s4__badge-inner{
  position:absolute; inset:calc(7 * var(--u));
  border-radius:50%;
  border:calc(1.5 * var(--u)) dashed rgba(255,255,255,.8);
}
.s4__badge-mark{
  position:relative;
  width:calc(58 * var(--u)); height:calc(40 * var(--u));
  transform:rotate(10.11deg);
  mix-blend-mode:overlay;
  opacity:.9;
}

.s4__cta{
  position:absolute;
  left:calc(29 * var(--u)); top:calc(1600 * var(--u));
  width:calc(330 * var(--u));
  padding:calc(14 * var(--u)) calc(20 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.15;
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s4__stage{height:calc(1041 * var(--u))}

  /* Hintergrund-Wortmarken: im Design als Buchstaben-Outlines exportiert,
     hier als Text in Supreme Extrabold. Die Mitte verdecken die Karten,
     sichtbar sind nur die Ränder. */
  .s4__wordmark{
    display:block;
    position:absolute; inset:0;
    pointer-events:none;
    opacity:.65;
    overflow:hidden;
  }
  .s4__wm1,.s4__wm2{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-weight:800;
    text-transform:uppercase;
    color:#fff;
    line-height:1;
  }
  .s4__wm1{
    top:calc(487 * var(--u));
    font-size:calc(190 * var(--u));
    letter-spacing:calc(-2 * var(--u));
  }
  .s4__wm2{
    top:calc(740 * var(--u));
    font-size:calc(84 * var(--u));
    letter-spacing:calc(15 * var(--u));
  }
  /* Weicher Schatten unter den Karten (Figma 5:149) */
  .s4__shadow{
    display:block;
    position:absolute;
    left:calc(51 * var(--u)); top:calc(673 * var(--u));
    width:calc(1461 * var(--u)); height:calc(151 * var(--u));
    background:radial-gradient(50% 50% at 50% 50%, rgba(2,7,74,.07) 0%, rgba(2,7,74,0) 72%);
    pointer-events:none;
  }

  .s4__h2{
    top:calc(93.15 * var(--u));
    width:calc(918 * var(--u));
    font-size:calc(38 * var(--u));
    line-height:1.05;
    letter-spacing:calc(.38 * var(--u));
  }

  /* Beide Karten 473 × 497, unterschiedlich gekippt */
  .s4__card{
    transform-origin:center;
  }
  .s4__card::before{
    inset:calc(6.3 * var(--u));
  }
  .s4__card--before{
    left:calc(236.5 * var(--u));      /* 224 + 12.46 */
    top:calc(333.8 * var(--u));       /* 306 + 27.82 */
    width:calc(473 * var(--u));
    height:calc(497 * var(--u));
    transform:rotate(-2.95deg);
    padding:calc(36.53 * var(--u)) 0 0 calc(32.14 * var(--u));
  }
  .s4__card--after{
    left:calc(751.5 * var(--u));      /* 224 + 527.53 */
    top:calc(322.6 * var(--u));       /* 306 + 16.62 */
    width:calc(473 * var(--u));
    height:calc(497 * var(--u));
    transform:rotate(4.19deg);
    padding:calc(48.98 * var(--u)) 0 0 calc(43.55 * var(--u));
  }
  .s4__title{
    text-align:left;
    margin-bottom:calc(35 * var(--u));
  }
  .s4__card--before .s4__list{width:calc(416 * var(--u))}
  .s4__card--after  .s4__list{width:calc(386 * var(--u))}

  .s4__badge{
    left:calc(1171 * var(--u)); top:calc(296 * var(--u));
    width:calc(123 * var(--u)); height:calc(123 * var(--u));
  }
  .s4__badge-inner{inset:calc(9 * var(--u)); border-width:calc(2 * var(--u))}
  .s4__badge-mark{width:calc(76 * var(--u)); height:calc(52 * var(--u))}

  .s4__cta{
    left:calc(507 * var(--u)); top:calc(899 * var(--u));
    width:calc(430.161 * var(--u));
    height:calc(58.154 * var(--u));
    padding:0;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }
}

/* ==========================================================================
   SEKTION 5 — „Entfache die drei Potenziale in dir"
   Figma: Desktop 5:238 (1444 × 1223) · Mobile 6:1308 (390 × 1344)
   ========================================================================== */
.s5{
  display:flex; justify-content:center;
  background:var(--c-bg);
  overflow:hidden;
}
.s5__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1344 * var(--u));
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s5__wordmark,
.s5__marks{display:none}

.s5__h2{
  position:absolute;
  left:50%; top:calc(45 * var(--u));
  width:calc(300 * var(--u));
  transform:translateX(-50%);
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.15;
  letter-spacing:calc(.24 * var(--u));
  text-transform:uppercase;
  text-align:center;
  color:#02074A;
}

.s5__list{
  list-style:none; margin:0; padding:0;
  position:absolute;
  left:calc(19 * var(--u)); top:calc(240 * var(--u));
  width:calc(347 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(68 * var(--u));
}
.s5__row{position:relative}
.s5__card{
  position:relative;
  background:#fff;
  border-radius:calc(9 * var(--u));
  padding:calc(63 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
}
.s5__body{display:flex; flex-direction:column; gap:calc(13 * var(--u))}
.s5__title{
  font-weight:700;
  font-size:calc(23 * var(--u));
  line-height:1;
  letter-spacing:calc(.23 * var(--u));
  text-transform:uppercase;
  color:#02074A;
}
.s5__lead,.s5__copy{
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:#1E1E1E;
}
.s5__copy{margin-top:calc(-5 * var(--u))}   /* Gap 13 − 8 zwischen den Absätzen */

/* Nummern-Badge */
.s5__badge{
  position:absolute;
  left:50%; top:calc(-34 * var(--u));
  width:calc(68 * var(--u)); height:calc(68 * var(--u));
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(130% 130% at 30% 18%, #7285FF 0%, #4159FD 42%, #3A28F4 100%);
  box-shadow:0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(43,10,214,.12);
  display:grid; place-items:center;
  overflow:hidden;
  z-index:3;
}
.s5__badge::before{                        /* gestrichelter Ring innen */
  content:"";
  position:absolute; inset:calc(5 * var(--u));
  border-radius:50%;
  border:calc(1.4 * var(--u)) dashed rgba(255,255,255,.75);
}
.s5__badge-mark{
  position:absolute;
  left:calc(9 * var(--u)); top:calc(16 * var(--u));
  width:calc(38 * var(--u)); height:calc(25 * var(--u));
  transform:rotate(10.11deg);
  opacity:.16;
}
.s5__num{
  position:relative;
  font-weight:700; font-style:italic;
  font-size:calc(34 * var(--u));
  line-height:1;
  letter-spacing:calc(1 * var(--u));
  color:#8FC2FF;
}

.s5__cta{
  position:absolute;
  left:calc(19 * var(--u)); top:calc(1206 * var(--u));
  width:calc(351 * var(--u));
  padding:calc(14 * var(--u)) calc(20 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.15;
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s5__stage{height:calc(1223 * var(--u))}

  /* „WEBINAR" um 90° gedreht am linken Rand — im Design sieben einzelne
     Buchstaben-Vektoren, hier eine gedrehte Textzeile. */
  .s5__wordmark{
    display:flex; align-items:center; justify-content:center;
    position:absolute;
    left:calc(29.4 * var(--u)); top:calc(39 * var(--u));
    width:calc(174.207 * var(--u)); height:calc(1106 * var(--u));
    pointer-events:none;
  }
  .s5__wordmark span{
    transform:rotate(90deg);
    white-space:nowrap;
    font-weight:800;
    font-size:calc(244 * var(--u));
    line-height:1;
    letter-spacing:calc(6 * var(--u));
    text-transform:uppercase;
    color:#fff;
  }

  /* Drei blasse JH-Marken rechts (Figma 5:251–5:266, mix-blend overlay) */
  .s5__marks{
    display:block;
    position:absolute; inset:0;
    pointer-events:none;
    overflow:hidden;
  }
  /* Im Design weiß bei 30 % über overlay — auf dem hellen Grund praktisch
     nur eine Ahnung. Hier weiß bei 50 %, gemessen auf 248–250 statt 246. */
  .s5__marks img{
    position:absolute;
    width:calc(370 * var(--u)); height:calc(415 * var(--u));
    transform:rotate(-60deg);
    opacity:.5;
  }
  .s5__marks img:nth-child(1){left:calc(1111 * var(--u)); top:calc(-25 * var(--u))}
  .s5__marks img:nth-child(2){left:calc(1208 * var(--u)); top:calc(329 * var(--u))}
  .s5__marks img:nth-child(3){left:calc(1006 * var(--u)); top:calc(550 * var(--u))}

  .s5__h2{
    left:calc(50% + 5.5 * var(--u));
    top:calc(100.15 * var(--u));
    width:calc(805 * var(--u));
    font-size:calc(38 * var(--u));
    line-height:1.05;
    letter-spacing:calc(.38 * var(--u));
  }

  .s5__list{
    left:50%; top:calc(309 * var(--u));
    width:calc(784 * var(--u));
    transform:translateX(-50%);
    gap:calc(61 * var(--u));
  }
  .s5__row{height:calc(158 * var(--u))}
  .s5__card{
    position:absolute;
    left:calc(55 * var(--u)); top:0;
    width:calc(729 * var(--u)); height:calc(158 * var(--u));
    padding:0;
    box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(2,7,74,.05);
  }
  .s5__row:nth-child(1) .s5__card{left:calc(53 * var(--u))}
  .s5__body{
    position:absolute;
    left:calc(68 * var(--u));                 /* 123 − 55 */
    top:calc(29 * var(--u));
    width:calc(633 * var(--u));
  }
  .s5__row:nth-child(1) .s5__body{left:calc(61 * var(--u)); top:calc(25 * var(--u)); width:calc(617 * var(--u))}
  .s5__row:nth-child(3) .s5__body{top:calc(31 * var(--u)); width:calc(556 * var(--u))}
  .s5__copy{margin-top:calc(-5 * var(--u))}

  .s5__badge{
    left:0; top:calc(25 * var(--u));
    width:calc(99 * var(--u)); height:calc(99 * var(--u));
    transform:none;
  }
  .s5__row:nth-child(2) .s5__badge{top:calc(28 * var(--u))}
  .s5__row:nth-child(3) .s5__badge{top:calc(24 * var(--u))}
  .s5__badge::before{inset:calc(6.44 * var(--u)); border-width:calc(2 * var(--u))}
  .s5__badge-mark{
    left:calc(13.19 * var(--u)); top:calc(23.24 * var(--u));
    width:calc(55.549 * var(--u)); height:calc(35.86 * var(--u));
  }
  .s5__num{font-size:calc(50 * var(--u))}

  .s5__cta{
    left:calc(486 * var(--u)); top:calc(993 * var(--u));
    width:calc(472 * var(--u));
    height:calc(58 * var(--u));
    padding:0;
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }
}

/* ==========================================================================
   SEKTION 6 — Testimonials
   Figma: Desktop 5:332 (1444 × 968) · Mobile 6:1915 (390 × 913)
   Im Design liegen hier drei Google-Screenshots. Ersetzt durch vier eigene
   Stimmen in einer einheitlichen Zitat-Darstellung (Entscheidung Justin,
   08.09.) — kein Google-Chrome mehr, dafür Name und Funktion.
   ========================================================================== */
.s6{
  display:flex; justify-content:center;
  background:var(--c-bg);
}
.s6__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  /* Höhe folgt dem Inhalt: die vier Stimmen sind länger und ungleich lang,
     eine feste Artboard-Höhe würde entweder abschneiden oder Luft lassen. */
  padding:calc(25 * var(--u)) 0;
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s6__card{
  position:relative;
  width:calc(349 * var(--u));
  margin:0 auto;
  padding:calc(112 * var(--u)) calc(19 * var(--u)) calc(30 * var(--u));
  border-radius:calc(24 * var(--u));
  background:var(--c-navy);
  overflow:hidden;
  isolation:isolate;
}
.s6__glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(96% 48% at 50% 106%, rgba(10,0,255,.98) 0%, rgba(8,0,242,.5) 44%, rgba(22,1,92,0) 82%);
  mix-blend-mode:screen;
}
.s6__wordmark{
  position:absolute;
  left:50%; top:calc(38 * var(--u));
  transform:translateX(-50%);
  white-space:nowrap;
  font-weight:800;
  font-size:calc(44.5 * var(--u));
  line-height:1.05;
  letter-spacing:calc(.57 * var(--u));
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(246,246,246,.55) 0%, rgba(246,246,246,0) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

/* --- Kollage --------------------------------------------------------------
   Vier Stimmen in sehr unterschiedlicher Länge. Deshalb zwei Spalten, in
   denen die Karten ihre natürliche Höhe behalten — keine festen Höhen, kein
   Leerraum zwischen den Karten. Alle vier in derselben Darstellung: Zitat,
   Name, darunter Funktion und Firma, wo sie vorliegen. */
.s6__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:calc(14 * var(--u));
}
.s6__col{
  display:flex; flex-direction:column;
  gap:calc(14 * var(--u));
}

.s6__q{
  background:#fff;
  border-radius:calc(12 * var(--u));
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(4,0,40,.22);
}

/* --- Kundenstimme aus dem Printmaterial ---------------------------------- */
.s6__q{
  position:relative;
  padding:calc(18 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  color:var(--c-navy);
}
.s6__qmark{
  position:absolute;
  left:calc(14 * var(--u)); top:calc(6 * var(--u));
  font-weight:800;
  font-size:calc(52 * var(--u));
  line-height:1;
  color:var(--c-yellow);
}
.s6__qtext{
  margin:0;
  padding-left:calc(26 * var(--u));
  font-size:calc(15 * var(--u));
  line-height:1.5;
  color:#2A1470;
}
.s6__qtext strong{font-weight:800; color:var(--c-navy)}
.s6__qwho{
  margin-top:calc(14 * var(--u));
  padding-top:calc(12 * var(--u));
  padding-left:calc(26 * var(--u));
  border-top:1px solid rgba(22,1,92,.14);
}
.s6__qname{
  font-weight:800;
  font-size:calc(14 * var(--u));
  line-height:1.2;
  letter-spacing:calc(.14 * var(--u));
  text-transform:uppercase;
  color:var(--c-navy);
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s6__stage{padding:calc(12 * var(--u)) 0}
  .s6__card{
    width:calc(1418 * var(--u));
    padding:calc(151 * var(--u)) calc(86 * var(--u)) calc(70 * var(--u));
    border-radius:calc(35 * var(--u));
  }
  .s6__glow{
    background:
      radial-gradient(72% 52% at 50% 108%, rgba(10,0,255,.98) 0%, rgba(8,0,246,.52) 44%, rgba(22,1,92,0) 82%),
      radial-gradient(52% 34% at 22% 96%, rgba(8,0,235,.42) 0%, rgba(22,1,92,0) 78%);
  }
  .s6__wordmark{
    top:calc(27 * var(--u));
    font-size:calc(180 * var(--u));
    letter-spacing:calc(1.8 * var(--u));
  }

  /* Zwei Spalten, Karten in natürlicher Höhe — die ungleichen Unterkanten
     sind der Kollagen-Effekt. */
  .s6__grid{grid-template-columns:1fr 1fr; gap:calc(30 * var(--u))}
  .s6__col{gap:calc(30 * var(--u))}

  .s6__q{padding:calc(30 * var(--u)) calc(28 * var(--u))}
  .s6__qmark{left:calc(24 * var(--u)); top:calc(12 * var(--u)); font-size:calc(76 * var(--u))}
  .s6__qtext{padding-left:calc(42 * var(--u)); font-size:calc(20 * var(--u)); line-height:1.55}
  .s6__qwho{
    padding-left:calc(42 * var(--u));
    margin-top:calc(20 * var(--u));
    padding-top:calc(16 * var(--u));
  }
  .s6__qname{font-size:calc(18 * var(--u))}
}

/* ==========================================================================
   SEKTION 7 — Über Jürgen Höller        Figma 19:1939 (Desktop) / 19:1938 (Mobile)
   ========================================================================== */
.s7{
  display:flex; justify-content:center;
  background:var(--c-bg);
}
.s7__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(2069 * var(--u));
  overflow:hidden;
}

/* --- Mobile (Basis) ------------------------------------------------------ */
/* Die diagonale Wortmarke gibt es nur im Desktop-Artboard */
.s7__wm{display:none}

.s7__card{
  position:absolute;
  left:50%; top:calc(30 * var(--u));
  transform:translateX(-50%);
  width:calc(347 * var(--u));
  height:calc(947 * var(--u));
  border-radius:calc(9 * var(--u));
  background:#fff;
  overflow:hidden;
  z-index:1;
}
.s7__h2{
  position:absolute;
  left:50%; top:calc(35 * var(--u));
  transform:translateX(-50%);
  width:calc(302 * var(--u));
  margin:0;
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.05;
  letter-spacing:calc(.24 * var(--u));
  text-transform:uppercase;
  text-align:center;
  color:#02074A;
}
.s7__text{
  position:absolute;
  left:50%; top:calc(103 * var(--u));      /* 35 + 24*1.05 + 43 Gap */
  transform:translateX(-50%);
  width:calc(302 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(10 * var(--u));
}
.s7__text p{
  margin:0;
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:#010F31;
}
.s7__text strong{font-weight:700}

.s7__photo{
  position:absolute;
  left:calc(-1 * var(--u)); top:calc(1002 * var(--u));
  width:calc(371 * var(--u)); height:calc(556 * var(--u));
  overflow:hidden;
}
.s7__photo img{
  display:block;
  width:100%; height:auto;
}

.s7__stats{
  position:absolute;
  left:calc(22 * var(--u)); top:calc(1558 * var(--u));
  width:calc(347 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(19 * var(--u));
  z-index:2;
}
.s7__stat{
  position:relative;
  width:100%;
  height:calc(133 * var(--u));
  border-radius:calc(9 * var(--u));
  background:linear-gradient(90deg, #3700EA 0%, #4265FF 47.736%, #3700EA 100%);
  color:var(--c-bg);
  text-align:center;
}
.s7__num, .s7__lbl{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:calc(343 * var(--u));
  line-height:1;
}
.s7__num{
  top:calc(31 * var(--u));
  font-weight:700;
  font-size:calc(32 * var(--u));
  letter-spacing:calc(.32 * var(--u));
  text-transform:uppercase;
}
.s7__lbl{
  top:calc(68 * var(--u));
  font-size:calc(20 * var(--u));
}
.s7__stat--2 .s7__num,
.s7__stat--3 .s7__num{top:calc(25 * var(--u))}
.s7__stat--2 .s7__lbl,
.s7__stat--3 .s7__lbl{top:calc(73 * var(--u))}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s7__stage{height:calc(1089 * var(--u))}

  /* Wortmarke: im Design 6 einzeln um 69,47° gedrehte Buchstaben-Vektoren,
     die diagonal nach unten rechts laufen. Hier eine gedrehte Textzeile. */
  .s7__wm{
    display:block;
    position:absolute;
    left:calc(183 * var(--u)); top:calc(-279 * var(--u));
    transform-origin:0 0;
    transform:rotate(69.47deg);
    white-space:nowrap;
    font-weight:800;
    font-size:calc(455 * var(--u));
    line-height:1;
    letter-spacing:calc(-8 * var(--u));
    color:rgba(255,255,255,.45);
    z-index:0;
  }

  .s7__card{
    left:calc(581 * var(--u)); top:calc(71 * var(--u));
    transform:none;
    width:calc(745 * var(--u));
    height:calc(772 * var(--u));
  }
  .s7__h2{
    left:calc(63 * var(--u)); top:calc(66 * var(--u));   /* 644-581 | Mitte 157-71 */
    transform:none;
    width:calc(682 * var(--u));
    font-size:calc(38 * var(--u));
    letter-spacing:calc(.38 * var(--u));
    text-align:left;
  }
  .s7__text{
    left:calc(58 * var(--u)); top:calc(146 * var(--u));  /* 639-581 | 217-71 */
    transform:none;
    width:calc(638 * var(--u));
    gap:calc(8 * var(--u));
  }

  /* Portrait liegt über der Karte und wird vom Sektionsrahmen beschnitten */
  .s7__photo{
    left:calc(-71 * var(--u)); top:calc(110 * var(--u));
    width:calc(857 * var(--u)); height:calc(1285 * var(--u));
    z-index:2;
  }

  .s7__stats{
    left:calc(667 * var(--u)); top:calc(753 * var(--u));
    width:auto;
    flex-direction:row;
    gap:calc(11 * var(--u));
    z-index:3;
  }
  .s7__stat{width:calc(196 * var(--u))}
  .s7__num, .s7__lbl{width:calc(183 * var(--u))}
  .s7__num{
    top:calc(24 * var(--u));
    font-size:calc(30 * var(--u));
    letter-spacing:calc(.3 * var(--u));
  }
  .s7__lbl{
    top:calc(68 * var(--u));
    font-size:calc(16 * var(--u));
  }
  .s7__stat--2 .s7__num,
  .s7__stat--3 .s7__num{top:calc(19 * var(--u)); width:calc(159 * var(--u))}
  .s7__stat--2 .s7__lbl,
  .s7__stat--3 .s7__lbl{top:calc(61 * var(--u)); width:calc(145 * var(--u))}
  .s7__brm{display:none}
}

/* ==========================================================================
   SEKTION 8 — FAQ                        Figma 5:383 (Desktop) / 19:1974 (Mobile)
   ========================================================================== */
.s8{
  display:flex; justify-content:center;
  background:var(--c-bg);
}
.s8__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  height:calc(1045 * var(--u));
  overflow:hidden;
}

/* --- Mobile (Basis) ------------------------------------------------------ */
.s8__card{
  position:absolute;
  left:0; top:0;
  width:100%; height:calc(1067 * var(--u));
  border-radius:calc(10 * var(--u));
  background:linear-gradient(180deg, #17025D 0%, #3600E9 100%);
  overflow:hidden;
  isolation:isolate;
}
.s8__h2{
  position:absolute;
  left:calc(48 * var(--u)); top:calc(133.5 * var(--u));
  transform:translateY(-50%);
  width:calc(307 * var(--u));
  margin:0;
  font-weight:800;
  font-size:calc(24 * var(--u));
  line-height:1.05;
  letter-spacing:calc(.24 * var(--u));
  text-transform:uppercase;
  color:var(--c-bg);
}
.s8__cta{
  position:absolute;
  left:50%; top:calc(223 * var(--u));
  transform:translateX(-50%);
  width:calc(314 * var(--u));
  height:calc(64 * var(--u));
  padding:calc(18 * var(--u)) calc(24 * var(--u));
  font-size:calc(16 * var(--u));
  letter-spacing:calc(-.16 * var(--u));
  line-height:1.1;
}
.s8__cta:hover{transform:translateX(-50%) translateY(-2px)}
.s8__cta:active{transform:translateX(-50%)}

.s8__faq{
  position:absolute;
  left:50%; top:calc(324 * var(--u));
  transform:translateX(-50%);
  width:calc(302 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(16 * var(--u));
}

/* Akkordeon-Element */
.s8__item{
  padding:calc(23 * var(--u));
  border:1px solid rgba(255,255,255,.1);
  border-radius:calc(16 * var(--u));
  background:rgba(255,255,255,.02);
  box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.16);
}
.s8__item[open]{
  border-color:#3700EA;
  background:#fff;
}
.s8__q{
  display:flex; align-items:center; justify-content:space-between;
  list-style:none;
  cursor:pointer;
  font-weight:700;
  font-size:calc(18 * var(--u));
  line-height:1.4;
  color:var(--c-grey-200);
}
.s8__q::-webkit-details-marker{display:none}
.s8__item[open] .s8__q{color:#0C0C0C}

/* Plus/Minus: im Design zwei 16-px-SVGs, hier aus zwei Balken gebaut */
.s8__tog{
  position:relative;
  flex:none;
  width:calc(36 * var(--u)); height:calc(36 * var(--u));
  border-radius:50%;
  background:rgba(255,255,255,.05);
}
.s8__tog::before,
.s8__tog::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:calc(14 * var(--u)); height:calc(1.8 * var(--u));
  border-radius:calc(1 * var(--u));
  background:var(--c-grey-200);
  transform:translate(-50%,-50%);
}
.s8__tog::after{transform:translate(-50%,-50%) rotate(90deg)}
.s8__item[open] .s8__tog{background:#0C0C0C}
.s8__item[open] .s8__tog::before{background:#fff}
.s8__item[open] .s8__tog::after{display:none}

.s8__a{
  display:none;
  margin-top:calc(16 * var(--u));
  border-top:1px solid rgba(0,0,0,.1);
  padding-top:calc(8 * var(--u));
}
.s8__item[open] > .s8__a{display:block}
.s8__a p{
  margin:0;
  font-size:calc(16 * var(--u));
  line-height:1.6;
  color:#100F14;
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  .s8__stage{height:calc(719 * var(--u))}

  .s8__card{
    left:calc(13 * var(--u)); top:0;
    width:calc(1418 * var(--u)); height:calc(685 * var(--u));
    border-radius:calc(35 * var(--u));
    /* Im Design zwei große Ellipsen-SVGs mit Blur; hier als Radial-Verläufe */
    /* Im Design zwei 1644-px-Ellipsen mit Blur unterhalb der Karte —
       hier als zwei Radial-Verläufe an denselben Mittelpunkten. */
    background:
      radial-gradient(circle calc(1150 * var(--u)) at calc(970 * var(--u)) calc(1024 * var(--u)),
        rgba(20,0,255,.96) 28%, rgba(45,0,247,.88) 45%, rgba(55,0,240,.68) 60%,
        rgba(55,0,234,.37) 74%, rgba(55,0,234,.13) 88%, rgba(22,1,92,0) 100%),
      radial-gradient(circle calc(1300 * var(--u)) at calc(1308 * var(--u)) calc(1334 * var(--u)),
        rgba(18,0,255,.62) 0%, rgba(40,0,242,.3) 55%, rgba(22,1,92,0) 88%),
      var(--c-navy);
  }
  .s8__h2{
    left:calc(85 * var(--u)); top:calc(188 * var(--u));   /* kartenrelativ */
    transform:translateY(-50%);
    width:calc(528 * var(--u));
    font-size:calc(38 * var(--u));
    letter-spacing:calc(.38 * var(--u));
  }
  .s8__cta{
    left:calc(85 * var(--u)); top:calc(326 * var(--u));
    transform:none;
    width:calc(488.7 * var(--u));
    height:calc(73.3 * var(--u));
    padding:0 calc(24 * var(--u));
    font-size:calc(21 * var(--u));
    letter-spacing:calc(-.42 * var(--u));
    line-height:1.05;
  }
  .s8__cta:hover{transform:translateY(-2px)}
  .s8__cta:active{transform:none}

  .s8__faq{
    left:calc(709 * var(--u)); top:calc(93 * var(--u));   /* 722 - 13 */
    transform:none;
    width:calc(624 * var(--u));
  }
}

/* ==========================================================================
   OPT-IN-MODAL                    Figma 20:641 (Desktop) / 20:660 (Mobile)
   Feste px-Maße: das Modal liegt über der Seite und skaliert nicht mit dem
   Artboard mit. Bei 390 px Viewport ist die Karte 378 px breit — genau wie
   im Mobile-Design.
   ========================================================================== */
.modal{
  /* Chromium klemmt <dialog> per UA-Stylesheet auf max-width: calc(100% - 38px);
     das muss weg, sonst ist die Karte auf Mobile 352 statt 378 px breit. */
  max-width:none; max-height:none;
  width:min(560px, calc(100vw - 12px));   /* 390er Viewport → 378 px wie im Design */
  margin:auto;
  padding:0;
  border:0;
  background:none;
  overflow:visible;
  color:#fff;
}
.modal::backdrop{
  background:rgba(9,0,44,.72);
  backdrop-filter:blur(4px);
}
.modal[open]{
  animation:modal-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes modal-in{
  from{opacity:0; transform:translateY(12px) scale(.985)}
  to  {opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .modal[open]{animation:none} }

.modal__card{
  box-sizing:border-box;
  width:100%;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  padding:40px;
  border:1.5px solid rgba(255,255,255,.07);
  border-radius:24px;
  background:var(--c-blue-modal);
  box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 80px rgba(55,0,234,.4);
  font-family:var(--font);
}

/* Kopfzeile */
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  min-height:36px;
}
.modal__eyebrow{
  margin:0;
  flex:1 1 auto;
  font-weight:700; font-style:italic;
  font-size:16px; line-height:1.1;
  letter-spacing:.16px;
  text-transform:uppercase;
  color:var(--c-yellow);
}
.modal__close{
  flex:none;
  display:grid; place-items:center;
  width:36px; height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease;
}
.modal__close:hover{background:rgba(255,255,255,.16)}
.modal__close svg{width:20px; height:20px}

/* Text */
.modal__copy{
  margin-top:28px;
  display:flex; flex-direction:column; gap:14px;
}
.modal__title{
  margin:0;
  font-weight:800;
  font-size:30px; line-height:1.05;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#fff;
}
.modal__sub{
  margin:0;
  font-size:16px; line-height:1.3;
  color:#EEE;
}

/* Formular */
.modal__form{margin-top:28px}
.modal__fields{display:flex; flex-direction:column; gap:12px}
.modal__row{display:flex; gap:12px}
.modal__row .field{flex:1 1 0; min-width:0}

.field__in{
  box-sizing:border-box;
  width:100%; height:52px;
  padding:0 16px;
  border:1px solid #E3DAFF;
  border-radius:12px;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-family:var(--font);
  font-size:16px;
  transition:border-color .15s ease, background .15s ease;
}
.field__in::placeholder{color:rgba(255,255,255,.4)}
.field__in:focus{
  outline:none;
  border-color:#fff;
  background:rgba(255,255,255,.28);
}
.field__in:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 60px #3d17d8 inset;
}

/* Telefon: Vorwahl-Auswahl und Nummer in einer Box */
.field__tel{
  display:flex;
  height:52px;
  border:1px solid #E3DAFF;
  border-radius:12px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.field__tel:focus-within{border-color:#fff; background:rgba(255,255,255,.28)}
.field__cc{
  flex:none;
  width:104px;
  padding:0 8px 0 16px;
  border:0;
  border-right:1px solid rgba(227,218,255,.45);
  background:transparent;
  color:#fff;
  font-family:var(--font);
  font-size:16px;
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 15px) 24px, calc(100% - 10px) 24px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field__cc option{color:#16015C}
.field__in--tel{
  height:100%;
  border:0; border-radius:0;
  background:transparent;
}
.field__in--tel:focus{background:transparent}

/* Fehlermeldungen */
.field__err{
  margin:6px 0 0;
  font-size:13px; line-height:1.3;
  color:#FFDB59;
}
.field__err:empty{display:none}
.field__in[aria-invalid="true"],
.field__tel[data-invalid]{border-color:#FFDB59}

/* CTA + Badge */
.modal__cta{
  width:100%;
  height:58.15px;
  margin-top:28px;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.36px;
  cursor:pointer;
}
.modal__cta:hover{transform:translateY(-2px)}
.modal__cta:active{transform:none}
.modal__badge{
  margin:16px 0 0;
  font-weight:700;
  font-size:16px; line-height:1.1;
  letter-spacing:.16px;
  text-transform:uppercase;
  text-align:center;
  color:rgba(255,255,255,.9);
}
.modal__badge span{color:var(--c-yellow)}

/* Erfolgsansicht */
.modal__done{text-align:center}
.modal__done .modal__title{margin-top:8px}
.modal__done .modal__sub{margin-top:14px}
.modal__doneicon{
  margin:0 auto;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--c-yellow);
  color:var(--c-navy);
  font-size:28px; font-weight:700;
}

/* Bei 390 px Viewport ist die Karte 378 px breit mit 40 px Innenabstand —
   identisch zum Mobile-Design. Erst darunter wird es enger. */
@media (max-width:480px){
  /* Die Badge-Zeile ist im Design 317 px breit und läuft auf Mobile aus der
     Karte heraus — hier eine Stufe kleiner, damit sie einzeilig hineinpasst. */
  .modal__badge{font-size:14px}
}
@media (max-width:359px){
  .modal__card{padding:24px 20px}
  .modal__title{font-size:26px}
  .field__cc{width:92px; font-size:15px}
}

/* Honeypot: muss für Bots im DOM erreichbar sein, für Menschen unsichtbar —
   deshalb kein display:none (das erkennen manche Bots). */
.modal__hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
/* Sammelmeldung über dem CTA (Server-Fehler, Verbindungsprobleme) */
.modal__formerror{
  margin:16px 0 0;
  padding:10px 14px;
  border:1px solid #FFDB59;
  border-radius:10px;
  background:rgba(255,219,89,.12);
  font-size:15px; line-height:1.35;
  color:#FFDB59;
}
.modal__cta[aria-busy="true"]{opacity:.75; cursor:progress}
.modal__cta:disabled{transform:none}

/* ==========================================================================
   FOOTER                                 Figma 26:2623 (Desktop) / 30:2670 (Mobile)
   ========================================================================== */
.ft{
  position:relative;
  display:flex; justify-content:center;
  background:#1B0171;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,#3700EA 0%,#4265FF 47.736%,#3700EA 100%) 1;
}
.ft__stage{
  container-type:inline-size;
  width:var(--stage);
  padding:calc(70 * var(--u)) calc(20 * var(--u)) calc(78 * var(--u));
  text-align:center;
}
/* Logo-Band: weiße Fläche unter dem dunklen Logo, die links und rechts ins
   Footerblau ausläuft. Der Verlauf sitzt im Hintergrund, nicht als Maske —
   so bleibt das Logo selbst voll deckend. */
.ft__logo{
  display:flex; align-items:center; justify-content:center;
  height:calc(74 * var(--u));
  margin:0 calc(-20 * var(--u));            /* über die Stage-Polsterung hinaus */
  background:linear-gradient(90deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,.28) 14%,
      rgba(255,255,255,.85) 27%,
      #FFFFFF               36%,
      #FFFFFF               64%,
      rgba(255,255,255,.85) 73%,
      rgba(255,255,255,.28) 86%,
      rgba(255,255,255,0)   100%);
}
.ft__logo img{
  width:calc(228 * var(--u));
  height:auto;
}
.ft__copy{
  margin:calc(32 * var(--u)) 0 0;
  font-size:calc(13 * var(--u));
  line-height:1.5;
  color:#AEB5DE;
}
.ft__legal{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:calc(24 * var(--u));
  margin-top:calc(31 * var(--u));
}
.ft__legal a,
.ft__legal button{
  padding:0;
  border:0;
  background:none;
  font-family:var(--font);
  font-size:calc(13 * var(--u));
  line-height:1.4;
  color:#AEB5DE;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}
.ft__legal a:hover,
.ft__legal button:hover{color:#fff; text-decoration:underline}
.ft__legal a:focus-visible,
.ft__legal button:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:2px}

@media (min-width:1000px){
  .ft__stage{padding:calc(74 * var(--u)) calc(20 * var(--u)) calc(80 * var(--u))}
  .ft__logo{
    height:calc(104 * var(--u));
    margin:0 calc(-20 * var(--u));
  }
  .ft__logo img{width:calc(310 * var(--u))}
  .ft__brm{display:none}     /* Copyright steht auf Desktop einzeilig */
  .ft__copy{white-space:nowrap}
}

/* ==========================================================================
   CONSENT-BANNER (selbst gebaut, wie in den übrigen JHA-Funneln)
   Feste px-Maße: liegt über der Seite und skaliert nicht mit dem Artboard.
   ========================================================================== */
.cc{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:flex; justify-content:center;
  padding:12px;
  font-family:var(--font);
}
/* Kein Overlay, keine Scroll-Sperre: die Leiste liegt unten und lässt die
   Seite vollständig bedienbar — ohne Entscheidung, egal welche. */
.cc{pointer-events:none}
.cc__card{pointer-events:auto}

.cc__card{
  position:relative;
  box-sizing:border-box;
  width:min(1100px, 100%);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:var(--c-navy);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
  color:#fff;
}

.cc__main{
  display:flex; align-items:center;
  gap:28px;
}
.cc__close{
  position:absolute; top:8px; right:10px;
  width:28px; height:28px;
  padding:0;
  border:0; border-radius:50%;
  background:none;
  color:#B9BAD2;
  font-family:var(--font);
  font-size:22px; line-height:1;
  cursor:pointer;
}
.cc__close:hover{background:rgba(255,255,255,.12); color:#fff}
.cc__copy{flex:1 1 auto; min-width:0}
.cc__title{
  margin:0 0 6px;
  font-weight:800;
  font-size:17px; line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.17px;
}
.cc__text{
  margin:0;
  font-size:14px; line-height:1.45;
  color:#DCDCEC;
}
.cc__text a{color:var(--c-yellow-hi)}

.cc__actions{
  flex:none;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px;
}
.cc__btn{
  padding:13px 22px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:39px;
  background:none;
  color:#fff;
  font-family:var(--font);
  font-weight:700;
  font-size:14px; line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-.14px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Annehmen und Ablehnen bewusst gleich groß — die Entscheidung soll frei sein. */
.cc__btn--accept{
  background:var(--grad-cta);
  border-color:#fff;
  color:var(--c-navy);
}
.cc__btn--accept:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,192,1,.3)}
.cc__btn--reject:hover{background:rgba(255,255,255,.12)}
.cc__btn--save{margin-top:16px}
.cc__link{
  padding:6px 4px;
  border:0; background:none;
  color:#DCDCEC;
  font-family:var(--font);
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
}
.cc__link:hover{color:#fff}

.cc__details{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
}
.cc__cat{
  display:flex; align-items:flex-start; gap:14px;
  padding:10px 0;
}
.cc__cattitle{margin:0; font-weight:700; font-size:14px; line-height:1.3}
.cc__cattext{margin:2px 0 0; font-size:13px; line-height:1.4; color:#B9BAD2}

/* Schalter */
.cc__switch{flex:none; position:relative; width:44px; height:24px; margin-top:2px}
.cc__switch input{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.cc__slider{
  position:absolute; inset:0;
  border-radius:12px;
  background:rgba(255,255,255,.2);
  transition:background .15s ease;
  pointer-events:none;
}
.cc__slider::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  transition:transform .15s ease;
}
.cc__switch input:checked + .cc__slider{background:#3700EA}
.cc__switch input:checked + .cc__slider::after{transform:translateX(20px)}
.cc__switch input:disabled + .cc__slider{background:#3700EA; opacity:.55}
.cc__switch input:focus-visible + .cc__slider{outline:2px solid #fff; outline-offset:2px}

@media (max-width:1000px){
  .cc__card{padding:20px 20px 22px}
  .cc__main{flex-direction:column; align-items:stretch; gap:18px}
  .cc__actions{justify-content:stretch}
  .cc__btn{flex:1 1 auto; text-align:center}
  .cc__link{flex:1 1 100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cc__btn, .cc__slider, .cc__slider::after{transition:none}
}

/* ==========================================================================
   DANKESEITE (webinar-danke.html)  Figma 10:562 (Desktop) / 38:2714 (Mobile)
   Eine dunkle Karte, die oben aus dem Viewport ragt. Die weiße Termin-
   Plakette liegt über der Kartenkante und hat dieselbe Farbe wie der
   Seitenhintergrund — im Design wirkt sie deshalb wie ein Ausschnitt.
   ========================================================================== */
.ty{
  display:flex; justify-content:center;
  background:var(--c-bg);
}
.ty__stage{
  position:relative;
  container-type:inline-size;
  width:var(--stage);
  /* Höhe über das Seitenverhältnis des Artboards statt über --u: die eigene
     Container-Einheit steht dem Element selbst nicht zur Verfügung (cqw fällt
     dann auf die Viewport-Breite zurück). Zwischen 480 und 1000 px entstünde
     sonst eine große Leerfläche unter der Karte. */
  /* 1443 im Design + 67 für Kalender-Block und Uhrzeit (im Design nicht enthalten) */
  aspect-ratio:390 / 1510;
  height:auto;
}

/* --- Mobile (Basis) ------------------------------------------------------ */
/* Karte 390 × 1491, top -48, randlos (Figma 38:2764) */
.ty__card{
  position:absolute;
  left:0; right:0;
  top:calc(-48 * var(--u));
  height:calc(1558 * var(--u));   /* 1491 im Design + 67 für Kalender-Block und Uhrzeit */
  background:var(--c-navy);
  overflow:hidden;
  isolation:isolate;
}

/* Arena im Screen-Blend (Figma 38:2765) */
.ty__bg{
  position:absolute; z-index:1;
  left:50%; top:calc(21 * var(--u));
  width:calc(1386 * var(--u));
  height:calc(925 * var(--u));
  max-width:none;
  transform:translateX(-50%);
  object-fit:cover;
  opacity:.55;
  mix-blend-mode:screen;
}
/* Großer JH-Freisteller hinter dem Ticket — nur Desktop (Figma 10:565) */
.ty__ghost{display:none}

/* Glow-Ellipsen: im Design zwei r=822-Kreise mit starkem Blur, deren
   Mittelpunkte unterhalb/rechts der Karte liegen. Deshalb hier als SVG
   (identische Datei wie im Design) statt als Gradient — die Kante trifft
   damit exakt. (Figma 38:2767 / 38:2768) */
.ty__glow{
  position:absolute; z-index:2;
  max-width:none;
  pointer-events:none;
}
.ty__glow--1{
  left:50%; top:calc(-296 * var(--u));
  width:calc(2554 * var(--u));
  height:calc(2315 * var(--u));
  transform:translateX(-50%);
}
.ty__glow--2{
  left:calc(136 * var(--u)); top:calc(304 * var(--u));
  width:calc(2354 * var(--u));
  height:calc(2354 * var(--u));
}

/* --- Headline (Figma 38:2786) -------------------------------------------- */
.ty__h1{
  position:absolute; z-index:4;
  left:50%; top:calc(150 * var(--u));
  transform:translateX(-50%);
  width:calc(363 * var(--u));
  margin:0;
  font-weight:700;
  font-size:calc(24 * var(--u));
  line-height:1.15;
  letter-spacing:calc(.24 * var(--u));
  text-align:center;
  text-transform:uppercase;
  color:#fff;
}
.ty__h1 span{color:var(--c-yellow)}

/* --- Ticket (Figma 38:2845) ---------------------------------------------- */
.ty__ticket{
  position:absolute; z-index:4;
  left:calc(25 * var(--u));
  top:calc(315.64 * var(--u));
  width:calc(340.899 * var(--u));
  height:calc(439.805 * var(--u));
  border-radius:calc(19.1 * var(--u));
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFD 72%,#EDEDED 92%,#E4E4E4 100%);
  box-shadow:0 calc(15 * var(--u)) calc(40 * var(--u)) rgba(4,0,40,.28);
}
.ty__tday,.ty__tdate,.ty__thour,.ty__tclock{
  position:absolute;
  margin:0;
  font-weight:700;
  line-height:1;
  color:var(--c-blue);
}
.ty__tday{
  left:calc(28.2 * var(--u)); top:calc(16.6 * var(--u));
  width:calc(95.385 * var(--u));
  font-size:calc(19.077 * var(--u));
}
.ty__tdate{
  left:calc(28.2 * var(--u)); top:calc(43.1 * var(--u));
  width:calc(95.385 * var(--u));
  font-size:calc(19.077 * var(--u));
}
.ty__thour{
  left:calc(262.1 * var(--u)); top:calc(13.3 * var(--u));
  width:calc(37.325 * var(--u));
  font-size:calc(24.883 * var(--u));
  text-align:center;
}
.ty__tclock{
  left:calc(255.5 * var(--u)); top:calc(38.2 * var(--u));
  width:calc(46.449 * var(--u));
  font-size:calc(23.224 * var(--u));
  text-align:center;
}
/* Fotofenster — gleiche Bauweise wie die Speaker-Card im Hero */
.ty__frame{
  position:absolute; z-index:2;
  left:calc(28.2 * var(--u)); top:calc(74.4 * var(--u));
  width:calc(283.7 * var(--u));
  height:calc(339.9 * var(--u));
  border-radius:calc(3.3 * var(--u));
  overflow:hidden;
  background:#1B06AE;
}
.ty__framebg{
  position:absolute;
  left:calc(-551.2 * var(--u)); top:calc(-369 * var(--u));
  width:calc(1386 * var(--u));
  height:calc(925 * var(--u));
  max-width:none;
  object-fit:cover;
  opacity:.5;
}
.ty__frametint{
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(22,1,92,.62) 0%, rgba(22,1,92,.18) 40%, rgba(22,1,92,.42) 100%),
    radial-gradient(120% 96% at 42% 104%, rgba(58,26,255,.92) 0%, rgba(48,18,246,.48) 58%, rgba(27,6,174,.10) 100%);
}
/* Foto-Beschnitt: reicht oben 6.64 px über die Ticketkarte hinaus, damit
   der Kopf über dem Rahmen steht (Figma 38:2848). */
.ty__photo{
  position:absolute; z-index:2;
  left:calc(28.2 * var(--u)); top:calc(-6.64 * var(--u));
  width:calc(283.668 * var(--u));
  height:calc(427.161 * var(--u));
  overflow:hidden;
}
.ty__jh{
  position:absolute;
  left:calc(-44.8 * var(--u)); top:0;
  width:calc(408.9 * var(--u));
  height:calc(510.9 * var(--u));
  max-width:none;
}
.ty__plaque{
  position:absolute; z-index:3;
  left:calc(102.85 * var(--u)); top:calc(379.88 * var(--u));
  width:calc(235.561 * var(--u));
  height:calc(57.231 * var(--u));
  border-radius:calc(19.907 * var(--u));
  margin:0;
  background:#E6E6E7;
  display:flex; align-items:center; justify-content:center;
}
.ty__plaque span{
  font-weight:800;
  font-size:calc(24.883 * var(--u));
  line-height:1;
  text-transform:uppercase;
  color:var(--c-navy);
  white-space:nowrap;
}

/* --- Textspalte (Figma 38:2834) ------------------------------------------ */
.ty__col{
  position:absolute; z-index:4;
  left:50%; top:calc(801 * var(--u));
  transform:translateX(-50%);
  width:calc(338 * var(--u));
  display:flex; flex-direction:column;
  gap:calc(19 * var(--u));
}
.ty__text{
  display:flex; flex-direction:column;
  gap:calc(19 * var(--u));
}
.ty__text p{
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:var(--c-grey-200);
}
.ty__text strong{font-weight:700}

/* Kalender-Hinweis: gestrichelter Rahmen, keine Ecken (Figma 38:2833) */
.ty__note{
  display:flex; align-items:center;
  min-height:calc(153 * var(--u));
  padding:calc(11 * var(--u)) calc(13 * var(--u)) calc(17 * var(--u));
  border:2px dashed #F05555;
  background:rgba(255,255,255,.2);
}
.ty__note p{
  font-size:calc(17 * var(--u));
  line-height:1.3;
  color:var(--c-grey-200);
}
.ty__note strong{
  font-weight:800;
  color:#F05555;
}

/* --- Zum Kalender hinzufügen ---------------------------------------------
   Nicht im Design enthalten (Wunsch aus dem Double-Check, 08.09.). Bauweise
   wie bei Jens Rabe: ein Primär-Button für Google, ein Sekundär-Button für
   die .ics-Datei. Der Kasten darüber sagt schon, was zu tun ist — deshalb
   hier keine eigene Überschrift, nur die Nutzenzeile darunter. */
.ty__cal{
  display:flex; flex-direction:column;
  gap:calc(10 * var(--u));
}
.ty__calbtns{
  display:flex;
  gap:calc(10 * var(--u));
}
.ty__calbtn{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  height:calc(46 * var(--u));
  padding:0 calc(8 * var(--u));
  border:1.5px solid rgba(255,255,255,.5);
  border-radius:calc(39 * var(--u));
  font-weight:700;
  font-size:calc(12.5 * var(--u));
  line-height:1.1;
  letter-spacing:calc(.13 * var(--u));
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ty__calbtn:hover{background:rgba(255,255,255,.12)}
/* Auf Mobile ist die Fläche zu schmal für „Apple, Outlook & andere" — der
   Text bräche zweizeilig um und der Button würde höher als der erste. */
.ty__calwide{display:none}
.ty__calbtn--primary{
  background:var(--grad-cta);
  border-color:transparent;
  color:var(--c-navy);
}
.ty__calbtn--primary:hover{
  background:var(--grad-cta);
  transform:translateY(-2px);
  box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(245,192,1,.32);
}
.ty__calnote{
  font-size:calc(13 * var(--u));
  line-height:1.3;
  color:#B9BAD2;
}

.ty__mail{
  display:flex; flex-direction:column;
  gap:calc(19 * var(--u));
}
.ty__mailtext{
  font-weight:700;
  font-size:calc(16 * var(--u));
  line-height:1.3;
  color:var(--c-grey-200);
}
.ty__cheer{
  max-width:calc(254 * var(--u));
  font-weight:700;
  font-style:italic;
  font-size:calc(18 * var(--u));
  line-height:1.3;
  text-transform:uppercase;
  color:var(--c-yellow);
}
.ty__sign{
  font-weight:700;
  font-style:italic;
  font-size:calc(18 * var(--u));
  line-height:1.3;
  color:var(--c-grey-200);
  white-space:nowrap;
}

/* --- Termin-Plakette (Figma 38:2801 + 38:2802) --------------------------- */
.ty__pill{
  position:absolute; z-index:3;
  left:50%; top:calc(-14 * var(--u));
  transform:translateX(-50%);
  width:calc(281 * var(--u));
  height:calc(69 * var(--u));
  border-radius:calc(9 * var(--u));
  background:var(--c-bg);
}
.ty__when{
  position:absolute; z-index:4;
  left:50%; top:calc(17 * var(--u));
  transform:translateX(-50%);
  display:flex; align-items:center;
  gap:calc(11 * var(--u));
  margin:0;
  font-weight:500;
  font-style:italic;
  font-size:calc(14 * var(--u));
  line-height:1;
  letter-spacing:calc(.14 * var(--u));
  color:#16025D;
  white-space:nowrap;
}
.ty__when img{
  width:calc(28.5 * var(--u));
  height:calc(28.5 * var(--u));
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width:1000px){
  /* 968 im Design + 40 für den Kalender-Block, den es im Design nicht gibt */
  .ty__stage{aspect-ratio:1444 / 1008; height:auto}

  /* Karte 1418 × 948 mit 10 px Rand, Radius 35 (Figma 10:563) */
  .ty__card{
    left:calc(10 * var(--u));
    right:calc(10 * var(--u));
    top:calc(10 * var(--u));
    height:calc(988 * var(--u));       /* 948 im Design + 40 für den Kalender-Block */
    border-radius:calc(35 * var(--u));
  }
  /* Arena 1760 × 1173 bei -880 / -246, gespiegelt (Figma 10:564) */
  .ty__bg{
    left:calc(-880 * var(--u)); top:calc(-246 * var(--u));
    width:calc(1760 * var(--u));
    height:calc(1173 * var(--u));
    transform:scaleX(-1);
  }
  .ty__ghost{
    display:block;
    position:absolute; z-index:1;
    left:calc(145 * var(--u)); top:calc(333 * var(--u));
    width:calc(493 * var(--u));
    height:calc(616 * var(--u));
    max-width:none;
  }
  .ty__glow--1{
    left:calc(-240 * var(--u)); top:calc(-183 * var(--u));
    width:calc(2554 * var(--u));
    height:calc(2554 * var(--u));
    transform:none;
  }
  .ty__glow--2{
    left:calc(162 * var(--u)); top:calc(330 * var(--u));
  }

  /* Headline: Mittelpunkt 687.5 / 201.5, Breite 811 (Figma 10:569) */
  .ty__h1{
    left:calc(687.5 * var(--u)); top:calc(201.5 * var(--u));
    transform:translate(-50%,-50%);
    width:calc(811 * var(--u));
    font-size:calc(45 * var(--u));
    line-height:1.05;
    letter-spacing:calc(.45 * var(--u));
  }

  /* Ticket 411 × 530.244 bei 165 / 341 (Figma 10:584 ff.) */
  .ty__ticket{
    left:calc(165 * var(--u)); top:calc(341 * var(--u));
    width:calc(411 * var(--u));
    height:calc(530.244 * var(--u));
    border-radius:calc(23 * var(--u));
    box-shadow:0 calc(21 * var(--u)) calc(52 * var(--u)) rgba(4,0,40,.30);
  }
  .ty__tday{
    left:calc(34 * var(--u)); top:calc(20 * var(--u));
    width:calc(115 * var(--u));
    font-size:calc(23 * var(--u));
  }
  .ty__tdate{
    left:calc(34 * var(--u)); top:calc(52 * var(--u));
    width:calc(115 * var(--u));
    font-size:calc(23 * var(--u));
  }
  .ty__thour{
    left:calc(316 * var(--u)); top:calc(16 * var(--u));
    width:calc(45 * var(--u));
    font-size:calc(30 * var(--u));
  }
  .ty__tclock{
    left:calc(308 * var(--u)); top:calc(46 * var(--u));
    width:calc(56 * var(--u));
    font-size:calc(28 * var(--u));
  }
  .ty__frame{
    left:calc(34 * var(--u)); top:calc(89.7 * var(--u));
    width:calc(342 * var(--u));
    height:calc(409.8 * var(--u));
    border-radius:calc(4 * var(--u));
  }
  .ty__framebg{
    left:calc(-1079 * var(--u)); top:calc(-677 * var(--u));
    width:calc(1760 * var(--u));
    height:calc(1173 * var(--u));
  }
  .ty__photo{
    left:calc(34 * var(--u)); top:calc(-8 * var(--u));
    width:calc(342 * var(--u));
    height:calc(515 * var(--u));
  }
  .ty__jh{
    left:calc(-54 * var(--u)); top:0;
    width:calc(493 * var(--u));
    height:calc(616 * var(--u));
  }
  .ty__plaque{
    left:calc(124 * var(--u)); top:calc(458 * var(--u));
    width:calc(284 * var(--u));
    height:calc(69 * var(--u));
    border-radius:calc(24 * var(--u));
  }
  .ty__plaque span{font-size:calc(30 * var(--u))}

  /* Textspalte: left 729, top 349, Breite 477, Abstand 28 (Figma 38:2821) */
  .ty__col{
    left:calc(729 * var(--u)); top:calc(349 * var(--u));
    transform:none;
    width:calc(477 * var(--u));
    gap:calc(28 * var(--u));
  }
  .ty__text p{font-size:calc(18 * var(--u))}
  .ty__note{
    min-height:calc(98 * var(--u));
    padding:0 calc(17.5 * var(--u));
  }
  .ty__note p{font-size:calc(18 * var(--u))}
  .ty__calbtns{gap:calc(12 * var(--u))}
  .ty__calbtn{
    height:calc(50 * var(--u));
    padding:0 calc(14 * var(--u));
    font-size:calc(14 * var(--u));
    letter-spacing:calc(.14 * var(--u));
  }
  .ty__calnote{font-size:calc(14 * var(--u))}
  .ty__calwide{display:inline}
  .ty__calnarrow{display:none}
  .ty__mail{gap:calc(8 * var(--u))}
  .ty__mailtext{font-size:calc(18 * var(--u))}
  .ty__cheer{max-width:none}

  /* Plakette 542 × 77, Radius 16, top -15 der Karte (Figma 10:568) */
  .ty__pill{
    top:calc(-5 * var(--u));
    width:calc(542 * var(--u));
    height:calc(77 * var(--u));
    border-radius:calc(16 * var(--u));
  }
  .ty__when{
    top:calc(27 * var(--u));
    font-size:calc(25 * var(--u));
    letter-spacing:calc(.25 * var(--u));
  }
}