/* Durchgehender Seitenhintergrund.
   Die Lichtfelder liegen in Seitenkoordinaten und laufen vollständig bis
   transparent aus. Dadurch kann keine Sektionskante als Rechteck erscheinen. */

/* Das Hero-Video ist eine echte Motivebene und bleibt erhalten. Sein dunkler
   Endframe lag jedoch als volle Rechteckkante über der Seitenleinwand. */
body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s02-media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.82) 82%, rgba(0, 0, 0, 0.34) 93%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.82) 82%, rgba(0, 0, 0, 0.34) 93%, transparent 100%);
}

@media (min-width: 1024px) {
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) {
    position: relative;
    isolation: isolate;
    background: #02080d;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 40% 16% at 0% 30%, rgba(105, 211, 255, 0.94) 0%, rgba(18, 169, 255, 0.72) 18%, rgba(0, 137, 218, 0.34) 45%, rgba(0, 82, 132, 0.12) 68%, transparent 100%),
      radial-gradient(ellipse 38% 15% at 100% 38%, rgba(116, 218, 255, 0.88) 0%, rgba(18, 169, 255, 0.66) 20%, rgba(0, 137, 218, 0.30) 47%, rgba(0, 82, 132, 0.10) 70%, transparent 100%),
      radial-gradient(ellipse 42% 15% at 0% 62%, rgba(171, 232, 255, 0.94) 0%, rgba(28, 177, 245, 0.70) 20%, rgba(0, 138, 215, 0.33) 48%, rgba(0, 80, 126, 0.11) 72%, transparent 100%),
      radial-gradient(ellipse 40% 16% at 100% 72%, rgba(106, 214, 255, 0.90) 0%, rgba(16, 166, 240, 0.68) 20%, rgba(0, 128, 202, 0.30) 48%, rgba(0, 76, 122, 0.10) 72%, transparent 100%),
      radial-gradient(ellipse 42% 14% at 0% 92%, rgba(102, 209, 252, 0.82) 0%, rgba(12, 158, 232, 0.58) 22%, rgba(0, 119, 190, 0.26) 50%, rgba(0, 68, 112, 0.08) 74%, transparent 100%),
      radial-gradient(ellipse 42% 14% at 100% 95%, rgba(102, 209, 252, 0.82) 0%, rgba(12, 158, 232, 0.58) 22%, rgba(0, 119, 190, 0.26) 50%, rgba(0, 68, 112, 0.08) 74%, transparent 100%),
      linear-gradient(180deg, #000000 0%, #020d15 20%, #041b29 44%, #052c40 67%, #042335 84%, #02080d 100%);
    -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 160px), rgba(0, 0, 0, .56) calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 160px), rgba(0, 0, 0, .56) calc(100% - 70px), transparent 100%);
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > section {
    position: relative;
    z-index: 1;
    background-color: transparent;
    background-image: none;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s03::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-topglow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s10::before {
    background: none;
    background-image: none;
    -webkit-mask-image: none;
            mask-image: none;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg::after {
    content: none;
    background: none;
    background-image: none;
  }
}

@media (max-width: 1023.98px) {
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) {
    position: relative;
    isolation: isolate;
    background: #02080d;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 105% 13% at 50% 42%, rgba(48, 190, 250, 0.56) 0%, rgba(8, 125, 194, 0.30) 42%, rgba(1, 64, 104, 0.10) 70%, transparent 100%),
      radial-gradient(ellipse 125% 25% at 50% 69%, rgba(113, 218, 255, 0.88) 0%, rgba(22, 169, 239, 0.68) 22%, rgba(2, 118, 184, 0.38) 48%, rgba(0, 72, 118, 0.14) 72%, transparent 100%),
      radial-gradient(ellipse 88% 13% at 0% 89%, rgba(80, 199, 247, 0.54) 0%, rgba(9, 132, 203, 0.30) 46%, rgba(0, 68, 110, 0.08) 76%, transparent 100%),
      radial-gradient(ellipse 88% 13% at 100% 92%, rgba(80, 199, 247, 0.54) 0%, rgba(9, 132, 203, 0.30) 46%, rgba(0, 68, 110, 0.08) 76%, transparent 100%),
      linear-gradient(180deg, #000000 0%, #020d15 20%, #041b29 44%, #052c40 67%, #042335 84%, #02080d 100%);
    -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 160px), rgba(0, 0, 0, .56) calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 160px), rgba(0, 0, 0, .56) calc(100% - 70px), transparent 100%);
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s03,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s04,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s05,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s06,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s07,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s08,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s09,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) > .lvf-s10 {
    position: relative;
    z-index: 1;
    background-color: transparent;
    background-image: none;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s03::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-topglow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s10::before {
    background: none;
    background-image: none;
    -webkit-mask-image: none;
            mask-image: none;
  }

  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s04 .lvf-s04-slab::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s05 .lvf-s05-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s06 .lvf-s06-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s07 .lvf-s07-glow::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s08 .lvf-s08-aura::after,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg::before,
  body.page-id-7895 .lvf-page.lvf-page:not(.lvf-theme-teil) .lvf-s09 .lvf-s09-bg::after {
    content: none;
    background: none;
    background-image: none;
  }
}

/* ===== s02 ===== */
/* == s02 Hero + Stats + Zertifikats-Ticker ==
   Basis = Mobile-Design (Frame 440). Ab 768px interpolieren die clamp()-Werte
   linear bis 1024px und liegen ab 1024px exakt auf den Desktop-Werten (Frame 1760,
   Content-Spalte 1240). */

.lvf-s02 {
  /* --- Hero-Medium --- */
  --lvf-s02-media-top: 127px;
  --lvf-s02-media-h: 828px;
  --lvf-s02-media-blur: 0px;
  /* Mobil-Befund R3: Hero-Schein war rund 30 % zu dunkel, Abdunkelung etwas
     gelockert, damit der blaue Schein durchkommt */
  --lvf-s02-media-dark: 0.64;

  /* --- Typo / Abstaende --- */
  --lvf-s02-pt: 198px;
  --lvf-s02-pb: 92px;
  --lvf-s02-badge-h: 27px;
  --lvf-s02-badge-fs: 11px;
  --lvf-s02-badge-lh: 16px;
  --lvf-s02-badge-px: 15px;
  --lvf-s02-badge-gap: 6px;
  --lvf-s02-badge-dot: 5px;
  --lvf-s02-title-fs: 52px;
  --lvf-s02-title-lh: 53px;
  --lvf-s02-title-mt: 28px;
  --lvf-s02-sub-fs: 13px;
  --lvf-s02-sub-lh: 19px;
  --lvf-s02-sub-ls: 0.39px;
  --lvf-s02-sub-mw: 336px;
  --lvf-s02-sub-mt: 25px;

  /* --- Buttons --- */
  --lvf-s02-btn-h: 42px;
  --lvf-s02-btn-r: 9.14px;
  --lvf-s02-btn-fs: 15px;
  --lvf-s02-btn-lh: 23px;
  --lvf-s02-btn-gap: 7px;
  --lvf-s02-btn-pr: 11px;
  --lvf-s02-btn-ghost-px: 15px;
  --lvf-s02-tile: 33px;
  --lvf-s02-tile-r: 5px;
  --lvf-s02-tile-ico: 16px;
  --lvf-s02-cta-gap: 7px;
  --lvf-s02-cta-mt: 31px;

  /* --- Stats --- */
  /* Mobil: 42px Buttons->Linie + 43px row-gap Linie->Stats = SOLL 85px */
  --lvf-s02-stats-mt: 42px;

  /* --- Ticker --- */
  --lvf-s02-ticker-mt: 99px;
  --lvf-s02-ticker-px: 30px;
  --lvf-s02-strip-r: 26.74px;
  --lvf-s02-strip-p: 17px;
  --lvf-s02-card-w: 144px;
  --lvf-s02-card-h: 97px;
  --lvf-s02-card-r: 5px;
  --lvf-s02-card-gap: 6px;
  --lvf-s02-card-ring: 1.679px;
  --lvf-s02-pills-mt: -11px;

  /* --- Partner --- */
  --lvf-s02-partners-mt: 83px;
  --lvf-s02-partners-gap: 44px;
  --lvf-s02-dx-gap: 2px;
  --lvf-s02-dx-mark-w: 58px;
  --lvf-s02-dx-mark-h: 33px;
  --lvf-s02-dx-word-w: 186px;
  --lvf-s02-dx-word-h: 24px;
  --lvf-s02-chart-w: 225px;
  --lvf-s02-chart-h: 56px;
  --lvf-s02-hansa-w: 190px;
  --lvf-s02-hansa-h: 58px;

  /* --- Farbwerte aus dem Band --- */
  --lvf-s02-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
  --lvf-s02-grad-white: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
  /* Verlauf der Headline. Bis 11.08.2026 stand hier ein senkrechter Silberton
     (#efefef oben -> #95989d unten). Solange die Shell "color: inherit" auf
     h1..h6 erzwang, war er unsichtbar und fiel nicht auf. Sobald der Verlauf
     wieder durchkommt, ist er messbar falsch herum: im Mockup ist Zeile 2
     HELLER als Zeile 1 (Median der hellsten 10 % der Glyphenpixel, Zeile 1
     221/218/217, Zeile 2 235/255/236), der Silberton macht sie dunkler
     (gemessen 187/186/183). Deshalb derselbe diagonale Weißverlauf wie in
     s03 und s04, den auch der Figma-Knoten nennt. */
  --lvf-s02-grad-silver: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);

  position: relative;
  z-index: 0;
  isolation: isolate;
  padding-top: var(--lvf-s02-pt);
  padding-bottom: var(--lvf-s02-pb);
}

.lvf-s02-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.lvf-s02-media {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--lvf-s02-media-top);
  height: var(--lvf-s02-media-h);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  z-index: 0;
}

.lvf-s02-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Soll: das Buero-Motiv bleibt klar erkennbar, kein Weichzeichner */
  filter: blur(var(--lvf-s02-media-blur));
  background: #05060f;
}

/* Fill 9: GRADIENT_LINEAR, blendMode HUE. Auf halbe Deckkraft reduziert:
   sonst liegt ein flaechiger Blaustich ueber dem ganzen Hero-Bild (Befund R3),
   im Soll bleibt die Bildmitte nahezu neutral. */
.lvf-s02-media-hue {
  position: absolute;
  inset: 0;
  background: var(--lvf-s02-grad-blue);
  mix-blend-mode: hue;
  opacity: 0.5;
}

/* Fills 10-13 (unten nach oben): Schwarz 85/90 %, Fade oben, Fade unten, Vignette */
.lvf-s02-media-shade {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--lvf-s02-media-dark));
  background-image:
    radial-gradient(62.8% 70.2% at 50% 29.8%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 72.1%, #000000 93.7%),
    linear-gradient(180deg, #000000 -1.5%, rgba(0, 0, 0, 0) 34.7%);
}

/* Ersatz fuer die weichgezeichneten "Star"-Vektoren (Gradient Background).
   Soll: zwei kraeftige cyane Eckglows OBEN links/rechts (ab ~y=120), die Bildmitte
   bleibt fast neutral. Befund R3: Glows sassen zu tief/zu schwach, Mitte zu blau.
   Das Element ist 180 % Viewport breit: 25 %/75 % treffen den Bildrandbereich. */
.lvf-s02-glow {
  position: absolute;
  left: 50%;
  /* oben -100px ueberstehend: der blur sampelte an y0 gegen Leere und machte
     die weisse Ecke grau (121,121,121 statt 239,250,255) */
  top: -100px;
  width: 180%;
  height: 1200px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  /* Messpass 06.08.2026: Soll ist an der ECKE selbst hell (x0/y0: 53,145,183),
     faellt aber schnell ab (x147/y220 schon 2,15,22). Die alten 34%-Ellipsen
     (1077px Radius) verteilten das Licht viel zu breit: Ecke zu dunkel, Flanken
     bei y220-660 zu hell. Jetzt kleine, heisse Kerne exakt an den Seitenecken
     (Element ist 180% breit: Seite x0 = 22%, x1760 = 78%), Rand-Saeulen stark
     reduziert (Soll-Rand auf halber Hoehe nur ~(3,38,59)). */
  /* Soll-Profil: Ecke selbst WEISS (x0/y0: 239,250,255), bei x150 noch 75,191,226,
     Rand bleibt bis y300 sattblau (1,103,157). Der blur(70px) verduennt die Kerne,
     deshalb Vollweiss im Zentrum. */
  background:
    radial-gradient(300px 240px at 22% 0%, #ffffff 50%, rgba(190, 235, 255, 0.95) 68%, rgba(40, 180, 245, 0.5) 84%, rgba(0, 162, 255, 0) 100%),
    radial-gradient(300px 240px at 78% 0%, #ffffff 50%, rgba(190, 235, 255, 0.95) 68%, rgba(40, 180, 245, 0.5) 84%, rgba(0, 162, 255, 0) 100%),
    radial-gradient(120px 700px at 21.8% 8%, rgba(2, 140, 210, 0.95) 0%, rgba(2, 130, 195, 0.6) 55%, rgba(2, 120, 190, 0) 100%),
    radial-gradient(120px 700px at 78.2% 8%, rgba(2, 140, 210, 0.95) 0%, rgba(2, 130, 195, 0.6) 55%, rgba(2, 120, 190, 0) 100%),
    radial-gradient(30% 22% at 50% 32%, rgba(167, 223, 255, 0.07) 0%, rgba(167, 223, 255, 0) 100%);
  /* Blur reduziert (70->48): der Soll-Abfall an der Ecke spielt sich auf
     ~150px ab, mit 70px Sigma war der Weisskern auf ~30% verwaessert */
  filter: blur(48px);
  opacity: 0.95;
}

/* Mobile-Design: der blaue Schein legt sich als Rand-Vignette um die ganze Sektion.
   Befund R3 (mobil): Schein war rund 30 % zu dunkel, Deckkraft der Blobs erhoeht.

   Pruefauftrag 13.08.2026, Fundstelle 4: die sieben Blobs oben standen bei
   4/96/2/98/3/97 Prozent, also weit ausserhalb des 170 % breiten Elements
   (Bildrand liegt bei 20,6 % / 79,4 %). Genau diese Werte nennt
   server-stand-20260810/lvlup-fixes/r3b-home.css als Fehlerursache. Die
   Override loest es nicht durch Verschieben der alten sieben Blobs, sondern
   mit einer neu vermessenen Zwei-Zonen-Bauart (oben/unten, je zwei Kerne auf
   dem Bildrand plus Kaans Bogen ueber der Sektionsoberkante) - deshalb hier
   uebernommen statt einzeln nachgerechnet. Breite/Hoehe/Deckkraft/Weichzeichner
   bleiben unser eigener Wert, nur die Hintergrund-Ebenen selbst tauschen. */
@media (max-width: 767px) {
  .lvf-s02-glow {
    width: 170%;
    height: 100%;
    opacity: 1;
    filter: blur(50px);
    background:
      radial-gradient(29% 17.6% at 20.6% 15%,
        rgba(236, 250, 255, 1) 0%,
        rgba(186, 234, 254, 0.95) 18%,
        rgba(96, 205, 250, 0.78) 38%,
        rgba(0, 162, 255, 0.44) 60%,
        rgba(0, 150, 235, 0.16) 82%,
        rgba(0, 145, 228, 0) 100%),
      radial-gradient(29% 17.6% at 79.4% 15%,
        rgba(236, 250, 255, 1) 0%,
        rgba(186, 234, 254, 0.95) 18%,
        rgba(96, 205, 250, 0.78) 38%,
        rgba(0, 162, 255, 0.44) 60%,
        rgba(0, 150, 235, 0.16) 82%,
        rgba(0, 145, 228, 0) 100%),
      radial-gradient(27% 24.7% at 20.6% 63.5%,
        rgba(0, 168, 255, 0.86) 0%,
        rgba(0, 160, 246, 0.62) 32%,
        rgba(0, 150, 232, 0.34) 62%,
        rgba(0, 145, 226, 0.12) 86%,
        rgba(0, 140, 220, 0) 100%),
      radial-gradient(27% 24.7% at 79.4% 63.5%,
        rgba(0, 168, 255, 0.86) 0%,
        rgba(0, 160, 246, 0.62) 32%,
        rgba(0, 150, 232, 0.34) 62%,
        rgba(0, 145, 226, 0.12) 86%,
        rgba(0, 140, 220, 0) 100%),
      radial-gradient(70% 14% at 50% 3%,
        rgba(0, 162, 255, 1) 0%,
        rgba(0, 162, 255, 0) 78%);
  }
}

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

.lvf-s02-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lvf-s02-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lvf-s02-badge-gap);
  min-height: var(--lvf-s02-badge-h);
  padding-inline: var(--lvf-s02-badge-px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
}

.lvf-s02-badge-dot {
  flex: 0 0 auto;
  width: var(--lvf-s02-badge-dot);
  height: var(--lvf-s02-badge-dot);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--lvf-s02-grad-blue);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lvf-s02-badge-text {
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s02-badge-fs);
  line-height: var(--lvf-s02-badge-lh);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* "Largest" steht im Design blau und halbfett. Figma-Rohknoten 156:7163:
   Zeichen 0-6 ("Largest") tragen als letzten Fill-Eintrag den Verlauf
   rgb(140,213,255) -> rgb(18,169,255), bitgenau --lvf-grad-blue, dazu
   fontWeight 500 (Medium) direkt im Override. Bisher nur Flaechenfarbe. */
.lvf-s02-badge-hl {
  font-weight: 500;
  background-image: var(--lvf-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lvf-s02-title {
  margin-top: var(--lvf-s02-title-mt);
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s02-title-fs);
  line-height: var(--lvf-s02-title-lh);
  font-weight: 500;
  letter-spacing: 0;
  background-image: var(--lvf-s02-grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lvf-s02-title-br { display: none; }

/* "New Standard" traegt im Design den blauen Verlauf und wirkt fetter */
.lvf-s02-title-hl {
  font-weight: 600;
  background-image: var(--lvf-s02-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Das Mobile-Design laesst das "The" weg und bricht nach "New Standard" um */
@media (max-width: 767px) {
  .lvf-s02-title-the { display: none; }
  .lvf-s02-title-hl { display: block; }
}

.lvf-s02-sub {
  margin-top: var(--lvf-s02-sub-mt);
  max-width: var(--lvf-s02-sub-mw);
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s02-sub-fs);
  line-height: var(--lvf-s02-sub-lh);
  font-weight: 425;
  letter-spacing: var(--lvf-s02-sub-ls);
  color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- CTAs */

.lvf-s02-cta {
  margin-top: var(--lvf-s02-cta-mt);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lvf-s02-cta-gap);
  flex-wrap: wrap;
}

.lvf-s02-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lvf-s02-btn-h);
  border-radius: var(--lvf-s02-btn-r);
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s02-btn-fs);
  line-height: var(--lvf-s02-btn-lh);
  transition: filter 0.18s ease, transform 0.18s ease;
}

/* Touch-Ziel >= 44px, ohne die im Design vorgegebene Optik zu veraendern */
.lvf-s02-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Zentriert überdeckte die Linkfläche auf schmalen Breiten die davorliegende
   Beschriftung. Der zusätzliche Bereich liegt deshalb vollständig darunter. */
.lvf-s02-pill--link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
}

.lvf-s02-btn:hover { filter: brightness(1.08); }
.lvf-s02-btn:active { transform: translateY(1px); }
.lvf-s02-btn:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }

.lvf-s02-btn--primary {
  gap: var(--lvf-s02-btn-gap);
  padding-left: 5px;
  padding-right: var(--lvf-s02-btn-pr);
  /* Saum-Verlauf statt --lvf-s02-grad-blue plus inset-Schatten, 11.08.2026.
     Nur dieser Knopf wechselt das Token; die uebrigen sechs Fundstellen von
     --lvf-s02-grad-blue in dieser Datei tragen im Entwurf keinen Saum. */
  background: var(--lvf-grad-blue-btn);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Beide Knöpfe sind <a>-Elemente. Elementor liefert
   ".elementor a { box-shadow: none }" (0-1-1) und schlägt damit jede Regel mit
   einer Klasse; live war der box-shadow beider Knöpfe berechnet "none", der
   Geister-Knopf "See How It Works" lag dadurch flach und gleichmäßig
   RGB(23,50,66) statt mit blauem Innenschein an Unter- und Rechtskante.
   Deshalb liegen nur die Schatten in eigenen Regeln mit zwei Klassen (0-2-0);
   der Rest der Blöcke bleibt bei 0-1-0, damit spätere Regeln für schmale
   Bildschirme weiter greifen. */
.lvf-page .lvf-s02-btn--primary {
  /* Ohne inset-Saum seit 11.08.2026, der sitzt in --lvf-grad-blue-btn. */
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

/* 0.5px Verlaufsrand (Figma: CENTER stroke) */
.lvf-s02-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.5px;
  background: linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lvf-s02-btn-tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lvf-s02-tile);
  height: var(--lvf-s02-tile);
  border-radius: var(--lvf-s02-tile-r);
  background: #060606;
}

.lvf-s02-btn-ico {
  width: var(--lvf-s02-tile-ico);
  height: var(--lvf-s02-tile-ico);
  display: block;
}

.lvf-s02-btn--primary .lvf-s02-btn-label {
  font-weight: 500;
  color: #060606;
}

.lvf-s02-btn--ghost {
  padding-inline: var(--lvf-s02-btn-ghost-px);
  font-weight: 400;
  color: var(--lvf-white);
  /* Befund R3 (Desktop): SOLL-Fuellung ca. RGB(22,52,70) - der Button las sich
     als reiner Textlink, weil die Flaeche fast transparent war */
  background: rgba(26, 58, 76, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lvf-page .lvf-s02-btn--ghost {
  box-shadow:
    inset -2px -6px 19px #52b8f1,
    inset -5px -4px 16px #00a4ff,
    inset -1px -2px 5px #00a4ff,
    inset 9px 7px 12px #000000,
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

/* ---------------------------------------------------------------- Trennlinie (nur Mobile) */

/* Die feine Linie zwischen Buttons und Stats liegt als erste Zeile IM Stats-Grid:
   so ist sie unabhaengig von hr-Regeln des Themes und vom Margin-Collapse.
   Abstand: 42px Buttons->Linie (margin-top der ul) + 43px Linie->Stats (row-gap)
   = 85px wie im Soll (Befund R3 mobil: Linie fehlte, Abstand war nur 42px). */
.lvf-s02-stats::before {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  width: 304px;
  max-width: 100%;
  height: 1px;
  background: #002f45;
}

@media (min-width: 768px) {
  .lvf-s02-stats::before { content: none; }
}

/* ---------------------------------------------------------------- Stats */

.lvf-s02-stats {
  margin-top: var(--lvf-s02-stats-mt);
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  justify-items: center;
  column-gap: min(92px, 21vw);
  row-gap: 43px;
}

.lvf-s02-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lvf-s02-stat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 29px;
}

.lvf-s02-stat-ico {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(91, 188, 232, 0.55));
}

.lvf-s02-stat-ico--split { width: 33px; height: 29px; }
.lvf-s02-stat-ico--funding { width: 30px; height: 27px; }
.lvf-s02-stat-ico--drawdown { width: 24px; height: 25px; }
.lvf-s02-stat-ico--payout { width: 27px; height: 27px; }
.lvf-s02-stat-ico--days { width: 27px; height: 27px; }
.lvf-s02-stat-ico--support { width: 28px; height: 28px; }

.lvf-s02-stat-num {
  font-family: var(--lvf-font-display);
  font-size: 36.25px;
  line-height: 1;
  font-weight: 555;
  letter-spacing: -1.09px;
  white-space: nowrap;
  background-image: var(--lvf-s02-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lvf-s02-stat-num--five { font-size: 37.22px; letter-spacing: -1.12px; }

.lvf-s02-stat-label {
  font-family: var(--lvf-font-display);
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  letter-spacing: 0.52px;
  white-space: nowrap;
  background-image: var(--lvf-s02-grad-white);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- Ticker */

.lvf-s02-ticker {
  position: relative;
  z-index: 1;
  margin-top: var(--lvf-s02-ticker-mt);
  padding-inline: var(--lvf-s02-ticker-px);
}

/* Blauer Umgebungsschein des Tickers: reicht im Design bis hinter die Partnerlogos
   (dort ist der Grund ~#033d5e statt Schwarz) */
.lvf-s02-ticker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -90px;
  width: min(1700px, 130%);
  height: calc(100% + 520px);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 44% at 50% 34%,
    rgba(0, 145, 225, 0.55) 0%,
    rgba(0, 125, 200, 0.26) 55%,
    rgba(0, 125, 200, 0) 78%);
  filter: blur(34px);
}

/* Mobile: der weiss-blaue Schein um den Ticker ist im Soll deutlich kraeftiger.
   Befund R3 (mobil): im Broker-Logo-Bereich war der Blaukanal fast halbiert,
   deshalb Deckkraft und Reichweite erhoeht. */
@media (max-width: 767px) {
  .lvf-s02-ticker::before {
    top: -50px;
    height: calc(100% + 340px);
    background: radial-gradient(58% 48% at 50% 36%,
      rgba(140, 213, 255, 0.62) 0%,
      rgba(0, 145, 225, 0.55) 45%,
      rgba(0, 125, 200, 0) 78%);
    filter: blur(26px);
  }
}

.lvf-s02-strip {
  max-width: 1550px;
  margin-inline: auto;
  padding: var(--lvf-s02-strip-p);
  border-radius: var(--lvf-s02-strip-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Figma: Verlauf + Schwarz 59 % + blauer Verlauf im Blendmode COLOR */
  background-image:
    linear-gradient(134deg, #6ecaff 0%, #0080ca 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.59)),
    linear-gradient(135deg, #171516 0%, #313131 50%, #171516 100%);
  background-blend-mode: color, normal, normal;
  box-shadow:
    inset -6px -12px 36px #52b8f1,
    inset -12px -16px 24px #00a4ff,
    inset -1px -1px 0 #00a4ff,
    inset 13px 16px 22px #000000;
}

.lvf-s02-row {
  display: flex;
  gap: var(--lvf-s02-card-gap);
  width: max-content;
  will-change: transform;
  animation: lvf-s02-marquee 46s linear infinite;
}

/* Reihe 2 laeuft im Soll spaltenbuendig unter Reihe 1: sie erbt dieselbe
   Marquee-Animation (Tempo und Richtung) wie Reihe 1, dadurch kein Versatz. */

.lvf-s02-set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--lvf-s02-card-gap);
}

@keyframes lvf-s02-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--lvf-s02-card-gap) / 2)); }
}

.lvf-s02-strip:hover .lvf-s02-row,
.lvf-s02-strip:focus-within .lvf-s02-row,
.lvf-s02-strip[data-lvf-paused] .lvf-s02-row {
  animation-play-state: paused;
}

.lvf-s02-card {
  flex: 0 0 auto;
  width: var(--lvf-s02-card-w);
  height: var(--lvf-s02-card-h);
  border-radius: var(--lvf-s02-card-r);
  overflow: hidden;
  background: #05060f;
  box-shadow:
    0 0 0 var(--lvf-s02-card-ring) rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 15px 15px rgba(0, 0, 0, 0.09),
    0 34px 20px rgba(0, 0, 0, 0.05);
}

.lvf-s02-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- Pills */

.lvf-s02-pills {
  position: relative;
  z-index: 2;
  margin-top: var(--lvf-s02-pills-mt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.lvf-s02-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 34px;
  border-radius: 116px;
}
/* .lvf-s02-pill sitzt sowohl auf einem <p> als auch auf einem <a>. Beim <a>
   löscht Elementors ".elementor a { box-shadow: none }" (0-1-1) den Schatten,
   die beiden Pillen sahen dadurch unterschiedlich aus. Zwei Klassen. */
.lvf-page .lvf-s02-pill {
  box-shadow:
    10px 4px 16px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 5px rgba(0, 0, 0, 0.16);
}

.lvf-s02-pill--label {
  z-index: 1;
  width: 259px;
  max-width: 100%;
  padding-inline: 14px;
  background: #000000;
}

.lvf-s02-pill-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #82c6ee;
}

.lvf-s02-pill--label .lvf-s02-pill-text {
  font-family: var(--lvf-font-display);
  font-size: 12.78px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.38px;
  color: var(--lvf-white);
}

.lvf-s02-pill--link {
  z-index: 0;
  width: 175px;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(66px);
  backdrop-filter: blur(66px);
  transition: filter 0.18s ease;
}

.lvf-s02-pill--link:hover { filter: brightness(1.25); }
.lvf-s02-pill--link:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 3px; }

.lvf-s02-pill--link .lvf-s02-pill-text {
  font-family: var(--lvf-font-display);
  font-size: 12.78px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  background-image: var(--lvf-s02-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- Partner */

.lvf-s02-partners {
  position: relative;
  z-index: 1;
  margin-top: var(--lvf-s02-partners-mt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lvf-s02-partners-gap);
}

.lvf-s02-dx {
  display: inline-flex;
  align-items: center;
  gap: var(--lvf-s02-dx-gap);
  opacity: 0.7;
  /* Soll: Zeichen und Wortmarke komplett graustufig */
  filter: grayscale(1);
}

.lvf-s02-dx-mark {
  display: block;
  width: var(--lvf-s02-dx-mark-w);
  height: var(--lvf-s02-dx-mark-h);
  overflow: hidden;
}

.lvf-s02-dx-mark img {
  width: var(--lvf-s02-dx-mark-w);
  max-width: none;
}

.lvf-s02-dx-word {
  position: relative;
  display: block;
  width: var(--lvf-s02-dx-word-w);
  height: var(--lvf-s02-dx-word-h);
  overflow: hidden;
}

.lvf-s02-dx-word img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--lvf-s02-dx-word-w);
  max-width: none;
}

/* Volumetrica: kleines entfaerbtes Zeichen + Wortmarke (Design: Vektor mit Bildfuellung) */
.lvf-s02-vol {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, calc(2px + 2.344vw), 26px);
  height: var(--lvf-s02-chart-h);
}

/* Volumetrica: das Quellbild (512x512) traegt die Wellenform mittig mit grossem
   Transparentrand. Der sichtbare Ausschnitt wird auf die Soll-Groesse gezoomt:
   Mobile 40x29, Desktop 55x40 (Figma: STRETCH-Fuellung, leicht verzerrt). */
.lvf-s02-vol-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 29px;
  overflow: hidden;
}

.lvf-s02-vol-mark img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 167%;
  height: 170%;
  max-width: none;
  transform: translate(-50%, -50%);
  filter: grayscale(1) brightness(1.7);
  opacity: 0.85;
}

.lvf-s02-vol-word {
  font-family: var(--lvf-font-display);
  font-size: clamp(27px, calc(15px + 1.5625vw), 31px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: #becfdc;
}

.lvf-s02-partner--hansa {
  width: var(--lvf-s02-hansa-w);
  height: var(--lvf-s02-hansa-h);
  object-fit: cover;
  opacity: 0.7;
  /* Soll: Silber-Partner-Siegel komplett in Graustufen, Platte wirkt
     als halbtransparente graue Flaeche (grayscale + vorhandene Opacity) */
  filter: grayscale(1);
}

/* ================================================================ Tablet ab 768px
   (Werte interpolieren linear und erreichen bei 1024px exakt das Desktop-Design) */

@media (min-width: 768px) {
  .lvf-s02 {
    --lvf-s02-media-top: clamp(0px, calc(508px - 49.61vw), 127px);
    --lvf-s02-media-h: clamp(828px, calc(627px + 26.17vw), 895px);

    --lvf-s02-pt: clamp(198px, calc(66px + 17.19vw), 242px);
    /* 12.08.2026 von 120px auf 136px: Gegenstueck zu den 16px, die oben aus
       --lvf-s02-title-mt und --lvf-s02-sub-mt herausgenommen wurden. Ohne das
       waere die ganze Seite ab s03 um 16px hochgerutscht; sie ist 11257px hoch
       und bleibt es. Die Rechnung geht bei jeder Breite auf, nicht nur bei
       1024: die beiden Kuerzungen ergeben zusammen 48 - 0,0625w, dieser Wert
       kommt hier mit -40 + 0,171875w wieder dazu, beides ist ab 768px linear.
       Rest: die Luecke Partnerleiste-Unterkante zu s03-Kicker wird damit 126px,
       im Entwurf sind es 128 (heute 110). Die fehlenden 2px nicht zugegeben,
       weil sie die Seite auf 11259px verlaengern wuerden. */
    --lvf-s02-pb: clamp(92px, calc(-40px + 17.1875vw), 136px);
    --lvf-s02-badge-h: clamp(27px, calc(6px + 2.734vw), 34px);
    --lvf-s02-badge-fs: clamp(11px, calc(2px + 1.172vw), 14px);
    --lvf-s02-badge-lh: clamp(16px, calc(4px + 1.5625vw), 20px);
    --lvf-s02-badge-px: clamp(15px, calc(3px + 1.5625vw), 19px);
    --lvf-s02-badge-gap: clamp(6px, 0.78125vw, 8px);
    --lvf-s02-badge-dot: clamp(5px, calc(2px + 0.390625vw), 6px);
    --lvf-s02-title-fs: clamp(52px, calc(4px + 6.25vw), 68px);
    --lvf-s02-title-lh: clamp(53px, calc(22.28px + 4vw), 63.24px);
    /* 12.08.2026: bei 1024 und darueber 22px statt 29px. Gemessen gegen
       home-aus-vollbild und gegengeprueft an home-aus-schnipseln: die Pille
       sitzt richtig (bester Versatz 0), beide Titelzeilen sitzen 7px zu tief
       (Zeile 1 MAE 46,82 roh, 14,73 nach 7px Verschiebung). Der Wert bei 768
       bleibt 28px, dazwischen laeuft es linear. */
    --lvf-s02-title-mt: clamp(22px, calc(46px - 2.34375vw), 28px);
    --lvf-s02-sub-fs: clamp(13px, calc(-2px + 1.953vw), 18px);
    --lvf-s02-sub-lh: clamp(19px, calc(4px + 1.953vw), 24px);
    --lvf-s02-sub-ls: 0.54px;
    --lvf-s02-sub-mw: clamp(336px, calc(-111px + 58.2vw), 485px);
    /* 12.08.2026: bei 1024 und darueber 27px statt 36px. Die Unterzeile sitzt
       16px zu tief, davon kommen 7 vom Titel darueber, 9 von hier. Danach
       stehen Knopfpaar, Zertifikatsband und Partnerlogos statt 17px zu tief
       nur noch 1px zu hoch; der Rest ist Zeilenkasten-Rundung, kein Abstand. */
    --lvf-s02-sub-mt: clamp(25px, calc(19px + 0.78125vw), 27px);

    --lvf-s02-btn-h: clamp(42px, calc(30px + 1.5625vw), 46px);
    --lvf-s02-btn-r: clamp(9.14px, calc(6.56px + 0.336vw), 10px);
    --lvf-s02-btn-fs: clamp(15px, calc(10.08px + 0.641vw), 16.64px);
    --lvf-s02-btn-lh: clamp(23px, calc(17.09px + 0.77vw), 24.97px);
    --lvf-s02-btn-gap: clamp(7px, calc(4px + 0.390625vw), 8px);
    --lvf-s02-btn-pr: clamp(11px, calc(8px + 0.390625vw), 12px);
    --lvf-s02-btn-ghost-px: clamp(15px, calc(6px + 0.78125vw), 17px);
    --lvf-s02-tile: clamp(33px, calc(24px + 1.172vw), 36px);
    --lvf-s02-tile-r: clamp(5px, calc(2px + 0.390625vw), 6px);
    --lvf-s02-tile-ico: clamp(16px, calc(10px + 0.78125vw), 18px);
    --lvf-s02-cta-gap: clamp(7px, calc(4px + 0.390625vw), 8px);
    --lvf-s02-cta-mt: clamp(31px, calc(13px + 2.344vw), 37px);

    --lvf-s02-stats-mt: clamp(85px, calc(34px + 6.641vw), 102px);

    --lvf-s02-ticker-mt: clamp(81px, calc(153px - 7.031vw), 99px);
    /* Befund R3 (Desktop): das Band laeuft im Soll randlos bis zum Bildrand,
       der Einzug faellt daher von 30px (mobil) auf 0px (ab 1024) */
    --lvf-s02-ticker-px: clamp(0px, calc(120px - 11.71875vw), 30px);
    --lvf-s02-strip-r: clamp(26.74px, calc(16.96px + 1.273vw), 30px);
    --lvf-s02-strip-p: clamp(17px, calc(11px + 0.78125vw), 19px);
    --lvf-s02-card-w: clamp(144px, calc(-180px + 42.19vw), 252px);
    --lvf-s02-card-h: clamp(97px, calc(-122px + 28.52vw), 170px);
    --lvf-s02-card-r: clamp(5px, calc(-7px + 1.5625vw), 9px);
    --lvf-s02-card-gap: clamp(6px, calc(-9px + 1.953vw), 11px);
    --lvf-s02-card-ring: clamp(1.679px, calc(-2.125px + 0.4953vw), 2.947px);
    --lvf-s02-pills-mt: clamp(-17px, calc(7px - 2.344vw), -11px);

    --lvf-s02-partners-mt: clamp(35px, calc(227px - 18.75vw), 83px);
    --lvf-s02-partners-gap: clamp(33px, calc(-171px + 26.56vw), 101px);
    --lvf-s02-dx-gap: clamp(2px, calc(-1px + 0.390625vw), 3px);
    --lvf-s02-dx-mark-w: clamp(58px, calc(46px + 1.5625vw), 62px);
    --lvf-s02-dx-mark-h: clamp(33px, calc(27px + 0.78125vw), 35px);
    --lvf-s02-dx-word-w: clamp(186px, calc(150px + 4.688vw), 198px);
    --lvf-s02-dx-word-h: clamp(24px, calc(18px + 0.78125vw), 26px);
    --lvf-s02-chart-w: clamp(225px, calc(180px + 5.859vw), 240px);
    --lvf-s02-chart-h: clamp(56px, calc(44px + 1.5625vw), 60px);
    --lvf-s02-hansa-w: clamp(190px, calc(151px + 5.078vw), 203px);
    --lvf-s02-hansa-h: clamp(58px, calc(46px + 1.5625vw), 62px);
  }

  .lvf-s02-badge {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(61px);
    backdrop-filter: blur(61px);
  }

  .lvf-s02-stats {
    grid-template-columns: repeat(3, auto);
    column-gap: clamp(28px, 5vw, 93px);
    row-gap: 40px;
  }

  /* Desktop-Design hat nur eine Zertifikatsreihe. Sie wird versteckt, aber
     nicht angehalten: 12.08.2026

     Beide Reihen tragen dieselbe Animation. `display: none` haelt sie nicht
     an, sondern setzt sie beim Wiedereinblenden auf Phase 0 zurueck;
     `visibility` dagegen laesst sie durchlaufen. Isoliert nachgewiesen.

     Das trifft echte Besucher: im Querformat liegen fast alle heutigen Handys
     ueber 768 px (iPhone 14: 844, Pixel 7: 915, Galaxy S22: 780), im
     Hochformat darunter. Einmal drehen und zurueckdrehen genuegte im Test,
     danach liefen beide Reihen dauerhaft rund 127 px auseinander, bis die
     Seite neu geladen wurde. Zweimal wiederholt: 127,2 und 121,7 px.

     `position: absolute` ist noetig, weil die Reihe sonst trotz `visibility`
     ihren Platz im Flex-Fluss behaelt und das gap eine Luecke reisst. */
  .lvf-s02-row--b {
    position: absolute;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .lvf-s02-pills {
    flex-direction: row;
    gap: 0;
  }

  .lvf-s02-pill--link {
    width: 244px;
    margin-left: -80px;
    padding-left: 82px;
    padding-right: 14px;
    background: rgba(0, 0, 0, 0.41);
  }

  .lvf-s02-partners {
    flex-direction: row;
    height: 120px;
    gap: var(--lvf-s02-partners-gap);
  }

  .lvf-s02-vol-mark {
    width: clamp(40px, calc(-5px + 5.859vw), 55px);
    height: clamp(29px, calc(-4px + 4.297vw), 40px);
  }

  /* Pruefauftrag 13.08.2026, Fundstelle 2 (kritisch): die zweite Scheinebene
     des Zertifikatsbandes lag bisher AUSSCHLIESSLICH in der Override auf dem
     Server (server-stand-20260810/lvlup-fixes/r3-home.css Zeile 74 bis 127,
     body.page-id-7895 .lvf-s02 .lvf-s02-ticker::after, Spezifitaet 0-3-2) -
     unser Fragment hatte dafuer weder content noch background, nur eine
     Maskierung weiter unten in dieser Datei (im min-width:1024px-Block), die
     sich ausdruecklich auf die Override bezog. Ohne die Override blieb das
     Pseudoelement leer.
     Deshalb jetzt wortgleich aus der Override uebernommen, mit derselben
     Bindung an body.page-id-7895 (Grund siehe Kopf der Override-Datei: sonst
     wirkt die Regel auch auf /rules/, wo .lvf-s10-* ebenfalls vorkommt) und
     bei derselben Breite (min-width: 768px). Kerne an den Kastenkanten plus
     blaue Saeulen, deren Deckkraft aus der Soll-Ist-Differenz je x
     zurueckgerechnet ist. Die Basis-Maske ist hier mit drin, weil sie
     zwischen 768 und 1023px die einzige ist; ab 1024px gewinnt die eigene,
     praezisere Maskierung weiter unten (0-4-1, kappt zusaetzlich bei 908). */
  body.page-id-7895 .lvf-s02 .lvf-s02-ticker::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    bottom: -300px;
    z-index: -1;
    pointer-events: none;

    background-image:
      radial-gradient(240px 130px at 0% 26%,
        rgba(230, 246, 255, 0.95) 0%,
        rgba(165, 222, 252, 0.60) 42%,
        rgba(0, 155, 230, 0) 82%),
      radial-gradient(240px 130px at 100% 26%,
        rgba(230, 246, 255, 0.95) 0%,
        rgba(165, 222, 252, 0.60) 42%,
        rgba(0, 155, 230, 0) 82%),
      linear-gradient(90deg,
        rgba(0, 152, 228, 0.80) 0px,
        rgba(0, 150, 226, 0.62) 120px,
        rgba(0, 148, 224, 0.43) 220px,
        rgba(0, 144, 220, 0.24) 350px,
        rgba(0, 140, 215, 0.12) 550px,
        rgba(0, 136, 210, 0) 820px),
      linear-gradient(270deg,
        rgba(0, 152, 228, 0.80) 0px,
        rgba(0, 150, 226, 0.62) 120px,
        rgba(0, 148, 224, 0.43) 220px,
        rgba(0, 144, 220, 0.24) 350px,
        rgba(0, 140, 215, 0.12) 550px,
        rgba(0, 136, 210, 0) 820px);

    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 8%,
      rgba(0, 0, 0, 0.72) 18%,
      #000 28%,
      #000 47%,
      rgba(0, 0, 0, 0.58) 63%,
      rgba(0, 0, 0, 0.26) 77%,
      rgba(0, 0, 0, 0.06) 92%,
      rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 8%,
      rgba(0, 0, 0, 0.72) 18%,
      #000 28%,
      #000 47%,
      rgba(0, 0, 0, 0.58) 63%,
      rgba(0, 0, 0, 0.26) 77%,
      rgba(0, 0, 0, 0.06) 92%,
      rgba(0, 0, 0, 0) 100%);
  }
}

/* ================================================================ Desktop ab 1024px */

@media (min-width: 1024px) {
  .lvf-s02 { --lvf-s02-media-dark: 0.5; }

  .lvf-s02-title-br { display: inline; }

  /* ------------------------------------------------- Hero-Eckschein, Kern

     Der weisse Eckkern war zu schwach und der blaue Auslauf viel zu schmal.
     Gemessen linke Randspalte x 0..16 (rechts x 1744..1760 identisch):

       y        0     40     80    120    200    300    420    560    660
       SOLL-R 236    212    135     61      3      1      1      2      2
       IST-R  107     93     72     52     27      9      1      0      0
       SOLL-B 254    251    243    228    182    142    100     60     35
       IST-B  229    227    219    208    179    144    105     63     32

     Senkrecht stimmt das Blau ab y 200, der Weissanteil fehlt aber komplett
     (107 statt 236) und ist dafuer weiter unten zu hoch (27 statt 3 bei
     y 200). Ursache: der Kern sass mit "at 22% 0%" auf der Elementoberkante,
     also 100 px UEBER dem Bildrand, und der blur(48px) hat ihn dort gegen
     Leere verduennt. Er sitzt jetzt genau auf der Bildecke (8.33 % von
     1200 px = 100 px) und ist mit 220x190 px so klein wie im Entwurf:
     der Rotanteil ist bei y 120 auf ein Viertel gefallen, bei x 150 (y 16)
     ebenso (SOLL 41 gegen 230 an der Ecke).

     WICHTIG: der Eckkern steht NICHT hier, sondern als oberste Lage im
     ::after. Die beiden Pseudoelemente malen ueber den Elementhintergrund;
     ein weisser Kern im Hintergrund wird von den blauen Saeulen des ::after
     (Deckkraft 0,62) ueberdeckt. Gegenprobe ohne Weichzeichner: reines Weiss
     im Hintergrund kam an der Ecke nur als (108,195,239) an, genau der Wert,
     den 0,62 x rgb(0,152,228) ueber Weiss ergibt. */
  .lvf-s02-glow {
    background:
      radial-gradient(120px 700px at 21.8% 8%,
        rgba(2, 140, 210, 0.95) 0%, rgba(2, 130, 195, 0.6) 55%, rgba(2, 120, 190, 0) 100%),
      radial-gradient(120px 700px at 78.2% 8%,
        rgba(2, 140, 210, 0.95) 0%, rgba(2, 130, 195, 0.6) 55%, rgba(2, 120, 190, 0) 100%),
      radial-gradient(30% 22% at 50% 32%,
        rgba(167, 223, 255, 0.07) 0%, rgba(167, 223, 255, 0) 100%);
  }

  /* ------------------------------------------ Hero-Eckschein, blaue Flanke

     Waagerecht starb der Schein viel zu frueh ab. Gemessen als 30. Perzentil
     ueber 20 Zeilen, Blaukanal, Abstand vom linken Bildrand:

       x         0    40    80   120   160   200   240   280   320   400
       y 128 S  218   190   160   117    87    68    53    41    32    18
       y 128 I  201   176   129    74    32    11     4     3     3     5
       y 200 S  182   150   117    90    67    48    33    23    15     6
       y 200 I  179   148    99    49    19     7     5     5     6     6
       y 300 S  142   104    75    54    34    21    11     5
       y 300 I  144   113    68    32    11     6     5     5

     Am Bildrand selbst stimmt es, ab x 80 fehlt Licht, am staerksten
     zwischen x 120 und 240. Das fehlende Feld ist in x und y trennbar,
     eine Ellipse kann es nicht abbilden (waagerecht steil, senkrecht flach).
     Deshalb eine eigene Ebene: waagerechtes Profil im Verlauf, senkrechtes
     Profil in der Maske. Sie erbt blur und Deckkraft der Elternebene.
     Das Element ist 180 % breit (3168 px), der linke Bildrand liegt bei
     704 px, der rechte bei 2464 px; senkrecht reicht es von -100 bis 1100,
     der Bildrand oben liegt also bei 8.33 %. */
  .lvf-s02-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(0, 150, 240, 0) 0px,
        rgba(0, 150, 240, 0) 784px,
        rgba(0, 150, 240, 0.20) 814px,
        rgba(0, 150, 240, 0.38) 844px,
        rgba(0, 150, 240, 0.40) 884px,
        rgba(0, 150, 240, 0.30) 934px,
        rgba(0, 150, 240, 0.20) 984px,
        rgba(0, 150, 240, 0.12) 1044px,
        rgba(0, 150, 240, 0.07) 1104px,
        rgba(0, 150, 240, 0.03) 1174px,
        rgba(0, 150, 240, 0) 1264px),
      linear-gradient(270deg,
        rgba(0, 150, 240, 0) 0px,
        rgba(0, 150, 240, 0) 784px,
        rgba(0, 150, 240, 0.20) 814px,
        rgba(0, 150, 240, 0.38) 844px,
        rgba(0, 150, 240, 0.40) 884px,
        rgba(0, 150, 240, 0.30) 934px,
        rgba(0, 150, 240, 0.20) 984px,
        rgba(0, 150, 240, 0.12) 1044px,
        rgba(0, 150, 240, 0.07) 1104px,
        rgba(0, 150, 240, 0.03) 1174px,
        rgba(0, 150, 240, 0) 1264px);
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 12.7%,
      rgba(0, 0, 0, 0.64) 19%,
      rgba(0, 0, 0, 0.54) 25%,
      rgba(0, 0, 0, 0.26) 33.3%,
      rgba(0, 0, 0, 0.135) 43.3%,
      rgba(0, 0, 0, 0.11) 55%,
      rgba(0, 0, 0, 0.08) 63.3%,
      rgba(0, 0, 0, 0.04) 75%,
      rgba(0, 0, 0, 0) 91.7%);
            mask-image: linear-gradient(180deg,
      #000 0%, #000 12.7%,
      rgba(0, 0, 0, 0.64) 19%,
      rgba(0, 0, 0, 0.54) 25%,
      rgba(0, 0, 0, 0.26) 33.3%,
      rgba(0, 0, 0, 0.135) 43.3%,
      rgba(0, 0, 0, 0.11) 55%,
      rgba(0, 0, 0, 0.08) 63.3%,
      rgba(0, 0, 0, 0.04) 75%,
      rgba(0, 0, 0, 0) 91.7%);
  }

  /* Der weissliche Teil der Server-Override (r3-home.css,
     body.page-id-7895 .lvf-s02 .lvf-s02-glow::after, Spezifitaet 0-3-2) hat
     eine senkrechte Halbachse von 420 px und faerbte die Flanke bis y 300
     weiss: gemessen y 160 Rotkanal 41 gegen SOLL 21, y 200 30 gegen 7,
     y 300 10 gegen 1. Der Weissanteil kommt jetzt vollstaendig aus dem
     Eckkern oben; hier bleiben nur die beiden blauen Saeulen der Override
     unveraendert stehen. Vier Klassen (0-4-1), damit die Regel greift. */
  .lvf-page .lvf-s02 .lvf-s02-glow.lvf-s02-glow::after {
    background-image:
      radial-gradient(150px 150px at 22.22% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(150px 150px at 77.78% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(150px 150px at 22.22% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(150px 150px at 77.78% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(150px 150px at 22.22% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(150px 150px at 77.78% 8.33%,
        rgba(246, 252, 255, 1) 0%,
        rgba(246, 252, 255, 1) 37%,
        rgba(236, 249, 255, 0.40) 62%,
        rgba(210, 242, 255, 0.10) 84%,
        rgba(190, 235, 255, 0) 100%),
      radial-gradient(210px 480px at 22.22% 8.33%,
        rgba(20, 225, 255, 0.75) 0%,
        rgba(20, 222, 255, 0.60) 25%,
        rgba(16, 214, 252, 0.44) 33%,
        rgba(12, 202, 248, 0.26) 42%,
        rgba(8, 186, 244, 0.10) 55%,
        rgba(4, 172, 240, 0.04) 65%,
        rgba(0, 160, 236, 0.01) 80%,
        rgba(0, 152, 232, 0) 100%),
      radial-gradient(210px 480px at 77.78% 8.33%,
        rgba(20, 225, 255, 0.75) 0%,
        rgba(20, 222, 255, 0.60) 25%,
        rgba(16, 214, 252, 0.44) 33%,
        rgba(12, 202, 248, 0.26) 42%,
        rgba(8, 186, 244, 0.10) 55%,
        rgba(4, 172, 240, 0.04) 65%,
        rgba(0, 160, 236, 0.01) 80%,
        rgba(0, 152, 232, 0) 100%),
      radial-gradient(160px 980px at 22% 2%,
        rgba(0, 152, 228, 0.62) 0%,
        rgba(0, 148, 224, 0.44) 40%,
        rgba(0, 142, 218, 0.24) 70%,
        rgba(0, 136, 210, 0) 100%),
      radial-gradient(160px 980px at 78% 2%,
        rgba(0, 152, 228, 0.62) 0%,
        rgba(0, 148, 224, 0.44) 40%,
        rgba(0, 142, 218, 0.24) 70%,
        rgba(0, 136, 210, 0) 100%);
  }

  /* --------------------------------------------------- Zweitknopf, Fuellung

     "See How It Works" ist im Entwurf fast schwarz und traegt nur an Unter-
     und Rechtskante einen Lichtsaum. Live war die ganze Flaeche blau gefuellt.

     Gemessen am Mockup home-aus-vollbild.png ueber x 925..1062, je Zeile das
     30. Perzentil (ein Mittelwert waere von der weissen Schrift verfaelscht).
     Der Knopf steht im Mockup bei y 534..581, live bei y 552..598, deshalb
     zeilenweise ausgerichtet:

       Stelle im Knopf     SOLL            IST vorher
       2 px unter Oberk.   (  2, 11, 16)   ( 18, 72,101)
       oberes Drittel      (  2, 11, 17)   ( 18, 45, 62)
       Mitte               (  0, 12, 18)   ( 23, 52, 68)
       Mitte + 8           (  3, 20, 30)   ( 27, 64, 84)
       2 px ueber Boden    ( 15,148,223)   ( 56,171,235)

     rgba(26,58,76,0.85) ergibt ueber dem Hero-Grund (3,4,4) rechnerisch
     (23,51,66) und genau das war live zu messen. Der Kommentar aus Runde 3
     nannte als Soll (22,52,70); diese Zahl ist am Mockup nicht auffindbar,
     dort liegt die Fuellung bei (1,12,18). */
  .lvf-s02-btn--ghost {
    background: rgba(1, 13, 21, 0.9);
  }

  /* Der weissliche Bodenschein (#52b8f1, blur 19) reichte bis an die
     Oberkante: dort (18,72,101) statt (2,11,16). Kuerzerer Weichzeichner,
     groesserer Versatz nach unten und negativer Spread halten ihn unten,
     ohne den gemessenen Verlauf am Boden zu verlieren. Der schwarze
     Innenschatten steht jetzt VORN in der Liste und deckt damit den Rest
     des Ueberlaufs an Ober- und Linkskante ab (Reihenfolge der box-shadow-
     Liste = Malreihenfolge, das erste Element liegt oben). */
  .lvf-page .lvf-s02-btn--ghost {
    box-shadow:
      inset 8px 7px 12px #000000,
      inset 0 -13px 18px -4px rgba(82, 184, 241, 0.46),
      inset -4px -5px 14px -1px #00a4ff,
      inset -1px -2px 5px #00a4ff,
      7px 3px 11px rgba(0, 0, 0, 0.36),
      0 0 0 2px rgba(0, 0, 0, 0.25),
      0 0 0 3px rgba(0, 0, 0, 0.16);
  }

  .lvf-s02-stats {
    grid-template-columns: repeat(6, auto);
    column-gap: clamp(24px, 6vw, 93px);
    row-gap: 0;
  }

  /* Zertifikatsband laeuft rechts aus dem Rahmen.

     ENTWURF: Figma s02-hero-stats-ticker-desktop
       GROUP "Group 2147224220" box(105,810,2657,208) radius=30
     Das Band ist 2657 px breit und beginnt bei x=105, seine rechte Kante
     liegt also bei 2762 und damit 1002 px ausserhalb des 1760er-Rahmens.
     Im Mockup ist die helle Bandunterkante in Zeile 1012 durchgehend bis
     zum Bildrand messbar (Helligkeit 137 bei x1560 bis 134 bei x1750).

     VORHER: Kasten 1550 px breit, x 105..1655. Die helle Unterkante brach
     bei x=1637 ab (Helligkeit 147 -> 86), danach die Rundung und 105 px
     leere Flaeche.

     SPEZIFITAET, wichtig:
     Die alte Zeile hier lautete `.lvf-s02-strip { max-width: none }` (0-1-0)
     und hat verloren. Live liegt
       lvlup-fixes/assets/fixes-home-band.css:56
       .lvf-s02 .lvf-s02-ticker .lvf-s02-strip[data-lvf-marquee] (0-4-0)
     mit `max-width: 1550px` darueber, und das Fix-Plugin laedt nach
     lvlup-home.css. Deshalb hier 0-5-0 statt 0-1-0. Die Override-Zeile
     gehoert entfernt, siehe Bericht.

     LAUFANIMATION bleibt lueckenlos: ein Satz misst 10 x 252 + 9 x 11 =
     2619 px, die Reihe zwei Saetze plus Luecke = 5249 px, und die Keyframes
     verschieben um 50 % + gap/2 = 2630 px, also genau einen Satz plus Luecke.
     Das sichtbare Fenster ist 2657 - 2 x 19 = 2619 px und damit nie breiter
     als der Vorlauf. */
  .lvf-page .lvf-s02 .lvf-s02-ticker .lvf-s02-strip[data-lvf-marquee] {
    max-width: none;
    /* Linke Kante unveraendert wie bei der bisherigen Zentrierung:
       (1760 - 1550) / 2 = 105 px, genau der Entwurfswert. */
    margin-left: max(0px, calc((100% - 1550px) / 2));
    margin-right: 0;
    /* 100% + 897px ergibt bei 1760 px Rahmenbreite exakt die 2657 px
       aus dem Entwurf. Der Ueberstand wird von .lvf-page (overflow-x: clip)
       aufgefangen, es entsteht keine Querleiste. */
    width: calc(100% + 897px);
  }

  /* --------------------------------------------- Bandkasten, Innenschein

     Im Entwurf ist der Kasten oben und links schwarz und leuchtet nur an
     Unter- und Rechtskante, und zwar in gesaettigtem Blau. Live lag der
     weissliche Schein (#52b8f1, blur 36) ganz vorn in der box-shadow-Liste,
     also ueber allem anderen, und lief bis an die Oberkante durch.

     Gemessen x 400..1700 (Bandinnenrand ohne Karten), Zeilenmittel,
     SOLL-Zeile = Live-Zeile minus 17 (Sektionsversatz):
       Zeile ab Oberkante   SOLL           IST vorher
        0                   (  1,  2,  4)  ( 19, 53, 73)
        4                   (  1,  5,  8)  ( 14, 39, 54)
        8                   (  2,  7, 10)  ( 10, 30, 40)
       14                   (  2, 10, 15)  (  5, 22, 32)
       unten -8             (  6,114,174)  ( 29,104,145)
       unten -4             (  9,121,184)  ( 39,117,161)
       unten -2             ( 16,132,197)  ( 58,137,181)

     Am Boden ist der Soll-Schein also fast reines #00a4ff (Rotanteil 6..16),
     live war er weisslich (Rotanteil 29..58). Deshalb: schwarzer Schatten
     zuerst (deckt Ober- und Linkskante), dann das gesaettigte Blau, der
     weissliche Hauch nur noch abgeschwaecht darunter. */
  .lvf-page .lvf-s02-strip {
    box-shadow:
      inset 13px 16px 22px #000000,
      inset 0 -20px 30px rgba(82, 184, 241, 0.15),
      inset -12px -24px 36px #00a4ff,
      inset 0 -14px 20px #00a4ff,
      inset -1px -1px 0 #00a4ff;
  }

  /* ------------------------------------ Umgebungsschein oberhalb des Bandes

     Im Entwurf beginnt der helle Schein neben dem Band erst auf halber
     Bandhoehe und ist darueber schwarz. Live leuchtete die ganze Flaeche
     ueber dem Band mit.

     Gemessen linke Randspalte x 0..40, SOLL-Zeile = Live-Zeile minus 17:
       SOLL-y   728  770  812  854  884  890  896  902
       SOLL       1    1    1    1    1   15  184  194  (Rotkanal)
       IST vor    0    0   31   76  118  ...             (Rotkanal)
       SOLL-B    21   14    9    5    4   19  215  231
       IST-B     61  128  177  204  243  244  242  240

     Der Sprung liegt im Soll bei y 891, also live bei y 908; darueber ist
     der Grund schwarz. Beide Scheinebenen werden deshalb dort hart
     abgeschnitten. Die Maske greift NACH dem filter: blur, die Kante bleibt
     also scharf, obwohl die Ebene weichgezeichnet ist. */
  .lvf-s02-ticker::before {
    /* Ebene y 837.5..1482.5, Schnitt bei 908 = 10.9 % */
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, transparent 4%, rgba(0, 0, 0, 0.12) 11%, rgba(0, 0, 0, 0.45) 18%, #000000 28%, #000000 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%, transparent 4%, rgba(0, 0, 0, 0.12) 11%, rgba(0, 0, 0, 0.45) 18%, #000000 28%, #000000 100%);
  }

  /* Fundstelle 2, Fortsetzung: die eigene, praezisere Maskierung (kappt
     zusaetzlich bei 908, siehe Befund weiter oben in dieser Datei bei der
     neuen Regel body.page-id-7895 .lvf-s02 .lvf-s02-ticker::after im
     min-width:768px-Block). Vier Klassen noetig (0-4-1), um sowohl gegen die
     Override (0-3-2) als auch gegen die eigene Basis-Regel zu gewinnen. Ebene
     y 747.5..1352.5, Schnitt bei 908 = 26.5 %. Der Auslauf nach unten
     (47/63/77/92 %) ist aus der Override uebernommen, dort stimmt die
     Messung bereits. Gilt bewusst nur ab 1024px wie bisher: zwischen 768 und
     1023px bleibt die Basis-Maske aus der Regel oben stehen, das entspricht
     dem heutigen Live-Zustand unveraendert. */
  .lvf-page .lvf-s02 .lvf-s02-ticker.lvf-s02-ticker::after {
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent 16%,
      rgba(0, 0, 0, 0.12) 24%,
      rgba(0, 0, 0, 0.5) 32%,
      #000000 42%,
      #000 47%,
      rgba(0, 0, 0, 0.58) 63%,
      rgba(0, 0, 0, 0.26) 77%,
      rgba(0, 0, 0, 0.06) 92%,
      rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent 16%,
      rgba(0, 0, 0, 0.12) 24%,
      rgba(0, 0, 0, 0.5) 32%,
      #000000 42%,
      #000 47%,
      rgba(0, 0, 0, 0.58) 63%,
      rgba(0, 0, 0, 0.26) 77%,
      rgba(0, 0, 0, 0.06) 92%,
      rgba(0, 0, 0, 0) 100%);
  }

  /* Der Umgebungsschein des Zertifikatsbandes begann rund 100 px zu hoch.
     Im Entwurf ist der Grund ueber dem Band schwarz und das Blau setzt erst
     mit der Bandoberkante ein. Mitte x 700..1100, Blaukanal:
       y    775   800   825   850   875
       Soll 2,7   1,1  15,2  40,8  89,3
       Ist 27,5  40,5  53,5  19,0  40,2
     Oberkante der Ebene deshalb um 100 px nach unten, Unterkante unveraendert
     (top -90 -> 10, Hoehe +520 -> +420). Nur Desktop. */
  .lvf-s02-ticker::before {
    width: 135%;
    top: 10px;
    height: calc(100% + 420px);
  }
}

/* Pruefauftrag 13.08.2026, Fundstelle 2 (kritisch), Mobilfassung: dieselbe
   Ebene wie oben, aber im Mobil-Schnipsel 2 laut Override noch deutlicher
   (der Schein fuellt dort die ganze Flaeche um das Band herum). Fehlte
   mobil bisher komplett, auch ohne eigene Maskierung, das Pseudoelement
   blieb ohne Override also vollstaendig leer. Wortgleich aus
   server-stand-20260810/lvlup-fixes/r3-home.css uebernommen (Zeile 147 bis
   201), Maske hier mit drin, weil es fuer Mobil keine eigene, praezisere
   Maskierung wie am Desktop gibt. */
@media (max-width: 767px) {
  body.page-id-7895 .lvf-s02 .lvf-s02-ticker::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    bottom: -520px;
    z-index: -1;
    pointer-events: none;

    background-image:
      radial-gradient(210px 210px at 0% 40%,
        rgba(238, 249, 255, 0.98) 0%,
        rgba(190, 232, 253, 0.75) 34%,
        rgba(60, 190, 245, 0.30) 60%,
        rgba(0, 155, 230, 0) 84%),
      radial-gradient(210px 210px at 100% 40%,
        rgba(238, 249, 255, 0.98) 0%,
        rgba(190, 232, 253, 0.75) 34%,
        rgba(60, 190, 245, 0.30) 60%,
        rgba(0, 155, 230, 0) 84%),
      linear-gradient(90deg,
        rgba(0, 152, 228, 0.90) 0px,
        rgba(0, 150, 226, 0.56) 60px,
        rgba(0, 148, 224, 0.28) 130px,
        rgba(0, 144, 220, 0) 235px),
      linear-gradient(270deg,
        rgba(0, 152, 228, 0.90) 0px,
        rgba(0, 150, 226, 0.56) 60px,
        rgba(0, 148, 224, 0.28) 130px,
        rgba(0, 144, 220, 0) 235px),
      radial-gradient(95% 26% at 50% 36%,
        rgba(0, 150, 226, 0.62) 0%,
        rgba(0, 145, 220, 0.28) 55%,
        rgba(0, 140, 215, 0) 88%);

    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 8%,
      rgba(0, 0, 0, 0.72) 18%,
      #000 28%,
      #000 45%,
      rgba(0, 0, 0, 0.94) 53%,
      rgba(0, 0, 0, 0.47) 63%,
      rgba(0, 0, 0, 0.20) 74%,
      rgba(0, 0, 0, 0.07) 85%,
      rgba(0, 0, 0, 0) 96%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 8%,
      rgba(0, 0, 0, 0.72) 18%,
      #000 28%,
      #000 45%,
      rgba(0, 0, 0, 0.94) 53%,
      rgba(0, 0, 0, 0.47) 63%,
      rgba(0, 0, 0, 0.20) 74%,
      rgba(0, 0, 0, 0.07) 85%,
      rgba(0, 0, 0, 0) 96%);
  }
}

/* ================================================================ Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .lvf-s02 .lvf-s02-row {
    animation-name: none;
    transform: none;
  }
}


/* ===========================================================================
   Ghost-Knopf im Hero, Fuellung deckend, 11.08.2026 (Knopf-Abnahme)

   Die Knopf-Abnahme ueber alle acht Seiten hat den Fehler systematisch
   eingeordnet: der Weichzeichner-Glow von 16 bis 19 px ist bei allen
   Ghost-Knoepfen derselbe und richtig, entscheidend ist die Deckkraft der
   Fuellung darunter.

     ab etwa 0,85   der Glow bleibt ein schmaler Saum, wie im Entwurf
     0,1 bis 0,35   derselbe Glow flutet den ganzen Knopf

   Vier der fuenf Rezepte im Bestand stimmen, dieses war das einzige falsche.
   Gemessen oben (16,47,65) gegen Soll (4,16,22), unten (44,128,174) gegen
   (11,13,15).
   =========================================================================== */
@media (min-width: 1024px) {
  .lvf-page .lvf-s02-btn--ghost { background: rgba(6, 18, 24, 0.9); }
}

/* ===== s03 ===== */
/* ==========================================================================
   s03 - How it Works
   Mobile-first. Basis = Mobile-Band (Frame 440), ab 768px Tablet (2x2),
   ab 1024px exaktes Desktop-Raster (Content-Spalte 1240 = Figma 1239).
   ========================================================================== */

.lvf-s03 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 150px;
}

/* Grosser Blau-Glow an der Sektionsunterkante (Figma Group 2147224175:
   Ellipsen #12a9ff + #ffffff mit Layer-Blur, hier als messwertgenauer
   radialer Verlauf nachgebaut, Farbwerte aus dem Referenzbild gelesen). */
.lvf-s03::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: radial-gradient(
    2400px 130px at 50% 100%,
    #17b7f4 4%,
    #13a2e2 11.5%,
    #118dcb 19%,
    #0d74a9 27%,
    #0b5a86 35%,
    #064364 42%,
    #05314a 50%,
    #042335 58%,
    #021825 65%,
    #021118 73%,
    #02070b 88%,
    rgba(0, 4, 7, 0) 100%
  );
  pointer-events: none;
}

.lvf-s03-inner {
  position: relative;
}

/* Weicher Blau-Glow hinter der Schrittreihe (Figma: Ellipse 21879,
   rgba(18,169,255,0.15), Layer-Blur 100). Nur Deko. */
.lvf-s03-glow {
  display: none;
}

/* --------------------------------------------------------------- Kopfbereich */

.lvf-s03-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lvf-s03-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 129px;
  min-height: 27px;
  padding: 6.24px 9.36px;
  border-radius: 78px;
  background-color: #000000;
  box-shadow:
    6.8px 2.91px 10.68px rgba(0, 0, 0, 0.36),
    0 0 0 1.51px rgba(0, 0, 0, 0.25),
    0 0 0 3.43px rgba(0, 0, 0, 0.16);
  font-family: var(--lvf-font-display);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0.06em;
  color: var(--lvf-white);
}

/* 0.5px Gradient-Kontur (Figma strokeAlign OUTSIDE, Deckkraft 0.2) */
.lvf-s03-kicker::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: 78px;
  padding: 0.5px;
  background: linear-gradient(
    99deg,
    rgba(52, 176, 248, 0) 0%,
    rgba(53, 174, 244, 0.2) 53%,
    rgba(49, 169, 238, 0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lvf-s03-title {
  margin-top: 14.3px;
  font-family: var(--lvf-font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.02em;
  color: var(--lvf-white);
  background-image: linear-gradient(
    141deg,
    rgba(255, 255, 255, 0.7) 0%,
    #ffffff 50.5%,
    rgba(255, 255, 255, 0.7) 100%
  );
}

/* "Lvlup Futures" in Blau-Verlauf und fetter als der Resttitel */
.lvf-s03-title-blue {
  font-weight: 600;
  color: #12a9ff;
  background-image: var(--lvf-grad-blue);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lvf-s03-title,
  .lvf-s03-title-blue {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lvf-s03-sub {
  margin-top: 13.7px;
  font-family: var(--lvf-font-display);
  font-size: 13px;
  font-weight: 425;
  line-height: 24px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------ Schritte */

.lvf-s03-steps {
  position: relative;
  margin-top: 89px;
  display: flex;
  flex-direction: column;
  gap: 42px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.lvf-s03-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 33px;
}

/* Senkrechte Verbindungslinie von Punkt zu Punkt (Figma Divider #797979) */
.lvf-s03-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6.19px;
  top: 33.5px;
  width: 0.63px;
  height: calc(100% + 42px);
  background: #797979;
}

.lvf-s03-index {
  display: flex;
  align-items: center;
  gap: 13px;
}

.lvf-s03-num {
  font-family: var(--lvf-font-display);
  font-size: 58.11px;
  font-weight: 500;
  line-height: 1.23;
  color: var(--lvf-white);
}

.lvf-s03-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.53px 7.58px;
  border-radius: 3.79px;
  background: #092a3d;
  box-shadow: 0 2.53px 2.53px rgba(0, 0, 0, 0.25);
  font-family: var(--lvf-font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.23;
  color: #11a8ff;
  white-space: nowrap;
}

.lvf-s03-dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 27px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--lvf-grad-blue);
}

.lvf-s03-step-title {
  margin-top: 1.52px;
  font-family: var(--lvf-font-display);
  font-size: 26.53px;
  font-weight: 500;
  line-height: 1.23;
  color: var(--lvf-white);
}

/* Blaues Schluesselwort im Schritt-Titel */
.lvf-s03-word-blue {
  color: #12a9ff;
  background-image: var(--lvf-grad-blue);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lvf-s03-word-blue {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lvf-s03-step-desc {
  margin-top: 15.37px;
  width: 100%;
  max-width: var(--lvf-s03-dw);
  font-family: var(--lvf-font-display);
  font-size: 12.4px;
  font-weight: 300;
  line-height: 1.528;
  letter-spacing: 0.04em;
  color: var(--lvf-white);
}

.lvf-s03-step--1 { --lvf-s03-dw: 188px; }
.lvf-s03-step--2 { --lvf-s03-dw: 213px; }
.lvf-s03-step--3 { --lvf-s03-dw: 202px; }
.lvf-s03-step--4 { --lvf-s03-dw: 246px; }

/* ============================================== Tablet: 768px bis 1023px ==== */

@media (min-width: 768px) {

  .lvf-s03 {
    padding-top: 110px;
    padding-bottom: 152px;
  }

  .lvf-s03::before {
    height: 170px;
    /* Soll: Band ist am UNTEREN Rand ueber die volle Breite am hellsten
       (x=440: 19,163,227 direkt vor Schwarz) und endet dort als bewusste
       Neon-Kante. Linear statt radial, damit die Kante ueberall hell ist. */
    background: linear-gradient(
      0deg,
      #17b7f4 0%,
      #16b0f0 8%,
      #13a2e2 17%,
      #0f7eb7 29%,
      #09557f 44%,
      #053652 61%,
      #04202f 78%,
      rgba(3, 26, 40, 0) 100%
    );
  }

  .lvf-s03-glow {
    display: block;
    position: absolute;
    z-index: -1;
    left: 5.81%;
    width: 88.46%;
    top: 397px;
    height: 176px;
    border-radius: 50%;
    background: rgba(18, 169, 255, 0.15);
    filter: blur(100px);
    pointer-events: none;
  }

  .lvf-s03-kicker {
    min-width: 144px;
    min-height: 31px;
    font-size: 14px;
  }

  .lvf-s03-title {
    margin-top: 12px;
    font-size: clamp(48px, 5.078vw, 65px);
  }

  .lvf-s03-sub {
    margin-top: 27px;
    font-size: clamp(13px, 1.406vw, 18px);
  }

  /* 2 x 2, Verbindungslinie je Zeile */
  .lvf-s03-steps {
    margin-top: 85px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 56px;
    width: auto;
    max-width: none;
    margin-inline: 0;
    text-align: center;
  }

  .lvf-s03-step {
    align-items: center;
    padding-left: 0;
  }

  .lvf-s03-step:not(:last-child)::after {
    content: none;
  }

  .lvf-s03-step:nth-child(odd)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 97.5px;
    width: calc(100% + 40px);
    height: 0.56px;
    background: #797979;
  }

  .lvf-s03-num {
    font-size: 51.55px;
  }

  .lvf-s03-start {
    padding: 2.24px 6.72px;
    border-radius: 3.36px;
    box-shadow: 0 2.24px 2.24px rgba(0, 0, 0, 0.25);
    font-size: 12px;
  }

  .lvf-s03-dot {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 28.59px;
    width: 11px;
    height: 11px;
  }

  .lvf-s03-step-title {
    margin-top: 30px;
    font-size: clamp(18.67px, 1.898vw, 23.53px);
  }

  .lvf-s03-step-desc {
    margin-top: 14.05px;
    margin-inline: auto;
    font-size: 11px;
  }

  .lvf-s03-step--1 { --lvf-s03-dw: 167px; }
  .lvf-s03-step--2 { --lvf-s03-dw: 189px; }
  .lvf-s03-step--3 { --lvf-s03-dw: 180px; }
  .lvf-s03-step--4 { --lvf-s03-dw: 218px; }
}

/* ============================ Desktop: ab 1024px, exakt ab 1280px (1240) ==== */

@media (min-width: 1024px) {

  .lvf-s03 {
    /* Review R3, Befund 6: Sektion sass 136px zu tief (SOLL Kante y=1918,
       IST y=2054). Negativer Oberrand zieht die Sektion auf SOLL-Position,
       innere Abstaende bleiben unveraendert. */
    margin-top: -136px;
    padding-top: 126px;
    padding-bottom: 154px;
  }

  /* Spaltenbreiten und Abstaende aus dem Band, in Prozent der 1239er
     Content-Spalte: 209 / 127 / 217 / 128 / 202 / 118 / 238 */
  .lvf-s03-steps {
    display: grid;
    grid-template-columns:
      16.8684% 10.2502% 17.5141% 10.3309% 16.3035% 9.5238% 19.2091%;
    column-gap: 0;
    row-gap: 0;
  }

  .lvf-s03-step--1 { grid-column: 1; }
  .lvf-s03-step--2 { grid-column: 3; }
  .lvf-s03-step--3 { grid-column: 5; }
  .lvf-s03-step--4 { grid-column: 7; }

  /* Die weiche Ellipse hinter der Schrittreihe (Figma Ellipse 21879,
     rgba(18,169,255,0.15), Layer-Blur 100) liegt im Entwurf nicht sichtbar
     ueber dem Neonband. Gemessen in der Bildmitte (x 780..980):

       Abstand von unten   140          100
       SOLL             (  5, 45, 69) (  9, 84,126)
       mit Ellipse      (  6, 57, 86) ( 10, 93,140)
       Bandverlauf allein ( 5, 45, 69) (  9, 84,126)

     Sie addiert also genau die Differenz. Ab 1024 px deshalb aus; auf
     Tablet bleibt die Regel von 768 px unveraendert gueltig. */
  .lvf-s03-glow { display: none; }

  /* ------------------------------------------ Neonband an der Unterkante

     Zwei Befunde, beide am Mockup nachgemessen.

     1. WAAGERECHT: das Band ist live ueber die ganze Breite gleich hell,
        im Entwurf faellt es zu beiden Bildraendern hin ab. Gemessen in der
        untersten Bandzeile (y 1905..1919), Mittel ueber je 40 px:

          x       0    110    220    330    440    550    660    770    880
          SOLL  138    176    201    214    223    230    236    240    241  (Blau)
          IST   241    241    241    241    241    242    242    242    242
          Maske .513  .660   .798   .855   .893   .925   .955   .968   .976

        Der Verlauf ist spiegelsymmetrisch zur Mitte. Die Form steckt
        deshalb in einer waagerechten Maske (Anteil = SOLL/241), die
        senkrechte Form bleibt davon unberuehrt.

     2. SENKRECHT: das Band ist im Entwurf hoeher und oben heller. Gemessen
        in der Bildmitte (x 780..980), Abstand von der Sektionsunterkante:

          Abstand   4     20     36     52     68     84    100    132    164
          SOLL    251    242    229    210    186    157    126     78     46
          IST     244    236    216    185    153    126     93     53     29

        Live entspricht der Soll-Kurve, aber um rund 16 px nach unten
        gestaucht: SOLL bei Abstand 68 (14,127,186) = IST bei Abstand 52
        (14,127,185). Deshalb 210 px statt 170 px Hoehe und Stuetzstellen
        direkt aus der Messung. Die Hoehe ist reine Deko (absolut, bottom 0),
        das Layout aendert sich dadurch nicht. */
  .lvf-s03::before {
    height: 185px;
    background: linear-gradient(
      0deg,
      #19c3fb 0%,
      #16b5f2 10.8%,
      #13a5e5 19.5%,
      #1093d2 28.1%,
      #0e7fba 36.8%,
      #0b6a9d 45.4%,
      #09547e 54.1%,
      #074365 62.7%,
      #05344e 71.4%,
      #04273b 80%,
      rgba(4, 30, 46, 0.55) 88.6%,
      rgba(3, 26, 37, 0) 100%
    );
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.513) 0%,
      rgba(0, 0, 0, 0.660) 6.25%,
      rgba(0, 0, 0, 0.798) 12.5%,
      rgba(0, 0, 0, 0.855) 18.75%,
      rgba(0, 0, 0, 0.893) 25%,
      rgba(0, 0, 0, 0.925) 31.25%,
      rgba(0, 0, 0, 0.955) 37.5%,
      rgba(0, 0, 0, 0.968) 43.75%,
      rgba(0, 0, 0, 0.976) 50%,
      rgba(0, 0, 0, 0.968) 56.25%,
      rgba(0, 0, 0, 0.955) 62.5%,
      rgba(0, 0, 0, 0.925) 68.75%,
      rgba(0, 0, 0, 0.893) 75%,
      rgba(0, 0, 0, 0.855) 81.25%,
      rgba(0, 0, 0, 0.798) 87.5%,
      rgba(0, 0, 0, 0.660) 93.75%,
      rgba(0, 0, 0, 0.513) 100%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.513) 0%,
      rgba(0, 0, 0, 0.660) 6.25%,
      rgba(0, 0, 0, 0.798) 12.5%,
      rgba(0, 0, 0, 0.855) 18.75%,
      rgba(0, 0, 0, 0.893) 25%,
      rgba(0, 0, 0, 0.925) 31.25%,
      rgba(0, 0, 0, 0.955) 37.5%,
      rgba(0, 0, 0, 0.968) 43.75%,
      rgba(0, 0, 0, 0.976) 50%,
      rgba(0, 0, 0, 0.968) 56.25%,
      rgba(0, 0, 0, 0.955) 62.5%,
      rgba(0, 0, 0, 0.925) 68.75%,
      rgba(0, 0, 0, 0.893) 75%,
      rgba(0, 0, 0, 0.855) 81.25%,
      rgba(0, 0, 0, 0.798) 87.5%,
      rgba(0, 0, 0, 0.660) 93.75%,
      rgba(0, 0, 0, 0.513) 100%);
  }

  /* Waagerechte Verbindungslinie von Punktmitte 01 bis Punktmitte 04 */
  .lvf-s03-steps::before {
    content: "";
    position: absolute;
    left: 8.4342%;
    right: 9.6046%;
    top: 97.5px;
    height: 0.56px;
    background: #797979;
  }

  .lvf-s03-step:nth-child(odd)::after {
    content: none;
  }
}

/* ===== s04 ===== */
/* ============================================================
   s04 - Pricing + Add-ons ("Choose Your Evaluation")
   Desktop-Werte 1:1 aus s04-pricing-addons-desktop.txt (Frame 1760,
   Content-Spalte x=260..1500). Mobile-Werte aus …-mobile.txt (Frame 440).
   ============================================================ */

.lvf-s04 {
  position: relative;
  isolation: isolate;
  /* Review R3, Befund 6: s03 wurde um 136px nach oben gezogen; der zusaetzliche
     obere Abstand (48 + 109 = 157) haelt die Sektionsueberschrift exakt auf
     ihrer SOLL-Position (Messung: SOLL-Luecke ab s03-Kante war 109px groesser). */
  padding: 157px 0 55px;
  overflow: clip;

  /* --- Kartenmasse Desktop --- */
  --s04-card-r: 12px;
  --s04-card-pad-x: 4px;
  --s04-card-pad-t: 3px;
  --s04-in-r: 10px;
  --s04-in-pad-x: 25px;
  --s04-in-pad-t: 25px;
  --s04-in-pad-b: 27px;
  --s04-in-blur: 26px;
  --s04-glow-h: 222px;
  --s04-glow-t: -110px;
  --s04-shard: 100px;
  --s04-shard-h: 111px;
  --s04-shard-t: 21px;
  --s04-edge-v: 193px;
  --s04-mark-h: 22px;
  --s04-chip: 26px;
  --s04-chip-r: 8px;
  --s04-chip-ico: 13px;
  --s04-pop-h: 22px;
  --s04-pop-fs: 11px;
  --s04-pop-ico: 12px;
  --s04-pop-gap: 6px;
  --s04-pop-pr: 12px;
  --s04-pop-pl: 8px;
  --s04-kind-mt: 19.5px;
  --s04-kind-fs: 14px;
  --s04-kind-lh: 20px;
  --s04-size-mt: 15px;
  --s04-size-fs: 37px;
  --s04-size-lh: 46px;
  --s04-buy-mt: 15.5px;
  --s04-btn-h: 47px;
  --s04-btn-r: 6px;
  --s04-btn-pl: 17px;
  --s04-btn-pr: 7px;
  --s04-btn-fs: 17px;
  --s04-btn-lh: 21px;
  --s04-price-w: 113px;
  --s04-price-w-pop: 104px;
  --s04-price-h: 33px;
  --s04-price-r: 3px;
  --s04-price-fs: 19px;
  --s04-or-mt: 4px;
  --s04-or-h: 13px;
  --s04-or-gap: 9px;
  --s04-or-l: 60px;
  --s04-or-fs: 10px;
  --s04-btn2-mt: 4px;
  --s04-sep-mt: 27.5px;
  --s04-sep-h: 13px;
  --s04-sep-gap: 9px;
  --s04-sep-fs: 11px;
  --s04-specs-mt: 26.5px;
  --s04-specs-gap: 17.9px;
  --s04-srow-h: 16px;
  --s04-srow-ico: 16px;
  --s04-row-gap: 9px;
  --s04-row-fs: 12px;
  --s04-row-lh: 15px;
  --s04-rule-mt: 31px;
  --s04-checks-mt: 29px;
  --s04-checks-gap: 18.5px;
  --s04-crow-h: 14px;
  --s04-crow-ico: 15px;
  --s04-info: 17px;
  --s04-info-ico: 10px;
  --s04-note-mt: 33px;
  --s04-note-mb: 35px;
  --s04-note-fs: 12px;
  --s04-note-lh: 17px;

  /* --- wiederkehrende Farbverlaeufe (Text) --- */
  --s04-grad-soft: linear-gradient(180deg, #afd4e8 0%, #72bee8 100%);
  --s04-grad-blue: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
  --s04-grad-blue2: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
  --s04-grad-gold: linear-gradient(143deg, #feedb6 0%, #ff9200 100%);
  /* Fuellung und Innenschein der blauen Knoepfe (aktiver Reiter, Kauf-Knopf
     der hervorgehobenen Karte, "Most Popular"-Abzeichen). Hier stehen die
     bisherigen Werte; der gemessene Desktop-Satz steht weiter unten im
     Zweig ab 1024 px. */
  --s04-grad-pop: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
  --s04-pop-inner: #5bbce8;
  --s04-tab-inner: 24px;
  --s04-grad-head: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
  --s04-grad-white: linear-gradient(180deg, #ffffff 0%, #d6d6d6 100%);
  --s04-grad-muted: linear-gradient(180deg, #c4d3db 0%, #acc9db 100%);
  --s04-hair: rgba(20, 20, 20, 1);
}

.lvf-s04 .lvf-s04-inner { position: relative; z-index: 1; }

.lvf-s04 .lvf-s04-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hintergrund: schwarze Panel-Flaeche + Glows ---------- */
.lvf-s04 .lvf-s04-slab {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 70px, #000000 calc(100% - 70px), rgba(0, 0, 0, 0) 100%);
}
.lvf-s04 .lvf-s04-topglow {
  position: absolute;
  top: -197px;
  left: 50%;
  z-index: 0;
  width: min(2342px, 133vw);
  height: 406px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(18, 169, 255, 0.22) 0%, rgba(18, 169, 255, 0) 100%);
  filter: blur(60px);
  opacity: 0.35;
}
.lvf-s04 .lvf-s04-shard {
  position: absolute;
  z-index: 0;
  width: 760px;
  height: 760px;
  border: 0.5px solid rgba(140, 213, 255, 0.04);
  border-radius: 64px;
  background: linear-gradient(281deg, rgba(140, 213, 255, 0.02) 0%, rgba(140, 213, 255, 0) 100%);
  transform: rotate(45deg);
  pointer-events: none;
}
.lvf-s04 .lvf-s04-shard--r { top: -60px; left: 68%; }
.lvf-s04 .lvf-s04-shard--l { top: -40px; right: 74%; }

/* ---------- Kopfbereich ---------- */
.lvf-s04 .lvf-s04-kicker { display: flex; justify-content: center; }
.lvf-s04 .lvf-s04-kicker-t {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding-inline: 19px;
  border: 0;
  border-radius: 78px;
  /* Fuellung: opak #00121c. Der Rand wird seit dem Muster-A-Fix (0,5px
     mask-composite) vom ::before unten gezeichnet, background traegt hier
     nur noch die Flaeche, keinen border-box-Verlauf mehr. */
  background: #00121c;
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font-size: clamp(12px, 0.78vw + 6px, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Muster A (muster-a-home-rules.md Abschnitt 4): Rahmen war 1px per
   border-box-Trick, Figma verlangt 0,5px. Technik 1:1 von s05/s06-kicker-t
   uebernommen (mask-composite exclude), nur Winkel/Selektor angepasst. */
.lvf-s04 .lvf-s04-kicker-t::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border: 0.5px solid rgba(53, 174, 244, 0.55);
  border-radius: inherit;
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s04 .lvf-s04-kicker-t::before {
    border: 0;
    padding: 0.5px;
    background: linear-gradient(120deg,
      rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

.lvf-s04 .lvf-s04-title {
  margin-top: 21px;
  font-size: clamp(48px, 6.64vw - 3px, 65px);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  background-image: var(--s04-grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s04 .lvf-s04-title-hl {
  background-image: var(--s04-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s04 .lvf-s04-sub {
  max-width: 671px;
  margin: 18px auto 0;
  font-size: clamp(13px, 1.95vw - 2px, 18px);
  font-weight: 425;
  line-height: 24px;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Umschalter Lvlup / Starter ---------- */
.lvf-s04 .lvf-s04-toggle {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 95px auto 0;
  padding: 10px;
  border: 0.6px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(0deg, rgba(0, 24, 38, 0) 0%, #001826 100%) padding-box,
    linear-gradient(0deg, rgba(0, 162, 255, 0.12), rgba(0, 162, 255, 0.12)) padding-box,
    linear-gradient(#020a10, #020a10) padding-box,
    linear-gradient(100deg, rgba(52, 176, 248, 0) 50%, #35aef4 75%, rgba(49, 169, 238, 0) 100%) border-box;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.lvf-s04 .lvf-s04-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 27px;
  border-radius: 100px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: color 0.18s ease, background 0.18s ease;
}
/* Touch-Ziel auf >= 44px vergroessern, ohne die Optik zu aendern */
.lvf-s04 .lvf-s04-tab::before {
  content: "";
  position: absolute;
  inset: -9px -2px;
}
.lvf-s04 .lvf-s04-tab:hover { color: #cfeaff; }
.lvf-s04 .lvf-s04-tab.is-active {
  width: 196px;
  height: 38px;
  border: 1.34px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: var(--s04-grad-pop);
  box-shadow:
    0 8px 12px -1px rgba(0, 0, 0, 0.64),
    inset 0 2px 3px -1px rgba(255, 255, 255, 0.3),
    inset 0 1px var(--s04-tab-inner) var(--s04-pop-inner);
  color: #000000;
  font-weight: 550;
}
.lvf-s04 .lvf-s04-tab.is-active::before { inset: -4px -2px; }
.lvf-s04 .lvf-s04-tab:focus-visible {
  outline: 2px solid #8cd5ff;
  outline-offset: 3px;
}

/* ---------- Kartenraster ---------- */
.lvf-s04 .lvf-s04-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 19px;
  margin-top: 16px;
}
.lvf-s04 .lvf-s04-cards[hidden] { display: none; }

/* ---------- Karte ---------- */
.lvf-s04 .lvf-s04-card {
  display: flex;
  flex-direction: column;
  border: 0.78px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--s04-card-r);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 53%, rgba(16, 25, 33, 0.4) 100%);
  padding: var(--s04-card-pad-t) var(--s04-card-pad-x) 0;
}
.lvf-s04 .lvf-s04-card-in {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 0.78px solid transparent;
  border-radius: var(--s04-in-r);
  background:
    linear-gradient(rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.012)) padding-box,
    linear-gradient(180deg, #04070a 0%, #010203 30%, #010203 100%) padding-box,
    linear-gradient(180deg, rgba(0, 96, 151, 0.55) 0%, #2a2f36 16%, #23272e 100%) border-box;
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(var(--s04-in-blur));
  backdrop-filter: blur(var(--s04-in-blur));
  padding: var(--s04-in-pad-t) var(--s04-in-pad-x) var(--s04-in-pad-b);
}

/* weiche Kuppel oben (Ellipse 246/247) */
.lvf-s04 .lvf-s04-card-glow {
  position: absolute;
  top: var(--s04-glow-t);
  left: 50%;
  width: 165%;
  height: var(--s04-glow-h);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 132, 173, 0.38) 0%, rgba(61, 132, 173, 0) 100%);
  filter: blur(28px);
  pointer-events: none;
}
/* blauer Schimmer unten, nur auf der hervorgehobenen Karte (Vector 4) */
.lvf-s04 .lvf-s04-card--pop .lvf-s04-card-in::after {
  content: "";
  position: absolute;
  top: 62%;
  left: 50%;
  width: 176%;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(35, 151, 217, 0.22) 0%, rgba(35, 151, 217, 0) 100%);
  filter: blur(38px);
  pointer-events: none;
}
/* Haarlinien oben und links (RECTANGLE "Line") */
.lvf-s04 .lvf-s04-card-edge { position: absolute; inset: 0; pointer-events: none; }
.lvf-s04 .lvf-s04-card-edge::before,
.lvf-s04 .lvf-s04-card-edge::after { content: ""; position: absolute; }
.lvf-s04 .lvf-s04-card-edge::before {
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 23px;
  background: linear-gradient(90deg, rgba(0, 96, 151, 0) 0%, #005f96 48%, rgba(0, 95, 148, 0) 100%);
}
.lvf-s04 .lvf-s04-card-edge::after {
  top: 0;
  left: 0;
  width: 1px;
  height: var(--s04-edge-v);
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(0, 91, 143, 0) 0%, #005c91 50%, rgba(0, 96, 151, 0) 100%);
}
/* Trend-Pfeil oben rechts (VECTOR "Vector" 100x111) */
.lvf-s04 .lvf-s04-card-shard {
  position: absolute;
  top: var(--s04-shard-t);
  right: calc(var(--s04-shard) * 0.06);
  width: var(--s04-shard);
  height: var(--s04-shard-h);
  background: linear-gradient(303deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 100%);
  clip-path: polygon(58% 10%, 84% 0%, 100% 22%, 92% 46%, 82% 34%, 34% 96%, 12% 100%, 4% 82%, 24% 88%, 72% 26%);
  pointer-events: none;
}

.lvf-s04 .lvf-s04-card-head,
.lvf-s04 .lvf-s04-buy,
.lvf-s04 .lvf-s04-sep,
.lvf-s04 .lvf-s04-specs,
.lvf-s04 .lvf-s04-rule,
.lvf-s04 .lvf-s04-checks { position: relative; z-index: 1; }

.lvf-s04 .lvf-s04-card-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--s04-mark-h);
}
.lvf-s04 .lvf-s04-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--s04-chip);
  height: var(--s04-chip);
  border: 1px solid rgba(140, 213, 255, 0.4);
  border-radius: var(--s04-chip-r);
  /* Review R3, Befund 10: SOLL ist eine blau gefuellte Kachel (Blockmittel
     RGB(31,62,78)), nicht nur dunkel mit blauem Rand (IST RGB(17,33,45)). */
  background: linear-gradient(180deg, #244a5e 0%, #16303f 100%);
  box-shadow: 0 0 12px rgba(18, 169, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lvf-s04 .lvf-s04-chip-ico { width: var(--s04-chip-ico); height: var(--s04-chip-ico); }
.lvf-s04 .lvf-s04-chip-ico path { fill: url(#lvf-s04-g-blue); }

.lvf-s04 .lvf-s04-pop {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--s04-pop-gap);
  height: var(--s04-pop-h);
  padding-right: var(--s04-pop-pr);
  padding-left: var(--s04-pop-pl);
  border: 1px solid transparent;
  border-radius: 100px;
  background:
    var(--s04-grad-pop) padding-box,
    linear-gradient(180deg, #999999 0%, rgba(255, 255, 255, 0) 100%) border-box;
  box-shadow:
    3px 6px 12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 2px 10px -1px rgba(255, 255, 255, 0.3),
    inset 0 1px 7px var(--s04-pop-inner);
  color: #000000;
  font-size: var(--s04-pop-fs);
  font-weight: 565;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lvf-s04 .lvf-s04-pop-ico { width: var(--s04-pop-ico); height: var(--s04-pop-ico); }

.lvf-s04 .lvf-s04-card-kind {
  margin-top: var(--s04-kind-mt);
  font-size: var(--s04-kind-fs);
  font-weight: 400;
  line-height: var(--s04-kind-lh);
  letter-spacing: 0.02em;
  color: rgba(246, 248, 250, 0.5);
}
.lvf-s04 .lvf-s04-card-size {
  margin-top: var(--s04-size-mt);
  font-size: var(--s04-size-fs);
  font-weight: 510;
  line-height: var(--s04-size-lh);
  letter-spacing: -0.02em;
  background-image: var(--s04-grad-white);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-card--pop .lvf-s04-card-size {
  font-weight: 600;
  background-image: var(--s04-grad-blue);
}

/* ---------- Kauf-Buttons ---------- */
.lvf-s04 .lvf-s04-buy { margin-top: var(--s04-buy-mt); }
.lvf-s04 .lvf-s04-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--s04-btn-h);
  padding-right: var(--s04-btn-pr);
  padding-left: var(--s04-btn-pl);
  border: 0.78px solid rgba(255, 255, 255, 0.02);
  border-radius: var(--s04-btn-r);
  background:
    linear-gradient(176deg, #000000 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(134deg, rgba(110, 202, 255, 0.05) 0%, rgba(0, 128, 202, 0.05) 100%);
  box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(0, 0, 0, 0.17);
  transition: filter 0.18s ease, transform 0.18s ease;
}

/* Die gezeichnete Mobilhöhe bleibt 33 px. Nur die Antippfläche wächst. */
@media (max-width: 767px) {
  .lvf-s04 .lvf-s04-btn::before {
    content: "";
    position: absolute;
    inset: -7px 0;
  }
}
.lvf-s04 .lvf-s04-btn:hover { filter: brightness(1.18); }
.lvf-s04 .lvf-s04-btn:active { transform: translateY(1px); }
.lvf-s04 .lvf-s04-btn:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 2px; }
.lvf-s04 .lvf-s04-btn-label {
  font-size: var(--s04-btn-fs);
  font-weight: 453;
  line-height: var(--s04-btn-lh);
  letter-spacing: 0.031em;
  background-image: var(--s04-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-btn-price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--s04-price-w);
  height: var(--s04-price-h);
  border-radius: var(--s04-price-r);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: var(--s04-price-fs);
  font-weight: 533;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.lvf-s04 .lvf-s04-card--pop .lvf-s04-btn {
  background: var(--s04-grad-pop);
  box-shadow:
    0 5px 12px -4px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(0, 0, 0, 0.17),
    0 8px 12px -1px rgba(0, 0, 0, 0.64),
    inset 0 2px 3px -1px rgba(255, 255, 255, 0.3),
    inset 0 1px 24px var(--s04-pop-inner);
}
.lvf-s04 .lvf-s04-card--pop .lvf-s04-btn-label {
  background-image: none;
  font-weight: 500;
  color: #000000;
  -webkit-text-fill-color: #000000;
}
.lvf-s04 .lvf-s04-card--pop .lvf-s04-btn-price {
  width: var(--s04-price-w-pop);
  background: #000000;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.lvf-s04 .lvf-s04-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s04-or-gap);
  height: var(--s04-or-h);
  margin-top: var(--s04-or-mt);
}
.lvf-s04 .lvf-s04-or-l {
  flex: none;
  width: var(--s04-or-l);
  height: 0;
  border-top: 0.5px solid var(--s04-hair);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.11);
}
.lvf-s04 .lvf-s04-or-t {
  font-size: var(--s04-or-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-image: var(--s04-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-or + .lvf-s04-btn { margin-top: var(--s04-btn2-mt); }

/* ---------- "What's Included" ---------- */
.lvf-s04 .lvf-s04-sep {
  display: flex;
  align-items: center;
  gap: var(--s04-sep-gap);
  height: var(--s04-sep-h);
  margin-top: var(--s04-sep-mt);
}
.lvf-s04 .lvf-s04-sep-l {
  flex: 1;
  height: 0;
  border-top: 1.17px solid var(--s04-hair);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.11);
}
.lvf-s04 .lvf-s04-sep-t {
  flex: none;
  font-size: var(--s04-sep-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* ---------- Kennzahlen ---------- */
.lvf-s04 .lvf-s04-specs {
  display: flex;
  flex-direction: column;
  gap: var(--s04-specs-gap);
  margin-top: var(--s04-specs-mt);
}
.lvf-s04 .lvf-s04-srow {
  display: flex;
  align-items: center;
  gap: var(--s04-row-gap);
  height: var(--s04-srow-h);
}
.lvf-s04 .lvf-s04-srow-ico {
  flex: none;
  width: var(--s04-srow-ico);
  height: var(--s04-srow-ico);
}
.lvf-s04 .lvf-s04-srow-k {
  font-size: var(--s04-row-fs);
  font-weight: 400;
  line-height: var(--s04-row-lh);
  letter-spacing: 0.01em;
  color: #ffffff;
}
.lvf-s04 .lvf-s04-srow-v {
  margin-left: auto;
  padding-left: 6px;
  font-size: var(--s04-row-fs);
  font-weight: 500;
  line-height: var(--s04-row-lh);
  letter-spacing: 0.01em;
  text-align: right;
  white-space: nowrap;
  background-image: var(--s04-grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s04 .lvf-s04-rule {
  display: block;
  height: 0;
  margin-top: var(--s04-rule-mt);
  border-top: 1.17px solid var(--s04-hair);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.11);
}

/* ---------- Haken-Liste ---------- */
.lvf-s04 .lvf-s04-checks {
  display: flex;
  flex-direction: column;
  gap: var(--s04-checks-gap);
  margin-top: var(--s04-checks-mt);
}
.lvf-s04 .lvf-s04-crow {
  display: flex;
  align-items: center;
  gap: var(--s04-row-gap);
  height: var(--s04-crow-h);
}
.lvf-s04 .lvf-s04-crow-ico {
  flex: none;
  width: var(--s04-crow-ico);
  height: var(--s04-crow-ico);
  filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.15));
}
.lvf-s04 .lvf-s04-crow-t {
  font-size: var(--s04-row-fs);
  font-weight: 500;
  line-height: var(--s04-row-lh);
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-crow--blue .lvf-s04-crow-t { background-image: var(--s04-grad-soft); }
.lvf-s04 .lvf-s04-crow--gold .lvf-s04-crow-t { background-image: var(--s04-grad-gold); }
.lvf-s04 .lvf-s04-crow--dim .lvf-s04-crow-t {
  background-image: none;
  color: #e6e6e6;
  -webkit-text-fill-color: #e6e6e6;
}
.lvf-s04 .lvf-s04-crow-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--s04-info);
  height: var(--s04-info);
  margin-left: auto;
  border-radius: 10px;
  background: linear-gradient(143deg, rgba(254, 237, 182, 0.1) 0%, rgba(255, 146, 0, 0.1) 100%), rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(38px);
  backdrop-filter: blur(38px);
  opacity: 0.7;
}
.lvf-s04 .lvf-s04-crow-info-ico { width: var(--s04-info-ico); height: var(--s04-info-ico); }

.lvf-s04 .lvf-s04-card-note {
  margin: var(--s04-note-mt) 0 var(--s04-note-mb);
  font-size: var(--s04-note-fs);
  font-weight: 400;
  line-height: var(--s04-note-lh);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: rgba(172, 201, 219, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background-image: var(--s04-grad-muted);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Add-ons-Banner ---------- */
.lvf-s04 .lvf-s04-addons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 106px;
  margin-top: 19px;
  padding: 15px 15px 15px 40px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32%, rgba(2, 58, 92, 0.2) 100%),
    radial-gradient(48% 150% at 69% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(90deg, #01131f 0%, #013048 18%, #02507c 32%, #0a86bf 44%, #52c3ea 52%, #b8e7fa 60%, #eef9ff 68%, #f4fcff 80%, #9fd8ef 92%, #4fb3d6 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
.lvf-s04 .lvf-s04-addons-hl {
  background-image: var(--s04-grad-blue2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-addons-title {
  max-width: 368px;
  font-size: clamp(22px, 1.95vw + 7px, 27px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  background-image: var(--s04-grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 1 678px;
  min-width: 0;
  min-height: 76px;
  padding-left: 44px;
  overflow: hidden;
  border: 0.64px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(rgba(64, 188, 254, 0.01), rgba(64, 188, 254, 0.01)) padding-box,
    linear-gradient(180deg, #005a8d 0%, rgba(0, 91, 143, 0) 100%) border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(116px);
  backdrop-filter: blur(116px);
}
.lvf-s04 .lvf-s04-addon-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 16px;
  color: #000000;
  font-size: clamp(13px, 5.08vw - 26px, 26px);
  font-weight: 600;
  line-height: 1.19;
}
.lvf-s04 .lvf-s04-addon-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 11px;
  background: #000000;
}
.lvf-s04 .lvf-s04-addon-info-ico { width: 11px; height: 11px; }
.lvf-s04 .lvf-s04-addon-val {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 17px;
  width: 292px;
  min-height: 76px;
  border-radius: 6px;
  background: #000000;
}
.lvf-s04 .lvf-s04-addon-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 26px;
  background: #e5f6fe;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.lvf-s04 .lvf-s04-addon-plus-ico { width: 15px; height: 15px; }
.lvf-s04 .lvf-s04-addon-num {
  color: #e5f6fe;
  font-size: clamp(27px, 10.94vw - 57px, 55px);
  font-weight: 600;
  line-height: 1.22;
}

/* ---------- Fusszeile der Sektion ---------- */
.lvf-s04 .lvf-s04-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 52px;
}
/* Review R3, Befund 5 (desktop) / 11 (mobil): die Fuellung wurde im IST nicht
   gemalt, weil der Button-Reset der Shell (.lvf-page.lvf-page button = 0-2-1,
   background:none/border:0/border-radius:0) die Regel mit 0-2-0 ueberstimmte.
   Selektor auf 0-3-0 angehoben, damit Flaeche, Rahmen und Radius greifen. */
.lvf-s04 .lvf-s04-actions .lvf-s04-conditions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 35px;
  padding-inline: 18px;
  border: 1px solid rgba(140, 213, 255, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(134deg, rgba(110, 202, 255, 0.1) 0%, rgba(0, 128, 202, 0.1) 100%),
    rgba(0, 0, 0, 0.1);
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(41px);
  backdrop-filter: blur(41px);
  transition: filter 0.18s ease;
}
.lvf-s04 .lvf-s04-conditions::before {
  content: "";
  position: absolute;
  inset: -6px -2px;
  z-index: 2;
}
.lvf-s04 .lvf-s04-conditions:hover { filter: brightness(1.35); }
.lvf-s04 .lvf-s04-conditions:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 4px; }
.lvf-s04 .lvf-s04-conditions-ico { flex: none; width: 15px; height: 15px; }
.lvf-s04 .lvf-s04-conditions-t {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background-image: var(--s04-grad-blue2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lvf-s04 .lvf-s04-rules {
  position: relative;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  background-image: var(--s04-grad-muted);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: filter 0.18s ease;
}
.lvf-s04 .lvf-s04-rules::before { content: ""; position: absolute; inset: -14px -8px; }
.lvf-s04 .lvf-s04-rules:hover { filter: brightness(1.3); }
.lvf-s04 .lvf-s04-rules:focus-visible { outline: 2px solid #8cd5ff; outline-offset: 6px; border-radius: 4px; }

/* ============================================================
   Tablet 768-1023: zwei Spalten, Kartenmasse wie Desktop
   ============================================================ */
/* Rundgang 13.08.2026, Punkt 1 (Geometrie): bei 1024px brach "One-Time" zu
   "One-\nTime" um. Ursache: .lvf-container deckelt bei 1280px (Innenbreite
   1240px), die 4er-Fluid-Spalte (Basisregel Z.296) greift aber schon ab
   1024px und quetscht die Karten auf 984-57=231,75px statt 296px, bevor der
   Container ueberhaupt seine volle Breite erreicht. Die Zweispalten-Regel
   endete bei 1023px, genau 256px zu frueh. Obergrenze auf 1279px angehoben
   (letzter Pixel vor dem Container-Deckel bei 1280px); ab 1280px liefert die
   Innenbreite ohnehin konstant 1240px, exakt die vier 296px-Karten aus
   s04-pricing-addons-desktop.txt. Screenshot vorher: s04-1024-teil0.png
   (Scratchpad) zeigte den Umbruch, nachher deckungsgleich mit 768px-Ansicht. */
@media (min-width: 768px) and (max-width: 1279px) {
  .lvf-s04 .lvf-s04-cards {
    grid-template-columns: repeat(2, minmax(0, 296px));
    justify-content: center;
    max-width: 611px;
    margin-inline: auto;
  }
  .lvf-s04 .lvf-s04-addons {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 22px;
  }
  .lvf-s04 .lvf-s04-addons-title { max-width: none; }
  .lvf-s04 .lvf-s04-addon { flex: 0 0 auto; padding-left: 28px; }
  .lvf-s04 .lvf-s04-addon-val { width: 220px; }
}

/* ============================================================
   Mobile < 768px: Werte aus s04-pricing-addons-mobile.txt (Frame 440)
   Karten liegen wie im Design in einem horizontalen Karussell.
   ============================================================ */
@media (max-width: 767px) {
  .lvf-s04 {
    padding: 40px 0 52px;
    --s04-card-r: 9px;
    --s04-card-pad-x: 3px;
    --s04-card-pad-t: 4px;
    --s04-in-r: 7px;
    --s04-in-pad-x: 18px;
    --s04-in-pad-t: 17px;
    --s04-in-pad-b: 20px;
    --s04-in-blur: 19px;
    --s04-glow-h: 158px;
    --s04-glow-t: -78px;
    --s04-shard: 71px;
    --s04-shard-h: 79px;
    --s04-shard-t: 14px;
    --s04-edge-v: 137px;
    --s04-mark-h: 15px;
    --s04-chip: 15px;
    --s04-chip-r: 4px;
    --s04-chip-ico: 9px;
    --s04-pop-h: 16px;
    --s04-pop-fs: 10px;
    --s04-pop-ico: 9px;
    --s04-pop-gap: 4px;
    --s04-pop-pr: 9px;
    --s04-pop-pl: 6px;
    --s04-kind-mt: 14.5px;
    --s04-kind-fs: 12px;
    --s04-kind-lh: 14px;
    --s04-size-mt: 11.5px;
    --s04-size-fs: 26px;
    --s04-size-lh: 32px;
    --s04-buy-mt: 10px;
    --s04-btn-h: 33px;
    --s04-btn-r: 4px;
    --s04-btn-pl: 13px;
    --s04-btn-pr: 5px;
    --s04-btn-fs: 12px;
    --s04-btn-lh: 15px;
    --s04-price-w: 80px;
    --s04-price-w-pop: 74px;
    --s04-price-h: 23px;
    --s04-price-r: 2px;
    --s04-price-fs: 13px;
    --s04-or-mt: 4px;
    --s04-or-h: 9px;
    --s04-or-gap: 6px;
    --s04-or-l: 43px;
    --s04-or-fs: 10px;
    --s04-btn2-mt: 3px;
    --s04-sep-mt: 19px;
    --s04-sep-h: 10px;
    --s04-sep-gap: 6px;
    --s04-sep-fs: 11px;
    --s04-specs-mt: 19px;
    --s04-specs-gap: 13.14px;
    --s04-srow-h: 11px;
    --s04-srow-ico: 11px;
    --s04-row-gap: 7px;
    --s04-row-fs: 11px;
    --s04-row-lh: 14px;
    --s04-rule-mt: 22px;
    --s04-checks-mt: 20px;
    --s04-checks-gap: 13px;
    --s04-crow-h: 10px;
    --s04-crow-ico: 11px;
    --s04-info: 12px;
    --s04-info-ico: 7px;
    --s04-note-mt: 23px;
    --s04-note-mb: 24px;
    --s04-note-fs: 11px;
    --s04-note-lh: 15px;
  }

  .lvf-s04 .lvf-s04-topglow { top: -145px; width: 275vw; height: 210px; filter: blur(34px); }
  .lvf-s04 .lvf-s04-shard { width: 470px; height: 470px; border-radius: 40px; }
  .lvf-s04 .lvf-s04-shard--r { top: 40px; left: 52%; }
  .lvf-s04 .lvf-s04-shard--l { top: 120px; right: 66%; }

  .lvf-s04 .lvf-s04-kicker-t { height: 22px; padding-inline: 15px; }
  .lvf-s04 .lvf-s04-title { margin-top: 17px; }
  .lvf-s04 .lvf-s04-sub { max-width: 340px; margin-top: 12px; }

  /* Review R3, Befund 15: Tab-Gruppe war 59px zu breit, Ursache Innenabstand.
     Padding, Luecke und aktiver Innenabstand deutlich reduziert. */
  .lvf-s04 .lvf-s04-toggle {
    margin-top: 52px;
    padding: 2px;
    gap: 4px;
    border-color: transparent;
    border-radius: 999px;
    background: #0b0f16;
    box-shadow: none;
  }
  .lvf-s04 .lvf-s04-tab {
    width: auto;
    height: 21px;
    padding-inline: 2px;
    font-size: 12px;
    line-height: 1;
    border-radius: 15px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .lvf-s04 .lvf-s04-tab::before { inset: -13px -4px; }
  .lvf-s04 .lvf-s04-tab.is-active {
    width: auto;
    height: 21px;
    padding-inline: 6px;
    border-radius: 15px;
  }
  .lvf-s04 .lvf-s04-tab.is-active::before { inset: -13px -4px; }

  /* Karussell: bricht bis an den Bildschirmrand aus, startet bei 30px */
  .lvf-s04 .lvf-s04-cards {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    margin: 16px -20px 0;
    padding: 0 30px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 213, 255, 0.35) transparent;
  }
  .lvf-s04 .lvf-s04-cards::-webkit-scrollbar { height: 4px; }
  .lvf-s04 .lvf-s04-cards::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(140, 213, 255, 0.35);
  }
  .lvf-s04 .lvf-s04-card {
    flex: 0 0 210px;
    width: 210px;
    scroll-snap-align: center;
  }

  .lvf-s04 .lvf-s04-addons {
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    min-height: 0;
    /* Review R3, Befund 16: SOLL Seitenrand 30px wie die Karten darueber
       (Container 20px + 10px), nicht 20px. */
    margin: 22px 10px 0;
    padding: 20px;
    border-radius: 8px;
    background:
      radial-gradient(70% 65% at 5% 102%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
      radial-gradient(85% 55% at 88% 100%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, #1180b2 0%, #45b8e5 32%, #7fd2f2 62%, #b9e6fa 100%);
    box-shadow: 0 0 0 1.9px rgba(255, 255, 255, 0.05);
  }
  .lvf-s04 .lvf-s04-addons-title { max-width: none; line-height: 0.91; }
  /* Im Mobile-Design steht nur "Optional Account (Add-Ons)" in Weiss */
  .lvf-s04 .lvf-s04-addons-hl { display: none; }
  .lvf-s04 .lvf-s04-addon {
    flex: 0 0 auto;
    min-height: 37px;
    padding-left: 21px;
    border-radius: 10px;
    /* Blur 116px wuerde hier das Schwarz ausserhalb des schmalen Banners
       einsammeln und die Pille dunkel machen, daher heller Glas-Ersatz */
    background:
      linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) border-box;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .lvf-s04 .lvf-s04-addon-name { gap: 3px; padding-right: 10px; }
  .lvf-s04 .lvf-s04-addon-info { width: 9px; height: 9px; border-radius: 5px; }
  .lvf-s04 .lvf-s04-addon-info-ico { width: 5px; height: 5px; }
  .lvf-s04 .lvf-s04-addon-val { gap: 8px; width: 143px; min-height: 37px; border-radius: 10px; }
  .lvf-s04 .lvf-s04-addon-plus { width: 14px; height: 14px; border-radius: 13px; }
  .lvf-s04 .lvf-s04-addon-plus-ico { width: 7px; height: 7px; }
  .lvf-s04 .lvf-s04-addon-num { line-height: 1.22; }

  .lvf-s04 .lvf-s04-actions {
    gap: 20px 28px;
    margin-top: 23px;
    justify-content: flex-start;
    padding-left: 10px;
  }
  .lvf-s04 .lvf-s04-actions .lvf-s04-conditions {
    width: 208px;
    height: 44px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: #10141c;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lvf-s04 .lvf-s04-conditions::before { inset: -6px -4px; }
  .lvf-s04 .lvf-s04-rules::before { inset: -15px -10px; }
}

/* Sehr schmale Geraete: Karussell darf nicht ueber den Rand hinaus starten */
@media (max-width: 359px) {
  .lvf-s04 .lvf-s04-cards { padding-inline: 20px; }
}

/* ==========================================================================
   Desktop-Nachmessung 11.08.2026 gegen referenz-neu/soll/home-aus-vollbild.png
   (Sektion Soll 1919..3517, live 1925..3523, Versatz 6). Zwei Befunde, beide
   ueber grosse Flaechen und beide am ruhigen Hintergrund gemessen, nicht am
   Text.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Fuellung der blauen Knoepfe: aktiver Reiter, Kauf-Knopf der
     hervorgehobenen Karte, "Most Popular"-Abzeichen. Bisher stand dort
     derselbe Verlauf wie fuer TEXT (--s04-grad-blue, #8cd5ff -> #12a9ff).
     Am Entwurf ist die Flaeche oben deutlich heller und unten deutlich
     cyaner. Kauf-Knopf, Zeilen relativ zur Knopfhoehe:

       t      0,06        0,13        0,30        0,64        0,89        0,96
       Soll (162,226,250)(145,220,251)(114,207,250)(68,186,246)(52,201,251)(46,207,250)
       Ist  (121,203,245)(113,201,247)(101,198,251)(63,184,253)(50,178,247)(51,177,245)

     Oben fehlten bis 41 Rotstufen, unten bis 30 Gruenstufen. Die Stopps sind
     aus zwei Renderlaeufen zurueckgerechnet (einmal mit, einmal ohne die
     beiden inset-Schatten), damit der Innenschein mitgerechnet ist und nicht
     doppelt zaehlt. Mittlere Abweichung ueber die Knopfhoehe:
       Kauf-Knopf 25 -> 2,7   aktiver Reiter 20 -> 4,3   Abzeichen 22 -> 8
     Der Innenschein #5bbce8 zog den Blaukanal auf 232 herunter, der Entwurf
     haelt ihn ueber die ganze Knopfhoehe bei 246 bis 255.
     Beim Reiter ist er zusaetzlich auf 15 px verkleinert: er ist mit 38 px
     niedriger als der Kauf-Knopf (47) und wurde von 24 px Unschaerfe an der
     Unterkante zu stark aufgehellt (t 0,96 mit 24px (62,206,250), mit 15px
     (55,204,250), Soll (30,202,252)). */
  .lvf-s04 {
    --s04-grad-pop: linear-gradient(180deg,
      rgb(193, 227, 247) 0%,
      rgb(142, 213, 248) 15%,
      rgb(108, 202, 249) 30%,
      rgb(85, 194, 248) 45%,
      rgb(58, 188, 248) 65%,
      rgb(38, 188, 249) 80%,
      rgb(0, 189, 247) 100%);
    --s04-pop-inner: rgb(140, 230, 255);
    --s04-tab-inner: 15px;
  }

  /* Bandverlauf des Add-ons-Bandes neu gemessen (Band x260..1500 /
     Soll y3266..3374). Der alte Stapel hatte zwei sichtbare Fehler:

     1. Der weisse Deckstreifen oben (rgba(255,255,255,0.22)) steht nicht im
        Entwurf. Die Bandoberkante wurde dadurch grau statt dunkelblau:
          y+4 / x265   Soll (2,56,87)     Ist (45,61,70)
     2. Das rechte Bandende war viel zu dunkel:
          y+25 / x1495 Soll (204,232,249) Ist (107,191,220)

     Ersetzt durch: waagerechter Grundverlauf aus zehn Stuetzstellen, darueber
     eine weisse Kuppel (im Entwurf beginnt das Weiss oben bei x~860, unten
     erst bei x~960) und ein nach unten zunehmender schwarzer Schleier.
     Ausgleichsrechnung ueber 39410 textfreie Bandpunkte, mittlere Abweichung
     13,8 -> 4,5 RGB. Die Pille darin bleibt unberuehrt, die kommt aus
     lvlup-fixes/r3b-home.css. */
  .lvf-s04 .lvf-s04-addons {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.253) 50%, rgba(0, 0, 0, 0.557) 100%),
      radial-gradient(41.9% 115% at 54.4% -1%,
        rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.001) 48%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(90deg,
        rgb(2, 50, 79) 0%,
        rgb(2, 53, 84) 10%,
        rgb(1, 67, 106) 20%,
        rgb(4, 98, 153) 30%,
        rgb(0, 170, 249) 40%,
        rgb(70, 255, 255) 50%,
        rgb(255, 255, 255) 60%,
        rgb(255, 255, 255) 80%,
        rgb(240, 252, 255) 90%,
        rgb(212, 245, 255) 100%);
  }

  /* 1. Der obere Rand der Sektion ist im Entwurf HART schwarz.
        Spalte x 880, direkt unter der Kante zu s03:
          Soll y1919..2020   (0,0,0) durchgehend
          Ist  y1925..2026   (5,15,27) -> (1,6,9)
        Zwei Ursachen: die Platte blendet ueber 70 px ein und laesst so lange
        den Seitengrund #05060f durchscheinen, und darueber liegt der
        Blauschein .lvf-s04-topglow. Im Entwurf ist von beidem nichts zu
        sehen. Die Platte beginnt deshalb sofort deckend.

     2. In der unteren Haelfte liegt im Entwurf ein sehr schwacher, ueber die
        volle Breite gleichmaessiger Blauschleier, live fehlt er ganz.
        Spalte x 40..90, Median:
          rel. zur Sektionsoberkante   810   1010   1110   1210   1410   1510
          Soll                      (0,0,0)(0,4,7)(1,6,10)(0,9,14)(0,9,14)(0,8,13)
          Ist                       (0,0,0)(0,0,0)(0,0,0) (0,0,0) (0,0,0) (0,0,0)
        Der Farbton ist derselbe wie beim Randschein von s05: G/B = 9/14 =
        0,64, also rgb(3,163,255).
        Der Schleier ist zu den Raendern hin staerker. Zeile Soll y3200:
          x    10    100    250    565    880   1195   1510   1750
          Soll (0,9,14)(0,9,14)(0,9,14)(1,6,10)(0,3,6)(0,4,8)(0,9,14)(0,9,14)
        Deshalb senkrechter Verlauf plus waagerechte Maske, wie beim
        Randschein von s05. Die Platte selbst blendet auch UNTEN nicht mehr
        aus: der Entwurf ist dort in der Mitte schwarz (y3505 / x880 =
        (0,0,2)), live liess die Ausblendung den Seitengrund #05060f
        durchscheinen (4,10,21). */
  .lvf-s04 .lvf-s04-slab {
    background: #000000;
  }

  /* Der Abschluss von s03 liegt direkt an der Naht als breites Cyanband.
     Statt dort auf Schwarz zu springen, nimmt s04 dieselbe Randform auf und
     laesst sie vor dem ersten Inhalt ueber 180 px auslaufen. */
  .lvf-s04 .lvf-s04-slab::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(180deg,
      #19c3fb 0,
      #16b5f2 20px,
      #1093d2 44px,
      #0b6a9d 72px,
      #074365 102px,
      #04273b 132px,
      rgba(3, 26, 37, 0.45) 158px,
      rgba(3, 26, 37, 0) 180px);
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.513) 0%,
      rgba(0, 0, 0, 0.798) 12.5%,
      rgba(0, 0, 0, 0.893) 25%,
      rgba(0, 0, 0, 0.955) 37.5%,
      rgba(0, 0, 0, 0.976) 50%,
      rgba(0, 0, 0, 0.955) 62.5%,
      rgba(0, 0, 0, 0.893) 75%,
      rgba(0, 0, 0, 0.798) 87.5%,
      rgba(0, 0, 0, 0.513) 100%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.513) 0%,
      rgba(0, 0, 0, 0.798) 12.5%,
      rgba(0, 0, 0, 0.893) 25%,
      rgba(0, 0, 0, 0.955) 37.5%,
      rgba(0, 0, 0, 0.976) 50%,
      rgba(0, 0, 0, 0.955) 62.5%,
      rgba(0, 0, 0, 0.893) 75%,
      rgba(0, 0, 0, 0.798) 87.5%,
      rgba(0, 0, 0, 0.513) 100%);
  }

  .lvf-s04 .lvf-s04-slab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg,
      rgba(3, 163, 255, 0) 810px,
      rgba(3, 163, 255, 0.016) 910px,
      rgba(3, 163, 255, 0.028) 1010px,
      rgba(3, 163, 255, 0.04) 1110px,
      rgba(3, 163, 255, 0.055) 1210px,
      rgba(3, 163, 255, 0.055) 1410px,
      rgba(3, 163, 255, 0.05) 1510px,
      rgba(3, 163, 255, 0.045) 100%);
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 250px,
      rgba(0, 0, 0, 0.65) 32%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.65) 68%,
      rgba(0, 0, 0, 1) calc(100% - 250px), rgba(0, 0, 0, 1) 100%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) 250px,
      rgba(0, 0, 0, 0.65) 32%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.65) 68%,
      rgba(0, 0, 0, 1) calc(100% - 250px), rgba(0, 0, 0, 1) 100%);
  }

  /* Der Blauschein oben ist im Entwurf nicht vorhanden (siehe Befund 1).
     Nicht entfernt, sondern unsichtbar gesetzt, damit die Mobilfassung
     weiter unten unveraendert bleibt. */
  .lvf-s04 .lvf-s04-topglow { opacity: 0; }
}

/* ================= Befund 12.08.2026, NICHT geaendert ======================
   Die Naht zu s05 bei y 3523 springt um 2,5 Stufen (Entwurf 0,1). Die
   Oberkante von s05 trifft den Entwurf auf 1 bis 2 Stufen genau; zu hell ist
   die Unterkante DIESER Sektion. Blaukanal in der Zeile ueber der Kante:

     x              0    120    200    380    600    880
     s04 unten     11     11     11      9      7      4
     Entwurf       13     10      8      4      1      2

   Der Blauschleier des Blocks weiter oben ("2. In der unteren Haelfte ...")
   stimmt bei 810 bis 1510 px unter der Sektionsoberkante genau, verjuengt
   sich im Entwurf aber ueber die letzten 100 px zur Mitte hin, waehrend seine
   waagerechte Maske ueber die ganze Hoehe dieselbe bleibt. Gegengeprueft bei
   1300 px: dort liegen Ist und Soll bei x 300 auf 20 gegen 19, bei 1595 px
   auf 10 gegen 6.

   Eine Korrektur braucht dieselbe Bauart wie der Keil in s07, also eine
   zweidimensionale Form statt Profil mal Maske. Bei 4 bis 6 Blaustufen
   Unterschied auf schwarzem Grund steht das in keinem Verhaeltnis zum Risiko,
   den ueber 790 px nachgemessenen Schleier zu verstellen.
   ========================================================================= */


/* ===========================================================================
   Zurueckgenommen 12.08.2026: Kaufknoepfe auf Mobil NICHT auf 44 px ziehen

   Hier stand ein @media (max-width:767px) mit min-height:44px, display:flex
   und justify-content:center auf .lvf-s04-btn, begruendet mit "auf Mobil gibt
   es kein Mockup". Die Begruendung war falsch:

     figma/homepage-mobile.json (Frame 440 breit, seit 02.08.) enthaelt acht
     FRAMEs namens "btn", die Kaufknoepfe der vier Karten:
       One-Time  box(51,3310,169,33) box(275,3310,...) box(498,3310,...) box(723,3310,...)
       Monthly   box(51,3359,169,33) box(275,3358,...) box(498,3358,...) box(723,3358,...)
     Rohhoehe 33,41 px, also genau die --s04-btn-h: 33px von vorher.

   33 px liegen ausserdem ueber dem WCAG-Mindestmass von 24 px (2.5.8 Target
   Size Minimum, AA), ein Verstoss lag also nicht vor.

   Zweiter, gar nicht gemeldeter Schaden derselben Regel: justify-content
   wurde von space-between auf center gezogen. Der Entwurf haelt Label und
   Preiskasten an den Aussenkanten, gemessen an btn x498,5 w169,3:
     Label "One-Time" beginnt bei x511,4  ->  12,9 px Innenabstand links
     Preiskasten endet   bei x662,7       ->   5,1 px Innenabstand rechts
   Das sind die --s04-btn-pl: 13px / --s04-btn-pr: 5px des Mobilzweigs.

   Die Zentrierung braucht es hier nicht: die Grundregel .lvf-s04-btn traegt
   bereits display:flex, align-items:center und justify-content:space-between.
   =========================================================================== */

/* ===== s05 ===== */
/* ==========================================================================
   s05 Calculator - "Calculate Your Earning Potential"
   Desktop-Design 1760 (Content-Spalte 1240, x=260..1500), Mobile-Design 440.
   Alle Masse stehen als Design-Pixel im Code und werden mit --s05-u skaliert:
     Desktop  --s05-u = 1px, sobald die Content-Spalte 1240px breit ist
     Mobile   --s05-u = 1px, sobald die Karte 381px breit ist (Frame 440)
   Dadurch ist die Sektion bei beiden Designbreiten exakt und dazwischen
   proportional interpoliert.
   ========================================================================== */

.lvf-s05 {
  --s05-u: calc(min(100vw - 40px, 1240px) / 1240);

  --s05-grad-blue: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
  --s05-grad-head: linear-gradient(141deg,
                     rgba(255, 255, 255, 0.7) 0%,
                     #ffffff 50%,
                     rgba(255, 255, 255, 0.7) 100%);
  --s05-num: #e5f6fe;
  --s05-hair: linear-gradient(180deg, #005a8d 0%, rgba(0, 91, 143, 0) 100%);

  position: relative;
  isolation: isolate;
  padding-top: calc(40 * var(--s05-u));
  padding-bottom: calc(74 * var(--s05-u));
  font-family: var(--lvf-font-display);
}

/* Grosse, 100-500px weichgezeichnete Star-Vektoren des Bandes,
   als Radial-Verlaeufe angenaehert. */
.lvf-s05 .lvf-s05-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Soll gemessen (1760px): ganz aussen weisse Bluete (x=8: 206,236,252),
     daneben sattes Blau (x=80: 12,180,244), zur Karte hin dunkler (x=240: 2,95,148).
     Oben schwarz bis ~y30%, Bluete um 40% Hoehe, lange blaue Fahne bis Sektionsende. */
  background-image:
    /* Soll-Profil 06.08.2026 (x8/x300-Spalten): oben schwarz bis ~y120, dann
       WEISSE Bluete INSET (x300 weiss ab y3650, Rand x8 erst ab y3850), danach
       blaue Rand-Tails bis zum Sektionsende (x8/y4450: 1,136,205). */
    linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 9%, rgba(0, 0, 0, 0.35) 16%, rgba(0, 0, 0, 0) 24%),
    /* Nachmessung: links grosse Bluete (Peak x~360/y3740), rechts sitzt sie
       HOEHER und kompakter (x1460 weiss bei y3650, y3750 schon 95,202,237) */
    radial-gradient(390px 240px at 20.5% 24%, rgba(242, 250, 255, 1) 0%, rgba(220, 242, 254, 0.9) 45%, rgba(150, 215, 248, 0) 80%),
    radial-gradient(300px 190px at 81% 14%, rgba(242, 250, 255, 1) 0%, rgba(220, 242, 254, 0.9) 45%, rgba(150, 215, 248, 0) 80%),
    radial-gradient(200px 250px at 0% 38%, rgba(235, 246, 253, 1) 0%, rgba(235, 246, 253, 0) 78%),
    radial-gradient(200px 250px at 100% 38%, rgba(235, 246, 253, 1) 0%, rgba(235, 246, 253, 0) 78%),
    radial-gradient(160px 620px at 0% 64%, rgba(30, 180, 245, 0.95) 0%, rgba(2, 140, 210, 0.7) 60%, rgba(2, 130, 200, 0) 100%),
    radial-gradient(160px 620px at 100% 64%, rgba(30, 180, 245, 0.95) 0%, rgba(2, 140, 210, 0.7) 60%, rgba(2, 130, 200, 0) 100%),
    radial-gradient(18% 42% at 0% 100%, rgba(2, 110, 173, 0.6) 0%, rgba(2, 110, 173, 0) 74%),
    radial-gradient(18% 42% at 100% 100%, rgba(2, 110, 173, 0.6) 0%, rgba(2, 110, 173, 0) 74%),
    radial-gradient(110% 85% at 50% 52%, rgba(0, 150, 225, 0.30) 0%, rgba(0, 150, 225, 0.12) 55%, rgba(0, 150, 225, 0) 80%),
    /* Soll y=4480: hell ab x~700 bis x~1430 (Peak 244,244,244 rechts der Mitte),
       moderates Blau x400-600, dunkle Kerben bei x~300 und x~1460 */
    radial-gradient(24% 100px at 59% 100%, rgba(240, 244, 248, 0.95) 0%, rgba(240, 244, 248, 0) 100%),
    radial-gradient(40% 130px at 55% 100%, rgba(30, 150, 220, 0.55) 0%, rgba(30, 150, 220, 0) 100%);
}

/* Desktop-Korrektur 11.08.2026, Quelle referenz-neu/grenzen-home.json
   (Sektion lvf-s05, hoehendifferenz -162) plus eigene Nachmessung im
   Soll-Vollbild und in den Ist-Kacheln:

     Kartenoberkante   Ist 3564   Soll 3640
     Kartenunterkante  Ist 4409   Soll 4486   (Kantenschritt bei y=4486
                                               im Soll: 184 -> 31)
     Sektionsgrenzen   Ist 3523..4483   Soll 3517..4639

   Die Karte selbst ist in beiden Bildern exakt 846 px hoch, der Inhalt der
   Sektion stimmt also. Falsch ist nur die Luft darum herum:
     ueber der Karte   Ist  40 px   Soll 123 px  (3640 - 3517)   +83
     unter der Karte   Ist  74 px   Soll 153 px  (4639 - 4486)   +79
   40 + 846 + 74 = 960, 123 + 846 + 153 = 1122. Das sind genau die
   fehlenden 162 px der Sektion.

   Nur der Desktop-Zweig wird angefasst. Fuer Tablet und Mobil gibt es keine
   Referenz, dort bleiben 40 / 74 bzw. 49 / 79 unveraendert. */
@media (min-width: 1024px) {
  .lvf-s05 {
    padding-top: calc(123 * var(--s05-u));
    padding-bottom: calc(153 * var(--s05-u));

    /* Sektionsgrund, 11.08.2026. s05 hatte keinen eigenen Grund, dadurch stand
       ueberall dort, wo der Schein schwach ist, der Seitengrund #05060f =
       (5,6,15). Der Entwurf ist dort schwarz mit einem sehr schwachen blauen
       Randsaum:
         y 4500 / x 880 (unter der Karte)  Soll (0,0,0)   Ist (5,6,15)
         y 3560 / x   0 (ueber dem Schnitt) Soll (0,8,11)  Ist (5,6,15)
         y 3560 / x 400                     Soll (0,1,3)   Ist (5,6,15)
       Der Saum hat denselben Farbton wie der Randschein (G/B = 0,64) und
       laeuft ueber die Grenze zu s04 durch, dort erzeugt ihn die Platte. */
    background-color: #000000;
    background-image: linear-gradient(90deg,
      rgba(3, 163, 255, 0.051) 0px,
      rgba(3, 163, 255, 0.035) 120px,
      rgba(3, 163, 255, 0.012) 400px,
      rgba(3, 163, 255, 0) 760px,
      rgba(3, 163, 255, 0) calc(100% - 760px),
      rgba(3, 163, 255, 0.012) calc(100% - 400px),
      rgba(3, 163, 255, 0.035) calc(100% - 120px),
      rgba(3, 163, 255, 0.051) 100%);
  }

  /* Randschein neu verankert, 11.08.2026.
     Vorher haing die Lage der Glow-Ebene in Prozent an der Sektionshoehe. Als
     die Sektion bei der Hoehenkorrektur von 960 auf 1122 px wuchs, wanderte
     der Schein mit und sass rund 159 px zu tief; zusaetzlich wurde er an der
     Unterkante hart abgeschnitten (Soll-Sprung bei y 4645: -0,05, gemessen
     -71,9). Jetzt stehen alle Marken in px unter der Sektionsoberkante.

     Das Mockup zeigt keinen Schein je Sektion, sondern EIN durchlaufendes
     Randfeld ueber die ganze Seite. Nachgemessen im Soll-Vollbild bei x 0..6:
     der Farbton ist ueberall rgb(3,163,255) (G/B = 0,64 in allen ruhigen
     Zeilen), nur die Deckkraft aendert sich mit der Hoehe, und die
     waagerechte Abnahme ist ueberall dieselbe (bei x 100 noch 45 %, bei
     x 200 noch 18 %, bei x 300 noch 8 %). Deshalb hier: senkrechtes Profil
     als Farbverlauf, waagerechte Abnahme als Maske. Der weisse Anteil ist
     eine eigene Ebene, weil seine Abnahme deutlich schmaler ist.

     Die letzte Marke von s05 (0,693 bei 1121 px) ist zugleich die erste Marke
     von s06. Dadurch ist die Naht rechnerisch stufenlos.

     Oberkante: im Entwurf beginnt der Schein HART bei y 3802, das sind 285 px
     unter der Sektionsoberkante (3517). Soll bei y 3798 (0,5,8), bei y 3802
     (172,182,188). Live lief davor eine weiche Rampe ab y 3640 (Soll bei
     y 3775: 2,9 gegen Ist 128,3).

     Der weisse Bodenschein der alten Fassung (radial-gradient 24% 100px at
     59% 100%) ist ersatzlos weg: unter der Rechnerkarte ist der Entwurf in
     der Mitte schwarz (Soll y 4600, x 700..1100: 1,5 gegen Ist 131,8). */
  /* NEUFASSUNG 11.08.2026: der Randschein ist ein KEIL, kein Kreuzprodukt.
     ------------------------------------------------------------------------
     Die bisherige Fassung setzte "senkrechter Verlauf MAL waagerechte Maske"
     an, also eine ueber die ganze Sektionshoehe gleich breite Fahne. Am
     Soll-Vollbild nachgemessen stimmt das nicht: die Fahne ist oben breit und
     laeuft nach unten spitz zu. Gemessen wurde die Stelle, an der der
     Blauanteil auf 0,6 faellt:

       y      4000  4100  4200  4300  4400  4600
       Soll x  212   174   140   115    82    24

     Alle Hoehenlinien sind Geraden mit derselben Neigung: dx/dy = -0,306 fuer
     das Blau, -0,340 fuer das Weiss. Genau das leistet EIN schraeger
     linear-gradient je Flanke. Kleinste Quadrate ueber die 623035 sichtbaren
     Pixel der Sektion (alles ausser der Rechnerkarte): mittlere Abweichung
     31,8 -> 3,3 RGB.

     Die beiden gemeldeten Einzelwerte im Vergleich:
       y 4000 / x 1560 (rechte Flanke)  Ist (5,38,64)      Soll (2,117,184)
       y 3980 / x 0..60 (linke Flanke)  Ist (176,214,237)  Soll (101,216,251)
     Beide hatten dieselben zwei Ursachen:
       1. Das Weiss lief viel zu weit nach innen. Im Entwurf ist es bei
          y 4000 schon ab x 80 verschwunden (Soll dort (2,165,238), Rotkanal
          also 2), live standen dort noch (76,135,172).
       2. Das Blau starb viel zu frueh ab. Soll y 4000 / x 240 (3,84,131),
          Ist (4,26,47). Die alte waagerechte Maske stand dort auf 0,139,
          noetig sind rund 0,45.
     Der Farbton selbst war richtig: G/B liegt im Entwurf ueber die ganze
     Flanke bei 0,638 bis 0,645, rgb(3,163,255) hat 0,639.

     Oberkante unveraendert hart bei 285 px unter der Sektionsoberkante
     (Soll y 3801 = (33,39,43), y 3802 = (200,208,214)). Sie liegt jetzt in
     der Maske, weil die Keile selbst keine waagerechte Kante haben.

     Naht nach unten: die letzte Zeile der Sektion liefert bei x 0 jetzt
     (2,108,169). s06 beginnt darunter mit (0,114,171) aus r3-home.css,
     der Uebergang bleibt also stufenlos. */
  .lvf-s05 .lvf-s05-glow {
    --s05-schnitt: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 285px,
      rgba(0, 0, 0, 1) 285px);

    background-image: none;
  }

  .lvf-s05 .lvf-s05-glow::before,
  .lvf-s05 .lvf-s05-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Die beiden Keile sind an der Sektions-UNTERKANTE verankert, 12.08.2026.
       IST vorher: Sprung an der Naht s05/s06 bei 1024 px 15,0 Stufen, bei
       1280/1440/1760 nur 1,7 bis 1,9. SOLL 0,6.
       BEGRUENDUNG: die Stopps des Keils sind Abstaende auf der Verlaufsachse
       ab der oberen Ecke (p = 0,956x + 0,292y). Die Sektion ist bei 1024 px
       aber nur 890 statt 1122 px hoch, weil --u dort auf 0,8 faellt. Die
       letzte Zeile landete damit bei p 260 statt 328 und war 48 Blaustufen
       zu hell, waehrend s06 seine Oberkante unveraendert bei 0,693 setzt.
       Der Verlauf wird deshalb in eine feste 1122 px hohe Malflaeche gelegt,
       die an der Unterkante klebt. Bei 1760 ist das dieselbe Flaeche wie das
       Element, dort aendert sich nichts (nachgemessen: 1,7 vor und nach der
       Aenderung). Der Kasten selbst bleibt inset 0, damit --s05-schnitt
       seinen harten Rand weiter 285 px unter der Sektionsoberkante zieht;
       ein bottom-verankertes Element haette ihn bei 1024 um 232 px verschoben.
       NACHHER: 1024 px 2,1 statt 15,0, die Naht s04/s05 bleibt bei 2,0. */
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1122px;
    -webkit-mask-image: var(--s05-schnitt);
            mask-image: var(--s05-schnitt);
  }

  /* Blauer Keil, links 107deg (entspricht dx/dy = -0,306), rechts gespiegelt.
     Die Stopps sind Abstaende auf der Verlaufsachse, gemessen von der oberen
     Ecke der Sektion. Belege am linken Rand (Soll gegen alten Ist-Stand):
       y 3900 / x 160   Soll (1,142,219)   alt (8,45,72)
       y 4200 / x  80   Soll (1,130,201)   alt (10,91,140)
       y 4400 / x 160   Soll (3,59,93)     alt (5,40,67) */
  .lvf-s05 .lvf-s05-glow::before {
    background-image:
      linear-gradient(107deg,
        rgba(3, 163, 255, 0.315) 88px,
        rgba(3, 163, 255, 0.53) 104px,
        rgba(3, 163, 255, 0.71) 120px,
        rgba(3, 163, 255, 0.864) 136px,
        rgba(3, 163, 255, 0.975) 152px,
        rgba(3, 163, 255, 1) 168px,
        rgba(3, 163, 255, 0.974) 200px,
        rgba(3, 163, 255, 0.912) 232px,
        rgba(3, 163, 255, 0.831) 264px,
        rgba(3, 163, 255, 0.737) 296px,
        rgba(3, 163, 255, 0.637) 328px,
        rgba(3, 163, 255, 0.524) 360px,
        rgba(3, 163, 255, 0.417) 392px,
        rgba(3, 163, 255, 0.326) 424px,
        rgba(3, 163, 255, 0.251) 456px,
        rgba(3, 163, 255, 0.195) 488px,
        rgba(3, 163, 255, 0.147) 520px,
        rgba(3, 163, 255, 0.11) 560px,
        rgba(3, 163, 255, 0.084) 600px,
        rgba(3, 163, 255, 0.048) 660px,
        rgba(3, 163, 255, 0.025) 720px,
        rgba(3, 163, 255, 0.009) 780px,
        rgba(3, 163, 255, 0) 880px),
      linear-gradient(253deg,
        rgba(3, 163, 255, 0.315) 88px,
        rgba(3, 163, 255, 0.53) 104px,
        rgba(3, 163, 255, 0.71) 120px,
        rgba(3, 163, 255, 0.864) 136px,
        rgba(3, 163, 255, 0.975) 152px,
        rgba(3, 163, 255, 1) 168px,
        rgba(3, 163, 255, 0.974) 200px,
        rgba(3, 163, 255, 0.912) 232px,
        rgba(3, 163, 255, 0.831) 264px,
        rgba(3, 163, 255, 0.737) 296px,
        rgba(3, 163, 255, 0.637) 328px,
        rgba(3, 163, 255, 0.524) 360px,
        rgba(3, 163, 255, 0.417) 392px,
        rgba(3, 163, 255, 0.326) 424px,
        rgba(3, 163, 255, 0.251) 456px,
        rgba(3, 163, 255, 0.195) 488px,
        rgba(3, 163, 255, 0.147) 520px,
        rgba(3, 163, 255, 0.11) 560px,
        rgba(3, 163, 255, 0.084) 600px,
        rgba(3, 163, 255, 0.048) 660px,
        rgba(3, 163, 255, 0.025) 720px,
        rgba(3, 163, 255, 0.009) 780px,
        rgba(3, 163, 255, 0) 880px);
  }

  /* Weisser Keil, 108.8deg (dx/dy = -0,340). Er ist deutlich schmaler als das
     Blau und war bisher die Hauptursache des blassen Randes:
       Weissanteil bei y 4000   x 0   x 40   x 80
                        Soll   0,69   0,16   0,00
                        alt    0,67   0,58   0,30
     Ab 264 px auf der Achse ist er vollstaendig weg, dahinter traegt nur
     noch das Blau. */
  .lvf-s05 .lvf-s05-glow::after {
    background-image:
      linear-gradient(108.8deg,
        rgba(255, 255, 255, 0.79) 96px,
        rgba(255, 255, 255, 0.842) 112px,
        rgba(255, 255, 255, 0.835) 128px,
        rgba(255, 255, 255, 0.786) 144px,
        rgba(255, 255, 255, 0.71) 152px,
        rgba(255, 255, 255, 0.598) 160px,
        rgba(255, 255, 255, 0.481) 168px,
        rgba(255, 255, 255, 0.371) 176px,
        rgba(255, 255, 255, 0.273) 184px,
        rgba(255, 255, 255, 0.19) 192px,
        rgba(255, 255, 255, 0.126) 200px,
        rgba(255, 255, 255, 0.08) 208px,
        rgba(255, 255, 255, 0.047) 216px,
        rgba(255, 255, 255, 0.025) 224px,
        rgba(255, 255, 255, 0.013) 232px,
        rgba(255, 255, 255, 0.003) 248px,
        rgba(255, 255, 255, 0) 264px),
      linear-gradient(251.2deg,
        rgba(255, 255, 255, 0.79) 96px,
        rgba(255, 255, 255, 0.842) 112px,
        rgba(255, 255, 255, 0.835) 128px,
        rgba(255, 255, 255, 0.786) 144px,
        rgba(255, 255, 255, 0.71) 152px,
        rgba(255, 255, 255, 0.598) 160px,
        rgba(255, 255, 255, 0.481) 168px,
        rgba(255, 255, 255, 0.371) 176px,
        rgba(255, 255, 255, 0.273) 184px,
        rgba(255, 255, 255, 0.19) 192px,
        rgba(255, 255, 255, 0.126) 200px,
        rgba(255, 255, 255, 0.08) 208px,
        rgba(255, 255, 255, 0.047) 216px,
        rgba(255, 255, 255, 0.025) 224px,
        rgba(255, 255, 255, 0.013) 232px,
        rgba(255, 255, 255, 0.003) 248px,
        rgba(255, 255, 255, 0) 264px);
  }
}

.lvf-s05 .lvf-s05-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lvf-s05 .lvf-s05-inner { position: relative; z-index: 1; }

.lvf-s05 .lvf-s05-stack { position: relative; width: 100%; }

/* ------------------------------------------------------------- Kopfkarte */

.lvf-s05 .lvf-s05-card {
  position: relative;
  width: 100%;
  min-height: calc(646 * var(--s05-u));
  padding-top: calc(85 * var(--s05-u));
  overflow: hidden;
  border-radius:
    calc(38 * var(--s05-u)) calc(38 * var(--s05-u))
    calc(126 * var(--s05-u)) calc(126 * var(--s05-u));
  background-color: #000000;
  background-image:
    /* Nachmessung 06.08.2026: Soll-Kartenkante deutlich heller (x294/y3740:
       73,183,227) und auch rechts vorhanden (x1323: 20,113,156) */
    radial-gradient(26% 62% at 0% 55%, rgba(90, 200, 242, 0.95) 0%, rgba(45, 160, 220, 0.5) 55%, rgba(0, 120, 180, 0) 88%),
    radial-gradient(24% 58% at 100% 55%, rgba(55, 170, 228, 0.7) 0%, rgba(25, 130, 195, 0.35) 55%, rgba(0, 120, 180, 0) 85%),
    radial-gradient(38% 62% at 1% 2%, rgba(255, 255, 255, 0.95) 0%, rgba(158, 216, 250, 0.62) 34%, rgba(58, 168, 235, 0.34) 56%, rgba(0, 162, 255, 0) 78%),
    radial-gradient(28% 40% at 100% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(158, 216, 250, 0.52) 40%, rgba(30, 160, 235, 0.24) 58%, rgba(0, 162, 255, 0) 76%),
    radial-gradient(20% 85% at 0% 60%, rgba(0, 162, 255, 0.6) 0%, rgba(0, 162, 255, 0) 78%),
    radial-gradient(16% 65% at 100% 35%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 78%),
    radial-gradient(68% 56% at 21% 86%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(68% 56% at 79% 86%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(112% 88% at 50% 110%, rgba(0, 162, 255, 0.26) 0%, rgba(0, 162, 255, 0) 70%),
    radial-gradient(140% 118% at 50% 138%, rgba(4, 48, 74, 0.55) 0%, rgba(4, 48, 74, 0) 72%);
  box-shadow:
    0 0 0 calc(10 * var(--s05-u)) rgba(255, 255, 255, 0.05),
    7px 9px 24px rgba(0, 0, 0, 0.2),
    27px 35px 44px rgba(0, 0, 0, 0.17),
    60px 79px 60px rgba(0, 0, 0, 0.1),
    107px 140px 71px rgba(0, 0, 0, 0.03);
}

/* 0.5px Kontur mit Verlauf #00406e -> transparent */
.lvf-s05 .lvf-s05-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0.5px solid rgba(0, 64, 110, 0.85);
  border-radius: inherit;
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s05 .lvf-s05-card::before {
    border: 0;
    padding: 0.5px;
    background: linear-gradient(180deg, #00406e 0%, rgba(0, 64, 110, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

.lvf-s05 .lvf-s05-head {
  position: relative;
  z-index: 1;
  width: calc(699 * var(--s05-u));
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.lvf-s05 .lvf-s05-kicker { display: flex; justify-content: center; }

.lvf-s05 .lvf-s05-kicker-t {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: calc(7 * var(--s05-u)) calc(9 * var(--s05-u));
  border-radius: 78px;
  background: #00121c;
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
  color: var(--lvf-white);
  font-size: calc(14 * var(--s05-u));
  font-weight: 400;
  line-height: calc(17 * var(--s05-u));
  letter-spacing: calc(0.84 * var(--s05-u));
  white-space: nowrap;
}

.lvf-s05 .lvf-s05-kicker-t::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border: 0.5px solid rgba(53, 174, 244, 0.55);
  border-radius: inherit;
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s05 .lvf-s05-kicker-t::before {
    border: 0;
    padding: 0.5px;
    background: linear-gradient(134deg,
      rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

.lvf-s05 .lvf-s05-title {
  margin-top: calc(26 * var(--s05-u));
  font-size: calc(75 * var(--s05-u));
  font-weight: 500;
  line-height: calc(70 * var(--s05-u));
  letter-spacing: calc(-1.5 * var(--s05-u));
  text-wrap: balance;
  background-image: var(--s05-grad-head);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Zweite Titelzeile in Blau (Render weicht hier vom Figma-Textstil ab) */
.lvf-s05 .lvf-s05-title-b {
  background-image: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s05 .lvf-s05-sub {
  width: calc(569 * var(--s05-u));
  max-width: 100%;
  margin-top: calc(30 * var(--s05-u));
  margin-inline: auto;
  font-size: calc(18 * var(--s05-u));
  font-weight: 425;
  line-height: calc(24 * var(--s05-u));
  letter-spacing: calc(0.54 * var(--s05-u));
  color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------------------------- Blaues Panel */

.lvf-s05 .lvf-s05-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 659fr 381fr;
  column-gap: calc(30 * var(--s05-u));
  width: 91.129%;
  margin-top: calc(-250 * var(--s05-u));
  margin-inline: auto;
  padding: calc(30 * var(--s05-u)) calc(30 * var(--s05-u)) calc(29 * var(--s05-u));
  overflow: hidden;
  border-radius: calc(72 * var(--s05-u));
  background-color: rgba(0, 0, 0, 0.03);
  background-image:
    radial-gradient(40% 110% at 91% 50%, #ffffff 26%, rgba(255, 255, 255, 0.75) 52%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(24% 60% at 2% 0%, rgba(167, 223, 255, 0.9) 0%, rgba(167, 223, 255, 0) 68%),
    radial-gradient(30% 70% at 2% 100%, rgba(167, 223, 255, 0.85) 0%, rgba(167, 223, 255, 0) 68%),
    radial-gradient(90% 140% at 38% 54%, rgba(4, 48, 74, 0.72) 0%, rgba(4, 48, 74, 0.22) 56%, rgba(4, 48, 74, 0) 84%),
    linear-gradient(90deg, rgba(0, 162, 255, 0.5) 0%, #00a2ff 50%, rgba(0, 162, 255, 0.5) 100%);
  box-shadow: 0 0 0 calc(2.73 * var(--s05-u)) rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(calc(107 * var(--s05-u)));
          backdrop-filter: blur(calc(107 * var(--s05-u)));
}

/* Panelgrund neu bestimmt 11.08.2026 (Desktop). Der alte Stapel hatte als
   unterste Ebene linear-gradient(90deg, ... #00a2ff 50% ...) und war damit in
   der Mitte kraeftig blau. Der Entwurf ist dort fast schwarz. Sichtbar ist vom
   Panelgrund nur der 30 px breite Rahmen um die beiden Glaskarten und der
   Spalt dazwischen; genau dort wurde gemessen (Soll x315..1445 / y4036..4486):

     Kopfstreifen y+14   x320        x560        x740        x980       x1400
                  Soll (55,182,227)(1,39,61)  (1,12,18)  (1,16,23) (242,249,255)
                  Ist  (76,167,217)(2,99,154)(1,106,165)(1,114,180)(210,225,234)
     Fussstreifen y+434 x320        x560        x800       x1040       x1400
                  Soll (0,17,25)   (1,94,146)(88,193,222)(248,252,255)(240,240,240)
                  Ist  (5,20,37)   (6,86,133)(2,97,153)  (2,107,166) (198,213,221)

   Also: die Mitte des Kopfstreifens war blau statt schwarz (bis 165 Blaustufen
   zu viel), das Weiss der rechten Haelfte begann zu spaet und war zu grau.
   Ersetzt durch neun waagerechte Stuetzstellen plus vier Radialebenen, per
   Ausgleichsrechnung ueber 3173 textfreie Punkte des sichtbaren Rahmens
   bestimmt: mittlere Abweichung 62,7 -> 7,6 RGB.
   Der Grundverlauf ist jetzt deckend; backdrop-filter bleibt fuer die
   Mobilfassung stehen, wirkt hier aber nicht mehr. */
@media (min-width: 1024px) {
  .lvf-s05 .lvf-s05-panel {
    background-image:
      radial-gradient(51.9% 64.9% at 10.4% 72.9%,
        rgba(0, 0, 10, 1) 0%, rgba(0, 0, 10, 0.145) 62%, rgba(0, 0, 10, 0) 100%),
      radial-gradient(46.3% 21.3% at 13.3% 85.9%,
        rgba(3, 168, 245, 1) 0%, rgba(3, 168, 245, 0.994) 61%, rgba(3, 168, 245, 0) 100%),
      radial-gradient(19.7% 89.9% at -6.3% 13.9%,
        rgba(6, 143, 212, 1) 0%, rgba(6, 143, 212, 1) 54%, rgba(6, 143, 212, 0) 100%),
      radial-gradient(500% 73.6% at 68.9% 95.2%,
        rgba(239, 251, 255, 1) 0%, rgba(239, 251, 255, 0.298) 45%, rgba(239, 251, 255, 0) 100%),
      linear-gradient(90deg,
        rgb(0, 7, 26) 0%,
        rgb(1, 72, 114) 12.5%,
        rgb(1, 27, 42) 25%,
        rgb(1, 12, 19) 37.5%,
        rgb(0, 0, 0) 50%,
        rgb(0, 40, 72) 62.5%,
        rgb(0, 65, 106) 75%,
        rgb(28, 176, 243) 87.5%,
        rgb(255, 250, 240) 100%);
  }
}

/* ------------------------------------------------------------ Glaskarten */

.lvf-s05 .lvf-s05-glass {
  position: relative;
  border-radius: calc(42 * var(--s05-u));
  /* Design: rgba(64,188,254,0.01) ueber dem blauen Panel; die Dunkelheit
     kommt dort aus der Hintergrundgrafik hinter der linken Karte. Hier als
     dunkle Flaeche, sonst steht der weisse Text auf Blau (Kontrast < 3:1). */
  background: rgba(1, 11, 20, 0.78);
  box-shadow: 15px 23px 33px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(calc(105 * var(--s05-u)));
          backdrop-filter: blur(calc(105 * var(--s05-u)));
}

.lvf-s05 .lvf-s05-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0.6px solid rgba(0, 90, 141, 0.9);
  border-radius: inherit;
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s05 .lvf-s05-glass::before {
    border: 0;
    padding: 0.6px;
    background: var(--s05-hair);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

/* --------------------------------------------------------- Reglerspalte */

.lvf-s05 .lvf-s05-inputs {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--s05-u));
  padding:
    calc(53 * var(--s05-u)) calc(45 * var(--s05-u))
    calc(16 * var(--s05-u)) calc(44 * var(--s05-u));
}

.lvf-s05 .lvf-s05-label {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--s05-u));
  height: calc(17 * var(--s05-u));
  padding-left: calc(11 * var(--s05-u));
}

.lvf-s05 .lvf-s05-label-t {
  color: var(--lvf-white);
  font-size: calc(19 * var(--s05-u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.lvf-s05 .lvf-s05-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(17 * var(--s05-u));
  height: calc(17 * var(--s05-u));
  border-radius: 50%;
  background: #000000;
  -webkit-backdrop-filter: blur(calc(46 * var(--s05-u)));
          backdrop-filter: blur(calc(46 * var(--s05-u)));
}

.lvf-s05 .lvf-s05-info-ico {
  width: calc(10 * var(--s05-u));
  height: calc(10 * var(--s05-u));
}

.lvf-s05 .lvf-s05-info--lg {
  width: calc(22 * var(--s05-u));
  height: calc(22 * var(--s05-u));
  -webkit-backdrop-filter: blur(calc(61 * var(--s05-u)));
          backdrop-filter: blur(calc(61 * var(--s05-u)));
}

.lvf-s05 .lvf-s05-info--lg .lvf-s05-info-ico {
  width: calc(13 * var(--s05-u));
  height: calc(13 * var(--s05-u));
}

/* ---------------------------------------------------------- Schieberegler
   Aufbau je Regler (Design-Pixel Desktop):
     Rahmen  132 hoch
     Spur      8 von oben, 86 hoch, Radius 14
     Fuellung 14 innen, 57 hoch, Radius 5
     Griff    11 breit, 132 hoch, Radius voll
     Blase   102 von oben, 86 x 30
   --p ist der Fortschritt 0..1, gesetzt von fragment.js.
   ------------------------------------------------------------------------ */

.lvf-s05 .lvf-s05-slider {
  /* Startdarstellung wie im Soll: Fuellung ~40%, Trenner und Blase stehen
     dort, obwohl der Reglerwert auf Maximum steht (Design-Zustand).
     fragment.js setzt --p erst ab der ersten Nutzereingabe auf den
     tatsaechlichen Reglerweg. */
  --p: 0.44;
  position: relative;
  height: calc(132 * var(--s05-u));
  margin-top: calc(3 * var(--s05-u));
}

.lvf-s05 .lvf-s05-track {
  position: absolute;
  top: calc(8 * var(--s05-u));
  right: 0;
  left: 0;
  z-index: 0;
  height: calc(86 * var(--s05-u));
  border-radius: calc(14 * var(--s05-u));
  background-color: #000000;
  background-image: linear-gradient(153deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 162, 255, 0.2) 32%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 162, 255, 0.2) 100%);
}

.lvf-s05 .lvf-s05-fill {
  position: absolute;
  top: calc(22 * var(--s05-u));
  left: calc(14 * var(--s05-u));
  z-index: 1;
  height: calc(57 * var(--s05-u));
  width: calc(5.5 * var(--s05-u) + (100% - 39 * var(--s05-u)) * var(--p));
  border-radius: calc(8 * var(--s05-u));
  background-image: var(--s05-grad-blue);
  box-shadow: inset 0 1px 14px rgba(255, 255, 255, 0.75);
}

/* Sichtbarer Trenner am Ende der Fuellung (Design: Vector 11x132, steht
   auf der Spur und ueberragt sie oben und unten). Der native Griff des
   Range-Inputs bleibt als Trefferflaeche bestehen, ist aber unsichtbar. */
.lvf-s05 .lvf-s05-thumb {
  position: absolute;
  top: 0;
  left: calc(19.5 * var(--s05-u) + (100% - 39 * var(--s05-u)) * var(--p));
  z-index: 2;
  width: calc(11 * var(--s05-u));
  height: calc(132 * var(--s05-u));
  transform: translateX(-50%);
  border-radius: calc(107 * var(--s05-u));
  background-color: #14a6fa;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.35) 100%),
    var(--s05-grad-blue);
  box-shadow: inset 0 1px 7px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.lvf-s05 .lvf-s05-num {
  position: absolute;
  top: calc(8 * var(--s05-u));
  right: calc(24 * var(--s05-u));
  z-index: 3;
  display: flex;
  align-items: center;
  height: calc(86 * var(--s05-u));
  color: var(--s05-num);
  font-size: calc(43 * var(--s05-u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: calc(-1.28 * var(--s05-u));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
}

.lvf-s05 .lvf-s05-bubble {
  position: absolute;
  top: calc(102 * var(--s05-u));
  left: calc(19.5 * var(--s05-u) + (100% - 39 * var(--s05-u)) * var(--p));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(86 * var(--s05-u));
  height: calc(30 * var(--s05-u));
  transform: translateX(-50%);
  border-radius: calc(15 * var(--s05-u));
  background: #e5f6fe;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.28);
  color: #000000;
  font-size: calc(16 * var(--s05-u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.lvf-s05 .lvf-s05-range {
  position: absolute;
  top: 0;
  right: calc(14 * var(--s05-u));
  left: calc(14 * var(--s05-u));
  z-index: 2;
  height: calc(132 * var(--s05-u));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.lvf-s05 .lvf-s05-range:focus { outline: none; }

.lvf-s05 .lvf-s05-range:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: calc(4 * var(--s05-u));
  border-radius: calc(14 * var(--s05-u));
}

.lvf-s05 .lvf-s05-range::-webkit-slider-runnable-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.lvf-s05 .lvf-s05-range::-moz-range-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.lvf-s05 .lvf-s05-range::-moz-range-progress { background: transparent; }

/* Der native Griff ist nur noch die Trefferflaeche; sichtbar ist der
   Trenner .lvf-s05-thumb. */
.lvf-s05 .lvf-s05-range::-webkit-slider-thumb {
  width: calc(11 * var(--s05-u));
  height: calc(132 * var(--s05-u));
  margin-top: 0;
  border: 0;
  border-radius: calc(107 * var(--s05-u));
  background: transparent;
  box-shadow: none;
  cursor: grab;
  -webkit-appearance: none;
          appearance: none;
}

.lvf-s05 .lvf-s05-range::-moz-range-thumb {
  width: calc(11 * var(--s05-u));
  height: calc(132 * var(--s05-u));
  border: 0;
  border-radius: calc(107 * var(--s05-u));
  background: transparent;
  box-shadow: none;
  cursor: grab;
}

.lvf-s05 .lvf-s05-range::-moz-focus-outer { border: 0; }

.lvf-s05 .lvf-s05-slider:hover .lvf-s05-thumb { filter: brightness(1.15); }
.lvf-s05 .lvf-s05-range:active::-webkit-slider-thumb { cursor: grabbing; }
.lvf-s05 .lvf-s05-range:active::-moz-range-thumb { cursor: grabbing; }

/* -------------------------------------------------------- Ergebnisspalte */

.lvf-s05 .lvf-s05-out {
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--s05-u));
  padding: calc(15 * var(--s05-u));
  /* Im Design steht die rechte Karte auf dem weissen Bloom des Panels */
  background: radial-gradient(130% 130% at 82% 30%, #ffffff 55%, #d9edfc 100%);
}

/* Desktop 11.08.2026: der Rahmen der Ergebniskarte ist im Entwurf kein
   weisser Bloom, sondern ein schraeger Verlauf von dunklem Blau oben links
   nach Weiss unten rechts. Sichtbar sind nur die 15 px Rand und der Spalt
   zwischen den beiden Ergebnisboxen; dort gemessen (Karte Soll x1034..1415 /
   y4066..4457):

     obere Kante   x1040        x1200         x1320         x1410
                   Soll (2,34,54) (3,119,182) (116,208,244) (248,252,255)
                   Ist  (249,252,255) durchgehend
     linke Kante   y4070        y4210         y4360         y4450
                   Soll (2,34,53) (2,105,160) (124,210,243) (240,246,250)
                   Ist  (249,252,255) durchgehend

   Gleiche Werte bei gleichem dx+dy: der Verlauf laeuft also exakt diagonal
   (135deg). Die Stopps stehen als Weg auf der Verlaufsachse, das ist
   (dx+dy)/Wurzel(2). */
@media (min-width: 1024px) {
  .lvf-s05 .lvf-s05-out {
    background: linear-gradient(135deg,
      rgb(2, 28, 45) 0px,
      rgb(2, 67, 105) 35px,
      rgb(2, 90, 140) 78px,
      rgb(3, 119, 182) 120px,
      rgb(10, 133, 193) 143px,
      rgb(31, 161, 219) 163px,
      rgb(47, 171, 223) 177px,
      rgb(116, 208, 244) 205px,
      rgb(124, 210, 243) 213px,
      rgb(199, 238, 253) 247px,
      rgb(248, 252, 255) 269px,
      rgb(255, 255, 255) 300px);
  }
}

.lvf-s05 .lvf-s05-out::before { border-color: rgba(255, 255, 255, 0.8); }

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s05 .lvf-s05-out::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

.lvf-s05 .lvf-s05-res {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: calc(173 * var(--s05-u));
  padding:
    calc(30 * var(--s05-u)) calc(20 * var(--s05-u))
    calc(22 * var(--s05-u)) calc(27 * var(--s05-u));
  overflow: hidden;
  border-radius: calc(27 * var(--s05-u));
  background-color: #000000;
  background-image: linear-gradient(142deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 162, 255, 0.2) 32%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 162, 255, 0.2) 100%);
}

/* Glaspfeil (Vector 130x137, Pfeil nach oben mit Weiss-Verlauf) */
.lvf-s05 .lvf-s05-res-shard {
  position: absolute;
  top: calc(14 * var(--s05-u));
  right: calc(8 * var(--s05-u));
  z-index: 0;
  width: calc(130 * var(--s05-u));
  height: calc(137 * var(--s05-u));
  filter: drop-shadow(0 7px 18px rgba(0, 0, 0, 0.1));
  /* Soll: nur schwach dunkel angedeutet, nicht dominant (Befund R2:
     Deckkraft gegenueber dem vorherigen Stand nochmals halbiert) */
  opacity: 0.2;
  pointer-events: none;
}

.lvf-s05 .lvf-s05-res-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(19 * var(--s05-u));
  height: calc(22 * var(--s05-u));
}

.lvf-s05 .lvf-s05-res-l {
  color: var(--lvf-white);
  font-size: calc(25 * var(--s05-u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.lvf-s05 .lvf-s05-res-v {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: auto;
  color: var(--s05-num);
  font-size: calc(46 * var(--s05-u));
  font-weight: 600;
  line-height: calc(57 * var(--s05-u));
  letter-spacing: calc(-1.39 * var(--s05-u));
  text-align: right;
  white-space: nowrap;
}

/* ==========================================================================
   Mobile < 768px - Werte aus s05-calculator-mobile.txt (Frame 440)
   Karte 381 breit (Seitenrand 30), Panel 351, Ergebnisse untereinander.
   ========================================================================== */

@media (max-width: 767px) {
  .lvf-s05 {
    /* Untergrenze 0.85: darunter faellt das Touch-Ziel des Reglers unter 44px
       (52 * 0.85 = 44.2) und die 9px-Labels des Designs werden unlesbar.
       Sie greift erst unterhalb von etwa 384px Viewport. */
    --s05-u: max(0.85px, calc(min(100vw - 60px, 440px) / 381));
    padding-top: calc(49 * var(--s05-u));
    padding-bottom: calc(79 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-inner { padding-inline: 30px; }

  /* Befund R3 (mobil 2+3): im Soll fuellt ein breiter blauer Glow die volle
     Breite hinter der Karte und laeuft nach unten weich aus. Die Desktop-
     Version (weisse Blueten, weisser Bloom an der Unterkante) erzeugt mobil
     einen grau-weissen Schleier und eine harte Kante am Sektionsende.
     Deshalb eigene Mobile-Fassung: kein Weiss, breite Flanken, weicher
     Auslauf per Maske VOR der Sektionsgrenze. */
  .lvf-s05 .lvf-s05-glow {
    background-image:
      radial-gradient(60% 16% at 0% 12%, rgba(0, 170, 250, 0.65) 0%, rgba(0, 150, 225, 0.28) 50%, rgba(0, 140, 215, 0) 80%),
      radial-gradient(60% 16% at 100% 12%, rgba(0, 170, 250, 0.65) 0%, rgba(0, 150, 225, 0.28) 50%, rgba(0, 140, 215, 0) 80%),
      radial-gradient(90% 32% at 0% 52%, rgba(0, 170, 250, 0.85) 0%, rgba(1, 140, 215, 0.4) 50%, rgba(1, 120, 185, 0) 82%),
      radial-gradient(90% 32% at 100% 52%, rgba(0, 170, 250, 0.85) 0%, rgba(1, 140, 215, 0.4) 50%, rgba(1, 120, 185, 0) 82%),
      radial-gradient(150% 50% at 50% 58%, rgba(0, 150, 225, 0.5) 0%, rgba(0, 140, 215, 0.18) 55%, rgba(0, 130, 200, 0) 85%);
    -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 78%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0) 99%);
            mask-image: linear-gradient(180deg, #000000 0%, #000000 78%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0) 99%);
  }

  .lvf-s05 .lvf-s05-stack {
    max-width: calc(381 * var(--s05-u));
    margin-inline: auto;
  }

  .lvf-s05 .lvf-s05-card {
    min-height: calc(393 * var(--s05-u));
    padding-top: calc(64 * var(--s05-u));
    border-radius:
      calc(42 * var(--s05-u)) calc(42 * var(--s05-u))
      calc(79 * var(--s05-u)) calc(79 * var(--s05-u));
    background-image:
      radial-gradient(34% 30% at 0% 0%, rgba(184, 227, 255, 0.5) 0%, rgba(0, 162, 255, 0) 72%),
      radial-gradient(24% 55% at 0% 55%, rgba(0, 162, 255, 0.4) 0%, rgba(0, 162, 255, 0) 78%),
      radial-gradient(68% 56% at 21% 86%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%),
      radial-gradient(68% 56% at 79% 86%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%),
      radial-gradient(112% 88% at 50% 110%, rgba(0, 162, 255, 0.26) 0%, rgba(0, 162, 255, 0) 70%),
      radial-gradient(140% 118% at 50% 138%, rgba(4, 48, 74, 0.55) 0%, rgba(4, 48, 74, 0) 72%);
    box-shadow:
      0 0 0 calc(7.08 * var(--s05-u)) rgba(255, 255, 255, 0.05),
      2px 3px 7px rgba(0, 0, 0, 0.2),
      8px 11px 14px rgba(0, 0, 0, 0.17),
      18px 24px 18px rgba(0, 0, 0, 0.1),
      33px 43px 22px rgba(0, 0, 0, 0.03);
  }

  .lvf-s05 .lvf-s05-head { width: calc(351 * var(--s05-u)); }

  .lvf-s05 .lvf-s05-kicker-t {
    padding: calc(5 * var(--s05-u)) calc(8 * var(--s05-u));
    border-radius: 65px;
    font-size: calc(9 * var(--s05-u));
    line-height: calc(11 * var(--s05-u));
    letter-spacing: calc(0.55 * var(--s05-u));
    box-shadow:
      6px 2px 9px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 0 0 3px rgba(0, 0, 0, 0.16);
  }

  .lvf-s05 .lvf-s05-title {
    margin-top: calc(18 * var(--s05-u));
    font-size: calc(40 * var(--s05-u));
    line-height: calc(37 * var(--s05-u));
    letter-spacing: calc(-0.8 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-sub {
    width: calc(273 * var(--s05-u));
    margin-top: calc(19 * var(--s05-u));
    font-size: calc(11 * var(--s05-u));
    line-height: calc(20 * var(--s05-u));
    letter-spacing: calc(0.33 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-panel {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--s05-u));
    width: 92.126%;
    margin-top: calc(-129 * var(--s05-u));
    padding:
      calc(16 * var(--s05-u)) calc(15 * var(--s05-u))
      calc(14 * var(--s05-u)) calc(14 * var(--s05-u));
    border-radius: calc(36 * var(--s05-u));
    /* Soll Mobile: oberer Bereich heller blau-grauer Glasverlauf, dazu ein
       sichtbarer blauer Umgebungs-Glow um das ganze Panel (Befund R2). Der
       dunkle Radial-Schleier ist gegenueber dem vorherigen Stand auf etwa
       die Haelfte abgeschwaecht. Befund R3 (mobil 2): Schleier nochmals
       reduziert und Weissbloom verstaerkt, die mittlere Panelflaeche soll
       sichtbar blau leuchten (Soll ~RGB(34,99,132)) statt fast schwarz. */
    background-image:
      radial-gradient(60% 36% at 100% 52%, #ffffff 18%, rgba(255, 255, 255, 0) 72%),
      radial-gradient(50% 40% at 0% 100%, rgba(167, 223, 255, 0.85) 0%, rgba(167, 223, 255, 0) 70%),
      linear-gradient(168deg, rgba(148, 196, 236, 0.5) 0%, rgba(148, 196, 236, 0) 46%),
      radial-gradient(120% 90% at 45% 45%, rgba(70, 170, 230, 0.65) 0%, rgba(70, 170, 230, 0) 85%),
      radial-gradient(100% 70% at 32% 22%, rgba(4, 48, 74, 0.16) 0%, rgba(4, 48, 74, 0) 74%),
      linear-gradient(90deg, rgba(0, 162, 255, 0.5) 0%, #00a2ff 50%, rgba(0, 162, 255, 0.5) 100%);
    box-shadow:
      0 0 0 calc(0.995 * var(--s05-u)) rgba(255, 255, 255, 0.05),
      0 0 calc(42 * var(--s05-u)) rgba(0, 162, 255, 0.35);
    -webkit-backdrop-filter: blur(calc(39 * var(--s05-u)));
            backdrop-filter: blur(calc(39 * var(--s05-u)));
  }

  .lvf-s05 .lvf-s05-glass {
    border-radius: calc(21 * var(--s05-u));
    box-shadow: 7px 11px 16px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(calc(51 * var(--s05-u)));
            backdrop-filter: blur(calc(51 * var(--s05-u)));
  }

  .lvf-s05 .lvf-s05-glass::before { border-width: 0.3px; }

  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .lvf-s05 .lvf-s05-glass::before { border: 0; padding: 0.3px; }
  }

  .lvf-s05 .lvf-s05-inputs {
    gap: calc(3 * var(--s05-u));
    padding:
      calc(18 * var(--s05-u)) calc(17 * var(--s05-u))
      calc(11 * var(--s05-u)) calc(19 * var(--s05-u));
    /* Soll Mobile: nicht fast schwarz, sondern hellerer blau-grauer
       Glasverlauf (Befund R2, etwa 15-20% aufgehellt). Befund R3 (mobil 2):
       Deckkraft der Zwischentoene reduziert, damit der helle Blau-Schein des
       Panels durchkommt (Soll-Flaechenmittel ~RGB(34,99,132)). */
    background: linear-gradient(164deg,
      rgba(70, 115, 160, 0.4) 0%,
      rgba(24, 64, 100, 0.6) 52%,
      rgba(6, 24, 44, 0.72) 100%);
  }

  .lvf-s05 .lvf-s05-label {
    gap: calc(5 * var(--s05-u));
    height: calc(8 * var(--s05-u));
    padding-left: calc(6 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-label-t { font-size: calc(9 * var(--s05-u)); }

  .lvf-s05 .lvf-s05-info {
    width: calc(8 * var(--s05-u));
    height: calc(8 * var(--s05-u));
    -webkit-backdrop-filter: blur(calc(22 * var(--s05-u)));
            backdrop-filter: blur(calc(22 * var(--s05-u)));
  }

  .lvf-s05 .lvf-s05-info-ico {
    width: calc(5 * var(--s05-u));
    height: calc(5 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-info--lg {
    width: calc(11 * var(--s05-u));
    height: calc(11 * var(--s05-u));
    -webkit-backdrop-filter: blur(calc(30 * var(--s05-u)));
            backdrop-filter: blur(calc(30 * var(--s05-u)));
  }

  .lvf-s05 .lvf-s05-info--lg .lvf-s05-info-ico {
    width: calc(6 * var(--s05-u));
    height: calc(6 * var(--s05-u));
  }

  /* Regler: Rahmen 52, Spur 42 ab 5, Fuellung 6 innen / 28 hoch, Trenner 5 breit.
     Startdarstellung wie im Soll: Fuellung endet bei ~42%, dort sitzen der
     Trenner und der weisse Wert-Chip auf der Spur. */
  .lvf-s05 .lvf-s05-slider {
    --p: 0.42;
    height: calc(52 * var(--s05-u));
    margin-top: 0;
  }

  .lvf-s05 .lvf-s05-track {
    top: calc(5 * var(--s05-u));
    height: calc(42 * var(--s05-u));
    border-radius: calc(7 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-fill {
    top: calc(13 * var(--s05-u));
    left: calc(6 * var(--s05-u));
    height: calc(28 * var(--s05-u));
    width: calc(2.5 * var(--s05-u) + (100% - 17 * var(--s05-u)) * var(--p));
    border-radius: calc(2 * var(--s05-u));
    box-shadow: inset 0 0 7px rgba(255, 255, 255, 0.75);
  }

  /* Hellblaue Trennlinie, ueberragt die Spur oben und unten um je ~5 */
  .lvf-s05 .lvf-s05-thumb {
    left: calc(8.5 * var(--s05-u) + (100% - 17 * var(--s05-u)) * var(--p));
    width: calc(5 * var(--s05-u));
    height: calc(52 * var(--s05-u));
    border-radius: calc(52 * var(--s05-u));
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.3) 100%),
      var(--s05-grad-blue);
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.75);
  }

  .lvf-s05 .lvf-s05-num {
    top: calc(5 * var(--s05-u));
    right: calc(12 * var(--s05-u));
    height: calc(42 * var(--s05-u));
    font-size: calc(21 * var(--s05-u));
    letter-spacing: calc(-0.62 * var(--s05-u));
  }

  /* Weisser Wert-Chip, sitzt mittig auf der Spur am Ende der Fuellung
     (Design: 42x14, Text 8px). */
  .lvf-s05 .lvf-s05-bubble {
    display: flex;
    top: calc(19 * var(--s05-u));
    left: calc(8.5 * var(--s05-u) + (100% - 17 * var(--s05-u)) * var(--p));
    z-index: 4;
    width: calc(42 * var(--s05-u));
    height: calc(14 * var(--s05-u));
    border-radius: calc(7 * var(--s05-u));
    font-size: calc(8 * var(--s05-u));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  }

  .lvf-s05 .lvf-s05-range {
    right: calc(6 * var(--s05-u));
    left: calc(6 * var(--s05-u));
    height: calc(52 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-range:focus-visible {
    outline-offset: calc(2 * var(--s05-u));
    border-radius: calc(7 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-range::-webkit-slider-thumb {
    width: calc(5 * var(--s05-u));
    height: calc(52 * var(--s05-u));
    border-radius: calc(52 * var(--s05-u));
    background: transparent;
    box-shadow: none;
  }

  .lvf-s05 .lvf-s05-range::-moz-range-thumb {
    width: calc(5 * var(--s05-u));
    height: calc(52 * var(--s05-u));
    border-radius: calc(52 * var(--s05-u));
    background: transparent;
    box-shadow: none;
  }

  /* Soll Mobile: keine deckend weisse Flaeche mit harter Kante, sondern
     dunkles Glas mit weichem, halbtransparentem hellblauem Glow-Rahmen. */
  .lvf-s05 .lvf-s05-out {
    gap: calc(8 * var(--s05-u));
    padding:
      calc(19 * var(--s05-u)) calc(19 * var(--s05-u))
      calc(19 * var(--s05-u)) calc(20 * var(--s05-u));
    background: rgba(3, 22, 38, 0.55);
    box-shadow:
      7px 11px 16px rgba(0, 0, 0, 0.1),
      0 0 22px rgba(135, 211, 255, 0.3);
  }

  .lvf-s05 .lvf-s05-out::before { border-color: rgba(135, 211, 255, 0.35); }

  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .lvf-s05 .lvf-s05-out::before {
      background: linear-gradient(180deg, rgba(135, 211, 255, 0.45) 0%, rgba(135, 211, 255, 0) 100%);
    }
  }

  /* Ergebniszeilen: Label links, Wert rechts, feste Hoehe 51 */
  .lvf-s05 .lvf-s05-res {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(14 * var(--s05-u));
    height: calc(51 * var(--s05-u));
    min-height: 0;
    padding: 0 calc(19 * var(--s05-u)) 0 calc(18 * var(--s05-u));
    border-radius: calc(10 * var(--s05-u));
  }

  /* Soll Mobile: Ergebniszeilen ohne Pfeil-Grafik */
  .lvf-s05 .lvf-s05-res-shard { display: none; }

  .lvf-s05 .lvf-s05-res-head {
    gap: calc(9 * var(--s05-u));
    height: calc(11 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-res-l { font-size: calc(12 * var(--s05-u)); }

  .lvf-s05 .lvf-s05-res-v {
    margin-top: 0;
    font-size: calc(24 * var(--s05-u));
    line-height: 1;
    letter-spacing: calc(-0.73 * var(--s05-u));
  }
}

/* Mobile Bedien- und Hilfstexte bleiben lesbar, ohne die Geometrie des
   Rechners an die skalierten Entwurfs-Pixel zu koppeln. */
@media (max-width: 420px) {
  .lvf-s05 .lvf-s05-kicker-t,
  .lvf-s05 .lvf-s05-label-t { font-size: 12px; line-height: 1.25; }
  .lvf-s05 .lvf-s05-sub { font-size: 14px; line-height: 1.5; }
  .lvf-s05 .lvf-s05-bubble { min-width: 42px; width: auto; padding-inline: 5px; font-size: 11px; }
}

/* Sehr schmale Geraete: Seitenrand zurueck auf 20px, damit die Karte passt.
   Die Karte ist dort schmaler als 381 * u; sie wird von der Spalte begrenzt. */
@media (max-width: 359px) {
  .lvf-s05 {
    --s05-u: max(0.85px, calc(min(100vw - 40px, 440px) / 381));
  }

  .lvf-s05 .lvf-s05-inner { padding-inline: 20px; }
}

/* Unterhalb von etwa 384px greift die Untergrenze von --s05-u: die Schrift ist
   dann fuer eine 381er Karte bemessen, die Karte selbst aber schmaler. In der
   einzeiligen Ergebniszeile wuerde der Wert abgeschnitten, deshalb stehen
   Beschriftung und Wert dort untereinander (wie in der Desktop-Fassung). */
@media (max-width: 383px) {
  .lvf-s05 .lvf-s05-res {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: calc(5 * var(--s05-u));
    height: auto;
    min-height: calc(51 * var(--s05-u));
    padding: calc(10 * var(--s05-u)) calc(16 * var(--s05-u));
  }

  .lvf-s05 .lvf-s05-res-head { justify-content: flex-start; }
}


/* Die Kartenregel muss NACH der Grundfassung stehen, sonst gewinnt bei
   gleicher Spezifitaet die spaetere Zeile. */
@media (min-width: 1024px) {
  /* Lichtschein IN der Rechnerkarte, 11.08.2026.
     Vorher endete der Verlauf bei 78 Prozent von 38 Prozent Kartenbreite,
     also bei x 627. Ueber 630 px Breite (x 620 bis 1250) mass der Live-Stand
     dadurch exakt 0, der Entwurf dort nie unter 55.
     Nachgemessen im Soll (Karte 1240 x 646 bei x 260 / y 3640), Blaukanal
     70 px unter der Kartenoberkante, x-Werte kartenrelativ:
       cx    20  180  340  500  660  820  980 1140 1220
       Soll 254  224  148  107  115  156  210  247  253
       Ist  217  142   26    0    0    0    0  148  191
     70 px darueber und 130 px darunter derselbe Verlauf, nach unten
     abnehmend; bei cy 360 ist die Mitte auch im Entwurf fast schwarz
     (cx 660: 7). Die Lage steht jetzt in px, nicht in Prozent der
     Kartenhoehe.
     Weggefallen sind die beiden rechten Mittelverlaeufe (24% 58% at 100% 55%
     und 16% 65% at 100% 35%): sie hielten den rechten Rand unten auf 173,
     der Entwurf liegt dort bei 69. */
  /* Richtungsschatten der Karte weg, 11.08.2026.
     Die vier versetzten Schatten (7/9/24, 27/35/44, 60/79/60, 107/140/71)
     fallen nach RECHTS und UNTEN aus der Karte heraus und dunkeln dort den
     Randschein ab. Im Entwurf gibt es diese Abdunklung nicht: dort ist die
     Flanke spiegelsymmetrisch, links wie rechts gleich hell.

       x 1520 / y 3900   Soll (2,107,166)   Ist mit Schatten (4,78,124)
       x  239 / y 3900   Soll (2,104,163)   Ist               (4,97,151)

     Der Streifen x 1502..1600 lag dadurch 7,5 RGB daneben, ohne die
     Richtungsschatten 4,3. Der weisse 10px-Ring bleibt: er ist im Entwurf
     nachweisbar (Soll x 1500 (16,105,156) gegen x 1520 (2,107,166), der
     Rotkanal steigt am Kartenrand von 2 auf 16).
     Nur Desktop; Tablet und Mobil behalten ihren eigenen Schattensatz. */
  .lvf-s05 .lvf-s05-card {
    box-shadow: 0 0 0 calc(10 * var(--s05-u)) rgba(255, 255, 255, 0.05);

    /* Nachgezogen 11.08.2026. Die Fassung vom Vormittag hatte die Mitte des
       Kartenkopfs schon gerettet (vorher Blaukanal 0 ueber 630 px Breite),
       lag aber weiter deutlich unter dem Entwurf. Blaukanal, Median ueber
       12 Zeilen, Kartenkoordinaten, VOR dieser Aenderung:

         cy 20   cx    20   120   240   360   500   820   980  1100  1220
                 Soll 253   248   209   160   130   188   234   251   255
                 Ist  253   226   171   144   133   147   166   226   253
         cy 130  Soll 255   234   167   103    64    85   136   185   229
                 Ist  250   211   123    91    74    98   121   176   229
         cy 360  Soll 249   189   101    44    18     1     8    26    65
                 Ist  245   204    64    10    10    10     8     7    92

       Zu dunkel also die ganze obere Mitte (bis -68 bei cx 980), zu hell die
       untere linke Haelfte. Die dreizehn Ebenen sind dieselben geblieben;
       Lage, Radien und Deckkraft stammen jetzt aus einer Ausgleichsrechnung
       ueber 12873 textfreie Kartenpunkte des Entwurfs (Glyphenkanten ueber
       die oertliche Streuung ausgeschlossen, der Grund ZWISCHEN den
       Buchstaben bleibt drin). Mittlere Abweichung dort 15,6 -> 4,3 RGB.
       Masse bleiben wie bisher in px auf den Entwurf 1760 bezogen. */
    background-image:
      /* linke Lichtsaeule, traegt bis cy 500 */
      radial-gradient(164px 956px at 11px -38px,
        rgba(255, 255, 255, 1) 0%, rgba(226, 244, 255, 1) 30%,
        rgba(120, 205, 250, 0.074) 66%, rgba(40, 170, 235, 0) 100%),
      /* weisser Kern oben rechts, Soll cx 1220 / cy 20: 255 */
      radial-gradient(492px 165px at 1241px -2px,
        rgba(255, 255, 255, 1) 0%, rgba(228, 245, 255, 1) 34%,
        rgba(110, 202, 250, 0.343) 68%, rgba(20, 160, 230, 0) 100%),
      /* rechte Lichtsaeule, Soll cx 1180: cy 20 254, cy 280 104, cy 360 54 */
      radial-gradient(152px 513px at 1218px -2px,
        rgba(120, 210, 250, 1) 0%, rgba(10, 155, 228, 0.246) 42%,
        rgba(2, 115, 182, 0) 100%),
      /* rechte Keule, Soll cx 980 / cy 20: 234, cy 200: 76 */
      radial-gradient(859px 599px at 1485px -166px,
        rgba(60, 190, 246, 1) 0%, rgba(4, 140, 215, 1) 52%,
        rgba(2, 110, 175, 0) 100%),
      /* linke Keule oben, Soll cx 360 / cy 20: 160 */
      radial-gradient(726px 271px at 17px 10px,
        rgba(40, 180, 244, 1) 0%, rgba(2, 130, 200, 0) 52%,
        rgba(2, 100, 160, 0) 100%),
      /* zweite linke Flanke, haelt cx 120..360 bis cy 360 (Soll cx 240:
         cy 20 209, cy 200 143, cy 360 101) */
      radial-gradient(396px 547px at 102px 69px,
        rgba(20, 168, 238, 1) 0%, rgba(2, 122, 192, 0.583) 50%,
        rgba(2, 95, 150, 0) 100%),
      /* durchgehendes Band unter der Kartenoberkante, Tiefpunkt in der Mitte
         (Soll cx 500 / cy 20: 130) */
      radial-gradient(1922px 242px at 967px -14px,
        rgba(2, 132, 202, 0.971) 0%, rgba(2, 105, 168, 0.423) 52%,
        rgba(2, 80, 130, 0) 100%),
      /* linke Kartenkante unten (Soll cx 20: cy 500 235, cy 580 172) und die
         schwachen Schleier, die die untere Haelfte tragen */
      radial-gradient(407px 220px at 33px 509px,
        rgba(90, 200, 242, 1) 0%, rgba(45, 160, 220, 0) 55%, rgba(0, 120, 180, 0) 88%),
      radial-gradient(205px 943px at 83px 274px,
        rgba(0, 162, 255, 1) 0%, rgba(0, 162, 255, 0) 78%),
      radial-gradient(464px 673px at 442px 376px,
        rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0) 62%),
      radial-gradient(1318px 247px at 888px 727px,
        rgba(255, 255, 255, 0.472) 0%, rgba(255, 255, 255, 0) 62%),
      radial-gradient(2148px 327px at 273px 644px,
        rgba(0, 162, 255, 0) 0%, rgba(0, 162, 255, 0.04) 70%),
      radial-gradient(990px 485px at 301px 1049px,
        rgba(4, 48, 74, 0.465) 0%, rgba(4, 48, 74, 0) 72%);
  }
}

/* ================= Naht zu s06, 12.08.2026 =================================
   Nachdem die Empfaengerebene in s06 aktiv ist, trifft deren Oberkante den
   Entwurf. Uebrig bleibt die Unterkante von s05, die in den aeussersten 90 px
   rund 10 Blaustufen zu dunkel ist, und ein sehr schwacher Grundschleier ueber
   die Mitte, den der Entwurf hat und live fehlt:

     x              0     40     80    120    160    600    880
     s05 unten    166    135    103     78     59      1      0
     Entwurf      179    145    112     84     60      4      4
     s06 oben     182    143    110     84     61      4      4

   Zwei Ebenen an der Unterkante: eine Ecke je Seite (0,145 auf 90 px
   auslaufend) und ein Schleier von 0,016 ueber die volle Breite. Beide laufen
   nach oben ueber 300 px aus und beruehren die Naht zu s04 bei y 3523 nicht.

   ERGEBNIS, letzte Zeile von s05, Blaukanal:
     x             0     20     40     60     80    100
     vorher      166    151    135    118    103     90
     nachher     179    164    148    130    114     98
     Entwurf     179    162    145    128    112     97
   Sprung an der Naht 3,0 -> 1,7 Stufen (mit s06 allein waren es 2,0),
   Entwurf 0,6. Die Naht zu s04 bei y 3523 bleibt unveraendert bei 2,5.
   ========================================================================= */
@media (min-width: 1024px) {
  .lvf-s05::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(150px 300px at 0% 100%,
        rgba(3, 163, 255, 0.145) 0%,
        rgba(3, 163, 255, 0.100) 27%,
        rgba(3, 163, 255, 0.060) 53%,
        rgba(3, 163, 255, 0.020) 80%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(150px 300px at 100% 100%,
        rgba(3, 163, 255, 0.145) 0%,
        rgba(3, 163, 255, 0.100) 27%,
        rgba(3, 163, 255, 0.060) 53%,
        rgba(3, 163, 255, 0.020) 80%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(1000px 300px at 50% 100%,
        rgba(3, 163, 255, 0.016) 0%,
        rgba(3, 163, 255, 0.015) 70%,
        rgba(3, 163, 255, 0) 100%);
  }
}

/* ===== s06 ===== */
/* ==========================================================================
   s06 Platforms - "Your Trading Environment"
   Desktop-Design 1760 (Content 1240, Karten-Block 1148), Mobile-Design 440.
   Alle Groessen interpolieren linear zwischen Viewport 440 (Mobile-Wert)
   und Viewport 1024 (Desktop-Wert); ab 1024 sind alle Werte exakt Desktop.
   ========================================================================== */

.lvf-s06 {
  /* --- Sektion --- */
  --s06-pt:            clamp(48px, calc(26.90px + 4.795vw), 76px);
  --s06-pb:            clamp(64px, calc(39.14px + 5.651vw), 97px);

  /* --- Kicker-Pille --- */
  --s06-kick-fs:       clamp(11px, calc(8.74px + 0.514vw), 14px);
  --s06-kick-lh:       clamp(14px, calc(11.74px + 0.514vw), 17px);
  --s06-kick-ls:       clamp(0.66px, calc(0.524px + 0.031vw), 0.84px);
  --s06-kick-w:        clamp(159px, calc(145.44px + 3.082vw), 177px);

  /* --- Ueberschrift + Sub --- */
  --s06-h2-fs:         clamp(48px, calc(35.19px + 2.911vw), 65px);
  --s06-h2-lh:         clamp(45px, calc(33.70px + 2.568vw), 60px);
  --s06-h2-ls:         clamp(-1.3px, calc(-0.704px - 0.058vw), -0.96px);
  --s06-h2-mt:         clamp(14px, calc(11.74px + 0.514vw), 17px);
  --s06-h2-mw:         clamp(371px, calc(86.21px + 64.73vw), 749px);
  --s06-sub-fs:        clamp(13px, calc(9.23px + 0.856vw), 18px);
  --s06-sub-lh:        clamp(20px, calc(16.99px + 0.685vw), 24px);
  --s06-sub-ls:        clamp(0.39px, calc(0.277px + 0.026vw), 0.54px);
  --s06-sub-mt:        clamp(6px, calc(0.73px + 1.199vw), 13px);
  --s06-sub-mw:        clamp(315px, calc(88.22px + 51.54vw), 616px);
  --s06-headgap:       clamp(45px, calc(10.35px + 7.875vw), 91px);

  /* --- Kartenraster --- */
  --s06-gap-row:       clamp(11px, calc(6.48px + 1.027vw), 17px);
  --s06-gap-col:       16px;
  --s06-inset:         clamp(0px, calc(17.54px - 1.712vw), 10px);

  /* --- Karte --- */
  --s06-r:             clamp(14px, calc(8.73px + 1.199vw), 21px);
  --s06-bw:            clamp(0.44px, calc(0.28px + 0.036vw), 0.65px);
  --s06-pad:           clamp(11px, calc(-1.06px + 2.74vw), 27px);
  --s06-cardh:         clamp(95px, calc(21.92px + 16.61vw), 192px);

  /* --- Logo-Kachel --- */
  --s06-logo-w:        clamp(88px, calc(29.99px + 13.19vw), 165px);
  --s06-logo-h:        clamp(73px, calc(23.27px + 11.30vw), 139px);
  --s06-logo-r:        clamp(9px, calc(5.23px + 0.856vw), 14px);

  /* --- Kartentext --- */
  --s06-name-fs:       clamp(25px, calc(15.96px + 2.055vw), 37px);
  --s06-desc-fs:       clamp(9px, calc(5.23px + 0.856vw), 14px);
  --s06-desc-lh:       clamp(15px, calc(9.73px + 1.199vw), 22px);
  --s06-desc-ls:       clamp(0.19px, calc(0.122px + 0.015vw), 0.28px);
  --s06-desc-mt:       clamp(6px, calc(3.74px + 0.514vw), 9px);
  --s06-copy-mw:       clamp(224px, calc(190.10px + 7.706vw), 269px);
  --s06-copy-mw-wide:  clamp(268px, calc(169.30px + 22.43vw), 399px);

  /* --- Terminal-Karte --- */
  --s06-shot-px:       clamp(19px, calc(-2.85px + 4.966vw), 48px);
  --s06-shot-pt:       clamp(20px, calc(14.73px + 1.199vw), 27px);
  --s06-shot-h:        clamp(57px, calc(-4.78px + 14.04vw), 139px);
  --s06-shot-r:        clamp(9px, calc(-0.80px + 2.226vw), 22px);
  --s06-shot-gap:      clamp(16px, calc(-9.62px + 5.822vw), 50px);
  --s06-brand-h:       clamp(14px, calc(-1.07px + 3.425vw), 34px);
  --s06-brand-gap:     clamp(7px, calc(0.22px + 1.541vw), 16px);
  --s06-badge-mt:      clamp(11px, calc(6.48px + 1.027vw), 17px);
  --s06-badge-fs:      clamp(9px, calc(5.23px + 0.856vw), 14px);
  --s06-badge-lh:      clamp(12px, calc(8.23px + 0.856vw), 17px);
  --s06-badge-ls:      clamp(0.56px, calc(0.349px + 0.048vw), 0.84px);
  --s06-badge-py:      clamp(4px, calc(2.49px + 0.342vw), 6px);
  --s06-badge-px:      clamp(6px, calc(3.74px + 0.514vw), 9px);
  --s06-badge-w:       clamp(119px, calc(75.30px + 9.932vw), 177px);
  --s06-wide-pb:       clamp(24px, calc(6.67px + 3.938vw), 47px);

  --s06-hairline:      linear-gradient(131deg,
                          rgba(140, 213, 255, 0) 0%,
                          rgba(140, 213, 255, 0.5) 25%,
                          #8cd5ff 50%,
                          rgba(140, 213, 255, 0.5) 75%,
                          rgba(140, 213, 255, 0) 100%);

  position: relative;
  padding-top: var(--s06-pt);
  padding-bottom: var(--s06-pb);
  font-family: var(--lvf-font-display);
}

/* Angenaeherte Hintergrund-Glows (im Design: grosse, 100-500px weichgezeichnete
   Star-Vektoren in #00a2ff / #a7dfff / #04304a). */
.lvf-s06-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(58% 46% at 20% 34%, rgba(0, 162, 255, 0.10) 0%, rgba(0, 162, 255, 0) 72%),
    radial-gradient(58% 46% at 80% 34%, rgba(0, 162, 255, 0.10) 0%, rgba(0, 162, 255, 0) 72%),
    radial-gradient(90% 60% at 50% 100%, rgba(4, 48, 74, 0.35) 0%, rgba(4, 48, 74, 0) 75%);
}

.lvf-s06-inner {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- Kopfbereich */

.lvf-s06-head {
  width: 100%;
  max-width: min(100%, var(--s06-h2-mw));
  margin-inline: auto;
  text-align: center;
}

.lvf-s06-kicker {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: min(100%, var(--s06-kick-w));
  padding: 6px 9px;
  border-radius: 78px;
  background: #00121c;
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

.lvf-s06-kicker-text {
  font-family: var(--lvf-font-display);
  font-size: var(--s06-kick-fs);
  font-weight: 400;
  line-height: var(--s06-kick-lh);
  letter-spacing: var(--s06-kick-ls);
  color: var(--lvf-white);
  white-space: nowrap;
}

.lvf-s06-title {
  margin-top: var(--s06-h2-mt);
  font-family: var(--lvf-font-display);
  font-size: var(--s06-h2-fs);
  font-weight: 500;
  line-height: var(--s06-h2-lh);
  letter-spacing: var(--s06-h2-ls);
  background-image: linear-gradient(94deg,
    rgba(255, 255, 255, 0.7) 0%,
    #ffffff 50.5%,
    rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* "Environment" ist im Design blau verlaufend, der Rest weiss */
.lvf-s06-title-hl {
  background-image: var(--lvf-grad-blue);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s06-sub {
  max-width: min(100%, var(--s06-sub-mw));
  margin-top: var(--s06-sub-mt);
  margin-inline: auto;
  font-family: var(--lvf-font-display);
  font-size: var(--s06-sub-fs);
  font-weight: 425;
  line-height: var(--s06-sub-lh);
  letter-spacing: var(--s06-sub-ls);
  color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------- Raster */

.lvf-s06-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s06-gap-row);
  max-width: 1148px;
  margin-top: var(--s06-headgap);
  margin-inline: auto;
  padding-inline: var(--s06-inset);
}

/* -------------------------------------------------------------------- Karte */

.lvf-s06-card {
  position: relative;
  border-radius: var(--s06-r);
  overflow: hidden;
  isolation: isolate;
  /* Befund muster-d-home-rules.md Abschnitt 6.4/8.2: Grundflaeche war
     praktisch deckend (#010509), Figma-Soll rgba(0,0,0,0.75). Nur Desktop/
     Tablet - die eigene, bereits abgenommene Mobilfassung (max-width:767px
     weiter unten) bleibt unveraendert. */
  background-color: rgba(0, 0, 0, 0.75);
  /* Weiss-cyan Glas-Verlauf fuellt flaechig die ganze Karte (im Design ein
     riesiger, weichgezeichneter weisser "Star" (1210x553, blur 72) ueber der
     vollen Kartenbreite plus #00a2ff-Sterne). Karte wirkt insgesamt hell,
     cyan Leuchtkante rechts, dezenter Blau-Schimmer links. */
  background-image:
    radial-gradient(190% 280% at 48% 175%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(236, 246, 252, 0.55) 16%,
      rgba(198, 228, 244, 0.22) 30%,
      rgba(160, 210, 240, 0.08) 46%,
      rgba(150, 216, 252, 0.02) 62%,
      rgba(150, 216, 252, 0) 100%),
    linear-gradient(105deg,
      rgba(150, 200, 230, 0.2) 0%,
      rgba(90, 150, 195, 0.14) 48%,
      rgba(30, 110, 165, 0.12) 100%),
    radial-gradient(42% 135% at 104% 56%,
      rgba(0, 214, 246, 0.9) 0%,
      rgba(0, 185, 232, 0.45) 42%,
      rgba(0, 162, 255, 0) 75%),
    radial-gradient(32% 125% at -2% 62%,
      rgba(3, 120, 185, 0.6) 0%,
      rgba(3, 120, 185, 0) 75%);
}

/* Befund 13.08.2026 beim Rundgang: server-stand-20260810/lvlup-fixes/r3-home.css
   Zeile 388 setzt body.page-id-7895 .lvf-s06 .lvf-s06-grid .lvf-s06-card--row
   (Spezifitaet 0-4-1, laedt nach diesem Fragment) auf das alte deckende
   #010509 zurueck und zeichnet einen eigenen Verlauf. Das macht die heutige
   Aenderung oben (rgba(0,0,0,0.75), Figma-Fill lt. Band-Spec Zeile 40) fuer
   die beiden Reihenkarten (DX Trade, Volumetrica) live wirkungslos: gemessen
   background-color rgb(1,5,9) = #010509 statt der gesetzten 0,75 Deckkraft.
   Dieselbe Falle wie im Rundgang fuer shell.css beschrieben, hier mit 0-4-1
   statt 0-2-1. lvlup-fixes bleibt unveraendert (tabu, nur lesen), deshalb hier
   auf 0-5-0 gehoben, Werte identisch zur Basisregel oben, nur fuer --row und
   nur ab 768px (die eigene, abgenommene Mobilfassung darunter bleibt unberuehrt). */
@media (min-width: 768px) {
  .lvf-s06.lvf-s06.lvf-s06.lvf-s06 .lvf-s06-card--row {
    background-color: rgba(0, 0, 0, 0.75);
    background-image:
      radial-gradient(190% 280% at 48% 175%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(236, 246, 252, 0.55) 16%,
        rgba(198, 228, 244, 0.22) 30%,
        rgba(160, 210, 240, 0.08) 46%,
        rgba(150, 216, 252, 0.02) 62%,
        rgba(150, 216, 252, 0) 100%),
      linear-gradient(105deg,
        rgba(150, 200, 230, 0.2) 0%,
        rgba(90, 150, 195, 0.14) 48%,
        rgba(30, 110, 165, 0.12) 100%),
      radial-gradient(42% 135% at 104% 56%,
        rgba(0, 214, 246, 0.9) 0%,
        rgba(0, 185, 232, 0.45) 42%,
        rgba(0, 162, 255, 0) 75%),
      radial-gradient(32% 125% at -2% 62%,
        rgba(3, 120, 185, 0.6) 0%,
        rgba(3, 120, 185, 0) 75%);
  }
}

/* 0.65px Innen-Kontur mit Verlauf (Fallback: einfache Linie) */
.lvf-s06-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: var(--s06-bw) solid rgba(140, 213, 255, 0.45);
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s06-card::before {
    border: 0;
    padding: var(--s06-bw);
    background: var(--s06-hairline);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

/* --- kleine Karte: Logo links, Text rechts --- */

.lvf-s06-card--row {
  display: flex;
  align-items: center;
  min-height: var(--s06-cardh);
  padding: var(--s06-pad) 0 var(--s06-pad) var(--s06-pad);
}

.lvf-s06-logo-box {
  position: relative;
  flex: 0 0 auto;
  width: var(--s06-logo-w);
  height: var(--s06-logo-h);
  border-radius: var(--s06-logo-r);
  background: #000000;
  overflow: hidden;
}

/* Bildausschnitte exakt aus imageTransform des Figma-Fills gerechnet. */
.lvf-s06-logo-box .lvf-s06-logo-img {
  position: absolute;
  max-width: none;
  height: auto;
}

.lvf-s06-logo-box .lvf-s06-logo-img--dx {
  left: 21.804%;
  top: 26.186%;
  width: 55.509%;
  height: 48.253%;
}

.lvf-s06-logo-box .lvf-s06-logo-img--vol {
  left: 7.879%;
  top: 2.703%;
  width: 84.242%;
  height: 100%;
}

.lvf-s06-card--row .lvf-s06-copy {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 10px;
}

.lvf-s06-copy {
  text-align: center;
}

.lvf-s06-copy > * {
  max-width: var(--s06-copy-mw);
  margin-inline: auto;
}

.lvf-s06-copy--wide > * {
  max-width: var(--s06-copy-mw-wide);
}

/* Beschreibung der Terminal-Karte bricht im Design nach "built for a" um */
.lvf-s06-copy--wide .lvf-s06-desc {
  max-width: clamp(238px, calc(169.45px + 15.58vw), 329px);
}

.lvf-s06-name {
  font-family: var(--lvf-font-display);
  font-size: var(--s06-name-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  background-image: var(--lvf-grad-blue);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-s06-desc {
  margin-top: var(--s06-desc-mt);
  font-family: var(--lvf-font-display);
  font-size: var(--s06-desc-fs);
  font-weight: 400;
  line-height: var(--s06-desc-lh);
  letter-spacing: var(--s06-desc-ls);
  color: rgba(255, 255, 255, 0.7);
}

/* --- grosse Karte: Terminal --- */

.lvf-s06-card--wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s06-shot-pt) var(--s06-shot-px) var(--s06-wide-pb);
  background-image:
    radial-gradient(75% 16% at 50% 44%,
      rgba(140, 205, 245, 0.5) 0%,
      rgba(140, 205, 245, 0) 72%),
    radial-gradient(46% 90% at -2% 105%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(230, 242, 250, 0.85) 40%,
      rgba(160, 212, 240, 0.4) 62%,
      rgba(140, 213, 255, 0) 80%),
    radial-gradient(44% 85% at 102% 105%,
      rgba(240, 249, 253, 0.95) 0%,
      rgba(150, 210, 242, 0.6) 45%,
      rgba(0, 162, 255, 0) 78%),
    radial-gradient(95% 45% at 50% 112%,
      rgba(0, 145, 215, 0.55) 0%,
      rgba(0, 162, 255, 0) 72%),
    radial-gradient(150% 120% at 50% 150%,
      rgba(4, 48, 74, 0.5) 0%,
      rgba(4, 48, 74, 0) 72%);
}

.lvf-s06-shot {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--s06-shot-h);
  border-radius: var(--s06-shot-r);
  overflow: hidden;
  background: #0b1116;
  /* dezenter heller Rand + weicher Schein nur unter dem Banner (im Design
     kein Outer-Glow; der blaue Leuchtverlauf sitzt an der Unterkante) */
  box-shadow:
    0 0 0 1px rgba(90, 195, 255, 0.28),
    0 22px 36px -16px rgba(0, 162, 255, 0.3);
}

.lvf-s06-shot .lvf-s06-shot-img {
  position: absolute;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  max-width: none;
  object-fit: cover;
  object-position: 50% 13%;
  filter: blur(4px);
}

/* dunkler Verlauf @0.71 ueber dem Screenshot */
.lvf-s06-shot-dark {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(138deg,
    rgba(0, 0, 0, 0.71) 0%,
    rgba(20, 20, 20, 0.71) 28%,
    rgba(0, 0, 0, 0.71) 55%,
    rgba(31, 31, 31, 0.71) 78%,
    rgba(0, 0, 0, 0.71) 100%);
}

/* #5bbce8 mit Blendmodus COLOR (wie in Figma) */
.lvf-s06-shot-color {
  position: absolute;
  inset: 0;
  background: #5bbce8;
  mix-blend-mode: color;
}

/* Innenschein des Frames: im Soll nur ein dezenter blauer Leuchtverlauf an
   der Unterkante (negativer Spread haelt den Glow unten, kein Rundum-Rahmen),
   oben/links bleibt das Panel dunkel. */
.lvf-s06-shot-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 -12px 16px -8px rgba(82, 184, 241, 0.85),
    inset 0 -6px 10px -4px rgba(0, 164, 255, 0.75),
    inset 10px 8px 14px -6px rgba(0, 0, 0, 0.9);
}

.lvf-s06-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s06-brand-gap);
  height: var(--s06-brand-h);
  transform: translate(-50%, -50%);
  color: var(--lvf-white);
  white-space: nowrap;
}

.lvf-s06-brand-ico {
  display: block;
  width: auto;
  height: 100%;
}

/* Pixel-Wordmark "LVLUP FUTURES" als Vektor (Verhaeltnis 21/34 zur Icon-Hoehe) */
.lvf-s06-brand-word {
  display: block;
  width: auto;
  height: calc(var(--s06-brand-h) * 0.62);
}

.lvf-s06-card--wide .lvf-s06-copy {
  margin-top: var(--s06-shot-gap);
}

.lvf-s06-badge {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: min(100%, var(--s06-badge-w));
  margin-top: var(--s06-badge-mt);
  padding: var(--s06-badge-py) var(--s06-badge-px);
  border-radius: 78px;
  background: #000000;
  box-shadow:
    7px 9px 14px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

.lvf-s06-badge-text {
  font-family: var(--lvf-font-display);
  font-size: var(--s06-badge-fs);
  font-weight: 400;
  line-height: var(--s06-badge-lh);
  letter-spacing: var(--s06-badge-ls);
  color: var(--lvf-white);
  white-space: nowrap;
}

/* 0.5px Aussen-Kontur mit Verlauf fuer beide Pillen */
.lvf-s06-kicker::before,
.lvf-s06-badge::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  border: 0.5px solid rgba(53, 174, 244, 0.55);
  pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .lvf-s06-kicker::before,
  .lvf-s06-badge::before {
    border: 0;
    padding: 0.5px;
    background: linear-gradient(98deg,
      rgba(52, 176, 248, 0) 0%,
      #35aef4 53%,
      rgba(49, 169, 238, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}

/* ------------------------------------------------- Tablet / kleiner Desktop */

@media (min-width: 768px) {
  .lvf-s06-shot .lvf-s06-shot-img {
    filter: blur(4px);
  }

  .lvf-s06-shot-inner {
    box-shadow:
      inset 0 -24px 36px -16px rgba(82, 184, 241, 0.85),
      inset 0 -13px 22px -10px rgba(0, 164, 255, 0.75),
      inset 24px 20px 32px -12px rgba(0, 0, 0, 0.9);
  }
}

@media (max-width: 767px) {
  .lvf-s06-desc { font-size: 13px; line-height: 1.45; }
  /* Befund R3 (mobil 1): im Mobile-Soll sind die Karten fast schwarz mit
     dunkelblauem Schimmer (Flaechenmitte ~RGB(12,48,68)), nicht hellgrau.
     Der helle Weiss-cyan Glas-Verlauf gilt nur auf Desktop (abgenommen),
     mobil bekommen alle drei Karten eine dunkle Fassung, damit die helle
     Schrift wieder lesbar ist. */
  .lvf-s06-card {
    background-color: #020a12;
    background-image:
      radial-gradient(75% 130% at 102% 58%, rgba(0, 150, 220, 0.32) 0%, rgba(0, 150, 220, 0) 70%),
      radial-gradient(65% 120% at -2% 42%, rgba(3, 92, 148, 0.38) 0%, rgba(3, 92, 148, 0) 72%),
      linear-gradient(160deg,
        rgba(14, 52, 82, 0.6) 0%,
        rgba(6, 26, 44, 0.66) 55%,
        rgba(3, 14, 26, 0.72) 100%);
  }

  .lvf-s06-card--wide {
    background-image:
      radial-gradient(95% 42% at 50% 104%, rgba(0, 145, 215, 0.42) 0%, rgba(0, 145, 215, 0) 72%),
      radial-gradient(70% 34% at 50% 26%, rgba(16, 70, 110, 0.5) 0%, rgba(16, 70, 110, 0) 76%),
      linear-gradient(168deg,
        rgba(10, 40, 66, 0.62) 0%,
        rgba(4, 18, 32, 0.7) 58%,
        rgba(3, 14, 26, 0.75) 100%);
  }

  /* Uebergang aus der Calculator-Sektion: mobil laeuft der blaue Schein im
     Soll ueber die volle Breite weich aus (kein Sprung an der Sektions-
     grenze). Desktop-Fassung (zwei Eck-Tupfen) bleibt unveraendert. */
  .lvf-s06::before {
    height: 240px;
    background:
      radial-gradient(130% 240px at 50% 0%,
        rgba(3, 95, 150, 0.16) 0%,
        rgba(3, 92, 145, 0.07) 55%,
        rgba(2, 88, 138, 0) 100%);
  }

  /* Im Mobile-Design liegt der Screenshot gestreckt (STRETCH) hinter dem
     Banner und ragt oben/unten hinaus: Bild-Box(47,5258,346,103) im
     Frame-Box(49,5281,341,57). Nur so bleibt die Chart-Textur sichtbar. */
  .lvf-s06-shot .lvf-s06-shot-img {
    top: -40.35%;
    left: -0.59%;
    width: 101.47%;
    height: 180.7%;
    object-fit: fill;
    object-position: 50% 50%;
    filter: blur(2px);
  }

  /* Abdunklung etwas abschwaechen, damit die schwache Chart/Terminal-
     Textur hinter dem Banner durchkommt (im Soll rechts neben der
     Wortmarke sichtbar). */
  .lvf-s06-shot-dark {
    opacity: 0.55;
  }
}

/* ----------------------------------------------------------------- Desktop */

@media (min-width: 1024px) {
  /* Unterzeile laeuft im Design einzeilig durch */
  .lvf-s06-sub {
    max-width: 660px;
  }

  .lvf-s06-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s06-gap-col);
    row-gap: var(--s06-gap-row);
  }

  .lvf-s06-grid > .lvf-s06-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .lvf-s06-grid > .lvf-s06-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .lvf-s06-grid > .lvf-s06-card--wide {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* Konturverlauf folgt der Diagonale der jeweiligen Kartengroesse */
  .lvf-s06-card--wide {
    --s06-hairline: linear-gradient(151deg,
      rgba(140, 213, 255, 0) 0%,
      rgba(140, 213, 255, 0.5) 25%,
      #8cd5ff 50%,
      rgba(140, 213, 255, 0.5) 75%,
      rgba(140, 213, 255, 0) 100%);
  }
}



/* Randschein 11.08.2026: Fortsetzung der Fahne aus s05, gleiche Bauart, gleiche
   Maske. Die erste Marke (0,693) ist die letzte von s05, damit an der Grenze
   y 4645 kein Sprung entsteht; gemessen war dort vorher -71,9 Helligkeits-
   stufen in einer Bildzeile, im Entwurf -0,05.
   Soll x0..6: Grenze (2,104,162), y 4900 (2,92,146), y 5200 (2,77,126),
   Sektionsende y 5450 (2,66,106). Vorher lag hier praktisch nichts: an der
   Grenze 15 statt 162 im Blaukanal. Die alte Empfaengerebene .lvf-s06::before
   hat z-index: -1 und liegt damit hinter dem Seitenhintergrund .lvf-page,
   sie war nie sichtbar. */
@media (min-width: 1024px) {
  .lvf-s06-glow {
    /* Der Bodenschimmer (rgba(4,48,74,0.35) bei 50% 100%) bleibt weg: er allein
       hat die Mitte aufgehellt (Soll y 5400, x 700..1100: 0 gegen Ist 32) und
       die Restkante zu s07 verursacht (Sprung -6,9 statt -0,03). Nachgerechnet
       12.08.2026: die beiden Flankenwaschungen konnten daran nicht schuld sein,
       ihre senkrechte Halbachse (46% = 373 px) endet 107 px ueber y 5400.

       Die beiden Flankenwaschungen fehlten seitdem trotzdem. Gemessen bei 1760
       gegen home-aus-vollbild, x 0..290 und spiegelbildlich rechts: es fehlen
       bis zu 27 Stufen Blau und 14 Stufen Gruen, am staerksten um y 5050 herum,
       bis an beide Sektionskanten aber nirgends null.

       Zurueck kommen sie nicht im alten Zuschnitt. Die Staerke stimmte
       (Alpha 0,10), der Zuschnitt nicht: 58% x 46% hiess 1021 px waagerechte
       Halbachse - bis x 1373, also mitten ins Bild - bei nur 373 px senkrecht.
       Gemessen gebraucht wird das Gegenteil: 400 px waagerecht, 700 px
       senkrecht, Mitte bei 240px/400px. Angepasst per kleinster Quadrate ueber
       540 Messpunkte je Flanke, Restfehler 11,87 -> 2,55 Stufen.

       Nebenkriterium eingehalten: ueber die ganze Sektionshoehe bleibt der
       rechnerische Beitrag in x 640..1120 unter 0,07 Stufen Blau, die 0,00 bei
       y 5400 in der Mitte bleibt also stehen. Die Waschung laeuft ausserdem
       ueber beide Sektionskanten weiter, weil der Entwurf das tut: bei y 4645
       steht in x 240 heute ein Sprung von -23 Stufen (s05 36, s06 13, Entwurf
       durchgehend 30), bei y 5455 einer von +9. Beide werden dadurch kleiner. */
    background-image:
      radial-gradient(400px 700px at 240px 400px,
        rgba(0, 162, 255, 0.1) 0%,
        rgba(0, 162, 255, 0) 100%),
      radial-gradient(400px 700px at calc(100% - 240px) 400px,
        rgba(0, 162, 255, 0.1) 0%,
        rgba(0, 162, 255, 0) 100%);

    --s06-aura-x: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }

  .lvf-s06-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg,
      rgba(3, 163, 255, 0.693) 0px,
      rgba(3, 163, 255, 0.669) 40px,
      rgba(3, 163, 255, 0.647) 80px,
      rgba(3, 163, 255, 0.626) 120px,
      rgba(3, 163, 255, 0.609) 160px,
      rgba(3, 163, 255, 0.591) 200px,
      rgba(3, 163, 255, 0.577) 240px,
      rgba(3, 163, 255, 0.565) 280px,
      rgba(3, 163, 255, 0.555) 320px,
      rgba(3, 163, 255, 0.545) 360px,
      rgba(3, 163, 255, 0.53) 400px,
      rgba(3, 163, 255, 0.523) 439px,
      rgba(3, 163, 255, 0.506) 479px,
      rgba(3, 163, 255, 0.5) 519px,
      rgba(3, 163, 255, 0.49) 559px,
      rgba(3, 163, 255, 0.475) 599px,
      rgba(3, 163, 255, 0.466) 639px,
      rgba(3, 163, 255, 0.453) 679px,
      rgba(3, 163, 255, 0.44) 719px,
      rgba(3, 163, 255, 0.43) 759px,
      rgba(3, 163, 255, 0.411) 799px,
      rgba(3, 163, 255, 0.409) 809px);
    -webkit-mask-image: var(--s06-aura-x);
            mask-image: var(--s06-aura-x);
  }
}


/* Uebergang von der Calculator-Sektion: deren blaue Rand-Fahnen laufen im Soll
   weit in diese Sektion hinein (x=60: an der Grenze noch 2,97,151, nach 140px
   erst 2,80,125). Empfaenger-Glows an den oberen Ecken, weich nach unten. */
.lvf-s06::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(14% 320px at 0% 0%, rgba(2, 100, 158, 0.7) 0%, rgba(2, 95, 150, 0.32) 55%, rgba(2, 90, 140, 0) 100%),
    radial-gradient(14% 320px at 100% 0%, rgba(2, 100, 158, 0.7) 0%, rgba(2, 95, 150, 0.32) 55%, rgba(2, 90, 140, 0) 100%);
}


/* Review-Detailcheck 06.08.2026: heller Fliesstext war auf den hellen
   Glas-Karten unlesbar (Kontrast 2,1:1). Auf den Reihen-Karten dunkler Text
   und dunklerer Titel-Verlauf wie im Soll. */
/* entfernt: Karten sind wieder dunkel, heller Text wie urspruenglich */


/* ==========================================================================
   Effektabgleich 11.08.2026, gemessen gegen referenz-neu/soll/home-aus-vollbild
   und gegengeprueft an home-aus-schnipseln. Nur Desktop; der Mobilzweig und die
   Overrides des Plugins lvlup-fixes bleiben unberuehrt.
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- Banner der Terminal-Karte: Innenschein --------------------------------
     Im Entwurf leuchtet der Rahmen NUR unten und an der rechten Flanke, links
     und oben bleibt er dunkel. Live lag ein rundum laufender, blasser Ring an.
     Gemessen (Banner x936..1406 / y4984..5123, Soll-Versatz 4):

       Stelle                       SOLL             IST vorher
       Bodenband Mitte y5108..5120  (  9,159,244)    ( 33,105,145)
       Bodenband x1000              (  9,159,243)    ( 33,107,146)
       linke Kante y5090            (  2, 14, 21)    ( 21, 84,116)
       linke Kante y5114            (  1, 25, 39)    ( 44,138,189)
       rechte Kante y5042           ( 19,153,228)    ( 21,121,167)
       rechte Kante y5106           (  5,164,253)    ( 37,145,199)

     Das Bodenband ist also fast deckendes rgb(3,163,255), die rechte Flanke
     ebenso ab rund 40 Prozent Hoehe, links gehoert Schwarz hin. Umgesetzt als
     zwei Verlaufsebenen mit eigener Maske statt der bisherigen Leuchtschatten;
     die dunklen Innenschatten bleiben box-shadow und liegen darunter.
     Nachgemessen: Bodenband (8,159,244) Abweichung 0,2; linke Kante y5114
     (3,33,48) Abweichung 6,3; rechte Kante y5042 (14,160,239) Abweichung 7,7.
     Mittel ueber elf Messstellen 44 -> 7. */
  .lvf-s06-shot-inner {
    box-shadow:
      inset 0 34px 38px -18px rgba(0, 0, 0, 0.72),
      inset 40px 0 40px -20px rgba(0, 0, 0, 0.82),
      inset 24px 20px 32px -12px rgba(0, 0, 0, 0.9);
  }

  .lvf-s06-shot-inner::before,
  .lvf-s06-shot-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  /* Bodenband. Senkrechtes Sollprofil bei x1180..1200 zurueckgerechnet
     (Untergrund rgb(0,13,19)): 7 px ueber der Kante Deckkraft 0,96, bei 26 px
     0,73, bei 38 px 0,38, bei 50 px 0,13, ab 76 px nichts mehr. Die waagerechte
     Maske bildet die Rampe an der linken Ecke nach: im Soll steigt das Band von
     9 px (0,05) bis 65 px (0,96) an. */
  .lvf-s06-shot-inner::before {
    background-image: linear-gradient(0deg,
      rgba(4, 164, 255, 0.96) 0px,
      rgba(12, 167, 255, 0.95) 14px,
      rgba(21, 170, 255, 0.87) 20px,
      rgba(32, 175, 255, 0.73) 26px,
      rgba(44, 178, 255, 0.55) 32px,
      rgba(56, 182, 255, 0.38) 38px,
      rgba(72, 187, 255, 0.22) 44px,
      rgba(80, 192, 255, 0.13) 50px,
      rgba(70, 186, 255, 0.08) 56px,
      rgba(60, 184, 255, 0.04) 64px,
      rgba(60, 184, 255, 0) 76px);
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 0.05) 9px, rgba(0, 0, 0, 0.10) 13px,
      rgba(0, 0, 0, 0.17) 17px, rgba(0, 0, 0, 0.25) 21px, rgba(0, 0, 0, 0.34) 25px,
      rgba(0, 0, 0, 0.44) 29px, rgba(0, 0, 0, 0.55) 33px, rgba(0, 0, 0, 0.64) 37px,
      rgba(0, 0, 0, 0.72) 41px, rgba(0, 0, 0, 0.79) 45px, rgba(0, 0, 0, 0.84) 49px,
      rgba(0, 0, 0, 0.89) 53px, rgba(0, 0, 0, 0.92) 57px, rgba(0, 0, 0, 0.95) 61px,
      rgba(0, 0, 0, 1) 66px);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 0.05) 9px, rgba(0, 0, 0, 0.10) 13px,
      rgba(0, 0, 0, 0.17) 17px, rgba(0, 0, 0, 0.25) 21px, rgba(0, 0, 0, 0.34) 25px,
      rgba(0, 0, 0, 0.44) 29px, rgba(0, 0, 0, 0.55) 33px, rgba(0, 0, 0, 0.64) 37px,
      rgba(0, 0, 0, 0.72) 41px, rgba(0, 0, 0, 0.79) 45px, rgba(0, 0, 0, 0.84) 49px,
      rgba(0, 0, 0, 0.89) 53px, rgba(0, 0, 0, 0.92) 57px, rgba(0, 0, 0, 0.95) 61px,
      rgba(0, 0, 0, 1) 66px);
  }

  /* Rechte Flanke. Soll quer bei y5030..5060: 6 px vor der Kante Deckkraft
     0,89, bei 18 px 0,60, bei 30 px 0,25, ab 54 px nichts. Senkrecht faellt sie
     nach oben weg (y4986 praktisch 0, ab y5034 voll), daher die Maske. */
  .lvf-s06-shot-inner::after {
    background-image: linear-gradient(270deg,
      rgba(10, 167, 255, 0.92) 0px,
      rgba(12, 169, 255, 0.89) 6px,
      rgba(18, 171, 255, 0.77) 12px,
      rgba(30, 175, 255, 0.60) 18px,
      rgba(48, 179, 255, 0.41) 24px,
      rgba(68, 185, 255, 0.25) 30px,
      rgba(88, 190, 255, 0.14) 36px,
      rgba(95, 194, 255, 0.08) 42px,
      rgba(95, 194, 255, 0.02) 50px,
      rgba(95, 194, 255, 0) 58px);
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.19) 10px, rgba(0, 0, 0, 0.36) 18px,
      rgba(0, 0, 0, 0.57) 26px, rgba(0, 0, 0, 0.75) 34px, rgba(0, 0, 0, 0.88) 42px,
      rgba(0, 0, 0, 0.96) 50px, rgba(0, 0, 0, 1) 60px);
            mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.19) 10px, rgba(0, 0, 0, 0.36) 18px,
      rgba(0, 0, 0, 0.57) 26px, rgba(0, 0, 0, 0.75) 34px, rgba(0, 0, 0, 0.88) 42px,
      rgba(0, 0, 0, 0.96) 50px, rgba(0, 0, 0, 1) 60px);
  }

  /* --- Haarlinie der Karten --------------------------------------------------
     Die 0,65-px-Kontur war live eine deutlich sichtbare Leuchtkante, im Entwurf
     ist sie kaum zu sehen. Oberkante der ersten Reihenkarte, x500..700:
     SOLL (1,10,16) gegen IST (112,178,213); gegenueber der Kartenflaeche also
     +6 im Soll und +165 live. Ueber die ganze Kontur abgetastet (Schnipsel-Bau,
     Kante gegen 4 px innen, Blaukanal) steigt der Zuwachs von 0 an der oberen
     linken Ecke auf hoechstens +34 an der unteren rechten. Deshalb kein
     symmetrisches Band mehr, sondern eine Rampe mit Hoechstwert 0,21.
     Nachgemessen: Oberkante x500..700 jetzt (6,39,54), Zuwachs +5 statt +165. */
  .lvf-s06 {
    --s06-hairline: linear-gradient(131deg,
      rgba(140, 213, 255, 0) 26%,
      rgba(140, 213, 255, 0.03) 40%,
      rgba(140, 213, 255, 0.09) 55%,
      rgba(140, 213, 255, 0.16) 70%,
      rgba(140, 213, 255, 0.20) 88%,
      rgba(140, 213, 255, 0.21) 100%);
  }

  .lvf-s06 .lvf-s06-card--wide {
    --s06-hairline: linear-gradient(151deg,
      rgba(140, 213, 255, 0) 26%,
      rgba(140, 213, 255, 0.03) 40%,
      rgba(140, 213, 255, 0.09) 55%,
      rgba(140, 213, 255, 0.16) 70%,
      rgba(140, 213, 255, 0.20) 88%,
      rgba(140, 213, 255, 0.21) 100%);
  }

  /* --- Rand der beiden Pillen ------------------------------------------------
     Beide Mockup-Baue zeigen an der Pille keine leuchtende Kontur. Kicker,
     x830..940: Randzeile SOLL (1,20,31) gegen Fuellung (0,18,28), also +3.
     Live lag dort (37,126,178), also +150, unten dasselbe Bild.
     Nachgemessen: Oberkante (2,23,36) Abweichung 5,0, Unterkante (4,9,15) 3,8. */
  .lvf-s06 .lvf-s06-kicker::before,
  .lvf-s06 .lvf-s06-badge::before {
    border-color: rgba(53, 174, 244, 0.06);
  }

  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .lvf-s06 .lvf-s06-kicker::before,
    .lvf-s06 .lvf-s06-badge::before {
      background: linear-gradient(98deg,
        rgba(52, 176, 248, 0) 0%,
        rgba(53, 174, 244, 0.05) 53%,
        rgba(49, 169, 238, 0) 100%);
    }
  }

  /* --- Grund der Terminal-Karte ----------------------------------------------
     Im Entwurf sitzen in den beiden unteren Ecken schmale weisse Bluetten, und
     dazwischen liegt ueber die ganze Breite gesaettigtes Blau. Live waren die
     Bluetten zu breit (zu viel Rot in der Flaeche) und die Mitte zu dunkel.
     Raster ueber die Karte (x888..1454 / y4955..5358, Soll-Versatz 4):

       relx / rely   SOLL            IST vorher
       0,20 / 0,70   ( 12, 85,129)   ( 67, 91,104)
       0,97 / 0,70   (  5, 88,137)   ( 97,133,153)
       0,20 / 0,82   ( 27,123,174)   (111,132,143)
       0,03 / 0,92   (247,249,251)   (225,231,235)
       0,40 / 0,92   ( 14, 78,115)   (  2, 46, 70)
       0,40 / 0,97   ( 29, 99,140)   (  1, 61, 93)

     Bluetten schmaler und in den Aussenstops blau statt weiss, blaues Feld
     kraeftiger. Mittel ueber 28 Rasterpunkte 24,4 -> 14,2. */
  .lvf-s06 .lvf-s06-card--wide {
    background-image:
      radial-gradient(75% 16% at 50% 44%,
        rgba(140, 205, 245, 0.5) 0%,
        rgba(140, 205, 245, 0) 72%),
      radial-gradient(44% 88% at -2% 105%,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 252, 255, 0.95) 40%,
        rgba(60, 195, 248, 0.72) 55%,
        rgba(25, 170, 238, 0.48) 66%,
        rgba(10, 158, 230, 0.24) 78%,
        rgba(0, 150, 225, 0) 92%),
      radial-gradient(40% 60% at 102% 104%,
        rgba(248, 252, 255, 1) 0%,
        rgba(206, 235, 252, 0.82) 32%,
        rgba(80, 190, 243, 0.46) 52%,
        rgba(20, 166, 236, 0.20) 70%,
        rgba(0, 152, 228, 0) 88%),
      radial-gradient(100% 54% at 50% 113%,
        rgba(0, 152, 224, 0.70) 0%,
        rgba(0, 148, 218, 0.46) 40%,
        rgba(0, 142, 212, 0.22) 64%,
        rgba(0, 134, 202, 0) 88%),
      radial-gradient(150% 120% at 50% 150%,
        rgba(4, 48, 74, 0.5) 0%,
        rgba(4, 48, 74, 0) 72%);
  }
}

/* ================= Naht zu s05, 12.08.2026 =================================
   BEFUND: an y 4645 sprang der Hintergrund um 3,0 Stufen, der Entwurf um 0,6.
   Ursache ist einseitig: die Unterkante von s05 trifft den Entwurf, die
   Oberkante von s06 ist zu dunkel. Blaukanal in der Zeile ueber und unter der
   Kante:

     x             0     40     80    120    160    220    300    380
     s05 unten   173    133     96     66     46     28     14      0
     s06 oben    174    131     95     66     45     32     24      0   (Fahne)
     Entwurf     178    144    111     83     60     36     20     10

   Genauer: s06 traegt an seiner Oberkante NUR die Fahne, und die ist dort
   rund 15 Blaustufen zu schmal. Es ist derselbe Punkt, der in s08 schon
   vermerkt ist: "senkrechtes Profil mal EINE waagerechte Maske" stimmt an der
   Unterkante einer Sektion, oben ist der Entwurf breiter. Der Fehlbetrag laeuft
   bis rund 550 px unter die Kante aus und ist an der Unterkante von s06 (Naht
   zu s07, dort 0,7 Stufen) wieder verschwunden.

   Die Empfaengerebene dafuer stand seit dem 06.08. schon hier, war aber nie zu
   sehen: mit z-index -1 liegt sie hinter dem Seitenhintergrund .lvf-page. Sie
   bekommt jetzt z-index 0, ihre Hoehe wird auf den gemessenen Auslauf gezogen
   und ihre Deckkraft von 0,70 auf die nachgerechneten 0,095 gesetzt.

   ERGEBNIS, erste Zeile von s06, Blaukanal:
     x             0     40     80    120    160    220    300    380
     vorher      174    131     95     66     45     32     24      0
     nachher     182    143    110     84     61     38     26      5
     Entwurf     178    143    110     84     60     36     20     10
   Zusammen mit der Anhebung der Unterkante von s05 (siehe dort) faellt der
   Sprung an der Naht von 3,0 auf 1,7 Stufen, Entwurf 0,6. Die Naht zu s07 bei
   y 5455 bleibt unveraendert bei 0,7, die Ebene endet 250 px darueber.
   ========================================================================= */
@media (min-width: 1024px) {
  .lvf-s06::before {
    height: 560px;
    z-index: 0;
    background:
      radial-gradient(420px 560px at 0% 0%,
        rgba(3, 163, 255, 0.095) 0%,
        rgba(3, 163, 255, 0.092) 30%,
        rgba(3, 163, 255, 0.067) 40%,
        rgba(3, 163, 255, 0.033) 55%,
        rgba(3, 163, 255, 0.015) 75%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(420px 560px at 100% 0%,
        rgba(3, 163, 255, 0.095) 0%,
        rgba(3, 163, 255, 0.092) 30%,
        rgba(3, 163, 255, 0.067) 40%,
        rgba(3, 163, 255, 0.033) 55%,
        rgba(3, 163, 255, 0.015) 75%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(900px 560px at 50% 0%,
        rgba(3, 163, 255, 0.016) 0%,
        rgba(3, 163, 255, 0.015) 60%,
        rgba(3, 163, 255, 0) 100%);
  }
}

/* ===== s07 ===== */
/* ============================================================
   s07 - Videos + Testimonials
   Desktop-Referenz: Frame 1760, Content-Spalte 1240 (x 260..1500)
   Mobile-Referenz:  Frame 440
   Alle Masse, Farben, Radien, Schatten aus den Spec-Dateien
   s07-videos-testimonials-desktop.txt / -mobile.txt
   ============================================================ */

/* ---------- Sektion ---------------------------------------- */

.lvf-s07 {
  position: relative;
  isolation: isolate;
  /* Band 5450..7680, erster Inhalt 5527, letzter 7599 */
  padding-block: clamp(64px, 1.625vw + 56.85px, 77px) 80px;
}

.lvf-s07-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Grosse weichgezeichnete "Star"-Vektoren (Gradient Background) als Glow */
.lvf-s07-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Befund R3 (Desktop 3): der kraeftige blaue Sektions-Hintergrund fehlte
     (Randstreifen SOLL RGB(11,81,119) vs IST RGB(16,17,22), Flaechenmittel
     SOLL RGB(17,50,68) vs IST RGB(9,19,27)). Breite, weich auslaufende
     Wash-Ebenen unter den beiden Star-Blobs: an den Raendern am staerksten,
     zur Mitte hin abgeschwaecht, ohne harte Kanten. */
  background:
    radial-gradient(50% 65% at 0% 52%, rgba(12, 95, 140, 0.8) 0%, rgba(8, 60, 95, 0.42) 48%, rgba(4, 40, 65, 0) 100%),
    radial-gradient(50% 65% at 100% 48%, rgba(12, 95, 140, 0.8) 0%, rgba(8, 60, 95, 0.42) 48%, rgba(4, 40, 65, 0) 100%),
    radial-gradient(75% 85% at 50% 58%, rgba(8, 52, 80, 0.5) 0%, rgba(6, 38, 60, 0.22) 55%, rgba(4, 30, 50, 0) 100%);
}

.lvf-s07-glow::before,
.lvf-s07-glow::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 62%;
  border-radius: 50%;
  filter: blur(90px);
}

/* Befund R2: Soll zeigt einen kraeftigen Glow (unten links bis
   weiss-blau aufgehellt), der Ist war deutlich zu dunkel. Deckkraft
   der Stops um ~35 Prozentpunkte angehoben, Auslauf bleibt weich. */
.lvf-s07-glow::before {
  left: -30%;
  top: 6%;
  width: 58%;
  height: 42%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0, 162, 255, 0.38) 0%,
    rgba(3, 70, 110, 0.3) 48%,
    rgba(4, 48, 74, 0.18) 70%,
    rgba(4, 48, 74, 0) 100%);
}

.lvf-s07-glow::after {
  right: -30%;
  top: 44%;
  width: 58%;
  height: 42%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0, 162, 255, 0.34) 0%,
    rgba(3, 70, 110, 0.28) 48%,
    rgba(4, 48, 74, 0.16) 70%,
    rgba(4, 48, 74, 0) 100%);
}

.lvf-s07-main {
  position: relative;
  z-index: 1;
}

/* ---------- Kopfbloecke ------------------------------------ */

.lvf-s07-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lvf-s07-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 21px;
  padding: 7px 24px;
  border: 1px solid transparent;
  border-radius: 78px;
  background:
    linear-gradient(#00121c, #00121c) padding-box,
    linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%) border-box;
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

.lvf-s07-head--testimonials .lvf-s07-badge {
  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%) border-box;
}

/* Befund 17 (pruefung/home-s05-s07.md): Figma-Frame der Plakette "Testimonials"
   ist 148px breit, aus Text+Polsterung ergeben sich nur 134.7px (nachgemessen
   1760px). Die erste Plakette "Words from Traders" trifft mit 189px gegen
   188px Soll schon ohne Eingriff. Nur auf Breiten ab 1024px gesetzt, weil
   fuer Tablet/Mobil kein eigener Figma-Beleg fuer diesen Wert vorliegt und
   die kleinere Schrift dort sonst unnoetig viel Luft in der Pille liesse. */
@media (min-width: 1024px) {
  .lvf-s07-head--testimonials .lvf-s07-badge {
    min-width: 148px;
  }
}

.lvf-s07-badge-text {
  font-family: var(--lvf-font-display);
  font-weight: 400;
  font-size: clamp(11px, 0.375vw + 9.35px, 14px);
  line-height: 1.23;
  letter-spacing: 0.06em;
  color: var(--lvf-white);
}

.lvf-s07-title {
  /* 65px w500 lh60.5 ls-1.3 / mobil 48px lh45 ls-0.96, Gradient-Text */
  margin: -8px 0 25px;
  font-family: var(--lvf-font-display);
  font-weight: 500;
  font-size: clamp(48px, 2.125vw + 38.65px, 65px);
  line-height: 0.93;
  letter-spacing: -0.02em;
  background-image: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-fill-color: transparent;
}

/* Blauer Akzent im Titel ("Own Words" / "Trader Feedback"). Befund 16
   (pruefung/home-s05-s07.md): Figma setzt hier per styleOverrideTable
   fontWeight 600, ohne das Gewicht war die Zeile nachweisbar zu duenn
   (Own Words 336px Soll gegen 327px Ist, Stegbreite 9-11px gegen 7px). */
.lvf-s07-title-accent {
  font-weight: 600;
  background-image: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: #00a2ff;
  -webkit-text-fill-color: transparent;
}

.lvf-s07-sub {
  /* Spec-Textbox ist 656px; etwas Luft, damit die Zeile nicht umbricht */
  max-width: 720px;
  font-family: var(--lvf-font-display);
  font-weight: 425;
  font-size: clamp(13px, 0.625vw + 10.25px, 18px);
  line-height: 1.334;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Video-Grid ------------------------------------- */

.lvf-s07-videos {
  margin-top: clamp(46px, 4.875vw + 24.55px, 85px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6px;
  row-gap: 10px;
}

/* Mobile-Duplikate der kleinen Kacheln (Design zeigt 2 identische Reihen);
   doppelte Klasse schlaegt die spaetere .lvf-s07-vcard-Basisregel */
@media (min-width: 768px) {
  .lvf-s07-vcard--dup.lvf-s07-vcard--dup,
  .lvf-s07-marquee--m4 {
    display: none;
  }
}

/* Wrapper loesen sich unterhalb Desktop auf, damit alle Karten
   in ein gemeinsames Raster fliessen */
.lvf-s07-vside,
.lvf-s07-vgrid {
  display: contents;
}

.lvf-s07-vcard--main {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .lvf-s07-videos {
    /* 764 + 20 + 364 = 1148, zentriert in der 1240er Spalte */
    grid-template-columns: 764fr 364fr;
    column-gap: 20px;
    row-gap: 20px;
    max-width: 1148px;
    margin-inline: auto;
  }

  .lvf-s07-vcard--main {
    grid-column: 1;
    grid-row: 1;
  }

  .lvf-s07-vside {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
  }

  .lvf-s07-vgrid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: 13.33px;
  }
}

/* ---------- Video-Karte ------------------------------------
   Alle Overlay-Masse sind Prozent bzw. cqw der Kartenbreite.
   Referenz ist die grosse Karte (764 x 429); die Spec skaliert
   alle kleineren Karten exakt proportional (364, 277, 380, 92).
   ----------------------------------------------------------- */

.lvf-s07-vcard {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  background: #05060f;
  color: var(--lvf-white);
}

.lvf-s07-vcard--main {
  aspect-ratio: 764 / 429;
  border-radius: 23px;
}

.lvf-s07-vcard--med {
  aspect-ratio: 364 / 205;
  border-radius: 11px;
}

.lvf-s07-vcard--small {
  aspect-ratio: 277 / 156;
  border-radius: 8px;
}

/* Die drei Videokarten sind <a>-Elemente. Elementors
   ".elementor a { box-shadow: none }" (0-1-1) hat ihre Schlagschatten
   gelöscht, die Karten standen ohne Absetzung auf dem Grund. Nur der
   Schatten wandert deshalb in Regeln mit zwei Klassen (0-2-0). */
.lvf-page .lvf-s07-vcard--main {
  box-shadow:
    0 17px 37px rgba(0, 0, 0, 0.1),
    0 66px 66px rgba(0, 0, 0, 0.09),
    0 149px 90px rgba(0, 0, 0, 0.05);
}
.lvf-page .lvf-s07-vcard--med {
  box-shadow:
    0 8px 17px rgba(0, 0, 0, 0.1),
    0 32px 32px rgba(0, 0, 0, 0.09),
    0 71px 43px rgba(0, 0, 0, 0.05);
}
.lvf-page .lvf-s07-vcard--small {
  box-shadow:
    0 6px 13px rgba(0, 0, 0, 0.1),
    0 24px 24px rgba(0, 0, 0, 0.09),
    0 54px 33px rgba(0, 0, 0, 0.05);
}

/* Innenkante: 0.5px Verlauf #00a2ff -> transparent */
.lvf-s07-vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #00a2ff 0%, rgba(0, 162, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.lvf-s07-vcard .lvf-s07-vthumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.lvf-s07-vcard:hover .lvf-s07-vthumb,
.lvf-s07-vcard:focus-visible .lvf-s07-vthumb {
  transform: scale(1.03);
}

.lvf-s07-vshade {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* 131 / 429 */
.lvf-s07-vshade--top {
  top: 0;
  height: 30.536%;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

/* 150 / 429; im Design dunkelt die Karte nach UNTEN hin ab
   (Soll-Render: $2,100 bleibt lesbar, Leiste liegt auf Schwarz) */
.lvf-s07-vshade--bottom {
  bottom: 0;
  height: 34.965%;
  background: linear-gradient(0deg, #000000 16.917%, rgba(0, 0, 0, 0) 100%);
}

/* Kanal-Zeile oben links: 16/764 links, 16/429 oben */
.lvf-s07-vmeta {
  position: absolute;
  left: 2.0942%;
  top: 3.7296%;
  right: 7.0681%;
  display: flex;
  align-items: center;
  gap: 1.5707cqw;
  min-width: 0;
}

.lvf-s07-vcard .lvf-s07-vavatar {
  flex: 0 0 auto;
  width: 5.7592cqw;
  height: 5.7592cqw;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

.lvf-s07-vmeta-text {
  display: flex;
  flex-direction: column;
  gap: 0.2618cqw;
  min-width: 0;
}

.lvf-s07-vtitle {
  font-family: var(--lvf-font-mono-alt);
  font-weight: 600;
  font-size: max(11px, 2.6178cqw);
  line-height: 1.18;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lvf-s07-vchannel {
  font-family: var(--lvf-font-mono-alt);
  font-weight: 400;
  font-size: max(10px, 1.5707cqw);
  line-height: 1.17;
  letter-spacing: -0.02em;
}

/* 4px waere unleserlich - auf den kleinen Kacheln entfaellt die Kanalzeile */
.lvf-s07-vcard--small .lvf-s07-vchannel {
  display: none;
}

/* Play-Overlay, exakt mittig (72 x 51 auf 764) */
.lvf-s07-vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.4241cqw;
  aspect-ratio: 72 / 51;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.lvf-s07-vplay-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.lvf-s07-vcard:hover .lvf-s07-vplay,
.lvf-s07-vcard:focus-visible .lvf-s07-vplay {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Untere Leiste: links 16/764, rechts 54/764, unten 38/429 */
.lvf-s07-vbar {
  position: absolute;
  left: 2.0942%;
  right: 7.0681%;
  bottom: 8.8578%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.lvf-s07-vtools {
  display: flex;
  align-items: center;
  gap: 2.0942cqw;
  padding: 1.0471cqw;
  border-radius: 1005px;
  background: rgba(0, 0, 0, 0.2);
}

.lvf-s07-vtool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.8063cqw;
  height: 6.8063cqw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}

.lvf-s07-vtool-svg {
  display: block;
  width: 4.712cqw;
  height: 4.712cqw;
  color: var(--lvf-white);
}

.lvf-s07-vwatch {
  display: flex;
  align-items: center;
  gap: 1.0471cqw;
  padding: 2.6178cqw 3.1414cqw;
  border-radius: 1005px;
  background: rgba(0, 0, 0, 0.5);
}

.lvf-s07-vwatch-label {
  font-family: var(--lvf-font-mono-alt);
  font-weight: 500;
  font-size: 3.1414cqw;
  line-height: 1.17;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.lvf-s07-ytmark {
  display: flex;
  align-items: center;
  gap: 0.65cqw;
}

.lvf-s07-ytbadge {
  display: block;
  width: 5.2356cqw;
  height: 3.6649cqw;
}

.lvf-s07-ytword {
  font-family: var(--lvf-font-alt);
  font-weight: 800;
  font-size: 3cqw;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* ---------- CTA "Watch Interviews on YouTube" --------------- */

.lvf-s07-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 1.75vw + 24.3px, 46px);
}

/* Abstand vor dem Testimonials-Kopf: mobil 167 (nach dem Video-Raster),
   Desktop 173 (nach dem CTA) laut Spec */
.lvf-s07-head--testimonials {
  margin-top: clamp(167px, 0.4545vw + 165px, 173px);
}

.lvf-s07-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  background:
    linear-gradient(134deg, rgba(110, 202, 255, 0.1) 0%, rgba(0, 128, 202, 0.1) 100%),
    rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(41px);
          backdrop-filter: blur(41px);
  transition: transform 0.2s ease, filter 0.2s ease;
}
/* Der sichtbare Knopf ist 40,8 px hoch. Die unsichtbare Trefferfläche
   erreicht 44 px, ohne das abgenommene Layout zu verändern. */
.lvf-s07-cta::before {
  content: "";
  position: absolute;
  inset: calc((100% - 44px) / 2) 0;
}
/* <a>, deshalb zwei Klassen gegen ".elementor a { box-shadow: none }". */
.lvf-page .lvf-s07-cta {
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

.lvf-s07-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.lvf-s07-cta-icon {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 11px;
}

.lvf-s07-cta-text {
  font-family: var(--lvf-font-display);
  font-weight: 400;
  font-size: 13.71px;
  line-height: 1.23;
  letter-spacing: 0.02em;
  background-image: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--lvf-blue);
  -webkit-text-fill-color: transparent;
}

/* Das Wort "YouTube" ist im Design rot (~#ff0033), Rest bleibt blauer Verlauf */
.lvf-s07-cta-yt {
  background-image: none;
  color: #ff0033;
  -webkit-text-fill-color: #ff0033;
}

/* ---------- Testimonial-Marquee ----------------------------- */

.lvf-s07-marquees {
  --lvf-s07-gap: clamp(7px, 0.5vw + 4.8px, 11px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(46px, 4.875vw + 24.55px, 85px);
}

.lvf-s07-marquee {
  overflow: hidden;
}

.lvf-s07-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--lvf-s07-gap);
  animation: lvf-s07-scroll var(--lvf-s07-dur, 60s) linear infinite;
  will-change: transform;
}

@keyframes lvf-s07-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--lvf-s07-gap) / 2), 0, 0); }
}

.lvf-s07-marquee[data-lvf-s07-dir="right"] .lvf-s07-track {
  animation-direction: reverse;
}

.lvf-s07-marquee:hover .lvf-s07-track,
.lvf-s07-marquee:focus-within .lvf-s07-track {
  animation-play-state: paused;
}

/* ---------- Testimonial-Karte ------------------------------
   Die font-size traegt die gesamte Skalierung: 14px auf Desktop,
   9px auf Mobil - alle Innenmasse sind em-Vielfache davon.
   ----------------------------------------------------------- */

.lvf-s07-tcard {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5714em;
  width: clamp(187px, 6.875vw + 156.75px, 242px);
  height: clamp(164px, 9.25vw + 123.3px, 238px);
  padding: 1.4286em 1em;
  border-radius: 0.7857em;
  font-size: clamp(12px, 0.34vw + 10.5px, 14px);
  background: rgba(0, 0, 0, 0.75);
  /* Figma verlangt backdrop-blur(251px) auf allen 28 Karten. Frueher stand
     hier 24px als ungemessene Kostenabwaegung. Heute nachgemessen:
     Nach fragment.js-Klonen stehen 204 .lvf-s07-tcard im DOM (4 Laufbaender,
     Dauerschleife per CSS-Transform). Drei unabhaengige Messverfahren
     (rAF-Frametiming, CDP-Trace auf RasterTask/Paint/GPUTask,
     Page.startScreencast-Framerate, je 1760px Desktop, Karten im Sichtbereich
     laufend animiert) fanden zwischen blur(24px) und blur(251px) keinen
     Unterschied ausserhalb der Messtoleranz: Screencast-Framerate 24px vs
     251px ueber je 3 Wiederholungen 53-58 vs 45-58 Bilder/s, RasterTask+
     Paint+GPUTask-Summe ueber 3s Fenster 1.9ms vs 1.6ms. Kein Fall unter
     30fps, kein Hinweis auf einen Kostensprung durch den Radius selbst; die
     eigentliche Kostenstelle ist die Zahl der gleichzeitig animierten
     Karten, nicht der Blur-Radius. Gemessen im Headless-Chrome mit
     Software-Rendering (SwiftShare, keine echte GPU) als Worst-Case-Naeherung,
     echte Geraete duerften guenstiger liegen.
     Sichtprobe an der transparentesten Kartenvariante (--e, 10% Deckkraft):
     bei 24px ein harter, kontrastreicher Aufhellfleck oben links, bei 251px
     ein gleichmaessig weicher Verlauf wie im Entwurf. An den deckenden
     Varianten (--a/--b/--c/--d, 75-98% Deckkraft) und an --fill (voll
     deckend) ist zwischen 24px und 251px im Screenshot kein Unterschied
     erkennbar, dort war die alte Kostenabwaegung ohnehin gegenstandslos.
     Fazit: 251px wie im Entwurf, kein Kompromisswert. */
  -webkit-backdrop-filter: blur(251px);
  backdrop-filter: blur(251px);
}

.lvf-s07-marquee--lg .lvf-s07-tcard {
  width: clamp(187px, 15.5vw + 118.8px, 311px);
  height: clamp(164px, 9.375vw + 122.75px, 239px);
}

.lvf-s07-tcard--a { background: rgba(0, 12, 20, 0.98); }
.lvf-s07-tcard--b { background: rgba(0, 0, 0, 0.75); }
.lvf-s07-tcard--c { background: #000c14; }
.lvf-s07-tcard--d { background: rgba(0, 12, 20, 0.9); }
.lvf-s07-tcard--e { background: rgba(0, 0, 0, 0.1); }
.lvf-s07-tcard--f { background: #000000; }

/* Genau eine Karte ist im Design flaechig mit blauem Verlauf gefuellt
   (Farbwerte aus dem Soll-Render gemessen: hell oben links -> #000c14 unten rechts) */
.lvf-s07-tcard--fill {
  background: linear-gradient(150deg,
    #81bed9 0%,
    #227297 15%,
    #136187 33%,
    #0b5173 50%,
    #064668 65%,
    #033856 88%,
    #000c14 100%);
}

.lvf-s07-tcard--edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #00a2ff 0%, rgba(0, 162, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.lvf-s07-stars {
  display: flex;
  gap: 0.1786em;
}

.lvf-s07-star {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

.lvf-s07-quote {
  font-family: var(--lvf-font-display);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4286;
  letter-spacing: 0.0307em;
  color: var(--lvf-white);
}

.lvf-s07-person {
  display: flex;
  align-items: center;
  gap: 0.2857em;
}

.lvf-s07-avatar {
  display: block;
  flex: 0 0 auto;
  width: 1.5714em;
  height: 1.5714em;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d9d9;
}

.lvf-s07-avatar .lvf-s07-avatar-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Fallback ohne Portraet: Initialen-Kreis */
.lvf-s07-avatar[data-initials]::after {
  content: attr(data-initials);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--lvf-font-alt);
  font-weight: 700;
  font-size: 0.6429em;
  letter-spacing: 0.02em;
  color: #05060f;
}

.lvf-s07-person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lvf-s07-name,
.lvf-s07-role {
  font-family: var(--lvf-font-alt);
  font-size: 1em;
  line-height: 1.3;
  color: var(--lvf-white);
}

.lvf-s07-name { font-weight: 700; }
.lvf-s07-role { font-weight: 500; }

/* ---------- Fokus ------------------------------------------ */

.lvf-s07-vcard:focus-visible,
.lvf-s07-cta:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: 3px;
}

/* ---------- Mobil (< 768, Design 440) ----------------------- */

@media (max-width: 767px) {
  .lvf-s07-inner {
    /* Mobile-Spec: Inhalt bei x=30, Shell-Container liefert 20 */
    padding-inline: 10px;
  }

  /* Desktop-Wash (Befund R3) nur abgeschwaecht uebernehmen: mobil gab es
     keinen Hintergrund-Befund, volle Staerke waere hier zu blau */
  .lvf-s07-glow {
    background:
      radial-gradient(50% 65% at 0% 52%, rgba(12, 95, 140, 0.45) 0%, rgba(8, 60, 95, 0.24) 48%, rgba(4, 40, 65, 0) 100%),
      radial-gradient(50% 65% at 100% 48%, rgba(12, 95, 140, 0.45) 0%, rgba(8, 60, 95, 0.24) 48%, rgba(4, 40, 65, 0) 100%),
      radial-gradient(75% 85% at 50% 58%, rgba(8, 52, 80, 0.28) 0%, rgba(6, 38, 60, 0.12) 55%, rgba(4, 30, 50, 0) 100%);
  }

  .lvf-s07-badge {
    padding: 6px 25px;
  }

  .lvf-s07-title {
    margin: -6px 0 12px;
  }

  .lvf-s07-sub {
    max-width: 315px;
    line-height: 1.54;
    letter-spacing: 0.03em;
  }

  /* Mobile-Spec: 4 Kacheln je Reihe, Spaltenabstand 4, Hauptkarte->Reihe 7 */
  .lvf-s07-videos {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4px;
    row-gap: 7px;
  }

  .lvf-s07-vcard--main {
    border-radius: 11px;
  }

  /* Die beiden mittleren Karten kommen im Mobile-Design nicht vor;
     stattdessen zwei identische Reihen aus den vier kleinen Kacheln */
  .lvf-s07-vcard--med {
    display: none;
  }

  .lvf-s07-vcard--small {
    border-radius: 3px;
  }

  /* Reihenabstand der Kachelreihen laut Spec 14 (Grid-Gap 7 + 7) */
  .lvf-s07-vcard--dup {
    margin-top: 7px;
  }

  /* CTA existiert im Mobile-Design nicht */
  .lvf-s07-cta-wrap {
    display: none;
  }

  /* Mobile sind die Player im Design randlos (Spec: 0.06-0.25px, unsichtbar) */
  .lvf-s07-vcard::after {
    display: none;
  }

  /* Mobile-Spec: statisches, spaltenbuendiges Raster mit 28px Einzug links,
     alle Karten mit dezentem grauem 1px-Rand, keine blauen Rahmen */
  .lvf-s07-marquees {
    gap: 7px;
    padding-left: 28px;
  }

  .lvf-s07-track {
    animation: none;
    transform: none;
  }

  .lvf-s07-tcard {
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .lvf-s07-tcard--edge::after {
    display: none;
  }

  /* Die blau gefuellte Karte gibt es nur im Desktop-Design */
  .lvf-s07-tcard--fill {
    background: rgba(0, 0, 0, 0.1);
  }
}

/* Unter 385 px werden die vier proportionalen Videokacheln niedriger als
   44 px. Nur ihre unsichtbare Trefferfläche wächst in den freien
   Reihenabstand, das gemessene Kartenformat bleibt unverändert. */
@media (max-width: 384px) {
  .lvf-s07-vcard--small { overflow: visible; }
  .lvf-s07-vcard--small .lvf-s07-vthumb { border-radius: inherit; }
  .lvf-s07-vcard--small::after {
    display: block;
    inset: calc((100% - 44px) / 2) 0;
    padding: 0;
    background: none;
    -webkit-mask: none;
    mask: none;
    pointer-events: auto;
  }
}

/* ---------- Bewegung reduziert ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lvf-s07-track {
    animation: none;
    transform: none;
  }

  .lvf-s07-marquee {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .lvf-s07-vcard:hover .lvf-s07-vthumb,
  .lvf-s07-vcard:focus-visible .lvf-s07-vthumb {
    transform: none;
  }

  .lvf-s07-vcard:hover .lvf-s07-vplay,
  .lvf-s07-vcard:focus-visible .lvf-s07-vplay {
    transform: translate(-50%, -50%);
  }
}

/* ---------- Fallback ohne Container-Queries ------------------
   Ohne cqw liesse sich die Overlay-Groesse nicht an die
   Kartenbreite koppeln; dann bleiben Thumbnail und Play-Badge.
   ------------------------------------------------------------ */

@supports not (container-type: inline-size) {
  .lvf-s07-vmeta,
  .lvf-s07-vbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lvf-s07-vplay {
    width: 12%;
  }
}

/* ================= Durchlaufende Randfahne, 11.08.2026 =====================
   Im Mockup ist das seitliche Leuchten EIN Feld ueber die ganze Seite, nicht
   ein Schein je Abschnitt. Gemessen im Soll-Vollbild bei x 0..6: der Farbton
   ist ueberall rgb(3,163,255) (G/B = 0,64 in allen ruhigen Zeilen), nur die
   Deckkraft aendert sich mit der Hoehe. Die waagerechte Abnahme ist ebenfalls
   ueberall gleich (x 100 noch 45 %, x 200 noch 18 %, x 300 noch 8 %).
   Deshalb: senkrechtes Profil als Farbverlauf in px ab Sektionsoberkante,
   waagerechte Abnahme als Maske. Die letzte Marke einer Sektion ist die erste
   der naechsten, dadurch entsteht an den Grenzen kein Sprung mehr.
   Nur Desktop; unter 1024 px bleibt alles wie bisher.
   ========================================================================= */
@media (min-width: 1024px) {
  /* Vorher: breite Wash-Ebenen ueber die ganze Sektion. Im Entwurf ist die
     Mitte hier schwarz (Soll y 8300 x 440..1210: 0; y 5500 Mitte: 0), live lag
     dort ein durchgehender blauer Dunst von 22 bis 35. Der Schein sitzt
     ausschliesslich am Rand. */
  .lvf-s07-glow {
    background: none;
  }

  .lvf-s07-glow::before,
  .lvf-s07-glow::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    filter: none;
  }

  /* Blaue Fahne. Soll x0..6: Oberkante y 5450 (2,66,106), Tiefpunkt y 6300
     (2,34,55), danach steigend bis y 7100 (weiss). */
  .lvf-s07-glow::before {
    background: linear-gradient(180deg,
      rgba(3, 163, 255, 0.409) 0px,
      rgba(3, 163, 255, 0.395) 40px,
      rgba(3, 163, 255, 0.384) 80px,
      rgba(3, 163, 255, 0.373) 120px,
      rgba(3, 163, 255, 0.364) 160px,
      rgba(3, 163, 255, 0.35) 200px,
      rgba(3, 163, 255, 0.339) 241px,
      rgba(3, 163, 255, 0.329) 281px,
      rgba(3, 163, 255, 0.316) 321px,
      rgba(3, 163, 255, 0.31) 361px,
      rgba(3, 163, 255, 0.298) 401px,
      rgba(3, 163, 255, 0.285) 441px,
      rgba(3, 163, 255, 0.277) 481px,
      rgba(3, 163, 255, 0.267) 521px,
      rgba(3, 163, 255, 0.26) 561px,
      rgba(3, 163, 255, 0.247) 601px,
      rgba(3, 163, 255, 0.231) 641px,
      rgba(3, 163, 255, 0.229) 682px,
      rgba(3, 163, 255, 0.217) 722px,
      rgba(3, 163, 255, 0.213) 762px,
      rgba(3, 163, 255, 0.21) 802px,
      rgba(3, 163, 255, 0.208) 842px,
      rgba(3, 163, 255, 0.211) 882px,
      rgba(3, 163, 255, 0.211) 922px,
      rgba(3, 163, 255, 0.222) 962px,
      rgba(3, 163, 255, 0.24) 1002px,
      rgba(3, 163, 255, 0.262) 1042px,
      rgba(3, 163, 255, 0.292) 1082px,
      rgba(3, 163, 255, 0.334) 1123px,
      rgba(3, 163, 255, 0.382) 1163px,
      rgba(3, 163, 255, 0.433) 1203px,
      rgba(3, 163, 255, 0.489) 1243px,
      rgba(3, 163, 255, 0.555) 1283px,
      rgba(3, 163, 255, 0.621) 1323px,
      rgba(3, 163, 255, 0.69) 1363px,
      rgba(3, 163, 255, 0.752) 1403px,
      rgba(3, 163, 255, 0.816) 1443px,
      rgba(3, 163, 255, 0.866) 1483px,
      rgba(3, 163, 255, 0.916) 1523px,
      rgba(3, 163, 255, 0.947) 1563px,
      rgba(3, 163, 255, 0.968) 1604px,
      rgba(3, 163, 255, 0.983) 1644px,
      rgba(3, 163, 255, 0.991) 1684px,
      rgba(3, 163, 255, 0.992) 1724px,
      rgba(3, 163, 255, 0.994) 1764px,
      rgba(3, 163, 255, 0.996) 1804px,
      rgba(3, 163, 255, 0.997) 1844px,
      rgba(3, 163, 255, 0.999) 1884px,
      rgba(3, 163, 255, 1.0) 1924px,
      rgba(3, 163, 255, 1.0) 1964px,
      rgba(3, 163, 255, 1.0) 2004px,
      rgba(3, 163, 255, 1.0) 2045px,
      rgba(3, 163, 255, 1.0) 2085px,
      rgba(3, 163, 255, 1.0) 2125px,
      rgba(3, 163, 255, 1.0) 2165px,
      rgba(3, 163, 255, 1.0) 2205px,
      rgba(3, 163, 255, 1.0) 2234px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }

  /* Weisser Randschein unter dem Laufband. Der Entwurf hat unten links und
     unten rechts einen sehr hellen Saum (Soll y 7605..7650 x0..40: 251 gegen
     Ist 21). Hinter den Laufbandreihen ist der Rand verdeckt, gemessen wurde
     deshalb in den Luecken: y 7105 (146,227,254), y 7356 (255,255,255),
     y 7602 (255,255,255); dazwischen interpoliert. */
  .lvf-s07-glow::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.008) 0px,
      rgba(255, 255, 255, 0.008) 40px,
      rgba(255, 255, 255, 0.008) 80px,
      rgba(255, 255, 255, 0.008) 120px,
      rgba(255, 255, 255, 0.007) 160px,
      rgba(255, 255, 255, 0.008) 200px,
      rgba(255, 255, 255, 0.008) 241px,
      rgba(255, 255, 255, 0.008) 281px,
      rgba(255, 255, 255, 0.01) 321px,
      rgba(255, 255, 255, 0.008) 361px,
      rgba(255, 255, 255, 0.009) 401px,
      rgba(255, 255, 255, 0.008) 441px,
      rgba(255, 255, 255, 0.009) 481px,
      rgba(255, 255, 255, 0.01) 521px,
      rgba(255, 255, 255, 0.008) 561px,
      rgba(255, 255, 255, 0.009) 601px,
      rgba(255, 255, 255, 0.008) 641px,
      rgba(255, 255, 255, 0.008) 682px,
      rgba(255, 255, 255, 0.01) 722px,
      rgba(255, 255, 255, 0.008) 762px,
      rgba(255, 255, 255, 0.008) 802px,
      rgba(255, 255, 255, 0.011) 842px,
      rgba(255, 255, 255, 0.01) 882px,
      rgba(255, 255, 255, 0.008) 922px,
      rgba(255, 255, 255, 0.009) 962px,
      rgba(255, 255, 255, 0.009) 1002px,
      rgba(255, 255, 255, 0.01) 1042px,
      rgba(255, 255, 255, 0.01) 1082px,
      rgba(255, 255, 255, 0.006) 1123px,
      rgba(255, 255, 255, 0.007) 1163px,
      rgba(255, 255, 255, 0.007) 1203px,
      rgba(255, 255, 255, 0.007) 1243px,
      rgba(255, 255, 255, 0.004) 1283px,
      rgba(255, 255, 255, 0.001) 1323px,
      rgba(255, 255, 255, 0.002) 1363px,
      rgba(255, 255, 255, 0.005) 1403px,
      rgba(255, 255, 255, 0.001) 1443px,
      rgba(255, 255, 255, 0.007) 1483px,
      rgba(255, 255, 255, 0.017) 1523px,
      rgba(255, 255, 255, 0.074) 1563px,
      rgba(255, 255, 255, 0.219) 1604px,
      rgba(255, 255, 255, 0.467) 1644px,
      rgba(255, 255, 255, 0.632) 1684px,
      rgba(255, 255, 255, 0.697) 1724px,
      rgba(255, 255, 255, 0.762) 1764px,
      rgba(255, 255, 255, 0.827) 1804px,
      rgba(255, 255, 255, 0.892) 1844px,
      rgba(255, 255, 255, 0.958) 1884px,
      /* Schluss an der UNTERKANTE verankert, 12.08.2026.
         IST vorher: bei 1024 px sprang die Naht s07/s08 um 21,4 Stufen, bei
         1760 px nur um 1,8. SOLL 1,5.
         BEGRUENDUNG: die Marken sind Abstaende ab der Sektionsoberkante, der
         Schnitt lag fest bei 2155 px. Die Sektion ist bei 1024 px aber nur
         2046 px hoch, der Schnitt lag also ausserhalb des Elements. Der Saum
         lief mit voller Deckung bis in die Naht, wo ihn im Entwurf laengst
         der Keil aus .lvf-s07::after abloest. 2155 ist die Unterkante des
         Inhaltskastens (padding-bottom 80px), deshalb calc(100% - 80px).
         Bei 1760 px ergeben die drei calc() exakt 1924, 2154 und 2155 - die
         Darstellung dort ist unveraendert (nachgemessen 1,8 vor und nach). */
      rgba(255, 255, 255, 1.0) calc(100% - 311px),
      /* Ab hier uebernimmt der Keil in .lvf-s07::after, siehe den Block
         "Naht zu s08" am Dateiende. Genau dort beginnt der Saum sichtbar zu
         werden, in Soll und Ist gleichermassen: der Weissanteil bei x40
         springt im Ist von 0,23 auf 0,96 (y 7609/7610), im Soll von 0,00 auf
         0,98 (y 7597/7598). Darueber deckt der Inhaltskasten, deshalb faellt
         der harte Schnitt nicht auf. */
      rgba(255, 255, 255, 1.0) calc(100% - 81px),
      rgba(255, 255, 255, 0) calc(100% - 80px));
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.953) 20px, rgba(0, 0, 0, 0.864) 40px, rgba(0, 0, 0, 0.693) 60px, rgba(0, 0, 0, 0.445) 80px, rgba(0, 0, 0, 0.23) 100px, rgba(0, 0, 0, 0.096) 120px, rgba(0, 0, 0, 0.033) 140px, rgba(0, 0, 0, 0.012) 160px, rgba(0, 0, 0, 0.0) 180px, rgba(0, 0, 0, 0.0) calc(100% - 180px), rgba(0, 0, 0, 0.012) calc(100% - 160px), rgba(0, 0, 0, 0.033) calc(100% - 140px), rgba(0, 0, 0, 0.096) calc(100% - 120px), rgba(0, 0, 0, 0.23) calc(100% - 100px), rgba(0, 0, 0, 0.445) calc(100% - 80px), rgba(0, 0, 0, 0.693) calc(100% - 60px), rgba(0, 0, 0, 0.864) calc(100% - 40px), rgba(0, 0, 0, 0.953) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.953) 20px, rgba(0, 0, 0, 0.864) 40px, rgba(0, 0, 0, 0.693) 60px, rgba(0, 0, 0, 0.445) 80px, rgba(0, 0, 0, 0.23) 100px, rgba(0, 0, 0, 0.096) 120px, rgba(0, 0, 0, 0.033) 140px, rgba(0, 0, 0, 0.012) 160px, rgba(0, 0, 0, 0.0) 180px, rgba(0, 0, 0, 0.0) calc(100% - 180px), rgba(0, 0, 0, 0.012) calc(100% - 160px), rgba(0, 0, 0, 0.033) calc(100% - 140px), rgba(0, 0, 0, 0.096) calc(100% - 120px), rgba(0, 0, 0, 0.23) calc(100% - 100px), rgba(0, 0, 0, 0.445) calc(100% - 80px), rgba(0, 0, 0, 0.693) calc(100% - 60px), rgba(0, 0, 0, 0.864) calc(100% - 40px), rgba(0, 0, 0, 0.953) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }
}

/* ==========================================================================
   Effektabgleich 11.08.2026, gemessen gegen referenz-neu/soll/home-aus-vollbild
   und gegengeprueft an home-aus-schnipseln. Nur Desktop; der Mobilzweig bleibt
   unberuehrt. Die Regeln stehen bewusst hinter dem Block der Randfahne, damit
   sie ihn bei gleicher Spezifitaet schlagen.
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- Waagerechte Abnahme der blauen Randfahne -------------------------------
     Die Maske lief bis dahin rund 0,04 zu breit. Blaukanal am Rand auf 100
     gesetzt, gemessen in drei inhaltsfreien Hoehen (t = Abstand zur
     Sektionsoberkante 5455):

       x            20    40    60    80   100   140   180   220   260   300
       SOLL t=20    88    74    63    51    41    25    17    11     8     4
       SOLL t=260   87    74    59    47    36    22    14     9     7     4
       SOLL t=1060  89    76    65    53    45    29    20    13     8     5
       Maske alt    87    75    64    54    45    31    21    16    12     8

     Neu sind die Sollmittel eingetragen. Nachgemessen bei t=20: x140 vorher
     (4,25,44) gegen SOLL (1,17,26), jetzt (5,23,40). */
  .lvf-s07-glow::before {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 0.88) 20px, rgba(0, 0, 0, 0.745) 40px,
      rgba(0, 0, 0, 0.625) 60px, rgba(0, 0, 0, 0.505) 80px, rgba(0, 0, 0, 0.41) 100px,
      rgba(0, 0, 0, 0.33) 120px, rgba(0, 0, 0, 0.257) 140px, rgba(0, 0, 0, 0.21) 160px,
      rgba(0, 0, 0, 0.169) 180px, rgba(0, 0, 0, 0.14) 200px, rgba(0, 0, 0, 0.112) 220px,
      rgba(0, 0, 0, 0.094) 240px, rgba(0, 0, 0, 0.076) 260px, rgba(0, 0, 0, 0.058) 280px,
      rgba(0, 0, 0, 0.042) 300px, rgba(0, 0, 0, 0.036) 320px, rgba(0, 0, 0, 0.031) 340px,
      rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.012) 380px, rgba(0, 0, 0, 0) 400px,
      rgba(0, 0, 0, 0) calc(100% - 400px),
      rgba(0, 0, 0, 0.012) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px),
      rgba(0, 0, 0, 0.031) calc(100% - 340px), rgba(0, 0, 0, 0.036) calc(100% - 320px),
      rgba(0, 0, 0, 0.042) calc(100% - 300px), rgba(0, 0, 0, 0.058) calc(100% - 280px),
      rgba(0, 0, 0, 0.076) calc(100% - 260px), rgba(0, 0, 0, 0.094) calc(100% - 240px),
      rgba(0, 0, 0, 0.112) calc(100% - 220px), rgba(0, 0, 0, 0.14) calc(100% - 200px),
      rgba(0, 0, 0, 0.169) calc(100% - 180px), rgba(0, 0, 0, 0.21) calc(100% - 160px),
      rgba(0, 0, 0, 0.257) calc(100% - 140px), rgba(0, 0, 0, 0.33) calc(100% - 120px),
      rgba(0, 0, 0, 0.41) calc(100% - 100px), rgba(0, 0, 0, 0.505) calc(100% - 80px),
      rgba(0, 0, 0, 0.625) calc(100% - 60px), rgba(0, 0, 0, 0.745) calc(100% - 40px),
      rgba(0, 0, 0, 0.88) calc(100% - 20px), rgba(0, 0, 0, 1) 100%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 0.88) 20px, rgba(0, 0, 0, 0.745) 40px,
      rgba(0, 0, 0, 0.625) 60px, rgba(0, 0, 0, 0.505) 80px, rgba(0, 0, 0, 0.41) 100px,
      rgba(0, 0, 0, 0.33) 120px, rgba(0, 0, 0, 0.257) 140px, rgba(0, 0, 0, 0.21) 160px,
      rgba(0, 0, 0, 0.169) 180px, rgba(0, 0, 0, 0.14) 200px, rgba(0, 0, 0, 0.112) 220px,
      rgba(0, 0, 0, 0.094) 240px, rgba(0, 0, 0, 0.076) 260px, rgba(0, 0, 0, 0.058) 280px,
      rgba(0, 0, 0, 0.042) 300px, rgba(0, 0, 0, 0.036) 320px, rgba(0, 0, 0, 0.031) 340px,
      rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.012) 380px, rgba(0, 0, 0, 0) 400px,
      rgba(0, 0, 0, 0) calc(100% - 400px),
      rgba(0, 0, 0, 0.012) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px),
      rgba(0, 0, 0, 0.031) calc(100% - 340px), rgba(0, 0, 0, 0.036) calc(100% - 320px),
      rgba(0, 0, 0, 0.042) calc(100% - 300px), rgba(0, 0, 0, 0.058) calc(100% - 280px),
      rgba(0, 0, 0, 0.076) calc(100% - 260px), rgba(0, 0, 0, 0.094) calc(100% - 240px),
      rgba(0, 0, 0, 0.112) calc(100% - 220px), rgba(0, 0, 0, 0.14) calc(100% - 200px),
      rgba(0, 0, 0, 0.169) calc(100% - 180px), rgba(0, 0, 0, 0.21) calc(100% - 160px),
      rgba(0, 0, 0, 0.257) calc(100% - 140px), rgba(0, 0, 0, 0.33) calc(100% - 120px),
      rgba(0, 0, 0, 0.41) calc(100% - 100px), rgba(0, 0, 0, 0.505) calc(100% - 80px),
      rgba(0, 0, 0, 0.625) calc(100% - 60px), rgba(0, 0, 0, 0.745) calc(100% - 40px),
      rgba(0, 0, 0, 0.88) calc(100% - 20px), rgba(0, 0, 0, 1) 100%);
  }

  /* --- Weisser Saum unter dem Laufband ----------------------------------------
     Der Saum reichte nur 180 px nach innen, im Entwurf sind es rund 220.
     Weissanteil aus dem Rotkanal (Untergrund 3) in den beiden inhaltsfreien
     Zeilen unter dem Band, y7618..7650 und y7660..7688:

       x            40    60    80   100   120   140   160   180   200   220
       SOLL         0,96  0,94  0,89  0,79  0,60  0,37  0,19  0,07  0,02  0
       Maske alt    0,86  0,69  0,44  0,23  0,09  0,03  0,01  0     0     0

     Nachgemessen bei y7660..7688: x80 vorher (112,162,192) gegen SOLL
     (220,242,255), jetzt (225,244,254). */
  .lvf-s07-glow::after {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 0.985) 20px, rgba(0, 0, 0, 0.968) 40px,
      rgba(0, 0, 0, 0.945) 60px, rgba(0, 0, 0, 0.90) 80px, rgba(0, 0, 0, 0.80) 100px,
      rgba(0, 0, 0, 0.615) 120px, rgba(0, 0, 0, 0.385) 140px, rgba(0, 0, 0, 0.20) 160px,
      rgba(0, 0, 0, 0.085) 180px, rgba(0, 0, 0, 0.03) 200px, rgba(0, 0, 0, 0.008) 220px,
      rgba(0, 0, 0, 0) 240px,
      rgba(0, 0, 0, 0) calc(100% - 240px),
      rgba(0, 0, 0, 0.008) calc(100% - 220px), rgba(0, 0, 0, 0.03) calc(100% - 200px),
      rgba(0, 0, 0, 0.085) calc(100% - 180px), rgba(0, 0, 0, 0.20) calc(100% - 160px),
      rgba(0, 0, 0, 0.385) calc(100% - 140px), rgba(0, 0, 0, 0.615) calc(100% - 120px),
      rgba(0, 0, 0, 0.80) calc(100% - 100px), rgba(0, 0, 0, 0.90) calc(100% - 80px),
      rgba(0, 0, 0, 0.945) calc(100% - 60px), rgba(0, 0, 0, 0.968) calc(100% - 40px),
      rgba(0, 0, 0, 0.985) calc(100% - 20px), rgba(0, 0, 0, 1) 100%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 0.985) 20px, rgba(0, 0, 0, 0.968) 40px,
      rgba(0, 0, 0, 0.945) 60px, rgba(0, 0, 0, 0.90) 80px, rgba(0, 0, 0, 0.80) 100px,
      rgba(0, 0, 0, 0.615) 120px, rgba(0, 0, 0, 0.385) 140px, rgba(0, 0, 0, 0.20) 160px,
      rgba(0, 0, 0, 0.085) 180px, rgba(0, 0, 0, 0.03) 200px, rgba(0, 0, 0, 0.008) 220px,
      rgba(0, 0, 0, 0) 240px,
      rgba(0, 0, 0, 0) calc(100% - 240px),
      rgba(0, 0, 0, 0.008) calc(100% - 220px), rgba(0, 0, 0, 0.03) calc(100% - 200px),
      rgba(0, 0, 0, 0.085) calc(100% - 180px), rgba(0, 0, 0, 0.20) calc(100% - 160px),
      rgba(0, 0, 0, 0.385) calc(100% - 140px), rgba(0, 0, 0, 0.615) calc(100% - 120px),
      rgba(0, 0, 0, 0.80) calc(100% - 100px), rgba(0, 0, 0, 0.90) calc(100% - 80px),
      rgba(0, 0, 0, 0.945) calc(100% - 60px), rgba(0, 0, 0, 0.968) calc(100% - 40px),
      rgba(0, 0, 0, 0.985) calc(100% - 20px), rgba(0, 0, 0, 1) 100%);
  }

  /* --- Leuchtfeld hinter dem Laufband -----------------------------------------
     Die Randfahne allein trifft die obere Haelfte der Sektion, im unteren
     Drittel fehlte fast das ganze Feld: dort liegt im Entwurf ein breiter
     Schein, der bis in die Bildmitte reicht, dazu ein Kern direkt ueber dem
     Laufband. Gemessen in den inhaltsfreien Zeilen (Blaukanal):

       x                    40    80   140   220   300   400   520   640   760   880
       y6845..6872 SOLL    175   158   135   107    89    80    97   142   185   198
       y6845..6872 IST     150   113    71    43    30    15    15    15    15    15
       y7660..7688 SOLL    255   255   251   222   172   106    59    39    30    26
       y7660..7688 IST     245   192    93    53    35    15    15    15    15    15

     Der fehlende Anteil ist reines rgb(3,163,255): bei y6858 x880 ergibt
     Deckkraft 0,76 aus dem Blaukanal im Gruenkanal 126 gegen gemessene 127.
     Vier Ebenen: Kern und Auslauf mittig, seitlicher Schein auf Bandhoehe,
     Eckwaschungen unten. Mittlere Abweichung ueber 77 Messstellen in sieben
     Hoehen: 29,4 -> 6,4. */
  .lvf-s07-glow {
    background-image:
      radial-gradient(34% 13% at 50% 66.5%,
        rgba(3, 163, 255, 0.82) 0%,
        rgba(3, 163, 255, 0.78) 20%,
        rgba(3, 163, 255, 0.68) 35%,
        rgba(3, 163, 255, 0.52) 50%,
        rgba(3, 163, 255, 0.34) 65%,
        rgba(3, 163, 255, 0.18) 80%,
        rgba(3, 163, 255, 0.08) 90%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(40% 25% at 50% 77%,
        rgba(3, 163, 255, 0.45) 0%,
        rgba(3, 163, 255, 0.36) 22%,
        rgba(3, 163, 255, 0.24) 40%,
        rgba(3, 163, 255, 0.13) 58%,
        rgba(3, 163, 255, 0.06) 74%,
        rgba(3, 163, 255, 0.02) 88%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(21.6% 23% at 8.6% 72%,
        rgba(3, 163, 255, 0.62) 0%,
        rgba(3, 163, 255, 0.56) 16%,
        rgba(3, 163, 255, 0.46) 26%,
        rgba(3, 163, 255, 0.35) 42%,
        rgba(3, 163, 255, 0.25) 58%,
        rgba(3, 163, 255, 0.11) 79%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(21.6% 23% at 91.4% 72%,
        rgba(3, 163, 255, 0.62) 0%,
        rgba(3, 163, 255, 0.56) 16%,
        rgba(3, 163, 255, 0.46) 26%,
        rgba(3, 163, 255, 0.35) 42%,
        rgba(3, 163, 255, 0.25) 58%,
        rgba(3, 163, 255, 0.11) 79%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(48% 19% at 0% 97%,
        rgba(3, 163, 255, 0.98) 0%,
        rgba(3, 163, 255, 0.92) 18%,
        rgba(3, 163, 255, 0.72) 32%,
        rgba(3, 163, 255, 0.44) 46%,
        rgba(3, 163, 255, 0.22) 60%,
        rgba(3, 163, 255, 0.11) 74%,
        rgba(3, 163, 255, 0.04) 88%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(48% 19% at 100% 97%,
        rgba(3, 163, 255, 0.98) 0%,
        rgba(3, 163, 255, 0.92) 18%,
        rgba(3, 163, 255, 0.72) 32%,
        rgba(3, 163, 255, 0.44) 46%,
        rgba(3, 163, 255, 0.22) 60%,
        rgba(3, 163, 255, 0.11) 74%,
        rgba(3, 163, 255, 0.04) 88%,
        rgba(3, 163, 255, 0) 100%);
  }

  /* --- Innenkante der Videokarten ---------------------------------------------
     Der Verlauf lief von oben nach unten und legte damit eine leuchtende Linie
     ueber die ganze Oberkante. Im Entwurf sitzt die Kante genau umgekehrt: in
     beiden Mockup-Bauten ist oben und links nichts, unten und an der unteren
     rechten Flanke schon. Hauptkarte x306..1070 / y5773..6202:

       Ort                        SOLL          IST vorher
       Oberkante x500..1040       (  1,  1,  1) (  0,161,254)
       Unterkante x500            (  1, 18, 27) (  2,  2,  6)
       Unterkante x1000           (  1, 55, 71) (  2,  2,  6)
       rechte Kante y6100         (  5, 52, 72) (  2, 42, 63)
       linke Kante y6140          (  1,  3,  2) (  0, 22, 34)

     Der Schnipsel-Bau zeigt dasselbe in einer einzigen Zeile: Unterkante y6192
     von (2,2,2) links auf (1,97,124) rechts, Oberkante durchgehend (1,1,1).
     Das passt zu einem Eckschein unten rechts mit 120 Prozent Breite und
     45 Prozent Hoehe, nicht zu einem Verlauf ueber die Karte.
     Mittel ueber 23 Messstellen an allen vier Kanten: 69,3 -> 16,3. */
  .lvf-s07-vcard::after {
    background: radial-gradient(120% 45% at 100% 100%,
      rgba(0, 180, 255, 0.485) 0%,
      rgba(0, 180, 255, 0.467) 13%,
      rgba(0, 180, 255, 0.427) 24%,
      rgba(0, 180, 255, 0.365) 35%,
      rgba(0, 180, 255, 0.30) 46%,
      rgba(0, 180, 255, 0.23) 57%,
      rgba(0, 180, 255, 0.145) 68%,
      rgba(0, 180, 255, 0.065) 75%,
      rgba(0, 180, 255, 0.008) 82%,
      rgba(0, 180, 255, 0) 90%);
  }

  /* --- Rand der beiden Kopfpillen ---------------------------------------------
     Wie bei den Pillen in s06 zeigt der Entwurf keine leuchtende Kontur.
     Badge "Words from Traders", x830..930: Randzeile oben SOLL (0,0,0), unten
     (1,20,30) gegen die Fuellung (0,18,28). Live lag oben wie unten
     (40,130,184) an. Nachgemessen: oben (7,12,23), unten (7,12,23). */
  .lvf-s07 .lvf-s07-badge {
    background:
      linear-gradient(#00121c, #00121c) padding-box,
      linear-gradient(90deg,
        rgba(52, 176, 248, 0) 0%,
        rgba(53, 174, 244, 0.05) 53%,
        rgba(49, 169, 238, 0) 100%) border-box;
  }

  .lvf-s07 .lvf-s07-head--testimonials .lvf-s07-badge {
    background:
      linear-gradient(#000000, #000000) padding-box,
      linear-gradient(90deg,
        rgba(52, 176, 248, 0) 0%,
        rgba(53, 174, 244, 0.05) 53%,
        rgba(49, 169, 238, 0) 100%) border-box;
  }
}

/* ================= Naht zu s08, 12.08.2026 =================================
   BEFUND: an y 7690 sprang der Hintergrund um 10,8 Stufen, der Entwurf nur um
   1,5 (20 Spaltenbloecke, je 8 px ueber und unter der Kante, Spaltenmedian).
   Im Block 88..176 px waren es 64,5 Stufen: ueber der Kante (120,198,242),
   darunter (7,141,218). Der Entwurf hat dort (78,211,252) und (54,204,250).

   URSACHE: der weisse Saum war als senkrechtes Profil mal EINER waagerechten
   Maske gebaut, also in jeder Zeile gleich breit. Im Entwurf verjuengt er sich
   nach unten zu einem Keil. Weissanteil (aus dem Rotkanal geloest), Abstand
   zur Naht:

     Abstand    -80    -60    -40    -20    -10      0
     x120 SOLL 0,86   0,78   0,62   0,46   0,39   0,33
     x120 IST  0,60   0,60   0,60   0,60   0,59   0,13   <- konstant, dann Sturz
     x160 SOLL 0,45   0,30   0,24   0,10   0,07   0,05
     x160 IST  0,19   0,19   0,19   0,19   0,19   0,00

   Die alte Breite entspricht dem Soll ungefaehr bei -40; darueber ist sie zu
   schmal, darunter zu breit. Der Sturz an der Kante entsteht, weil s08 seinen
   Saum als Ellipsen baut und dort viel schmaler ansetzt.

   MODELL: der Saum ist im Soll ein schraeger Linearverlauf. Ueber das Band
   y 7600..7820 mal x 0..280, links und rechts, ist der Weissanteil eine
   Funktion allein von u = 1,80x + (y - Naht); mittlerer Fehler 0,030, das
   sind 7,6 Rotstufen. Als CSS ist das linear-gradient(118.9deg, ...): die
   Richtung (1,80 / 1) entspricht sin/cos, und die Stuetzstelle in px ist
   p = 0,4857 * u, unabhaengig von der Kastengroesse.

   Der Kasten sitzt an der Unterkante der Sektion, deshalb p = 0,4857*(u+80).
   In s08 sitzt derselbe Verlauf am oberen Rand mit p = 0,4857*u. Beide
   beschreiben damit dasselbe Lichtfeld, und der Uebergang ist stetig
   konstruiert, nicht nachgerechnet.

   ERGEBNIS der ganzen Runde an dieser Naht (Keil, Blauanhebung in s07 und
   s08, Cyansaum): Sprung 10,8 -> 1,8 Stufen, Entwurf 1,5. Der Rotkanal liegt
   jetzt auf beiden Seiten innerhalb von 2 Stufen am Entwurf (x120 94/93,
   x160 16/17, x200 2/2).
   ========================================================================= */
@media (min-width: 1024px) {
  .lvf-s07::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(118.9deg,
        rgba(255, 255, 255, 0.998) 0px,
        rgba(255, 255, 255, 0.991) 19px,
        rgba(255, 255, 255, 0.976) 39px,
        rgba(255, 255, 255, 0.952) 58px,
        rgba(255, 255, 255, 0.929) 78px,
        rgba(255, 255, 255, 0.881) 97px,
        rgba(255, 255, 255, 0.837) 107px,
        rgba(255, 255, 255, 0.734) 117px,
        rgba(255, 255, 255, 0.595) 126px,
        rgba(255, 255, 255, 0.448) 136px,
        rgba(255, 255, 255, 0.317) 146px,
        rgba(255, 255, 255, 0.214) 155px,
        rgba(255, 255, 255, 0.123) 165px,
        rgba(255, 255, 255, 0.063) 175px,
        rgba(255, 255, 255, 0.028) 185px,
        rgba(255, 255, 255, 0.008) 194px,
        rgba(255, 255, 255, 0) 199px),
      linear-gradient(241.1deg,
        rgba(255, 255, 255, 0.998) 0px,
        rgba(255, 255, 255, 0.991) 19px,
        rgba(255, 255, 255, 0.976) 39px,
        rgba(255, 255, 255, 0.952) 58px,
        rgba(255, 255, 255, 0.929) 78px,
        rgba(255, 255, 255, 0.881) 97px,
        rgba(255, 255, 255, 0.837) 107px,
        rgba(255, 255, 255, 0.734) 117px,
        rgba(255, 255, 255, 0.595) 126px,
        rgba(255, 255, 255, 0.448) 136px,
        rgba(255, 255, 255, 0.317) 146px,
        rgba(255, 255, 255, 0.214) 155px,
        rgba(255, 255, 255, 0.123) 165px,
        rgba(255, 255, 255, 0.063) 175px,
        rgba(255, 255, 255, 0.028) 185px,
        rgba(255, 255, 255, 0.008) 194px,
        rgba(255, 255, 255, 0) 199px),
      /* Cyansaum, unter dem Keil. Zwischen weissem Kern und tiefem Blau liegt
         im Entwurf ein Ring, den "Weiss ueber rgb(3,163,255)" nicht erzeugen
         kann: bei x160 steht dort G 183 bei B 244, Verhaeltnis 0,75 statt der
         0,64 der Fahne; selbst volle Fahnendeckung ergibt nur G 168. Der
         Rotkanal stimmt ueberall, der Keil ist also richtig, nur der Farbton
         darunter nicht. Rot bleibt 0, damit der Keil den Rotkanal weiter
         allein bestimmt. Gleiche Lage steht in s08. */
      linear-gradient(118.9deg,
        rgba(0, 255, 255, 0) 68px,
        rgba(0, 255, 255, 0.020) 89px,
        rgba(0, 255, 255, 0.061) 107px,
        rgba(0, 255, 255, 0.170) 116px,
        rgba(0, 255, 255, 0.296) 124px,
        rgba(0, 255, 255, 0.350) 134px,
        rgba(0, 255, 255, 0.365) 142px,
        rgba(0, 255, 255, 0.320) 160px,
        rgba(0, 255, 255, 0.265) 177px,
        rgba(0, 255, 255, 0.170) 194px,
        rgba(0, 255, 255, 0.092) 212px,
        rgba(0, 255, 255, 0.024) 247px,
        rgba(0, 255, 255, 0) 282px),
      linear-gradient(241.1deg,
        rgba(0, 255, 255, 0) 68px,
        rgba(0, 255, 255, 0.020) 89px,
        rgba(0, 255, 255, 0.061) 107px,
        rgba(0, 255, 255, 0.170) 116px,
        rgba(0, 255, 255, 0.296) 124px,
        rgba(0, 255, 255, 0.350) 134px,
        rgba(0, 255, 255, 0.365) 142px,
        rgba(0, 255, 255, 0.320) 160px,
        rgba(0, 255, 255, 0.265) 177px,
        rgba(0, 255, 255, 0.170) 194px,
        rgba(0, 255, 255, 0.092) 212px,
        rgba(0, 255, 255, 0.024) 247px,
        rgba(0, 255, 255, 0) 282px);
  }
}

/* ================= Naht zu s08, Blauanteil, 12.08.2026 =====================
   Nachdem der Weisskeil sass, blieb an y 7690 ein Rest von 3,6 Stufen
   (Entwurf 1,5). Er steckt im Blau, und zwar auf DIESER Seite: die letzte
   Zeile von s07 ist ueber die ganze Breite rund 0,06 Blaudeckung dunkler als
   der Entwurf, waehrend die erste Zeile von s08 rechts vom Handbild kommt und
   dort exakt stimmt. Deshalb sprang es rechts nach OBEN (Block 1584..1672:
   Gruen 174 auf 204) und nicht nach unten.

   Blaudeckung Zeile 7689, Ist gegen Entwurf:

     x            160    200    240    280    320    380    460    600    880
     Ist         0,82   0,81   0,75   0,66   0,56   0,42   0,28   0,12   0,02
     Entwurf     0,90   0,89   0,81   0,71   0,60   0,44   0,29   0,17   0,10

   Der Fehlbetrag ist zweigeteilt: ein Kern am Rand (0,08 bei x 160..200) und
   ein flaches Feld zur Mitte hin (0,05 bei x 600, 0,08 bei x 880). Dazwischen,
   bei x 380..460, stimmt es fast. Also zwei Randblasen und ein Mittelfeld,
   alle an der Unterkante verankert und nach oben ueber 300 px auslaufend. Die
   Rampe betraegt 0,3 Blaustufen je Zeile und ist damit selbst keine Kante.

   Nachgemessen in Zeile 7689, Blaukanal Ist gegen Entwurf:
     x            160    200    240    280    320    380    460    600
     vorher      238    228    206    180    152    113     75     47
     nachher     243    230    207    180    152    113     75     44
     Entwurf     244    228    206    180    152    113     74     43
   ========================================================================= */
@media (min-width: 1024px) {
  .lvf-s07::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    z-index: 0;
    pointer-events: none;
    /* Waagerechte Radien in Prozent der Sektionsbreite, 12.08.2026.
       470 px sind 26,705 Prozent von 1760, 520 px sind 29,545 Prozent; bei
       1760 px aendert sich dadurch nichts. Darunter schon: die Gegenebene in
       s08 und der gesamte uebrige Randschein der Seite rechnen in Prozent,
       diese drei Blasen als einzige in festen Pixeln. Bei 1024 px lag die
       Unterkante von s07 dadurch 74 Blaustufen unter der Oberkante von s08
       (x300: 93 gegen 167). */
    background-image:
      radial-gradient(26.705% 300px at 0px 100%,
        rgba(3, 163, 255, 0.455) 0%,
        rgba(3, 163, 255, 0.453) 34%,
        rgba(3, 163, 255, 0.448) 43%,
        rgba(3, 163, 255, 0.247) 51%,
        rgba(3, 163, 255, 0.148) 60%,
        rgba(3, 163, 255, 0.080) 68%,
        rgba(3, 163, 255, 0.033) 81%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(26.705% 300px at 100% 100%,
        rgba(3, 163, 255, 0.455) 0%,
        rgba(3, 163, 255, 0.453) 34%,
        rgba(3, 163, 255, 0.448) 43%,
        rgba(3, 163, 255, 0.247) 51%,
        rgba(3, 163, 255, 0.148) 60%,
        rgba(3, 163, 255, 0.080) 68%,
        rgba(3, 163, 255, 0.033) 81%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(29.545% 300px at 50% 100%,
        rgba(3, 163, 255, 0.085) 0%,
        rgba(3, 163, 255, 0.076) 45%,
        rgba(3, 163, 255, 0.036) 75%,
        rgba(3, 163, 255, 0) 100%);
  }
}

/* ===== s08 ===== */
/* ============================================================
   s08 - Lvlup Elite (Private Circle)
   Massstab: --u = 1px je Figma-Pixel.
   Mobile-Basis  : Frame 440  -> --u = 100vw/440, gedeckelt bei 1.84
   Desktop >=1024: Frame 1760 -> --u = 100vw/1280, exakt 1.0 ab 1280px
   Alle Zahlen (--n-*) sind unveraenderte Figma-Werte.
   ============================================================ */

.lvf-s08 {
  --u: min(0.2272727vw, 1.84px);

  --n-title: 75;
  --n-kicker-fs: 11;
  --n-kicker-h: 25;
  --n-kicker-w: 119;
  --n-kicker-px: 8;
  --n-lead-fs: 10;
  --n-lead-w: 314;
  --n-gap-copy: 30;
  --n-gap-head: 24;
  --n-gap-top: 11;
  --n-card-h: 30;
  --n-card-r: 5;
  --n-card-r-in: 4;
  --n-card-inset: 1;
  --n-card-pl: 11;
  --n-card-pr: 10;
  --n-ico: 8;
  --n-ico-gap: 6;
  --n-label-fs: 9;
  --n-gx: 11;
  --n-gy: 8;
  --n-pt: 40;
  --n-pb: 70;
  --n-visual-gap: 23;
  --n-visual-h: 415;
  --n-side: 10;

  /* Knopf-Fluid-Einheit, 13.08.2026: gleiches Muster wie --lvf-s10-u in s10
     (gefroren bei 1px ab 440px Designbreite, darunter proportional kleiner,
     Boden per max()). Grund: die CTA-Masse unten waren bislang feste px-Werte
     ohne jeden Bezug zu --u, obwohl der Rest der Sektion laengst mit --u
     skaliert. Bei erzwungenem Nebeneinander schob das "Explore Evaluations"
     bei 390px auf x 419, 29px ueber den Rand (Figma selbst zeigt die Knoepfe
     im 440px-Rahmen nebeneinander, Frame 65 = 381px von 440, siehe
     figma/specs/s08-elite-mobile.txt Zeile 128-136 - unter 440px Design-
     breite traegt kein Entwurf mehr, hier wird linear extrapoliert).
     --lvf-s08-cta-u ist bei jeder Breite ab 440px exakt 1px (min() deckelt),
     die Werte unten 1024px bleiben dort also unveraendert 17px/52px usw.,
     identisch zum bisherigen Stand. Erst UNTER 440px wird kleiner skaliert,
     mit Boden 13px Schrift / 44px Hoehe, damit Lesbarkeit und Trefferflaeche
     (Rundgang Punkt 6) erhalten bleiben. Ab 1024px ueberschreibt der
     bestehende Media-Block --lvf-s08-cta-h ohnehin fest auf 46px, daran
     aendert sich nichts. */
  --lvf-s08-cta-u: min(1px, 0.2272727vw);
  --lvf-s08-cta-fs: max(13px, calc(17 * var(--lvf-s08-cta-u)));
  --lvf-s08-cta-h: max(44px, calc(52 * var(--lvf-s08-cta-u)));
  --lvf-s08-shadow:
    6px 6px 18px rgba(0, 0, 0, 0.25),
    24px 22px 33px rgba(0, 0, 0, 0.21),
    53px 50px 44px rgba(0, 0, 0, 0.13),
    95px 89px 52px rgba(0, 0, 0, 0.04);

  position: relative;
  overflow: hidden;
  padding-block: calc(var(--n-pt) * var(--u)) calc(var(--n-pb) * var(--u));
  font-family: var(--lvf-font-display);
}

.lvf-s08-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Naeherung der grossen weichgezeichneten "Star"-Vektoren (#00a2ff blur300 / #a7dfff blur100) */
.lvf-s08-aura {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 160%;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Mobile: helle blaue Kante rechts oben bis unten (wie im Mobile-Soll) */
  background:
    radial-gradient(420px 320px at 81% 15%, rgba(120, 210, 255, 0.8) 0%, rgba(0, 162, 255, 0) 80%),
    radial-gradient(420px 640px at 83% 48%, rgba(0, 162, 255, 0.65) 0%, rgba(0, 162, 255, 0) 78%),
    radial-gradient(340px 300px at 76% 77%, rgba(0, 162, 255, 0.5) 0%, rgba(0, 162, 255, 0) 75%),
    radial-gradient(680px 600px at 65% 45%, rgba(0, 162, 255, 0.25) 0%, rgba(0, 162, 255, 0.08) 50%, rgba(0, 162, 255, 0) 75%),
    radial-gradient(34% 30% at 38% 62%, rgba(167, 223, 255, 0.07) 0%, rgba(167, 223, 255, 0) 100%);
  /* Sektion hat overflow:hidden; die Aura muss VOR den Schnittlinien auslaufen,
     sonst entsteht an Ober- und Unterkante eine harte Linie. Schnittlinien im
     Element: oben ~15%, unten ~82%. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, #000000 28%, #000000 70%, rgba(0, 0, 0, 0) 82%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, #000000 28%, #000000 70%, rgba(0, 0, 0, 0) 82%);
}

.lvf-s08-inner {
  position: relative;
  padding-inline: calc(var(--n-side) * var(--u));
}

/* ---------- Hand-Bild (Mobile: Band ueber dem Text) ---------- */
.lvf-s08-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  height: calc(var(--n-visual-h) * var(--u));
  margin-inline: calc(50% - 50vw);
  margin-bottom: calc(var(--n-visual-gap) * var(--u));
  pointer-events: none;
  /* heller cyan-blauer Radial-Glow hinter dem Motiv
     Befund R3 (Mobil 12): Flaeche war rund 35% zu dunkel
     (SOLL RGB(52,109,137) vs IST RGB(23,71,97)) - Stops heller und weiter */
  background: radial-gradient(72% 82% at 50% 52%, rgba(150, 215, 255, 0.65) 0%, rgba(40, 165, 235, 0.4) 45%, rgba(0, 162, 255, 0.1) 68%, rgba(0, 162, 255, 0) 85%);
  /* weicher vertikaler Auslauf zu den Nachbarsektionen (keine harten Kanten) */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 14%, #000000 86%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 14%, #000000 86%, rgba(0, 0, 0, 0) 100%);
}

.lvf-s08-visual-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  margin-inline: auto;
  /* Seiten weich auslaufen lassen, damit keine Kante zum Glow entsteht */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 14%, #000000 86%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 14%, #000000 86%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Textspalte ---------- */
.lvf-s08-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--n-gap-copy) * var(--u));
}

.lvf-s08-head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--n-gap-head) * var(--u));
}

.lvf-s08-head-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--n-gap-top) * var(--u));
}

/* Kicker-Pille */
.lvf-s08-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--n-kicker-w) * var(--u));
  height: calc(var(--n-kicker-h) * var(--u));
  padding-inline: calc(var(--n-kicker-px) * var(--u));
  border-radius: 999px;
  background: var(--lvf-grad-blue);
  box-shadow:
    11px 8px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16),
    inset 0 1px 2px -1px rgba(255, 255, 255, 0.3),
    inset 0 1px 20px #50bfff;
}

.lvf-s08-kicker::after {
  content: "";
  position: absolute;
  inset: calc(-0.75 * var(--u));
  border-radius: 999px;
  padding: calc(0.75 * var(--u));
  background: linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, #35aef4 53%, rgba(49, 169, 238, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lvf-s08-kicker-text {
  font-size: calc(var(--n-kicker-fs) * var(--u));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: #000000;
  white-space: nowrap;
}

/* Headline */
.lvf-s08-title {
  font-size: calc(var(--n-title) * var(--u));
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.02em;
  background: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "Elite" im Blau-Verlauf (Referenz: oben #8cd5ff, unten #12a9ff) */
.lvf-s08-title-hl {
  background: linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lvf-s08-lead {
  max-width: calc(var(--n-lead-w) * var(--u));
  font-size: calc(var(--n-lead-fs) * var(--u));
  font-weight: 425;
  line-height: 1.33;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Feature-Karten ---------- */
.lvf-s08-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--n-gx) * var(--u));
  row-gap: calc(var(--n-gy) * var(--u));
}

.lvf-s08-feature {
  position: relative;
  height: calc(var(--n-card-h) * var(--u));
  border-radius: calc(var(--n-card-r) * var(--u));
  /* Muster A (muster-a-home-rules.md Abschnitt 5c): Figma 0,428px, war 1px. */
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 53%, rgba(14, 23, 28, 0.4) 100%);
}

.lvf-s08-feature-inner {
  position: absolute;
  inset: calc(var(--n-card-inset) * var(--u));
  display: flex;
  align-items: center;
  gap: calc(var(--n-ico-gap) * var(--u));
  overflow: hidden;
  padding-left: calc(var(--n-card-pl) * var(--u));
  padding-right: calc(var(--n-card-pr) * var(--u));
  /* Muster A: gleicher Befund wie .lvf-s08-feature oben, 0,5px statt 1px. */
  border: 0.5px solid transparent;
  border-radius: calc(var(--n-card-r-in) * var(--u));
  background:
    radial-gradient(70% 150% at 20% 105%, rgba(97, 197, 255, 0.22) 0%, rgba(97, 197, 255, 0) 70%) padding-box,
    radial-gradient(120% 190% at 100% 0%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(rgba(69, 187, 255, 0.012), rgba(69, 187, 255, 0.012)) padding-box,
    linear-gradient(135deg, #004b77 0%, rgba(0, 92, 145, 0) 100%) border-box;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.lvf-s08-feature-ico {
  flex: none;
  width: calc(var(--n-ico) * var(--u));
  height: calc(var(--n-ico) * var(--u));
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.15));
}

.lvf-s08-feature-label {
  font-size: calc(var(--n-label-fs) * var(--u));
  font-weight: 510;
  line-height: 1.23;
  text-transform: capitalize;
  color: #ffffff;
}

/* Hellblaue Wort-Hervorhebung in den Feature-Pills */
.lvf-s08-feature-hl { color: #6ecaff; }

/* ---------- CTAs ---------- */
.lvf-s08-actions {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--lvf-s08-cta-u));
  flex-wrap: wrap;
}

.lvf-s08-cta,
.lvf-s08-cta2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lvf-s08-cta-h);
  border-radius: 10px;
  font-size: var(--lvf-s08-cta-fs);
  line-height: 25px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.lvf-s08-cta {
  gap: calc(8 * var(--lvf-s08-cta-u));
  padding: calc(5 * var(--lvf-s08-cta-u)) calc(12 * var(--lvf-s08-cta-u)) calc(5 * var(--lvf-s08-cta-u)) calc(5 * var(--lvf-s08-cta-u));
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%) padding-box,
    linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 0) 100%) border-box;
  color: #060606;
}

/* Beide Knöpfe sind <a>. Elementors ".elementor a { box-shadow: none }"
   (0-1-1) hat ihre Schatten gelöscht: dem Primärknopf den oberen Innenglanz,
   dem Sekundärknopf den kompletten blauen Innensaum. Gemessen an der
   Unterkante von "Explore Evaluations": Soll RGB(18,145,217), Ist RGB(4,9,16).
   Nur der Schatten bekommt zwei Klassen (0-2-0). */
.lvf-page .lvf-s08-cta {
  box-shadow: inset 0 1px 18px #5bbce8, var(--lvf-s08-shadow);
}

.lvf-s08-cta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(36 * var(--lvf-s08-cta-u));
  height: calc(36 * var(--lvf-s08-cta-u));
  border-radius: calc(6 * var(--lvf-s08-cta-u));
  background: #060606;
}

/* Befund R3 (Mobil 4): ".lvf-page a { color: inherit }" (0-1-1) schlug das
   color:#060606 auf .lvf-s08-cta (0-1-0), das Label erbte Weiss auf hellem
   Cyan-Fill. Farbe direkt ans Label binden. */
.lvf-s08-cta-label { font-weight: 500; color: #060606; }

/* Referenz: dunkler Kern, blau gluehender Rand (staerker rechts/unten) */
.lvf-s08-cta2 {
  padding-inline: calc(12 * var(--lvf-s08-cta-u));
  border: 1px solid rgba(84, 187, 255, 0.5);
  background: rgba(0, 6, 10, 0.55);
  color: #ffffff;
  font-weight: 400;
}
.lvf-page .lvf-s08-cta2 {
  box-shadow:
    inset -2px -6px 19px #52b8f1,
    inset -5px -4px 16px #00a4ff,
    inset -1px -2px 5px #00a4ff,
    inset 9px 7px 12px #000000,
    0 0 22px rgba(0, 162, 255, 0.3),
    var(--lvf-s08-shadow);
}

.lvf-s08-cta:hover,
.lvf-s08-cta2:hover { filter: brightness(1.07); transform: translateY(-1px); }

.lvf-s08-cta:focus-visible,
.lvf-s08-cta2:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: 3px;
}

/* ============================================================
   Mobile/Tablet: Hand-Bild als Band ueber dem Text (sichtbar),
   CTAs in einer Zeile
   ============================================================ */
@media (max-width: 1023.98px) {
  .lvf-s08-actions { flex-wrap: nowrap; }

  /* Befund R3 (Mobil 17): Chips hatten eine zu blaue Fuellung
     (SOLL RGB(39,58,69) vs IST RGB(57,99,124)) - mobil fast schwarze
     Flaeche mit duennem neutralem Rahmen statt blauer Gradienten */
  .lvf-s08-feature-inner {
    background:
      linear-gradient(180deg, rgba(48, 62, 72, 0.55) 0%, rgba(24, 32, 40, 0.65) 100%) padding-box,
      linear-gradient(135deg, rgba(140, 170, 190, 0.3) 0%, rgba(140, 170, 190, 0.08) 100%) border-box;
  }
}

/* Exakte Bruchkante aus dem Breitenlauf: Bis 323 px ragte der rechte Knopf
   maximal 3 px über den Sektionsrand. Der Abstand bleibt an dieselbe fluide
   Einheit gebunden und passt ab 324 px wieder unverändert zum Grundwert. */
@media (max-width: 323px) {
  .lvf-s08-actions { gap: calc(3.5 * var(--lvf-s08-cta-u)); }
}

/* ============================================================
   Desktop ab 1024px: Bild absolut rechts, Text links
   Werte exakt (1:1) ab 1280px, darunter proportional skaliert
   ============================================================ */
@media (min-width: 1024px) {
  .lvf-s08 {
    --u: clamp(0.79px, 0.078125vw, 1px);

    --n-title: 138;
    --n-kicker-fs: 21;
    --n-kicker-h: 47;
    --n-kicker-w: 218;
    --n-kicker-px: 14;
    --n-lead-fs: 18;
    --n-lead-w: 576;
    --n-gap-copy: 55;
    /* Korrektur 11.08.2026, Quelle referenz-neu/grenzen-home.json plus eigene
       Nachmessung der Textbaender in Soll-Vollbild und Ist-Kachel. Werte als
       Abstand zur Sektionsoberkante (Ist 7528, Soll 7679):
         Pille        Ist 102..149   Soll 102..149    0   passt
         Ueberschrift Ist 185..301   Soll 170..285  +15
         Subline Z1   Ist 348        Soll 313       +35
         Feature-Reihen und Buttons durchgehend +36, unterer Innenabstand
         in beiden 117 px. Der Fehler steckt also nur in diesen zwei Luecken:
         Pille -> Ueberschrift +15, Ueberschrift -> Subline +20. Zusammen die
         35 px, um die die Sektion zu hoch ist (856 statt 821). */
    --n-gap-head: 24;  /* Ueberschrift -> Subline, Soll 24, war 44 */
    --n-gap-top: 6;    /* Pille -> Ueberschrift, Soll 6, war 21 */
    --n-card-h: 55;
    --n-card-r: 10;
    --n-card-r-in: 7;
    --n-card-inset: 2;
    --n-card-pl: 19;
    --n-card-pr: 20;
    --n-ico: 15;
    --n-ico-gap: 12;
    --n-label-fs: 17;
    --n-gx: 21;
    --n-gy: 14.5;
    --n-pt: 102;
    --n-pb: 116;
    --n-side: 0;

    --lvf-s08-cta-h: 46px;
  }

  .lvf-s08-cta2 { padding-inline: 21px; }

  /* Inner-Wrapper statisch, damit sich das Visual an der Sektion
     (volle Hoehe, rechter Viewport-Rand) statt am Content ausrichtet */
  .lvf-s08-inner { position: static; }

  /* Desktop-Aura: Beam oben rechts + Lichtkante links (Naeherung der Star-Vektoren) */
  .lvf-s08-aura {
    background:
      radial-gradient(470px 360px at 81.8% 13%, rgba(175, 230, 255, 0.92) 0%, rgba(175, 230, 255, 0) 100%),
      radial-gradient(780px 480px at 82% 14%, rgba(0, 162, 255, 0.9) 0%, rgba(0, 162, 255, 0.35) 55%, rgba(0, 162, 255, 0) 78%),
      radial-gradient(440px 560px at 85% 42%, rgba(0, 162, 255, 0.6) 0%, rgba(0, 162, 255, 0) 70%),
      radial-gradient(380px 240px at 75% 72%, rgba(0, 162, 255, 0.4) 0%, rgba(0, 162, 255, 0) 72%),
      radial-gradient(460px 330px at 16% 12%, rgba(200, 236, 255, 1) 0%, rgba(120, 210, 255, 0.85) 38%, rgba(0, 162, 255, 0) 84%),
      /* Soll-Profil 06.08.2026: BEIDE Viewport-Raender haben bei y7700 einen
         weissen Blob (246,251,255), darunter blaue Tails (y7900: ~100,217,252).
         ACHTUNG Geometrie: die Aura ist 3288px breit und ueberragt den Viewport,
         Seitenrand x0 = 18.75%, x1760 = 81.25% - nicht 0%/100%! */
      radial-gradient(300px 260px at 18.7% 29%, rgba(246, 251, 255, 1) 0%, rgba(200, 235, 254, 0.9) 40%, rgba(80, 190, 245, 0) 80%),
      radial-gradient(300px 260px at 81.3% 29%, rgba(246, 251, 255, 1) 0%, rgba(200, 235, 254, 0.9) 40%, rgba(80, 190, 245, 0) 80%),
      radial-gradient(160px 700px at 18.6% 55%, rgba(20, 165, 235, 0.9) 0%, rgba(2, 120, 185, 0.6) 60%, rgba(2, 110, 175, 0) 100%),
      radial-gradient(160px 700px at 81.4% 55%, rgba(10, 140, 205, 0.8) 0%, rgba(2, 105, 160, 0.5) 60%, rgba(2, 100, 155, 0) 100%),
      radial-gradient(640px 950px at 14% 46%, rgba(40, 180, 250, 0.85) 0%, rgba(0, 161, 255, 0.5) 55%, rgba(0, 161, 255, 0) 84%),
      radial-gradient(340px 420px at 18.2% 80%, rgba(0, 140, 220, 0.65) 0%, rgba(0, 140, 220, 0) 80%),
      radial-gradient(34% 30% at 38% 62%, rgba(167, 223, 255, 0.05) 0%, rgba(167, 223, 255, 0) 100%),
      radial-gradient(44% 42% at 50% 50%, rgba(0, 162, 255, 0.1) 0%, rgba(0, 162, 255, 0.03) 48%, rgba(0, 162, 255, 0) 74%),
      /* Befund R3 (Desktop 8): linker Randstreifen zu dunkel
         (SOLL RGB(56,151,194) vs IST RGB(7,90,142)). Zusaetzliche helle
         Kante direkt am linken Viewport-Rand, weich nach rechts auslaufend. */
      radial-gradient(560px 900px at 0% 46%, rgba(85, 170, 210, 0.95) 0%, rgba(40, 115, 165, 0.5) 55%, rgba(0, 162, 255, 0) 100%);
  }

  /* Zuschnitt-Korrektur 11.08.2026
     ------------------------------
     Die Datei lvlup-hand-soll.webp ist ein Ausschnitt des Soll-Renders von
     x 1063..1760, y 7528..8384, also 697 x 856. Sie begann damit 152 px
     OBERHALB der Sektionsoberkante (Soll y 7680), wurde aber buendig an die
     Oberkante gesetzt und auf die Sektionshoehe 821 gestaucht (Massstab
     821/856 = 0,959). Zwei Folgen:
       1. jeder Bildpunkt sass rund 137..150 px zu tief,
       2. die im Ausschnitt eingebackenen Erfahrungsbericht-Karten
          ("Elena Rodriguez / Trader", Soll y 7570..7650) standen sichtbar
          im oberen Sektionsdrittel, wo im Entwurf nur Hintergrund ist.
     Jetzt liegt der Ausschnitt wieder genau dort, wo er herkommt: Massstab
     1,0, Oberkante 152 px ueber der Sektion. Die Sektion hat overflow:hidden,
     damit verschwinden die Karten vollstaendig im Beschnitt.
     Offen bleibt der untere Rand: die Datei endet bei Soll y 8384, die
     Sektion reicht bis 8500. Die letzten 116 px Motiv fehlen in der Datei
     und sind per CSS nicht herstellbar - dafuer braucht es einen neuen
     Zuschnitt (siehe referenz-neu/fix-home-s07-s10.md). */
  .lvf-s08-visual {
    position: absolute;
    z-index: 0;
    left: auto;
    right: 0;
    /* Anteil an der Seitenbreite statt fester Pixel, 12.08.2026.
       Die Datei ist ein 1:1-Ausschnitt des Soll-Renders, x1063..1760 von
       1760, also 39,6023 Prozent der Seitenbreite; 697 / 856 ist ihr
       Seitenverhaeltnis, 152 / 856 der Anteil, um den sie nach oben aus der
       Sektion ragt. Bei 1760 px ergibt das exakt 697 x 856 px bei top -152,
       dort aendert sich nichts.
       ZWEI GRUENDE: erstens ueberdeckte das Bild bei kleineren Breiten die
       Textspalte, gemessen 113 px bei 1024, 136 px bei 1280 und 56 px bei
       1440 (bei 1760 bleiben 104 px Abstand). Zweitens traegt der Ausschnitt
       das Randlicht der Sektion mit; mit fester Pixelbreite lag es bei
       1440 px rund 320 px zu weit links und riss die Naht zu s07 auf der
       rechten Seite auf (Bloecke 13 bis 16 um 12 bis 22 Stufen). */
    top: 0;
    bottom: auto;
    width: 39.6023%;
    height: auto;
    aspect-ratio: 697 / 856;
    transform: translateY(-17.757%);
    margin: 0;
    background: none;
    /* linke dunkle Kante weich in den Sektionshintergrund auslaufen lassen */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 8%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 8%);
  }

  /* Motiv unskaliert, 1 Bildpunkt je Soll-Pixel */
  .lvf-s08-visual-img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: fill;
    /* Kein senkrechter Auslauf mehr: oben schneidet die Sektion selbst ab,
       unten wuerde eine Maske echtes Motiv wegnehmen. Nur die letzten Pixel
       der Datei werden weich, damit die Schnittkante bei Soll y 8384 keine
       Linie zieht. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 17.5%, rgba(0, 0, 0, 0.3) 24%, #000000 36%, #000000 96%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 17.5%, rgba(0, 0, 0, 0.3) 24%, #000000 36%, #000000 96%, transparent 100%);
  }

  .lvf-s08-copy { width: calc(699 * var(--u)); max-width: 100%; }

  /* Kicker-Pille, Messpass 11.08.2026 (Soll home-aus-vollbild y7779, Ist y7792,
     Fuellung ueber x290..440 als 80. Perzentil, Abstand von der Oberkante):
       dy  2   Soll (223,246,255)   Ist (150,217,255)
       dy  5   Soll (185,233,255)   Ist (111,203,255)
       dy 10   Soll (137,221,255)   Ist (102,199,255)
       dy 23   Soll ( 90,201,255)   Ist ( 79,191,255)
       dy 44   Soll ( 36,202,255)   Ist ( 49,180,255)
     Der alte Innenschein `inset 1px 1px 37px #50bfff` (80,191,255) ist ueber
     die ganze Pille verteilt: er hebt die Unterkante um 13 Rotstufen zu hoch
     und laesst die Oberkante 73 Stufen zu dunkel. Im Entwurf sitzt der Glanz
     als schmales Band direkt unter der Oberkante, dazu ein cyanfarbener
     Schein an der Unterkante. */
  .lvf-s08-kicker {
    background:
      linear-gradient(180deg,
        rgba(45, 255, 255, 0) 55%,
        rgba(45, 255, 255, 0.06) 72%,
        rgba(45, 255, 255, 0.15) 85%,
        rgba(45, 255, 255, 0.3) 100%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.45) 11%,
        rgba(255, 255, 255, 0.23) 15%,
        rgba(255, 255, 255, 0.163) 21%,
        rgba(255, 255, 255, 0.115) 30%,
        rgba(255, 255, 255, 0.055) 49%,
        rgba(255, 255, 255, 0.048) 70%,
        rgba(255, 255, 255, 0.045) 100%),
      var(--lvf-grad-blue);
    box-shadow:
      21px 15px 22px rgba(0, 0, 0, 0.08),
      0 0 0 2px rgba(0, 0, 0, 0.25),
      0 0 0 5px rgba(0, 0, 0, 0.16);
  }

  /* ---------------------------------------------------------------
     Merkmalspillen, Befund 11.08.2026
     ---------------------------------------------------------------
     Die sechs Chips waren live blaue Knoepfe, im Entwurf sind sie fast
     schwarz. Gemessen ueber die Chiphoehe als 25. Perzentil je Spalte
     (Soll y8093..8140, Ist y8105..8152):

       Chip links   x 266   Soll (5,27,40)   Ist (2, 74,118)
                    x 480   Soll (1, 9,12)   Ist (6, 35, 54)
                    x 596   Soll (3, 4, 6)   Ist (4,  7, 13)
       Chip rechts  x 626   Soll (4, 8,10)   Ist (2, 74,118)
                    x 830   Soll (2, 2, 2)   Ist (6, 38, 58)

     URSACHE: die Ebene `linear-gradient(135deg, #004b77 ...) border-box`
     war als Rahmenverlauf gedacht, malt aber die GANZE Flaeche des
     Kastens. Da alle darueberliegenden padding-box-Ebenen fast
     durchsichtig sind, wirkt rgb(0,75,119) als deckende Fuellung. Genau
     dieser Wert steht live am linken Chiprand (2,74,118).

     Ein sichtbarer Rahmen gehoert dort auch gar nicht hin: im Entwurf
     geht die linke Kante von (1,2,4) direkt in die Fuellung (4,8,9)
     ueber, ohne helle Linie. Sichtbar ist nur ein weicher Schein oben
     links, gemessen am rechten Chip (dort liegt kein Randlicht dahinter):

       Abstand von links / oben     6/5     42/5    70/5   150/5   250/5
       Soll                     (7,15,20)(13,29,38)(17,34,44)(4,8,9)(2,2,2)
       gleiche Spalten bei dy 43 (5, 9,12)( 6,11,14)( 7,12,15)(4,8,9)(4,7,8)

     Deshalb: Rahmenebene raus, dafuer ein radialer Kopfschein bei x 70 /
     y 0 und eine schwache Grundwaesche zur Unterkante. Der Rest des
     Chips bleibt durchscheinend, damit das Randlicht der Seite wie im
     Entwurf durch die linke Spalte wandert (Soll dort 27 Gruenstufen
     gegen 8 in der rechten Spalte). */
  .lvf-s08-feature-inner {
    background:
      radial-gradient(115px 52px at 70px 0px,
        rgba(105, 200, 255, 0.125) 0%,
        rgba(105, 200, 255, 0.038) 55%,
        rgba(105, 200, 255, 0) 100%),
      radial-gradient(120% 190% at 100% 0%, rgba(255, 255, 255, 0.014) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, rgba(88, 168, 214, 0) 24%, rgba(88, 168, 214, 0.026) 100%);
  }
}


/* Notloesung vom 06.08. (Stapeln unter 768px, weil "Explore Evaluations" bei
   erzwungenem Nebeneinander am Rand abgeschnitten war) am 13.08.2026 entfernt.
   Ursache war nicht das Nebeneinander selbst, sondern dass die Knopfmasse
   feste px-Werte ohne Bezug zu --u waren (siehe --lvf-s08-cta-u weiter oben).
   Mit der fluiden Skalierung passen beide Knoepfe nebeneinander, gemessen
   ohne Ueberlauf bei 320/360/375/390/440px (Belege im Bericht). Die
   allgemeine Regel ".lvf-s08-actions{flex-wrap:nowrap}" im Media-Block
   "max-width:1023.98px" weiter unten greift jetzt durchgehend von 0 bis
   1023px, genau wie es der Figma-Mobile-Entwurf (Frame 65, beide Knoepfe in
   einer Zeile) zeigt. */

/* ================= Durchlaufende Randfahne, 11.08.2026 =====================
   Im Mockup ist das seitliche Leuchten EIN Feld ueber die ganze Seite, nicht
   ein Schein je Abschnitt. Gemessen im Soll-Vollbild bei x 0..6: der Farbton
   ist ueberall rgb(3,163,255) (G/B = 0,64 in allen ruhigen Zeilen), nur die
   Deckkraft aendert sich mit der Hoehe. Die waagerechte Abnahme ist ebenfalls
   ueberall gleich (x 100 noch 45 %, x 200 noch 18 %, x 300 noch 8 %).
   Deshalb: senkrechtes Profil als Farbverlauf in px ab Sektionsoberkante,
   waagerechte Abnahme als Maske. Die letzte Marke einer Sektion ist die erste
   der naechsten, dadurch entsteht an den Grenzen kein Sprung mehr.
   Nur Desktop; unter 1024 px bleibt alles wie bisher.
   ========================================================================= */
@media (min-width: 1024px) {
  /* Die Aura sass rund 200 px zu tief (Soll y 7684 links (237,249,255) gegen
     Ist (15,21,33), Soll y 7900 (52,202,250) gegen Ist (207,235,251)) und ihre
     Maske schnitt oben und unten je 15 Prozent weg - daher die harte Naht bei
     y 8511 (Blaukanal 162 -> 26 -> 108). Jetzt: Element deckungsgleich mit der
     Sektion, Lage in px, keine schneidende Maske mehr. Die Mitte bleibt dunkel
     (Soll y 8300 x 440..1210: 0). */
  /* ---------------------------------------------------------------
     Zusatzebene 11.08.2026: der Schein stirbt links zu frueh
     ---------------------------------------------------------------
     Das Modell "senkrechtes Profil mal EINE waagerechte Maske" stimmt nur
     an der Unterkante der Sektion. Oben ist der Entwurf viel breiter.
     Blauanteil (aus R und B zerlegt, damit der Weissanteil nicht mitzaehlt),
     Abstand von der Sektionsoberkante:

       y_rel   x0     x80    x160   x240   x320   x400   x480
        4     1.00   1.00   0.94   0.77   0.56   0.36   0.23   Soll
              0.98   0.53   0.18   0.10   0.02   0.00   0.00   Ist
       404    0.91   0.70   0.45   0.25   0.20   0.07   0.03   Soll
              0.91   0.49   0.17   0.09   0.02   0.00   0.00   Ist
       804    0.62   0.36   0.17   0.07   0.03   0.00   0.00   Soll
              0.62   0.34   0.16   0.09   0.02   0.00   0.00   Ist

     Unten passt es also, oben fehlt fast der ganze Schein. In Zahlen des
     Auftrags: bei y7750 hat der Entwurf bei x200 (2,120,188), live war dort
     der Hintergrundwert erreicht.

     RECHTE SEITE NICHT ANFASSEN: dort deckt das Handbild, das ein Ausschnitt
     des Soll-Renders ist, den Schein bereits mit. Nachgemessen bei y7700,
     200 px vom rechten Rand: Soll 219, Ist 222. Die Ebene wirkt deshalb nur
     nach links.

     Die Ebene liegt UNTER ::before und ::after, ihre Deckkraft ist per
     kleinsten Quadraten aus 80 Hoehen mal 29 Spalten geloest (mittlerer
     Fehler im Blauanteil 0,192 -> 0,038, das sind 49 -> 10 Blaustufen).

     NAHT ZU s07: der Schein von s07 ist genauso zu schmal, s07 gehoert aber
     nicht zu dieser Datei. Ohne Gegenmassnahme entstuende bei y7690 eine
     harte Kante (bei x200 von 57 auf 222 in einer Zeile). Deshalb blendet
     die Ebene ueber die ersten 45 px ein, das sind 3,7 Blaustufen je Zeile
     und damit unsichtbar. Wird s07 spaeter genauso verbreitert, kann die
     Rampe entfallen. */
  .lvf-s08-aura {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    /* Blau-Anschluss an s07, 12.08.2026.
       Nach der Reparatur des Weisskeils blieb an der Naht y 7690 ein Sprung
       im Blaukanal: die Sektionsoberkante ist links deutlich blasser als die
       Unterkante von s07 direkt darueber. Blaudeckung (aus B nach Abzug des
       Weissanteils), Zeile 7689 gegen 7690:

         x            200    240    300    380    460    600
         s07 unten   0,80   0,74   0,60   0,42   0,27   0,12
         s08 oben    0,65   0,54   0,47   0,32   0,20   0,07
         Entwurf     0,89   0,80   0,64   0,44   0,28   0,17

       Der Fehlbetrag verschwindet rund 140 px unter der Naht wieder, ist also
       eine Sache der obersten Zeilen und keine Flaechenfrage. Zwei Ellipsen an
       der oberen linken Ecke tragen ihn nach: die enge (444x140) den Kern bis
       x 460, die weite (1100x130) den flachen Auslauf bis zur Bildmitte. Ab
       x 1050 uebernimmt das Handbild, das ein Ausschnitt des Soll-Renders ist
       und dort von sich aus stimmt; deshalb bleibt die rechte Seite frei.
       Ziel ist der Entwurfswert. Das ist erst moeglich, seit die Unterkante
       von s07 in derselben Runde ebenfalls angehoben wurde: waere nur eine
       Seite gehoben worden, risse die Naht in die Gegenrichtung auf.
       Die Ebene sitzt am Element und nicht an ::before oder ::after, damit sie
       unter beiden Scheinen liegt; eine Maske ist hier verboten, sie wuerde
       laut Kommentar unten auch die Pseudoelemente treffen.

       ERGEBNIS, erste Zeile von s08, Blaukanal:
         x            160    200    240    300    380    460    600
         vorher      200    166    137    114     82     51     19
         nachher     242    228    204    177    112     77     48
         Entwurf     242    226    204    177    110     72     42 */
    /* Waagerechte Radien in Prozent der Sektionsbreite, 12.08.2026: 444 px
       sind 25,227 Prozent von 1760, 1250 px sind 71,023 Prozent. Bei 1760 px
       unveraendert. Grund siehe .lvf-s08::before darunter. */
    background-image:
      radial-gradient(25.227% 140px at 0px 0px,
        rgba(3, 163, 255, 0.66) 0%,
        rgba(3, 163, 255, 0.639) 45%,
        rgba(3, 163, 255, 0.49) 55%,
        rgba(3, 163, 255, 0.238) 68%,
        rgba(3, 163, 255, 0.055) 86%,
        rgba(3, 163, 255, 0) 100%),
      radial-gradient(71.023% 130px at 0px 0px,
        rgba(3, 163, 255, 0.13) 0%,
        rgba(3, 163, 255, 0.118) 45%,
        rgba(3, 163, 255, 0.085) 68%,
        rgba(3, 163, 255, 0.088) 85%,
        rgba(3, 163, 255, 0.075) 93%,
        rgba(3, 163, 255, 0) 100%);
    background-color: transparent;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Die Ebene haengt bewusst an der Sektion, nicht an .lvf-s08-aura: eine
     mask-image an der Aura wuerde auch deren ::before und ::after mitmaskieren
     (gemessen: der linke Rand fiel dadurch von Blau 254 auf 119). Als
     ::before der Sektion liegt sie im Malfluss vor der Aura und damit unter
     beiden Scheinen. */
  .lvf-s08::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Senkrecht in Prozent der Sektionshoehe, waagerecht in Prozent der
       Breite, 12.08.2026.
       IST vorher: die Naht s07/s08 sprang bei 1024 px um 21,4 und bei 1280 px
       um 12,9 Stufen, bei 1760 px nur um 1,8. Die Naht s08/s09 sprang bei
       1024 px um 5,4 gegen 0,2 bei 1760.
       BEGRUENDUNG: s08 war der einzige Abschnitt der Seite, dessen breiter
       Schein in festen Pixeln rechnet; s05, s06, s07, s09 und s10 rechnen in
       Prozent. Gemessen an der Naht war die erste Zeile von s08 bei allen
       vier Breiten gleich (x300 immer 167 im Blaukanal), die letzte Zeile von
       s07 dagegen 165 / 136 / 122 / 93. Ebenso senkrecht: das Profil lief bis
       820 px, die Sektion ist bei 1024 px aber nur 666 px hoch, ihre
       Unterkante blieb damit zu hell fuer s09.
       Alle Zahlen sind Prozent von 1760 x 821, bei 1760 px aendert sich
       nichts (nachgemessen 1,8 vor und nach). */
      background-image: linear-gradient(180deg,
      /* Rampe entfallen 11.08.2026: s07 ist inzwischen genauso verbreitert
         worden, die Gegenmassnahme ist damit ueberfluessig. Mit ihr sprang
         die Naht bei y 7690 um 21,0 Stufen (Entwurf 4,7), weil die Ebene
         unter s07 abblendete, wo dort laengst Licht steht. */
      rgba(3, 163, 255, 0.886) 0.0000%,
      rgba(3, 163, 255, 0.886) 4.8721%,
      rgba(3, 163, 255, 0.966) 9.7442%,
      rgba(3, 163, 255, 0.937) 14.6163%,
      rgba(3, 163, 255, 0.872) 19.4884%,
      rgba(3, 163, 255, 0.784) 24.3605%,
      rgba(3, 163, 255, 0.698) 29.2326%,
      rgba(3, 163, 255, 0.616) 34.1048%,
      rgba(3, 163, 255, 0.529) 38.9769%,
      rgba(3, 163, 255, 0.445) 43.8490%,
      rgba(3, 163, 255, 0.371) 48.7211%,
      rgba(3, 163, 255, 0.307) 53.5932%,
      rgba(3, 163, 255, 0.245) 58.4653%,
      rgba(3, 163, 255, 0.195) 63.3374%,
      rgba(3, 163, 255, 0.154) 68.2095%,
      rgba(3, 163, 255, 0.117) 73.0816%,
      rgba(3, 163, 255, 0.087) 77.9537%,
      rgba(3, 163, 255, 0.064) 82.8258%,
      rgba(3, 163, 255, 0.036) 87.6979%,
      rgba(3, 163, 255, 0.022) 92.5700%,
      rgba(3, 163, 255, 0.012) 97.4421%,
      rgba(3, 163, 255, 0.010) 99.8782%);
    /* Waagerechte Abnahme der breiten Ebene. Bei x0 nur 0,31, weil dort
       bereits ::before deckt; ohne die Senke waere die Sektionsmitte am
       linken Rand rund 5 Prozent zu hell. */
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.313) 0.0000%, rgba(0, 0, 0, 1) 1.1364%, rgba(0, 0, 0, 1) 4.5455%,
      rgba(0, 0, 0, 0.974) 5.6818%, rgba(0, 0, 0, 0.920) 6.8182%, rgba(0, 0, 0, 0.860) 7.9545%,
      rgba(0, 0, 0, 0.793) 9.0909%, rgba(0, 0, 0, 0.728) 10.2273%, rgba(0, 0, 0, 0.654) 11.3636%,
      rgba(0, 0, 0, 0.583) 12.5000%, rgba(0, 0, 0, 0.523) 13.6364%, rgba(0, 0, 0, 0.505) 15.9091%,
      rgba(0, 0, 0, 0.463) 18.1818%, rgba(0, 0, 0, 0.400) 20.4545%,
      rgba(0, 0, 0, 0.325) 22.7273%, rgba(0, 0, 0, 0.262) 25.0000%,
      rgba(0, 0, 0, 0.196) 27.2727%, rgba(0, 0, 0, 0.148) 29.5455%, rgba(0, 0, 0, 0.112) 31.8182%,
      rgba(0, 0, 0, 0.087) 34.0909%, rgba(0, 0, 0, 0.062) 37.5000%, rgba(0, 0, 0, 0.045) 40.9091%,
      rgba(0, 0, 0, 0.026) 45.4545%, rgba(0, 0, 0, 0) 55.6818%);
            mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.313) 0.0000%, rgba(0, 0, 0, 1) 1.1364%, rgba(0, 0, 0, 1) 4.5455%,
      rgba(0, 0, 0, 0.974) 5.6818%, rgba(0, 0, 0, 0.920) 6.8182%, rgba(0, 0, 0, 0.860) 7.9545%,
      rgba(0, 0, 0, 0.793) 9.0909%, rgba(0, 0, 0, 0.728) 10.2273%, rgba(0, 0, 0, 0.654) 11.3636%,
      rgba(0, 0, 0, 0.583) 12.5000%, rgba(0, 0, 0, 0.523) 13.6364%, rgba(0, 0, 0, 0.505) 15.9091%,
      rgba(0, 0, 0, 0.463) 18.1818%, rgba(0, 0, 0, 0.400) 20.4545%,
      rgba(0, 0, 0, 0.325) 22.7273%, rgba(0, 0, 0, 0.262) 25.0000%,
      rgba(0, 0, 0, 0.196) 27.2727%, rgba(0, 0, 0, 0.148) 29.5455%, rgba(0, 0, 0, 0.112) 31.8182%,
      rgba(0, 0, 0, 0.087) 34.0909%, rgba(0, 0, 0, 0.062) 37.5000%, rgba(0, 0, 0, 0.045) 40.9091%,
      rgba(0, 0, 0, 0.026) 45.4545%, rgba(0, 0, 0, 0) 55.6818%);
  }

  .lvf-s08-aura::before,
  .lvf-s08-aura::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Blaue Fahne, laeuft aus s07 herein und in s09 weiter.
     Soll x0..6: y 7680 (248,252,255), y 8300 (2,130,195), y 8500 (2,75,118). */
  .lvf-s08-aura::before {
    background-image: linear-gradient(180deg,
      rgba(3, 163, 255, 1.0) 0.0000%,
      rgba(3, 163, 255, 0.918) 4.8721%,
      rgba(3, 163, 255, 0.982) 9.7442%,
      rgba(3, 163, 255, 0.983) 14.6163%,
      rgba(3, 163, 255, 0.997) 19.4884%,
      rgba(3, 163, 255, 0.989) 24.3605%,
      rgba(3, 163, 255, 0.984) 29.2326%,
      rgba(3, 163, 255, 0.972) 34.1048%,
      rgba(3, 163, 255, 0.955) 38.9769%,
      rgba(3, 163, 255, 0.94) 43.8490%,
      rgba(3, 163, 255, 0.916) 48.7211%,
      rgba(3, 163, 255, 0.889) 53.7150%,
      rgba(3, 163, 255, 0.866) 58.5871%,
      rgba(3, 163, 255, 0.834) 63.4592%,
      rgba(3, 163, 255, 0.804) 68.3313%,
      /* Untere Marken 11.08.2026 nachgezogen: an der Grenze zu s09 sprang der
         Blaukanal von 161 auf 156, weil s08 dort 5 Stufen zu hell war
         (Soll y8510 (2,101,156), Ist (6,101,161), s09 setzt bei 8511 mit
         genau 156 an). Zusammen mit dem entfallenen Weissanteil sind das
         0,021 Deckkraft; ab 600 px eingeschlichen, damit keine Stufe
         entsteht. */
      rgba(3, 163, 255, 0.766) 73.2034%,
      rgba(3, 163, 255, 0.732) 78.0755%,
      rgba(3, 163, 255, 0.696) 82.9476%,
      rgba(3, 163, 255, 0.673) 87.8197%,
      rgba(3, 163, 255, 0.637) 92.6918%,
      rgba(3, 163, 255, 0.619) 97.5639%,
      rgba(3, 163, 255, 0.607) 99.8782%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }

  /* ---------------------------------------------------------------
     Weisser Anteil, neu vermessen 11.08.2026
     ---------------------------------------------------------------
     Der Lichtkern war als senkrechter Verlauf mal EINE waagerechte Maske
     gebaut, also ueberall gleich breit. Im Entwurf verjuengt er sich nach
     unten zu einem Keil. Weissanteil (aus dem Rotkanal geloest), Abstand
     von der Sektionsoberkante:

       y_rel     x0     x20    x40    x60    x80   x100
         4     0.968  0.950  0.917  0.867  0.711  0.455   Soll
               0.968  0.923  0.836  0.671  0.431  0.223   alte Regel
       100     0.898  0.830  0.583  0.329  0.142  0.039   Soll
               0.894  0.852  0.772  0.620  0.398  0.206   alte Regel
       196     0.555  0.307  0.124  0.032  0.001  0.000   Soll
               0.530  0.505  0.458  0.367  0.236  0.122   alte Regel

     Die alte Regel ist bei y_rel 100 an x60 fast doppelt so weiss. Genau
     das meldet werkzeuge/schein-profil.py als "laeuft ueber Weiss":
     bei y7750 / x80 Soll (65,206,251), Ist (108,157,188).

     Zuerst standen hier vier Ellipsen. Sie trafen die unteren zwei Drittel,
     die obersten 60 px aber nicht: bei y_rel 0 lagen sie an x80 bei 0,54
     statt 0,82 und an x120 bei 0,13 statt 0,33. Zusammen mit dem zu breiten
     Saum von s07 ergab das an der Naht y 7690 einen Sprung von 10,8 Stufen
     (Entwurf 1,5), im Block 88..176 px sogar 64,5.

     KEIL STATT ELLIPSEN, 12.08.2026
     Ueber das Band y 7600..7820 mal x 0..280 ist der Weissanteil im Soll
     eine Funktion allein von u = 1,80x + (y - Naht); mittlerer Fehler 0,030
     (7,6 Rotstufen). Das ist ein schraeger Linearverlauf, in CSS
     linear-gradient(118.9deg, ...) mit Stuetzstellen p = 0,4857 * u.
     Derselbe Verlauf steht in s07 am unteren Rand mit p = 0,4857*(u+80).
     Beide beschreiben dasselbe Lichtfeld, der Uebergang ist damit stetig
     konstruiert und nicht nachgerechnet.

     Ab rund 160 px unter der Naht stellen sich die Hell-Dunkel-Linien im
     Soll wieder senkrecht, dort unterschaetzt der Keil an x0 um bis zu 0,17.
     Diese Restmenge traegt die zweite, schmale Ellipse.

     CYANSAUM, dritte Lage
     Zwischen weissem Kern und tiefem Blau liegt im Entwurf ein Ring, den
     "Weiss ueber rgb(3,163,255)" nicht erzeugen kann: bei x 160 steht dort
     G 183 bei B 244, das Verhaeltnis 0,75 statt der 0,64 der Fahne. Selbst
     bei voller Fahnendeckung kaeme man nur auf G 168. Der Rotkanal stimmt
     dagegen ueberall, der Keil ist also richtig, nur der Farbton darunter
     nicht. Deshalb eine Lage rgba(0,255,255) UNTER dem Keil, entlang
     derselben Schraege. Rot bleibt 0, damit der Keil den Rotkanal weiter
     allein bestimmt; nachgerechnet ergibt das bei x120 (93,214,250) und bei
     x160 (17,183,242) gegen die Sollwerte (93,215,252) und (17,183,244). */
  .lvf-s08-aura::after {
    background-image:
      linear-gradient(118.9deg,
        rgba(255, 255, 255, 0.976) 0px,
        rgba(255, 255, 255, 0.952) 19px,
        rgba(255, 255, 255, 0.929) 39px,
        rgba(255, 255, 255, 0.881) 58px,
        rgba(255, 255, 255, 0.837) 68px,
        rgba(255, 255, 255, 0.734) 78px,
        rgba(255, 255, 255, 0.595) 87px,
        rgba(255, 255, 255, 0.448) 97px,
        rgba(255, 255, 255, 0.317) 107px,
        rgba(255, 255, 255, 0.214) 117px,
        rgba(255, 255, 255, 0.123) 126px,
        rgba(255, 255, 255, 0.063) 136px,
        rgba(255, 255, 255, 0.028) 146px,
        rgba(255, 255, 255, 0.008) 155px,
        rgba(255, 255, 255, 0) 160px),
      radial-gradient(46px 300px at -10px 130px,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.28) 40%,
        rgba(255, 255, 255, 0.12) 70%,
        rgba(255, 255, 255, 0) 100%),
      linear-gradient(118.9deg,
        rgba(0, 255, 255, 0) 29px,
        rgba(0, 255, 255, 0.020) 50px,
        rgba(0, 255, 255, 0.061) 68px,
        rgba(0, 255, 255, 0.170) 77px,
        rgba(0, 255, 255, 0.296) 85px,
        rgba(0, 255, 255, 0.350) 95px,
        rgba(0, 255, 255, 0.365) 103px,
        rgba(0, 255, 255, 0.320) 121px,
        rgba(0, 255, 255, 0.265) 138px,
        rgba(0, 255, 255, 0.170) 155px,
        rgba(0, 255, 255, 0.092) 173px,
        rgba(0, 255, 255, 0.024) 208px,
        rgba(0, 255, 255, 0) 243px);
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ================= Knopf-Effekte Desktop, 11.08.2026 =======================
   Alle Werte am Soll-Vollbild home-aus-vollbild.png gemessen, Knopfoberkante
   Soll y8336 / Ist y8349.

   PRIMAERKNOPF "Discover Lvlup Elite", Fuellung ueber x320..455 (80. Perzentil,
   damit die dunkle Schrift den Wert nicht zieht):

     Abstand von oben     2      5      9     20     32
     Soll             (181,  (152,  (130,  ( 92,  ( 57,
                       242,   224,   213,   201,   184,
                       255)   255)   255)   255)   255)
     Ist              (116,  (116,  (112,  ( 83,  ( 55,
                       202,   202,   202,   193,   182,
                       246)   248)   251)   255)   253)

   Der Glanz `inset 0 1px 18px #5bbce8` ist mit 18 px Radius ueber den halben
   Knopf verteilt und dabei DUNKLER als der Verlauf darunter: an der Oberkante
   zieht er 65 Rotstufen nach unten, statt sie anzuheben. Im Entwurf sitzt ein
   schmaler weisser Glanz direkt unter der Oberkante und ein cyanfarbener
   Schein an der Unterkante (Soll dy44 Gruen 202 gegen 171 im reinen Verlauf).

   SEKUNDAERKNOPF "Explore Evaluations", Fuellung x505..620 (20. Perzentil):

     Abstand von oben    -6      0      2     14     22     30     37     43
     Soll  Blaukanal      1      1     15      3      0     30    113    206
     Ist   Blaukanal     37    133     94     17     27     74    159    232

   Drei Fehler auf einmal: aussen liegt ein Schein, den der Entwurf nicht hat
   (37 gegen 1); der Rahmen rgba(84,187,255,0.5) leuchtet rundum, im Entwurf
   ist die Oberkante schwarz (1) und nur die Unterkante hell (Soll dy45 Blau
   225); und der Innenschein reicht mit 19 px Radius bis in die Knopfmitte
   (dy22: 27 gegen 0). ========================================================= */
@media (min-width: 1024px) {
  /* Glanz und Unterkantenschein als Fuellebenen statt als Innenschatten: ein
     `inset 0 2px 11px`-Glanz leuchtet mit 11 px Radius auch auf die
     UNTERkante durch und hob sie von 35 auf 64 Rotstufen. */
  .lvf-s08-cta {
    background:
      linear-gradient(180deg,
        rgba(90, 255, 255, 0) 70%,
        rgba(90, 255, 255, 0.06) 85%,
        rgba(90, 255, 255, 0.15) 100%) padding-box,
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.2) 11%,
        rgba(255, 255, 255, 0.107) 20%,
        rgba(255, 255, 255, 0.045) 32%,
        rgba(255, 255, 255, 0.03) 60%,
        rgba(255, 255, 255, 0.028) 78%,
        rgba(255, 255, 255, 0) 100%) padding-box,
      linear-gradient(180deg, #8cd5ff 0%, #12a9ff 100%) padding-box,
      linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 0) 100%) border-box;
    background-origin: border-box;
  }

  .lvf-page .lvf-s08-cta {
    box-shadow: var(--lvf-s08-shadow);
  }

  /* Rahmen wird zum Verlauf: oben unsichtbar, unten das helle Blau des
     Entwurfs. Die Fuellung laesst davon 45 Prozent durch, das faellt nur in
     den untersten Zeilen an und ist dort erwuenscht. */
  /* Der Schein liegt jetzt als Verlauf in der Fuellung statt als
     Innenschatten: ein `inset ... 15px`-Schatten von der Unterkante leuchtet
     mit 15 px Radius bis an die OBERkante durch (dort gemessen 133 statt 1).
     Ein Verlauf trifft das Profil des Entwurfs Zeile fuer Zeile. */
  .lvf-s08-cta2 {
    border-color: transparent;
    background:
      linear-gradient(180deg,
        rgba(25, 175, 255, 0.059) 0%,
        rgba(25, 175, 255, 0.051) 15%,
        rgba(25, 175, 255, 0.012) 30%,
        rgba(25, 175, 255, 0) 48%,
        rgba(25, 175, 255, 0.016) 57%,
        rgba(25, 175, 255, 0.075) 65%,
        rgba(25, 175, 255, 0.2) 74%,
        rgba(25, 175, 255, 0.36) 80%,
        rgba(25, 175, 255, 0.62) 87%,
        rgba(25, 175, 255, 0.808) 93%,
        rgba(40, 185, 255, 0.9) 100%),
      linear-gradient(rgba(0, 4, 8, 0.86), rgba(0, 4, 8, 0.86));
    /* Muss NACH der Kurzform stehen, die setzt background-origin sonst
       zurueck. Ohne border-box fuellt Chrome den 1 px Randstreifen durch
       Wiederholung mit der Gegenkante: die Oberkante wurde dadurch
       (34,163,227) statt (1,1,1) wie im Entwurf. */
    background-origin: border-box;
  }

  .lvf-page .lvf-s08-cta2 {
    box-shadow:
      inset 6px 6px 12px rgba(0, 0, 0, 0.8),
      var(--lvf-s08-shadow);
  }
}

/* ===== s09 ===== */
/* ============================================================
   Lvlup Futures - s09 FAQ
   Masse: Desktop-Band 1760 (Content-Spalte 1240, x=260..1500),
          Mobile-Band 440 (Content 380, x=30..410).
   Basis-Regeln = Mobile-Spec, 768-1023px interpoliert, >=1024px Desktop-Spec.
   ============================================================ */

.lvf-s09 {
  /* --- Mobile-Werte (< 768px) --- */
  --s09-pt: 63px;
  --s09-pb: 68px;

  --s09-badge-w: 83px;
  --s09-badge-h: 27px;
  --s09-badge-fs: 11px;
  --s09-head-gap: 21px;

  --s09-title-fs: 48px;
  --s09-title-max: 371px;
  --s09-title-gap: 18px;
  --s09-sub-fs: 13px;
  --s09-sub-lh: 20px;

  --s09-list-gap-top: 50px;
  --s09-item-gap: 11px;

  --s09-radius: 16px;
  --s09-pad-y: 18px;
  --s09-pad-x: 24px;
  --s09-row-h: 24px;
  --s09-row-gap: 8px;
  --s09-q-fs: 13.76px;

  --s09-btn: 24px;
  --s09-btn-radius: 8px;
  --s09-ico: 14px;

  --s09-a-fs: 12.23px;
  --s09-a-lh: 1.578;
  --s09-a-max: none;

  --s09-line-w: 190px;
  --s09-line-a: 61px;
  --s09-line-b: 138px;
  --s09-glow1-x: -5%;

  --s09-cta-gap-top: 30px;
  --s09-pill-w: 195px;
  --s09-pill-h: 40px;
  --s09-pill-fs: 13.5px;
  --s09-link-fs: 13.05px;

  --s09-btn-shadow:
    0 7px 16px -5px rgba(0, 0, 0, 0.35),
    0 0 9px rgba(0, 150, 255, 0.22),
    inset 0 2px 2px -1px rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(0, 0, 0, 0.17),
    inset 4px 5px 7px rgba(0, 0, 0, 0.85),
    inset -1px -2px 10px #52b8f1,
    inset -1px -2px 5px #00a4ff,
    inset -1px -2px 5px #00a4ff;

  position: relative;
  isolation: isolate;
  padding-block: var(--s09-pt) var(--s09-pb);
  scroll-margin-top: 100px;
}

/* Tablet: 768-1023px, linear interpoliert (bei 1024px exakt Desktop) */
@media (min-width: 768px) {
  .lvf-s09 {
    --s09-pt: clamp(63px, calc(12.109vw - 30px), 94px);
    --s09-pb: clamp(68px, calc(9.766vw - 7px), 93px);

    --s09-badge-w: clamp(83px, calc(8.203vw + 20px), 104px);
    --s09-badge-h: clamp(27px, calc(1.563vw + 15px), 31px);
    --s09-badge-fs: clamp(11px, calc(1.172vw + 2px), 14px);

    --s09-title-fs: clamp(48px, calc(6.641vw - 3px), 65px);
    --s09-title-max: clamp(371px, calc(164.844vw - 895px), 793px);
    --s09-title-gap: clamp(18px, calc(5.859vw - 27px), 33px);
    --s09-sub-fs: clamp(13px, calc(1.953vw - 2px), 18px);
    --s09-sub-lh: clamp(20px, calc(1.563vw + 8px), 24px);

    --s09-list-gap-top: clamp(50px, calc(13.672vw - 55px), 85px);
    --s09-item-gap: clamp(11px, calc(1.172vw + 2px), 14px);

    --s09-radius: clamp(16px, calc(1.953vw + 1px), 21px);
    --s09-pad-y: clamp(18px, 2.344vw, 24px);
    --s09-pad-x: clamp(24px, 3.125vw, 32px);
    --s09-row-h: clamp(24px, 3.125vw, 32px);
    --s09-row-gap: clamp(8px, calc(0.781vw + 2px), 10px);
    --s09-q-fs: clamp(13.76px, calc(1.656vw + 1.04px), 18px);

    --s09-btn: clamp(24px, 3.125vw, 32px);
    --s09-btn-radius: clamp(8px, calc(1.172vw - 1px), 11px);
    --s09-ico: clamp(14px, calc(1.563vw + 2px), 18px);

    --s09-a-fs: clamp(12.23px, calc(1.473vw + 0.92px), 16px);
    --s09-a-lh: 1.55;
    --s09-a-max: 1120px;

    --s09-line-w: clamp(190px, calc(22.656vw + 16px), 248px);
    --s09-line-a: clamp(61px, calc(7.422vw + 4px), 80px);
    --s09-line-b: clamp(138px, calc(16.406vw + 12px), 180px);
    --s09-glow1-x: 21.7%;

    --s09-cta-gap-top: clamp(30px, calc(9.375vw - 42px), 54px);
    --s09-pill-w: clamp(195px, calc(1.172vw + 186px), 198px);
    --s09-pill-h: clamp(40px, calc(0.391vw + 37px), 41px);
    --s09-pill-fs: 13.71px;
    --s09-link-fs: 13.24px;
  }
}

/* Desktop: >= 1024px, Werte 1:1 aus dem Desktop-Band */
@media (min-width: 1024px) {
  .lvf-s09 {
    --s09-pt: 94px;
    --s09-pb: 93px;

    --s09-badge-w: 104px;
    --s09-badge-h: 31px;
    --s09-badge-fs: 14px;

    /* Korrektur 11.08.2026, Quelle referenz-neu/grenzen-home.json
       (hoehendifferenz +29) plus eigene Nachmessung der Text- und
       Kartenkanten in Soll-Vollbild und Ist-Kachel. Alle Werte als Abstand
       zur Sektionsoberkante (Ist 8384, Soll 8500):
         Pille          Ist 103..114   Soll 104..115    0   passt
         Ueberschrift   Ist 153..207   Soll 146..200   +7
         Subline        Ist 245..259   Soll 229..243  +16
         Karte 1 oben   Ist 349        Soll 332       +17
         Karte 2 oben   Ist 565        Soll 535       +30
         Karte 6 oben   Ist 941        Soll 911       +30
       Kartenhoehe 80 px und Kartenabstand 14 px stimmen in beiden exakt
       (Raster 94 px), der Fehler sitzt also nur im Kopfblock und in der
       offenen Karte. Aufteilung: Pille -> Ueberschrift +7,
       Ueberschrift -> Subline +9, Subline -> Liste +1, offene Karte +12
       (Block ganz unten in dieser Datei). */
    --s09-title-fs: 65px;
    --s09-title-max: 793px;
    --s09-title-gap: 24px;  /* Ueberschrift -> Subline, Soll 24, war 33 */
    --s09-sub-fs: 18px;
    --s09-sub-lh: 24px;

    --s09-head-gap: 14px;      /* Pille -> Ueberschrift, Soll 14, war 21 */
    --s09-list-gap-top: 84px;  /* Subline -> Liste, Soll 84, war 85 */
    --s09-item-gap: 14px;

    --s09-radius: 21px;
    --s09-pad-y: 24px;
    --s09-pad-x: 32px;
    --s09-row-h: 32px;
    --s09-row-gap: 10px;
    --s09-q-fs: 18px;

    --s09-btn: 32px;
    --s09-btn-radius: 11px;
    --s09-ico: 18px;

    --s09-a-fs: 16px;
    --s09-a-lh: 1.5375;
    --s09-a-max: 1120px;

    --s09-line-w: 248px;
    --s09-line-a: 80px;
    --s09-line-b: 180px;

    --s09-cta-gap-top: 54px;
    --s09-pill-w: 198px;
    --s09-pill-h: 41px;
    --s09-pill-fs: 13.71px;
    --s09-link-fs: 13.24px;
  }
}

/* --- Hintergrund-Glows (Naeherung der "Star"-Vektoren, rein dekorativ) --- */
.lvf-s09 .lvf-s09-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 0% 34%, rgba(0, 162, 255, 0.3) 0%, rgba(0, 162, 255, 0) 72%),
    radial-gradient(38% 52% at 100% 40%, rgba(0, 162, 255, 0.26) 0%, rgba(0, 162, 255, 0) 72%),
    radial-gradient(90% 60% at 50% 104%, rgba(167, 223, 255, 0.07) 0%, rgba(4, 48, 74, 0) 72%);
}

.lvf-s09 .lvf-s09-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  /* Mobile-Content-Spalte: 380px in einem 440er Frame => 30px Rand */
  .lvf-s09 .lvf-s09-inner { padding-inline: 30px; }
}

/* ============================ Kopfblock ============================ */
.lvf-s09 .lvf-s09-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s09-head-gap);
}

.lvf-s09 .lvf-s09-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s09-badge-w);
  height: var(--s09-badge-h);
  border-radius: 78px;
  background: #00121c;
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
}

/* 0.5px Aussen-Kontur mit Verlauf */
.lvf-s09 .lvf-s09-kicker::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, rgba(52, 176, 248, 0) 0%, rgba(53, 174, 244, 0.75) 53%, rgba(49, 169, 238, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.lvf-s09 .lvf-s09-kicker { position: relative; }

.lvf-s09 .lvf-s09-kicker-text {
  font-family: var(--lvf-font-display);
  font-size: var(--s09-badge-fs);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0.06em;
  color: var(--lvf-white);
}

.lvf-s09 .lvf-s09-headtext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s09-title-gap);
  width: 100%;
}

.lvf-s09 .lvf-s09-title {
  max-width: var(--s09-title-max);
  margin: 0;
  font-family: var(--lvf-font-display);
  font-size: var(--s09-title-fs);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  background-image: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "Questions" in Blau-Verlauf (hell oben -> satt unten), wie im Soll */
.lvf-s09 .lvf-s09-title-accent {
  background-image: linear-gradient(180deg, #8fd6ff 0%, #14a6fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mobile: Zeilenfall "Frequently Asked" / "Questions" wie im Soll */
@media (max-width: 767px) {
  .lvf-s09 .lvf-s09-title-accent { display: block; }
}

.lvf-s09 .lvf-s09-sub {
  font-family: var(--lvf-font-display);
  font-size: var(--s09-sub-fs);
  font-weight: 425;
  line-height: var(--s09-sub-lh);
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================ Akkordeon ============================ */
.lvf-s09 .lvf-s09-list {
  display: flex;
  flex-direction: column;
  gap: var(--s09-item-gap);
  margin-top: var(--s09-list-gap-top);
}

.lvf-s09 .lvf-s09-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--s09-radius);
  /* Befund muster-d-home-rules.md Abschnitt 6.8/8.3: Alpha war 0.85,
     Figma-Soll 0.75. Radius/Padding/Backdrop-Filter passten bereits. */
  background: rgba(0, 0, 0, 0.75);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1.5px rgba(0, 0, 0, 0.21);
}

/* Dezente neutral-graue 1px Innen-Kontur (kein Blaustich, Soll-Optik) */
.lvf-s09 .lvf-s09-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lvf-s09 .lvf-s09-item.is-open {
  /* Dieselbe Korrektur wie an der Grundregel oben, sonst faellt die
     geoeffnete Karte beim Aufklappen auf die alte Deckkraft zurueck. */
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}

/* Ellipsen-Glow im Karteninneren, neutral weiss-grau (kein Blaustich) */
.lvf-s09 .lvf-s09-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse var(--s09-gw, 70%) 260px at var(--s09-gx, 50%) 6px,
    rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 68%);
}
.lvf-s09 .lvf-s09-item.is-open .lvf-s09-glow {
  background: radial-gradient(ellipse var(--s09-gw, 70%) 285px at var(--s09-gx, 22%) 2px,
    rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Zwei Licht-Striche auf der Oberkante der offenen Karte */
.lvf-s09 .lvf-s09-line {
  position: absolute;
  top: -1px;
  z-index: 2;
  width: var(--s09-line-w);
  height: 2px;
  border-radius: 30px;
  opacity: 0.3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
}
.lvf-s09 .lvf-s09-line--a { left: var(--s09-line-a); }
.lvf-s09 .lvf-s09-line--b { left: var(--s09-line-b); }

.lvf-s09 .lvf-s09-qh { margin: 0; font: inherit; font-weight: inherit; }

.lvf-s09 .lvf-s09-q {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s09-row-gap);
  width: 100%;
  padding: var(--s09-pad-y) var(--s09-pad-x);
  text-align: left;
  white-space: normal;
}

.lvf-s09 .lvf-s09-qtext { white-space: normal; overflow-wrap: break-word; }

.lvf-s09 .lvf-s09-qtext {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lvf-font-display);
  font-size: var(--s09-q-fs);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0.03em;
  color: var(--lvf-white);
}

.lvf-s09 .lvf-s09-btn {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--s09-btn);
  height: var(--s09-btn);
  min-height: var(--s09-row-h);
  border-radius: var(--s09-btn-radius);
  /* Dunkler Kern oben links, Blau laeuft nach unten rechts aus (Soll-Optik) */
  background:
    radial-gradient(145% 145% at 25% 16%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.14) 82%, rgba(0, 0, 0, 0) 96%),
    linear-gradient(134deg, #6ecaff 0%, #0080ca 100%);
  box-shadow: var(--s09-btn-shadow);
  transition: filter 0.2s ease;
}

.lvf-s09 .lvf-s09-ico {
  grid-area: 1 / 1;
  width: var(--s09-ico);
  height: var(--s09-ico);
}
.lvf-s09 .lvf-s09-ico--minus { display: none; }
.lvf-s09 .lvf-s09-item.is-open .lvf-s09-ico--plus { display: none; }
.lvf-s09 .lvf-s09-item.is-open .lvf-s09-ico--minus { display: block; }

.lvf-s09 .lvf-s09-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.32s ease, visibility 0s linear 0.32s;
}
.lvf-s09 .lvf-s09-item.is-open .lvf-s09-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.32s ease, visibility 0s linear 0s;
}
.lvf-s09 .lvf-s09-panel-in {
  min-height: 0;
  overflow: hidden;
}

.lvf-s09 .lvf-s09-answer {
  max-width: var(--s09-a-max);
  padding: 0 var(--s09-pad-x) var(--s09-pad-y);
  font-family: var(--lvf-font-display);
  font-size: var(--s09-a-fs);
  font-weight: 400;
  line-height: var(--s09-a-lh);
  letter-spacing: 0.06em;
  color: #858585;
}
.lvf-s09 .lvf-s09-answer p + p { margin-top: calc(1em * var(--s09-a-lh)); }

/* Zustaende */
.lvf-s09 .lvf-s09-q:hover .lvf-s09-btn,
.lvf-s09 .lvf-s09-q:focus-visible .lvf-s09-btn { filter: brightness(1.12); }
.lvf-s09 .lvf-s09-item:hover::after { opacity: 0.75; }
.lvf-s09 .lvf-s09-q:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: -3px;
  border-radius: var(--s09-radius);
}

/* ============================ CTAs ============================ */
.lvf-s09 .lvf-s09-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: var(--s09-cta-gap-top);
}

.lvf-s09 .lvf-s09-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--s09-pill-w);
  max-width: 100%;
  height: var(--s09-pill-h);
  padding: 6px 9px;
  border-radius: 12px;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    linear-gradient(134deg, rgba(110, 202, 255, 0.1) 0%, rgba(0, 128, 202, 0.1) 100%);
  box-shadow:
    7px 3px 11px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(41px);
  backdrop-filter: blur(41px);
  transition: filter 0.2s ease;
}
/* Touch-Ziel >= 44px, ohne die gezeichnete Hoehe zu veraendern */
.lvf-s09 .lvf-s09-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Unter 440 px ist die sichtbare Pille nur 40 px hoch und der nachfolgende
   Link steht in der nächsten Zeile. Der Zusatz wächst deshalb nach oben. */
.lvf-s09 .lvf-s09-pill::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

@media (max-width: 439px) {
  .lvf-s09 .lvf-s09-pill::before {
    top: -7px;
    bottom: 0;
    height: auto;
    transform: none;
  }
}

.lvf-s09 .lvf-s09-pill-ico {
  flex: 0 0 auto;
  width: 12px;
  height: 13px;
}

.lvf-s09 .lvf-s09-pill-text {
  font-family: var(--lvf-font-display);
  font-size: var(--s09-pill-fs);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0.02em;
  color: var(--lvf-blue);
  background-image: linear-gradient(180deg, #87d3ff 0%, #14a6fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lvf-s09 .lvf-s09-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--lvf-font-display);
  font-size: var(--s09-link-fs);
  font-weight: 400;
  line-height: 1.23;
  color: rgba(210, 210, 210, 0.92);
  transition: color 0.2s ease;
}

.lvf-s09 .lvf-s09-pill:hover { filter: brightness(1.35); }
.lvf-s09 .lvf-s09-link:hover { color: var(--lvf-blue-light); }
.lvf-s09 .lvf-s09-pill:focus-visible,
.lvf-s09 .lvf-s09-link:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Sehr schmale Geraete: Karten-Innenabstand leicht reduzieren */
@media (max-width: 380px) {
  .lvf-s09 { --s09-pad-x: 18px; }
  .lvf-s09 .lvf-s09-inner { padding-inline: 16px; }
}

/* Offene Karte, Desktop-Korrektur 11.08.2026 (Fortsetzung des Blocks oben).
   Gemessen ab Oberkante der offenen Karte, Ist gegen Soll:
     Frage-Text        Ist  32..44    Soll  33..45     0   passt
     Antwort Zeile 1   Ist  86        Soll  80        +6
     Antwort Zeile 2   Ist 134        Soll 129        +5
     Antwort Zeile 3   Ist 160        Soll 156        +4
     Kartenunterkante  Ist 201        Soll 189       +12
   Die Zeilenabstaende der Antwort selbst stimmen auf 1 px. Zu gross sind
   nur die Luecke zwischen Frage-Zeile und Antwort (6 px) und der Abstand
   unter der letzten Antwortzeile (6 px). Der Innenabstand OBEN an der
   Frage-Zeile bleibt unveraendert, sonst wandert der Fragetext mit.
   Nur Desktop, fuer Tablet und Mobil gibt es keine Referenz. */
@media (min-width: 1024px) {
  .lvf-s09 .lvf-s09-item.is-open .lvf-s09-q {
    padding-bottom: calc(var(--s09-pad-y) - 6px);
  }

  .lvf-s09 .lvf-s09-answer {
    padding-bottom: calc(var(--s09-pad-y) - 6px);
  }
}

/* ================= Durchlaufende Randfahne, 11.08.2026 =====================
   Im Mockup ist das seitliche Leuchten EIN Feld ueber die ganze Seite, nicht
   ein Schein je Abschnitt. Gemessen im Soll-Vollbild bei x 0..6: der Farbton
   ist ueberall rgb(3,163,255) (G/B = 0,64 in allen ruhigen Zeilen), nur die
   Deckkraft aendert sich mit der Hoehe. Die waagerechte Abnahme ist ebenfalls
   ueberall gleich (x 100 noch 45 %, x 200 noch 18 %, x 300 noch 8 %).
   Deshalb: senkrechtes Profil als Farbverlauf in px ab Sektionsoberkante,
   waagerechte Abnahme als Maske. Die letzte Marke einer Sektion ist die erste
   der naechsten, dadurch entsteht an den Grenzen kein Sprung mehr.
   Nur Desktop; unter 1024 px bleibt alles wie bisher.
   ========================================================================= */
@media (min-width: 1024px) {
  /* ---------------------------------------------------------------------
     SPEZIFITAET, 12.08.2026. Die beiden folgenden Regeln standen bis heute
     als `.lvf-s09 .lvf-s09-bg` und `.lvf-s09 .lvf-s09-bg::before` da, also
     mit Spezifitaet 0-2-0. In `lvlup-fixes/r3-home.css` steht dieselbe Sache
     als `body.page-id-7895 .lvf-s09 .lvf-s09-bg` mit 0-3-1. Damit hat die
     Override-Datei gewonnen und die Fahne dieser Datei war live wirkungslos,
     obwohl sie in referenz-neu/reparatur-home-glows.md als erledigt steht.
     Nachgewiesen am gerenderten Bild: derselbe Bau einmal mit und einmal
     ohne die Klasse `page-id-7895` am Body, 1760 px, Betragsmessung.

       Naht (Betrag, Soll)      r3-home aktiv   diese Datei aktiv
       s08/s09  8511  (0,28)          3,62             0,25
       s09/s10  9691  (0,03)          8,99             1,25
       Blaukanal ueber die ganze Sektionshoehe, x100/200/240:
                                      9,50             2,54

     Die 8,99 sind zugleich der live gemessene Wert, die lokale Vorschau mit
     Klasse bildet den Server also genau ab (Befund 25).

     Deshalb hier vier Klassen (0-4-0) statt zwei. Das schlaegt 0-3-1, ohne
     die Seiten-ID in ein Fragment zu holen, das die Seite nicht kennen soll.
     SAUBERE LOESUNG waere, den s09-Block aus r3-home.css zu entfernen (dort
     Zeilen 487 bis 542); dann kann dieser Ueberbietung wieder weichen.
     Unter 1024 px bleibt r3-home.css bewusst zustaendig, dort ist nichts
     nachgemessen und nichts angefasst.
     --------------------------------------------------------------------- */

  /* Vorher endete die Flaeche an der Oberkante mit einer Linie und in der
     Mitte lag ein Dunst (Soll y 9300 Mitte 0 gegen Ist 2..7, Soll y 8560
     Mitte 0 gegen Ist 15). Der Schein gehoert nur an den Rand.
     Der Rest von r3-home.css, den das mit abraeumt, ist die dritte Radiale
     `90% 60% at 50% 104%` mit rgba(167,223,255,0.07): ueber Schwarz ergibt
     die (12,16,18), gemessen am unteren Sektionsrand (10,14,16), waehrend
     der Entwurf dort 0 zeigt. Sie allein trug den Mittelteil des Sprungs
     an der Naht 9691 (Bloecke 4 bis 16: 8,7 bis 13,3). */
  .lvf-s09 .lvf-s09-bg.lvf-s09-bg.lvf-s09-bg {
    background: none;
  }

  /* Soll x0..6: Oberkante y 8500 (2,101,158), y 9000 (1,68,108),
     Unterkante y 9680 (2,45,71). Gleiche Bauart wie s05 bis s08. */
  .lvf-s09 .lvf-s09-bg.lvf-s09-bg.lvf-s09-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg,
      rgba(3, 163, 255, 0.621) 0px,
      rgba(3, 163, 255, 0.595) 40px,
      rgba(3, 163, 255, 0.573) 80px,
      rgba(3, 163, 255, 0.554) 120px,
      rgba(3, 163, 255, 0.537) 160px,
      rgba(3, 163, 255, 0.517) 200px,
      rgba(3, 163, 255, 0.504) 240px,
      rgba(3, 163, 255, 0.487) 280px,
      rgba(3, 163, 255, 0.471) 320px,
      rgba(3, 163, 255, 0.456) 360px,
      rgba(3, 163, 255, 0.444) 400px,
      rgba(3, 163, 255, 0.432) 440px,
      rgba(3, 163, 255, 0.422) 480px,
      rgba(3, 163, 255, 0.406) 520px,
      rgba(3, 163, 255, 0.398) 560px,
      rgba(3, 163, 255, 0.387) 600px,
      rgba(3, 163, 255, 0.376) 640px,
      rgba(3, 163, 255, 0.364) 680px,
      rgba(3, 163, 255, 0.352) 720px,
      rgba(3, 163, 255, 0.341) 760px,
      rgba(3, 163, 255, 0.332) 800px,
      rgba(3, 163, 255, 0.32) 840px,
      rgba(3, 163, 255, 0.311) 880px,
      rgba(3, 163, 255, 0.297) 920px,
      rgba(3, 163, 255, 0.291) 960px,
      rgba(3, 163, 255, 0.286) 1000px,
      rgba(3, 163, 255, 0.282) 1040px,
      rgba(3, 163, 255, 0.276) 1080px,
      rgba(3, 163, 255, 0.278) 1120px,
      rgba(3, 163, 255, 0.278) 1160px,
      rgba(3, 163, 255, 0.278) 1179px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.87) 20px, rgba(0, 0, 0, 0.75) 40px, rgba(0, 0, 0, 0.642) 60px, rgba(0, 0, 0, 0.54) 80px, rgba(0, 0, 0, 0.452) 100px, rgba(0, 0, 0, 0.374) 120px, rgba(0, 0, 0, 0.307) 140px, rgba(0, 0, 0, 0.254) 160px, rgba(0, 0, 0, 0.21) 180px, rgba(0, 0, 0, 0.182) 200px, rgba(0, 0, 0, 0.156) 220px, rgba(0, 0, 0, 0.139) 240px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.099) 280px, rgba(0, 0, 0, 0.084) 300px, rgba(0, 0, 0, 0.06) 320px, rgba(0, 0, 0, 0.04) 340px, rgba(0, 0, 0, 0.02) 360px, rgba(0, 0, 0, 0.0) 380px, rgba(0, 0, 0, 0.0) calc(100% - 380px), rgba(0, 0, 0, 0.02) calc(100% - 360px), rgba(0, 0, 0, 0.04) calc(100% - 340px), rgba(0, 0, 0, 0.06) calc(100% - 320px), rgba(0, 0, 0, 0.084) calc(100% - 300px), rgba(0, 0, 0, 0.099) calc(100% - 280px), rgba(0, 0, 0, 0.12) calc(100% - 260px), rgba(0, 0, 0, 0.139) calc(100% - 240px), rgba(0, 0, 0, 0.156) calc(100% - 220px), rgba(0, 0, 0, 0.182) calc(100% - 200px), rgba(0, 0, 0, 0.21) calc(100% - 180px), rgba(0, 0, 0, 0.254) calc(100% - 160px), rgba(0, 0, 0, 0.307) calc(100% - 140px), rgba(0, 0, 0, 0.374) calc(100% - 120px), rgba(0, 0, 0, 0.452) calc(100% - 100px), rgba(0, 0, 0, 0.54) calc(100% - 80px), rgba(0, 0, 0, 0.642) calc(100% - 60px), rgba(0, 0, 0, 0.75) calc(100% - 40px), rgba(0, 0, 0, 0.87) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }
}

/* ================= Karten- und Knopfeffekte Desktop, 11.08.2026 ============
   Alle Werte am Soll-Vollbild home-aus-vollbild.png gemessen; die Sektion
   sitzt in Soll und Ist bei y8511, der Karteninhalt im Ist rund 13 px tiefer.
   ========================================================================= */
@media (min-width: 1024px) {
  /* KONTUR DER FRAGEKARTEN
     Sie ist live neutral grau, im Entwurf blau, und sie laeuft nach unten aus.
     Zeile fuer Zeile ueber x600..900 gemessen:

       geschlossene Karte 2, Oberkante   Soll (1,25,35) / (0,25,37)
                                         Ist  (39,39,40)
       offene Karte 1, Oberkante         Soll (0,32,46) / (0,23,34)
                                         Ist  (41,41,42)
       offene Karte 1, linke Kante       Soll (0,30,46)   Ist (27,27,29)
       offene Karte 1, Unterkante        Soll  keine Linie, (1,2,4) -> (0,1,1)
                                         Ist  (14,14,15)

     Der Rotkanal entscheidet: 39 gegen 0. Aus der Tinte der beiden
     Soll-Zeilen (Gruen 42, Blau 58 ueber dem Kartengrund) ergibt sich eine
     1-px-Linie mit rgba(0,162,255,0.235). Unten faellt sie auf null, deshalb
     der Verlauf. */
  .lvf-s09 .lvf-s09-item::after {
    background: linear-gradient(180deg,
      rgba(0, 162, 255, 0.235) 0%,
      rgba(0, 162, 255, 0.2) 50%,
      rgba(0, 162, 255, 0.04) 92%,
      rgba(0, 162, 255, 0) 100%);
  }

  /* PLUS-/MINUSKNOPF
     Der blaue Innenschein reicht bis in die obere Knopfhaelfte, im Entwurf
     ist dort fast alles schwarz. Senkrecht ueber x1442..1462, Abstand von
     der Knopfoberkante:

       dy      0      10     14     22     26     29
       Soll (0,7,11)(0,8,12)(1,9,13)(2,11,17)(16,40,54)(22,107,155)
       Ist (22,39,50)(10,26,36)(15,48,66)(19,56,79)(31,112,158)(42,157,220)

     Also: dunkler Kern groesser und dichter, Schein nur noch als schmaler
     Saum an der Unterkante. */
  .lvf-s09 .lvf-s09-btn {
    background:
      radial-gradient(150% 150% at 22% 12%,
        rgba(0, 0, 0, 0.97) 0%,
        rgba(0, 0, 0, 0.9) 46%,
        rgba(0, 0, 0, 0.5) 76%,
        rgba(0, 0, 0, 0) 96%),
      linear-gradient(134deg, #6ecaff 0%, #0080ca 100%);
    box-shadow:
      0 7px 16px -5px rgba(0, 0, 0, 0.35),
      0 0 7px rgba(0, 150, 255, 0.16),
      inset 0 2px 2px -1px rgba(255, 255, 255, 0.05),
      0 0 0 2px rgba(0, 0, 0, 0.17),
      inset 4px 5px 7px rgba(0, 0, 0, 0.85),
      inset -1px -2px 5px rgba(82, 184, 241, 0.7),
      inset -1px -2px 3px rgba(0, 164, 255, 0.75);
  }

  /* CTA-PILLE "Still have questions"
     Fuellung ueber x720..770 (Median, textfreie Zeilen):
       Soll (9,18,25)   Ist (18,30,42)
     Der Untergrund unter der Pille ist live (11,14,24), im Entwurf deutlich
     dunkler. Gerechnet und am Probelauf nachgemessen passen 0,06 fuer die
     blaue Ebene und 0,34 fuer die schwarze. */
  .lvf-s09 .lvf-s09-pill {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)),
      linear-gradient(134deg, rgba(110, 202, 255, 0.06) 0%, rgba(0, 128, 202, 0.06) 100%);
  }
}

/* ===== s10 ===== */
/* == s10 Final CTA ==
   Basis = Mobile-Design (Frame 440). 768-1023 interpoliert, >=1024 exakt Desktop-Design (Frame 1760).
   Alle Masse aus figma/specs/s10-final-cta-*.txt bzw. dem Band-JSON. */

.lvf-s10 {
  /* Mobil-Einheit: 1px bei 440 Designbreite, darunter proportional kleiner, darueber eingefroren. */
  --lvf-s10-u: min(1px, 0.2272727vw);

  --lvf-s10-r: calc(22 * var(--lvf-s10-u));            /* Kartenradius */
  --lvf-s10-ring: calc(4.903 * var(--lvf-s10-u));      /* Aussenrahmen (Figma: OUTSIDE stroke) */
  --lvf-s10-pad-b: calc(36 * var(--lvf-s10-u));        /* Karte padding-block */
  --lvf-s10-pad-i: calc(26.5 * var(--lvf-s10-u));      /* Karte padding-inline */
  --lvf-s10-gap: calc(31 * var(--lvf-s10-u));          /* Abstand Kopf / Stats / Buttons */
  --lvf-s10-gap-head: calc(18 * var(--lvf-s10-u));     /* Headline -> Sub */
  --lvf-s10-title: calc(37 * var(--lvf-s10-u));
  --lvf-s10-title-lh: calc(40 * var(--lvf-s10-u));
  --lvf-s10-sub: calc(13 * var(--lvf-s10-u));
  --lvf-s10-stat: calc(27 * var(--lvf-s10-u));         /* Stat-Zahl, Icons/Label leiten sich in em ab */
  --lvf-s10-stat-gap: calc(67 * var(--lvf-s10-u));
  --lvf-s10-stat-rowgap: calc(21 * var(--lvf-s10-u));
  /* Untergrenze 13px, 13.08.2026: unter 440px Designbreite schrumpfte die
     Knopfschrift mit --lvf-s10-u proportional mit, bei 390px auf gemessene
     11,5px (13 * 0,8864). Das ist die einzige Stelle im Kartenkopf, an der
     die Schrumpfung eine interaktive Beschriftung trifft (Sub-Text darueber
     bleibt bewusst proportional, ist keine Bedienflaeche). Rest der Karte
     (Titel, Stats, Abstaende) skaliert unveraendert weiter mit --lvf-s10-u,
     nur die Knopfschrift friert wie oberhalb 440px auf den Entwurfswert ein.
     max() statt literalem 13px, weil calc(13*u) durch min(1px,..) in
     --lvf-s10-u nie ueber 13px steigen kann - die Untergrenze ist zugleich
     die Obergrenze, damit bleibt die Absicht im Code lesbar. */
  --lvf-s10-btn: max(13px, calc(13 * var(--lvf-s10-u)));   /* Button-Schrift, Rest in em */
  /* Zuschlag je Seite fuer das Antippfeld der beiden Knoepfe: genau der Rest,
     der der realen Knopfhoehe (2.765 * --lvf-s10-btn) auf 44 px fehlt, nach
     unten begrenzt auf die bisherigen 4 px. Gerechnet wird auf 44.1 statt 44:
     Chrome legt Elementhoehen auf 1/64 px, ohne den Aufschlag kaeme dabei
     43,99 heraus. Siehe Block am Dateiende. */
  --lvf-s10-tap: max(4px, calc((44.1px - 2.765 * var(--lvf-s10-btn)) / 2));
  --lvf-s10-shadow: 5px 5px 14px rgba(0, 0, 0, 0.25), 19px 17px 26px rgba(0, 0, 0, 0.21), 42px 40px 35px rgba(0, 0, 0, 0.13);

  position: relative;
  padding: calc(32 * var(--lvf-s10-u)) 0 calc(14 * var(--lvf-s10-u));
  background: transparent;
}

.lvf-s10-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lvf-s10-container { padding-inline: calc(30 * var(--lvf-s10-u)); }

/* ---------- Karte ---------- */
.lvf-s10-card {
  position: relative;
  border-radius: var(--lvf-s10-r);
  background: #000000;                                   /* Rectangle 402 (schwarz) ueber Rectangle 401 rgba(0,0,0,0.1) */
  box-shadow: 4px 14px 14px rgba(0, 0, 0, 0.25);
  padding: var(--lvf-s10-pad-b) var(--lvf-s10-pad-i);
}

/* Aussenrahmen: 4.9px (mobil) bzw. 10px (Desktop) OUTSIDE, Verlauf mit Deckkraft 0.19 */
.lvf-s10-card::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lvf-s10-ring));
  border-radius: calc(var(--lvf-s10-r) + var(--lvf-s10-ring));
  padding: var(--lvf-s10-ring);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.0608) 0%, rgba(255, 255, 255, 0.0095) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Glow-Ebene: Naeherung der weichgezeichneten Star-Vektoren. Groessen/Zentren
   aus den Figma-Boxen der Star-Vektoren relativ zur Karte umgerechnet. */
.lvf-s10-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Mobil (vermessen am Soll): hellste Zone oben RECHTS (weiss-blau), dazu ein
     breites helles Band am unteren Kartenrand (unter den Buttons), Mitte dunkles
     Marineblau mit Blaustich, linke Flanke dezent. Weich auslaufend, keine Kanten. */
  background:
    radial-gradient(85% 35% at 100% 0%, rgba(90, 195, 250, 0.70) 0%, rgba(25, 145, 220, 0.45) 45%, rgba(0, 162, 255, 0) 80%),
    radial-gradient(140% 50% at 50% 104%, rgba(70, 165, 230, 0.60) 0%, rgba(25, 115, 175, 0.40) 45%, rgba(0, 162, 255, 0) 85%),
    radial-gradient(70% 38% at 0% 102%, rgba(50, 150, 215, 0.55) 0%, rgba(0, 162, 255, 0) 80%),
    radial-gradient(45% 22% at 0% 0%, rgba(25, 100, 160, 0.35) 0%, rgba(0, 162, 255, 0) 75%),
    linear-gradient(180deg, rgba(4, 18, 28, 0.55) 0%, rgba(6, 24, 38, 0.50) 40%, rgba(10, 38, 60, 0.50) 70%, rgba(16, 58, 88, 0.45) 100%);
}

/* ---------- Deko-Pfeile und -Rauten (Group 2147224196), an der Karte geclippt ---------- */
.lvf-s10-deco {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

/* Alte lange Deko-Pfeile: nur Desktop (ab 768), mobil durch die 3D-Pfeile ersetzt */
.lvf-s10-arrow {
  position: absolute;
  display: none;
  width: calc(120 * var(--lvf-s10-u));
  aspect-ratio: 1 / 2;
  height: auto;
}
.lvf-s10-arrow--l {
  left: calc(-80 * var(--lvf-s10-u));
  top: calc(-140 * var(--lvf-s10-u));
  width: calc(100 * var(--lvf-s10-u));
  transform: rotate(-42deg);
  opacity: 0.9;
}

/* Mobil: blauer 3D-VollPfeil an der oberen linken Kartenecke, zeigt nach unten rechts
   und ragt ueber den Kartenrand hinaus (Soll: ca. 90x60px sichtbar an Sektion x=0-100,
   y=0-60; Figma-Box 200x193, massiv verlaesslich nur der helle Kern) */
.lvf-s10-arrowhead {
  position: absolute;
  width: calc(95 * var(--lvf-s10-u));
  aspect-ratio: 1 / 1;
  height: auto;
  left: calc(-20 * var(--lvf-s10-u));
  top: calc(-20 * var(--lvf-s10-u));
  opacity: 0.95;
  filter: drop-shadow(0 calc(8 * var(--lvf-s10-u)) calc(22 * var(--lvf-s10-u)) rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

/* Mobil: blauer 3D-Vollpfeil am rechten Kartenrand, zeigt nach oben
   (Soll: Sektion y=150-220 am rechten Rand, teilweise von der Karte geclippt) */
.lvf-s10-arrow3d {
  position: absolute;
  width: calc(76 * var(--lvf-s10-u));
  aspect-ratio: 1 / 1;
  height: auto;
  left: calc(320 * var(--lvf-s10-u));
  top: calc(140 * var(--lvf-s10-u));
  opacity: 0.95;
  filter: drop-shadow(0 calc(8 * var(--lvf-s10-u)) calc(22 * var(--lvf-s10-u)) rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.lvf-s10-arrow--r {
  left: calc(330 * var(--lvf-s10-u));
  top: calc(115 * var(--lvf-s10-u));
  width: calc(115 * var(--lvf-s10-u));
  transform: rotate(-16deg);
  opacity: 0.85;
}

.lvf-s10-diamond {
  position: absolute;
  width: calc(96 * var(--lvf-s10-u));
  aspect-ratio: 1 / 1;
  height: auto;
  display: none;                       /* im Mobile-Design nicht sichtbar */
}
.lvf-s10-diamond--r { transform: scaleX(-1); }

.lvf-s10-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lvf-s10-gap);
  margin-inline: auto;
}

/* ---------- Kopf ---------- */
.lvf-s10-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lvf-s10-gap-head);
  width: 100%;
}

.lvf-s10-title {
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s10-title);
  font-weight: 500;
  line-height: var(--lvf-s10-title-lh);
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  text-box-trim: trim-both;
  /* Untere Kante auf text statt alphabetic, 13.08.2026: der Titel enthaelt
     "$25K", "$150K" und "$1M". Das Dollarzeichen ragt oben UND unten ueber
     Versal-/Grundlinie hinaus; mit "cap alphabetic" schnitt das Trim beide
     Enden weg (Nachweis referenz-neu/pruefung/belege/home-s08-s10/
     s10-kennzahlen.png, dort "$1M" wird zu "S1M"). "cap text" behaelt das
     enge obere Trim (Versalhoehe, unveraendert), gibt der Unterkante aber so
     viel Raum wie die Schriftmetrik fuer Unterlaengen vorsieht - dieselbe
     Loesung wie bei .lvf-s10-stat-label (siehe NOTIZ-R3), dort schon fuer
     "Max Funding"/"Min Trading Day" (g/y) angewendet. */
  text-box-edge: cap text;
  text-box: trim-both cap text;
}

/* Zeichen-Override aus dem rohen Figma-Knoten 156:7481. */
.lvf-s10-title-blue {
  font-weight: 600;
  color: #2bb1ff;
}

.lvf-s10-sub {
  font-family: var(--lvf-font-display);
  font-size: var(--lvf-s10-sub);
  font-weight: 425;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  width: 100%;
}

/* ---------- Stats ---------- */
/* Mobil spaltenweise gefuellt: links 100% + $1M, rechts 10% + Five (wie im Soll) */
.lvf-s10-stats {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  justify-content: center;
  justify-items: start;
  column-gap: var(--lvf-s10-stat-gap);
  row-gap: var(--lvf-s10-stat-rowgap);
}

.lvf-s10-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--lvf-s10-stat);
}

.lvf-s10-stat-top {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.lvf-s10-ico { display: block; flex: none; }
.lvf-s10-ico--split { width: 0.90em; height: 0.81em; }
.lvf-s10-ico--funding { width: 0.84em; height: 0.75em; }
.lvf-s10-ico--payout,
.lvf-s10-ico--days { width: 0.75em; height: 0.75em; }

.lvf-s10-stat-value {
  font-family: var(--lvf-font-display);
  font-size: 1em;
  font-weight: 555;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--lvf-blue-light);
  text-box-trim: trim-both;
  /* Gleicher Befund und gleiche Loesung wie bei .lvf-s10-title: "$1M" verlor
     mit "cap alphabetic" beide Balken des Dollarzeichens und wurde zu "S1M"
     lesbar (Beleg s10-kennzahlen.png). "cap text" gibt der Unterkante die
     Schriftmetrik-Unterlaenge zurueck, die Versalhoehe oben bleibt eng. */
  text-box-edge: cap text;
  text-box: trim-both cap text;
}

.lvf-s10-stat-label {
  margin-top: 0.22em;
  font-family: var(--lvf-font-display);
  font-size: 0.36em;
  font-weight: 500;
  line-height: 1.23;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  text-box-trim: trim-both;
  /* Untere Kante auf text statt alphabetic: sonst schneidet das Trim die
     Unterlaengen von g/y ab (mobil: "Max Fundin", "Min Trading Dav"). */
  text-box-edge: cap text;
  text-box: trim-both cap text;
}

/* Verlaufsschrift nur wo unterstuetzt, sonst bleibt die Volltonfarbe stehen */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lvf-s10-title,
  .lvf-s10-stat-label {
    background-image: linear-gradient(141deg, rgba(255, 255, 255, 0.7) 0%, #ffffff 50.5%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .lvf-s10-stat-value {
    background-image: var(--lvf-grad-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .lvf-s10-title-blue {
    background-image: var(--lvf-grad-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- Buttons ---------- */
/* Mobil nebeneinander ueber die volle Kartenbreite (wie im Soll), ab 768 natuerliche Breiten */
.lvf-s10-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: var(--lvf-s10-btn);
  gap: 0.47em;
  /* Sicherheitsnetz fuer den Breitenlauf 320-1760px, 13.08.2026: unter etwa
     362px reicht die Kartenbreite nicht mehr fuer beide Knoepfe nebeneinander
     (".lvf-s10-btn" hat "min-width:0" und schrumpft dann UNTER die eigene
     Beschriftung, die Schrift #060606 verschwindet auf dem schwarzen
     Seitengrund). Belegt am Primaerknopf "Choose Your Evaluation" bei 320px:
     Beschriftung 155px, Knopfbreite nur 144px, das letzte Zeichen unsichtbar.
     Ab 362px (gemessen, Nulldurchgang zwischen 361 und 362px) passt beides
     wieder zusammen, "flex-wrap" greift dort also gar nicht ein. Selbe
     Technik wie heute in s08 (".lvf-s08-actions { flex-wrap: wrap }") als
     Ausweichebene, nicht als Regelfall. */
  flex-wrap: wrap;
}

.lvf-s10-btn,
.lvf-s10-btn2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.765em;
  border-radius: 0.61em;
  font-family: var(--lvf-font-display);
  font-size: 1em;
  line-height: 1.5;
  white-space: nowrap;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}

/* Vergroessertes Antippfeld: reale Knopfhoehe + 2x --lvf-s10-tap = 44px.
   Der Zuschlag ist nicht fest, weil die Knopfhoehe unter 440px Designbreite
   mitschrumpft; bei 440px und darueber sind es die bisherigen 4 px.
   Rueckfall 4px, falls die Variable im Kontext fehlt, siehe Dateiende. */
.lvf-s10-btn::before,
.lvf-s10-btn2::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lvf-s10-tap, 4px)) 0;
}

.lvf-s10-btn {
  gap: 0.47em;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 0.71em 0 0.3em;
  /* Saum-Verlauf statt --lvf-grad-blue plus inset-Schatten, 11.08.2026.
     Gilt unter 1024 px; ab 1024 px setzt der Block "Knopf-Effekte Desktop"
     weiter unten eine eigene Fuellung, die den Saum schon als Schicht traegt. */
  background-image: var(--lvf-grad-blue-btn);
  color: #060606;
  font-weight: 500;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* Beide Knöpfe sind <a>. Elementors ".elementor a { box-shadow: none }"
   (0-1-1) hat ihre Schatten gelöscht. Gemessen an der Unterkante von
   "View the Rules": Soll RGB(22,140,206), Ist RGB(5,19,26).
   Wichtig: die Fassung für breite Bildschirme weiter unten braucht dieselbe
   Anhebung, sonst würde diese Grundregel sie überstimmen. */
.lvf-page .lvf-s10-btn {
  /* Ohne inset-Saum seit 11.08.2026, der sitzt in --lvf-grad-blue-btn. */
  box-shadow: var(--lvf-s10-shadow);
}

.lvf-s10-btn-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.16em;
  height: 2.16em;
  border-radius: 0.31em;
  background: #060606;
}
.lvf-s10-btn-ico svg { display: block; width: 1.08em; height: 1.08em; }

.lvf-s10-btn-label { display: block; }

/* 0.5px Rahmen des Primaer-Buttons: 90deg transparent -> #00a2ff -> transparent */
.lvf-s10-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.5px;
  background: linear-gradient(90deg, rgba(0, 162, 255, 0) 0%, #00a2ff 50%, rgba(0, 162, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.lvf-s10-btn2 {
  min-width: 0;
  flex: 0 1 auto;
  padding-inline: 1em;
  /* Sichtbare Pillen-Fuellung (Befund desktop R3, Sekundaer-Button): SOLL-Fuellung
     RGB(6,18,24), vorher fast unsichtbar auf Schwarz. */
  background: rgba(6, 18, 24, 0.9);
  color: #ffffff;
  font-weight: 400;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.lvf-page .lvf-s10-btn2 {
  box-shadow:
    inset -2px -5px 15px #52b8f1,
    inset -4px -3px 12px #00a4ff,
    inset -1px -1px 4px #00a4ff,
    inset 7px 6px 10px #000000,
    var(--lvf-s10-shadow);
}

.lvf-s10-btn:hover { filter: brightness(1.07); }
.lvf-s10-btn2:hover { filter: brightness(1.12); }
.lvf-s10-btn:focus-visible,
.lvf-s10-btn2:focus-visible {
  outline: 2px solid var(--lvf-blue-light);
  outline-offset: 3px;
}

/* ---------- Tablet 768-1023: linear interpoliert auf die Desktop-Werte bei 1024 ---------- */
@media (min-width: 768px) {
  .lvf-s10 {
    --lvf-s10-r: calc(5.859vw - 15px);            /* 30 -> 45 */
    --lvf-s10-ring: calc(1.5625vw - 6px);         /* 6 -> 10 */
    --lvf-s10-pad-b: calc(16.797vw - 83px);       /* 46 -> 89 */
    --lvf-s10-pad-i: calc(34.375vw - 230px);      /* 34 -> 122 */
    --lvf-s10-gap: calc(5.078vw - 5px);           /* 34 -> 47 */
    --lvf-s10-gap-head: calc(3.906vw - 6px);      /* 24 -> 34 */
    --lvf-s10-title: calc(10.156vw - 34px);       /* 44 -> 70 */
    --lvf-s10-title-lh: calc(8.594vw - 22.9px);   /* 43.1 -> 65.1 */
    --lvf-s10-sub: calc(2.734vw - 4px);           /* 17 -> 24 */
    --lvf-s10-stat: calc(2.821vw + 8.33px);       /* 30 -> 37.22 */
    --lvf-s10-stat-gap: calc(25.781vw - 168px);   /* 30 -> 96 */
    --lvf-s10-btn: calc(0.641vw + 10.08px);       /* 15 -> 16.64 */
    --lvf-s10-shadow: 6px 6px 18px rgba(0, 0, 0, 0.25), 24px 22px 33px rgba(0, 0, 0, 0.21), 53px 50px 44px rgba(0, 0, 0, 0.13);

    padding: calc(3.906vw + 3px) 0 calc(3.906vw);   /* 33/30 bei 768, 43/40 bei 1024 */
  }

  .lvf-s10-container { padding-inline: 20px; }

  .lvf-s10-card { box-shadow: 7.23px 28.93px 28.93px rgba(0, 0, 0, 0.25); }

  .lvf-s10-brm { display: none; }

  /* 4 Stats nebeneinander wie im Desktop-Design */
  .lvf-s10-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--lvf-s10-stat-gap);
  }

  .lvf-s10-btn::before,
  .lvf-s10-btn2::before { content: none; }

  .lvf-s10-actions { width: auto; }
  .lvf-s10-btn { flex: none; min-width: 14.2em; }
  .lvf-s10-btn2 { flex: none; min-width: 10.15em; }

  .lvf-s10-btn { -webkit-backdrop-filter: blur(8.32px); backdrop-filter: blur(8.32px); }
  .lvf-s10-btn2 {
    -webkit-backdrop-filter: blur(8.32px);
    backdrop-filter: blur(8.32px);
  }
  /* Zwei Klassen wie oben (Elementor löscht Schatten an <a>). Muss hier
     wiederholt werden, sonst gewinnt die 0-2-0-Grundregel weiter oben. */
  .lvf-page .lvf-s10-btn { box-shadow: var(--lvf-s10-shadow); }
  .lvf-page .lvf-s10-btn2 {
    box-shadow:
      inset -2px -6px 19.4px #52b8f1,
      inset -5px -4px 15.7px #00a4ff,
      inset -0.78px -1.56px 4.53px #00a4ff,
      inset 9px 7px 12.1px #000000,
      var(--lvf-s10-shadow);
  }

  /* Desktop (vermessen am Soll): hellste Zone oben RECHTS (weiss-blau), rechte Flanke
     und beide unteren Ecken sattblau, linke Flanke mittelblau, Mitte/oben dunkles
     Marineblau. Zwei grosse weiche Radial-Glows (Zentren jenseits der Raender) plus
     dunkle Basisrampe; alles weich auslaufend, keine harten Kanten. */
  .lvf-s10-glow {
    /* Messpass 06.08.2026: das Soll-Panel ist nur an der OBERKANTE hell
       (weiss-blauer Deckel, nach ~100px ausgelaufen), die Mitte ist dunkles
       Marineblau (x441/y9900: 13,29,39). Die alten Ecken-Radials fluteten
       das halbe Panel. */
    background:
      /* Nachmessung 2: die Panel-MITTE ist im Soll auch oben dunkel (x735
         y9760-9860: 0-3) - nur eine duenne helle Oberkante plus Seitensaeume,
         rechts kraeftig (x1400 y9760-9860: 82-107,181-193,236-244) */
      radial-gradient(120% 60px at 50% -10px, rgba(200, 235, 255, 0.8) 0%, rgba(90, 190, 250, 0.35) 50%, rgba(0, 140, 210, 0) 100%),
      radial-gradient(30% 55% at 105% 16%, rgba(90, 195, 250, 0.75) 0%, rgba(30, 140, 210, 0.4) 55%, rgba(0, 162, 255, 0) 80%),
      radial-gradient(24% 45% at -5% 20%, rgba(30, 120, 185, 0.5) 0%, rgba(10, 90, 150, 0.25) 55%, rgba(0, 162, 255, 0) 80%),
      radial-gradient(85% 45% at 50% 110%, rgba(45, 150, 215, 0.65) 0%, rgba(15, 90, 140, 0.3) 50%, rgba(0, 162, 255, 0) 82%),
      linear-gradient(180deg, rgba(4, 20, 32, 0.65) 0%, rgba(6, 26, 42, 0.7) 40%, rgba(8, 34, 54, 0.68) 72%, rgba(12, 46, 72, 0.6) 100%);
  }

  /* Deko: Pfeile unten links/rechts, Rauten daneben, beide an der Unterkante geclippt */
  .lvf-s10-arrowhead,
  .lvf-s10-arrow3d { display: none; }

  .lvf-s10-arrow {
    display: block;
    width: 12%;
    /* 0.85 -> 0.57, 13.08.2026 (Fund SERVER BESSER, klein). Server-Override
       r3b-home.css Zeile 377-379 setzt 0.57 und liegt damit naeher am Mockup:
       der Pfeil soll im hellen Kartengrund fast untergehen (halbtransparent),
       bei 0.85 tritt er stattdessen deckend hervor. Rechnung im Override-
       Kommentar: aus Kontrast IST 134 gegen SOLL 90 folgt 0.57 (Gegenprobe an
       zweiter Messstelle: 195 gerechnet gegen 181 gemessen). Nur Groesse und
       Position wurden geprueft und stimmen bereits (r3-home.css Zeile 591-605,
       "Kaans Werte liegen naeher am Soll"), hier unveraendert. */
    opacity: 0.57;
    top: auto;
  }
  .lvf-s10-arrow--l { left: 1.5%; bottom: -15%; transform: rotate(-12deg); }
  .lvf-s10-arrow--r { left: auto; right: 1.5%; bottom: -15%; transform: rotate(12deg); }

  .lvf-s10-diamond { display: block; width: 9.7%; }
  .lvf-s10-diamond--l { left: 16.2%; bottom: -6.4%; }
  .lvf-s10-diamond--r { right: 16.2%; bottom: -6.4%; }
}

/* ---------- Desktop >=1024: exakte Werte aus dem Desktop-Band ---------- */
@media (min-width: 1024px) {
  .lvf-s10 {
    --lvf-s10-r: 45px;
    --lvf-s10-ring: 10px;
    --lvf-s10-pad-b: 89px;
    --lvf-s10-pad-i: 122px;
    --lvf-s10-gap: 47px;
    --lvf-s10-gap-head: 34px;
    --lvf-s10-title: 70px;
    --lvf-s10-title-lh: 65.1px;
    --lvf-s10-sub: 24px;
    --lvf-s10-stat: 37.22px;
    --lvf-s10-stat-gap: 96px;
    --lvf-s10-btn: 16.64px;

    /* Messpass 10.08.2026: Sektion soll 650px hoch sein (Figma-Band
       s10-final-cta-desktop.json 9680..10330), war 628px. Die Karte selbst
       stimmt (Soll 547, Ist 545), zu klein waren die Aussenabstaende.
       Die 50px unten bilden zusammen mit den 48px oben in s11 den
       Soll-Abstand von 98px zwischen CTA-Karte und Footer-Karte. */
    padding: 53px 0 50px;
  }

  .lvf-s10-content { width: 995px; max-width: 100%; }

  /* Deko exakt nach Desktop-Band: Vektorboxen (170/1185, 10042) rel. Karte (260, 9733) */
  .lvf-s10-arrow { width: 150px; }
  .lvf-s10-arrow--l { left: 18px; bottom: -80px; }
  .lvf-s10-arrow--r { right: 18px; bottom: -80px; }
  .lvf-s10-diamond { width: 120px; }
  .lvf-s10-diamond--l { left: 200px; bottom: -48px; }
  .lvf-s10-diamond--r { right: 200px; bottom: -48px; }

  .lvf-s10-btn,
  .lvf-s10-btn2 { height: 46px; border-radius: 10px; line-height: 24.97px; }
  .lvf-s10-btn { min-width: 236px; padding: 0 12px 0 5px; gap: 8px; }
  .lvf-s10-btn-ico { width: 36px; height: 36px; border-radius: 6px; }
  .lvf-s10-btn-ico svg { width: 18px; height: 18px; }
  .lvf-s10-btn2 { min-width: 168px; padding-inline: 16.64px; }
}


/* ============ Unterzeile einzeilig erst ab 1280px, 13.08.2026 =============
   Befund: "white-space:nowrap" stand vorher schon ab 1024px. Die Karte ist
   aber erst ab 1280px auf ihre volle Innenbreite gewachsen (.lvf-s10-content
   ist auf 995px gedeckelt, waechst darunter aber nur mit dem Fenster: Breite
   - 60px Aussenabstand (.lvf-s10-container) - 2x122px Innenabstand der
   Karte). Der Satz "Trade with clear rules, no daily loss limit, and the
   potential to request payouts every 14 days." ist bei 24px Schrift genau
   995px breit (das Soll aus der Figma-Box) und passte zwischen 1024 und rund
   1160px weder in die Karte noch ins Browserfenster. Gleicher Befund und
   gleiche Loesung wie in build-rules/fragments/r9b-cta (13.08.2026), dort an
   der Zwillingssektion zuerst gefunden und behoben.
   Gemessen (lokal, werkzeuge-Skript im Scratchpad, echte Textausdehnung per
   Range statt der Elementbox, die bei nowrap nicht mitwaechst):
     Breite   Text ueber Kartenrand   Text ueber Fensterrand
     1000px            -                -            (kein nowrap, Umbruch)
     1024px         +133,3px          +113,3px        (faellt aus dem Fenster)
     1100px          +57,3px           +37,3px
     1160px           -2,7px           -22,7px        (praktisch schon buendig)
     1280px         -122,2px         -142,2px         (wie zuvor, unveraendert)
   Nach der Korrektur (nowrap erst ab 1280px) an denselben fuenf Breiten
   durchweg negativ, also kein Ueberlauf mehr: 1000px -117,6/-137,6,
   1024px -165,5/-185,5, 1100px -157,4/-177,4, 1160px -141/-161,
   1280px unveraendert -122,2/-142,2 (keine Aenderung am oberen Ende). Ohne
   nowrap zwischen 1024 und 1280px bricht die Zeile stattdessen normal um. */
@media (min-width: 1280px) {
  .lvf-s10-sub { white-space: nowrap; }
}


/* ================= Mittelband entfernt (tote Reparatur), 13.08.2026 ========
   Frueher hier: .lvf-s10-glow::after mit einem hellen Mittelband, seit
   06.08.2026 mit Spezifitaet 0-1-2 ("auf halber Panelhoehe liegt ein breites
   helles Blau-Band, das im Kimi-Umbau verloren ging"). Die Overrides-Ebene
   deckt genau diese Regel seit demselben Tag mit
   `.lvf-s10-glow.lvf-s10-glow::after { background: none }` zu (Spezifitaet
   0-5-2, server-stand-20260810/lvlup-fixes/r3b-home.css Zeile 210-212), die
   Reparatur wirkte seit dem 06.08. also nie und war exakt die Falle aus
   AUFTRAG-RUNDGANG.md Fundstelle 2.

   Selbst nachgemessen (Kartenmitte relx 0.36 / 0.50 / 0.64 bei rely 0.50,
   Blaukanal, node werkzeuge/... Skript im Scratchpad, Screenshot- statt
   DOM-Farbe):
                    relx 0.36   relx 0.50   relx 0.64
     ohne Overrides (Band aktiv)   70          81          70
     mit Overrides  (Band aus)     14          14          16
     Mockup (home-aus-vollbild)    14          20          22

   Mit aktivem Band liegt die Kartenmitte klar zu hell (70-81 gegen Soll
   14-22), ohne Band liegt sie nah am Mockup (14-16 gegen 14-22). Die
   Override-Entscheidung ist damit am Mockup bestaetigt, nicht nur an der
   eigenen Begruendung des Servers. Zusaetzlicher Grund: die neue Ebene
   `.lvf-s10-card > .lvf-s10-glow::before` weiter unten beschreibt die
   Kartenmitte bereits vollstaendig inklusive Abdunklung - ein zusaetzliches
   Mittelband waere doppelt UND falsch zugleich.
   Deshalb ersatzlos entfernt statt mit hoeherer Spezifitaet "repariert":
   eine tote Regel im Code waere nur eine neue Falle fuer den naechsten. */

/* ================= Kartengrund: Leuchtkanten + dunkle Mitte, 13.08.2026 ====
   Fund SERVER BESSER (groesster der drei aus AUFTRAG-RUNDGANG.md). Die
   Overrides-Ebene setzt auf .lvf-s10-glow::before einen deckenden Kartengrund
   mit hellen Leuchtkanten (links, rechts, oben rechts, unten) und dunkler
   Mitte: server-stand-20260810/lvlup-fixes/r3-home.css Zeile 619-652 (erste
   Fassung, Spezifitaet 0-4-2) UND r3b-home.css Zeile 126-200 (verfeinerte
   zweite Fassung "Durchgang 2", Spezifitaet 0-5-2 durch die verdoppelte
   Klasse `.lvf-s10-glow.lvf-s10-glow`). Die zweite Fassung gewinnt bei
   gleichem Ziel-Selektor unabhaengig von der Dateireihenfolge, weil ihre
   Spezifitaet hoeher ist - sie ist die tatsaechlich wirksame und wird hier
   uebernommen. Unser Fragment hatte dazu keine Entsprechung, nur den alten,
   deutlich flaueren .lvf-s10-glow-Verlauf (oben im Dokument fuer mobil, im
   768px-Block weiter oben fuer Desktop). Beim Deploy fehlt die Overrides-
   Ebene, also ging dieser Kartengrund bislang komplett verloren.

   Gemessen (dieselbe Stichprobe wie oben), OHNE Overrides (Zustand nach
   einem Deploy ohne diese Aenderung) gegen MIT Overrides (heutiges Live-Ziel)
   gegen Mockup:
     links_kante   ohne (9,34,51)    mit (21,102,149)  mockup (8,97,150)
     rechts_kante  ohne (13,54,80)   mit (25,125,184)  mockup (47,151,212)
     oben_rechts   ohne (24,82,119)  mit (100,196,236) mockup (84,180,236)
   "mit" liegt an allen drei Punkten klar naeher am Mockup als "ohne". */
@media (min-width: 768px) {
  .lvf-s10-card > .lvf-s10-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: #01060b;
    background-image:
      /* untere linke Ecke */
      radial-gradient(58% 52% at -6% 104%,
        rgba(170, 232, 253, 0.98) 0%,
        rgba(96, 205, 247, 0.90) 26%,
        rgba(24, 140, 205, 0.52) 52%,
        rgba(5, 70, 115, 0.18) 76%,
        rgba(2, 40, 70, 0) 96%),
      /* untere rechte Ecke */
      radial-gradient(48% 50% at 106% 104%,
        rgba(150, 224, 252, 0.94) 0%,
        rgba(70, 192, 243, 0.84) 28%,
        rgba(16, 124, 190, 0.42) 56%,
        rgba(3, 58, 96, 0.12) 80%,
        rgba(2, 40, 70, 0) 96%),
      /* obere rechte Bluete */
      radial-gradient(46% 62% at 102% -4%,
        rgba(160, 228, 252, 0.99) 9%,
        rgba(120, 215, 250, 0.94) 26%,
        rgba(44, 172, 236, 0.80) 52%,
        rgba(10, 104, 165, 0.37) 83%,
        rgba(3, 52, 88, 0.10) 100%,
        rgba(2, 40, 70, 0) 116%),
      /* linke Randspalte, senkrecht konstant */
      linear-gradient(90deg,
        rgba(35, 155, 225, 0.74) 0px,
        rgba(32, 150, 220, 0.66) 25px,
        rgba(22, 120, 185, 0.34) 70px,
        rgba(18, 112, 176, 0.19) 124px,
        rgba(8, 70, 118, 0.05) 200px,
        rgba(2, 40, 70, 0) 300px),
      /* rechte Randspalte, senkrecht konstant */
      linear-gradient(270deg,
        rgba(40, 165, 232, 0.88) 0px,
        rgba(38, 160, 228, 0.84) 25px,
        rgba(26, 132, 200, 0.55) 124px,
        rgba(12, 86, 140, 0.15) 273px,
        rgba(4, 50, 84, 0.03) 400px,
        rgba(2, 40, 70, 0) 520px),
      /* Aufhellung der Unterkante ueber die Kartenmitte */
      radial-gradient(78% 42% at 50% 110%,
        rgba(36, 152, 216, 0.80) 0%,
        rgba(22, 116, 178, 0.46) 40%,
        rgba(8, 64, 104, 0.18) 68%,
        rgba(2, 40, 70, 0) 92%),
      /* Grundton: oben Mitte praktisch schwarz */
      linear-gradient(180deg,
        #01050a 0%,
        #01070d 48%,
        #01101a 80%,
        #021a29 100%);
  }
}

/* Seitlicher Glow um die Karte (Befund desktop R3): im SOLL steht die Karte in einem
   weichen blauen Umfeld bis zum Bildrand (Randstreifen x0-80 SOLL RGB(3,49,78), IST
   fast schwarz). Eigene Ebene hinter der Karte, weich auslaufend, keine Kanten. */
@media (min-width: 768px) {
  .lvf-s10::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(34% 90% at 0% 50%, rgba(4, 95, 150, 0.55) 0%, rgba(2, 60, 100, 0.22) 55%, rgba(0, 40, 70, 0) 100%),
      radial-gradient(34% 90% at 100% 50%, rgba(4, 95, 150, 0.55) 0%, rgba(2, 60, 100, 0.22) 55%, rgba(0, 40, 70, 0) 100%);
  }
}

/* ================= Durchlaufende Randfahne, 11.08.2026 =====================
   Im Mockup ist das seitliche Leuchten EIN Feld ueber die ganze Seite, nicht
   ein Schein je Abschnitt. Gemessen im Soll-Vollbild bei x 0..6: der Farbton
   ist ueberall rgb(3,163,255) (G/B = 0,64 in allen ruhigen Zeilen), nur die
   Deckkraft aendert sich mit der Hoehe. Die waagerechte Abnahme ist ebenfalls
   ueberall gleich (x 100 noch 45 %, x 200 noch 18 %, x 300 noch 8 %).
   Deshalb: senkrechtes Profil als Farbverlauf in px ab Sektionsoberkante,
   waagerechte Abnahme als Maske. Die letzte Marke einer Sektion ist die erste
   der naechsten, dadurch entsteht an den Grenzen kein Sprung mehr.
   Nur Desktop; unter 1024 px bleibt alles wie bisher.
   ========================================================================= */
@media (min-width: 1024px) {
  /* Vorher: radial-gradient(34% 90% at 0% 50%) - die 90 Prozent Hoehe liessen
     oben und unten je 5 Prozent leer, daher die Naht zu s11 (links plus 38 im
     Gruenkanal in einer Zeile) und der zu dunkle untere Rand (Soll y 10300
     (2,59,92) gegen Ist (4,20,36)). Jetzt durchlaufend bis zur Unterkante.
     Soll x0..6: y 9680 (2,45,71), y 10000 (2,53,84), y 10330 (2,80,125).

     Nachmessung 11.08.2026, zwei Fehler:

     1. Die Fahne war durchgehend rund 6 Blaustufen zu hell (x0..6):
          Abstand von oben   0    160   320   480   600
          Soll Blau         72     79     92    107   121
          Ist  Blau         80     85     97    112   127
        An der Grenze zu s09 wurde daraus eine sichtbare Naht: y9690 (letzte
        Zeile s09) Blau 69, y9691 (erste Zeile s10) Blau 80, im Entwurf steht
        beidseitig 72. Die Marken sind deshalb aus dem Soll zurueckgerechnet
        (Deckkraft = (Soll-Blau - 15) / 240, 15 ist der Seitenhintergrund).

     2. Die waagerechte Maske war zu breit. Verhaeltnis zum Wert bei x0,
        aus drei Hoehen (y9700, y10100, y10250) uebereinstimmend gemessen:
          x         40     80    120    160    200    240    280
          Soll   0.757  0.522  0.333  0.203  0.112  0.065  0.025
          alt    0.750  0.540  0.374  0.254  0.182  0.139  0.099
        Ab x120 war die Fahne also bis zu 80 Prozent zu breit. Am Probelauf
        nachgezogen: der Seitenhintergrund liefert selbst schon Blau 15,
        deshalb muss die Fahne ab x100 noch einmal rund ein Viertel
        schmaler sein als das reine Verhaeltnis (y9900 x160 Soll 21 / mit
        dem reinen Verhaeltnis 30 / jetzt 24).

     Die letzten 48 px laufen weiter auf den Wert von s11 herunter (dessen
     Oberkante liefert Blau 98, das entspricht 0,346). Vorher blieb dort ein
     Sprung von 10 Stufen. s11 gehoert nicht zu dieser Datei; wird es spaeter
     auf den Sollwert 124 gehoben, gehoert hier 0,454 hin. */
  .lvf-s10::before {
    background-image: linear-gradient(180deg,
      rgba(3, 163, 255, 0.289) 0px,
      rgba(3, 163, 255, 0.293) 40px,
      rgba(3, 163, 255, 0.302) 80px,
      rgba(3, 163, 255, 0.304) 120px,
      rgba(3, 163, 255, 0.315) 160px,
      rgba(3, 163, 255, 0.330) 199px,
      rgba(3, 163, 255, 0.347) 239px,
      rgba(3, 163, 255, 0.352) 279px,
      rgba(3, 163, 255, 0.368) 319px,
      rgba(3, 163, 255, 0.385) 359px,
      rgba(3, 163, 255, 0.401) 399px,
      rgba(3, 163, 255, 0.413) 439px,
      rgba(3, 163, 255, 0.428) 479px,
      rgba(3, 163, 255, 0.449) 518px,
      rgba(3, 163, 255, 0.463) 558px,
      rgba(3, 163, 255, 0.476) 598px,
      rgba(3, 163, 255, 0.384) 648px);
    background-color: transparent;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.878) 20px, rgba(0, 0, 0, 0.757) 40px, rgba(0, 0, 0, 0.63) 60px, rgba(0, 0, 0, 0.505) 80px, rgba(0, 0, 0, 0.375) 100px, rgba(0, 0, 0, 0.26) 120px, rgba(0, 0, 0, 0.18) 140px, rgba(0, 0, 0, 0.125) 160px, rgba(0, 0, 0, 0.085) 180px, rgba(0, 0, 0, 0.055) 200px, rgba(0, 0, 0, 0.035) 220px, rgba(0, 0, 0, 0.02) 240px, rgba(0, 0, 0, 0.01) 260px, rgba(0, 0, 0, 0.004) 280px, rgba(0, 0, 0, 0.0) 300px, rgba(0, 0, 0, 0.0) 320px, rgba(0, 0, 0, 0.0) calc(100% - 320px), rgba(0, 0, 0, 0.0) calc(100% - 300px), rgba(0, 0, 0, 0.004) calc(100% - 280px), rgba(0, 0, 0, 0.01) calc(100% - 260px), rgba(0, 0, 0, 0.02) calc(100% - 240px), rgba(0, 0, 0, 0.035) calc(100% - 220px), rgba(0, 0, 0, 0.055) calc(100% - 200px), rgba(0, 0, 0, 0.085) calc(100% - 180px), rgba(0, 0, 0, 0.125) calc(100% - 160px), rgba(0, 0, 0, 0.18) calc(100% - 140px), rgba(0, 0, 0, 0.26) calc(100% - 120px), rgba(0, 0, 0, 0.375) calc(100% - 100px), rgba(0, 0, 0, 0.505) calc(100% - 80px), rgba(0, 0, 0, 0.63) calc(100% - 60px), rgba(0, 0, 0, 0.757) calc(100% - 40px), rgba(0, 0, 0, 0.878) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.0) 0px, rgba(0, 0, 0, 0.878) 20px, rgba(0, 0, 0, 0.757) 40px, rgba(0, 0, 0, 0.63) 60px, rgba(0, 0, 0, 0.505) 80px, rgba(0, 0, 0, 0.375) 100px, rgba(0, 0, 0, 0.26) 120px, rgba(0, 0, 0, 0.18) 140px, rgba(0, 0, 0, 0.125) 160px, rgba(0, 0, 0, 0.085) 180px, rgba(0, 0, 0, 0.055) 200px, rgba(0, 0, 0, 0.035) 220px, rgba(0, 0, 0, 0.02) 240px, rgba(0, 0, 0, 0.01) 260px, rgba(0, 0, 0, 0.004) 280px, rgba(0, 0, 0, 0.0) 300px, rgba(0, 0, 0, 0.0) 320px, rgba(0, 0, 0, 0.0) calc(100% - 320px), rgba(0, 0, 0, 0.0) calc(100% - 300px), rgba(0, 0, 0, 0.004) calc(100% - 280px), rgba(0, 0, 0, 0.01) calc(100% - 260px), rgba(0, 0, 0, 0.02) calc(100% - 240px), rgba(0, 0, 0, 0.035) calc(100% - 220px), rgba(0, 0, 0, 0.055) calc(100% - 200px), rgba(0, 0, 0, 0.085) calc(100% - 180px), rgba(0, 0, 0, 0.125) calc(100% - 160px), rgba(0, 0, 0, 0.18) calc(100% - 140px), rgba(0, 0, 0, 0.26) calc(100% - 120px), rgba(0, 0, 0, 0.375) calc(100% - 100px), rgba(0, 0, 0, 0.505) calc(100% - 80px), rgba(0, 0, 0, 0.63) calc(100% - 60px), rgba(0, 0, 0, 0.757) calc(100% - 40px), rgba(0, 0, 0, 0.878) calc(100% - 20px), rgba(0, 0, 0, 1.0) calc(100% - 0px));
  }
}

/* ================= Knopf-Effekte Desktop, 11.08.2026 =======================
   Gemessen am Soll-Vollbild home-aus-vollbild.png, Knopfoberkante Soll y10142
   / Ist y10154. Dieselben zwei Fehler wie bei den Knoepfen in s08.

   PRIMAERKNOPF "Choose Your Evaluation": der Glanz `inset 0 1px 18px #5bbce8`
   ist ueber den halben Knopf verteilt und dabei dunkler als der Verlauf
   darunter, statt die Oberkante anzuheben.

   SEKUNDAERKNOPF "View the Rules", Fuellung x950..1080 (20. Perzentil,
   Blaukanal, Abstand von der Knopfoberkante):

     dy         0      2     10     18     26     34     40     43
     Soll      55     18     35     41     44     83    154    194
     Ist      120     87     33     29     54    116    187    221

   Der Innenschein hat 15,7 und 19,4 px Radius. Von der Unterkante aus reicht
   er damit ueber den ganzen Knopf und leuchtet sogar die Oberkante auf
   (120 gegen 55). Im Entwurf sitzt er als Saum in den unteren 20 px; darueber
   ist der Knopf dunkler als die Karte dahinter, weil nur der schwarze
   Innenschatten von oben links wirkt (Soll dy2 18 gegen 55 aussen).
   ========================================================================= */
@media (min-width: 1024px) {
  /* Wie in s08: Glanz und Unterkantenschein als Fuellebenen. Der frueher
     verwendete Innenschatten leuchtet mit seinem Radius auch auf die
     Gegenkante durch. */
  .lvf-s10-btn {
    background-image:
      linear-gradient(180deg,
        rgba(45, 255, 255, 0) 70%,
        rgba(45, 255, 255, 0.05) 85%,
        rgba(45, 255, 255, 0.12) 100%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.25) 11%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.058) 70%,
        rgba(255, 255, 255, 0.06) 100%),
      var(--lvf-grad-blue);
  }

  .lvf-page .lvf-s10-btn {
    box-shadow: var(--lvf-s10-shadow);
  }

  /* Wie in s08: der Saum sitzt als Verlauf in der Fuellung. Ein Innenschatten
     mit 15,7 px Radius leuchtet von unten bis an die Oberkante durch (dort
     gemessen Blau 120 statt 55). Die Fuellung bleibt bei 0,9 Deckkraft,
     damit der helle Kartengrund wie im Entwurf durchscheint (Soll dy18
     Blau 41 gegen 55 neben dem Knopf). */
  /* Spezifitaet 0-4-1: auf /rules/ setzt r3-rules.css
     `body.page-id-8048 .lvf-s10 a.lvf-s10-btn2 { background: rgba(6,18,24,0.9) }`,
     das sind 0-3-2 (body + .page-id-8048 + .lvf-s10 + a + .lvf-s10-btn2).
     Mit nur drei Klassen (0-3-1) verlor die Regel dort und der Saum
     verschwand vollstaendig (gemessen dy37: Blau 32 statt 116). */
  .lvf-page .lvf-s10 a.lvf-s10-btn2.lvf-s10-btn2 {
    background:
      linear-gradient(180deg,
        rgba(25, 175, 255, 0) 57%,
        rgba(25, 175, 255, 0.02) 60%,
        rgba(25, 175, 255, 0.08) 65%,
        rgba(25, 175, 255, 0.2) 74%,
        rgba(25, 175, 255, 0.354) 80%,
        rgba(25, 175, 255, 0.53) 87%,
        rgba(25, 175, 255, 0.716) 93%,
        rgba(40, 185, 255, 0.85) 100%),
      linear-gradient(rgba(6, 18, 24, 0.9), rgba(6, 18, 24, 0.9));
  }

  .lvf-page .lvf-s10-btn2 {
    box-shadow:
      inset 9px 7px 14px rgba(0, 0, 0, 0.85),
      var(--lvf-s10-shadow);
  }
}

/* ================= Befund 12.08.2026, NICHT geaendert ======================
   Die Naht zu s11 bei y 10339 springt um 3,2 Stufen (Entwurf 0,2). Die Fahne
   dieser Datei ist NICHT die Ursache und bleibt deshalb unangetastet.

   Blaukanal in der Zeile ueber und unter der Kante:

     x              0     20     40     60     80    100    120    160    200
     s10 unten     98     87     75     63     50     37     25     12      5
     s11 oben     100    100     94     80     59     32      0      0      0
     Entwurf      125    110     95     82     69     59     49     32     21

   Die Form von s10 stimmt, sie liegt nur durchgehend rund 22 Prozent zu tief.
   Der Bruch entsteht an der Oberkante der Fusszeile: die schneidet links bei
   x 110 hart auf null ab, waehrend sie rechts bis x 460 vom Rand hinauslaeuft.
   Ursache sind die beiden grossen Sternblasen in .lvf-s11::before, die trotz
   des Kommentars "links und rechts bewusst identisch" nicht spiegelgleich
   sind: 16 % / 60 % mit 0,50 gegen 86 % / 40 % mit 0,42. Die hoeher sitzende
   rechte Blase erreicht die Oberkante, die linke nicht.

   Warum hier nichts geaendert wurde: s11 ist die site-weite Fusszeile aus
   build/assemble-theme.js und steht auf allen acht Seiten. Ihr eigener Schein
   an der Oberkante muesste je Seite anders sein (Entwurf home 125, elite 10,
   contact 156), weil das Licht dort aus der Sektion darueber kommt. Eine
   Aenderung an s11 verbessert home und verschlechtert elite. Das ist eine
   Entscheidung fuer die Fusszeile insgesamt, nicht fuer diese Naht.

   Ein einseitiges Anheben von s10 hilft ebenfalls nicht: Block 0 (x 0..88)
   wuerde von 10,3 auf rund 1 fallen, Block 1 (x 88..176) dafuer von 11,3 auf
   rund 17 steigen, weil dort auf der Fusszeilenseite gar nichts steht.
   ========================================================================= */


/* ============ Trefferflaeche CTA-Knoepfe unter 1024px, 12.08.2026 ==========
   Gleicher Befund und gleiche Loesung wie in build-rules/fragments/r9b-cta,
   hier bei der Gegenpruefung der zweiten Kopie derselben Komponente gefunden.
   Zwei Luecken, beide im unsichtbaren Antippfeld, keine sichtbare Aenderung:

   1. Unter 440px Designbreite schrumpft --lvf-s10-u = min(1px, 0.2272727vw)
      mit der Fensterbreite und mit ihr die Knopfhoehe (2.765 *
      --lvf-s10-btn). Die festen 2x4px des Overlays reichten dort nicht.
   2. Ab 768px schaltet der Tablet-Block das Overlay ganz ab (content:none),
      in der Annahme, die reale Knopfhoehe reiche allein. Sie waechst dort
      aber nur linear von 41,5px bei 768 auf die festen 46px bei 1024 und
      erreicht 44px erst bei etwa 910px.

   Der Zuschlag steht jetzt in --lvf-s10-tap (Definition oben bei den
   Variablen) und ist der exakt fehlende Rest auf 44px, nach unten auf die
   bisherigen 4px begrenzt. Sichtbares bleibt unangetastet: Schriftgroesse und
   Knopfhoehe aendern sich nicht, sonst braeche der massstabsgetreue Nachbau.

   Gemessen (werkzeuge/treffer-messen.js), Trefferhoehe beider Knoepfe,
   Elementbox plus Overlay, vorher -> nachher:
      320px   34,14 -> 44,10      768px   41,47 -> 49,47
      390px   39,86 -> 44,10      900px   43,81 -> 51,81
      440px   43,94 -> 44,09     1023px   46,00 -> 54,00
   Ab 1024px unveraendert 46px ohne Overlay. Die Abtastung mit
   elementFromPoint liegt rund 1px darueber, weil Chrome die Trefferflaeche
   auf ganze CSS-Pixel aufrundet, nicht auf Geraetepixel: bei 390px ergibt
   die Abtastung 45,05 bei deviceScaleFactor 1, 2 und 3 gleichermassen.
   Massgeblich bleibt die Rechnung.

   Selektor wie am Ursprungsort, keine hoehere Spezifitaet noetig: das
   content:none steht in @media (min-width:768px) weiter oben in derselben
   Datei, dieser Block hier kommt spaeter und gewinnt bei gleicher
   Spezifitaet ueber die Position in der Kaskade. Die Reihenfolge haelt auch
   im Bauergebnis: s10 steht als letzter Abschnitt in PAGE_ORDER
   (build/assemble.js), nach dem Block folgt kein weiteres Fragment.

   Der Rueckfallwert 4px in var() ist Absicht: ohne ihn waere die ganze
   inset-Deklaration ungueltig, sobald --lvf-s10-tap in einem Kontext fehlt
   (z.B. wenn der Knopf einmal ausserhalb von .lvf-s10 landet). inset fiele
   dann auf auto zurueck, das Overlay auf 0px, und die Trefferflaeche waere
   kleiner als vor dieser Aenderung (bei 320px nur noch die blanke Box mit
   26,14px). Mit dem Rueckfall bleibt es im schlechtesten Fall beim alten
   Stand. */
@media (max-width: 1023px) {
  .lvf-s10-btn::before,
  .lvf-s10-btn2::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--lvf-s10-tap, 4px)) 0;
  }
}

/* Bis 439 px stehen die Knöpfe untereinander. Der zentrierte Überstand des
   ersten Knopfs geriet dort unter die Trefferfläche des zweiten. Die gleiche
   Gesamthöhe wächst deshalb nur nach oben. */
@media (max-width: 439px) {
  .lvf-s10-btn::before {
    top: calc(-1 * var(--lvf-s10-tap, 4px) - var(--lvf-s10-tap, 4px));
    bottom: 0;
  }
}