/* ==========================================================================
   Maja Hieke — Webinar Landingpage
   Section: Header (Desktop)
   Figma: https://www.figma.com/design/gdmed5jJZrcnn8lO0JdQzQ?node-id=49-467
   ========================================================================== */

/* ==========================================================================
   Recoleta — self-hosted .otf files in Assets/Fonts/
   font-display: swap so text renders in Georgia fallback until Recoleta loads.
   ========================================================================== */

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta Thin.otf') format('opentype');
}

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta Light.otf') format('opentype');
}

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta SemiBold.otf') format('opentype');
}

@font-face {
  font-family: 'Recoleta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/Fonts/Recoleta Bold.otf') format('opentype');
}

:root {
  --color-bg-top:        #e9f4ff;
  --color-bg-bottom:     #f8f9fd;
  --color-text:          #000000;
  --color-text-muted:    #848484;
  --color-red:           #c60000;
  --color-grad-from:     #2d8bab;
  --color-grad-to:       #056484;
  --color-separator:     #eaeaea;

  --font-recoleta:       'Recoleta', Georgia, serif;
  --font-dm:             'DM Sans', system-ui, sans-serif;

  /* Content width: caps at 1400px on large viewports while keeping the
     full-bleed backgrounds. Below ~1600px viewport, padding stays at the
     designed 100px gutter; above that, padding grows so the content area
     remains 1400px wide and centered. */
  --content-max:         1400px;
  --gutter-min:          100px;
  --gutter:              max(var(--gutter-min), calc((100% - var(--content-max)) / 2));
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-dm);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg-bottom);
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, p {
  margin: 0;
}

/* ==========================================================================
   Topbar / Navigation-Bar (above the hero)
   Figma: node 49:445 (desktop), 53:632 (tablet), 53:1389 (mobile)
   ========================================================================== */

.topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 15px;
  padding-inline: var(--gutter);
  /* Per Figma update: solid #f8f9fd (was top-to-bottom gradient) */
  background: var(--color-bg-bottom);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.topbar__info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar__info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--color-red), rgba(198, 0, 0, 0.25));
}

.topbar__info-text {
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

.topbar__info-muted {
  color: var(--color-text-muted);
}

/* Countdown */

.countdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  width: 405px;
  font-weight: 600;
}

/* Per Figma update: countdown cells now use the unified vertical-stack
   layout across all breakpoints — number above label, dark teal-on-black
   background. Mobile keeps the same structure but with smaller fonts. */
.countdown__cell {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0;
  background:
    linear-gradient(rgba(5, 100, 132, 0.45), rgba(5, 100, 132, 0.45)),
    #000000;
  border-radius: 5px;
  overflow: hidden;
}

/* line-height: 1 + negative margin-block trim the line-box leading space
   (~15% of em above and below the glyph). Without this, the cell renders
   ~60px tall instead of Figma's intended 50px because CSS line-boxes are
   taller than the visible glyph height. The negative margin shrinks the
   element's layout footprint without clipping the glyph. */
.countdown__num {
  font-family: var(--font-recoleta);
  font-weight: 500; /* Recoleta Medium */
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: #ffffff;
  margin-block: -0.15em;
}

.countdown__unit {
  font-family: var(--font-dm);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  color: var(--color-text-muted);
  font-variation-settings: 'opsz' 14;
  margin-block: -0.15em;
}

/* ==========================================================================
   Hero / Header section
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 75px;
  padding: 100px var(--gutter) 75px;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg-gradient {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Per Figma update: solid #f8f9fd (was bottom-to-top gradient) */
  background: var(--color-bg-bottom);
  pointer-events: none;
}

.hero__bg-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
}

/* Second pattern copy is only used on mobile (overlapping double pattern). */
.hero__bg-pattern--2 {
  display: none;
}

/* ==========================================================================
   Maja photo + floating trust badges — Desktop only
   Figma: 49:467 (maja image) + 64:1482 (ADHS badge) + 64:1492 (Sportwiss badge)
   Hidden on tablet/mobile via the breakpoint media queries below.
   ========================================================================== */

/* Maja photo container: 1788x919 box positioned at hero's top-left corner.
   Hero's overflow:hidden crops anything extending beyond the viewport.
   isolation:isolate ensures backdrop-filter on .hero__maja-blur only sees
   content INSIDE the container (not the hero's bg pattern behind).
   z-index:-1 places the whole maja layer behind hero's normal-flow content
   (text, CTA, press logos) but above the bg-gradient (z:-2) and bg-pattern
   (z:-1, same level — DOM order keeps maja on top of pattern). */
.hero__maja {
  position: absolute;
  top: 0;
  /* Stays aligned with the centered content area — at viewports ≤ 1600px
     this resolves to 0 (Figma's original); above that, it shifts right
     so Maja's face stays in the same relative position to content. */
  left: calc(var(--gutter) - var(--gutter-min));
  width: 1788px;
  height: 919px;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  z-index: -1;
}

.hero__maja-photo {
  position: absolute;
  /* Per Figma: image is positioned within its 1788x919 container and
     scaled larger so only a centered crop is visible.
     `top` shifted from Figma's -12.35% to -22% so Maja's head sits
     closer to the navigation bar (~90px higher than the original crop). */
  left: 23.6%;
  top: -15%;
  width: 76.4%;
  height: 223.07%;
  max-width: none;
  display: block;
}

/* Progressive blur: simulates Figma's variable-strength blur using a
   masked backdrop-filter layer. The mask is fully transparent above ~40%
   (where Maja's face + shoulders are), then fades to fully opaque at the
   bottom. Where the mask is opaque, a 15px backdrop-blur of the image
   below is visible; where it's transparent, the image stays sharp.
   Net effect: blur=0 above the shoulder, blur=15 at the bottom. */
.hero__maja-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    black 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    black 100%
  );
}

/* Bottom-to-top fade so the (now blurred) image dissolves into the section
   bg color at the very bottom — keeps the press logos area readable. */
.hero__maja-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 249, 253, 0) 55%,
    rgba(248, 249, 253, 1) 98.21%
  );
  pointer-events: none;
}

/* Floating trust badges over Maja's photo. Pixel-positioned per Figma's
   1440-wide design frame (positions are relative to hero's top-left). */
.hero-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background: #ffffff;
  border-radius: 35px;
  white-space: nowrap;
  overflow: hidden;
}

.hero-badge--adhs {
  top: 241px;
  /* Tracks centered content: at ≤1600px viewport this resolves to 728px;
     larger viewports shift right with content. */
  left: calc(var(--gutter) + 628px);
  /* Sits behind Maja's photo: same z-index as bg patterns and maja,
     but DOM-ordered between them so paint order is
     bg-pattern → ADHS badge → maja → content. Result: Maja's hair
     overlaps part of the pill, matching Figma's layered look. */
  z-index: -1;
}

.hero-badge--sportwiss {
  top: 443px;
  /* Tracks centered content: at ≤1600px viewport resolves to 1130px. */
  left: calc(var(--gutter) + 1030px);
}

/* Emoji uses the system emoji font (browsers fall back automatically).
   Sized + tracked per Figma. */
.hero-badge__emoji {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.48px;
}

.hero-badge__icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  display: block;
}

.hero-badge__text {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
  color: var(--color-text);
  font-variation-settings: 'opsz' 14;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  width: 1240px;
  max-width: 100%;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}

/* ==========================================================================
   Live-Workshop badge
   ========================================================================== */

.live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 25px;
  background: #ffffff;
  border-radius: 35px;
  white-space: nowrap;
}

/* On desktop & tablet the inner wrappers are layout-transparent so all
   children participate in the badge's flex row. On mobile we re-enable
   them to stack the head row over the title pill. */
.live-badge__head,
.live-badge__title-wrap {
  display: contents;
}

.live-badge__pulse,
.live-badge__pulse-ring1,
.live-badge__pulse-ring2,
.live-badge__pulse-ring3,
.live-badge__pulse-core {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.live-badge__pulse {
  width: 26px;
  height: 26px;
  border: 0.5px solid rgba(198, 0, 0, 0.25);
}

.live-badge__pulse-ring1 {
  width: 20px;
  height: 20px;
  border: 0.5px solid rgba(198, 0, 0, 0.5);
}

.live-badge__pulse-ring2 {
  width: 14px;
  height: 14px;
  border: 0.5px solid rgba(198, 0, 0, 0.75);
}

.live-badge__pulse-ring3 {
  width: 8px;
  height: 8px;
  border: 0.5px solid var(--color-red);
  background: rgba(198, 0, 0, 0.15);
}

.live-badge__pulse-core {
  width: 4px;
  height: 4px;
  background: var(--color-red);
  border-radius: 50%;
}

.live-badge__label {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-red);
  font-variation-settings: 'opsz' 14;
}

.live-badge__title {
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
  letter-spacing: -0.36px;
}

/* ==========================================================================
   Heading + Subtitle
   ========================================================================== */

.hero__heading {
  width: 612px;
  font-family: var(--font-recoleta);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: var(--color-text);
}

.hero__heading-gradient {
  background: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  letter-spacing: -0.32px;
}

.hero__subtitle {
  width: 665px;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
  font-variation-settings: 'opsz' 14;
}

/* ==========================================================================
   CTA — Button + Capacity bar
   ========================================================================== */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 420px;
}

/* The button has a two-layer structure (per updated Figma — teal brand colors):
   - Outer wrapper: 7px padding, flat 10% teal soft frame (was orange radial glow)
   - Inner button: teal radial gradient with white highlight near the bottom */

/* Animation wrapper around .cta-button. Exists purely so .reveal can
   transform translateY without colliding with .cta-button's infinite
   scale-pulse animation (each animation owns its own element's transform). */
.cta-button-reveal {
  display: block;
  width: 100%;
}

.cta-button {
  display: block;
  width: 100%;
  padding: 5px;
  border-radius: 20px;
  background: rgba(5, 100, 132, 0.1);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.cta-button:hover {
  filter: brightness(1.03);
}

.cta-button:active {
  transform: scale(0.99);
}

.cta-button__inner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  /* Two layered gradients per Figma's latest button design (deeper, more
     saturated teal — the older 7-stop ramp started with a very light cyan
     at the top which made the button look washed-out; the new 4-stop ramp
     is darker and more brand-consistent):
       1. Top: subtle white "lift" glow bleeding from just below the bottom
       2. Bottom: cool teal radial sweep (medium cyan → deep brand teal)
     The ellipse sizes are expressed as percentages of the gradient box so
     they scale automatically across all breakpoints (Desktop 410×71 /
     Tablet 410×71 / Mobile 350×65). Animating background-size makes the
     light area pulse without needing per-breakpoint overrides. */
  background:
    radial-gradient(
      ellipse 26.5% 10.3% at 50% 104%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      ellipse 39.5% 100% at 50% 100%,
      rgba(55, 164, 202, 1) 0%,
      rgba(30, 132, 167, 1) 50%,
      rgba(17, 116, 149, 1) 75%,
      rgba(5, 100, 132, 1) 100%
    );
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cta-button__text {
  font-family: var(--font-dm);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.55;
  color: #ffffff;
  white-space: nowrap;
  font-variation-settings: 'opsz' 14;
}

/* Arrow icon: now points right natively (we rewrote the SVG path so no
   CSS rotation is needed — keyframe animations are simpler as a result). */
.cta-button__arrow {
  width: 18px;
  height: 15px;
  flex-shrink: 0;
  color: #ffffff;
}

/* Capacity bar */

.capacity {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 50px;
  border-radius: 10px;
}

.capacity__text {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: -0.28px;
  color: var(--color-text);
  white-space: nowrap;
  font-variation-settings: 'opsz' 14;
}

.capacity__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 18px;
  border-radius: 5px;
  font-family: var(--font-dm);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.24px;
  color: #ffffff;
  background:
    linear-gradient(rgba(247, 0, 0, 0.55), rgba(247, 0, 0, 0.55)),
    #000000;
  font-variation-settings: 'opsz' 14;
}

.capacity__bar {
  flex: 1 0 0;
  min-width: 0;
  height: 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  padding-right: 25px;
  overflow: hidden;
}

.capacity__bar-fill {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(247, 0, 0, 0.55), rgba(247, 0, 0, 0.55)),
    #000000;
}

/* ==========================================================================
   Bekannt aus / Press logos
   ========================================================================== */

.press {
  display: flex;
  align-items: center;
  gap: 100px;
  width: 100%;
}

.press__label {
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.press__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 850px;
}

.press__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 75px;
}

.press__logo img {
  display: block;
  object-fit: contain;
}

.press__logo--kika img      { width:  80px; height: 45px; }
.press__logo--sat1 img      { width: 100px; height: 45px; }
.press__logo--zdftivi img   { width: 100px; height: 36px; }
.press__logo--instagram img { width: 100px; height: 28px; }

.press__separator {
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 35px;
  background: var(--color-separator);
}

/* ==========================================================================
   Workshop content (DLD-Sektion)
   "Was du im Online Workshop lernen wirst:" — accordion-like list with media
   Figma: 49:504 (desktop), 53:691 (tablet), 53:1148 (mobile)
   ========================================================================== */

/* ==========================================================================
   Section: "Was du im Workshop lernen wirst"
   --------------------------------------------------------------------------
   The section is a SCROLL-PINNED stage. While the user scrolls through
   the section, the heading + items + media stay pinned at the top of
   the viewport (position: sticky on .workshop-content__pin-stage). The
   pin-track parent is N×100vh tall, so the stage stays pinned for a
   long scroll distance — JS reads scroll progress and toggles which
   item is `.is-open`. On desktop, three media slides stack on top of
   each other and slide up from below as the active index advances.

   The pin requires a viewport tall enough to fit the stage. We gate
   it on `min-height: 600px` so very short viewports fall back to a
   normal stacked layout without pinning (every item open).
   ========================================================================== */
.workshop-content {
  position: relative;
  background: var(--color-bg-bottom);
  /* Number of items = number of pin segments. Override per breakpoint
     if you want shorter/longer pin distance. */
  --workshop-pin-segments: 3;
}

.workshop-content__pin-track {
  position: relative;
  /* Each segment buys ~100vh of scroll distance — generous, intentional
     pacing. Reduces to a single segment in the no-pin fallback below. */
  height: calc(var(--workshop-pin-segments) * 100vh);
}

.workshop-content__pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh accounts for mobile browser chrome (address bar). Falls back to vh. */
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned: by the time the pin-stage sticks, the heading has
     already scrolled past — content starts from the top of the viewport
     so the items column stays "stuck to the top" while the user scrolls
     through the toggle states. */
  justify-content: flex-start;
  gap: 50px;
  padding-block: 50px;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  overflow: hidden;
}

/* Fallback: viewports too short to comfortably pin (very short laptops,
   landscape phones) get the original stacked layout — every item open,
   media inline, no scroll-jacking. */
@media (max-height: 599px) {
  .workshop-content__pin-track {
    height: auto;
  }
  .workshop-content__pin-stage {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .workshop-item__body {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }
}

/* Heading is inside the pinned stage and stays at the top of the
   viewport while the pin is active. The pin-stage's padding provides
   the breathing room above; pin-stage gap provides the space between
   heading and the items row below. */
.workshop-content__heading {
  width: 485px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-recoleta);
  font-weight: 500; /* Recoleta Medium per Figma (was 600/SemiBold with Lora) */
  font-size: 40px;
  line-height: 1.275; /* matches the wrap rhythm at 40px */
  letter-spacing: -0.8px;
  text-align: center;
  color: var(--color-text);
}

.workshop-content__heading-gradient {
  background: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.workshop-content__row {
  display: flex;
  gap: 50px;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  overflow: hidden;
  box-sizing: border-box;
}

.workshop-content__items {
  display: flex;
  flex-direction: column;
  /* Tighter than the original 30px so the separator lines sit closer
     to the item header above/below them. Reduces vertical "air" inside
     the pin when an item is open with its body extended. */
  gap: 15px;
  width: 625px;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
}

/* Desktop media area is now a "stage" that holds 3 absolutely positioned
   slides. Slide N starts translated 100% below its container, then slides
   up (translateY(0)) once the active index reaches N. Slides are stacked
   in DOM order (slide 1 on top via z-index) so they cover the previous
   one as they slide up. */
.workshop-content__media-desktop {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  /* Use the same aspect ratio as the .dld-graphic inside (Figma frame
     545:345 ≈ 1.58). With this, the media column auto-sizes to a
     height that exactly fits the graphic — no more cropped pie when
     the items column is shorter than the graphic's natural height.
     The items column has its own justify-content: center, so when the
     row is now taller than the items' content, the items sit
     vertically centered within their column. */
  aspect-ratio: 545 / 345;
}

.workshop-content__media-slide {
  position: absolute;
  inset: 0;
  display: flex;
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}

/* z-index: slide 1 is below, slide 2 above slide 1, slide 3 above all.
   This way each new slide visually slides ON TOP of the previous one. */
.workshop-content__media-slide[data-workshop-slide="0"] { z-index: 1; }
.workshop-content__media-slide[data-workshop-slide="1"] { z-index: 2; }
.workshop-content__media-slide[data-workshop-slide="2"] { z-index: 3; }

.workshop-content__media-slide.is-revealed {
  transform: translateY(0);
}

.workshop-content__media-slide .workshop-media-placeholder {
  flex: 1;
  min-height: 0;
}

.workshop-media-placeholder {
  width: 100%;
  min-height: 345px;
  background: #622c2c; /* item 1 — dark red */
  border-radius: 10px;
}

/* Per-item placeholder colors so the user sees a clearly different image
   when the active item changes. Replace these with real images later.
   (Item 1 now uses .dld-graphic instead — see below.) */
.workshop-media-placeholder--2 { background: #2c5e62; } /* teal */
.workshop-media-placeholder--3 { background: #4a3c62; } /* purple */

/* ==========================================================================
   DLD Graphic — Punkt 1 ("Disziplin nicht das Problem")
   --------------------------------------------------------------------------
   Pixel-perfect port of Figma node 106:16. The container holds a teal pie
   chart in the middle, a topic pill at the top, and 4 "Punkt N: …" labels
   floating around the pie — three of them blurred (representing the OTHER
   factors that matter besides Disziplin), with Punkt 1 (Disziplin) sharp
   and prominent.
   Container has a fixed 552:380 aspect-ratio so all the percentage-based
   child positions reproduce Figma's layout exactly at any size. Used in
   two places (inline body media on Tablet/Mobile + Desktop media slide);
   one CSS rule covers both.
   ========================================================================== */
.dld-graphic {
  /* Becomes a container query root so every descendant can use cqi
     units that scale with the graphic's actual rendered width — the
     fonts, paddings, and badge sizes all shrink/grow proportionally
     when the graphic itself shrinks/grows across breakpoints. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 545 / 345;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

/* ----- Background pattern + radial fade overlay ----- */
/* Two stacked layers behind the pie/labels:
     1. A 15×15 grid texture at 5% opacity (just enough to feel like
        graph paper without competing with the content).
     2. A white radial gradient on top — transparent at the center,
        fully white at the edges — so the texture only reads in the
        middle and the corners stay clean white. */
.dld-graphic__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dld-graphic__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: url('Assets/DLD-Sektion/grid-pattern.png');
  background-size: 15px 15px;
  background-repeat: repeat;
  opacity: 0.05;
}

.dld-graphic__bg-fade {
  position: absolute;
  inset: 0;
  /* ellipse 75% × 45% at 50% 50% per Figma's matrix transform. */
  background: radial-gradient(
    ellipse 75% 45% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* ----- Pie chart ----- */
/* Centered in the container (50%/50% with translate -50%/-50%). The
   width is a percentage of the container, aspect-ratio: 1 keeps it
   circular regardless of the container's actual aspect. */
.dld-graphic__pie {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(215 / 545 * 100%);
  aspect-ratio: 1;
}

.dld-graphic__pie img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Floating labels (4 around the pie) ----- */
/* Each label is a teal-gradient pill containing a small white number
   badge + a label text. The teal gradient is at 95% opacity so the
   white container fades through ever so slightly. The label TEXT is
   white (clear on Punkt 1, blur(2px) on the others — a visual hint
   that Disziplin alone isn't the only factor that matters). */
.dld-graphic__label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 0.5px solid #ddd;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
  background: radial-gradient(
    ellipse 39.5% 100% at 50% 100%,
    rgba(55, 164, 202, 0.95) 0%,
    rgba(30, 132, 167, 0.95) 50%,
    rgba(17, 116, 149, 0.95) 75%,
    rgba(5, 100, 132, 0.95) 100%
  );
  overflow: hidden;
}

/* Number badge — a small white box with the gradient digit inside.
   The white background lives on the outer .dld-graphic__label-num so
   it paints below the digit; the actual gradient text lives on the
   nested <span> inside, with background-clip: text scoped to just the
   digit's glyph so the gradient doesn't fight the badge's bg. */
.dld-graphic__label-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: #ffffff;
  border-radius: 3px;
  font-family: var(--font-dm);
  font-weight: 600;
  /* 8px @ 545px container, scales proportionally with cqi, clamped so
     it stays readable on tiny mobile and doesn't grow huge on Desktop. */
  font-size: clamp(7px, 1.468cqi, 10px);
  letter-spacing: -0.16px;
  line-height: normal;
  font-variation-settings: 'opsz' 14;
  text-align: center;
  flex-shrink: 0;
}

.dld-graphic__label-num > span {
  background-image: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.dld-graphic__label-text {
  font-family: var(--font-dm);
  font-weight: 500;
  /* 10px @ 545px container, same proportional scaling logic. */
  font-size: clamp(8px, 1.835cqi, 12px);
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: #ffffff;
  font-variation-settings: 'opsz' 14;
}

/* The non-active labels (Punkt 2, 3, 4) blur their text — only the
   numbered position stays crisp so the user can still count them. */
.dld-graphic__label.is-blurred .dld-graphic__label-text {
  filter: blur(2px);
}

/* Per-position layout, all percentages of the 545×345 Figma frame so
   the graphic preserves its layout at any container size. */
.dld-graphic__label--top    { top: calc( 60 / 345 * 100%); left: calc(176 / 545 * 100%); }
.dld-graphic__label--left   { top: calc(140 / 345 * 100%); left: calc( 85 / 545 * 100%); }
.dld-graphic__label--bottom { top: calc(257 / 345 * 100%); left: calc(146 / 545 * 100%); }
.dld-graphic__label--right  { top: calc(125 / 345 * 100%); left: calc(318 / 545 * 100%); }

/* ==========================================================================
   Punkt-2 specific elements (.dld-graphic--ernaehrung)
   --------------------------------------------------------------------------
   Venn diagram with two overlapping circles ("ADHS-gerechtes Training" +
   "ADHS-gerechte Ernährung"), connector lines from the labels to the
   circles, a downward arrow, and 5 benefit pills below the circles.
   ========================================================================== */

/* ----- Venn circles ----- */
/* Two 177×177 circles with 1px dashed teal border, sized as a percentage
   of container width so they scale. The teal radial gradient at 50%
   opacity gives them their soft fill; the bg-color underneath is solid
   white (left) or 50% white (right) so where the circles overlap the
   left wedge shows through. */
.venn-circle {
  position: absolute;
  width: calc(177 / 545 * 100%);
  aspect-ratio: 1;
  top: calc(46 / 345 * 100%);
  border: 1px dashed var(--color-grad-from);
  border-radius: 50%;
  background-image: radial-gradient(
    ellipse 39.5% 100% at 50% 100%,
    rgba(55, 164, 202, 0.5) 0%,
    rgba(30, 132, 167, 0.5) 50%,
    rgba(17, 116, 149, 0.5) 75%,
    rgba(5, 100, 132, 0.5) 100%
  );
}

.venn-circle--left {
  /* Center at calc(50% - 65px), top calc(50% - 38px); translate -50% -50%.
     Top-left then sits at (50% - 65px - 88.5px, 50% - 38px - 88.5px)
     = (50% - 153.5/545, 46/345). Use direct top + computed left. */
  left: calc(50% - 153.5 / 545 * 100%);
  background-color: #ffffff;
}

.venn-circle--right {
  /* Mirror of left: center at calc(50% + 65px); top-left at
     (50% - 23.5/545*100%, 46/345*100%). Half-opaque white so the
     overlap area lets the left circle's content read through. */
  left: calc(50% - 23.5 / 545 * 100%);
  background-color: rgba(255, 255, 255, 0.5);
}

/* ----- "no number" label modifier (Punkt 2 ADHS labels) ----- */
/* The teal pill labels in Punkt 2 don't have a number badge — just
   white text on the teal gradient. Tighten padding accordingly. */
.dld-graphic__label--no-num {
  gap: 0;
  padding: 4px 10px;
}

/* ADHS label positions (top-left coords from Figma 545×345). */
.dld-graphic__label--training   { top: calc( 83 / 345 * 100%); left: calc( 58 / 545 * 100%); }
.dld-graphic__label--ernaehrung { top: calc(163 / 345 * 100%); left: calc(355 / 545 * 100%); }

/* ----- Connector lines ----- */
/* Each connector is an absolutely-positioned <img> rotated around its
   own center. left/top mark the CENTER of the line in the container;
   the translate -50%/-50% then aligns the element's center with that
   point. Width/height in cqi so the line scales proportionally. */
.dld-connector {
  position: absolute;
  pointer-events: none;
  display: block;
  /* Center the inner image. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dld-connector img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Training pill → left circle: 40.36 px line rotated 47.3° clockwise.
   Wrapper center at (193.68, 118.83) per the Figma rotation pivot. */
.dld-connector--training {
  left: calc(193.68 / 545 * 100%);
  top: calc(118.83 / 345 * 100%);
  width: calc(40.356 / 545 * 100cqi);
  height: calc(5.33 / 545 * 100cqi);
  transform: translate(-50%, -50%) rotate(47.3deg);
}

/* Ernährung pill → right circle: 35.51 px line rotated -122.35°.
   Wrapper center at (347.5, 149). */
.dld-connector--ernaehrung {
  left: calc(347.5 / 545 * 100%);
  top: calc(149 / 345 * 100%);
  width: calc(35.511 / 545 * 100cqi);
  height: calc(5.33 / 545 * 100cqi);
  transform: translate(-50%, -50%) rotate(-122.35deg);
}

/* Down arrow: 120 px line rotated -90° (becomes a vertical down-arrow
   with the gradient fading from the bottom toward the top). Wrapper
   center at (273, 195). */
.dld-connector--down {
  left: calc(273 / 545 * 100%);
  top: calc(195 / 345 * 100%);
  width: calc(120 / 545 * 100cqi);
  height: calc(5.7735 / 545 * 100cqi);
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* ----- Benefit pills (light blue, gradient text) ----- */
/* 5 small pills laid out in two rows below the venn circles. Each one
   is centered on its left coord via translateX(-50%). */
.dld-benefit {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  background: var(--color-bg-top); /* #e9f4ff */
  border-radius: 4px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.dld-benefit > span {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: clamp(8px, 1.835cqi, 12px);
  line-height: 1.55;
  letter-spacing: -0.2px;
  font-variation-settings: 'opsz' 14;
  background-image: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Per-pill positions: 3 pills in row 1 (top: 275/345), 2 in row 2
   (top: 301/345). Horizontal positions are offset from container
   center as in Figma. */
.dld-benefit--energie    { top: calc(275 / 345 * 100%); left: calc(50% - 161   / 545 * 100%); }
.dld-benefit--sport      { top: calc(301 / 345 * 100%); left: calc(50% -  81.5 / 545 * 100%); }
.dld-benefit--hunger     { top: calc(275 / 345 * 100%); left: calc(50% -  23   / 545 * 100%); }
.dld-benefit--ruhe       { top: calc(301 / 345 * 100%); left: calc(50% +  84.5 / 545 * 100%); }
.dld-benefit--zufrieden  { top: calc(275 / 345 * 100%); left: calc(50% + 138.5 / 545 * 100%); }

/* Wrapper around the 5 benefit pills. On Desktop/Tablet it's invisible
   (display: contents) — children retain their absolute positioning.
   The wrapper exists so the Mobile @media block below can convert it
   into a flex column without touching individual pill rules. */
.dld-graphic__benefits {
  display: contents;
}

/* ==========================================================================
   Punkt-3 specific elements (.dld-graphic--dopamin)
   --------------------------------------------------------------------------
   Dopamin-curve graphic: a 10-hour timeline (07:00–16:00 Uhr) along the
   bottom, two stacked SVG paths drawing the dopamine fluctuation through
   the day, and 3 small teal pills marking key moments (movement, lunch,
   pause). All positioning is percentage-based off the 545×345 Figma frame.
   ========================================================================== */

/* ----- Timeline labels ----- */
/* Flex row with 10 time labels, gap 10px, centered horizontally with a
   3.5px offset to match Figma's left calc(50% - 3.5px). The whole row
   uses cqi-based gap + font-size so it scales proportionally with the
   container. Inter Medium is used here (not DM Sans) per the Figma. */
.dld-timeline {
  position: absolute;
  top: calc(239 / 345 * 100%);
  left: 50%;
  transform: translate(calc(-50% - 3.5 / 545 * 100%), 0);
  display: flex;
  align-items: center;
  gap: calc(10 / 545 * 100cqi);
  font-family: 'Inter', var(--font-dm), system-ui, sans-serif;
  font-weight: 500;
  /* 8px @ 545px container, scales proportionally with cqi. */
  font-size: clamp(6px, 1.468cqi, 10px);
  line-height: 1.55;
  letter-spacing: -0.16px;
  color: #848484;
  white-space: nowrap;
  z-index: 1;
}

.dld-timeline > span { flex-shrink: 0; }

/* ----- Curve (two stacked SVG paths) ----- */
/* Bbox is 484.5×42.032 at (41.5, 153.97) in the 545×345 frame. The two
   inner layers extend slightly beyond that bbox (negative inset) per
   Figma — the glow layer extends 11.9% top/bottom + 1.03% left/right;
   the line layer extends ~1% top/bottom only. Both <img> children use
   preserveAspectRatio="none" so they stretch to fill their parent. */
.dld-curve {
  position: absolute;
  left: calc(41.5 / 545 * 100%);
  top: calc(153.97 / 345 * 100%);
  width: calc(484.5 / 545 * 100%);
  height: calc(42.032 / 345 * 100%);
  pointer-events: none;
  z-index: 1;
}

.dld-curve__layer {
  position: absolute;
}

.dld-curve__layer--glow {
  top: -11.9%;
  right: -1.03%;
  bottom: -11.9%;
  left: -1.03%;
}

.dld-curve__layer--line {
  top: -1.19%;
  right: 0;
  bottom: -0.98%;
  left: 0;
}

.dld-curve__layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* round line caps + stroke-width 10 spill outside viewBox */
}

/* pathLength="1" on the path normalises dasharray + dashoffset to 0..1 so
   we can animate "draw the line" without computing the actual path length.
   Initial state: full dashoffset = nothing visible. The animation rule
   (further down, scoped to the visibility-trigger classes) animates it
   back to 0, drawing the curve from start to end. */
.dld-curve svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ----- Activity pills ----- */
/* Smaller version of the Punkt-1 teal label: padding 2px 5px, rounded 3px,
   with a 4px white dot before the text. Same teal radial gradient at
   95% opacity (matches Figma's matrix transform). Font is Inter Medium
   8px white. The pill width is intrinsic so it follows the text. */
.dld-activity {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 / 545 * 100cqi);
  padding: calc(2 / 545 * 100cqi) calc(5 / 545 * 100cqi);
  border: 0.5px solid #ddd;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
  background: radial-gradient(
    ellipse 39.5% 100% at 50% 100%,
    rgba(55, 164, 202, 0.95) 0%,
    rgba(30, 132, 167, 0.95) 50%,
    rgba(17, 116, 149, 0.95) 75%,
    rgba(5, 100, 132, 0.95) 100%
  );
}

.dld-activity__dot {
  display: block;
  flex-shrink: 0;
  width: calc(4 / 545 * 100cqi);
  height: calc(4 / 545 * 100cqi);
  min-width: 2.5px;
  min-height: 2.5px;
  background: #ffffff;
  border-radius: 50%;
}

.dld-activity__text {
  font-family: 'Inter', var(--font-dm), system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(6px, 1.468cqi, 10px);
  line-height: 1.55;
  letter-spacing: -0.16px;
  color: #ffffff;
  flex-shrink: 0;
}

/* Per-pill positions: top-left coords from Figma's 545×345 frame. */
.dld-activity--bewegung { top: calc(147 / 345 * 100%); left: calc( 87 / 545 * 100%); }
.dld-activity--mittag   { top: calc(123 / 345 * 100%); left: calc(239 / 545 * 100%); }
.dld-activity--pause    { top: calc(129 / 345 * 100%); left: calc(415 / 545 * 100%); }

/* ==========================================================================
   DLD Graphics — entrance animations
   --------------------------------------------------------------------------
   Each graphic plays a short staged entrance the moment it becomes visible.
   Triggers are the visibility classes already managed by script.js:
     - Desktop  → .workshop-content__media-slide.is-revealed (slide is on
                  screen; slide 0 has it from page-load, slides 1+2 gain it
                  as the user scrolls past their threshold)
     - Tablet/  → .workshop-item.is-open (accordion item is expanded)
       Mobile
   Two parallel selectors per rule cover both contexts. The animations
   themselves are CSS-only — no JS. Re-entering a section replays them.
   ========================================================================== */

/* Initial state: every animatable element starts invisible, slightly
   offset; the keyframes below drift it back into place while fading in. */
.dld-graphic__pie,
.dld-graphic--disziplin .dld-graphic__label,
.dld-graphic--ernaehrung .venn-circle,
.dld-graphic--ernaehrung .dld-graphic__label,
.dld-graphic--ernaehrung .dld-connector,
.dld-graphic--ernaehrung .dld-benefit,
.dld-graphic--dopamin .dld-timeline,
.dld-graphic--dopamin .dld-activity {
  opacity: 0;
}

/* Soft fade-in. translate3d() forces GPU compositing so the animation
   stays smooth on weaker mobile hardware. */
@keyframes dld-fade-up {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}

/* The benefit pills + activity pills already use translateX(-50%) /
   translate(-50%, …) for centring, so a transform-based fade would fight
   their own positioning. Use a simpler opacity-only fade for those. */
@keyframes dld-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Stroke-draw for the dopamin-curve: pathLength=1 lets us animate
   dashoffset 1 → 0 to reveal the line from start to end. */
@keyframes dld-curve-draw {
  to { stroke-dashoffset: 0; }
}

/* ----- Punkt 1: pie + 4 labels staggered 1 → 4 ----- */
/* The pie uses translate(-50%, -50%) for centring, so a transform-based
   fade would knock it off-center. Use opacity-only fade for the pie. */
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--disziplin .dld-graphic__pie,
.workshop-item.is-visible.is-open .dld-graphic--disziplin .dld-graphic__pie {
  animation: dld-fade-in 0.5s ease-out forwards;
}

.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--disziplin .dld-graphic__label--top,
.workshop-item.is-visible.is-open .dld-graphic--disziplin .dld-graphic__label--top {
  animation: dld-fade-up 0.4s ease-out 0.30s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--disziplin .dld-graphic__label--left,
.workshop-item.is-visible.is-open .dld-graphic--disziplin .dld-graphic__label--left {
  animation: dld-fade-up 0.4s ease-out 0.60s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--disziplin .dld-graphic__label--bottom,
.workshop-item.is-visible.is-open .dld-graphic--disziplin .dld-graphic__label--bottom {
  animation: dld-fade-up 0.4s ease-out 0.90s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--disziplin .dld-graphic__label--right,
.workshop-item.is-visible.is-open .dld-graphic--disziplin .dld-graphic__label--right {
  animation: dld-fade-up 0.4s ease-out 1.20s forwards;
}

/* ----- Punkt 2: venn → ADHS labels → arrow → 5 benefits ----- */
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .venn-circle--left,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .venn-circle--left {
  animation: dld-fade-up 0.45s ease-out forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .venn-circle--right,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .venn-circle--right {
  animation: dld-fade-up 0.45s ease-out 0.20s forwards;
}

.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-graphic__label--training,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-graphic__label--training {
  animation: dld-fade-up 0.4s ease-out 0.45s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-graphic__label--ernaehrung,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-graphic__label--ernaehrung {
  animation: dld-fade-up 0.4s ease-out 0.65s forwards;
}

/* Connectors use a transform (translate -50% + rotate) for their angled
   positioning, so a transform-based fade would clobber the rotation.
   Use opacity-only fade for them. Timed slightly after their matching
   label so the line "draws" into place after the label appears. */
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-connector--training,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-connector--training {
  animation: dld-fade-in 0.4s ease-out 0.55s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-connector--ernaehrung,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-connector--ernaehrung {
  animation: dld-fade-in 0.4s ease-out 0.75s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-connector--down,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-connector--down {
  animation: dld-fade-in 0.4s ease-out 0.95s forwards;
}

.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-benefit--energie,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-benefit--energie {
  animation: dld-fade-in 0.35s ease-out 1.20s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-benefit--sport,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-benefit--sport {
  animation: dld-fade-in 0.35s ease-out 1.35s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-benefit--hunger,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-benefit--hunger {
  animation: dld-fade-in 0.35s ease-out 1.50s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-benefit--ruhe,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-benefit--ruhe {
  animation: dld-fade-in 0.35s ease-out 1.65s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--ernaehrung .dld-benefit--zufrieden,
.workshop-item.is-visible.is-open .dld-graphic--ernaehrung .dld-benefit--zufrieden {
  animation: dld-fade-in 0.35s ease-out 1.80s forwards;
}

/* ----- Punkt 3: timeline + curve draws + activity pills appear at point ----- */
/* Timeline labels fade in together at the start (faster, 0.4s), so the
   user sees the full hour scale before the curve traces over it. */
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--dopamin .dld-timeline,
.workshop-item.is-visible.is-open .dld-graphic--dopamin .dld-timeline {
  animation: dld-fade-in 0.4s ease-out forwards;
}

/* Curve "drawing": both layers (glow + line) animate dashoffset 1 → 0
   over 2s. They're locked in time with the activity-pill delays below
   (which match the curve's progress fraction at each pill's x-position). */
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--dopamin .dld-curve svg path,
.workshop-item.is-visible.is-open .dld-graphic--dopamin .dld-curve svg path {
  animation: dld-curve-draw 2s ease-out forwards;
}

/* Activity pills: each appears the moment the curve trace reaches its
   x-position. Curve spans 41.5 → 526 (484.5px) of the 545-wide frame.
   Pill x-positions and resulting timings (curve animates 0..2s):
     - Bewegung   left=87  → fraction (87-41.5)/484.5  = 9.4%  → ~0.19s
     - Mittagessen left=239 → fraction (239-41.5)/484.5 = 40.8% → ~0.82s
     - Pause      left=415 → fraction (415-41.5)/484.5 = 77.1% → ~1.54s
*/
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--dopamin .dld-activity--bewegung,
.workshop-item.is-visible.is-open .dld-graphic--dopamin .dld-activity--bewegung {
  animation: dld-fade-in 0.3s ease-out 0.20s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--dopamin .dld-activity--mittag,
.workshop-item.is-visible.is-open .dld-graphic--dopamin .dld-activity--mittag {
  animation: dld-fade-in 0.3s ease-out 0.85s forwards;
}
.workshop-content__media-desktop.is-visible .workshop-content__media-slide.is-revealed .dld-graphic--dopamin .dld-activity--pause,
.workshop-item.is-visible.is-open .dld-graphic--dopamin .dld-activity--pause {
  animation: dld-fade-in 0.3s ease-out 1.55s forwards;
}

/* Reduced motion: skip the entrance entirely — show everything at once. */
@media (prefers-reduced-motion: reduce) {
  .dld-graphic__pie,
  .dld-graphic--disziplin .dld-graphic__label,
  .dld-graphic--ernaehrung .venn-circle,
  .dld-graphic--ernaehrung .dld-graphic__label,
  .dld-graphic--ernaehrung .dld-connector,
  .dld-graphic--ernaehrung .dld-benefit,
  .dld-graphic--dopamin .dld-timeline,
  .dld-graphic--dopamin .dld-activity {
    opacity: 1;
    animation: none !important;
  }
  .dld-curve svg path {
    stroke-dashoffset: 0;
    animation: none !important;
  }
}

/* Separator lines — only shown on tablet/mobile (one-column layout) */
.workshop-content__separator {
  display: none;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--color-separator);
}

/* ---------- Single accordion item ---------- */

.workshop-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.workshop-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.workshop-item__title-line {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

/* Badge has two layers:
   - Outer pill: light-blue background + rounded-pill shape
   - Inner span: Lora SemiBold gradient text (clipped via background-clip: text) */
.workshop-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px 15px;
  background: var(--color-bg-top);
  border-radius: 35px;
  overflow: hidden;
}

.workshop-item__badge-text {
  /* Per Figma update: DLD badges now use DM Sans SemiBold (was Recoleta/Lora SemiBold) */
  font-family: var(--font-dm);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.28px;
  white-space: nowrap;
  background-image: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-variation-settings: 'opsz' 14;
}

.workshop-item__title {
  margin: 0;
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--color-text);
  white-space: nowrap;
}

.workshop-item__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 9px;
  color: var(--color-text);
}

.workshop-item__chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Chevron rotates smoothly when the item opens/closes */
.workshop-item__chevron svg path {
  transition: none;
}
.workshop-item__chevron {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.workshop-item.is-open .workshop-item__chevron {
  transform: rotate(180deg);
}

/* Body uses the grid-template-rows trick for smooth height animation:
   collapsed = 0fr, open = 1fr. The inner wrapper has overflow:hidden so
   content gets clipped during the transition. Pure CSS, no JS-managed
   max-height brittleness. */
.workshop-item__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 500ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 350ms ease;
}

.workshop-item__body-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  /* 20px breathing room above body content. Lives inside the clipped
     inner so the grid-rows transition animates this padding too — no
     sudden jump when the row opens. */
  padding-top: 20px;
}

.workshop-item.is-open .workshop-item__body {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Inline media — shown inside the open item on tablet/mobile only */
.workshop-item__media-inline {
  display: none;
  width: 100%;
}

.workshop-item__description {
  margin: 0;
  width: 445px;
  max-width: 100%;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.32px;
  color: var(--color-text-muted);
  font-variation-settings: 'opsz' 14;
}

/* ==========================================================================
   Persönliche Nachricht — Video section with teal-overlay-on-black background
   Figma: 49:532 (desktop), 53:719 (tablet), 53:1178 (mobile)
   ========================================================================== */

.personal-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  padding-block: 75px;
  padding-inline: var(--gutter);
  background:
    linear-gradient(rgba(5, 100, 132, 0.45), rgba(5, 100, 132, 0.45)),
    #000000;
}

.personal-message__heading {
  width: 470px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -2px;
  color: #ffffff;
  text-align: center;
}

.personal-message__video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 762px;
  height: 428px;
  max-width: 100%;
  background: #141414;
  border-radius: 20px;
  overflow: hidden;
}

/* Wistia player fills the .personal-message__video container exactly —
   the container drives the dimensions (fixed 762×428 / 535×300 / responsive
   16:9 on Mobile), so the player just stretches into the available box. */
.personal-message__video wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pre-load placeholder: until /player.js + /embed/<id>.js have registered
   the <wistia-player> custom element, :not(:defined) matches and we paint
   the Wistia swatch (a blurred poster frame served by Wistia's CDN). The
   parent's overflow:hidden + border-radius clips it to the rounded corners
   of the video card, so the user sees a soft preview instead of an empty
   black box on first paint. */
wistia-player[media-id='fpkw61e7u2']:not(:defined) {
  display: block;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat
    url('https://fast.wistia.com/embed/medias/fpkw61e7u2/swatch');
  filter: blur(5px);
}

/* ==========================================================================
   Qualifizierungs-Sektion — two-card "for / not for" comparison
   Figma: 49:537 (desktop), 53:724 (tablet), 53:1183 (mobile)
   ========================================================================== */

.qualification {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  padding-block: 75px;
  padding-inline: var(--gutter);
  /* Per Figma redesign: light bg (was teal-overlay-on-black) */
  background: var(--color-bg-bottom);
}

.qualification__heading {
  width: 455px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -2px;
  /* Per Figma redesign: black text on light bg (was white on dark bg) */
  color: var(--color-text);
  text-align: center;
}

/* "Für wen" gets the brand teal gradient — rest of heading stays black. */
.qualification__heading-gradient {
  background: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Two-card row (Desktop). Stacks to column on tablet/mobile. */
.qualification__cards {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
}

/* Per Figma redesign: card is now a transparent container that stacks
   a title-pill and a content-card with gap-15 between them.
   The pill and content-card each have their own bg + border-radius. */
.qualification-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
}

/* Title-pill — separate box with its own bg + rounded corners.
   Outer h3 = pill (bg + padding + radius). Inner span = text (color/gradient). */
.qualification-card__title {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 15px;
  /* The line-height applies to the inner text span; whitespace-nowrap keeps
     the title on one line. */
  white-space: nowrap;
}

.qualification-card--positive .qualification-card__title {
  background: #e9f4ff;
}

.qualification-card--negative .qualification-card__title {
  background: #ffe9e9;
}

.qualification-card__title-text {
  font-family: var(--font-recoleta);
  font-weight: 400; /* Recoleta Regular */
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: -0.64px;
  white-space: nowrap;
}

/* Positive title text uses the brand teal gradient. */
.qualification-card--positive .qualification-card__title-text {
  background-image: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Negative title text is plain red. */
.qualification-card--negative .qualification-card__title-text {
  color: red;
}

/* Content-card — the white box that holds the items. */
.qualification-card__list {
  display: flex;
  flex-direction: column;
  /* In Figma the list children are: item, separator (h-0), item, separator, item...
     all with gap-15 between siblings — so effective gap between two item texts
     is 30px (15 + 0 + 15). We collapse the separator into a ::before pseudo-element
     and compensate the gap directly. */
  gap: 30px;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
}

/* Both cards now hug their content — no fixed heights. */

.qualification-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 1px divider centered in the 30px gap above each non-first item */
.qualification-item + .qualification-item::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-separator);
}

.qualification-item__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}

.qualification-item__text {
  margin: 0;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.32px;
  color: var(--color-text);
  font-variation-settings: 'opsz' 14;
}

/* Per-item text wrap widths (matches Figma's auto-layout fixed widths
   per item, so line breaks land exactly where the design specifies).
   Desktop + Tablet share the same widths; Mobile overrides below. */
.qualification-card--positive .qualification-item:nth-child(1) .qualification-item__text { max-width: 408px; }
.qualification-card--positive .qualification-item:nth-child(2) .qualification-item__text { max-width: 440px; }
.qualification-card--positive .qualification-item:nth-child(3) .qualification-item__text { max-width: 345px; }
.qualification-card--positive .qualification-item:nth-child(4) .qualification-item__text { max-width: 400px; }

.qualification-card--negative .qualification-item:nth-child(1) .qualification-item__text { max-width: 366px; }
.qualification-card--negative .qualification-item:nth-child(2) .qualification-item__text { max-width: 355px; }
.qualification-card--negative .qualification-item:nth-child(3) .qualification-item__text { max-width: 425px; }

/* Per Figma redesign: both cards now have white content backgrounds, so
   both use the same light-gray separator color (was white for the negative
   card when it had a gray bg). The default rule above already does this —
   no override needed. */

/* ==========================================================================
   Last CTA — final conversion section, mirrors hero layout but centered
   Figma: 49:581 (desktop), 53:768 (tablet), 53:1227 (mobile)
   Reuses .live-badge, .cta-button, .capacity from hero.
   ========================================================================== */

.last-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 75px;
  padding-inline: var(--gutter);
  background: var(--color-bg-bottom);
  overflow: hidden;
  isolation: isolate;
}

.last-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.last-cta__bg-pattern {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.5;
}

.last-cta__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  width: 100%;
}

.last-cta__top {
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: center;
}

.last-cta__heading {
  width: 530px; /* per Figma update (was 585) */
  max-width: 100%;
  margin: 0;
  font-family: var(--font-recoleta);
  font-weight: 600;
  font-size: 48px;
  line-height: normal;
  letter-spacing: -0.96px;
  color: var(--color-text);
  text-align: center;
}

.last-cta__heading-gradient {
  background: linear-gradient(to right, var(--color-grad-from), var(--color-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.last-cta__subtitle {
  width: 612px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
  text-align: center;
  font-variation-settings: 'opsz' 14;
}

.last-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: 15px;
}

.last-cta__action-row {
  display: flex;
  /* Per Figma update: countdown is now stacked ABOVE the button on Desktop
     and Tablet (was side-by-side). HTML order is button-then-countdown for
     semantic priority, so column-reverse flips the visual order. */
  flex-direction: column-reverse;
  gap: 20px;
  align-items: center;
}

/* Override .cta-button width when used inside last-cta */
.last-cta__cta-button {
  width: 420px;
}

/* Override .capacity width when used inside last-cta (default is 100%) */
.last-cta .capacity {
  width: 420px;
}

/* Last CTA countdown — same vertical-stack layout as the topbar variant,
   but with white cells + black numbers (vs topbar's dark teal cells +
   white numbers). Sizes match the topbar countdown exactly. */
.last-cta__countdown {
  display: flex;
  align-items: stretch;
  gap: 5px;
  width: 100%;
}

.last-cta__countdown-cell {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0;
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
}

/* Same line-box trim trick as topbar countdown (see .countdown__num). */
.last-cta__countdown-num {
  font-family: var(--font-recoleta);
  font-weight: 500; /* Recoleta Medium */
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: #000000;
  margin-block: -0.15em;
}

.last-cta__countdown-unit {
  font-family: var(--font-dm);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  color: var(--color-text-muted);
  font-variation-settings: 'opsz' 14;
  margin-block: -0.15em;
}

/* ==========================================================================
   Footer — Impressum/Datenschutz links + copyright
   Figma: 49:623 (desktop), 53:810 (tablet), 53:1269 (mobile)
   Single row on all breakpoints; only horizontal padding shrinks on tablet/mobile.
   ========================================================================== */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 15px;
  padding-inline: var(--gutter);
  background: var(--color-bg-bottom);
  font-family: var(--font-dm);
  font-size: 10px;
  line-height: normal;
  letter-spacing: -0.2px;
  color: var(--color-text-muted);
  font-variation-settings: 'opsz' 14;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer__links a {
  font-weight: 400;
  color: inherit;
}

.footer__copy {
  margin: 0;
  font-weight: 500;
}

/* ==========================================================================
   Tablet — ≤ 1199px
   Figma: node 53:654
   ========================================================================== */

@media (max-width: 1199px) {

  /* Hide Hero's Maja photo + floating trust badges on tablet & mobile.
     The .header-picture section below the Hero re-introduces them with
     tablet/mobile-specific positioning. */
  .hero__maja,
  .hero .hero-badge {
    display: none;
  }

  /* Topbar: padding shrinks, plus tablet-specific layout — info section
     packs left, countdown stretches to fill remaining space (was justify-between
     with fixed-width countdown on desktop). Mobile re-overrides to a stacked column. */
  .topbar {
    padding: 15px;
  }

  .topbar__inner {
    justify-content: flex-start;
    gap: 25px;
  }

  .countdown {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
  }

  /* Container: switch from left-aligned to centered, smaller paddings */
  .hero {
    padding: 100px 25px 25px;
    align-items: center;
    gap: 50px;
  }

  .hero__bg-pattern--1 {
    content: url("Assets/Header-Sektion/background-pattern-tablet.png");
  }

  .hero__content {
    align-items: center;
    width: 100%;
  }

  .hero__text {
    align-items: center;
    gap: 35px;
  }

  /* Live badge — same structure, smaller font */
  .live-badge__label {
    font-size: 16px;
  }

  .live-badge__title {
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  /* Heading */
  .hero__heading {
    width: 548px;
    max-width: 100%;
    font-size: 40px;
    letter-spacing: -0.8px;
    text-align: center;
  }

  /* Subtitle */
  .hero__subtitle {
    width: 432px;
    max-width: 100%;
    font-size: 16px;
    text-align: center;
  }

  /* Hide the Hero press logos on tablet & mobile.
     The .header-picture section re-introduces them with tablet/mobile layout. */
  .hero .press {
    display: none;
  }

  /* DLD section: single-column layout on tablet (image moves inside the
     active item). Heading + items both pin together at the top of the
     viewport during the scroll-pinned section. */
  .workshop-content__pin-stage {
    padding: 30px 15px;
    gap: 30px;
  }

  /* Skip the slide-up reveal on the 3 workshop items on Tablet/Mobile.
     The items already animate via the scroll-pinned toggle (open/close
     bodies + chevron rotation), so the additional reveal-on-load fade
     adds visual noise without value. The Workshop heading keeps its
     reveal — only the items are stripped here. */
  .workshop-item.reveal {
    animation: none;
  }

  .workshop-content__row {
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }

  .workshop-content__items {
    width: 100%;
    max-width: 625px;
    gap: 15px;
  }

  .workshop-content__media-desktop {
    display: none;
  }

  .workshop-content__separator {
    display: block;
  }

  .workshop-item__media-inline {
    display: block;
  }

  .workshop-item__media-inline .workshop-media-placeholder {
    min-height: 310px;
  }

  /* When the section stacks (image below headline), the items column itself
     stays max 625px wide and is centered on the page (via .workshop-content__row
     align-items: center). Inside the column, all elements align flush on both
     left and right sides so the image, headers, and description form a clean
     block. The description gets stretched to full column width on tablet so it
     matches the image's width above it. */
  .workshop-item__description {
    width: 100%;
  }

  /* The desktop-default title has white-space: nowrap + 20px Recoleta, which
     overflows the 625px-wide items column at tablet widths and gets clipped
     by .workshop-content__pin-stage's overflow:hidden — so the user sees
     titles like "Sport & Ernährung als Werkzeuge für deinen Alltag" cut off
     mid-word. Allow wrapping (and let the title-line shrink the chevron's
     gap) so titles wrap onto a 2nd line cleanly when needed.
     Font size stays at 20px (slightly smaller than desktop's 20px would be
     "ein bisschen komprimiert" — Mobile drops further to 18px). */
  .workshop-item__title {
    white-space: normal;
    font-size: 19px;
    letter-spacing: -0.38px;
  }
  .workshop-item__title-line {
    flex: 1 1 auto;
    min-width: 0;
    gap: 15px;
  }
  .workshop-item__header {
    gap: 15px;
  }

  /* Persönliche Nachricht — narrower padding, smaller fixed video frame */
  .personal-message {
    padding: 75px 15px;
  }

  .personal-message__video {
    width: 535px;
    height: 300px;
    border-radius: 15px;
  }

  /* Qualifizierungs-Sektion — narrower padding, cards stack vertically */
  .qualification {
    padding: 75px 15px;
  }

  .qualification__cards {
    flex-direction: column;
    align-items: center;
  }

  .qualification-card {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Last CTA — narrower padding, smaller heading/subtitle, countdown stacks above button */
  .last-cta {
    padding: 75px 15px;
  }

  /* Use the tablet-optimized background pattern (curved lines positioned
     for the narrower viewport). Same content-url swap technique as the
     Hero section. */
  .last-cta__bg-pattern {
    content: url("Assets/Header-Sektion/background-pattern-tablet.png");
  }

  .last-cta__heading {
    width: 485px;
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .last-cta__subtitle {
    width: 446px;
    font-size: 16px;
  }

  /* Last CTA: tablet now shares Desktop's column-reverse + countdown style.
     Only width adjustments below — countdown style inherits from default. */

  /* Footer — symmetric 15px padding on all sides (vs 15/100 on desktop) */
  .footer {
    padding: 15px;
  }
}

/* ==========================================================================
   Mobile — ≤ 767px
   Figma: node 53:1111
   ========================================================================== */

@media (max-width: 767px) {

  /* Topbar: two-row stack (info row + countdown row); bg inherits #f8f9fd from default */
  .topbar {
    padding: 15px;
  }

  .topbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar__info {
    width: 100%;
    justify-content: space-between;
    gap: 5px;
  }

  .topbar__info-item {
    gap: 5px;
  }

  .topbar__dot {
    width: 6px;
    height: 6px;
  }

  .topbar__info-text {
    font-size: 12px;
  }

  /* Countdown on Mobile: same dark-cell layout as the new desktop default,
     just smaller fonts and tighter gap. */
  .countdown {
    width: 100%;
  }

  .countdown__cell {
    gap: 5px;
  }

  .countdown__num {
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .countdown__unit {
    font-size: 8px;
  }

  /* DLD section — tighter spacing + smaller heading on mobile. */
  .workshop-content__heading {
    width: 100%;
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .workshop-content__pin-stage {
    padding: 20px 15px;
    gap: 20px;
  }

  .workshop-content__row {
    padding: 10px 0;
  }

  .workshop-content__items {
    gap: 10px;
  }

  /* Punkt-2 graphic on Mobile: keep the Figma 3+2 layout AND the
     fixed 545:345 aspect-ratio. Just make the pills themselves
     smaller (smaller font + tighter padding) so the texts that
     overran the row at the default 8–12px font size now fit on
     phone-width containers with a real gap between them. */
  .dld-graphic--ernaehrung .dld-benefit {
    padding: 1px 4px;
  }

  .dld-graphic--ernaehrung .dld-benefit > span {
    font-size: 6px;
    letter-spacing: -0.12px;
  }

  .workshop-item__header {
    padding: 0 2px;
  }

  .workshop-item__title-line {
    flex: 1 0 0;
    min-width: 0;
    gap: 10px;
  }

  .workshop-item__badge-text {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .workshop-item__title {
    font-size: 18px;
    letter-spacing: -0.36px;
    white-space: normal;
  }

  /* Mobile titles wrap at specific widths per item (matches Figma exactly) */
  .workshop-item__title--1 { width: 215px; }
  .workshop-item__title--2 { width: 255px; }
  .workshop-item__title--3 { width: 190px; }

  .workshop-item__chevron {
    width: 12px;
    height: 6px;
  }

  .workshop-item__description {
    width: 100%;
    font-size: 13px;
    letter-spacing: -0.26px;
  }

  .workshop-item__media-inline .workshop-media-placeholder {
    min-height: 216px;
  }

  .workshop-content__separator {
    border-top-width: 0.25px;
  }

  .hero {
    padding: 50px 15px 25px;
    gap: 50px;
  }

  /* Mobile hero background per Figma: solid #f8f9fd (inherited from default now)
     plus pattern rendered TWICE at 251.25% width, opacity 0.75 each,
     with different left offsets so the two copies overlap into a denser pattern. */

  .hero__bg-pattern {
    width: 251.25%;
    height: 100%;
    object-fit: fill;
    opacity: 0.75;
  }

  .hero__bg-pattern--1 {
    content: url("Assets/Header-Sektion/background-pattern-mobile.png");
    inset: 0.11% auto auto -108.98%;
  }

  .hero__bg-pattern--2 {
    display: block;
    content: url("Assets/Header-Sektion/background-pattern-mobile.png");
    inset: 0.06% auto auto -30.96%;
  }

  .hero__text {
    gap: 30px;
  }

  /* Live badge — restructure to two rows */
  .live-badge {
    background: transparent;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border-radius: 0;
    white-space: normal;
  }

  .live-badge__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .live-badge__title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    max-width: 100%;
    padding: 10px 5px;
    background: #ffffff;
    border-radius: 35px;
  }

  /* Smaller pulse: 18 / 14 / 10 / 6 / 2 */
  .live-badge__pulse        { width: 18px; height: 18px; }
  .live-badge__pulse-ring1  { width: 14px; height: 14px; }
  .live-badge__pulse-ring2  { width: 10px; height: 10px; }
  .live-badge__pulse-ring3  { width: 6px;  height: 6px;  }
  .live-badge__pulse-core   { width: 2px;  height: 2px;  }

  .live-badge__label {
    font-size: 14px;
  }

  .live-badge__title {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  /* Heading */
  .hero__heading {
    width: 100%;
    font-size: 30px;
    letter-spacing: -0.6px;
    text-align: center;
  }

  /* Subtitle */
  .hero__subtitle {
    width: 325px;
    max-width: 100%;
    font-size: 13px;
    text-align: center;
  }

  /* CTA — full width, smaller paddings & radii */
  .cta {
    width: 100%;
  }

  /* Mobile cta-button: Figma uses identical wrapper paddings/radii to
     Desktop & Tablet (5px outer pad, 20px outer radius, 20px inner pad,
     15px inner radius) — so no overrides are needed for those. Only the
     text size shrinks. */
  .cta-button__text {
    font-size: 16px;
  }

  /* Capacity */
  .capacity__text {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .capacity__pill {
    width: 29px;
    height: 12px;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .capacity__bar {
    height: 2px;
  }

  /* Persönliche Nachricht — full-width video at 846:475 aspect, smaller heading */
  .personal-message {
    padding: 50px 15px 25px;
  }

  .personal-message__heading {
    width: 100%;
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .personal-message__video {
    width: 100%;
    height: auto;
    aspect-ratio: 846 / 475;
    border-radius: 10px;
  }

  /* Qualifizierungs-Sektion mobile per Figma redesign:
     - Heading w-335 (was 100%)
     - Title pill: smaller font (text-20), smaller radius (10)
     - Content card: smaller radius (10), no fixed height on negative
     - Item text 12px tracking -0.24
     - New per-item text wrap widths */
  .qualification {
    padding: 50px 15px;
  }

  .qualification__heading {
    width: 335px;
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .qualification-card__title {
    border-radius: 10px;
  }

  .qualification-card__title-text {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .qualification-card__list {
    border-radius: 10px;
  }

  .qualification-item__text {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  /* Mobile per-item text wrap widths */
  .qualification-card--positive .qualification-item:nth-child(1) .qualification-item__text { max-width: 235px; }
  .qualification-card--positive .qualification-item:nth-child(2) .qualification-item__text { max-width: 235px; }
  .qualification-card--positive .qualification-item:nth-child(3) .qualification-item__text { max-width: none; } /* fills remaining */
  .qualification-card--positive .qualification-item:nth-child(4) .qualification-item__text { max-width: none; } /* fills remaining */

  .qualification-card--negative .qualification-item:nth-child(1) .qualification-item__text { max-width: 280px; }
  .qualification-card--negative .qualification-item:nth-child(2) .qualification-item__text { max-width: 250px; }
  .qualification-card--negative .qualification-item:nth-child(3) .qualification-item__text { max-width: 215px; }

  /* Last CTA — smaller everything, full-width countdown + capacity, narrow button */
  .last-cta {
    padding: 50px 15px 25px;
  }

  /* Use the mobile-optimized background pattern (curved lines sized for
     phone viewports — the desktop image gets cropped at this width and
     the curves end up outside the visible area). */
  .last-cta__bg-pattern {
    content: url("Assets/Header-Sektion/background-pattern-mobile.png");
  }

  .last-cta__heading {
    width: 100%;
    font-size: 30px;
    letter-spacing: -0.6px;
  }

  .last-cta__subtitle {
    width: 100%;
    font-size: 13px;
  }

  .last-cta__action {
    width: 100%;
  }

  .last-cta__action-row {
    width: 100%;
  }

  .last-cta__cta-button {
    width: 360px;
    max-width: 100%;
  }

  /* Mobile last-cta countdown: same dark-cell layout as default,
     just smaller fonts and tighter cell gap. SemiBold weight is mobile-only. */
  .last-cta__countdown-cell {
    gap: 5px;
  }

  .last-cta__countdown-num {
    font-weight: 600; /* Recoleta SemiBold on mobile (vs Medium on desktop+tablet) */
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .last-cta__countdown-unit {
    font-size: 8px;
  }

  .last-cta .capacity {
    width: 100%;
  }
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Reveal — slide-up + fade in.
   - All .reveal elements run a 700ms keyframe animation with a per-element
     delay (set via inline `style="--reveal-delay: Xms"`).
   - .reveal--initial runs on page load (Hero + Topbar).
   - .reveal (without --initial) starts paused and is unpaused by JS when
     the element scrolls into view (.is-visible).
   - animation-fill-mode: backwards keeps the "from" state visible during
     the delay, so elements stay hidden+offset until their delay elapses.
     We don't use forwards/both so that other transforms (e.g. .cta-button's
     hover scale) can take over after the animation finishes.
   - Reduced-motion users skip the animation entirely. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal-slide-up 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
  }

  /* Variant that slides DOWN from above instead of up from below.
     Used for the top navigation bar so it appears to drop in from above. */
  .reveal--from-top {
    animation-name: reveal-slide-down;
  }

  .reveal:not(.reveal--initial) {
    animation-play-state: paused;
  }

  .reveal:not(.reveal--initial).is-visible {
    animation-play-state: running;
  }
}

@keyframes reveal-slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-slide-down {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Capacity bar fill — grows from left to right with a strong ease-out
   (fast start, slow finish), simulating the bar "loading up" to its current
   value. Syncs with the parent .capacity's --reveal-delay so the bar starts
   filling as the capacity element slides into view. transform-origin: left
   makes scaleX grow from the left edge. transform/scaleX is GPU-accelerated
   (no layout thrashing) so it stays smooth across all breakpoints.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .capacity__bar-fill {
    transform-origin: left;
    /* Fill starts 500ms AFTER the capacity element begins its reveal — gives
       the bar a moment to settle into view before it starts loading.
       Duration 3500ms for a slow, deliberate fill (matches the countdown). */
    animation: capacity-fill 3500ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms) + 500ms) backwards;
  }

  /* If the parent .capacity is a scroll-triggered reveal (Last CTA),
     pause the fill animation until JS adds .is-visible. Hero capacity
     uses .reveal--initial so it animates immediately on page load. */
  .reveal:not(.reveal--initial) .capacity__bar-fill {
    animation-play-state: paused;
  }

  .reveal:not(.reveal--initial).is-visible .capacity__bar-fill {
    animation-play-state: running;
  }
}

@keyframes capacity-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   Live badge pulse — gentle "heartbeat" loop on the red dot and its
   semi-transparent halo ring. Symbolizes the "live" status of the workshop.
   Applies to every .live-badge on the page (Hero + Last CTA) at every
   breakpoint; CSS animations are paused entirely for reduced-motion users.
   The core scales slightly more visually because it inherits its parent
   ring's scale (1.25 × 1.25 ≈ 1.56) — gives a layered "echo" feel.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .live-badge__pulse-ring3,
  .live-badge__pulse-core {
    animation: live-pulse 3000ms ease-in-out infinite;
  }
}

@keyframes live-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}

/* ==========================================================================
   CTA button continuous pulse — the entire button (outer teal frame + inner
   gradient body) breathes 1 → 1.03 → 1 in a slow loop, with an asymmetric
   keyframe (peak at 35% of the cycle) so the grow phase feels brisk and the
   shrink phase relaxes back. Different rhythm than the live-badge pulse so
   the two animations on the page don't beat together visually.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Outer frame pulse — full cycle of 2400ms with a brief 288ms "hold" at
     scale(1). The hold (0-12% of cycle) gives the button a moment of rest
     at its small state before the next pulse. Ease-in-out on entry/exit of
     the hold keeps the deceleration + acceleration smooth. Removed the
     earlier `alternate` direction because we need an asymmetric cycle
     (longer time at small than at peak). */
  .cta-button {
    animation: cta-button-pulse 2400ms ease-in-out infinite;
  }

  /* Inner button + bg pulse together, lagged 200ms behind the outer frame
     so the inner appears to follow the outer's motion slightly. Both use
     the same hold-at-small keyframe pattern. */
  .cta-button__inner {
    animation:
      cta-button-inner-pulse 2400ms ease-in-out 200ms infinite,
      cta-button-bg-pulse 2400ms ease-in-out 200ms infinite;
  }

  /* Arrow icon "flow" animation — the arrow rests at the right edge of the
     button for most of the cycle, then slides right + fades out, instantly
     teleports back to the left (while invisible), and fades in while sliding
     to its rest position. Creates a continuous "arrow flowing right" feel
     rather than a back-and-forth nudge. The translate is in the FIRST
     position of the transform shorthand so it's applied AFTER the rotate(90)
     in screen-space coords (otherwise the slide direction would rotate too).*/
  .cta-button__arrow {
    animation: cta-button-arrow-flow 2200ms ease-in-out infinite;
  }
}

/* Asymmetric keyframes with a brief hold at the SMALL state:
   0%–12% = held at scale(1) for ~288ms (a small "breath" pause),
   12%–56% = smoothly grow to peak,
   56%–100% = smoothly fall back to scale(1).
   Because ease-in-out shapes both sides, the hold reads as a soft
   pause-and-reverse rather than a hard stop. There's no symmetric hold
   at peak — the button only "rests" in the small state. */
@keyframes cta-button-pulse {
  0%, 12% { transform: scale(1); }
  56%     { transform: scale(1.03); }
  100%    { transform: scale(1); }
}

@keyframes cta-button-inner-pulse {
  0%, 12% { transform: scale(1); }
  56%     { transform: scale(1.015); }
  100%    { transform: scale(1); }
}

/* Pulses the radial-gradient highlights (light cyan halo + white bottom
   glow) by enlarging the gradient canvas via background-size. At 100%
   the canvas is exactly the inner button; at 115% it's 15% larger and
   the same percentage-based ellipses inside it grow proportionally —
   so the visible "light blue" area expands and contracts in step with
   the inner button's scale animation. Same asymmetric hold-at-small as
   the scale pulses so the highlight breathes in lockstep. */
@keyframes cta-button-bg-pulse {
  0%, 12% { background-size: 100% 100%; }
  56%     { background-size: 115% 115%; }
  100%    { background-size: 100% 100%; }
}

@keyframes cta-button-arrow-flow {
  /* The new arrow icon is rendered already pointing right, so the keyframe
     transform is just a translate (no more rotate(90deg) compensating for
     a natively-up icon). */
  /* Idle at center — visible, rest position */
  0%,
  35% {
    transform: translate(0, 0);
    opacity: 1;
  }
  /* Slide right + fade out */
  55% {
    transform: translate(10px, 0);
    opacity: 0;
  }
  /* Teleport to the left while invisible (no transition between this stop
     and the previous because opacity is 0 at both — user doesn't see the
     jump). The 55.01% trick lets the very next keyframe interpolate from
     the new "behind the text" position. */
  55.01% {
    transform: translate(-10px, 0);
    opacity: 0;
  }
  /* Fade in + slide back to rest */
  75% {
    transform: translate(0, 0);
    opacity: 1;
  }
  /* Idle at center for the remainder of the cycle */
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* ==========================================================================
   Press logos — infinite right-to-left marquee
   The list children are duplicated by JS (script.js), then a CSS animation
   translates the row -50% over ~40 seconds for a seamless loop.
   ========================================================================== */

.press__track {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  /* Soft fade-out at the left and right edges so logos appear/disappear
     gradually instead of popping at the container edges. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.press__logos {
  /* Override the previous fixed-width spread layout — this is now a
     continuous row that can be wider than the viewport. */
  display: flex;
  align-items: center;
  gap: 41px;
  width: max-content;
  justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {
  .press__logos {
    animation: press-marquee 40s linear infinite;
  }
}

/* Marquee runs continuously — no hover pause (per design spec). */

@keyframes press-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* The logo row contains the original items + their JS-cloned duplicates,
       so translating exactly -50% lands on the start of the duplicate set,
       which is identical to the start of the originals — perfect loop. */
    transform: translateX(-50%);
  }
}

/* Reduced motion: undo the marquee + masking so the original layout works. */
@media (prefers-reduced-motion: reduce) {
  .press__track {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .press__logos {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
}

/* ==========================================================================
   Header-Picture section — Tablet + Mobile only
   On Desktop the Maja photo + trust badges + press logos live inside the Hero.
   On smaller breakpoints the Hero would feel too cramped, so this dedicated
   section sits below the Hero and hosts those elements at appropriate sizes.
   ========================================================================== */

/* Hidden on Desktop — only revealed by the tablet media query below. */
.header-picture {
  display: none;
}

@media (max-width: 1199px) {
  .header-picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-block: 25px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-bottom);
    /* Section is at least Maja's height — press logos sit at the bottom and
       overlap Maja's faded-to-bg area, matching Figma. */
    min-height: 521px;
  }

  /* Background layer — solid color + decorative pattern image at low opacity */
  .header-picture__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
  }

  .header-picture__bg-pattern {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0.5;
  }

  /* Tablet uses one pattern image; mobile overlays two (see mobile block) */
  .header-picture__bg-pattern--2 {
    display: none;
  }

  /* Maja photo container (Tablet defaults — Mobile overrides below) */
  .header-picture__maja {
    position: absolute;
    top: 0;
    left: 0;
    width: 768px;
    height: 521px;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    z-index: -1;
  }

  .header-picture__maja-photo {
    position: absolute;
    /* Per Figma: the image is sized larger than its container so only a
       cropped portion of Maja's body shows through. The percentages keep
       the native aspect ratio (2730×4096 ≈ 0.667). */
    left: -11.33%;
    top: -17.91%;
    width: 122.65%;
    height: 271.45%;
    max-width: none;
    display: block;
  }

  /* Progressive blur overlay — same approach as the desktop hero:
     blur is 0 above Maja's shoulder line and ramps up to 15px at the bottom. */
  .header-picture__maja-blur {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      black 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      black 100%
    );
  }

  /* Bottom fade so Maja dissolves into the section bg color, leaving the
     press logos area at the bottom on a clean #f8f9fd background. */
  .header-picture__maja-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(248, 249, 253, 0) 55%,
      rgba(248, 249, 253, 1) 99.79%
    );
    pointer-events: none;
  }

  /* ---- Trust badges (re-using .hero-badge base styling) ---- */

  /* Re-allow .hero-badge inside header-picture (it's hidden globally on
     tablet/mobile via the .hero .hero-badge rule earlier — that selector
     doesn't match here so this override isn't strictly needed, but it makes
     intent explicit). */
  .header-picture .hero-badge {
    display: inline-flex;
    /* Tablet/Mobile badges use a tighter gap than desktop's 10px */
    gap: 5px;
  }

  /* Smaller emoji + icon + text than desktop hero badges */
  .header-picture .hero-badge__emoji {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .header-picture .hero-badge__icon {
    width: 20px;
    height: 20px;
  }

  .header-picture .hero-badge__text {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  /* Per-badge positioning (Tablet) */
  .hero-badge--hp-adhs {
    top: 154px;
    left: 87px;
    /* Sits behind Maja's photo (same z-index as bg patterns + Maja, but
       earlier in DOM so paint order is bg-pattern → ADHS → Maja → content). */
    z-index: -1;
  }

  .hero-badge--hp-sportwiss {
    top: 267px;
    left: 415px;
  }

  /* ---- Press logos in header-picture: vertical layout (label above logos) ---- */

  .header-picture .press {
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }

  /* Label is black on tablet/mobile (Hero desktop has muted gray label) */
  .header-picture .press__label {
    color: var(--color-text);
  }

  /* Track fills available width up to 850px (Figma's reference width) */
  .header-picture .press__track {
    flex: 0 0 auto;
    width: 100%;
    max-width: 850px;
  }
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
  .header-picture {
    /* Match Maja's mobile height */
    min-height: 555px;
  }

  /* Mobile background uses two overlapping pattern images at higher opacity
     to create a denser pattern, matching Figma. */
  .header-picture__bg-pattern {
    opacity: 0.75;
    width: 242.51%;
    height: 100%;
    object-fit: fill;
  }

  .header-picture__bg-pattern--1 {
    inset: 0 auto auto -110.23%;
  }

  .header-picture__bg-pattern--2 {
    display: block;
    width: 251.25%;
    inset: 0.13% auto auto -39.6%;
  }

  /* Maja photo: shifted left and slightly larger than viewport — the
     overflow:hidden section crops the right portion. */
  .header-picture__maja {
    top: 0;
    left: -106px;
    width: 647px;
    height: 555px;
  }

  .header-picture__maja-photo {
    left: -11.33%;
    top: -11.28%;
    width: 122.65%;
    height: 214.72%;
  }

  /* Smaller badges per Figma mobile (text-10, padding-7) */
  .header-picture .hero-badge {
    padding: 7px;
  }

  .header-picture .hero-badge__emoji {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .header-picture .hero-badge__icon {
    width: 14px;
    height: 14px;
  }

  .header-picture .hero-badge__text {
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  /* Mobile badge positions */
  .hero-badge--hp-adhs {
    top: 109px;
    left: 6px;
  }

  .hero-badge--hp-sportwiss {
    top: 233px;
    left: 218px;
  }
}

/* ==========================================================================
   Sign-Up Form Modal
   ==========================================================================
   Triggered by any [data-signup-trigger] element. The whole component is
   `position: fixed` and overlays the entire viewport. While open:
     - body gets .signup-modal-open (locks scroll)
     - the dialog gets .is-open (fade + scale-in transition)
     - the backdrop blurs the page behind it (backdrop-filter)

   The CTA + capacity inside the form reuse the global .cta-button and
   .capacity styles, so they look identical to the page CTAs.
   The capacity bar inside the modal uses a static fill (no animation —
   it sits at full width), separate from the scroll-triggered fill on
   the Hero/Last CTA bars.
   ========================================================================== */

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Hidden by default. JS removes [hidden] then on next frame adds .is-open
     so the transition runs. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.signup-modal[hidden] {
  display: none !important;
}

.signup-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.signup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  /* Blur the page content behind the backdrop. WebKit prefix kept for
     older Safari. The dialog is z-indexed above the backdrop so its
     own filter doesn't pick up the blur. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.signup-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 550px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--color-bg-bottom); /* #f8f9fd */
  border-radius: 15px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  /* Scale-in on open. Translate kept tiny so the form doesn't jump. */
  transform: scale(0.96) translateY(8px);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.signup-modal.is-open .signup-modal__dialog {
  transform: scale(1) translateY(0);
}

/* Close button — absolutely positioned in the top-right of the dialog.
   The icon is a self-contained SVG (red radial gradient circle + white X). */
.signup-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.signup-modal__close:hover {
  transform: scale(1.08);
}

.signup-modal__close:active {
  transform: scale(0.95);
}

.signup-modal__close-icon {
  width: 100%;
  height: 100%;
  display: block;
  /* Strokes use currentColor — black by default. */
  color: #000000;
}

/* ----------- Form ----------- */

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 20px;
}

/* Light-blue header strip with the title. Same color as Hero/Topbar bg
   so the modal feels connected to the brand. */
.signup-form__header {
  background: var(--color-bg-top); /* #e9f4ff */
  padding: 35px 20px 20px; /* extra top padding so title clears the close button */
  display: flex;
  justify-content: center;
}

.signup-form__title {
  margin: 0;
  max-width: 245px;
  font-family: var(--font-recoleta);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -1.2px;
  color: var(--color-text);
  text-align: center;
}

.signup-form__title-accent {
  background: linear-gradient(90deg, var(--color-grad-from) 0%, var(--color-grad-to) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.signup-form__body {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 20px;
}

.signup-form__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-form__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Override the page CTA button's outer padding/radius to match the
   tighter form CTA from Figma (50px tall, 10px radius, no hover halo). */
.signup-form__cta {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.signup-form__cta .cta-button__inner {
  height: 50px;
  padding: 0 30px;
  border-radius: 10px;
  gap: 15px;
  justify-content: center;
}

.signup-form__cta .cta-button__text {
  font-size: 16px;
  letter-spacing: -0.32px;
}

.signup-form__cta .cta-button__arrow {
  /* Slightly smaller than the page CTA's 18×15 to match the more compact
     50px-tall modal button. Same 1.27:1 aspect ratio as the new SVG. */
  width: 16px;
  height: 12.6px;
}

/* The page CTAs scale-pulse to draw attention. Inside the modal that
   would feel pushy — the user has already committed by opening the form.
   So we strip the outer & inner scale animations but KEEP:
     - the bg-pulse (light cyan halo grows/shrinks → subtle shimmer)
     - the arrow flow (slides right + reappears from left)
   Removing the 200ms delay too — without the scale lag there's no reason
   for it. */
.signup-form__cta {
  animation: none !important;
}

.signup-form__cta .cta-button__inner {
  animation: cta-button-bg-pulse 2400ms ease-in-out infinite !important;
}

/* Capacity row inside the modal: smaller text + inline mini bar.
   The bar here is non-animated (sits at ~70% to match the Figma "Nur noch 26
   verfügbar" visual). The Hero/Last CTA versions still animate via the
   .reveal-triggered keyframe — they don't share this static rule. */
.signup-form__capacity {
  width: 295px;
  max-width: 100%;
  padding: 0;
  gap: 10px;
}

.signup-form__capacity .capacity__bar {
  height: 4px;
  padding-right: 0;
}

.signup-form__capacity .capacity__bar-fill {
  /* Static partial fill — no animation in the modal. ~85% reads as
     "almost full, only a few seats left". */
  width: 85%;
  animation: none !important;
  transform: none !important;
}

/* ----------- Input fields ----------- */

.signup-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.signup-field__label {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: -0.6px;
  color: var(--color-text);
  font-variation-settings: 'opsz' 14;
}

/* The "input wrapper" that holds the icon + the actual <input>. The
   input itself is borderless — the wrapper provides the border + bg. */
.signup-field__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: #fbfbfb;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signup-field__input:focus-within {
  border-color: var(--color-grad-to);
  box-shadow: 0 0 0 3px rgba(5, 100, 132, 0.12);
}

.signup-field--invalid .signup-field__input {
  border-color: #c60000;
  box-shadow: 0 0 0 3px rgba(198, 0, 0, 0.10);
}

.signup-field__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  /* Tint the colored PNGs to the muted gray Figma uses — works because
     the source images are dark; the filter chain forces them to #c7c7c7. */
  filter: brightness(0) invert(0.78);
  pointer-events: none;
}

.signup-field__control {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--color-text);
  font-variation-settings: 'opsz' 14;
}

.signup-field__control::placeholder {
  color: #c7c7c7;
  font-family: var(--font-dm);
  font-weight: 500;
  /* Native browser behavior already hides the placeholder once the user
     starts typing — no JS needed. */
}

.signup-field__error {
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #c60000;
  margin-top: 2px;
}

.signup-field__error[hidden] {
  display: none;
}

/* Honeypot — hidden from real humans (off-screen), but bots auto-fill it
   and Netlify drops those submissions silently. We use absolute positioning
   instead of display:none because some bots specifically skip hidden fields. */
.signup-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* Error banner shown when both submission endpoints fail (rare). */
.signup-form__error-banner {
  margin: 0;
  padding: 10px 12px;
  background: rgba(198, 0, 0, 0.08);
  border: 1px solid rgba(198, 0, 0, 0.25);
  border-radius: 8px;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: #c60000;
  text-align: center;
}

.signup-form__error-banner[hidden] {
  display: none;
}

/* Submitting state — disable the CTA and dim it. */
.signup-form.is-submitting .signup-form__cta {
  opacity: 0.7;
  pointer-events: none;
}

/* (Success state removed — submitting the form now redirects to the
   dedicated thank-you / survey page instead of showing an inline
   confirmation. See the SURVEY_URL constant in script.js.) */

/* Lock body scroll while the modal is open. JS adds the class. */
body.signup-modal-open {
  overflow: hidden;
}

/* ----- Tablet ----- */
@media (max-width: 1199px) {
  .signup-modal {
    padding: 20px;
  }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .signup-modal {
    padding: 15px;
  }

  .signup-modal__dialog {
    max-width: 370px;
    border-radius: 15px;
  }

  .signup-form {
    gap: 30px;
    padding-bottom: 15px;
  }

  .signup-form__header {
    padding: 35px 15px 15px;
  }

  .signup-form__body {
    padding: 0 15px;
    gap: 25px;
  }

  .signup-form__cta-wrap {
    gap: 10px;
  }

  .signup-field__label {
    font-size: 10px;
    letter-spacing: -0.5px;
  }

  .signup-field__input {
    padding: 12px 10px;
  }

  .signup-field__control {
    font-size: 12px;
  }

  .signup-form__cta .cta-button__text {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .signup-form__cta .cta-button__arrow {
    width: 14px;
    height: 11px;
  }

  .signup-form__capacity {
    width: 245px;
  }

  /* Smaller pill on mobile to match Figma's tighter capacity row. */
  .signup-form__capacity .capacity__text {
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .signup-form__capacity .capacity__pill {
    width: 22px;
    height: 12px;
    font-size: 8px;
    border-radius: 3px;
    letter-spacing: -0.16px;
  }

  .signup-modal__close {
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
  }
}

/* Honor reduced-motion: skip the scale/translate transition. */
@media (prefers-reduced-motion: reduce) {
  .signup-modal,
  .signup-modal__dialog {
    transition: none;
  }
}

/* ==========================================================================
   Sticky CTA
   --------------------------------------------------------------------------
   Floating CTA that wraps the same .cta-button + .capacity used elsewhere.
   Position fixed at the bottom of the viewport — appears once the user
   scrolls into the trigger section (varies by breakpoint, see script.js)
   and hides again when the Last CTA section comes into view.
     - Desktop (≥1200px): bottom-center, 15px gap from edges
     - Tablet  (≤1199px): bottom-right, 15px gap from edges
     - Mobile  (≤767px):  flush to the bottom edge, full-width, no
                          rounded corners (no margins to the page edges)
   White card background with soft shadow on Desktop/Tablet; flat top
   bar on Mobile.
   ========================================================================== */

.sticky-cta {
  position: fixed;
  z-index: 100;
  /* Card styling for Desktop + Tablet; Mobile overrides below. */
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Width is 420px (matching the Last CTA's button) and never wider
     than the viewport minus 30px (15px each side). */
  width: 420px;
  max-width: calc(100% - 30px);

  /* Hidden initial state — JS adds .is-visible to fade + slide in. */
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Desktop + Tablet: bottom-RIGHT corner with 15px gap from edges. */
  bottom: 15px;
  right: 15px;
  transform: translateY(24px);
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Tighter capacity row inside the sticky than the Hero version
   (which has 50px horizontal padding for breathing room — too wide
   for a 420px floating card). */
.sticky-cta .capacity {
  width: 100%;
  padding: 5px 15px;
}

/* The capacity bar's default state across the page is scaleX(0)
   (waits for a .reveal trigger to fill). The sticky CTA isn't inside
   any .reveal element, so we force it to render fully filled. */
.sticky-cta .capacity__bar-fill {
  transform: scaleX(1);
  animation: none;
}

/* Mobile: full-width bar pinned to the bottom edge. No rounded
   corners (would float oddly when flush to edges), no horizontal
   margins. Slides up from fully off-screen. */
@media (max-width: 767px) {
  .sticky-cta {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: 10px 15px 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
  }
  .sticky-cta.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta.is-visible {
    transition: opacity 200ms ease;
    transform: none;
  }
}