/* ══════════════════════════════════════════════════════════════════
   HERO — 1:1 nach Figma "Verlauf" (Frame 1920 × 1080, node 12:2)

   --ak-u ist 1 Design-Pixel: 1vw, also exakt 19.2 px auf 1920er Breite.
   Die Faktoren sind glatte Brüche, damit die Schriftgrößen dort exakt
   den Figma-Werten entsprechen (H1 64, Eyebrow/Sub 30, CTA 24, Trust 20).
   Der 2.35vh-Deckel greift erst unterhalb von ~817 px Fensterhöhe und
   verhindert dort, dass Textblock und CTA kollidieren.
   ══════════════════════════════════════════════════════════════════ */
.ak-hero-shell {
  --ak-u: clamp(11px, min(1vw, 2.35vh), 22px);
  position: relative;
}

.ak-hero {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-h, 60px));
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  /* Figma-Verlauf 170.216°, #D3D6FF 6.84% → transparentes #F5B798 96.86%.
     Figma interpoliert gerade, CSS vorMultipliziert – deshalb sind die
     Stops hier bereits über Weiß ausgerechnet und deckend (Δ ≤ 1/255). */
  background: linear-gradient(
    170.216deg,
    rgb(211, 214, 255) 6.84%,
    rgb(225, 217, 239) 24.84%,
    rgb(237, 223, 230) 42.85%,
    rgb(246, 231, 230) 60.85%,
    rgb(252, 242, 239) 78.86%,
    rgb(255, 255, 255) 96.86%
  );
}

.ak-hero picture { display: contents; }

/* Freigestelltes Motiv – unten/rechts bündig wie im Design */
.ak-hero-img {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  /* Bildkante ragt 16/1080 unter den Rahmen – exakt wie im Figma-Frame.
     max-height deckelt den Zoom auf sehr breiten Screens, damit der Kopf
     nie oben abgeschnitten wird. */
  max-height: 112%;
  object-fit: contain;
  object-position: right bottom;
  transform: translateY(1.48%);
}

/* Ellipse 34: #FDE7CB, r 705, Gaussian Blur σ 400 – liegt über dem Motiv */
.ak-hero-glow {
  position: absolute;
  z-index: 2;
  left: -48.97%;
  top: -2.51%;
  width: 156.74%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  pointer-events: none;
}

.ak-hero-content {
  position: absolute;
  z-index: 3;
  left: var(--ak-gutter);
  top: 20.3%;
  max-width: 62%;
}

.ak-hero-eyebrow {
  margin: 0 0 calc(0.21 * var(--ak-u)) 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.ak-hero-title {
  margin: 0 0 calc(0.5 * var(--ak-u)) 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 10 / 3) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

/* Jeder Satz eine Zeile – wie im Design, unabhängig von Font-Metriken */
.ak-hero-title span { display: block; }

.ak-hero-sub {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 15.24em;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

/* CTA-Pille 455 × 77, Radius voll, Pfeil-Kreis 56.93 – im Design mehrfach
   verwendet (Hero, App-Sektion). Alle Maße relativ zur eigenen Schriftgröße,
   die Sektion setzt nur --ak-u und die Position. */
.ak-cta-pill {
  --pill-min-w: 18.96em;   /* 455/24 */
  --pill-h: 3.21em;        /* 77/24 */
  --pill-pl: 1.71em;       /* 41/24 */
  --pill-pr: 0.42em;
  --pill-arrow: 2.37em;    /* 56.93/24 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  min-width: var(--pill-min-w);
  height: var(--pill-h);
  padding: 0 var(--pill-pr) 0 var(--pill-pl);
  border-radius: 999px;
  background: #000;
  text-decoration: none;
  font-size: calc(var(--ak-u) * 5 / 4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-cta-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.ak-cta-pill__label {
  font-family: var(--font-sans);
  font-size: 1em !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  white-space: nowrap;
}
.ak-slide__cta-label--mobile { display: none; }
.ak-cta-pill__arrow {
  flex-shrink: 0;
  width: var(--pill-arrow);
  height: var(--pill-arrow);
  max-width: none;
  margin-left: auto;
}

/* Kleine Variante 430 × 55 bei 20px Schrift (node 63:485) */
.ak-cta-pill--sm {
  --pill-min-w: 21.5em;
  --pill-h: 2.75em;
  --pill-pl: 2.05em;
  --pill-pr: 0.5em;
  --pill-arrow: 2em;
}

.ak-hero-cta {
  position: absolute;
  z-index: 3;
  left: var(--ak-gutter);
  bottom: 16.3%;
}

/* Trust-Leiste, 54 px hoch, Verlauf nach rechts */
.ak-hero-trust {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.2 * var(--ak-u));
  height: 5.37%;
  min-height: 46px;
  margin: 0;
  padding: 0 8.96% 0 13.39%;
  list-style: none;
  /* Zwischenstops, damit CSS die gerade Figma-Interpolation trifft */
  background: linear-gradient(
    to right,
    rgba(230, 220, 238, 0.96) 0%,
    rgba(236, 224, 232, 0.858) 25%,
    rgba(243, 227, 225, 0.755) 50%,
    rgba(249, 231, 219, 0.653) 75%,
    rgba(255, 234, 212, 0.55) 100%
  );
}
.ak-hero-trust__item {
  display: flex;
  align-items: center;
  gap: calc(0.52 * var(--ak-u));
  white-space: nowrap;
}
.ak-hero-trust__icon {
  flex-shrink: 0;
  width: calc(var(--ak-u) * 5 / 4);
  height: calc(var(--ak-u) * 5 / 4);
  max-width: none;
}
.ak-hero-trust__label {
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 23 / 24) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

/* ════════════════════════════════
   Kompakt (≤ 899px): gestapelt
   ════════════════════════════════ */
@media (max-width: 899px) {
  .ak-hero {
    --ak-u: clamp(9px, 3.3vw, 15px);
    height: auto;
    min-height: calc(100svh - var(--header-h, 56px));
    display: flex;
    flex-direction: column;
  }

  .ak-hero-img {
    position: static;
    order: 3;
    width: 90%;
    max-width: 620px;
    height: auto;
    max-height: none;
    margin: auto 0 0 auto;
    transform: none;
    object-fit: contain;
  }

  .ak-hero-glow {
    left: -55%;
    top: auto;
    bottom: -120%;
    width: 210%;
  }

  .ak-hero-content {
    position: static;
    order: 1;
    max-width: none;
    padding: calc(1.8 * var(--ak-u)) var(--ak-gutter) 0;
  }

  .ak-hero-title {
    font-size: calc(2.7 * var(--ak-u)) !important;
    margin-bottom: calc(0.6 * var(--ak-u)) !important;
  }
  .ak-hero-title span { display: inline; }
  .ak-hero-sub { max-width: 24em; }

  .ak-hero-cta {
    position: static;
    order: 2;
    align-self: flex-start;
    margin: calc(1.6 * var(--ak-u)) var(--ak-gutter) 0;
    font-size: calc(1.2 * var(--ak-u));
    min-width: 0;
  }

  .ak-hero-trust {
    position: static;
    order: 4;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 16px;
    padding: 14px var(--ak-gutter);
  }
  .ak-hero-trust__item {
    flex: 0 0 calc(50% - 8px);
    align-items: flex-start;
    gap: 6px;
    white-space: normal;
  }
  .ak-hero-trust__icon {
    width: clamp(18px, 2.1vw, 20px);
    height: clamp(18px, 2.1vw, 20px);
  }
  .ak-hero-trust__label {
    font-size: clamp(11px, 1.5vw, 14px) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 330px) {
  .ak-hero-trust__item { flex: 0 0 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   VISION — 1:1 nach Figma "Vision" (Frame 1920 × 809, node 18:47)
   Wieder in Design-Pixeln: --ak-u = 1vw = 19.2 px auf 1920er Breite,
   damit 60 / 50 / 30 px exakt herauskommen.
   ══════════════════════════════════════════════════════════════════ */
.ak-vision {
  --ak-u: min(1vw, 22px);
  background: #fff;
  /* Die Textblöcke sind im Frame prozentual zur vollen Breite gesetzt
     (1308/1920 bzw. 1091/1920) – deshalb hier kein seitliches Padding. */
  padding: calc(var(--ak-u) * 35 / 3) 0 calc(var(--ak-u) * 65 / 8);
  text-align: center;
}

.ak-vision__headline {
  margin: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 8) !important;   /* 60px */
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-vision__headline span { display: block; }

/* Verlaufstext: Figma füllt die Schrift mit einem Bild (cover, zentriert).
   Die Boxbreite 1091/1920 bestimmt den sichtbaren Ausschnitt – deshalb
   ist sie prozentual gesetzt und nicht an die Textbreite gebunden. */
.ak-vision__accent {
  width: 56.82%;
  margin: calc(var(--ak-u) * 53 / 19.2) auto calc(var(--ak-u) * -8 / 19.2) !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 400 !important;
  line-height: calc(var(--ak-u) * 35 / 8) !important;  /* 84px */
  letter-spacing: 0 !important;
  color: #a39bc7 !important;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ak-vision__accent {
    background-image: url('/assets/images/vision-text-gradient.webp');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
}

.ak-vision__body {
  width: 68.13%;   /* 1308/1920 */
  margin: 0 auto;
}
.ak-vision__body p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;  /* 30px */
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: rgba(0, 0, 0, 0.6) !important;
}
/* Leerzeile zwischen den beiden Absätzen wie im Design */
.ak-vision__body p + p { margin-top: 1.21em !important; }
.ak-vision__body span { display: block; }

@media (max-width: 899px) {
  .ak-vision {
    --ak-u: clamp(8px, 3.1vw, 15px);
    padding: calc(var(--ak-u) * 6.5) var(--ak-gutter) calc(var(--ak-u) * 5);
  }
  .ak-vision__headline span { display: inline; }
  .ak-vision__accent {
    width: 100%;
    margin: calc(var(--ak-u) * 1.8) auto calc(var(--ak-u) * 0.6) !important;
    font-size: calc(var(--ak-u) * 2) !important;
    line-height: 1.3 !important;
  }
  .ak-vision__body { width: 100%; }
  .ak-vision__body p { font-size: calc(var(--ak-u) * 1.45) !important; }
  .ak-vision__body span { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════
   16:9-SLIDES mit Textspalte und freigestelltem Foto
   · .ak-slide--app     = Figma "BUSINESS MODEL", node 24:122
   · .ak-slide--chrono  = Figma "BUSINESS MODEL", node 81:216 (gespiegelt)
   Alle Positionen sind Prozentwerte des Frames (1919 × 1080),
   --ak-u = 1vw = 1 Design-Pixel.
   ══════════════════════════════════════════════════════════════════ */
html {
  scroll-padding-top: var(--header-h, 60px);
}

/* Die bildschirmfuellenden Slides werden nicht mehr nativ gesnappt. `scroll-snap-stop: always`
   greift bei jedem Durchlauf erneut und reisst die Seite hart an die Kante.
   Stattdessen fuehrt main.js pro Slide genau eine ruhige Zentrierbewegung aus,
   faengt nur den restlichen Wheel-Burst ab und gibt danach dauerhaft frei. */
.ak-screen-lock-end {
  display: none;
}

.ak-slide {
  --ak-u: 1vw;
  --slide-blur: 0px;
  position: relative;
  width: 100%;
  aspect-ratio: 1919 / 1080;
  overflow: hidden;
}

.ak-slide picture { display: contents; }

.ak-slide__photo {
  position: absolute;
  z-index: 1;
  left: var(--photo-left);
  top: var(--photo-top);
  width: var(--photo-w);
  height: var(--photo-h);
  max-width: none;
  object-fit: cover;
  filter: blur(var(--slide-blur));
  pointer-events: none;
}

.ak-slide__headline {
  position: absolute;
  z-index: 2;
  left: var(--text-left);
  top: var(--headline-top);
  width: 30.537%;   /* 586/1919 */
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 8) !important;   /* 60px */
  font-weight: 500 !important;
  line-height: var(--headline-lh, 1) !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-slide__headline span { display: block; }

.ak-slide__lead {
  position: absolute;
  z-index: 2;
  left: var(--text-left2);
  top: var(--lead-top);
  width: 30.433%;   /* 584/1919 */
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;  /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: rgba(0, 0, 0, 0.6) !important;
}
.ak-slide__lead span { display: block; }

.ak-slide__body {
  position: absolute;
  z-index: 2;
  left: var(--text-left2);
  top: var(--body-top);
  width: 23.867%;   /* 458/1919 */
}
.ak-slide__body p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;  /* 20px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-slide__body p + p { margin-top: 1.2em !important; }

.ak-slide__cta {
  position: absolute;
  z-index: 2;
  left: var(--text-left);
  top: var(--cta-top);
}

/* ── Variante App-Begleitung (node 24:122) ── */
.ak-slide--app {
  --text-left: 12.037%;    /* 231/1919 */
  --text-left2: 12.142%;   /* 233/1919 */
  --headline-top: 27.222%; /* 294/1080 */
  --lead-top: 38.333%;     /* 414/1080 */
  --body-top: 52.963%;     /* 572/1080 */
  --cta-top: 74.074%;      /* 800/1080 */
  --photo-left: 30.537%;   /* 586/1919 */
  --photo-top: 5.556%;     /* 60/1080 */
  --photo-w: 96.925%;      /* 1860/1919 */
  --photo-h: 96.944%;      /* 1047/1080 */
  /* Kein Layer-Blur. Der Effekt auf Figma-Node 28:118 ist deaktiviert und
     rendert nicht — nachgemessen gegen den Frame-Export: bestes Fit bei
     0.3px (reine Resampling-Weichheit), 9.1px waere um Faktor 10 daneben.
     Die Tiefenunschaerfe steckt bereits im Foto. */
  /* Vertikaler Verlauf, aus dem Figma-Render abgetastet (Δ ≤ 2/255) */
  background: linear-gradient(
    to bottom,
    rgb(220, 216, 233) 0%,
    rgb(222, 218, 235) 12.5%,
    rgb(224, 220, 236) 25%,
    rgb(228, 222, 236) 37.5%,
    rgb(233, 224, 234) 50%,
    rgb(239, 226, 231) 62.5%,
    rgb(244, 227, 225) 75%,
    rgb(249, 227, 218) 87.5%,
    rgb(252, 227, 213) 100%
  );
}

/* ── Variante Chronobiologe (node 81:216) ── */
.ak-slide--chrono {
  --text-left: 64.565%;    /* 1239/1919 */
  --text-left2: 64.669%;   /* 1241/1919 */
  --headline-top: 26.944%; /* 291/1080 */
  --headline-lh: 1.2;
  --lead-top: 40%;         /* 432/1080 */
  --body-top: 51.389%;     /* 555/1080 */
  --cta-top: 79.444%;      /* 858/1080 */
  --photo-left: -17.561%;  /* -337/1919 */
  --photo-top: 2.593%;     /* 28/1080 */
  --photo-w: 97.395%;      /* 1869/1919 */
  --photo-h: 97.407%;      /* 1052/1080 */
  --slide-blur: calc(var(--ak-u) * 5 / 16);           /* 6px */
  /* Figma: 173.87°, #D2D4EC 25.86% → rgba(245,183,152,.26) 98.33%.
     Gerade Interpolation, deshalb über Weiß ausgerechnet. */
  background: linear-gradient(
    173.87deg,
    rgb(210, 212, 236) 25.86%,
    rgb(221, 213, 226) 37.94%,
    rgb(230, 215, 220) 50.02%,
    rgb(238, 219, 217) 62.09%,
    rgb(244, 223, 217) 74.17%,
    rgb(249, 229, 221) 86.25%,
    rgb(252, 236, 228) 98.32%
  );
}

/* ── Gestapelt: unterhalb von 1200px wird der 16:9-Rahmen zu schmal,
      um 20px-Fließtext proportional lesbar zu halten ── */
@media (max-width: 1199px) {
  .ak-slide {
    --ak-u: clamp(12px, 1.9vw, 20px);
    aspect-ratio: auto;
    /* Gestapelt richtet sich die Hoehe nach dem Inhalt — auf dem Handy blieb
       darunter oft ein Rest der Nachbarsection stehen. Mindestens Bildschirm-
       hoehe, Inhalt vertikal zentriert. */
    min-height: calc(100svh - var(--header-h, 60px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    /* Kein Boden-Padding: Die Freisteller sind exakt an der Bildunterkante
       beschnitten und muessen buendig auf der Slide-Unterkante aufsitzen. */
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) 0;
  }
  .ak-slide__headline,
  .ak-slide__lead,
  .ak-slide__body,
  .ak-slide__cta,
  .ak-slide__photo {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }
  .ak-slide__headline {
    font-size: clamp(30px, 7.4vw, 46px) !important;
    line-height: 1.1 !important;
  }
  .ak-slide__headline span { display: inline; }
  .ak-slide__lead {
    margin-top: calc(var(--ak-u) * 0.7) !important;
    font-size: clamp(17px, 4.2vw, 26px) !important;
  }
  .ak-slide__lead span { display: inline; }
  .ak-slide__body {
    margin-top: calc(var(--ak-u) * 1.9);
    max-width: 36em;
  }
  .ak-slide__body p {
    font-size: clamp(15px, 3.7vw, 19px) !important;
    line-height: 1.45 !important;
  }
  .ak-slide__cta {
    align-self: flex-start;
    margin-top: calc(var(--ak-u) * 1.9);
    font-size: clamp(15px, 3.9vw, 21px);
    min-width: 0;
  }
  .ak-slide__photo {
    order: 9;
    /* Der Freisteller laeuft ueber die Gutter hinaus bis an die Seitenraender
       und sitzt buendig auf der Unterkante der Slide. */
    width: calc(100% + var(--ak-gutter) * 2);
    max-width: none;
    height: auto;
    margin: calc(var(--ak-u) * 1.6) calc(var(--ak-gutter) * -1) 0;
    align-self: stretch;
    filter: none;
  }
  .ak-slide--chrono .ak-slide__photo {
    filter: blur(var(--slide-blur));
  }
  /* Der Chronobiologe-Block ist auf schmalen Screens kuerzer als ein Viewport.
     Ohne diese Ausnahme bliebe unter dem Bild unnoetig viel Leerraum stehen. */
  .ak-slide--chrono {
    min-height: 0;
    justify-content: flex-start;
  }
  /* Das App-Motiv behält seine bestehende Reihenfolge und Größe, braucht auf
     schmalen Screens aber ebenfalls keine volle Viewport-Höhe darunter. */
  .ak-slide--app {
    min-height: 0;
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════
   „DU WILLST NOCH MEHR?" — 1:1 nach Figma "Vision"
   (Frame 1920 × 1086, node 46:191) mit den Karten-Varianten
   46:301 / 46:215 / 46:235 / 46:279 / 80:197.
   --ak-u = 1vw = 1 Design-Pixel auf 1920er Breite.
   ══════════════════════════════════════════════════════════════════ */
.ak-mehr {
  --ak-u: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  /* Karte und Textblöcke sind prozentual zur vollen Frame-Breite gesetzt
     (896/1920 bzw. 1308/1920) – deshalb hier kein seitliches Padding. */
  padding: calc(var(--ak-u) * 6.4583) 0 calc(var(--ak-u) * 11.6146);
}

/* Verlaufsschrift: der Verlauf spannt genau über den Textlauf, die Stops
   sind aus dem Figma-Render abgetastet. */
.ak-mehr__headline {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #8077a4 !important;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ak-mehr__headline {
    background-image: linear-gradient(
      90deg,
      rgb(127, 119, 164) 0%,
      rgb(129, 120, 164) 10%,
      rgb(161, 149, 178) 30%,
      rgb(188, 173, 189) 50%,
      rgb(214, 196, 199) 70%,
      rgb(234, 190, 173) 90%,
      rgb(245, 183, 152) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    width: fit-content;
  }
}

.ak-mehr__sub {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: rgba(0, 0, 0, 0.6) !important;
}
.ak-mehr__sub span { display: block; }

/* Rubriken-Chips */
.ak-mehr__tabs {
  display: flex;
  gap: calc(var(--ak-u) * 0.41667);                    /* 8px */
  margin-top: calc(var(--ak-u) * 2.03125);             /* 39px */
  max-width: 100%;
}
.ak-mehr__chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: calc(var(--ak-u) * 2.34375);                 /* 45px */
  padding: 0 calc(var(--ak-u) * 0.83333);              /* 16px */
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  /* 14px bei 1920; unter ~1650px greift die Lesbarkeitsgrenze */
  font-size: max(calc(var(--ak-u) * 35 / 48), 12px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ak-mehr__chip:hover { color: #000; }
.ak-mehr__chip--active {
  border-color: #000;
  color: #000;
}

.ak-mehr__stage {
  width: 46.667%;                                      /* 896/1920 */
  margin-top: calc(var(--ak-u) * 1.30208);             /* 25px */
}

.ak-mehr__card {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 435;
  overflow: hidden;
  border-radius: calc(var(--ak-u) * 1.82292);          /* 35px */
}
.ak-mehr__card[hidden] { display: none; }
.ak-mehr__card--active { animation: akMehrFade 0.35s ease both; }
@keyframes akMehrFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Kartenverläufe – Figma interpoliert gerade, deshalb hier deckend
   über Weiß ausgerechnet. */
.ak-mehr__card--ruhe {
  background: linear-gradient(
    154.859deg,
    rgb(246, 245, 255) 0%, rgb(246, 245, 255) 17.05%, rgb(249, 249, 255) 25.45%,
    rgb(252, 252, 255) 33.86%, rgb(254, 254, 255) 42.26%, rgb(255, 255, 255) 50.66%,
    rgb(255, 251, 249) 59.39%, rgb(255, 244, 238) 68.12%, rgb(255, 234, 224) 76.86%,
    rgb(255, 222, 205) 85.59%, rgb(255, 222, 205) 100%
  );
}
.ak-mehr__card--schlaf {
  background: linear-gradient(
    to bottom,
    rgb(245, 244, 249) 0%, rgb(245, 244, 248) 13.1%, rgb(246, 245, 248) 26.2%,
    rgb(248, 245, 247) 39.3%, rgb(249, 246, 247) 52.4%, rgb(251, 246, 245) 64.3%,
    rgb(252, 246, 244) 76.2%, rgb(253, 246, 243) 88.1%, rgb(254, 246, 242) 100%
  );
}
.ak-mehr__card--energie {
  background: linear-gradient(
    to bottom,
    rgb(243, 250, 255) 0%, rgb(245, 250, 255) 20.07%, rgb(247, 252, 255) 40.14%,
    rgb(251, 253, 255) 60.22%, rgb(255, 255, 255) 80.29%, rgb(254, 253, 253) 85.22%,
    rgb(253, 252, 251) 90.14%, rgb(253, 251, 251) 95.07%, rgb(253, 252, 251) 100%
  );
}
.ak-mehr__card--jetlag {
  background: linear-gradient(
    to bottom,
    rgb(254, 246, 244) 0%, rgb(254, 246, 244) 48.12%, rgb(252, 246, 246) 61.09%,
    rgb(249, 247, 248) 74.06%, rgb(246, 247, 250) 87.03%, rgb(244, 248, 251) 100%
  );
}
.ak-mehr__card--schichtarbeit {
  background: linear-gradient(
    to bottom,
    rgb(244, 248, 251) 0%, rgb(244, 248, 251) 26.09%, rgb(244, 248, 252) 39.02%,
    rgb(246, 249, 252) 51.94%, rgb(250, 252, 253) 64.87%, rgb(255, 255, 255) 77.79%,
    rgb(255, 251, 250) 83.35%, rgb(254, 247, 246) 88.9%, rgb(254, 246, 244) 94.45%,
    rgb(254, 246, 244) 100%
  );
}

/* Textspalte: Titel oben, Fließtext unten verankert – wie im Design */
.ak-mehr__text {
  position: absolute;
  z-index: 2;
  left: 5.804%;      /* 52/896 */
  top: 12.644%;      /* 55/435 */
  bottom: 7.356%;    /* 32/435 */
  width: 38.281%;    /* 343/896 */
  display: flex;
  flex-direction: column;
}
.ak-mehr__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-mehr__title span { display: block; }
.ak-mehr__body { margin-top: auto; }
.ak-mehr__body p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;   /* 20px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.ak-mehr__media {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
}
.ak-mehr__media img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}

/* ── Gestapelt unter 1200px: Bild oben, Text darunter ── */
@media (max-width: 1199px) {
  .ak-mehr {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter);
  }
  .ak-mehr__headline { font-size: clamp(28px, 6.4vw, 42px) !important; }
  .ak-mehr__sub {
    margin-top: calc(var(--ak-u) * 0.6) !important;
    font-size: clamp(16px, 4vw, 22px) !important;
  }
  .ak-mehr__sub span { display: inline; }

  .ak-mehr__tabs {
    align-self: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: calc(var(--ak-u) * 1.6);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ak-mehr__tabs::-webkit-scrollbar { display: none; }
  .ak-mehr__chip {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .ak-mehr__stage { width: 100%; margin-top: calc(var(--ak-u) * 1.2); }
  .ak-mehr__card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
  }
  .ak-mehr__media {
    position: static !important;
    order: 1;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: min(52vw, 300px) !important;
  }
  .ak-mehr__media img {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35%;
  }
  .ak-mehr__text {
    position: static;
    order: 2;
    width: auto;
    padding: calc(var(--ak-u) * 1.6) calc(var(--ak-u) * 1.6) calc(var(--ak-u) * 1.8);
  }
  .ak-mehr__title { font-size: clamp(21px, 5vw, 28px) !important; }
  .ak-mehr__body { margin-top: calc(var(--ak-u) * 1.1); }
  .ak-mehr__body p {
    font-size: clamp(15px, 3.7vw, 19px) !important;
    line-height: 1.45 !important;
  }
  .ak-mehr__body p + p { margin-top: 0.6em !important; }
}

@media (max-width: 767px) {
  .ak-mehr {
    padding: clamp(48px, 9vw, 64px) 20px;
  }

  .ak-mehr__headline {
    font-size: clamp(32px, 7vw, 42px) !important;
  }

  .ak-mehr__sub {
    max-width: 620px;
    margin-top: 12px !important;
    font-size: clamp(17px, 3.35vw, 21px) !important;
    line-height: 1.3 !important;
  }

  .ak-mehr__tabs {
    display: flex;
    align-self: stretch;
    justify-content: flex-start;
    margin-top: 24px;
    padding: 0 0 4px;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x proximity;
  }

  .ak-mehr__chip {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
    min-width: max-content;
    height: 40px;
    padding: 0 16px;
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    text-align: center;
    scroll-snap-align: start;
  }

  .ak-mehr__chip:last-child {
    grid-column: auto;
  }

  .ak-mehr__chip--active {
    border-color: #000;
    background: #fff;
  }

  .ak-mehr__stage,
  .ak-mehr__card {
    width: 100% !important;
  }

  .ak-mehr__stage {
    margin-top: 16px;
  }

  .ak-mehr__card {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    min-height: clamp(340px, 64vw, 420px);
    border-radius: 24px;
  }

  .ak-mehr__card[hidden] {
    display: none !important;
  }

  .ak-mehr__media {
    position: relative !important;
    inset: auto !important;
    display: block;
    order: 2;
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
  }

  .ak-mehr__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    object-position: center;
    transform: none !important;
  }

  .ak-mehr__card--ruhe .ak-mehr__media img {
    object-position: 100% 62%;
  }

  .ak-mehr__card--schlaf .ak-mehr__media img {
    object-position: 48% 30%;
  }

  .ak-mehr__card--energie .ak-mehr__media img {
    object-position: 56% 35%;
  }

  .ak-mehr__card--jetlag .ak-mehr__media img {
    object-position: 20% 56%;
    transform: scaleX(-1) !important;
  }

  .ak-mehr__card--schichtarbeit .ak-mehr__media img {
    object-position: 30% 44%;
  }

  .ak-mehr__text {
    position: relative;
    inset: auto;
    order: 1;
    min-width: 0;
    width: auto;
    padding: clamp(22px, 4vw, 30px) clamp(16px, 3vw, 24px);
  }

  .ak-mehr__title {
    font-size: clamp(22px, 4.2vw, 28px) !important;
  }

  .ak-mehr__body {
    margin-top: auto;
  }

  .ak-mehr__body p {
    font-size: clamp(14px, 2.55vw, 17px) !important;
    line-height: 1.36 !important;
  }
}

@media (max-width: 479px) {
  .ak-mehr {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ak-mehr__card {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    min-height: 430px;
    border-radius: 20px;
  }

  .ak-mehr__text {
    padding: 20px 14px 18px;
  }

  .ak-mehr__title {
    font-size: 20px !important;
  }

  .ak-mehr__body p {
    font-size: 13px !important;
    line-height: 1.34 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak-mehr__card--active { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   TAGESLICHT-KURVE — 1:1 nach Figma "BUSINESS MODEL" (Frame 1920 × 1080,
   node 46:313) mit den Zuständen 103:300 und 103:332.
   Der Verlauf --tag-bg und die Kurvenfüllung werden vom Skript gesetzt.
   ══════════════════════════════════════════════════════════════════ */
.ak-tag-scroll {
  position: relative;
}

.ak-tag {
  --ak-u: 1vw;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: var(--tag-bg, linear-gradient(to bottom, rgb(205, 222, 255), rgb(247, 228, 235)));
  transition: background-image 0.2s linear;
}

/* Die Slide dockt an und bleibt stehen, waehrend der restliche Scrollweg den
   Tag von 07:00 auf 18:00 treibt. Ob gedockt wird, entscheidet das Skript per
   .is-locked: Bedingung ist, dass die Slide ganz in den Bildschirm passt –
   nicht die Fensterbreite. So bleibt der Lock auch in kleinen Fenstern. */
.ak-tag-scroll.is-locked {
  /* 200svh Scrollweg waren in beide Richtungen zaeh — beim Hochscrollen laeuft
     der Tagesverlauf ausserdem nicht mehr mit (siehe Tageslicht.astro), der
     Weg war dort also ganz leer. */
  height: 240svh;   /* 100 andocken + 140 Scrollweg */
}
.ak-tag-scroll.is-locked .ak-tag-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  overflow: hidden;
  background: var(--tag-bg, linear-gradient(to bottom, rgb(205, 222, 255), rgb(247, 228, 235)));
  transition: background-image 0.2s linear;
}
/* Gedockt traegt nur die Buehne den Verlauf – sonst laege ein zweiter,
   kuerzer gestreckter Verlauf auf der Sektion und man saehe die Kante. */
.ak-tag-scroll.is-locked .ak-tag {
  background: none;
  transition: none;
}

@media (min-width: 1200px) {
  /* Nie hoeher als der Bildschirm, sonst wird oben oder unten abgeschnitten.
     --ak-u folgt der tatsaechlichen Breite, damit die Schrift mitskaliert. */
  .ak-tag-scroll.is-locked .ak-tag {
    --ak-u: min(1vw, 1.7778svh);
    width: min(100%, calc(100svh * 16 / 9));
  }
}

.ak-tag__headline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16.296%;      /* 176/1080 */
  width: 67.188%;    /* 1290/1920 */
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-tag__sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 22.037%;      /* 238/1080 */
  width: 68.125%;    /* 1308/1920 */
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Diagramm ── */
.ak-tag__chart {
  /* Gemeinsame X-Achse: Anteil 0…1 (02:00 – 22:00) wird auf --x0 … --x0+--xspan
     abgebildet. Desktop = Tick-Bereich 235…1175.95 des 1920er Rasters. */
  --x0: 12.239583%;     /* 235/1920 */
  --xspan: 49.007917%;  /* 940.952/1920 */
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.ak-tag__curve {
  position: absolute;
  left: calc(var(--x0) + var(--xspan) * 0.049949);   /* 282 im Tick-Raum */
  top: 57.303%;      /* 618.875/1080 */
  width: calc(var(--xspan) * 0.932043);              /* 877 im Tick-Raum */
  height: 16.782%;   /* 181.249/1080 */
  overflow: visible;
}

.ak-tag__ticks {
  position: absolute;
  left: var(--x0);
  top: 76.019%;      /* 821/1080 */
  width: var(--xspan);
  height: 0.463%;    /* 5/1080 */
}

.ak-tag__axis-label {
  position: absolute;
  left: calc(var(--x0) + var(--xspan) * var(--f, 0));
  top: 77.13%;       /* 833/1080 */
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 5 / 6);                /* 16px */
  font-weight: 300;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
}

.ak-tag__axis-title {
  position: absolute;
  left: calc(var(--x0) + var(--xspan) * 0.499707);   /* 705.2 im Tick-Raum */
  top: 80.798%;      /* 872.62/1080 */
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24);              /* 20px */
  font-weight: 300;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

/* ── Griff ── */
.ak-tag__handle {
  position: absolute;
  left: calc(var(--x0) + var(--xspan) * var(--tag-f, 0.250368));
  top: 47.037%;      /* 508/1080 – Oberkante der Uhrzeit */
  height: 31.389%;
  width: 0;
  cursor: ew-resize;
  touch-action: none;
  transition: left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ak-tag__handle.is-dragging { transition: none; }
.ak-tag__handle:focus-visible { outline: none; }
.ak-tag__handle:focus-visible .ak-tag__knob {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.ak-tag__time {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24);              /* 20px */
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
  user-select: none;
}

/* Gestrichelte Linie, 258 px hoch ab y = 540 */
.ak-tag__dash {
  position: absolute;
  left: 0;
  top: calc(var(--ak-u) * 32 / 19.2);
  height: calc(var(--ak-u) * 258 / 19.2);
  width: 1px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to bottom,
    #8d8d8d 0,
    #8d8d8d calc(var(--ak-u) * 8 / 19.2),
    transparent calc(var(--ak-u) * 8 / 19.2),
    transparent calc(var(--ak-u) * 11 / 19.2)
  );
}

.ak-tag__knob {
  position: absolute;
  left: 0;
  top: calc(var(--ak-u) * 81 / 19.2);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ak-u) * 38 / 19.2);
  height: calc(var(--ak-u) * 21 / 19.2);
  border: 1px solid #c2c2c2;
  border-radius: 200px;
  background: #fff;
}
.ak-tag__knob svg {
  width: calc(var(--ak-u) * 24 / 19.2);
  height: calc(var(--ak-u) * 24 / 19.2);
}

/* ── Textspalte rechts ── */
.ak-tag__panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ak-tag__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* Der alte Text geht zuerst weg … */
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.ak-tag__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* … der neue blendet erst danach ein. */
  transition: opacity 0.34s ease 0.28s, transform 0.34s ease 0.28s, visibility 0s linear 0s;
}

.ak-tag__title {
  position: absolute;
  left: 64.896%;     /* 1246/1920 */
  top: 45.185%;      /* 488/1080 */
  width: 30.417%;    /* 584/1920 */
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-tag__title span { display: block; }

.ak-tag__body {
  position: absolute;
  left: 64.896%;
  top: 53.519%;      /* 578/1080 */
  width: var(--panel-body-w, 23.854%);
}
.ak-tag__body p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;   /* 20px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}
.ak-tag__body p + p { margin-top: 1.2em !important; }

.ak-tag__cta {
  position: absolute;
  left: 64.896%;     /* 1246/1920 */
  top: 73.519%;      /* 794/1080 */
  font-size: calc(var(--ak-u) * 25 / 24);              /* 20px */
}

/* ── Gestapelt unter 1200px ── */
@media (max-width: 1199px) {
  .ak-tag {
    --ak-u: clamp(12px, 1.9vw, 20px);
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) calc(var(--ak-u) * 3.4);
  }
  .ak-tag__headline,
  .ak-tag__sub {
    position: static;
    transform: none;
    width: auto;
  }
  .ak-tag__headline { font-size: clamp(28px, 6.4vw, 44px) !important; }
  .ak-tag__sub {
    margin-top: calc(var(--ak-u) * 0.6) !important;
    font-size: clamp(16px, 4vw, 22px) !important;
  }

  .ak-tag__chart {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    aspect-ratio: 1920 / 420;
    margin-top: calc(var(--ak-u) * 1.6);
  }
  /* Volle Breite statt Desktop-Raster – Kurve, Ticks, Beschriftung und Griff
     folgen automatisch, weil sie alle ueber --x0/--xspan rechnen. */
  .ak-tag__chart  { --x0: 0%; --xspan: 100%; }
  .ak-tag__curve  { top: 20%;  height: 46%; }
  .ak-tag__ticks  { top: 71%;  height: 1.2%; }
  .ak-tag__axis-label { top: 76%; font-size: clamp(11px, 2.6vw, 14px); }
  /* Der flache Chart bietet unter den Uhrzeiten keinen Platz mehr – der
     Achsentitel rutscht darum unter den Chart statt hinein. */
  .ak-tag__axis-title {
    top: calc(100% + 0.35em);
    transform: translate(-50%, 0);
    font-size: clamp(12px, 3vw, 16px);
  }
  .ak-tag__handle { top: 0; height: 78%; }
  .ak-tag__time { font-size: clamp(14px, 3.4vw, 18px); }
  .ak-tag__dash {
    top: calc(var(--ak-u) * 1.6);
    height: calc(100% - var(--ak-u) * 1.6);
  }
  .ak-tag__knob {
    top: calc(var(--ak-u) * 2.6);
    width: 34px;
    height: 19px;
  }
  .ak-tag__knob svg { width: 20px; height: 20px; }

  .ak-tag__panels {
    position: relative;
    inset: auto;
    order: 4;
    margin-top: calc(var(--ak-u) * 3.4);   /* Platz fuer den Achsentitel */
    pointer-events: auto;
  }
  /* Alle Panels teilen sich eine Grid-Zelle: der Container ist immer so hoch
     wie der laengste Text, damit die CTA darunter beim Wechsel stehen bleibt. */
  .ak-tag__panels { display: grid; }
  .ak-tag__panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
  }
  .ak-tag__title,
  .ak-tag__body {
    position: static;
    width: auto;
  }
  .ak-tag__title { font-size: clamp(21px, 5vw, 28px) !important; }
  .ak-tag__title span { display: inline; }
  .ak-tag__body { margin-top: calc(var(--ak-u) * 1.1); }
  .ak-tag__body p {
    font-size: clamp(15px, 3.7vw, 19px) !important;
    line-height: 1.45 !important;
  }
  .ak-tag__cta {
    position: static;
    order: 5;
    align-self: flex-start;
    margin-top: calc(var(--ak-u) * 1.8);
    font-size: clamp(15px, 3.9vw, 20px);
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak-tag,
  .ak-tag-stage { transition: none; }
  .ak-tag__handle { transition: none; }
  .ak-tag__panel,
  .ak-tag__panel.is-active {
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SPÜRBARE WIRKUNG — 1:1 nach Figma node 29:119.
   Die Kartengruppe ist 1172 breit (4 × 266 + 3 × 36) und im 1920er
   Raster zentriert; alle Innenmaße stammen aus dem Design.
   ══════════════════════════════════════════════════════════════════ */
.ak-wirkung {
  --ak-u: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--ak-u) * 400 / 60) var(--ak-gutter) calc(var(--ak-u) * 110 / 19.2);
  background: #fff;
}

.ak-wirkung__headline {
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1193 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;   /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}
.ak-wirkung__headline span { display: block; }

.ak-wirkung__karten {
  display: flex;
  gap: calc(var(--ak-u) * 36 / 19.2);
  margin-top: calc(var(--ak-u) * 68 / 19.2);
}

.ak-wirkung__karte {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: calc(var(--ak-u) * 266 / 19.2);
  height: calc(var(--ak-u) * 276 / 19.2);
  padding: calc(var(--ak-u) * 26 / 19.2) calc(var(--ak-u) * 30 / 19.2);
  border-radius: calc(var(--ak-u) * 32 / 19.2);
  /* Figma: rgba(232,222,255,.4) → rgba(255,255,255,.33) auf Weiß.
     Deckend ausgerechnet, weil CSS Verläufe vormultipliziert interpoliert. */
  background-image: linear-gradient(132.44deg, rgb(246, 242, 255) 2.5%, rgb(255, 255, 255) 75.7%);
}

.ak-wirkung__label {
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 5 / 4) !important;      /* 24px */
  font-weight: 500 !important;
  line-height: calc(var(--ak-u) * 38 / 19.2) !important;
  color: #000 !important;
}

.ak-wirkung__wert {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 12) !important;    /* 40px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #000 !important;
}

.ak-wirkung__karte--quote {
  align-items: center;
  justify-content: center;
  gap: calc(var(--ak-u) * 13 / 19.2);
  padding: calc(var(--ak-u) * 20 / 19.2) calc(var(--ak-u) * 32 / 19.2);
  border: 3px solid #d2cbe5;
  background-image: none;
  text-align: center;
}
.ak-wirkung__karte--quote p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  letter-spacing: 0 !important;
}
.ak-wirkung__quote-zahl {
  font-size: calc(var(--ak-u) * 5 / 4) !important;      /* 24px */
  font-weight: 700 !important;
  line-height: calc(var(--ak-u) * 38 / 19.2) !important;
  color: #000 !important;
}
.ak-wirkung__quote-text {
  font-size: calc(var(--ak-u) * 25 / 24) !important;    /* 20px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #000 !important;
}
.ak-wirkung__quote-fuss {
  font-size: calc(var(--ak-u) * 25 / 24) !important;    /* 20px */
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #b8b8b8 !important;
}

.ak-wirkung__fussnote {
  margin: calc(var(--ak-u) * 68 / 19.2) 0 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1172 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;    /* 20px */
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

@media (max-width: 1199px) {
  .ak-wirkung {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) calc(var(--ak-u) * 3.4);
  }
  .ak-wirkung__headline {
    max-width: none;
    font-size: clamp(28px, 6.4vw, 44px) !important;
  }
  .ak-wirkung__headline span { display: inline; }
  .ak-wirkung__karten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--ak-u) * 1);
    width: 100%;
    margin-top: calc(var(--ak-u) * 1.8);
  }
  .ak-wirkung__karte {
    width: auto;
    height: auto;
    min-height: calc(var(--ak-u) * 9);
    padding: calc(var(--ak-u) * 1.2);
    border-radius: calc(var(--ak-u) * 1.6);
  }
  .ak-wirkung__label { font-size: clamp(14px, 3.4vw, 19px) !important; line-height: 1.3 !important; }
  /* Wert bleibt am Kartenboden, auch wenn das Grid die Karte streckt. */
  .ak-wirkung__wert  {
    font-size: clamp(24px, 6vw, 34px) !important;
    margin-top: auto;
    padding-top: calc(var(--ak-u) * 1.4);
  }
  .ak-wirkung__quote-zahl { font-size: clamp(15px, 3.6vw, 20px) !important; line-height: 1.3 !important; }
  .ak-wirkung__quote-text,
  .ak-wirkung__quote-fuss { font-size: clamp(13px, 3.1vw, 17px) !important; }
  .ak-wirkung__fussnote {
    max-width: none;
    margin-top: calc(var(--ak-u) * 1.6) !important;
    font-size: clamp(13px, 3.1vw, 17px) !important;
  }
}

@media (max-width: 599px) {
  .ak-wirkung__karten { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   BILDSLIDE — Figma node 91:157, Frame 1920 × 1051.
   ══════════════════════════════════════════════════════════════════ */
.ak-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1051;
  overflow: hidden;
  background: #d2d4ec;
}

.ak-foto__bild {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Hochkant ist das 1.83:1-Bild zu flach – etwas mehr Höhe und der
   Bildausschnitt auf die Person statt auf die Bildmitte. */
@media (max-width: 767px) {
  .ak-foto { aspect-ratio: 4 / 3; }
  .ak-foto__bild { object-position: 62% center; }
}

/* ══════════════════════════════════════════════════════════════════
   VIER SCHRITTE — 1:1 nach Figma "Ergenisse Forschung" (node 46:379).
   Vier Spalten à 252 mit 52.6 Abstand, im 1920er Raster zentriert.
   ══════════════════════════════════════════════════════════════════ */
.ak-schritte {
  --ak-u: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--ak-u) * 183 / 19.2) var(--ak-gutter) calc(var(--ak-u) * 206 / 19.2);
  background: #fff;
}

.ak-schritte__headline {
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1214 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;   /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-schritte__liste {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--ak-u) * 252 / 19.2));
  gap: calc(var(--ak-u) * 52.6 / 19.2);
  margin: calc(var(--ak-u) * 128 / 19.2) 0 0;
  padding: 0;
  list-style: none;
}

.ak-schritte__schritt { margin: 0; }

.ak-schritte__nr {
  display: block;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 10 / 3) !important;     /* 64px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #6469a2;
  opacity: 0.64;
}

.ak-schritte__titel {
  margin: calc(var(--ak-u) * 33 / 19.2) 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 5 / 4) !important;      /* 24px */
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.ak-schritte__text {
  margin: calc(var(--ak-u) * 12 / 19.2) 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;    /* 20px */
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

@media (max-width: 1199px) {
  .ak-schritte {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) calc(var(--ak-u) * 3.4);
  }
  .ak-schritte__headline {
    max-width: none;
    font-size: clamp(28px, 6.4vw, 44px) !important;
  }
  .ak-schritte__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--ak-u) * 2) calc(var(--ak-u) * 1.6);
    width: 100%;
    margin-top: calc(var(--ak-u) * 2);
  }
  .ak-schritte__nr    { font-size: clamp(34px, 8vw, 52px) !important; }
  .ak-schritte__titel { font-size: clamp(17px, 4.2vw, 22px) !important; margin-top: calc(var(--ak-u) * 0.5) !important; }
  .ak-schritte__text  {
    font-size: clamp(14px, 3.4vw, 18px) !important;
    line-height: 1.45 !important;
    margin-top: calc(var(--ak-u) * 0.5) !important;
  }
}

@media (max-width: 599px) {
  .ak-schritte__liste { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   BILDSLIDE WEITE — Figma node 100:266, Frame 1922 × 1193.
   ══════════════════════════════════════════════════════════════════ */
.ak-weite {
  --ak-u: 1vw;
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-h, 60px));
  overflow: hidden;
  background: #e7dfe8;
}
.ak-weite__bild {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ak-weite__headline {
  position: absolute;
  z-index: 1;
  left: var(--ak-gutter);
  right: var(--ak-gutter);
  top: 15.89%;
  width: calc(var(--ak-u) * 1317 / 19.2);
  max-width: calc(100% - 2 * var(--ak-gutter));
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-weite__cta {
  --pill-min-w: 18.25em;
  --pill-h: 2.25em;
  --pill-pl: 1.71em;
  --pill-pr: 0.42em;
  --pill-arrow: 1.67em;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 87.34%;
  width: fit-content;
  margin: 0 auto;
  font-size: calc(var(--ak-u) * 5 / 4);
}

@media (max-width: 767px) {
  .ak-weite {
    --ak-u: clamp(12px, 1.9vw, 20px);
  }
  .ak-weite__bild { object-position: 68% center; }
  .ak-weite__headline {
    left: 20px;
    right: 20px;
    top: 8%;
    width: auto;
    font-size: clamp(17px, 4.4vw, 24px) !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
  }
  .ak-weite__cta {
    top: auto;
    bottom: calc(var(--ak-u) * 2.4);
    max-width: calc(100% - 40px);
    min-width: 0;
    font-size: clamp(15px, 3.9vw, 19px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   EIN STÜCK HIMMEL — Figma node 103:372, Frame 1920 × 1080.
   ══════════════════════════════════════════════════════════════════ */
.ak-himmel {
  --ak-u: 1vw;
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-h, 60px));
  overflow: hidden;
  background: #d9c5c1;
}

.ak-himmel__bild {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ak-himmel__titel {
  position: absolute;
  z-index: 1;
  top: 28.98%;
  left: var(--ak-gutter);
  right: var(--ak-gutter);
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-himmel__cta {
  --pill-min-w: 18.25em;
  --pill-h: 2.25em;
  --pill-pl: 1.71em;
  --pill-pr: 0.42em;
  --pill-arrow: 1.67em;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 4.26%;
  min-width: 0;
  width: 18.25em;
  margin: 0 auto;
  font-size: calc(var(--ak-u) * 5 / 4);
}

@media (max-width: 767px) {
  .ak-himmel__bild {
    object-position: center;
  }

  .ak-himmel__titel {
    top: 21%;
    left: 20px;
    right: 20px;
    font-size: clamp(21px, 5.8vw, 27px) !important;
    line-height: 1.2 !important;
  }

  .ak-himmel__cta {
    bottom: 6%;
    width: min(18.25em, calc(100% - 40px));
    max-width: calc(100% - 40px);
    font-size: clamp(15px, 3.9vw, 19px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DIE PERFEKTION VON LICHT — 1:1 nach Figma node 2:189 (Frame 1916).
   Sechs Karten à 359 × 233 in drei Spalten (Gruppe 1194 breit, zentriert).
   ══════════════════════════════════════════════════════════════════ */
.ak-perfektion {
  --ak-u: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--ak-u) * 153 / 19.2) var(--ak-gutter) calc(var(--ak-u) * 123 / 19.2);
  background: #fff;
}

.ak-perfektion__kicker {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-perfektion__headline {
  margin: calc(var(--ak-u) * 2 / 19.2) 0 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1149 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-perfektion__sub {
  margin: calc(var(--ak-u) * 23 / 19.2) 0 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1253 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}
.ak-perfektion__sub span { display: block; }

.ak-perfektion__karten {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--ak-u) * 359 / 19.2));
  gap: calc(var(--ak-u) * 57 / 19.2) calc(var(--ak-u) * 58.6 / 19.2);
  margin: calc(var(--ak-u) * 64 / 19.2) 0 0;
  padding: 0;
  list-style: none;
}

.ak-perfektion__karte {
  box-sizing: border-box;
  min-height: calc(var(--ak-u) * 233 / 19.2);
  margin: 0;
  /* Rechts schmaler als links, wie im Design: die Textspalte ist dort 302–314
     breit, damit die Titel einzeilig bleiben. */
  padding: calc(var(--ak-u) * 27 / 19.2) calc(var(--ak-u) * 16 / 19.2)
           calc(var(--ak-u) * 14 / 19.2) calc(var(--ak-u) * 30 / 19.2);
  border: 1px solid #d2cbe5;
  border-radius: calc(var(--ak-u) * 19 / 19.2);
  /* Figma: rgba(232,222,255,.4) → rgba(255,255,255,.33) auf Weiß, deckend
     ausgerechnet (CSS interpoliert Verläufe vormultipliziert). */
  background-image: linear-gradient(146.2deg, rgb(246, 242, 255) 2.5%, rgb(255, 255, 255) 75.7%);
}

.ak-perfektion__icon {
  display: block;
  width: calc(var(--ak-u) * 36 / 19.2);
  height: calc(var(--ak-u) * 36 / 19.2);
  max-width: none;
}
/* Im Design liegend gestreckt (36 × 24) */
.ak-perfektion__icon--breit { height: calc(var(--ak-u) * 24 / 19.2); }

.ak-perfektion__kartenkicker {
  margin: calc(var(--ak-u) * 12 / 19.2) 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 32) !important;   /* 15px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.ak-perfektion__kartentitel {
  margin: calc(var(--ak-u) * 3 / 19.2) 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;   /* 20px */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.ak-perfektion__kartentext {
  margin: calc(var(--ak-u) * 16 / 19.2) 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 32) !important;   /* 15px */
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}

@media (max-width: 1199px) {
  .ak-perfektion {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) calc(var(--ak-u) * 3.4);
  }
  .ak-perfektion__kicker { font-size: clamp(15px, 3.6vw, 20px) !important; }
  .ak-perfektion__headline {
    max-width: none;
    margin-top: calc(var(--ak-u) * 0.5) !important;
    font-size: clamp(28px, 6.4vw, 44px) !important;
  }
  .ak-perfektion__sub {
    max-width: none;
    margin-top: calc(var(--ak-u) * 0.8) !important;
    font-size: clamp(16px, 4vw, 22px) !important;
  }
  .ak-perfektion__sub span { display: inline; }
  .ak-perfektion__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--ak-u) * 1.2);
    width: 100%;
    margin-top: calc(var(--ak-u) * 2);
  }
  .ak-perfektion__karte {
    min-height: 0;
    padding: calc(var(--ak-u) * 1.4);
    border-radius: calc(var(--ak-u) * 1);
  }
  .ak-perfektion__icon { width: 30px; height: 30px; }
  .ak-perfektion__icon--breit { height: 20px; }
  .ak-perfektion__kartenkicker { font-size: clamp(12px, 2.9vw, 15px) !important; }
  .ak-perfektion__kartentitel { font-size: clamp(16px, 3.9vw, 20px) !important; }
  .ak-perfektion__kartentext  {
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 599px) {
  .ak-perfektion__karten { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   ORT — 1:1 nach Figma node 101:268 (Frame 1920 × 1051).
   Foto formatfüllend, Zeile oben, CTA unten.
   ══════════════════════════════════════════════════════════════════ */
.ak-ort {
  --ak-u: 1vw;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1051;
  overflow: hidden;
  background: #d2d4ec;
}

.ak-ort__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ak-ort__zeile {
  /* Ohne transform zentriert: den belegt die Einblendung (.ak-fade-in). */
  position: absolute;
  left: 0;
  right: 0;
  top: 15.89%;       /* 167/1051 */
  margin: 0 auto !important;
  padding: 0 !important;
  width: calc(var(--ak-u) * 1317 / 19.2);
  max-width: calc(100% - 2 * var(--ak-gutter));
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-ort__cta {
  /* 438 × 54 bei 24px Schrift (node 101:286) */
  --pill-min-w: 18.25em;
  --pill-h: 2.25em;
  --pill-pl: 1.71em;
  --pill-pr: 0.42em;
  --pill-arrow: 1.67em;
  position: absolute;
  left: 0;
  right: 0;
  top: 87.34%;       /* 918/1051 */
  width: fit-content;
  margin: 0 auto;
  font-size: calc(var(--ak-u) * 5 / 4);                /* 24px */
}

@media (max-width: 1199px) {
  .ak-ort {
    --ak-u: clamp(12px, 1.9vw, 20px);
    aspect-ratio: 4 / 5;
  }
  /* Im Hochformat fuellt die Slide den Schirm wie Weite und Himmel, statt als
     4:5-Streifen mit Leerflaechen darueber und darunter zu stehen. */
  @media (max-width: 767px) {
    .ak-ort {
      aspect-ratio: auto;
      height: calc(100svh - var(--header-h, 60px));
    }
  }
  .ak-ort__bild { object-position: 58% center; }
  .ak-ort__zeile {
    top: 8%;
    width: auto;
    font-size: clamp(17px, 4.4vw, 24px) !important;
  }
  .ak-ort__cta {
    top: auto;
    bottom: calc(var(--ak-u) * 2.4);
    width: fit-content;
    font-size: clamp(15px, 3.9vw, 20px);
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .ak-ort__bild {
    object-position: 40% center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SPEKTRUM — 1:1 nach Figma node 95:175 (Frame 1911 × 1084).
   Der Chart rechnet im eigenen Raster 1572 × 500 (viewBox), die Texte
   darin sind über --x/--y in denselben Koordinaten positioniert.
   ══════════════════════════════════════════════════════════════════ */
.ak-spek {
  --ak-u: 1vw;
  --chart-w: 1572;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Der Chart ist im Design 1572 breit und damit breiter als die uebliche
     Textkante --ak-gutter; deshalb hier der schmalere Rand aus dem Frame. */
  padding: calc(var(--ak-u) * 136 / 19.2) calc(var(--ak-u) * 170 / 19.2) calc(var(--ak-u) * 73 / 19.2);
  background: #fff;
}

.ak-spek__kicker {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-spek__headline {
  margin: calc(var(--ak-u) * 15 / 19.2) 0 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1149 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-spek__sub {
  margin: calc(var(--ak-u) * 15 / 19.2) 0 0 !important;
  padding: 0 !important;
  max-width: calc(var(--ak-u) * 1412 / 19.2);
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}
.ak-spek__sub span { display: block; }

/* ── Umschalter ── */
.ak-spek__chips {
  display: flex;
  gap: calc(var(--ak-u) * 8 / 19.2);
  margin-top: calc(var(--ak-u) * 63 / 19.2);
}

.ak-spek__chip {
  display: inline-flex;
  align-items: center;
  height: calc(var(--ak-u) * 45 / 19.2);
  padding: 0 calc(var(--ak-u) * 16 / 19.2);
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 24) !important;   /* 20px */
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: rgba(0, 0, 0, 0.68);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ak-spek__chip.is-active {
  border-color: #000;
  color: #000;
}
.ak-spek__chip:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* ── Diagramm ── */
.ak-spek__chart {
  position: relative;
  width: 100%;
  max-width: calc(var(--ak-u) * 1572 / 19.2);
  aspect-ratio: 1572 / 500;
  margin-top: calc(var(--ak-u) * 66 / 19.2);
}

.ak-spek__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Texte im Chart-Raster: --x/--y sind Koordinaten im 1572 × 500 System. */
.ak-spek__band,
.ak-spek__nm,
.ak-spek__achse,
.ak-spek__kurvenlabel {
  position: absolute;
  left: calc(var(--x) / var(--chart-w) * 100%);
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.ak-spek__band {
  top: 3.4%;         /* 17/500 */
  font-size: clamp(12px, calc(var(--ak-u) * 35 / 48), 14px);
}

.ak-spek__mobile-break { display: none; }

.ak-spek__nm {
  top: 88.5%;        /* 442.68/500 */
  font-weight: 400;
  font-size: clamp(12px, calc(var(--ak-u) * 5 / 6), 16px);
}

.ak-spek__achse {
  --x: 770;
  top: 95%;          /* 475/500 */
  font-size: clamp(12px, calc(var(--ak-u) * 25 / 32), 15px);
}

.ak-spek__kurvenlabel--tag {
  /* --x/--y setzt das Skript: abends sitzt das Label oben rechts. */
  --x: 1430;
  --y: 313.6;
  top: calc(var(--y) / 500 * 100%);
  font-weight: 600;
  font-size: clamp(12px, calc(var(--ak-u) * 25 / 32), 15px);
}
.ak-spek__kurvenlabel--av {
  --x: 1351;
  top: 80.9%;        /* 404.6/500 */
  font-weight: 600;
  font-size: clamp(16px, calc(var(--ak-u) * 25 / 24), 20px);
}
.ak-spek__kurvenlabel-break { display: inline; }

@media (max-width: 1199px) {
  .ak-spek {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 3.4) var(--ak-gutter) calc(var(--ak-u) * 3.4);
  }
  .ak-spek__chart { width: 100%; }
  .ak-spek__kicker { font-size: clamp(15px, 3.6vw, 20px) !important; }
  .ak-spek__headline {
    max-width: none;
    margin-top: calc(var(--ak-u) * 0.5) !important;
    font-size: clamp(28px, 6.4vw, 44px) !important;
  }
  .ak-spek__sub {
    max-width: none;
    margin-top: calc(var(--ak-u) * 0.8) !important;
    font-size: clamp(16px, 4vw, 22px) !important;
    line-height: 1.35 !important;
  }
  .ak-spek__sub span { display: inline; }
  .ak-spek__chips { margin-top: calc(var(--ak-u) * 1.6); }
  .ak-spek__chip {
    height: auto;
    padding: calc(var(--ak-u) * 0.5) calc(var(--ak-u) * 0.9);
    font-size: clamp(14px, 3.4vw, 18px) !important;
  }
  .ak-spek__chart {
    max-width: none;
    aspect-ratio: 1572 / 560;
    margin-top: calc(var(--ak-u) * 1.6);
  }
  .ak-spek__band { font-size: clamp(11px, 1.8vw, 14px); }
  .ak-spek__nm { font-size: clamp(11px, 1.7vw, 14px); }
  .ak-spek__achse,
  .ak-spek__kurvenlabel--tag { font-size: clamp(12px, 1.8vw, 15px); }
  .ak-spek__kurvenlabel--av { font-size: clamp(14px, 2.2vw, 18px); }
}

@media (max-width: 767px) {
  .ak-spek {
    padding-top: clamp(40px, 10vw, 64px);
    padding-bottom: clamp(48px, 12vw, 72px);
  }
  .ak-spek__headline {
    line-height: 1.12 !important;
  }
  .ak-spek__chips {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
  .ak-spek__chart {
    height: clamp(220px, 62vw, 260px);
    aspect-ratio: auto;
    margin-top: 22px;
  }
  .ak-spek__band {
    z-index: 2;
    display: block;
    top: 2%;
    width: min(72px, 20vw);
    padding: 3px 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.88);
    font-size: clamp(11px, 3vw, 12px);
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .ak-spek__mobile-break { display: block; }
  /* Auf kleinen Displays stehen die Bezeichnungen mittig in ihren drei
     Spektralbereichen. So laufen die Trennlinien nicht durch den Text. */
  .ak-spek__band--uv {
    left: 16%;
  }
  .ak-spek__band--wirksam {
    left: 48.35%;
  }
  .ak-spek__band--ir {
    left: 82.5%;
  }
  .ak-spek__kurvenlabel {
    z-index: 2;
    left: auto;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%);
    font-size: clamp(11px, 3vw, 12px);
    font-weight: 600;
    line-height: 1.1;
  }
  .ak-spek__kurvenlabel::before {
    content: '';
    display: block;
    width: 18px;
    flex: 0 0 18px;
    border-top-style: solid;
  }
  .ak-spek__kurvenlabel--tag {
    top: clamp(52px, calc(var(--y) / 500 * 100%), 68%);
  }
  .ak-spek__kurvenlabel-break { display: block; }
  .ak-spek__kurvenlabel--tag::before {
    border-top-width: 2px;
    border-top-color: #6e7a83;
  }
  .ak-spek__kurvenlabel--av {
    top: 80%;
  }
  .ak-spek__kurvenlabel--av::before {
    border-top-width: 3px;
    border-top-color: #9099c7;
  }
  .ak-spek__nm {
    top: 87%;
    font-size: clamp(10.5px, 2.8vw, 12px);
  }
  .ak-spek__achse {
    top: 94%;
    font-size: clamp(12px, 3.2vw, 13px);
    font-weight: 400;
  }
  .ak-spek__svg #akSpekTag {
    stroke: #6e7a83;
    stroke-width: 2;
  }
  .ak-spek__svg #akSpekAv {
    stroke-width: 3;
  }
}

@media (max-width: 339px) {
  .ak-spek__chart {
    height: 240px;
  }
  .ak-spek__nm {
    top: 85.5%;
  }
  .ak-spek__nm--low {
    top: 90.5%;
  }
  .ak-spek__achse {
    top: 96%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak-spek__chip { transition: none; }
}

/* Buttons (auch außerhalb des Heros, z. B. /b2b) */
.ak-btn {
  font-family: var(--font-sans);
  font-size: var(--text-body) !important;
  font-weight: 500 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-block !important;
  transition: opacity 0.2s !important;
  box-sizing: border-box !important;
}

.ak-btn-primary {
  background: var(--color-text) !important;
  color: #fff !important;
  border: 2px solid var(--color-text) !important;
}

.ak-btn-secondary {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-text) !important;
}

.ak-btn:hover { opacity: 0.82; }

@media (max-width: 600px) {
  .ak-btn {
    font-size: var(--text-label) !important;
    padding: 12px 20px !important;
  }
}

.avakis-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl) var(--space-md);
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
  }
  .avakis-text {
    text-align: center;
    max-width: 820px;
    width: 100%;
    font-family: var(--font-sans);
    font-weight: 500;
    /* Ganzer Satz auf Display-Größe (56px) erzeugte Schusterjungen –
       fluide Größe + automatisches Balancing hält die Zeilen gleichmäßig. */
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.32;
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ak-line {
    display: block;
    margin-bottom: 0.35em;
  }
  .ak-line:last-child {
    margin-bottom: 0;
  }
  .ak-chunk {
    display: inline;
    opacity: 0;
    will-change: color, opacity;
  }

  /* Body fließt jetzt frei und wird ausbalanciert – keine festen Umbrüche mehr,
     die bei mittleren Breiten übergelaufen sind. */
  .ak-line-2-desktop     { display: block; }
  .ak-line-2-desktop br  { display: none; }
  .ak-line-2-mobile      { display: none; }

  @media (max-width: 767px) {
    .avakis-section {
      min-height: 100svh;
      padding: var(--space-xl) var(--space-md);
    }
    .avakis-text {
      font-size: var(--text-h1) !important;
      line-height: 1.3;
    }
    .ak-line-2-desktop { display: none; }

    /* Mobile: fluid, keine manuellen Umbrüche */
    .ak-line-2-mobile {
      display: block;
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .ak-line-2-mobile br {
      display: none;
    }
    .ak-line-2-mobile .ak-chunk {
      display: inline;
      white-space: normal;
    }
  }

.avakis-scroll-section {
    /* Aufteilung der scrollbaren 300vh (siehe WORDS_END/ZOOM_END in main.js):
       ~33vh Wortanimation, ~180vh Produkt-Zoom, ~87vh Standzeit fuer den
       Schlusstext. Die Wortphase ist bewusst kurz — die Brille soll kurz
       nach dem Satz kommen, nicht erst nach einer weiteren Bildschirmhoehe. */
    height: 400vh;
    width: 100%;
    position: relative;
    /* Etwas weisser Raum, bevor die naechste Slide (App-Begleitung) folgt. */
    margin-bottom: clamp(48px, 9vh, 140px);
  }

  .avakis-scroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* Die fixierte Kopfleiste liegt über der Sektion – sie zählt zum oberen
       Rand, damit Brille und Textblock optisch mittig im freien Bereich
       stehen. */
    padding-top: calc(var(--header-h) + clamp(16px, 3vh, 40px));
    padding-bottom: clamp(24px, 4vh, 44px);
  }

  .avakis-visor-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    z-index: 3;
    will-change: opacity;
  }

  .avakis-intro-text {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md, 24px);
    pointer-events: none;
  }

  .avakis-intro-text p {
    font-family: var(--font-sans);
    font-size: clamp(24px, 4.5vw, var(--text-display, 56px));
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: var(--leading-display, 1.15);
    letter-spacing: var(--tracking-tight, -0.02em);
    margin: 0;
  }

  .avakis-intro-text .ak-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin-right: 0.22em;
  }

  .avakis-intro-text .ak-word.ak-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Produkt-Wrapper: Desktop ── */
  .avakis-product-wrap {
    position: relative;
    width: 100%;
    height: min(42vh, 380px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    margin-top: 0;
  }

  .avakis-product-img {
    width: clamp(55%, 65%, 800px);
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(4);
    transform-origin: center center;
    will-change: transform;
    opacity: 0;
  }

  .avakis-scroll-cue {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: clamp(20px, 4vh, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(20, 20, 40, 0.14);
    box-shadow: 0 4px 18px rgba(20, 20, 40, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.45s ease, transform 0.45s ease;
    animation: none;
  }

  .avakis-scroll-cue svg {
    width: 24px;
    height: 24px;
  }

  .avakis-scroll-cue.is-hidden {
    opacity: 0;
    transform: translate(-50%, 8px);
    animation: none;
  }

  .avakis-scroll-cue.is-prompting:not(.is-hidden) {
    animation: avakisScrollCue 1.8s ease-in-out infinite;
  }

  @keyframes avakisScrollCue {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .avakis-scroll-cue.is-prompting:not(.is-hidden) {
      animation: none;
    }
  }

  .avakis-scroll-gap {
    height: clamp(28px, 5vh, 56px);
    flex-shrink: 0;
  }

  /* Desktop: Der Schlusstext sitzt dicht unter der Brille, damit die Zeilen
     nicht an den unteren Rand gedrueckt werden und darunter Weissraum bleibt. */
  @media (min-width: 768px) {
    .avakis-scroll-gap {
      height: clamp(24px, 4vh, 48px);
    }
  }

  .avakis-scroll-text {
    /* Textblock 1:1 nach Figma node 22:112 – --ak-u = 1 Design-Pixel,
       Breite 1237/1920. */
    --ak-u: min(1vw, 22px);
    position: relative;
    width: 64.43%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 4;
    flex-shrink: 0;
  }

  .avakis-scroll-text.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .avakis-scroll-headline {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans);
    font-size: calc(var(--ak-u) * 125 / 32) !important;   /* 75px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #000 !important;
  }
  /* Jeder Satz eine Zeile – wie im Design */
  .avakis-scroll-headline span { display: block; }

  .avakis-scroll-sub {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans);
    font-size: calc(var(--ak-u) * 125 / 48) !important;   /* 50px */
    font-weight: 300 !important;
    line-height: calc(var(--ak-u) * 35 / 8) !important;   /* 84px */
    letter-spacing: 0 !important;
    color: rgba(0, 0, 0, 0.6) !important;
  }

  .avakis-scroll-body {
    margin: calc(var(--ak-u) * 265 / 96) auto 0 !important;  /* 53px */
    padding: 0 !important;
    max-width: none;
    font-family: var(--font-sans);
    font-size: calc(var(--ak-u) * 25 / 16) !important;    /* 30px */
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
    color: rgba(0, 0, 0, 0.6) !important;
  }
  /* Im Design sind die Hervorhebungen nur schwarz, nicht fett */
  .avakis-scroll-body strong {
    font-weight: inherit;
    color: #000;
  }

  /* ── Mobile ≤ 767px (Lg-Breakpoint) ── */
  @media (max-width: 767px) {
    /* Symmetrisches Padding oben/unten → Brille vertikal zentriert */
    .avakis-scroll-sticky {
      padding-top: calc(var(--header-h) + clamp(12px, 2vh, 28px));
      padding-bottom: clamp(24px, 4vh, 40px);
      justify-content: center;
    }

    /* Produkt-Wrapper: gleiches internes Padding oben/unten */
    .avakis-product-wrap {
      height: min(38vh, 300px);
      padding-top: clamp(16px, 3vh, 32px);
      padding-bottom: clamp(16px, 3vh, 32px);
      box-sizing: border-box;
      margin-top: 0;
      margin-bottom: 0;
    }

    .avakis-product-img {
      width: 90%;
    }

    .avakis-scroll-cue {
      width: 40px;
      height: 40px;
      bottom: clamp(18px, 3vh, 28px);
    }

    /* Gap zwischen Brille und Textblock */
    .avakis-scroll-gap {
      height: clamp(16px, 2.5vh, 28px);
    }

    .avakis-scroll-text {
      --ak-u: clamp(12px, 3vw, 18px);
      width: 100%;
      padding: 0 var(--ak-gutter);
    }

    .avakis-scroll-headline {
      font-size: clamp(30px, 7.4vw, 46px) !important;
      line-height: 1.15 !important;
    }
    .avakis-scroll-headline span { display: inline; }

    .avakis-scroll-sub {
      font-size: clamp(19px, 4.6vw, 28px) !important;
      line-height: 1.4 !important;
      margin-top: calc(var(--ak-u) * 0.4) !important;
    }

    .avakis-scroll-body {
      font-size: clamp(15px, 3.7vw, 19px) !important;
      line-height: 1.5 !important;
      margin-top: calc(var(--ak-u) * 1.4) !important;
    }

    .avakis-intro-text p {
      font-size: clamp(20px, 5.5vw, 32px) !important;
    }
  }

  /* ── iPhone SE ≤ 400px ── */
  @media (max-width: 400px) {
    .avakis-scroll-sticky {
      padding-top: calc(var(--header-h) + clamp(8px, 1.5vh, 20px));
      padding-bottom: clamp(20px, 3vh, 32px);
    }
    .avakis-product-wrap {
      height: min(34vh, 240px);
      padding-top: clamp(12px, 2.5vh, 24px);
      padding-bottom: clamp(12px, 2.5vh, 24px);
    }
    .avakis-product-img {
      width: 100%;
    }
    .avakis-scroll-gap {
      height: clamp(12px, 2vh, 20px);
    }
    .avakis-scroll-text {
      --ak-u: clamp(10px, 2.6vw, 14px);
    }
  }

  /* ── Kurze Viewports / Landscape ── */
  @media (max-height: 700px) {
    .avakis-scroll-sticky {
      padding-top: calc(var(--header-h) + clamp(8px, 1.5vh, 20px));
      padding-bottom: clamp(20px, 3vh, 32px);
    }
    .avakis-product-wrap {
      height: min(38vh, 260px);
    }
    .avakis-scroll-gap {
      height: clamp(12px, 2vh, 24px);
    }
    .avakis-scroll-text {
      --ak-u: min(0.85vw, 16px);
    }
  }



  .avakis-bietet-section {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .avakis-bietet-bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/002.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .avakis-bietet-woman {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .avakis-bietet-woman img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 94%;
    max-width: none;
    display: block;
    object-fit: contain;
    object-position: bottom center;
  }

  .avakis-bietet-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .avakis-bietet-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xl);
    padding-left: var(--space-md);
    padding-right: var(--space-lg);
    box-sizing: border-box;
    gap: 0;
    min-width: 0;
    overflow: hidden;
  }

  .avakis-bietet-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .avakis-bietet-headline {
    font-family: var(--font-sans);
    font-size: clamp(var(--text-h1), 3.5vw, var(--text-display));
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-snug);
    margin: 0;
    white-space: normal;
    word-break: keep-all;
  }

  .avakis-bietet-headline strong { font-weight: 700; }

  .avakis-bietet-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    width: 100%;
  }

  .avakis-bietet-stat {
    border-top: 1.5px solid var(--color-text);
    padding-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .avakis-bietet-stat-title {
    font-family: var(--font-sans);
    font-size: clamp(var(--text-body), 2vw, var(--text-h1));
    font-weight: 400;
    color: var(--color-text);
    line-height: var(--leading-body);
    margin: 0;
    white-space: normal;
    word-break: keep-all;
  }

  .avakis-bietet-stat-title strong { font-weight: 700; }

  .avakis-bietet-stat-body {
    font-family: var(--font-sans);
    font-size: clamp(var(--text-body), 2vw, var(--text-h1));
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--leading-body);
    margin: 0;
    white-space: normal;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-bietet-text {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-bietet-text {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-bietet-text {
      padding-top: var(--space-xxl);
      padding-right: var(--space-md);
    }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-bietet-section {
      min-height: auto !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .avakis-bietet-woman {
      position: relative !important;
      order: 2;
      width: 100% !important;
      height: 95vw !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      overflow: hidden !important;
    }

    .avakis-bietet-woman img {
      position: relative !important;
      transform: none !important;
      left: auto !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center 5% !important;
      margin-left: 0 !important;
    }

    .avakis-bietet-inner {
      order: 1;
      display: block !important;
      min-height: auto !important;
      padding: 0 !important;
    }

    .avakis-bietet-text {
      width: 100% !important;
      padding-top: var(--space-lg) !important;
      padding-left: var(--space-md) !important;
      padding-right: var(--space-md) !important;
      padding-bottom: var(--space-lg) !important;
      gap: 0 !important;
      overflow: visible !important;
    }

    .avakis-bietet-content-wrap {
      width: 100% !important;
    }

    .avakis-bietet-headline {
      font-size: var(--text-h1) !important;
      white-space: normal !important;
    }

    .avakis-bietet-stats {
      margin-top: var(--space-lg) !important;
      width: 100% !important;
      flex-direction: column !important;
      gap: var(--space-sm) !important;
    }

    .avakis-bietet-stat {
      width: 100% !important;
    }

    .avakis-bietet-stat-title,
    .avakis-bietet-stat-body {
      font-size: var(--text-h2) !important;
      white-space: normal !important;
    }
  }

  @media (max-width: 400px) {
    .avakis-bietet-woman { height: 100vw !important; }
  }

.avakis-stats-section {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-white);
    padding: var(--space-xxl) var(--space-md) var(--space-xl);
  }
  
  .avakis-stats-inner {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
  }

  .avakis-stats-headline {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-xl) 0;
    max-width: 800px;
  }

  .avakis-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    align-items: stretch;
  }

  .avakis-stat-card {
    background: #FEE3BE;
    border-radius: 24px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    box-sizing: border-box;
  }

  .avakis-stat-card-label {
    font-family: var(--font-sans);
    font-size: var(--text-h2) !important;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: var(--tracking-normal);
    margin: 0;
    align-self: flex-start;
  }

  .avakis-stat-card-value {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    margin: 0;
    align-self: flex-start;
    font-size: clamp(40px, 8vw, 56px);
  }

  .avakis-stat-card-outline {
    background: #ffffff;
    border: 3.5px solid #FEE3BE;
    border-radius: 24px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    box-sizing: border-box;
  }

  .avakis-stat-card-outline-big {
    font-family: var(--font-sans);
    font-size: var(--text-h2) !important;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-heading);
    margin: 0 0 var(--space-xs) 0;
  }

  .avakis-stat-card-outline-body {
    font-family: var(--font-sans);
    font-size: var(--text-label) !important;
    font-weight: 400;
    color: var(--color-text);
    line-height: var(--leading-body);
    margin: 0 0 var(--space-xs) 0;
  }

  .avakis-stat-card-outline-note {
    font-family: var(--font-sans);
    font-size: var(--text-caption) !important;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-caption);
    margin: 0;
  }

  .avakis-stats-footnote {
    font-family: var(--font-sans);
    font-size: var(--text-body) !important;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: var(--tracking-normal);
    margin: var(--space-lg) 0 0 0;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-stats-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-stats-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-stats-cards     { grid-template-columns: repeat(2, 1fr); }
    .avakis-stat-card-value { font-size: clamp(48px, 10vw, 56px); }
    .avakis-stat-card-label { font-size: var(--text-h1) !important; }
    .avakis-stat-card,
    .avakis-stat-card-outline { min-height: 240px; }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-stats-section {
      padding: var(--space-lg) var(--space-md) !important;
    }
    .avakis-stats-headline {
      font-size: 30px !important;
      margin: 0 0 var(--space-lg) 0;
    }
    .avakis-stats-cards {
      grid-template-columns: 1fr !important;
      gap: var(--space-sm);
    }
    .avakis-stat-card {
      min-height: 160px !important;
      padding: var(--space-md) !important;
      justify-content: space-between !important;
    }
    .avakis-stat-card-label {
      font-size: var(--text-body) !important;
    }
    .avakis-stat-card-value {
      font-size: var(--text-display) !important;
      align-self: flex-end !important;
      text-align: right !important;
    }
    .avakis-stat-card-outline {
      min-height: 160px !important;
      padding: var(--space-md) !important;
      justify-content: space-between !important;
    }
    .avakis-stat-card-outline-big  { font-size: var(--text-h2) !important; }
    .avakis-stat-card-outline-body { font-size: var(--text-body) !important; }
    .avakis-stat-card-outline-note { font-size: var(--text-label) !important; }
  }

/* ── Testimonials ── */
/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS — 1:1 nach Figma "BUSINESS MODEL" (Frame 1920 × 829,
   node 74:639). Zitat, optionaler Name, Quellenzeile, drei Punkte.
   ══════════════════════════════════════════════════════════════════ */
.ak-testi {
  --ak-u: min(1vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: calc(var(--ak-u) * 16.7708) 0 calc(var(--ak-u) * 13.8021);
}

/* Alle Zitate liegen in derselben Rasterzelle – so springt die Höhe
   beim Wechsel nicht. */
.ak-testi__stack {
  display: grid;
  /* Alle Zitate teilen sich eine Rasterzelle: die Höhe richtet sich nach dem
     längsten, damit die Punkte beim Wechsel nicht springen. Oben ausgerichtet,
     damit das Zitat auf der Position aus dem Design steht. */
  align-items: start;
  width: 71.98%;   /* 1382/1920 */
}
.ak-testi__item {
  grid-area: 1 / 1;
  margin: 0;        /* figure-Standardrand */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.ak-testi__item.is-active {
  opacity: 1;
  visibility: visible;
}

.ak-testi__quote {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 125 / 48) !important;  /* 50px */
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: #000 !important;
}

.ak-testi__person {
  margin-top: calc(var(--ak-u) * 1.77083);             /* 34px */
  text-align: center;
}
.ak-testi__name {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 25 / 16) !important;   /* 30px */
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: #706f6e !important;
}
.ak-testi__source {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: calc(var(--ak-u) * 5 / 6) !important;     /* 16px */
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: #706f6e !important;
}

.ak-testi__dots {
  display: flex;
  gap: calc(var(--ak-u) * 0.885417);                   /* 17px */
  margin-top: calc(var(--ak-u) * 4.11458);             /* 79px */
}
.ak-testi__dot {
  width: calc(var(--ak-u) * 0.520833);                 /* 10px */
  height: calc(var(--ak-u) * 0.520833);
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ak-testi__dot:hover { background: #b3b3b3; }
.ak-testi__dot.is-active { background: #888; }

@media (min-width: 1200px) {
  .ak-testi {
    padding-top: clamp(96px, 7vw, 140px);
    padding-bottom: clamp(80px, 6vw, 120px);
  }

  .ak-testi__dots {
    margin-top: clamp(36px, 2.25vw, 46px);
  }
}

@media (max-width: 1199px) {
  .ak-testi {
    --ak-u: clamp(12px, 1.9vw, 20px);
    padding: calc(var(--ak-u) * 4.5) var(--ak-gutter);
  }
  /* Auf schmalen Screens fällt die reservierte Höhe stärker auf – das
     Zitat sitzt deshalb mittig in der Zelle statt oben. */
  .ak-testi__stack { width: 100%; align-items: center; }
  .ak-testi__quote { font-size: clamp(24px, 5.6vw, 40px) !important; }
  .ak-testi__person { margin-top: calc(var(--ak-u) * 1.4); }
  .ak-testi__name { font-size: clamp(18px, 4.2vw, 26px) !important; }
  .ak-testi__source { font-size: clamp(14px, 3.4vw, 16px) !important; }
  .ak-testi__dots { margin-top: calc(var(--ak-u) * 2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-testi__item { transition: none; }
}

.avakis-cases-section {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      #FEE3BE 0%,
      #FEE3BE 10%,
      #FDF0DC 22%,
      #FDF8F0 38%,
      #ffffff 52%,
      #E0DCF4 78%,
      #C8C4E8 100%
    );
    padding: var(--space-xxl) var(--space-md) var(--space-xl);
  }

  .avakis-cases-inner {
    max-width: 1080px;
    margin: 0 auto;
  }

  .avakis-cases-headline {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 auto var(--space-xl) auto;
    max-width: none;
  }

  .avakis-cases-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .avakis-case-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    height: 500px;
    max-width: 750px;
    margin: 0 auto;
    width: 100%;
  }

  .avakis-case-text {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .avakis-case-title {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-md) 0;
  }

  .avakis-case-body {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
    margin: 0;
  }

  .avakis-case-image {
    overflow: hidden;
    border-radius: 0 24px 24px 0;
  }

  .avakis-case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-cases-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-cases-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-case-card { height: 400px; }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-cases-section {
      padding: var(--space-lg) var(--space-md) !important;
    }
    .avakis-cases-headline {
      font-size: 30px;
      margin-bottom: var(--space-lg);
    }
    .avakis-cases-list     { gap: var(--space-sm); }
    .avakis-case-card {
      grid-template-columns: 1fr;
      grid-template-rows: 260px auto;
      height: auto;
      max-width: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .avakis-case-text {
      padding: var(--space-sm);
      order: 2;
      background: #ffffff;
      border-radius: 0 0 24px 24px;
    }
    .avakis-case-image {
      border-radius: 24px 24px 0 0;
      order: 1;
      height: 260px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .avakis-case-title { font-size: var(--text-h2); margin-bottom: var(--space-sm); }
    .avakis-case-body  { font-size: var(--text-label); }

    .avakis-case-card--energie .avakis-case-image img  { object-position: center 15%; }
    .avakis-case-card--fokus .avakis-case-image img    { object-position: center 20%; }
    .avakis-case-card--schlafen .avakis-case-image img { object-position: center 25%; }
    .avakis-case-card--winter .avakis-case-image img   { object-position: center 20%; }
    .avakis-case-card--jetlag .avakis-case-image img   { object-position: center 30%; }
  }

  @media (max-width: 400px) {
    .avakis-case-card  { grid-template-rows: 220px auto; }
    .avakis-case-image { height: 220px; }
  }

.avakis-steps-section {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-white, #ffffff);
    padding: var(--space-xxl, 80px) var(--space-md, 24px) var(--space-xl, 64px);
  }

  .avakis-steps-inner {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
  }

  .avakis-steps-headline {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-text, #111111);
    line-height: var(--leading-display, 1.1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-xl, 64px) 0;
    max-width: 800px;
  }

  .avakis-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm, 16px);
    align-items: start;
  }

  .avakis-step-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .avakis-step-number {
    font-family: var(--font-sans);
    font-size: var(--text-display, 48px);
    font-weight: 600;
    color: #DCDCFF;
    line-height: 1;
    letter-spacing: var(--tracking-tight, -0.02em);
    margin: 0 0 var(--space-lg, 48px) 0;
  }

  .avakis-step-title {
    font-family: var(--font-sans);
    font-size: var(--text-lead, 18px);
    font-weight: 700;
    color: var(--color-text, #111111);
    letter-spacing: var(--tracking-normal, 0em);
    line-height: var(--leading-heading, 1.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 var(--space-sm, 16px) 0;
  }

  .avakis-step-body {
    font-family: var(--font-sans);
    font-size: var(--text-body, 16px);
    font-weight: 400;
    color: var(--color-text, #111111);
    line-height: var(--leading-body, 1.6);
    margin: 0;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-steps-section {
      padding-top: var(--space-xxxl, 120px);
      padding-bottom: var(--space-xxl, 80px);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-steps-section {
      padding-top: var(--space-xl, 64px);
      padding-bottom: var(--space-lg, 48px);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-steps-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md, 24px);
    }
    .avakis-step-number {
      font-size: var(--text-display, 48px);
      margin-bottom: var(--space-md, 24px);
    }
    .avakis-step-title {
      white-space: normal;
    }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-steps-section {
      padding: var(--space-lg, 48px) var(--space-md, 24px) !important;
    }
    .avakis-steps-headline {
      font-size: 30px !important;
      margin: 0 0 var(--space-lg, 48px) 0;
    }
    .avakis-steps-grid {
      grid-template-columns: 1fr !important;
      gap: var(--space-md, 24px);
    }
    .avakis-step-number {
      font-size: var(--text-display, 48px) !important;
      margin-bottom: var(--space-xs, 8px) !important;
    }
    .avakis-step-title {
      white-space: normal;
      font-size: var(--text-body, 16px) !important;
    }
    .avakis-step-body {
      font-size: var(--text-body, 16px) !important;
    }
  }

.ak-platform-section {
    width: 100%;
    box-sizing: border-box;
    background:
      radial-gradient(circle at 72% 38%, rgba(213, 184, 238, 0.58) 0%, rgba(255,255,255,0) 34%),
      linear-gradient(180deg, #DCDCFF 0%, #ffffff 18%, #ffffff 82%, #DCDCFF 100%);
    padding: var(--space-xxxl) var(--space-md) var(--space-xs);
    overflow: hidden;
  }

  .ak-platform-inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--color-text);
  }

  .ak-platform-header {
    text-align: center;
    margin: 0 0 var(--space-xl) 0;
  }

  .ak-platform-overline {
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
    margin: 0 0 var(--space-xs) 0;
  }

  .ak-platform-title {
    font-size: var(--text-display);
    font-weight: 700;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    margin: 0;
  }

  .ak-platform-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 478 / 780;
    overflow: visible;
  }

  .ak-platform-image {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  .ak-platform-product-top {
    width: 80%;
    left: -20%;
    top: -10%;
  }

  .ak-platform-app-main {
    width: 50%;
    left: 56%;
    top: 26%;
    z-index: 2;
  }

  .ak-platform-product-bottom {
    width: 76%;
    left: -20%;
    top: 55%;
  }

  .ak-platform-text {
    position: absolute;
    z-index: 3;
  }

  .ak-platform-text h3 {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-xs) 0;
  }

  .ak-platform-text p {
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
    margin: 0;
  }

  .ak-platform-text-spuerbar {
    width: 31%;
    left: 70%;
    top: 8%;
  }

  .ak-platform-text-anpassbar {
    width: 30%;
    left: 2%;
    top: 42%;
  }

  .ak-platform-text-fundiert {
    width: 31%;
    left: 70%;
    top: 69%;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .ak-platform-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .ak-platform-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .ak-platform-inner { max-width: 1080px; }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .ak-platform-section {
      padding: var(--space-lg) var(--space-md) var(--space-lg) !important;
    }

    .ak-platform-inner {
      width: 100%;
      max-width: 520px;
    }

    .ak-platform-header {
      margin-bottom: var(--space-md);
    }

    .ak-platform-title {
      font-size: 30px !important;
    }

    .ak-platform-stage {
      aspect-ratio: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .ak-platform-image,
    .ak-platform-text {
      position: static;
    }

    .ak-platform-mobile-block {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .ak-platform-product-top {
      width: 100%;
      margin-left: -2%;
    }

    .ak-platform-product-bottom {
      width: 110%;
      margin-left: 0%;
    }

    .ak-platform-apps {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .ak-platform-app-main {
      position: absolute;
      width: 78%;
      left: 50%;
      transform: translateX(-50%);
      top: 0%;
    }

    .ak-platform-text {
      width: 100%;
      max-width: 360px;
    }

    .ak-platform-text h3 {
      font-size: var(--text-h2) !important;
    }

    .ak-platform-text p {
      font-size: var(--text-label) !important;
    }
  }

  /* ── iPhone SE (≤ 480px) ── */
  @media (max-width: 480px) {
    .ak-platform-text h3 {
      font-size: var(--text-body) !important;
    }

    .ak-platform-text p {
      font-size: var(--text-label) !important;
      line-height: var(--leading-body);
    }
  }

.avakis-table-section {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    padding: var(--space-xxl) var(--space-md) var(--space-xl);
  }
  .avakis-table-inner {
    max-width: 1080px;
    margin: 0 auto;
  }
  .avakis-table-headline {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 var(--space-xl) 0;
  }
  .avakis-table {
    width: 100%;
    border-collapse: collapse;
  }
  .avakis-table thead th {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-bottom: 1px solid var(--color-surface);
    vertical-align: bottom;
  }
  .avakis-table thead th:first-child {
    text-align: left;
  }
  .avakis-table thead th.col-avakis {
    color: #6469A2;
    font-size: var(--text-h2);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    border-bottom: 1px solid var(--color-surface);
    background: rgba(225, 227, 255, 0.30);
    border-radius: 16px 16px 0 0;
  }
  .th-icon {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 8px auto;
    object-fit: contain;
  }
  .th-product {
    display: block;
  }
  .th-label {
    display: inline-block;
  }
  .th-label--criterion {
    visibility: hidden;
  }
  .avakis-table tbody tr {
    border-bottom: 1px solid var(--color-surface);
  }
  .avakis-table tbody tr:last-child {
    border-bottom: none;
  }
  .avakis-table tbody td {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    vertical-align: middle;
  }
  .avakis-table tbody td:first-child {
    text-align: left;
    color: var(--color-text);
    font-size: var(--text-label);
  }
  .avakis-table tbody td.col-avakis {
    color: #6469A2;
    font-weight: 700;
    background: rgba(225, 227, 255, 0.30);
  }
  .avakis-table tbody tr:last-child td.col-avakis {
    border-radius: 0 0 16px 16px;
  }
  .val-yes {
    font-weight: 700;
    color: var(--color-text);
  }
  .val-yes.avakis-yes {
    color: #6469A2;
  }
  .val-no {
    font-weight: 400;
    color: var(--color-text-muted);
  }
  .val-no.avakis-neutral {
    color: #666;
  }
  .avakis-table-note {
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-align: center;
    line-height: var(--leading-caption);
    margin: var(--space-md) 0 0 0;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-table-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-table-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-table-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-table-section {
      padding: var(--space-lg) var(--space-md) !important;
    }
    .avakis-table-headline {
      font-size: 30px !important;
      margin: 0 0 var(--space-lg) 0 !important;
    }
    .avakis-table {
      display: table;
      width: 100%;
      table-layout: fixed;
      border: 1px solid var(--color-surface);
      border-radius: 18px;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      background: #fff;
    }
    .avakis-table thead {
      display: table-header-group;
    }
    .avakis-table thead tr {
      display: table-row;
    }
    .avakis-table thead th {
      display: table-cell;
      height: 168px;
      padding: 10px 4px;
      border-bottom: 1px solid var(--color-surface);
      border-left: 1px solid var(--color-surface);
      vertical-align: middle;
      overflow: hidden;
    }
    .avakis-table thead th:first-child {
      width: 44%;
      padding: 12px;
      border-left: 0;
      vertical-align: bottom;
    }
    .avakis-table thead th:not(:first-child) {
      width: 14%;
      position: relative;
    }
    .avakis-table thead th.col-avakis {
      border-radius: 0;
      font-size: inherit;
    }
    .avakis-table .th-icon {
      display: block;
      width: clamp(40px, 8.7vw, 56px);
      height: clamp(40px, 8.7vw, 56px);
      order: 2;
      margin: 0;
      object-fit: contain;
    }
    .avakis-table .th-icon--avakis {
      width: clamp(40px, 8.7vw, 56px);
    }
    .avakis-table .th-product {
      position: absolute;
      inset: 10px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .avakis-table .th-label {
      display: inline-flex;
      order: 1;
      align-items: center;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: nowrap;
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0;
    }
    .avakis-table thead th.col-avakis .th-label {
      font-size: 17px;
      font-weight: 600;
    }
    .avakis-table .th-label--criterion {
      visibility: visible;
      display: inline-block;
      writing-mode: horizontal-tb;
      transform: none;
      color: var(--color-text);
      font-size: 13px;
      font-weight: 600;
    }
    .avakis-table tbody {
      display: table-row-group;
    }
    .avakis-table tbody tr {
      display: table-row;
      margin: 0;
      border: 0;
      border-radius: 0;
    }
    .avakis-table tbody td {
      display: table-cell;
      width: auto;
      padding: 12px 4px;
      border-top: 1px solid var(--color-surface);
      border-left: 1px solid var(--color-surface);
      text-align: center;
      vertical-align: middle;
    }
    .avakis-table tbody td:first-child {
      width: 44%;
      padding: 12px;
      border-left: 0;
      background: #fff;
      font-weight: 600;
      color: var(--color-text);
      font-size: 13px;
      line-height: 1.25;
      text-align: left;
      hyphens: auto;
      overflow-wrap: anywhere;
      border-radius: 0;
    }
    .avakis-table tbody td::before {
      display: none;
    }
    .avakis-table tbody td.col-avakis {
      background: rgba(225, 227, 255, 0.30);
    }
    .avakis-table tbody td .val-yes,
    .avakis-table tbody td .val-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      min-width: 0;
      padding: 0;
      border-radius: 50%;
      font-size: 0;
      line-height: 1;
      text-align: center;
    }
    .avakis-table tbody td .val-yes {
      background: #e8eafc;
    }
    .avakis-table tbody td .val-no {
      background: #f0f0f3;
    }
    .avakis-table tbody td .val-yes::after,
    .avakis-table tbody td .val-no::after {
      font-size: 15px;
      line-height: 1;
    }
    .avakis-table tbody td .val-yes::after {
      content: '✓';
      font-weight: 700;
    }
    .avakis-table tbody td .val-no::after {
      content: '–';
      font-weight: 500;
    }
    .avakis-table tbody tr:last-child td.col-avakis {
      border-radius: 0;
    }
    .avakis-table-note {
      margin-top: var(--space-sm);
    }
  }

  @media (max-width: 420px) {
    .avakis-table thead th {
      height: 160px;
      padding-left: 2px;
      padding-right: 2px;
    }
    .avakis-table .th-icon {
      width: 40px;
      height: 40px;
    }
    .avakis-table .th-icon--avakis {
      width: 40px;
    }
    .avakis-table .th-product {
      inset: 8px 1px;
    }
    .avakis-table .th-label {
      font-size: 11px;
    }
    .avakis-table thead th.col-avakis .th-label {
      font-size: 15px;
    }
  }

* { box-sizing: border-box; }

  .ak-spectrum-section {
    width: 100%;
    background: linear-gradient(
      to bottom,
      #D4D8FF 0%,
      #e8eaff 18%,
      #f4f5ff 32%,
      #ffffff 52%
    );
    padding: var(--space-xxl) var(--space-xxl) var(--space-lg);
    overflow: hidden;
  }

  .ak-wrap {
    font-family: var(--font-sans);
    max-width: 1080px;
    margin: 0 auto;
    background: transparent;
  }

  .ak-spectrum-intro {
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .ak-spectrum-overline {
    font-size: var(--text-overline);
    font-weight: 600;
    color: #6469A2;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0 0 var(--space-sm) 0;
  }

  .ak-spectrum-title {
    font-size: var(--text-display);
    font-weight: 700;
    color: #1a1a1a;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-md) 0;
  }

  .ak-spectrum-title-muted { color: #6f6f6f; }

  .ak-spectrum-copy {
    font-size: var(--text-lead);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    max-width: 720px;
    margin: 0 auto;
  }

  .ak-legend-row {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
  }

  .ak-legend-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 148px;
  }

  .ak-leg-title {
    font-size: var(--text-caption);
    font-weight: 700;
    color: #6f6f6f;
  }

  .ak-leg-title.dark { color: #1a1a3a; }

  .ak-leg-desc {
    font-size: var(--text-caption);
    color: #999;
    line-height: 1.35;
  }

  .ak-leg-line { width: 100%; height: 2px; margin-top: 2px; }

  .ak-leg-line.dashed {
    background: repeating-linear-gradient(90deg, #9898c8 0, #9898c8 8px, transparent 8px, transparent 15px);
  }

  .ak-leg-line.solid { background: #6469A2; height: 2.5px; }

  .ak-svg { width: 100%; height: auto; display: block; overflow: visible; }
  /* Diagramm-Beschriftungen in Inter statt System-sans (überschreibt die
     Inline-font-family-Attribute im SVG). */
  .ak-svg text { font-family: var(--font-sans); }

  #ak-line {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: drawLine 3.2s cubic-bezier(0.4,0,0.2,1) forwards 0.4s;
  }

  #ak-fill { opacity: 0; animation: showFill 1s ease forwards 3s; }
  #ak-dot  { opacity: 0; animation: showFill 0.4s ease forwards 3.5s; }

  @keyframes drawLine { to { stroke-dashoffset: 0; } }
  @keyframes showFill { to { opacity: 1; } }

  .ak-icons { display: flex; align-items: stretch; margin-top: var(--space-sm); }

  .ak-icon-block-1 {
    width: 19%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs);
  }

  .ak-icon-block-2 {
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs);
  }

  .ak-icon-block-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs);
  }

  .ak-icon-sep { width: 1px; background: #e8e8e8; flex-shrink: 0; align-self: stretch; }

  .ak-icon-svg { width: 28px; height: 28px; color: #6B5CE7; }
  .ak-icon-svg.grey-icon { color: #aaaaaa; }

  .ak-icon-label {
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    color: #1a1a3a;
  }

  .ak-y-label { font-size: 11px; fill: #bbb; font-family: sans-serif; }

  .ak-spectrum-bottom-info { text-align: center; margin-top: var(--space-xl); }

  .ak-spectrum-bottom-icon {
    width: 48px; height: 48px; color: #6469A2;
    margin: 0 auto var(--space-sm); display: block;
  }

  .ak-spectrum-bottom-title {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: 700;
    color: #6469A2;
    line-height: var(--leading-heading);
    margin: 0 0 var(--space-sm) 0;
  }

  .ak-spectrum-bottom-copy {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    margin: 0;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .ak-spectrum-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .ak-spectrum-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .ak-spectrum-section {
      padding: var(--space-lg) var(--space-md) var(--space-lg) !important;
    }

    .ak-wrap {
      padding: 0;
    }

    .ak-spectrum-intro {
      margin-bottom: var(--space-lg);
      padding: 0;
    }

    .ak-spectrum-title  { font-size: 30px !important; }
    .ak-spectrum-copy   { font-size: var(--text-label); }

    .ak-legend-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
      justify-content: unset;
      margin-bottom: var(--space-lg);
    }

    .ak-legend-item {
      max-width: 100%;
      width: auto;
    }

    .ak-legend-item:first-child { align-items: flex-start; }
    .ak-legend-item:last-child  { align-items: flex-start; }

    .ak-svg {
      margin-top: 0;
      width: 100%;
    }

    .ak-icon-label            { font-size: var(--text-overline); }
    .ak-spectrum-bottom-title { font-size: var(--text-h2) !important; }
    .ak-spectrum-bottom-copy  { font-size: var(--text-caption) !important; }
  }

  @media (max-width: 400px) {
    .ak-icon-label { font-size: 9px; }
  }

.avakis-research-section {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient( #ffffff 100%);
    padding: var(--space-xxxl) var(--space-md) var(--space-lg);
    text-align: center;
  }

  .avakis-research-inner {
    max-width: 1080px;
    margin: 0 auto;
  }

  .avakis-research-headline {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-lg) 0;
  }

  .avakis-research-body {
    font-family: var(--font-sans);
    font-size: var(--text-lead);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    letter-spacing: -0.005em;
    max-width: 780px;
    margin: 0 auto var(--space-xxl);
  }

  .avakis-research-cols {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    justify-content: center;
  }

  .avakis-research-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .avakis-research-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avakis-research-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-text);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .avakis-research-col-title {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-heading);
    margin: 0 0 var(--space-sm) 0;
  }

  .avakis-research-col-body {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
    margin: 0 0 var(--space-sm) 0;
    flex: 1;
  }

  .avakis-research-link {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    color: #6469A2;
    text-decoration: none;
    letter-spacing: var(--tracking-normal);
    margin-top: auto;
  }

  .avakis-research-link:hover {
    text-decoration: underline;
  }

  /* ── Large Desktop (≥ 1440px) ── */
  @media (min-width: 1440px) {
    .avakis-research-section {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxl);
    }
  }

  /* ── Laptop (1025px – 1439px) ── */
  @media (min-width: 1025px) and (max-width: 1439px) {
    .avakis-research-section {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-lg);
    }
  }

  /* ── iPad (≤ 1024px) ── */
  @media (max-width: 1024px) {
    .avakis-research-cols { gap: var(--space-sm); }
  }

  /* ── Mobile (≤ 767px) ── */
  @media (max-width: 767px) {
    .avakis-research-section  { padding: var(--space-lg) var(--space-md) !important; }
    .avakis-research-headline { font-size: 30px !important; margin-bottom: var(--space-lg) !important; }
    .avakis-research-body     { font-size: var(--text-body) !important; margin-bottom: var(--space-lg) !important; }
    .avakis-research-cols     { flex-direction: column; gap: var(--space-lg); }
    .avakis-research-col      { max-width: 360px; margin: 0 auto; }
    .avakis-research-col-title { font-size: var(--text-h2) !important; }
    .avakis-research-col-body  { font-size: var(--text-caption) !important; }
  }

.ak-vip-section {
    width: 100%;
    /* Der CTA braucht keine volle Bildschirmhoehe: So bleibt weniger leerer
       Raum zwischen dem letzten Early-Access-Element und dem Footer-Logo. */
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #e8eaf6 25%, #c5cae9 60%, #9fa8da 100%);
    padding: 60px 24px;
    box-sizing: border-box;
  }

  .ak-vip-inner {
    max-width: 680px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .ak-vip-title {
    font-family: var(--font-sans);
    font-size: clamp(30px, 4vw, 44px) !important;
    font-weight: 600 !important;
    color: #2e3a6e !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  .ak-vip-desc {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.8vw, 17px) !important;
    font-weight: 400 !important;
    color: #6469A2 !important;
    line-height: 1.6 !important;
    margin: 0 0 48px 0 !important;
    padding: 0 !important;
    max-width: 520px;
  }

  .ak-vip-list {
    list-style: none;
    margin: 0 auto 48px auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
    text-align: left;
  }

  .ak-vip-list-item {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.8vw, 17px) !important;
    font-weight: 400 !important;
    color: #6469A2 !important;
    line-height: 1.5 !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }

  .ak-vip-list-item::before {
    content: '\2713';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2e3a6e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
  }

  .ak-vip-saving {
    font-family: var(--font-sans);
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 700 !important;
    color: #2e3a6e !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
  }

  .ak-vip-btn {
    font-family: var(--font-sans);
    font-size: clamp(15px, 1.8vw, 17px) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: #1a1a1a !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 18px 48px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: opacity 0.2s !important;
    letter-spacing: -0.01em !important;
  }

  .ak-vip-btn:hover {
    opacity: 0.85 !important;
  }

  @media (max-width: 767px) {
    .ak-vip-section  { padding: 48px 20px; }
    .ak-vip-btn      { padding: 16px 36px !important; width: 100% !important; text-align: center !important; }
  }

.avakis-faq-outer {
    width: 100%;
    background: linear-gradient(180deg, #9fa8da 0%, #929BD0 60%, #6985D7 100%);
    padding: 80px 0 100px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .avakis-faq-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
  }

  .avakis-faq-title {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 44px !important;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 60px 0;
  }

  .avakis-faq-item {
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  .avakis-faq-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  .avakis-faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    gap: 24px;
  }

  .avakis-faq-question span {
    font-family: var(--font-sans);
    font-size: var(--text-body) !important;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-body);
  }

  .avakis-faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
  }

  .avakis-faq-icon::before,
  .avakis-faq-icon::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .avakis-faq-icon::before {
    width: 14px;
    height: 1.5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .avakis-faq-icon::after {
    width: 1.5px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .avakis-faq-item.open .avakis-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .avakis-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
  }

  .avakis-faq-item.open .avakis-faq-answer {
    max-height: 400px;
  }

  .avakis-faq-answer p {
    font-family: var(--font-sans);
    font-size: var(--text-label) !important;
    font-weight: 400;
    color: rgba(255,255,255,0.80);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
    margin: 0;
    padding: 0 40px 28px 0;
  }

  @media (max-width: 1024px) {
    .avakis-faq-outer   { padding: 60px 0 80px; }
    .avakis-faq-section { padding: 0 36px; }
    .avakis-faq-title   { font-size: var(--text-h1) !important; margin-bottom: 48px; }
    .avakis-faq-question span { font-size: var(--text-body) !important; }
    .avakis-faq-answer p { font-size: var(--text-label) !important; }
  }

  @media (max-width: 767px) {
    .avakis-faq-outer {
      padding: var(--space-lg) 0 var(--space-xl);
      width: 100% !important;
      margin-left: 0 !important;
      left: 0 !important;
      position: relative !important;
    }
    .avakis-faq-section { padding: 0 var(--space-md); }
    .avakis-faq-title   { font-size: 30px !important; margin-bottom: var(--space-lg); }
    .avakis-faq-question { padding: 22px 0; }
    .avakis-faq-question span { font-size: var(--text-label) !important; }
    .avakis-faq-answer p { font-size: var(--text-label) !important; padding-bottom: 22px; }
  }

.ak-footer-wrap {
    width: 100%;
  }
  .ak-footer-section {
    position: relative;
    height: 220vh;   /* 100 andocken + 120 reiner Farbweg */
  }
  /* Logo, Claim und Links stehen fest im Bild — es wandert nichts mehr, und
     damit schiebt sich auch keine Schrift mehr uebereinander. Das Einzige,
     was der Scrollweg noch treibt, ist die Farbe. */
  .ak-footer-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 8vh, 110px);
    padding: calc(var(--header-h, 60px) + 4vh) 0 6vh;
    box-sizing: border-box;
  }
  /* Der Verlauf ist doppelt so hoch wie das Bild — sichtbar ist immer die
     Haelfte. Die erste Haelfte (Position 0 %) ist genau der Zielzustand:
     Blauviolett oben, Pfirsich unten. Er steht also schon, sobald das Logo
     erscheint; das Weiterscrollen schiebt nur noch in die waermere zweite
     Haelfte. Vorher lief er ueber die vierfache Hoehe und war an dieser
     Stelle erst auf halbem Weg. */
  .ak-footer-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      #9FA8DA 0%,
      #ADAAE2 12.5%,
      #B9B4E0 25%,
      #C4BBDC 35%,
      #D8C3CF 42.5%,
      #ECC9BC 47.5%,
      #F2CDB8 50%,
      #F0C6AC 62%,
      #F2BF9C 75%,
      #F6C08C 88%,
      #FFB27F 100%
    );
    background-size: 100% 200%;
    background-position: 0% 0%;
    will-change: background-position;
    z-index: 0;
  }

  .ak-footer-logo-lock {
    position: relative;
    z-index: 3;
    width: min(50%, 720px);
    container-type: inline-size;
    text-align: center;
    pointer-events: none;
  }
  .ak-footer-content {
    position: relative;
    z-index: 2;
    width: min(50%, 720px);
    box-sizing: border-box;
    padding: 0;
  }
  .ak-footer-logo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 auto;
  }
  /* Claim wie im Logo: gleiche Schrift, fett, eng, dunkel. */
  .ak-footer-tagline {
    margin: clamp(12px, 1.4vw, 26px) 0 0;
    color: #14141c;
    font-family: var(--font-sans);
    /* 7.2307 % der Lockup-Breite entsprechen bei Inter Bold exakt der
       Wortbreite von "Wearable Daylight Experience". Damit liegen die
       sichtbaren Textkanten bei jeder responsiven Groesse auf den Kanten
       der darueberliegenden Logo-Box. !important schlaegt die globale
       mobile p-Schriftgroesse. */
    font-size: 7.2307cqw !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    white-space: nowrap;
  }
  .ak-footer-legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .ak-footer-legal-links a {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    font-weight: 400;
    color: rgba(20, 20, 28, 0.66);
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.2s ease;
  }
  .ak-footer-legal-links a:hover { color: #14141c; }
  .ak-footer-copyright {
    width: 50%;
    max-width: 720px;
    margin: var(--space-lg) auto 0 auto;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    color: rgba(20, 20, 28, 0.45);
  }
  @media (max-width: 1024px) {
    .ak-footer-logo-lock { width: 70%; }
  }
  @media (max-width: 767px) {
    /* Kein Andocken: der Footer ist so hoch, wie sein Inhalt braucht. Sonst
       muesste alles in 100vh passen und wuerde sich auf kleinen Screens
       ueberlappen. Der Verlauf steht dort fest auf seiner ersten Haelfte. */
    .ak-footer-section {
      height: auto;
    }
    .ak-footer-sticky {
      position: static;
      height: auto;
      min-height: 100svh;
      gap: clamp(40px, 7vh, 72px);
      padding: calc(var(--header-h, 60px) + 6vh) 0 8vh;
    }
    .ak-footer-gradient {
      background-position: 0% 0% !important;
    }
    .ak-footer-logo-lock {
      width: 86%;
    }
    .ak-footer-content {
      width: 100%;
      padding: 0 var(--space-sm) !important;
    }
    .ak-footer-logo {
      width: 100%;
    }
    .ak-footer-tagline {
      margin-top: 12px;
    }
    .ak-footer-legal-links { width: 90%; }
    .ak-footer-copyright {
      width: 90%;
      margin-top: var(--space-md);
    }
  }

/* ── Popup Overlay ── */
  .vip-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .vip-popup-overlay.active {
    display: flex;
    opacity: 1;
  }

  /* ── Popup Container ── */
  .vip-popup {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-sans);
  }

  .vip-popup-overlay.active .vip-popup {
    transform: translateY(0);
  }

  /* ── Close Button ── */
  .vip-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #555;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 10;
    line-height: 1;
  }

  .vip-popup-close:hover {
    background: #e0e0e0;
    color: #000;
  }

  /* ── Header Section ── */
  .vip-popup-header {
    padding: 40px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .vip-popup-badge {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
  }

  .vip-popup-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px;
    line-height: 1.3;
  }

  .vip-popup-header p {
    font-size: 15px;
    color: #555;
    margin: 0;
    line-height: 1.6;
  }

  /* ── Benefits Section ── */
  .vip-popup-benefits {
    padding: 24px 32px;
    background: #fafafa;
  }

  .vip-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
  }

  .vip-benefit:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  .vip-benefit-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .vip-benefit-text {
    flex: 1;
  }

  .vip-benefit-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
  }

  .vip-benefit-text span {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
  }

  /* ── Form Section ── */
  .vip-popup-form {
    padding: 24px 32px 32px;
  }

  .vip-popup-form p.form-intro {
    font-size: 14px;
    color: #555;
    margin: 0 0 16px;
    text-align: center;
  }

  .vip-popup-form .vip-input {
    width: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--font-sans);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 12px;
  }

  .vip-popup-form .vip-input:last-of-type {
    margin-bottom: 0;
  }

  .vip-popup-form .vip-input:focus {
    border-color: #000;
  }

  .vip-popup-form .vip-input::placeholder {
    color: #aaa;
  }

  .vip-popup-form .vip-optin-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0;
  }

  .vip-popup-form .vip-optin-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
  }

  .vip-popup-form .vip-optin-row span {
    font-size: 13px;
    font-family: var(--font-sans);
    color: #555;
    line-height: 1.4;
  }

  .vip-popup-form .vip-optin-row a {
    color: #555;
    text-decoration: underline;
  }

  .vip-popup-form .vip-declaration {
    font-size: 12px;
    color: #999;
    text-align: left;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .vip-popup-form .vip-declaration a {
    color: #999;
    text-decoration: underline;
  }

  .vip-popup-form .vip-submit {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    letter-spacing: 0.5px;
  }

  .vip-popup-form .vip-submit:hover {
    background: #333;
  }

  .vip-popup-form .vip-submit:disabled {
    background: #666;
    cursor: not-allowed;
  }

  .vip-popup-form .vip-msg {
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
    font-family: var(--font-sans);
    display: none;
    margin-top: 12px;
  }

  .vip-popup-form .vip-msg.success {
    color: #085229;
    background-color: #e7faf0;
    border: 1px solid #13ce66;
  }

  .vip-popup-form .vip-msg.error {
    color: #661d1d;
    background-color: #ffeded;
    border: 1px solid #ff4949;
  }

  .vip-popup-form .vip-error-field {
    font-size: 13px;
    color: #661d1d;
    margin-top: 4px;
    display: none;
  }

  /* ── Mobile ── */
  @media (max-width: 560px) {
    .vip-popup {
      border-radius: 12px;
    }

    .vip-popup-header,
    .vip-popup-benefits,
    .vip-popup-form {
      padding-left: 20px;
      padding-right: 20px;
    }

    .vip-popup-header h2 {
      font-size: 20px;
    }
  }

/* ── Scroll fade-in (Cases / Steps cards) ── */
@media (prefers-reduced-motion: no-preference) {
  .ak-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--fade-delay, 0s);
  }
  .ak-fade-in.ak-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  }

/* ══════════════════════════════════════════════════════════════════
   ZURUECK NACH OBEN
   Ein einzelner Pfeil unten rechts, der im letzten Drittel der Seite
   einblendet. Die fruehere Fortschritts-Haarlinie ist entfallen — sie
   hat neben dem Inhalt mehr gestoert als geholfen.
   ══════════════════════════════════════════════════════════════════ */
.ak-scrollnav {
  position: fixed;
  z-index: 40;
  right: clamp(16px, 2vw, 34px);
  bottom: calc(clamp(16px, 2vw, 34px) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

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

.ak-scrollnav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(20, 20, 28, 0.08);
  border-radius: 50%;
  color: #14141c;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(20, 20, 28, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ak-scrollnav__btn svg {
  width: 19px;
  height: 19px;
}

.ak-scrollnav__btn:hover,
.ak-scrollnav__btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .ak-scrollnav,
  .ak-scrollnav__btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE 1:1 — Figma-Frames 585 / 586 / 587 (je 585 × 1193)
   Die Frames sind ein iPhone-Screen in 1.5-facher Auflösung:
   585 / 1.5 = 390 CSS-Pixel Viewportbreite. --m ist deshalb genau
   ein Design-Pixel (390 px Viewport → 1 px), alle Maße darunter sind
   die Figma-Werte geteilt durch 1.5.
   Die schwarze Kopfleiste des Frames (74 → 49.3 px) ist der echte
   Header, das avakis-Logo bleibt darin stehen.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  :root {
    --header-h: 50px;      /* 74/1.5 */
  }
  .site-header__wordmark { font-size: 20px; }

  /* ── Frame 585: Hero ───────────────────────────────────────────── */
  .ak-hero {
    --m: 0.25641vw;
    display: block;
    height: calc(100svh - var(--header-h, 50px));
    /* Auf sehr flachen Fenstern faellt der Frame nicht unter die Hoehe,
       die Text, CTA und Trust-Leiste brauchen. */
    min-height: calc(430 * var(--m));
    /* Figma 147.99°, #D3D6FF 6.84% → rgba(245,183,152,0) 96.86%.
       Stops wie beim Desktop-Hero über Weiß ausgerechnet, weil Figma
       gerade interpoliert und CSS vormultipliziert. */
    background: linear-gradient(
      147.987deg,
      rgb(211, 214, 255) 6.84%,
      rgb(225, 217, 239) 24.84%,
      rgb(237, 223, 230) 42.85%,
      rgb(246, 231, 230) 60.85%,
      rgb(252, 242, 239) 78.86%,
      rgb(255, 255, 255) 96.86%
    );
  }

  /* Der erste mobile Viewport endet jetzt sauber mit dem Motiv. Die
     Vorteilsleiste gehoert zum folgenden Scrollschritt und liegt deshalb
     unterhalb des bildschirmhohen Hero-Bereichs. */
  .ak-hero-shell {
    --m: 0.25641vw;
    padding-bottom: calc(60 * var(--m));
  }

  /* Der Frame hat keine Glow-Ellipse */
  .ak-hero-glow { display: none; }

  /* Bild 1424 × 801 bei x −636 / y 331 → /1.5.
     Breite ist zusätzlich durch die verfügbare Höhe gedeckelt: Auf echten
     iOS-Geräten ist 100svh (mit Safari-Leisten) niedriger als der Frame,
     der Kopf würde sonst nach oben in Headline/Subtitle ragen. Die
     min()-Formel skaliert das Motiv so, dass der Kopf immer unter dem Text
     bleibt – auf hohen Viewports greift die vergrößerte Motivbreite. */
  .ak-hero-img {
    /* Gegenüber dem ursprünglichen Figma-Crop leicht vergrößert, aber nach
       oben durch die verfügbare Höhe gedeckelt (siehe Kommentar oben). */
    --hero-img-w: min(256.41%, calc((100svh - var(--header-h, 50px) - 235 * var(--m)) * 2.029));
    position: absolute;
    z-index: 1;
    order: 0;
    /* Das Motiv ist bewusst etwas größer als im ersten Stand. Der Fokuspunkt
       sitzt weiter rechts; die Schulter läuft hinter der Vorteilsleiste aus. */
    left: calc(43% - 0.61 * var(--hero-img-w));
    right: auto;
    top: auto;
    bottom: 0;
    width: var(--hero-img-w);
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    transform: none;
    object-fit: contain;
  }

  .ak-hero-content {
    position: absolute;
    z-index: 3;
    order: 0;
    left: calc(27.33 * var(--m));      /* 41/1.5 */
    top: calc(37.33 * var(--m));       /* 130/1.5 − Headerhöhe */
    right: calc(20 * var(--m));
    max-width: none;
    padding: 0;
  }
  .ak-hero-eyebrow {
    font-size: calc(16 * var(--m)) !important;
    line-height: 2 !important;         /* 48/24 */
    margin: 0 !important;
  }
  .ak-hero-title {
    font-size: calc(26.667 * var(--m)) !important;
    line-height: 1.2 !important;
    margin: 0 0 calc(2.67 * var(--m)) 0 !important;
  }
  .ak-hero-title span { display: block; }
  .ak-hero-sub {
    font-size: calc(13.333 * var(--m)) !important;
    line-height: 1.2 !important;
    max-width: calc(304.67 * var(--m));
  }

  /* Pille 455 × 77 bei x 76 / y 1000 → /1.5 */
  .ak-hero-cta {
    position: absolute;
    z-index: 3;
    order: 0;
    left: calc(50.67 * var(--m));
    bottom: calc(16.67 * var(--m));
    margin: 0;
    min-width: var(--pill-min-w);
    font-size: calc(16 * var(--m));
  }

  /* Trust-Leiste 585 × 90 am Frame-Boden, 2 × 2 */
  .ak-hero-trust {
    position: absolute;
    z-index: 4;
    order: 0;
    left: 0;
    right: 0;
    top: calc(100% - 60 * var(--m));
    bottom: auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: center;
    gap: calc(8.67 * var(--m)) calc(10 * var(--m));
    height: calc(60 * var(--m));        /* 90/1.5 */
    min-height: 0;
    padding: 0 calc(8 * var(--m)) 0 calc(13.33 * var(--m));
  }
  /* Figma-Reihenfolge: oben „Wissenschaftlich | Augensicher",
     unten „Kostenloser Versand | 30 Tage Geld-zurück-Garantie" */
  .ak-hero-trust__item:nth-child(1) { order: 1; }
  .ak-hero-trust__item:nth-child(4) { order: 2; }
  .ak-hero-trust__item:nth-child(2) { order: 3; }
  .ak-hero-trust__item:nth-child(3) { order: 4; }
  .ak-hero-trust__item {
    flex: none;
    align-items: center;
    gap: calc(6 * var(--m));
    white-space: nowrap;
  }
  .ak-hero-trust__icon {
    width: calc(15 * var(--m));
    height: calc(15 * var(--m));
  }
  /* Figma setzt 20 px (→ 13.33). Bei dieser Größe läuft
     „30 Tage Geld-zurück-Garantie" aus dem Frame heraus – die Leiste
     ist deshalb so weit heruntergerechnet, dass beide Spalten
     einzeilig hineinpassen. */
  .ak-hero-trust__label {
    font-size: calc(11.6 * var(--m)) !important;
    line-height: 1.2 !important;
  }

  /* ── Frames 586 / 587: bildschirmfüllende Slides ───────────────── */
  .ak-slide {
    --m: 0.25641vw;
    height: calc(100svh - var(--header-h, 50px));
    min-height: calc(560 * var(--m));
    display: block;
    padding: 0;
    background: linear-gradient(
      147.987deg,
      rgb(211, 214, 255) 6.84%,
      rgb(225, 217, 239) 24.84%,
      rgb(237, 223, 230) 42.85%,
      rgb(246, 231, 230) 60.85%,
      rgb(252, 242, 239) 78.86%,
      rgb(255, 255, 255) 96.86%
    );
  }

  .ak-slide__photo {
    position: absolute;
    z-index: 1;
    left: var(--photo-left);
    right: auto;
    top: auto;
    bottom: var(--photo-bottom);
    width: var(--photo-w);
    height: auto;
    margin: 0;
    object-fit: contain;
    filter: blur(var(--slide-blur));
  }
  .ak-slide--chrono .ak-slide__photo { filter: blur(var(--slide-blur)); }

  .ak-slide__headline {
    position: absolute;
    z-index: 2;
    left: calc(27.33 * var(--m));
    top: var(--headline-top);
    right: calc(20 * var(--m));
    width: auto;
    margin: 0 !important;
    font-size: calc(26.667 * var(--m)) !important;
    line-height: 1.2 !important;
  }
  .ak-slide__headline span { display: block; }

  .ak-slide__lead {
    position: absolute;
    z-index: 2;
    left: calc(27.33 * var(--m));
    top: var(--lead-top);
    right: calc(20 * var(--m));
    width: auto;
    margin: 0 !important;
    font-size: calc(16.667 * var(--m)) !important;
    line-height: 1.2 !important;
  }
  .ak-slide__lead span { display: block; }

  .ak-slide__body {
    position: absolute;
    z-index: 2;
    left: calc(27.33 * var(--m));
    top: var(--body-top);
    width: var(--body-w);
    max-width: none;
    margin: 0;
  }
  .ak-slide__body p {
    font-size: calc(13.333 * var(--m)) !important;
    line-height: 1.2 !important;
  }
  .ak-slide__body p + p { margin-top: 1.2em !important; }

  .ak-slide__cta {
    position: absolute;
    z-index: 2;
    left: calc(43.33 * var(--m));       /* 65/1.5 */
    top: auto;
    bottom: var(--cta-bottom);
    margin: 0;
    align-self: auto;
    min-width: var(--pill-min-w);
    font-size: calc(16 * var(--m));
  }

  /* Frame 586 */
  .ak-slide--app {
    /* Figma 585 × 1193 enthaelt den 74 px hohen Header. Unter dem echten
       50-px-Header bleiben deshalb bei 390 px Viewportbreite exakt
       (1193 - 74) / 1.5 = 746 CSS-Pixel fuer die Slide. */
    height: calc(746 * var(--m));
    min-height: calc(746 * var(--m));
    --headline-top: calc(40 * var(--m));      /* 134/1.5 − Header */
    --lead-top: calc(106.67 * var(--m));      /* 234/1.5 − Header */
    --body-top: calc(181.33 * var(--m));      /* 346/1.5 − Header */
    --body-w: calc(305.33 * var(--m));
    --cta-top: calc(636 * var(--m));          /* (1028 - 74) / 1.5 */
    /* Exakter Export der fertig gerenderten Figma-Bildebene 129:216. Der
       Export ist durch den Frame auf 585 × 702 begrenzt und beginnt inklusive
       Effekt-Auslauf bei y 491. Abzüglich des 74-px-Headers ergibt das lokal
       (491 - 74) / 1.5 = 278 CSS-Pixel. */
    --photo-left: 0px;
    --photo-top: calc(278 * var(--m));
    --photo-w: calc(390 * var(--m));
    --photo-h: calc(468 * var(--m));
    --slide-blur: 0px;
    /* Der Figma-Mobile-Export ist trotz RGBA vollstaendig deckend. Seine
       obere Pixelzeile enthaelt bereits den Hintergrundverlauf. Deshalb
       wird der Slide-Hintergrund horizontal exakt an diese Kante angepasst,
       damit bei --photo-top kein sichtbarer Farbsprung entsteht. */
    background: linear-gradient(
      to right,
      rgb(227, 217, 232) 0%,
      rgb(229, 217, 230) 12.5%,
      rgb(231, 219, 230) 25%,
      rgb(230, 218, 227) 37.5%,
      rgb(233, 219, 227) 50%,
      rgb(235, 220, 226) 62.5%,
      rgb(235, 220, 224) 75%,
      rgb(236, 221, 224) 87.5%,
      rgb(238, 223, 225) 100%
    );
  }

  .ak-slide--app .ak-slide__photo {
    top: var(--photo-top);
    bottom: auto;
    width: var(--photo-w);
    height: var(--photo-h);
    object-fit: fill;
    filter: none;
  }

  .ak-slide--app .ak-slide__cta {
    top: var(--cta-top);
    bottom: auto;
  }

  /* Frame 587 */
  .ak-slide--chrono {
    height: calc(746 * var(--m));
    min-height: calc(746 * var(--m));
    --headline-top: calc(71.33 * var(--m));   /* 181/1.5 − Header */
    --lead-top: calc(138 * var(--m));         /* 281/1.5 − Header */
    --body-top: calc(192.67 * var(--m));      /* 363/1.5 − Header */
    --body-w: calc(274.67 * var(--m));
    --cta-top: calc(632.67 * var(--m));        /* (1023 - 74) / 1.5 */
    /* Exakter Export der fertig gerenderten Figma-Bildebene 129:232. Der
       585 × 751-Export beginnt inklusive Effekt-Auslauf bei y 442. Lokal:
       (442 - 74) / 1.5 = 245.33 CSS-Pixel. */
    --photo-left: 0px;
    --photo-top: calc(245.33 * var(--m));
    --photo-w: calc(390 * var(--m));
    --photo-h: calc(500.67 * var(--m));
    --slide-blur: 0px;
    /* Auch der mobile Chronobiologen-Export ist vollstaendig deckend. Der
       Hintergrund folgt deshalb seiner oberen Pixelzeile, damit Bild und
       Sektion am Beginn des Exports ohne Farbkante ineinanderlaufen. */
    background: linear-gradient(
      to right,
      rgb(226, 217, 235) 0%,
      rgb(226, 216, 232) 12.5%,
      rgb(229, 218, 231) 25%,
      rgb(230, 217, 229) 37.5%,
      rgb(231, 218, 227) 50%,
      rgb(233, 218, 226) 62.5%,
      rgb(234, 220, 225) 75%,
      rgb(235, 221, 225) 87.5%,
      rgb(237, 222, 224) 100%
    );
  }
  .ak-slide--chrono .ak-slide__photo {
    top: var(--photo-top);
    bottom: auto;
    width: var(--photo-w);
    height: var(--photo-h);
    object-fit: fill;
    filter: none;
  }
  .ak-slide--chrono .ak-slide__cta {
    top: var(--cta-top);
    bottom: auto;
  }
  .ak-slide--chrono .ak-slide__cta-label--desktop { display: none; }
  .ak-slide--chrono .ak-slide__cta-label--mobile { display: inline; }
  .ak-slide--chrono .ak-slide__body-line { display: block; }
  /* Im Frame steht der Schlusssatz deutlich abgesetzt (78 px Abstand)
     und in einem schmaleren Satzspiegel (inset right 40 %). */
  .ak-slide--chrono .ak-slide__body p:last-child {
    width: calc(206.67 * var(--m));
    margin-top: 2.7em !important;
  }
}

/* Zwischen großen Smartphones und schmalen Tablets darf die gestapelte
   1200-px-Variante die beiden Figma-Screens nicht künstlich verlängern. Der
   390-px-Entwurf bleibt zentriert und behält seine originale Höhe; dadurch
   überlagern sich Foto und CTA wieder wie im Entwurf. */
@media (min-width: 541px) and (max-width: 767px) {
  :root { --header-h: 50px; }
  .site-header__wordmark { font-size: 20px; }

  /* Der iPhone-Hero bleibt auch im breiteren Vorschaufenster im 390-px-
     Figma-Raster. Damit bleiben Motiv, CTA und Vorteilsleiste an ihrem Platz,
     statt in das generische gestapelte Layout zu wechseln. */
  .ak-hero {
    --m: 1px;
    --frame-left: calc((100% - 390px) / 2);
    display: block;
    height: calc(100svh - var(--header-h, 50px));
    min-height: 746px;
  }
  .ak-hero-shell {
    --m: 1px;
    padding-bottom: 60px;
  }
  .ak-hero-glow { display: none; }
  .ak-hero-img {
    position: absolute;
    z-index: 1;
    left: calc(var(--frame-left) - 442.33px);
    right: auto;
    top: auto;
    bottom: 0;
    width: 1000px;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    transform: none;
    object-fit: contain;
  }
  .ak-hero-content {
    position: absolute;
    z-index: 3;
    left: calc(var(--frame-left) + 27.33px);
    top: 37.33px;
    right: auto;
    width: 342.67px;
    max-width: none;
    padding: 0;
  }
  .ak-hero-eyebrow {
    font-size: 16px !important;
    line-height: 2 !important;
    margin: 0 !important;
  }
  .ak-hero-title {
    font-size: 26.667px !important;
    line-height: 1.2 !important;
    margin: 0 0 2.67px !important;
  }
  .ak-hero-title span { display: block; }
  .ak-hero-sub {
    width: 304.67px;
    max-width: none;
    font-size: 13.333px !important;
    line-height: 1.2 !important;
  }
  .ak-hero-cta {
    position: absolute;
    z-index: 3;
    left: calc(var(--frame-left) + 50.67px);
    bottom: 16.67px;
    margin: 0;
    min-width: var(--pill-min-w);
    font-size: 16px;
  }
  .ak-hero-trust {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: calc(100% - 60px);
    bottom: auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: center;
    gap: 8.67px 10px;
    height: 60px;
    min-height: 0;
    padding: 0 calc(var(--frame-left) + 8px) 0 calc(var(--frame-left) + 13.33px);
  }
  .ak-hero-trust__item {
    flex: none;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .ak-hero-trust__item:nth-child(1) { order: 1; }
  .ak-hero-trust__item:nth-child(4) { order: 2; }
  .ak-hero-trust__item:nth-child(2) { order: 3; }
  .ak-hero-trust__item:nth-child(3) { order: 4; }
  .ak-hero-trust__icon {
    width: 15px;
    height: 15px;
  }
  .ak-hero-trust__label {
    font-size: 11.6px !important;
    line-height: 1.2 !important;
  }

  .ak-slide--app,
  .ak-slide--chrono {
    --m: 1px;
    --frame-left: calc((100% - 390px) / 2);
    position: relative;
    display: block;
    height: 746px;
    min-height: 746px;
    padding: 0;
    background: linear-gradient(
      147.987deg,
      rgb(211, 214, 255) 6.84%,
      rgb(225, 217, 239) 24.84%,
      rgb(237, 223, 230) 42.85%,
      rgb(246, 231, 230) 60.85%,
      rgb(252, 242, 239) 78.86%,
      rgb(255, 255, 255) 96.86%
    );
  }

  .ak-slide--app {
    background-color: rgb(227, 217, 232);
    background-image: linear-gradient(
      to right,
      rgb(227, 217, 232) 0%,
      rgb(227, 217, 232) calc(50% - 195px),
      rgb(229, 217, 230) calc(50% - 146.25px),
      rgb(231, 219, 230) calc(50% - 97.5px),
      rgb(230, 218, 227) calc(50% - 48.75px),
      rgb(233, 219, 227) 50%,
      rgb(235, 220, 226) calc(50% + 48.75px),
      rgb(235, 220, 224) calc(50% + 97.5px),
      rgb(236, 221, 224) calc(50% + 146.25px),
      rgb(238, 223, 225) calc(50% + 195px),
      rgb(238, 223, 225) 100%
    );
  }

  .ak-slide--app .ak-slide__headline,
  .ak-slide--app .ak-slide__lead,
  .ak-slide--app .ak-slide__body,
  .ak-slide--app .ak-slide__cta,
  .ak-slide--app .ak-slide__photo {
    position: absolute;
    margin: 0;
  }

  .ak-slide--app .ak-slide__headline {
    left: calc(var(--frame-left) + 27.33px);
    top: 40px;
    right: auto;
    width: 342.67px;
    font-size: 26.667px !important;
    line-height: 1.2 !important;
  }
  .ak-slide--app .ak-slide__headline span,
  .ak-slide--app .ak-slide__lead span { display: block; }

  .ak-slide--app .ak-slide__lead {
    left: calc(var(--frame-left) + 27.33px);
    top: 106.67px;
    right: auto;
    width: 342.67px;
    font-size: 16.667px !important;
    line-height: 1.2 !important;
  }

  .ak-slide--app .ak-slide__body {
    left: calc(var(--frame-left) + 27.33px);
    top: 181.33px;
    width: 305.33px;
    max-width: none;
  }
  .ak-slide--app .ak-slide__body p {
    font-size: 13.333px !important;
    line-height: 1.2 !important;
  }
  .ak-slide--app .ak-slide__body p + p { margin-top: 1.2em !important; }

  .ak-slide--app .ak-slide__photo {
    z-index: 1;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    filter: none;
  }

  .ak-slide--app .ak-slide__cta {
    z-index: 2;
    left: calc(var(--frame-left) + 43.33px);
    top: 636px;
    bottom: auto;
    min-width: var(--pill-min-w);
    font-size: 16px;
  }

  .ak-slide--chrono .ak-slide__headline,
  .ak-slide--chrono .ak-slide__lead,
  .ak-slide--chrono .ak-slide__body,
  .ak-slide--chrono .ak-slide__cta,
  .ak-slide--chrono .ak-slide__photo {
    position: absolute;
    margin: 0;
  }

  .ak-slide--chrono {
    background-color: rgb(226, 217, 235);
    background-image: linear-gradient(
      to right,
      rgb(226, 217, 235) 0%,
      rgb(226, 217, 235) calc(50% - 195px),
      rgb(226, 216, 232) calc(50% - 146.25px),
      rgb(229, 218, 231) calc(50% - 97.5px),
      rgb(230, 217, 229) calc(50% - 48.75px),
      rgb(231, 218, 227) 50%,
      rgb(233, 218, 226) calc(50% + 48.75px),
      rgb(234, 220, 225) calc(50% + 97.5px),
      rgb(235, 221, 225) calc(50% + 146.25px),
      rgb(237, 222, 224) calc(50% + 195px),
      rgb(237, 222, 224) 100%
    );
  }

  .ak-slide--chrono .ak-slide__headline {
    left: calc(var(--frame-left) + 27.33px);
    top: 71.33px;
    right: auto;
    width: 342.67px;
    font-size: 26.667px !important;
    line-height: 1.2 !important;
  }
  .ak-slide--chrono .ak-slide__headline span,
  .ak-slide--chrono .ak-slide__lead span,
  .ak-slide--chrono .ak-slide__body-line { display: block; }

  .ak-slide--chrono .ak-slide__lead {
    left: calc(var(--frame-left) + 27.33px);
    top: 138px;
    right: auto;
    width: 342.67px;
    font-size: 16.667px !important;
    line-height: 1.2 !important;
  }

  .ak-slide--chrono .ak-slide__body {
    left: calc(var(--frame-left) + 27.33px);
    top: 192.67px;
    width: 274.67px;
    max-width: none;
  }
  .ak-slide--chrono .ak-slide__body p {
    font-size: 13.333px !important;
    line-height: 1.2 !important;
  }
  .ak-slide--chrono .ak-slide__body p + p { margin-top: 1.2em !important; }
  .ak-slide--chrono .ak-slide__body p:last-child {
    width: 206.67px;
    margin-top: 2.7em !important;
  }

  .ak-slide--chrono .ak-slide__photo {
    z-index: 1;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    filter: none;
  }

  .ak-slide--chrono .ak-slide__cta {
    z-index: 2;
    left: calc(var(--frame-left) + 43.33px);
    top: 632.67px;
    bottom: auto;
    min-width: var(--pill-min-w);
    font-size: 16px;
  }
  .ak-slide--chrono .ak-slide__cta-label--desktop { display: none; }
  .ak-slide--chrono .ak-slide__cta-label--mobile { display: inline; }
}