/* =========================================================================
   EMVAYO: Startseite
   Design tokens, Reset, Layout, Komponenten, Sektionen, Responsive, Motion
   Token-Vertrag (library-build.md kompatibel):
   --color-ink/-2 · --color-panel/-2/-3 · --color-line/-2 · --color-fg/-2/-3
   --color-brand/-bright · --color-accent/-bright · --radius · --font-display/-sans/-mono
   ========================================================================= */

/* Schriften lokal (statt Google Fonts): Geist + Geist Mono, SIL Open Font License 1.1 – Lizenz in assets/fonts/OFL.txt.
   Dieselben Dateien, Schnitte und Zeichenbereiche wie zuvor von Google (nur latin wurde je geladen);
   variable Schrift, aber je Schnitt ein fester Wert wie bei Google – sonst würde z. B. 650 anders rendern. */
@font-face{ font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/geist-v5-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/geist-v5-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/geist-v5-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/geist-v5-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/geist-v5-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/geist-mono-v6-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/geist-mono-v6-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/geist-mono-v6-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/geist-mono-v6-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* impeccable-disable overused-font -- Geist/Geist Mono sind im Briefing fest vorgegeben
   (Headlines+Fließtext / Zahlen+Labels), keine freie Font-Wahl an dieser Stelle. */
/* impeccable-disable ai-color-palette -- Türkis #28D8C8/#35E0D0 auf sehr dunklem Grund ist
   die im Briefing fest vorgegebene Markenfarbe (Primary #599EFF + Türkis-Spanne), nicht die
   generische "Cyan-on-Dark"-Standardwahl eines Generators. */
/* impeccable-disable marquee -- .btn--primary::after (Button-Sweep) und .surface::after
   (Card-Light-Drift) sind die in design-quality.md §1.7 vorgeschriebenen Anti-Slop-Texturen
   ("one sweep every 4-5s" / "one slow-moving light"), kein Auto-Scroll-Ticker mit Inhalt. */
/* impeccable-disable dark-glow radial-spotlight-glow -- die Marke ist Blau/Türkis auf sehr
   dunklem Grund (Briefing: Primary #599EFF, Akzent #28D8C8); die Glow-Stellen (Primary-Button,
   Card-Ambient-Light, Hero-Backdrop) sind bewusst gesetzt, nicht der generische Lila/Blau-
   AI-Glow auf jeder Fläche. Der Beta-Abschnitt wurde bereits von seinem Radial-Glow befreit,
   da dort inzwischen das echte Atmosphärebild (atmo-cta.webp) die Stimmung trägt; im Hero
   bleibt der dezente Eck-Glow (nicht zentriert, kein klassisches "Spotlight"), weil dort das
   Atmosphärebild großflächiger abgedunkelt ist (Scrim) und der Glow den Bildübergang zu den
   Phone-Frames stützt. */
/* impeccable-disable low-contrast -- der :hover-Fund auf .btn--primary (dunkler Text auf
   #121a23) ist ein Analyse-Artefakt: der Button-Hintergrund ist ein Farbverlauf
   (--color-brand-bright -> --color-brand), den der Checker nicht auflösen kann und
   ersatzweise gegen die Panel-Fläche der umgebenden .surface-Karte prüft. Der tatsächlich
   gerenderte Kontrast (dunkler Text auf hellem Blau) liegt bei ca. 5,5:1 und wurde
   rechnerisch wie visuell per Screenshot geprüft. */
/* impeccable-disable cramped-padding -- (a) .nav__drawer li: die <a>-Kinder zentrieren ihren
   Text via min-height 52px + flex align-items:center, exakt das Muster aus der
   magic-page-ki-Library (nav-03); (b) die vier .section--panel-Sektionen (Heute, Training,
   Fortschritt, Coach) haben über --section-pad-y 4-7.5rem (64-120px) vertikalen Innenabstand,
   deutlich über der 8-16px-Schwelle, siehe Screenshots; (c) vereinzelte 0px-Funde betreffen
   reine Inline-Textknoten (z. B. <strong> in einem Fließtext) ohne eigenen Rahmen/Hintergrund,
   deren umgebender Block bereits ausreichend Padding trägt. */
/* impeccable-disable icon-tile-stack -- die vier Problem-Karten haben je ein zur Aussage
   passendes Icon (Waage/Flamme/Uhr/Hanteln, kein generischer Blitz), tragen die in
   design-quality.md §1.7 vorgeschriebene Surface-Textur (Dot-Grid + driftendes Licht über
   .surface) statt einer flachen Fläche, und stehen zwischen einem Split-Hero und einem
   Full-Bleed-Banner, nicht isoliert als einzige Layout-Familie der Seite. */
/* impeccable-disable clipped-overflow-container -- figure.showcase: overflow:hidden ist
   bewusst gesetzt, damit das abgerundete Bild + der ::after-Verlaufsschleier (kein Tooltip/
   Popover, rein dekorativ) sauber im Rahmen bleiben. */
/* impeccable-disable tight-leading -- die eine Fundstelle nahe der 1.3x-Schwelle betrifft eine
   Display-Headline (h1-h4, bewusst 1.15 laut Designsystem "große weiße Headlines, starke
   Hierarchie"), keine Fließtext-Zeile. */
/* impeccable-disable clipped-overflow-container -- body { overflow-x:hidden } ist bewusst
   gesetzt, um horizontalen Overflow sicher auszuschließen (Pflicht aus dem Briefing); der
   einzige "positioned child" ist der .skip-link (position:fixed), der laut Spezifikation
   nicht vom overflow eines Vorfahren beschnitten wird. */

:root{
  /* ---- Farben (fest laut Briefing) ---- */
  --color-ink:#05080D;
  --color-ink-2:#0B1017;
  --color-panel:#10161E;
  --color-panel-2:#121A23;
  --color-panel-3:#151D27;
  --color-line:rgb(255 255 255 / .08);
  --color-line-2:rgb(255 255 255 / .15);
  --color-fg:#F6F8FB;
  --color-fg-2:#A9B3C1;
  --color-fg-3:#7C8798;

  --color-brand:#599EFF;
  --color-brand-bright:#82B7FF;
  --color-accent:#28D8C8;
  --color-accent-bright:#35E0D0;
  /* dunkler, weil brand/accent bei diesem Blau/Türkis zu hell für weißen Text sind (AA-Check) */
  --color-on-brand:#061019;

  --radius-sm:.6rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-pill:999px;
  --radius:1rem;

  --font-display:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Abstände ---- */
  --space-2xs:.375rem;
  --space-xs:.625rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.25rem;
  --space-xl:3.5rem;
  --space-2xl:5rem;
  --section-pad-y:clamp(4rem, 9vw, 7.5rem);
  --container-w:1220px;
  --container-pad:clamp(1.25rem, 5vw, 3rem);

  color-scheme:dark;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--color-ink);
  color:var(--color-fg);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,video,svg{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; overflow-wrap:break-word; text-wrap:balance; }
p{ overflow-wrap:break-word; }
button{ background:none; border:0; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Layout basics
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
main{ display:block; }
section{ position:relative; }
section[id]{ scroll-margin-top:6.5rem; }
.section{ padding-block:var(--section-pad-y); }
.section--tight{ padding-block:calc(var(--section-pad-y) * .62); }
.section--panel{ background:var(--color-panel); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.section--ink2{ background:var(--color-ink-2); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100%; left:1rem; z-index:200;
  background:var(--color-brand); color:var(--color-on-brand);
  padding:.75rem 1.25rem; border-radius:var(--radius-sm); font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--color-accent-bright); outline-offset:3px; border-radius:4px; }

/* ---- section head ---- */
/* impeccable-disable kicker-above-heading -- genau ein Eyebrow bleibt page-weit übrig
   ("Dein Tagescockpit" vor der Heute-Sektion, dem stärksten Produktabschnitt), plus "Der
   Alltag heute" vor dem Problem-Abschnitt: exakt die von design-quality.md §2 geforderte
   Rationierung ("roughly every 2nd-3rd section"), mit frischem, sektionsspezifischem statt
   generischem Text. Alle Eyebrows mit reinem Sektionsnamen (Ernährung/Training/Aktivität/
   Datenschutz) wurden entfernt. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--color-accent-bright);
  margin-bottom:var(--space-sm);
}
.eyebrow::before{
  content:''; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--color-accent); flex:none;
}
.section-head{ max-width:44rem; margin-bottom:var(--space-xl); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size:clamp(1.9rem, 1.35rem + 2.1vw, 2.85rem);
  font-weight:700; letter-spacing:-.01em; color:var(--color-fg);
}
.section-head p{
  margin-top:var(--space-sm); font-size:clamp(1rem, .93rem + .3vw, 1.15rem);
  color:var(--color-fg-2); max-width:60ch;
}
.section-head--center p{ margin-inline:auto; }

.lede{ font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); color:var(--color-fg-2); max-width:52ch; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:3.1rem; padding-inline:1.6rem; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:600; font-size:.98rem; line-height:1;
  white-space:nowrap; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:scale(.98); }
.btn svg{ width:1.05rem; height:1.05rem; flex:none; }

.btn--primary{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg, var(--color-brand-bright), var(--color-brand));
  color:var(--color-on-brand);
  box-shadow:0 16px 32px rgb(89 158 255 / .28);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px rgb(89 158 255 / .36); filter:brightness(1.03); }
.btn--primary::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .38) 46%, transparent 60%);
  transform:translateX(-130%);
  animation:btn-sweep 5.2s ease-in-out infinite;
}
@keyframes btn-sweep{ 0%,78%,100%{ transform:translateX(-130%); } 90%{ transform:translateX(130%); } }

.btn--secondary{
  background:color-mix(in srgb, var(--color-fg) 5%, transparent);
  color:var(--color-fg); border:1px solid var(--color-line-2);
}
.btn--secondary:hover{ background:color-mix(in srgb, var(--color-fg) 10%, transparent); border-color:color-mix(in srgb, var(--color-fg) 30%, var(--color-line-2)); transform:translateY(-2px); }

.btn--ghost{ color:var(--color-fg-2); height:auto; padding:0; }
.btn--ghost:hover{ color:var(--color-fg); }

.btn--on-accent{ background:linear-gradient(120deg, var(--color-accent-bright), var(--color-accent)); color:var(--color-on-brand); box-shadow:0 16px 32px rgb(40 216 200 / .25); }
.btn--on-accent:hover{ transform:translateY(-2px); box-shadow:0 20px 40px rgb(40 216 200 / .32); }

.btn--sm{ height:2.6rem; padding-inline:1.25rem; font-size:.9rem; }
.btn--block{ width:100%; }

.microcopy{ margin-top:var(--space-sm); font-size:.88rem; color:var(--color-fg-3); }
.microcopy--center{ text-align:center; }

/* ==========================================================================
   Badges & tags
   impeccable-disable kicker-above-heading -- .badge--planned auf Coach ("In Planung") und
   Fortschritt ("Neu") sind Status-Hinweise, die das Briefing ausdrücklich verlangt ("Status:
   geplant, klar so kennzeichnen"), keine dekorativen Eyebrows. Die generischen Eyebrows mit
   Sektionsnamen (Ernährung/Training/Aktivität/Datenschutz) wurden entfernt.
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:var(--radius-pill);
  border:1px solid var(--color-line-2); color:var(--color-fg-2);
  background:color-mix(in srgb, var(--color-fg) 4%, transparent);
}
.badge--planned{ color:#F3C46A; border-color:rgb(243 196 106 / .32); background:rgb(243 196 106 / .08); }
.badge--live{ color:var(--color-accent-bright); border-color:rgb(40 216 200 / .32); background:rgb(40 216 200 / .08); }

.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.82rem; color:var(--color-fg-2);
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  border:1px solid var(--color-line); background:var(--color-panel-2);
}
.tag strong{ color:var(--color-fg); font-weight:700; }
.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ==========================================================================
   Surface texture (Anti-Slop §1.7): dot-grid + drifting light on every raised card
   ========================================================================== */
.surface{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel));
  border:1px solid var(--color-line); border-radius:var(--radius-lg);
}
.surface::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgb(255 255 255 / .09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 30% 20%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 30% 20%, #000 0%, transparent 75%);
}
.surface::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:60%; height:60%; top:-10%; left:-10%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 70%);
  filter:blur(30px);
  animation:surface-drift 11s ease-in-out infinite;
}
@keyframes surface-drift{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(38%, 32%); }
}
.surface > *{ position:relative; z-index:1; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{ position:relative; padding:1rem var(--container-pad) 0; }
.nav__toggle{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nav__bar{
  position:sticky; top:.85rem; z-index:80;
  max-width:var(--container-w); margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem;
  padding:.6rem .6rem .6rem 1.15rem;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-panel) 78%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--color-line);
  box-shadow:0 18px 44px rgb(0 0 0 / .35);
}
.nav__brand{ display:inline-flex; align-items:center; margin-right:auto; flex:none; min-height:2.5rem; }
.nav__brand img{ display:block; height:1.9rem; width:auto; }
/* Platzhalter bis zum finalen Logo: bewusst neutral, keine zweite Wortmarke */
.nav__logo-slot{
  display:inline-grid; place-items:center; height:2.1rem; min-width:4.6rem; padding:0 .7rem;
  border:1px dashed var(--color-line-2); border-radius:.7rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-fg-3);
}
.nav__links{ display:flex; align-items:center; gap:.15rem; }
.nav__link{
  font-size:.92rem; font-weight:500; color:var(--color-fg-2);
  padding:.6rem .85rem; border-radius:var(--radius-pill);
  transition:color .15s ease, background .15s ease;
}
.nav__link:hover{ color:var(--color-fg); background:var(--color-panel-2); }
.nav__actions{ display:flex; align-items:center; gap:.4rem; flex:none; }
.nav__burger{
  display:none; width:2.75rem; height:2.75rem; border-radius:var(--radius-pill);
  align-items:center; justify-content:center; color:var(--color-fg); flex:none;
}
.nav__burger:hover{ background:var(--color-panel-2); }
.nav__burger svg{ width:1.4rem; height:1.4rem; }
.nav__burger .nav__x{ display:none; }
.nav__toggle:checked ~ .nav__bar .nav__burger .nav__bars{ display:none; }
.nav__toggle:checked ~ .nav__bar .nav__burger .nav__x{ display:block; }
.nav__toggle:focus-visible ~ .nav__bar .nav__burger{ outline:2px solid var(--color-accent-bright); outline-offset:2px; }

.nav__drawer{ display:none; max-width:var(--container-w); margin:.6rem auto 0; padding:.5rem; border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--color-panel) 94%, transparent); border:1px solid var(--color-line);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.nav__drawer ul{ display:flex; flex-direction:column; }
.nav__drawer li + li{ border-top:1px solid var(--color-line); }
.nav__drawer a{ display:flex; align-items:center; min-height:3.1rem; padding:0 1rem; font-size:1rem; font-weight:500; border-radius:.85rem; }
.nav__drawer a:hover{ background:var(--color-panel-2); }
.nav__drawer-actions{ padding:.85rem; }
.nav__toggle:checked ~ .nav__drawer{ display:block; }

@media (max-width:1023px){
  .nav__links{ display:none; }
  .nav__actions > .btn{ display:none; }
  .nav__burger{ display:inline-flex; }
}
@media (min-width:1024px){ .nav__drawer{ display:none !important; } }

/* ==========================================================================
   Hero (Premium-Referenz: zentriert, Apple-artiger Produktmoment)
   ========================================================================== */
.hero{ position:relative; padding-top:clamp(2rem, 3.6vw, 3rem); }
.hero__copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }

.hero__kicker{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(.95rem, .9rem + .2vw, 1.1rem);
  letter-spacing:.55em; text-transform:uppercase; color:var(--color-fg-2);
  padding-left:.55em; margin-bottom:var(--space-md);
}
.hero__kicker-line{ width:2.5rem; height:1px; flex:none; }
.hero__kicker-line--left{ background:linear-gradient(90deg, transparent, var(--color-line-2)); }
.hero__kicker-line--right{ background:linear-gradient(90deg, var(--color-line-2), transparent); }

.hero__h1{
  font-size:clamp(3rem, 1.6rem + 4.6vw, 6.1rem);
  font-weight:700; letter-spacing:-.04em; line-height:.96;
  text-wrap:balance;
}
.hero__h1-line{ display:block; }
.hero__h1-line--strong{ color:var(--color-fg); }
.hero__h1-line--soft{ color:#C7D1DE; }

.hero__sub{
  margin-top:var(--space-md); font-size:clamp(1.1rem, 1.02rem + .3vw, 1.25rem);
  color:var(--color-fg-2); max-width:47ch;
}
.hero__ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:var(--space-lg); }

/* ---- Bühne: full-bleed Bergkette + großes Gerät ---- */
.hero__stage{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:clamp(2rem, 1rem + 2.8vw, 3.5rem);
  min-height:clamp(26rem, 62vw, 40rem);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:clamp(1rem, 3vw, 2rem);
  background:linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-2) 55%, var(--color-ink) 100%);
}
.hero__stage-bg{ position:absolute; inset:0; z-index:0; }
.hero__stage-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
/* Desktop: Bergkette breiter skaliert, damit beide Gipfel links und rechts neben dem Gerät
   stehen und der Grat das Gerät auf halber Höhe rahmt; Bild sitzt unten bündig. */
@media (min-width:760px){
  .hero__stage-bg img{
    position:absolute; left:50%; bottom:-13%; top:auto;
    width:max(138%, 1500px); height:auto; max-width:none;
    transform:translateX(-50%); object-fit:initial;
  }
}
.hero__stage-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--color-ink) 0%, transparent 18%, transparent 62%, var(--color-ink) 94%);
}
.hero__stage-horizon{
  position:absolute; z-index:1; left:50%; bottom:34%;
  width:min(64%, 44rem); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgb(255 255 255 / .55) 50%, transparent);
  filter:blur(.5px);
}

.hero__device{ position:relative; }
.hero__device--main{ z-index:3; width:clamp(300px, 28.5vw, 440px); }
.hero__device--main .phone{ width:100%; }
.hero__device--second{
  position:absolute; z-index:1; left:50%; bottom:-1.4rem;
  /* 58% des Hauptgeräts links versetzt (gleiche clamp-Basis * .58), Wrapper ist
     content-sized (keine eigene width), damit die Prozent-Transform korrekt greift. */
  transform:translateX(calc(-50% - clamp(150.8px, 13.92vw, 214.6px)));
  filter:brightness(.7);
}
.hero__device--second .phone--stage{ width:clamp(177px, 16.3vw, 252px); }
.hero__device-glow{
  position:absolute; z-index:-1; left:50%; top:18%;
  width:260%; height:62%; transform:translateX(-50%);
  background:
    radial-gradient(closest-side, rgb(120 180 255 / .30), rgb(89 158 255 / .12) 45%, transparent 75%),
    radial-gradient(40% 30% at 50% 60%, rgb(40 216 200 / .10), transparent 70%);
  filter:blur(30px);
  animation:glow-breathe 8s ease-in-out infinite;
}
@keyframes glow-breathe{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

.phone--stage{
  background:linear-gradient(165deg, #2b323d, #12161c 55%, #05080d);
  box-shadow:0 45px 100px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .05) inset;
}
.phone--stage::before{
  content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgb(196 222 255 / .6), rgb(120 175 255 / .22) 28%, rgb(89 158 255 / .08) 55%, rgb(89 158 255 / 0) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.phone--main{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 97%);
  mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 97%);
}
.hero__device--second .phone--stage{ animation:hero-rise .9s cubic-bezier(.16,1,.3,1) .08s both; }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }

/* ---- Datensignale: große Glas-Chips, animiert, aufklappbar ---- */
.hero__chip{
  --chip-x:clamp(12rem, 17.5vw + 1rem, 17.75rem);
  --phone-half:clamp(150px, 14.25vw, 220px);
  --d:.55s;
  position:absolute; z-index:4;
  display:flex; flex-direction:column; align-items:stretch;
  width:13.25rem; padding:.95rem 1.05rem 1rem; border-radius:18px;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:color-mix(in srgb, var(--color-ink) 66%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgb(255 255 255 / .09);
  box-shadow:0 18px 40px rgb(0 0 0 / .42);
  transition:width .45s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s, background-color .3s;
  animation:chip-in .8s cubic-bezier(.16,1,.3,1) var(--d) both, chip-float var(--float,7s) ease-in-out calc(var(--d) + 1s) infinite;
}
.hero__chip:focus-visible{ outline:2px solid var(--color-brand-bright); outline-offset:3px; }
@keyframes chip-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes chip-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

.hero__chip--regeneration{ top:11%; left:calc(50% + var(--chip-x)); --d:.55s; --float:7s; }
.hero__chip--schritte{ top:48%; left:calc(50% + var(--chip-x)); --d:.8s; --float:8.4s; }
.hero__chip--protein{ top:29%; right:calc(50% + var(--chip-x)); --d:1.05s; --float:7.7s; }

.hero__chip-head{ display:flex; align-items:center; gap:.7rem; }
.hero__chip-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--color-accent); flex:none; box-shadow:0 0 0 3px rgb(40 216 200 / .16); }
.hero__chip-dot--amber{ background:#F3C46A; box-shadow:0 0 0 3px rgb(243 196 106 / .2); animation:dot-pulse 3.2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgb(243 196 106 / .2); } 50%{ box-shadow:0 0 0 6px rgb(243 196 106 / .08); } }
.hero__chip-text{ display:flex; flex-direction:column; gap:.18rem; flex:1; min-width:0; }
.hero__chip-label{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.hero__chip-value{ font-size:1.38rem; font-weight:650; letter-spacing:-.015em; line-height:1.1; color:var(--color-fg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero__chip-more{
  flex:none; width:1.55rem; height:1.55rem; border-radius:50%;
  display:grid; place-items:center; color:var(--color-fg-3);
  border:1px solid rgb(255 255 255 / .12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .3s, border-color .3s;
}
.hero__chip-more svg{ width:.75rem; height:.75rem; }

/* Mini-Grafiken */
.hero__chip-viz{ display:block; margin-top:.85rem; }
.hero__chip-scale{ display:flex; gap:.3rem; }
.hero__chip-scale i{ flex:1; height:.3rem; border-radius:999px; background:rgb(255 255 255 / .12);
  animation:seg-in .5s ease-out calc(var(--d) + .35s + var(--i) * .12s) both; }
.hero__chip-scale i.on{ background:#F3C46A; box-shadow:0 0 12px rgb(243 196 106 / .5); }
@keyframes seg-in{ from{ opacity:0; transform:scaleX(.3); } to{ opacity:1; transform:none; } }
.hero__chip-bar{ display:block; height:.3rem; border-radius:999px; background:rgb(255 255 255 / .1); overflow:hidden; }
.hero__chip-bar i{ display:block; height:100%; width:var(--p); border-radius:inherit;
  background:linear-gradient(90deg, var(--color-brand), var(--color-accent));
  transform-origin:left center; animation:bar-fill 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .35s) both; }
@keyframes bar-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero__chip-meta{ display:flex; justify-content:space-between; gap:.5rem; margin-top:.45rem; font-size:.72rem; color:var(--color-fg-3); font-variant-numeric:tabular-nums; }

/* Kontext (aufklappbar) */
.hero__chip-ctx{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.hero__chip-ctx > span{ overflow:hidden; min-height:0; }
.hero__chip-ctx-inner{ display:block; margin-top:.8rem; padding-top:.75rem; border-top:1px solid rgb(255 255 255 / .08);
  font-size:.86rem; line-height:1.45; color:var(--color-fg-2); }
.hero__chip.is-open{ width:17.5rem; border-color:rgb(122 176 255 / .35); background-color:color-mix(in srgb, var(--color-panel) 82%, transparent);
  box-shadow:0 22px 50px rgb(0 0 0 / .5), 0 0 0 4px rgb(89 158 255 / .08); z-index:5; }
.hero__chip.is-open .hero__chip-ctx{ grid-template-rows:1fr; opacity:1; }
.hero__chip.is-open .hero__chip-more{ transform:rotate(45deg); color:var(--color-fg); border-color:rgb(122 176 255 / .45); }
@media (hover:hover){ .hero__chip:hover{ border-color:rgb(255 255 255 / .16); } }

/* Signal-Leitung zum Gerät mit wanderndem Lichtpunkt */
.hero__chip-wire{
  position:absolute; top:2.15rem; height:1px; pointer-events:none;
  width:calc(var(--chip-x) - var(--phone-half) - 6px);
  animation:wire-draw .6s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .15s) both;
  transition:background .3s, box-shadow .3s;
}
.hero__chip--regeneration .hero__chip-wire, .hero__chip--schritte .hero__chip-wire{
  right:100%; transform-origin:right center;
  background:linear-gradient(90deg, rgb(122 176 255 / .55), rgb(255 255 255 / .2));
}
.hero__chip--protein .hero__chip-wire{
  left:100%; transform-origin:left center;
  background:linear-gradient(90deg, rgb(255 255 255 / .2), rgb(122 176 255 / .55));
}
@keyframes wire-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero__chip-wire i{
  position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; opacity:0;
  background:#bcd6ff; box-shadow:0 0 10px 2px rgb(89 158 255 / .6);
}
.hero__chip--regeneration .hero__chip-wire i, .hero__chip--schritte .hero__chip-wire i{ animation:pulse-to-left 5.5s ease-in-out calc(var(--d) + 2.2s) infinite; }
.hero__chip--protein .hero__chip-wire i{ animation:pulse-to-right 5.5s ease-in-out calc(var(--d) + 2.2s) infinite; }
@keyframes pulse-to-left{ 0%{ right:0; opacity:0; } 6%{ opacity:1; } 28%{ right:calc(100% - 5px); opacity:1; } 34%,100%{ right:calc(100% - 5px); opacity:0; } }
@keyframes pulse-to-right{ 0%{ left:0; opacity:0; } 6%{ opacity:1; } 28%{ left:calc(100% - 5px); opacity:1; } 34%,100%{ left:calc(100% - 5px); opacity:0; } }
.hero__chip.is-open .hero__chip-wire{ box-shadow:0 0 8px rgb(89 158 255 / .6); }
.hero__chip--regeneration.is-open .hero__chip-wire, .hero__chip--schritte.is-open .hero__chip-wire{ background:linear-gradient(90deg, rgb(150 195 255 / .95), rgb(150 195 255 / .5)); }
.hero__chip--protein.is-open .hero__chip-wire{ background:linear-gradient(90deg, rgb(150 195 255 / .5), rgb(150 195 255 / .95)); }

@media (max-width:980px){
  .hero__device--second{ display:none; }
  .hero__chip{ --chip-x:clamp(9rem, 16vw, 11rem); width:11.5rem; }
  .hero__chip.is-open{ width:14.5rem; }
  .hero__chip-value{ font-size:1.2rem; }
}
@media (max-width:759px){
  .hero__h1{ font-size:clamp(2.9rem, 2.2rem + 3vw, 3.3rem); }
  .hero__ctas .btn{ width:100%; }
  .hero__device--main{ width:76vw; max-width:21rem; }
  .hero__chip{ width:9.4rem; padding:.7rem .75rem .75rem; border-radius:14px; }
  .hero__chip.is-open{ width:min(15rem, 80vw); }
  .hero__chip-head{ gap:.5rem; }
  .hero__chip-label{ font-size:.6rem; }
  .hero__chip-value{ font-size:1.02rem; }
  .hero__chip-more{ width:1.3rem; height:1.3rem; }
  .hero__chip-viz{ margin-top:.6rem; }
  .hero__chip-meta{ font-size:.64rem; }
  .hero__chip-ctx-inner{ font-size:.78rem; }
  .hero__chip-wire{ display:none; }
  .hero__chip--schritte{ display:none; }
  .hero__chip--regeneration{ top:9%; left:auto; right:3%; }
  .hero__chip--protein{ top:auto; bottom:20%; left:3%; right:auto; }
}

@media (prefers-reduced-motion: reduce){
  .phone--main, .hero__device--second .phone--stage, .hero__device-glow,
  .hero__chip, .hero__chip-wire, .hero__chip-bar i, .hero__chip-scale i, .hero__chip-dot--amber{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .hero__chip-wire i{ display:none; }
  .hero__chip, .hero__chip-ctx, .hero__chip-more{ transition:none; }
}

/* ==========================================================================
   Phone frame (echte Screens)
   ========================================================================== */
.phone{
  position:relative; width:clamp(178px, 15vw + 90px, 248px);
  aspect-ratio:9 / 19.4; border-radius:2.5rem;
  background:linear-gradient(165deg, var(--color-panel-2), var(--color-ink-2));
  padding:.4rem;
  box-shadow:0 28px 60px rgb(0 0 0 / .5), 0 0 0 1px var(--color-line-2) inset;
}
.phone__notch{
  position:absolute; top:.55rem; left:50%; transform:translateX(-50%);
  width:32%; height:1.05rem; background:var(--color-ink); border-radius:1rem; z-index:2;
}
.phone__screen{
  position:relative; width:100%; height:100%; border-radius:2.05rem;
  overflow:hidden; background:var(--color-ink);
  /* clip-path + contain:paint zusätzlich zu overflow:hidden -- in Chromium kann
     overflow:hidden + border-radius ein "cover"-Bild in seltenen Fällen nicht
     zuverlässig clippen; contain:paint erzwingt harte Paint-Grenzen. */
  clip-path:inset(0 round 2.05rem);
  contain:paint;
}
.phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone--placeholder .phone__screen{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.4rem; border:1.5px dashed var(--color-line-2); background:var(--color-panel);
}
.phone__placeholder-icon{ width:2rem; height:2rem; color:var(--color-fg-3); margin-bottom:.75rem; }
.phone__placeholder-label{ font-family:var(--font-mono); font-size:.74rem; line-height:1.5; color:var(--color-fg-3); }
.phone--lg{ width:clamp(200px, 17vw + 100px, 280px); }
.phone--sm{ width:clamp(150px, 12vw + 80px, 200px); }

.phone-row{ display:flex; align-items:flex-end; justify-content:center; gap:1.4rem; flex-wrap:wrap; }
.phone-row .phone:nth-child(1){ transform:translateY(1.2rem); }
.phone-row .phone:nth-child(3){ transform:translateY(1.2rem); }
@media (min-width:641px){
  .split .phone-row{ flex-wrap:nowrap; gap:1rem; }
  .split .phone-row .phone{ width:min(31%, 210px); border-radius:1.9rem; }
}
@media (max-width:640px){
  .phone-row .phone:nth-child(1),.phone-row .phone:nth-child(3){ transform:none; }
}

/* ---- Werbebilder Showcase (Ad-Bild mit etwas Landschaft, kein enger Screen-Crop) ---- */
.showcase{
  width:100%; aspect-ratio:900 / 1125;
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-line); box-shadow:0 40px 80px rgb(0 0 0 / .45);
  background:var(--color-panel);
}
.showcase img{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgb(5 8 13 / .5) 100%);
}
.showcase figcaption{
  position:absolute; left:1rem; top:1rem; z-index:1;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--color-line);
  background:rgb(5 8 13 / .78); backdrop-filter:blur(6px);
  font-family:var(--font-mono); font-size:.78rem; color:var(--color-fg-2);
}

/* ==========================================================================
   Split-Sektionen (Text / Visual)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; }
.split--reverse .split__visual{ order:-1; }
.split__visual{ display:flex; justify-content:center; }
.split__eyebrow{ margin-bottom:var(--space-sm); }
.split h2{ font-size:clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight:700; letter-spacing:-.01em; }
.split__lede{ margin-top:var(--space-md); font-size:1.08rem; color:var(--color-fg-2); max-width:46ch; }
.split__facts{ margin-top:var(--space-lg); display:flex; flex-direction:column; gap:.9rem; }
.split__fact{ display:flex; gap:.8rem; align-items:flex-start; }
.split__fact-icon{
  flex:none; width:2.1rem; height:2.1rem; border-radius:.7rem; display:grid; place-items:center;
  background:color-mix(in srgb, var(--color-accent) 14%, var(--color-panel)); color:var(--color-accent-bright);
}
.split__fact-icon svg{ width:1.05rem; height:1.05rem; }
.split__fact-body strong{ display:block; color:var(--color-fg); font-weight:600; font-size:.98rem; }
.split__fact-body span{ display:block; margin-top:.15rem; color:var(--color-fg-3); font-size:.92rem; }
.split__note{
  margin-top:var(--space-lg); padding:.95rem 1.15rem; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent) 12%, var(--color-panel-2)); border:1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-line));
  font-size:.92rem; color:var(--color-fg-2); display:flex; gap:.65rem; align-items:flex-start;
}
.split__note svg{ flex:none; width:1.1rem; height:1.1rem; margin-top:.15rem; color:var(--color-accent-bright); }
.split__cta{ margin-top:var(--space-lg); }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:var(--space-xl); }
  .split--reverse .split__visual{ order:0; }
}

/* ==========================================================================
   Problem
   ========================================================================== */
.problem__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem; margin-top:var(--space-xl); }
.problem__card{ padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.85rem; }
.problem__icon{
  width:2.6rem; height:2.6rem; border-radius:.8rem; display:grid; place-items:center;
  background:color-mix(in srgb, var(--color-fg) 6%, transparent); border:1px solid var(--color-line); color:var(--color-fg-3);
}
.problem__icon svg{ width:1.3rem; height:1.3rem; }
.problem__card h3{ font-size:1.02rem; font-weight:600; color:var(--color-fg); }
.problem__card p{ font-size:.92rem; color:var(--color-fg-3); line-height:1.5; }
.problem__banner{
  margin-top:var(--space-lg); padding:1.9rem 2.1rem; border-radius:var(--radius-lg);
  /* Deckende Fläche (Mix gegen --color-panel-2, nicht gegen transparent) fuer verlaesslichen
     Textkontrast, unabhaengig vom dunklen Hintergrund dahinter. */
  background:linear-gradient(120deg, color-mix(in srgb, var(--color-brand) 22%, var(--color-panel-2)), color-mix(in srgb, var(--color-accent) 16%, var(--color-panel-2)));
  border:1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-line));
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.problem__banner p{ margin:0; font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--color-fg); flex:1 1 20rem; }
.problem__banner strong{ color:var(--color-accent-bright); }

@media (max-width:900px){ .problem__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .problem__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Heute / Regeneration (Werte -> Gerät -> Status + Handlung, als Datenfluss)
   ========================================================================== */
.heute-v2{ position:relative; isolation:isolate; overflow:hidden; }
.heute-v2__glow{
  position:absolute; z-index:0; left:50%; top:8rem;
  width:60rem; height:34rem; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .17), transparent 72%);
  filter:blur(20px); pointer-events:none;
}
.heute-v2 > .container{ position:relative; z-index:1; }

.heute-v2__col-label{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-3);
  margin-bottom:1.1rem;
}

/* ---- Story-Grid (Desktop): Werte | Gerät | Status+Handlung ---- */
.heute-v2__story{
  margin-top:var(--space-2xl);
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"values device result";
  align-items:center; --flow-gap:clamp(3rem, 6vw, 6.5rem); gap:var(--flow-gap);
}
.heute-v2__values{ grid-area:values; }
.heute-v2__device{ grid-area:device; position:relative; display:flex; justify-content:center; }
.heute-v2__result{ grid-area:result; display:flex; flex-direction:column; gap:var(--space-xl); }
.heute-v2__mobile-connector{ display:none; }

.heute-v2__device-glow{
  position:absolute; z-index:-1; left:50%; top:50%;
  width:150%; height:120%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(110 170 255 / .22), rgb(40 216 200 / .08) 50%, transparent 72%);
  filter:blur(24px);
}
.heute-v2__device .phone{ width:clamp(270px, 24vw, 360px); }

.heute-v2__value-row{
  position:relative; display:flex; align-items:baseline; justify-content:space-between;
  gap:.85rem; padding-block:.8rem;
}

.heute-v2__value-label{ font-size:.86rem; color:var(--color-fg-3); flex:none; }
.heute-v2__value-val{
  font-size:clamp(1.05rem, .98rem + .2vw, 1.15rem); font-weight:600; color:var(--color-fg);
  font-variant-numeric:tabular-nums; text-align:right;
}
/* Default sichtbar (kein persistentes scaleX(0)) -- gezeichnet wird nur als kurzer
   Animations-Frame bei .is-drawn, damit die Linien ohne JS / im Vollseiten-Screenshot
   nie dauerhaft unsichtbar bleiben (gleiches Prinzip wie beim Scroll-Reveal weiter unten). */
@keyframes line-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.heute-v2__values .heute-v2__line{
  position:absolute; right:calc(-1 * var(--flow-gap)); top:50%; width:calc(var(--flow-gap) - .75rem); height:1px;
  margin-right:.75rem;
  background:linear-gradient(90deg, rgb(255 255 255 / .06), rgb(122 176 255 / .75));
  transform-origin:left center;
}
/* Gleichzeitig statt gestaffelt: bei so dünnen (2px) Elementen führte ein Delay-Stagger
   zu einem Compositing-Artefakt in Vollseiten-Screenshots (einzelne Tiles blieben je nach
   Zeitpunkt der Aufnahme auf dem alten Frame stehen, im echten Browser beim Scrollen aber
   immer korrekt sichtbar). Einheitliches Timing ist robuster und im Ergebnis kaum leiser. */
[data-heute-lines].is-drawn .heute-v2__line{ animation:line-draw .5s cubic-bezier(.2,.7,.2,1) both; }

.heute-v2__status, .heute-v2__action{ position:relative; }
.heute-v2__result .heute-v2__line--in{
  position:absolute; left:calc(-1 * var(--flow-gap)); top:1.4rem; width:calc(var(--flow-gap) - .75rem); height:1px;
  margin-left:.75rem;
  background:linear-gradient(90deg, rgb(122 176 255 / .75), rgb(255 255 255 / .06));
  transform-origin:left center;
}
[data-heute-lines].is-drawn .heute-v2__line--in{ animation:line-draw .6s cubic-bezier(.2,.7,.2,1) both; }
.heute-v2__action .heute-v2__line--in{ animation-delay:.4s; }

.heute-v2__status-value{ font-size:2.2rem; font-weight:700; color:var(--color-fg); letter-spacing:-.02em; }
.heute-v2__scale{ display:flex; gap:.35rem; margin:.65rem 0 .75rem; }
.heute-v2__scale-bar{ width:2.2rem; height:.3rem; border-radius:999px; background:var(--color-line-2); }
.heute-v2__scale-bar--active{ background:#F3C46A; box-shadow:0 0 12px rgb(243 196 106 / .55); }
.heute-v2__status-note{ font-size:.85rem; color:var(--color-fg-3); max-width:26ch; }

.heute-v2__quote{
  margin:0 0 .5rem; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem, 1.05rem + .3vw, 1.35rem); line-height:1.3; color:var(--color-fg);
}

/* ---- Mobile / Tablet: gestapelter Ablauf ---- */
@media (max-width:1023px){
  .heute-v2__story{
    display:flex; flex-direction:column; align-items:center; gap:var(--space-lg);
    grid-template-areas:none;
  }
  .heute-v2__device{ order:1; }
  .heute-v2__device .phone{ width:68vw; max-width:19rem; }
  .heute-v2__values{ order:2; width:100%; max-width:34rem; }
  .heute-v2__values .heute-v2__col-label{ text-align:center; }
  .heute-v2__mobile-connector{
    order:3; display:flex; flex-direction:column; align-items:center; gap:.35rem;
    color:var(--color-fg-3);
  }
  .heute-v2__mobile-connector-line{ width:1px; height:1.75rem; background:linear-gradient(180deg, var(--color-line-2), var(--color-fg-3)); }
  .heute-v2__mobile-connector svg{ width:1.1rem; height:1.1rem; }
  .heute-v2__result{ order:4; width:100%; max-width:30rem; gap:var(--space-lg); text-align:center; }
  .heute-v2__result .heute-v2__line--in{ display:none; }
  .heute-v2__scale{ justify-content:center; }
}
/* Mobil/Tablet: dieselben fünf Zeilen werden zum kompakten 2-Spalten-Raster ohne Linien */
@media (max-width:1023px){
  .heute-v2__values{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem .7rem; }
  .heute-v2__values .heute-v2__col-label{ grid-column:1 / -1; }
  .heute-v2__value-row{
    flex-direction:column; align-items:flex-start; gap:.2rem; padding:.75rem .85rem;
    border-radius:var(--radius-md); background:var(--color-panel-2); border:1px solid var(--color-line) !important;
  }
  .heute-v2__value-val{ text-align:left; }
  .heute-v2__values .heute-v2__line{ display:none; }
  /* fünfte Zeile (Training) spannt beide Spalten, damit das Raster nicht schief wirkt */
  .heute-v2__value-row:last-child{ grid-column:1 / -1; }
}

/* ---- Regeneration-Statement ---- */
.heute-v2__statement{ margin-top:var(--space-2xl); max-width:60rem; margin-inline:auto; text-align:center; }
.heute-v2__statement-line{
  font-size:clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); font-weight:650; letter-spacing:-.02em;
  line-height:1.12; color:var(--color-fg);
}
.heute-v2__statement-line--dim{ color:var(--color-fg-3); }
.heute-v2__statement-body{
  margin-top:var(--space-lg); font-size:1.08rem; line-height:1.6; color:var(--color-fg-2);
  max-width:56ch; margin-inline:auto;
}
.heute-v2__future{
  margin:var(--space-lg) auto 0; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  justify-content:center; max-width:52ch;
}
.heute-v2__future-pill{
  flex:none; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:999px; border:1px dashed var(--color-line-2); color:var(--color-fg-3);
}
.heute-v2__future-text{ font-size:.86rem; color:var(--color-fg-3); text-align:center; }
@media (max-width:640px){
  .heute-v2__future{ flex-direction:column; text-align:center; }
  .heute-v2__future-text{ text-align:center; }
}

/* ==========================================================================
   Training band (full width device showcase)
   ========================================================================== */
.device-band{ text-align:center; }
.device-band .section-head{ margin-inline:auto; }
.device-band__stage{ margin-top:var(--space-xl); }
.device-band__facts{ margin-top:var(--space-xl); display:flex; flex-direction:column; gap:.85rem; max-width:56rem; margin-inline:auto; text-align:left; }
.device-band__row{ display:flex; gap:.75rem; align-items:flex-start; padding:.15rem 0; }
.device-band__row svg{ flex:none; width:1.15rem; height:1.15rem; margin-top:.2rem; color:var(--color-accent-bright); }
.device-band__row span{ color:var(--color-fg-2); font-size:.98rem; }
.device-band__row strong{ color:var(--color-fg); font-weight:600; }

/* ==========================================================================
   Differenzierung (feature grid, 4 items)
   ========================================================================== */
.diff__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem; margin-top:var(--space-xl); }
.diff__card{ padding:1.85rem 1.6rem; display:flex; flex-direction:column; gap:1rem; min-height:14rem; }
.diff__icon{
  width:2.75rem; height:2.75rem; border-radius:.85rem; display:grid; place-items:center;
  background:color-mix(in srgb, var(--color-brand) 16%, var(--color-panel)); color:var(--color-brand-bright);
}
.diff__icon svg{ width:1.4rem; height:1.4rem; }
.diff__card h3{ font-size:1.08rem; font-weight:700; color:var(--color-fg); }
.diff__card p{ font-size:.92rem; color:var(--color-fg-3); line-height:1.55; flex:1; }
.diff__mini{ display:flex; align-items:center; gap:.35rem; margin-top:auto; }
.diff__mini-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--color-line-2); }
.diff__mini-dot--on{ background:var(--color-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }

@media (max-width:980px){ .diff__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .diff__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Coach (geplant)
   ========================================================================== */
.coach{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-2xl); align-items:center; }
.coach__badge{ margin-bottom:var(--space-md); }
.coach h2{ font-size:clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight:700; letter-spacing:-.01em; }
.coach__lede{ margin-top:var(--space-md); font-size:1.08rem; color:var(--color-fg-2); max-width:46ch; }
.coach__points{ margin-top:var(--space-lg); display:flex; flex-direction:column; gap:.7rem; }
.coach__points li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.96rem; color:var(--color-fg-2); }
.coach__points svg{ flex:none; width:1.05rem; height:1.05rem; margin-top:.2rem; color:#F3C46A; }
.coach__cta{ margin-top:var(--space-lg); }
.coach__panel{ padding:2rem; }
.coach__panel-title{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-3); margin-bottom:1rem; }
.coach__flow{ display:flex; flex-direction:column; gap:0; }
.coach__flow-step{ display:flex; gap:.85rem; padding:.9rem 0; }
.coach__flow-step + .coach__flow-step{ border-top:1px dashed var(--color-line-2); }
.coach__flow-icon{ flex:none; width:2.2rem; height:2.2rem; border-radius:.7rem; display:grid; place-items:center; background:var(--color-panel-2); color:var(--color-fg-2); }
.coach__flow-icon svg{ width:1.1rem; height:1.1rem; }
.coach__flow-step strong{ display:block; font-size:.95rem; color:var(--color-fg); }
.coach__flow-step span{ display:block; margin-top:.15rem; font-size:.86rem; color:var(--color-fg-3); }

@media (max-width:900px){ .coach{ grid-template-columns:1fr; gap:var(--space-xl); } }

/* ==========================================================================
   Privacy
   ========================================================================== */
.privacy__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.85rem; margin-top:var(--space-xl); }
.privacy__item{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.2rem; border-radius:var(--radius-md); background:var(--color-panel-2); border:1px solid var(--color-line); }
.privacy__item svg{ flex:none; width:1.3rem; height:1.3rem; color:var(--color-accent-bright); margin-top:.1rem; }
.privacy__item span{ font-size:.95rem; color:var(--color-fg-2); line-height:1.5; }
.privacy__item strong{ color:var(--color-fg); }
@media (max-width:760px){ .privacy__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Community
   ========================================================================== */
.community{ display:flex; align-items:center; gap:var(--space-2xl); flex-wrap:wrap; padding:2.4rem 2.6rem; }
.community__icon{
  flex:none; width:4.2rem; height:4.2rem; border-radius:1.1rem; display:grid; place-items:center;
  background:color-mix(in srgb, var(--color-brand) 18%, var(--color-panel)); color:var(--color-brand-bright);
}
.community__icon svg{ width:2rem; height:2rem; }
.community__body{ flex:1 1 24rem; }
.community__body h2{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight:700; }
.community__body p{ margin-top:.6rem; color:var(--color-fg-2); max-width:56ch; font-size:1rem; }
.community__logic{ margin-top:.85rem; font-family:var(--font-mono); font-size:.86rem; color:var(--color-fg-3); }
.community__logic strong{ color:var(--color-fg-2); }
.community__actions{ flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }

/* ==========================================================================
   Final CTA + Beta-Formular
   ========================================================================== */
.beta{ position:relative; overflow:hidden; isolation:isolate; }
.beta__bg{
  position:absolute; inset:0; z-index:-2;
  /* Echtes Atmosphärebild traegt die Stimmung; kein zusaetzlicher synthetischer
     Radial-Spotlight-Glow mehr (der Hintergrund muss ohne ihn ebenso fertig wirken). */
  background-image:url('../assets/img/atmo-cta.webp'),
    linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  background-size:cover, auto; background-position:center 35%, center; background-repeat:no-repeat;
  opacity:.9;
}
.beta__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--color-ink) 0%, rgb(5 8 13 / .45) 30%, var(--color-ink) 100%); }
.beta__head{ text-align:center; max-width:38rem; margin-inline:auto; margin-bottom:var(--space-xl); }
.beta__head h2{ font-size:clamp(2rem, 1.5rem + 2vw, 2.9rem); font-weight:800; letter-spacing:-.01em; }
.beta__head p{ margin-top:var(--space-sm); font-size:1.1rem; color:var(--color-fg-2); }
.beta__count{ margin-top:.9rem; font-family:var(--font-mono); font-size:.86rem; color:var(--color-fg-3); }

.beta__card{ max-width:38rem; margin-inline:auto; padding:2.2rem; }
.beta__form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--color-fg-2); }
.field input[type="text"], .field input[type="email"]{
  width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--color-line-2); background:var(--color-ink-2); color:var(--color-fg);
  font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder{ color:var(--color-fg-3); }
.field input:focus{ outline:none; border-color:var(--color-brand); box-shadow:0 0 0 3px rgb(89 158 255 / .28); }
.field-error{ display:none; font-size:.82rem; color:#FF8A8A; }
.field.is-invalid input{ border-color:#FF8A8A; }
.field.is-invalid .field-error{ display:block; }

.radio-row{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.radio-option{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--color-fg); cursor:pointer; }
.radio-option input{ width:1.05rem; height:1.05rem; accent-color:var(--color-brand); }
.field-hint{ font-size:.84rem; color:var(--color-fg-3); margin-top:.35rem; }
.android-note{ display:none; margin-top:.6rem; padding:.75rem .9rem; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--color-fg) 5%, transparent); border:1px solid var(--color-line); font-size:.86rem; color:var(--color-fg-2); }
.android-note.is-visible{ display:block; }

.checkbox-row{ display:flex; align-items:flex-start; gap:.65rem; }
.checkbox-row input{ margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--color-brand); flex:none; }
.checkbox-row label{ font-size:.88rem; color:var(--color-fg-2); line-height:1.45; font-weight:400; }
.checkbox-row a{ color:var(--color-accent-bright); text-decoration:underline; text-underline-offset:2px; }

.beta__submit{ margin-top:.35rem; }
.beta__status{ margin-top:1rem; padding:.9rem 1rem; border-radius:var(--radius-sm); font-size:.9rem; display:none; }
.beta__status.is-visible{ display:flex; align-items:flex-start; gap:.6rem; }
.beta__status svg{ flex:none; width:1.15rem; height:1.15rem; margin-top:.1rem; }
.beta__status--preview{ background:color-mix(in srgb, var(--color-accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-line)); color:var(--color-fg); }
.beta__status--error{ background:rgb(255 138 138 / .08); border:1px solid rgb(255 138 138 / .3); color:var(--color-fg); }
.beta__disclaimer{ margin-top:1.1rem; font-size:.8rem; color:var(--color-fg-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ padding-block:var(--space-2xl) var(--space-xl); border-top:1px solid var(--color-line); }
.footer__top{ display:flex; justify-content:space-between; gap:var(--space-xl); flex-wrap:wrap; padding-bottom:var(--space-lg); }
.footer__brand{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--color-fg); }
.footer__brand span{ color:var(--color-accent-bright); }
.footer__tagline{ margin-top:.6rem; max-width:28rem; color:var(--color-fg-3); font-size:.94rem; }
.footer__cols{ display:flex; gap:var(--space-2xl); flex-wrap:wrap; }
.footer__col h3{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-3); font-family:var(--font-mono); margin-bottom:.85rem; font-weight:500; }
.footer__col ul{ display:flex; flex-direction:column; gap:.55rem; }
.footer__col a{ font-size:.92rem; color:var(--color-fg-2); transition:color .15s ease; }
.footer__col a:hover{ color:var(--color-fg); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:var(--space-lg); border-top:1px solid var(--color-line); }
.footer__legal{ font-size:.84rem; color:var(--color-fg-3); }

@media (max-width:640px){
  .footer__top{ flex-direction:column; gap:var(--space-lg); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Legal-Platzhalterseiten
   ========================================================================== */
.legal-page{ padding-block:var(--space-2xl); min-height:60svh; }
.legal-page h1{ font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight:800; }
.legal-page .badge{ margin-bottom:var(--space-md); }
.legal-page p{ margin-top:var(--space-md); color:var(--color-fg-2); max-width:60ch; }
.legal-page__back{ display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--space-xl); color:var(--color-accent-bright); font-weight:600; }

/* ==========================================================================
   Scroll-Reveal
   Wichtig: der SICHTBARE Zustand ist die Voreinstellung (kein persistentes
   opacity:0). Das Verstecken passiert ausschließlich als kurzer Animations-
   Frame beim Hinzufügen von .is-visible durch IntersectionObserver. So bleibt
   Inhalt garantiert sichtbar ohne JS, bei fehlgeschlagenem JS und in
   Vollseiten-Screenshots, die nicht wirklich scrollen (design-quality.md §8).
   ========================================================================== */
@keyframes reveal-up{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}
[data-anim].is-visible{ animation:reveal-up .8s cubic-bezier(.2,.7,.2,1) both; }
[data-anim-group].is-visible > *{ animation:reveal-up .7s cubic-bezier(.2,.7,.2,1) both; }
[data-anim-group].is-visible > *:nth-child(1){ animation-delay:.02s; }
[data-anim-group].is-visible > *:nth-child(2){ animation-delay:.09s; }
[data-anim-group].is-visible > *:nth-child(3){ animation-delay:.16s; }
[data-anim-group].is-visible > *:nth-child(4){ animation-delay:.23s; }
[data-anim-group].is-visible > *:nth-child(5){ animation-delay:.3s; }
[data-anim-group].is-visible > *:nth-child(6){ animation-delay:.37s; }

@media (prefers-reduced-motion: reduce){
  [data-anim].is-visible, [data-anim-group].is-visible > *{ animation:none !important; }
}

/* ==========================================================================
   Responsive: globale Anpassungen
   ========================================================================== */
@media (max-width:900px){
  .coach{ text-align:left; }
  .community{ padding:1.9rem; }
}
@media (max-width:640px){
  :root{ --section-pad-y:clamp(3rem, 12vw, 4.5rem); }
  .hero__ctas .btn{ width:100%; }
  .beta__card{ padding:1.6rem; }
  .community{ flex-direction:column; align-items:flex-start; gap:var(--space-lg); }
  .community__body{ flex:none; }
  .community__actions{ width:100%; }
  .community__actions .btn{ width:100%; }
}

/* Mobil: Phone-Reihen als kompakte Dreier-Galerie statt drei gestapelter Geräte */
@media (max-width:640px){
  .phone-row{ flex-wrap:nowrap; gap:.55rem; align-items:flex-start; }
  .phone-row .phone, .split .phone-row .phone{ width:31.5%; border-radius:1.15rem; padding:.22rem; }
  .phone-row .phone .phone__screen{ border-radius:.95rem; }
  .phone-row .phone .phone__notch{ display:none; }
  .phone-row .phone--placeholder .phone__screen{ padding:.5rem; }
  .phone-row .phone__placeholder-icon{ width:1.3rem; height:1.3rem; margin-bottom:.4rem; }
  .phone-row .phone__placeholder-label{ font-size:.6rem; }
}


/* Lichtpunkte an den Enden der Datenfluss-Linien (am Gerät) */
.heute-v2__values .heute-v2__line::after, .heute-v2__result .heute-v2__line--in::before{
  content:''; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%;
  background:#9cc4ff; box-shadow:0 0 10px 2px rgb(89 158 255 / .55);
}
.heute-v2__values .heute-v2__line::after{ right:-2px; }
.heute-v2__result .heute-v2__line--in::before{ left:-2px; }

/* Heute: Kopf in derselben Typo-Sprache wie die Hero-H1 */
.heute-v2 .section-head h2{ font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem); font-weight:700; letter-spacing:-.035em; line-height:1; }
.heute-v2 .section-head p{ font-size:clamp(1.08rem, 1rem + .3vw, 1.25rem); margin-top:var(--space-md); }

/* ---- Lichtintegration Hero: Gerät sitzt im Licht der Bergwelt ---- */
.hero__device--main .phone--stage{
  box-shadow:
    0 45px 100px rgb(0 0 0 / .55),
    0 0 0 1px rgb(255 255 255 / .05) inset,
    -26px 0 60px -34px rgb(89 158 255 / .55),
    26px 0 60px -34px rgb(89 158 255 / .55),
    0 -30px 80px -40px rgb(140 190 255 / .45);
}
/* Streiflicht, das die Grate direkt neben und hinter dem Gerät aufhellt (screen-Blend nur auf dem Bild) */
.hero__stage-light{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(34rem 15rem at 50% 56%, rgb(110 170 255 / .30), transparent 70%),
    radial-gradient(16rem 8rem at 50% 50%, rgb(160 205 255 / .22), transparent 70%);
}
/* Lichtpfütze / minimale Reflexion am Fuß des Geräts */
.hero__device-floor{
  position:absolute; z-index:-1; left:50%; bottom:6%; width:150%; height:5rem; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgb(110 170 255 / .28), transparent 75%);
  filter:blur(12px); pointer-events:none;
}
@media (max-width:759px){
  .hero__stage-light{ background:radial-gradient(20rem 10rem at 50% 52%, rgb(110 170 255 / .26), transparent 70%); }
}
/* Wortmarke in der Nav nur auf Unterseiten ohne Hero-Kicker (bis zum Logo) */
.nav__wordmark{ font-family:var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:.28em; text-transform:uppercase; padding-left:.28em; color:var(--color-fg); }

/* ==========================================================================
   Bereich 2: Viele Daten. Kein Zusammenhang. (vier Quellen → ein Bild)
   ========================================================================== */
.problem-v2__stage{ position:relative; margin-top:var(--space-2xl); display:flex; flex-direction:column; align-items:center; }
.problem-v2__sources{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); }
.problem-v2__src{
  margin-inline:clamp(.4rem, 1.2vw, 1rem); padding:1.15rem 1.2rem 1.2rem;
  display:flex; flex-direction:column; gap:.35rem;
  border-radius:16px; background:color-mix(in srgb, var(--color-panel) 55%, transparent);
  border:1px solid rgb(255 255 255 / .06);
  position:relative;
  transition:border-color .8s ease, background-color .8s ease, opacity .8s ease;
}
.problem-v2__src::after{ /* Stummel: jede Quelle endet für sich */
  content:''; position:absolute; left:50%; top:100%; width:1px; height:1.6rem;
  background:linear-gradient(180deg, rgb(255 255 255 / .22), transparent);
}
.problem-v2__src-head{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.problem-v2__src-icon{ display:inline-grid; place-items:center; width:1.1rem; height:1.1rem; color:var(--color-fg-2); }
.problem-v2__src-icon svg{ width:100%; height:100%; }
.problem-v2__src-val{ font-size:clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight:650; letter-spacing:-.015em; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.problem-v2__src-note{ font-size:.84rem; color:var(--color-fg-3); }

/* Zusammenführung */
.problem-v2__merge{ display:block; width:100%; height:clamp(7rem, 12vw, 10.5rem); margin-top:1.6rem; overflow:visible; }
.problem-v2__path{
  fill:none; stroke:rgb(122 176 255 / .5); stroke-width:1.2; vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:0;
}
.problem-v2__mobile-merge{ display:none; }
.problem-v2__node{
  position:relative; width:3.1rem; height:3.1rem; margin-top:-.2rem; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(closest-side, rgb(110 170 255 / .35), transparent 75%);
}
.problem-v2__node span{ width:.8rem; height:.8rem; border-radius:50%; background:#cfe2ff; box-shadow:0 0 0 5px rgb(89 158 255 / .16), 0 0 26px 6px rgb(89 158 255 / .45); }
.problem-v2__statement{
  margin-top:var(--space-md); text-align:center;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight:650; letter-spacing:-.02em; color:var(--color-fg-2);
}
.problem-v2__statement strong{ color:var(--color-fg); font-weight:700; }
/* Erklärende Ergänzung: Typo/Farbe/Breite wie die Subline der Sektion, klar unter dem Statement */
.problem-v2__note{ margin-top:var(--space-sm); max-width:44ch; text-align:center; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); color:var(--color-fg-2); text-wrap:balance; }

/* Animation beim ersten Sichtbarwerden: erst getrennt, dann zusammengeführt */
.problem-v2__stage.is-armed .problem-v2__src{ opacity:.55; }
.problem-v2__stage.is-armed .problem-v2__src:nth-child(odd){ animation:src-drift-a 6s ease-in-out infinite; }
.problem-v2__stage.is-armed .problem-v2__src:nth-child(even){ animation:src-drift-b 7.4s ease-in-out infinite; }
.problem-v2__stage.is-armed .problem-v2__path{ stroke-dashoffset:84; opacity:.5; }
.problem-v2__stage.is-armed .problem-v2__node,
.problem-v2__stage.is-armed .problem-v2__statement,
.problem-v2__stage.is-armed .problem-v2__note{ opacity:0; transform:translateY(10px); }
@keyframes src-drift-a{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes src-drift-b{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(4px); } }

.problem-v2__stage.is-merged .problem-v2__src:nth-child(n){
  opacity:1; animation:none; transform:none;
  border-color:rgb(122 176 255 / .2); transition-delay:calc(var(--i) * .12s);
}
.problem-v2__stage.is-merged .problem-v2__path{
  stroke-dashoffset:0; opacity:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) calc(.3s + var(--i) * .12s), opacity .6s ease calc(.3s + var(--i) * .12s);
}
.problem-v2__stage.is-merged .problem-v2__node{ opacity:1; transform:none; transition:opacity .7s ease 1.5s, transform .7s cubic-bezier(.2,.8,.2,1) 1.5s; }
.problem-v2__stage.is-merged .problem-v2__statement,
.problem-v2__stage.is-merged .problem-v2__note{ opacity:1; transform:none; transition:opacity .8s ease 1.75s, transform .8s cubic-bezier(.2,.8,.2,1) 1.75s; }

@media (max-width:860px){
  .problem-v2__sources{ grid-template-columns:1fr 1fr; row-gap:1rem; }
  .problem-v2__src{ margin-inline:.35rem; }
  .problem-v2__src::after{ display:none; }
  .problem-v2__merge{ display:none; }
  .problem-v2__mobile-merge{
    display:block; width:1px; height:3.5rem; margin-top:1.2rem;
    background:linear-gradient(180deg, rgb(255 255 255 / .06), rgb(122 176 255 / .7));
    transform-origin:top center;
  }
  .problem-v2__stage.is-armed .problem-v2__mobile-merge{ transform:scaleY(0); }
  .problem-v2__stage.is-merged .problem-v2__mobile-merge{ transform:none; transition:transform 1s cubic-bezier(.4,0,.2,1) .5s; }
}
@media (max-width:420px){
  .problem-v2__src{ padding:.9rem .85rem 1rem; }
  .problem-v2__src-note{ font-size:.76rem; }
}
@media (prefers-reduced-motion: reduce){
  .problem-v2__stage .problem-v2__src{ animation:none !important; }
}

/* ==========================================================================
   Bereich 3: Öffnen → Verstehen → Handeln als ruhiger 10-s-Loop
   Grundzustand (ohne JS / reduzierte Bewegung) = alles sichtbar, keine Highlights.
   ========================================================================== */
.hv-shot{ position:relative; width:100%; aspect-ratio:900 / 1860; }
.hv-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.heute-v2__device .phone__screen{ background:var(--color-ink); }
.hv-hl{
  position:absolute; border-radius:9% / 18%; opacity:0; pointer-events:none;
  box-shadow:0 0 0 1.5px rgb(150 195 255 / .85), 0 0 26px 2px rgb(89 158 255 / .35);
  background:rgb(120 175 255 / .07);
}
.hv-hl--schritte{ left:4.9%; top:21%; width:43.6%; height:14.5%; }
.hv-hl--protein{ left:51.6%; top:21%; width:43.6%; height:14.5%; }
.hv-hl--schlaf{ left:4.9%; top:37.1%; width:43.6%; height:11.8%; }
.hv-hl--regeneration{ left:4.9%; top:52.9%; width:90.2%; height:11.8%; border-radius:4.5% / 18%; }
.hv-hl--impuls{ left:4.9%; top:68.5%; width:90.2%; height:21.6%; border-radius:4.5% / 10%; }
.heute-v2__step{ color:var(--color-fg-2); transition:color .4s; }

.heute-v2__values .heute-v2__line::before{
  content:''; position:absolute; top:-1px; left:0; width:26px; height:3px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, transparent, #d6e6ff, transparent);
}
[data-heute-loop].is-looping, [data-heute-loop].is-looping *{ animation-play-state:running; }
[data-heute-loop].is-looping.is-paused, [data-heute-loop].is-looping.is-paused *{ animation-play-state:paused !important; }
[data-heute-loop].is-looping .heute-v2__value-row--0{ animation:hv-row-0 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-row-0{ 0%,12%{ opacity:.32; } 16%,86%{ opacity:1; } 94%,100%{ opacity:.32; } }
[data-heute-loop].is-looping .heute-v2__value-row--0 .heute-v2__line{ animation:hv-line-0 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-line-0{ 0%,12%{ opacity:.25; } 16%,86%{ opacity:1; } 94%,100%{ opacity:.25; } }
[data-heute-loop].is-looping .heute-v2__value-row--0 .heute-v2__line::before{ animation:hv-travel-0 10s linear infinite; }
@keyframes hv-travel-0{ 0%,13%{ left:0; opacity:0; } 14%{ opacity:1; } 20%{ left:calc(100% - 26px); opacity:1; } 21%,100%{ left:calc(100% - 26px); opacity:0; } }
[data-heute-loop].is-looping .heute-v2__value-row--1{ animation:hv-row-1 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-row-1{ 0%,16.5%{ opacity:.32; } 20.5%,86%{ opacity:1; } 94%,100%{ opacity:.32; } }
[data-heute-loop].is-looping .heute-v2__value-row--1 .heute-v2__line{ animation:hv-line-1 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-line-1{ 0%,16.5%{ opacity:.25; } 20.5%,86%{ opacity:1; } 94%,100%{ opacity:.25; } }
[data-heute-loop].is-looping .heute-v2__value-row--1 .heute-v2__line::before{ animation:hv-travel-1 10s linear infinite; }
@keyframes hv-travel-1{ 0%,17.5%{ left:0; opacity:0; } 18.5%{ opacity:1; } 24.5%{ left:calc(100% - 26px); opacity:1; } 25.5%,100%{ left:calc(100% - 26px); opacity:0; } }
[data-heute-loop].is-looping .heute-v2__value-row--2{ animation:hv-row-2 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-row-2{ 0%,21%{ opacity:.32; } 25%,86%{ opacity:1; } 94%,100%{ opacity:.32; } }
[data-heute-loop].is-looping .heute-v2__value-row--2 .heute-v2__line{ animation:hv-line-2 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-line-2{ 0%,21%{ opacity:.25; } 25%,86%{ opacity:1; } 94%,100%{ opacity:.25; } }
[data-heute-loop].is-looping .heute-v2__value-row--2 .heute-v2__line::before{ animation:hv-travel-2 10s linear infinite; }
@keyframes hv-travel-2{ 0%,22%{ left:0; opacity:0; } 23%{ opacity:1; } 29%{ left:calc(100% - 26px); opacity:1; } 30%,100%{ left:calc(100% - 26px); opacity:0; } }
[data-heute-loop].is-looping .heute-v2__value-row--3{ animation:hv-row-3 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-row-3{ 0%,25.5%{ opacity:.32; } 29.5%,86%{ opacity:1; } 94%,100%{ opacity:.32; } }
[data-heute-loop].is-looping .heute-v2__value-row--3 .heute-v2__line{ animation:hv-line-3 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-line-3{ 0%,25.5%{ opacity:.25; } 29.5%,86%{ opacity:1; } 94%,100%{ opacity:.25; } }
[data-heute-loop].is-looping .heute-v2__value-row--3 .heute-v2__line::before{ animation:hv-travel-3 10s linear infinite; }
@keyframes hv-travel-3{ 0%,26.5%{ left:0; opacity:0; } 27.5%{ opacity:1; } 33.5%{ left:calc(100% - 26px); opacity:1; } 34.5%,100%{ left:calc(100% - 26px); opacity:0; } }
[data-heute-loop].is-looping .heute-v2__value-row--4{ animation:hv-row-4 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-row-4{ 0%,30%{ opacity:.32; } 34%,86%{ opacity:1; } 94%,100%{ opacity:.32; } }
[data-heute-loop].is-looping .heute-v2__value-row--4 .heute-v2__line{ animation:hv-line-4 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-line-4{ 0%,30%{ opacity:.25; } 34%,86%{ opacity:1; } 94%,100%{ opacity:.25; } }
[data-heute-loop].is-looping .heute-v2__value-row--4 .heute-v2__line::before{ animation:hv-travel-4 10s linear infinite; }
@keyframes hv-travel-4{ 0%,31%{ left:0; opacity:0; } 32%{ opacity:1; } 38%{ left:calc(100% - 26px); opacity:1; } 39%,100%{ left:calc(100% - 26px); opacity:0; } }
[data-heute-loop].is-looping .hv-hl--schlaf{ animation:hv-hl-schlaf 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-hl-schlaf{ 0%,14%{ opacity:0; } 18%,40%{ opacity:1; } 44%,100%{ opacity:0; } }
[data-heute-loop].is-looping .hv-hl--schritte{ animation:hv-hl-schritte 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-hl-schritte{ 0%,23%{ opacity:0; } 27%,40%{ opacity:1; } 44%,100%{ opacity:0; } }
[data-heute-loop].is-looping .hv-hl--protein{ animation:hv-hl-protein 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-hl-protein{ 0%,27.5%{ opacity:0; } 31.5%,40%{ opacity:1; } 44%,100%{ opacity:0; } }
[data-heute-loop].is-looping .hv-hl--regeneration{ animation:hv-hl-regeneration 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-hl-regeneration{ 0%,41%{ opacity:0; } 45%,86%{ opacity:1; } 92%,100%{ opacity:0; } }
[data-heute-loop].is-looping .hv-hl--impuls{ animation:hv-hl-impuls 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-hl-impuls{ 0%,61%{ opacity:0; } 65%,86%{ opacity:1; } 92%,100%{ opacity:0; } }
[data-heute-loop].is-looping .heute-v2__phase-status{ animation:hv-status 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-status{ 0%,41%{ opacity:0; transform:translateY(10px); } 46%,86%{ opacity:1; transform:none; } 93%,100%{ opacity:0; transform:translateY(-4px); } }
[data-heute-loop].is-looping .heute-v2__phase-status .heute-v2__scale-bar--active{ animation:hv-scale 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-scale{ 0%,45%{ box-shadow:none; opacity:.4; } 50%,86%{ box-shadow:0 0 12px rgb(243 196 106 / .55); opacity:1; } 93%,100%{ box-shadow:none; opacity:.4; } }
[data-heute-loop].is-looping .heute-v2__phase-action .heute-v2__col-label,
[data-heute-loop].is-looping .heute-v2__phase-action .heute-v2__status-note{ animation:hv-action 10s cubic-bezier(.4,0,.2,1) infinite; }
[data-heute-loop].is-looping .heute-v2__quote--1{ animation:hv-q1 10s cubic-bezier(.4,0,.2,1) infinite; }
[data-heute-loop].is-looping .heute-v2__quote--2{ animation:hv-q2 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-action{ 0%,60%{ opacity:0; } 64%,86%{ opacity:1; } 93%,100%{ opacity:0; } }
@keyframes hv-q1{ 0%,61%{ opacity:0; transform:translateY(8px); } 66%,86%{ opacity:1; transform:none; } 93%,100%{ opacity:0; transform:none; } }
@keyframes hv-q2{ 0%,65%{ opacity:0; transform:translateY(8px); } 70%,86%{ opacity:1; transform:none; } 93%,100%{ opacity:0; transform:none; } }
[data-heute-loop].is-looping .heute-v2__phase-status .heute-v2__line--in{ animation:hv-in-a 10s cubic-bezier(.4,0,.2,1) infinite; }
[data-heute-loop].is-looping .heute-v2__phase-action .heute-v2__line--in{ animation:hv-in-b 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-in-a{ 0%,39%{ opacity:.15; } 43%,86%{ opacity:1; } 93%,100%{ opacity:.15; } }
@keyframes hv-in-b{ 0%,59%{ opacity:.15; } 63%,86%{ opacity:1; } 93%,100%{ opacity:.15; } }
[data-heute-loop].is-looping .heute-v2__step--1{ animation:hv-step-1 10s cubic-bezier(.4,0,.2,1) infinite; }
[data-heute-loop].is-looping .heute-v2__step--2{ animation:hv-step-2 10s cubic-bezier(.4,0,.2,1) infinite; }
[data-heute-loop].is-looping .heute-v2__step--3{ animation:hv-step-3 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv-step-1{ 0%,10%{ color:var(--color-fg-3); } 14%,38%{ color:#7fe6da; } 42%,100%{ color:var(--color-fg-3); } }
@keyframes hv-step-2{ 0%,40%{ color:var(--color-fg-3); } 44%,58%{ color:#7fe6da; } 62%,100%{ color:var(--color-fg-3); } }
@keyframes hv-step-3{ 0%,60%{ color:var(--color-fg-3); } 64%,86%{ color:#7fe6da; } 92%,100%{ color:var(--color-fg-3); } }
@media (prefers-reduced-motion: reduce){
  [data-heute-loop] *, [data-heute-loop] *::before{ animation:none !important; }
}
/* Mobil: Werte flach statt Kästen */
@media (max-width:1023px){
  .heute-v2__value-row{ background:none !important; border:0 !important; border-radius:0; padding:.55rem .2rem; }
  .heute-v2__values{ gap:.1rem 1.2rem; }
  .heute-v2__value-row + .heute-v2__value-row{ border-top:0; }
  .heute-v2__values .heute-v2__value-row{ border-bottom:1px solid rgb(255 255 255 / .06) !important; }
}

.problem-v2 .section-head h2{ font-size:clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); font-weight:700; letter-spacing:-.035em; line-height:1; }
.problem-v2 .section-head h2 span{ display:block; }
.problem-v2 .section-head h2 span + span{ color:#C7D1DE; }
.problem-v2 .section-head p{ font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); margin-top:var(--space-md); max-width:44ch; margin-inline:auto; }

/* Ernährung: zwei echte Screens, ca. 11 % größer als in der Dreier-Reihe (kein Platzhalter mehr) */
@media (min-width:641px){
  .split .phone-row--nutrition{ gap:1.25rem; }
  .split .phone-row--nutrition .phone{ width:min(47%, 233px); }
}
@media (max-width:640px){
  .phone-row--nutrition .phone, .split .phone-row--nutrition .phone{ width:47%; }
}

/* Ernährung mit drei echten Screens: Bildspalte breiter, damit die Geräte groß bleiben */
@media (min-width:1024px){
  #ernaehrung .split{ grid-template-columns:1.22fr .78fr; }
}
@media (min-width:641px){
  .split .phone-row--trio{ gap:.9rem; }
  .split .phone-row--trio .phone{ width:min(32%, 208px); border-radius:2.1rem; }
}
@media (max-width:640px){
  .phone-row--trio .phone, .split .phone-row--trio .phone{ width:31.5%; }
}

/* Ernährung Variante A: zwei große Screens, Scan als echter Ausschnitt im Hinweis */
@media (min-width:1024px){ #ernaehrung .split{ grid-template-columns:1fr 1fr; } }
@media (min-width:641px){
  .split .phone-row--nutrition{ gap:1.2rem; }
  .split .phone-row--nutrition .phone{ width:min(47.5%, 252px); }
}
.split__note--scan{ flex-direction:column; align-items:stretch; gap:1rem; }
.scan-note__text{ display:flex; gap:.75rem; align-items:flex-start; }
.scan-note__shot{ margin:0; }
.scan-note__shot img{
  display:block; width:100%; max-width:21rem; height:auto; border-radius:14px;
  border:1px solid rgb(255 255 255 / .08); box-shadow:0 18px 40px rgb(0 0 0 / .4);
}
.scan-note__shot figcaption{ margin-top:.6rem; font-size:.8rem; color:var(--color-fg-3); }

/* ==========================================================================
   Bereich 3 final: „Öffnen. Verstehen. Handeln.“ (hv3)
   Grundzustand = statisch vollständig (reduzierte Bewegung / ohne JS).
   ========================================================================== */
.hv3{ position:relative; isolation:isolate; overflow:hidden; }
.hv3__light{
  position:absolute; z-index:0; left:58%; top:28%; width:64rem; height:44rem; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .15), rgb(40 216 200 / .04) 55%, transparent 74%);
  filter:blur(24px); pointer-events:none;
}
.hv3 > .container{ position:relative; z-index:1; }
.hv3__head{ display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:var(--space-xl); }
.hv3__title{ margin:0; font-size:clamp(3.2rem, 1.7rem + 5.8vw, 7.6rem); font-weight:700; letter-spacing:-.045em; line-height:.92; }
.hv3__w{ display:block; }
.hv3__w--1{ color:var(--color-fg); }
.hv3__w--2{ color:#7DB2FF; }
.hv3__w--3{ color:#62E1D5; }
.hv3__sub{ margin:0 0 .7rem; font-size:clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height:1.45; color:var(--color-fg-2); max-width:25ch; }

.hv3__stage{
  margin-top:clamp(3rem, 6vw, 5.5rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1.5rem, 3.2vw, 3.2rem);
}
.hv3__device{ position:relative; display:flex; justify-content:center; }
.hv3__phone{ width:clamp(300px, 27vw, 400px); }
.hv3__glow{
  position:absolute; z-index:-1; left:50%; top:45%; width:170%; height:80%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(110 170 255 / .26), rgb(40 216 200 / .06) 55%, transparent 74%);
  filter:blur(30px); pointer-events:none;
}

/* Signal-Layer (Öffnen) */
.hv3__signals{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-end; gap:.9rem; }
.hv3__sig{
  display:flex; flex-direction:column; gap:.15rem; min-width:10.5rem;
  padding:.75rem 1rem .8rem; border-radius:14px;
  background:color-mix(in srgb, var(--color-ink) 60%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgb(255 255 255 / .08); box-shadow:0 14px 34px rgb(0 0 0 / .35);
}
.hv3__sig--1{ margin-right:1.8rem; }
.hv3__sig--2{ margin-right:.6rem; }
.hv3__sig--3{ margin-right:2.4rem; }
.hv3__sig-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.hv3__sig-val{ font-size:1.22rem; font-weight:650; letter-spacing:-.01em; color:var(--color-fg); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Status- und Handlungs-Layer */
.hv3__slot{ display:flex; flex-direction:column; gap:1.6rem; }
.hv3__layer{ margin:0; }
.hv3__layer-label{ margin:0 0 .7rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.hv3__tag--2{ color:#7DB2FF; }
.hv3__tag--3{ color:#62E1D5; }
.hv3__status-title{ margin:0; font-size:1rem; color:var(--color-fg-2); }
.hv3__status-value{ margin:.1rem 0 0; font-size:clamp(2.2rem, 1.8rem + 1.4vw, 3rem); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--color-fg); }
.hv3__scale{ display:flex; gap:.35rem; margin:.8rem 0 .7rem; max-width:10rem; }
.hv3__scale i{ flex:1; height:.32rem; border-radius:999px; background:rgb(255 255 255 / .12); }
.hv3__scale i.on{ background:#F3C46A; box-shadow:0 0 12px rgb(243 196 106 / .5); }
.hv3__note{ margin:0; font-size:.85rem; color:var(--color-fg-3); max-width:24ch; }
.hv3__layer img{
  display:block; width:100%; max-width:22rem; height:auto; border-radius:16px;
  border:1px solid rgb(255 255 255 / .09); box-shadow:0 22px 50px rgb(0 0 0 / .45), 0 0 40px -12px rgb(89 158 255 / .35);
}

/* Spot-Hervorhebung im Screen: umliegende UI tritt zurück */
.hv-hl--spot{ box-shadow:0 0 0 1.5px rgb(150 195 255 / .85), 0 0 26px 2px rgb(89 158 255 / .35), 0 0 0 999px rgb(5 8 13 / .55); background:transparent; }

.hv3.is-looping, .hv3.is-looping *{ animation-play-state:running; }
.hv3.is-looping.is-paused, .hv3.is-looping.is-paused *{ animation-play-state:paused !important; }
/* Einblendung des Statement-Blocks gehört nicht zur Schleife: nicht mitpausieren, sonst bleibt er halb durchsichtig stehen */
.hv3.is-looping.is-paused .hv3__recovery{ animation-play-state:running !important; }
.hv3__recovery .heute-v2__statement-line{ text-wrap:balance; }
.hv3{ --lo:0; }

/* Desktop: Status und Handlungen teilen sich einen Platz und erscheinen nacheinander */
@media (min-width:1024px){
  .hv3.is-looping .hv3__slot{ display:grid; }
  .hv3.is-looping .hv3__layer{ grid-area:1 / 1; align-self:center; }
}
.hv3.is-looping .hv3__sig--0{ animation:hv3-sig-0 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-sig-0{ 0%,7%{ opacity:var(--lo); transform:translateX(12px); } 11%,36%{ opacity:1; transform:none; } 40%,86%{ opacity:.26; transform:none; } 92%,100%{ opacity:var(--lo); transform:translateX(12px); } }
.hv3.is-looping .hv3__sig--1{ animation:hv3-sig-1 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-sig-1{ 0%,11.5%{ opacity:var(--lo); transform:translateX(12px); } 15.5%,36%{ opacity:1; transform:none; } 40%,86%{ opacity:.26; transform:none; } 92%,100%{ opacity:var(--lo); transform:translateX(12px); } }
.hv3.is-looping .hv3__sig--2{ animation:hv3-sig-2 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-sig-2{ 0%,16%{ opacity:var(--lo); transform:translateX(12px); } 20%,36%{ opacity:1; transform:none; } 40%,86%{ opacity:.26; transform:none; } 92%,100%{ opacity:var(--lo); transform:translateX(12px); } }
.hv3.is-looping .hv3__sig--3{ animation:hv3-sig-3 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-sig-3{ 0%,20.5%{ opacity:var(--lo); transform:translateX(12px); } 24.5%,36%{ opacity:1; transform:none; } 40%,86%{ opacity:.26; transform:none; } 92%,100%{ opacity:var(--lo); transform:translateX(12px); } }
.hv3.is-looping .hv-hl--schlaf{ animation:hv3-hl-schlaf 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-hl-schlaf{ 0%,8%{ opacity:0; } 11%,35%{ opacity:1; } 39%,100%{ opacity:0; } }
.hv3.is-looping .hv-hl--schritte{ animation:hv3-hl-schritte 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-hl-schritte{ 0%,17%{ opacity:0; } 20%,35%{ opacity:1; } 39%,100%{ opacity:0; } }
.hv3.is-looping .hv-hl--protein{ animation:hv3-hl-protein 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-hl-protein{ 0%,21.5%{ opacity:0; } 24.5%,35%{ opacity:1; } 39%,100%{ opacity:0; } }
.hv3.is-looping .hv-hl--regeneration{ animation:hv3-hl-regeneration 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-hl-regeneration{ 0%,38%{ opacity:0; } 41%,57%{ opacity:1; } 61%,100%{ opacity:0; } }
.hv3.is-looping .hv-hl--impuls{ animation:hv3-hl-impuls 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-hl-impuls{ 0%,79%{ opacity:0; } 82%,91%{ opacity:1; } 95%,100%{ opacity:0; } }
.hv3.is-looping .hv3__layer--status{ animation:hv3-l-status 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-l-status{ 0%,40%{ opacity:var(--lo); transform:translateY(10px); } 44%,57%{ opacity:1; transform:none; } 61%,100%{ opacity:var(--lo); transform:translateY(-4px); } }
.hv3.is-looping .hv3__layer--act1{ animation:hv3-l-act1 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-l-act1{ 0%,61%{ opacity:var(--lo); transform:translateY(10px); } 65%,75%{ opacity:1; transform:none; } 79%,100%{ opacity:var(--lo); transform:translateY(-4px); } }
.hv3.is-looping .hv3__layer--act2{ animation:hv3-l-act2 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-l-act2{ 0%,79%{ opacity:var(--lo); transform:translateY(10px); } 83%,91%{ opacity:1; transform:none; } 95%,100%{ opacity:var(--lo); transform:translateY(-4px); } }
.hv3.is-looping .hv3__w--1{ animation:hv3-w1 10s cubic-bezier(.4,0,.2,1) infinite; }
.hv3.is-looping .hv3__w--2{ animation:hv3-w2 10s cubic-bezier(.4,0,.2,1) infinite; }
.hv3.is-looping .hv3__w--3{ animation:hv3-w3 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hv3-w1{ 0%,37%{ opacity:1; } 41%,92%{ opacity:.26; } 97%,100%{ opacity:1; } }
@keyframes hv3-w2{ 0%,3%{ opacity:1; } 7%,37%{ opacity:.26; } 41%,57%{ opacity:1; } 61%,92%{ opacity:.26; } 97%,100%{ opacity:1; } }
@keyframes hv3-w3{ 0%,3%{ opacity:1; } 7%,57%{ opacity:.26; } 61%,100%{ opacity:1; } }

/* Tablet/Mobil: gestapelt, nichts verschwindet ganz, nur Fokus wandert */
@media (max-width:1023px){
  .hv3{ --lo:.32; }
  .hv3__head{ grid-template-columns:1fr; gap:var(--space-md); }
  .hv3__sub{ max-width:34ch; }
  .hv3__stage{ display:flex; flex-direction:column; align-items:center; gap:var(--space-lg); }
  .hv3__device{ order:1; }
  .hv3__phone{ width:min(76vw, 22rem); }
  .hv3__signals{ order:2; width:100%; max-width:30rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
  .hv3__sig{ margin-right:0 !important; min-width:0; }
  .hv3__slot{ order:3; width:100%; max-width:30rem; }
  .hv3__layer img{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .hv3 *, .hv3 *::before{ animation:none !important; }
}

/* ==========================================================================
   Training (tr2): ein großes echtes Gerät, zwei Daten-Callouts, drei Kernpunkte
   ========================================================================== */
.tr2{ position:relative; isolation:isolate; overflow:hidden; background:var(--color-ink); }
.tr2__light{
  position:absolute; z-index:0; left:68%; top:50%; width:52rem; height:44rem; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .13), transparent 72%); filter:blur(24px); pointer-events:none;
}
.tr2__grid{ position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:clamp(2rem, 5vw, 5rem); }
.tr2__title{ margin:0; font-size:clamp(2.3rem, 1.5rem + 2.3vw, 3.5rem); font-weight:700; letter-spacing:-.035em; line-height:1.02; }
.tr2__sub{ margin:var(--space-md) 0 0; font-size:clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height:1.5; color:var(--color-fg-2); max-width:38ch; }
.tr2__points{ list-style:none; margin:var(--space-xl) 0 0; padding:0; display:flex; flex-direction:column; gap:1.15rem; }
.tr2__points li{ display:flex; flex-direction:column; gap:.2rem; padding-left:1.1rem; border-left:2px solid rgb(255 255 255 / .1); }
.tr2__points li:first-child{ border-left-color:rgb(125 178 255 / .7); }
.tr2__points li:nth-child(2){ border-left-color:rgb(98 225 213 / .7); }
.tr2__points strong{ font-size:1.05rem; font-weight:650; color:var(--color-fg); }
.tr2__points span{ font-size:.95rem; color:var(--color-fg-2); max-width:42ch; }
.tr2__meta{ margin:var(--space-lg) 0 0; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-3); }

.tr2__stage{ --tr-phone:clamp(270px, 27vw, 400px); position:relative; display:flex; justify-content:flex-end; padding-block:1rem; }
.tr2__device{ position:relative; }
.tr2__phone{ width:var(--tr-phone); }
.tr2__glow{
  position:absolute; z-index:-1; left:50%; top:40%; width:170%; height:75%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(110 170 255 / .24), transparent 72%); filter:blur(28px); pointer-events:none;
}
.tr2__shot{ position:relative; width:100%; aspect-ratio:920 / 2000; }
.tr2__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tr2__mark{ position:absolute; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.tr2__mark--prev{ left:8.4%; top:37.5%; width:37.6%; height:2.4%; box-shadow:0 0 0 1.5px rgb(150 195 255 / .8), 0 0 18px rgb(89 158 255 / .35); }
.tr2__mark--next{ left:8.4%; top:40.1%; width:31.4%; height:2.4%; box-shadow:0 0 0 1.5px rgb(98 225 213 / .85), 0 0 18px rgb(40 216 200 / .35); }

.tr2__callout{
  position:relative; z-index:3; display:flex; flex-direction:column; gap:.2rem;
  width:clamp(12rem, 13.2vw + 3rem, 15rem); padding:.9rem 1.05rem 1rem; border-radius:16px;
  background:color-mix(in srgb, var(--color-ink) 64%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgb(98 225 213 / .32); box-shadow:0 18px 40px rgb(0 0 0 / .42), 0 0 24px -10px rgb(40 216 200 / .35);
}
/* Callouts sitzen links am Gerät, auf Höhe der markierten Zeilen */
.tr2__callout--prev{ --gap:1.3rem; --d:.15s; --float:8.4s; }
.tr2__callout--next{ margin-right:1.2rem; --gap:2.5rem; --d:.55s; --float:9.6s; }
.tr2__callout-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.tr2__callout .tr2__callout-label{ color:#62E1D5; }
.tr2__callout-val{ font-size:clamp(1.02rem, .7rem + .55vw, 1.25rem); font-weight:650; letter-spacing:-.01em; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.tr2__up{ color:#62E1D5; margin-right:.15rem; }
.tr2__callout-note{ font-size:.78rem; color:var(--color-fg-3); }

/* Ruhige Scroll-Reveals: erst Letzte Einheit, dann Nächster Schritt (einmalig) */
.tr2__stage.is-armed .tr2__callout{ opacity:0; transform:translateX(-10px); }
.tr2__stage.is-armed.is-shown .tr2__callout{ opacity:1; transform:none; }
.tr2__stage.is-armed.is-shown .tr2__callout--next{ transition-delay:.6s; }
.tr2__stage.is-shown .tr2__mark--prev{ opacity:1; transition-delay:.2s; }
.tr2__stage.is-shown .tr2__mark--next{ opacity:1; transition-delay:.8s; }

@media (max-width:1023px){
  .tr2__grid{ grid-template-columns:1fr; }
  .tr2__light{ left:50%; top:62%; }
  .tr2__stage{ flex-direction:column; align-items:center; gap:.9rem; }
  .tr2__phone{ width:min(78vw, 22rem); }
  .tr2__callout{ position:static; width:100%; max-width:22rem; }
  .tr2__stage .tr2__callout--prev{ order:2; }
  .tr2__stage .tr2__callout--next{ order:3; }
  .tr2__device{ order:1; }
  .tr2__text{ order:0; }
}
@media (prefers-reduced-motion: reduce){
  .tr2__callout, .tr2__mark{ transition:none; }
}

@media (max-width:1023px){ .tr2__stage{ justify-content:center; } }

/* Mobil: Headline → Subline → großes Gerät (+ Callouts) → Kernpunkte */
@media (max-width:1023px){
  .tr2__grid{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-lg); }
  .tr2__text{ display:contents; }
  .tr2__head{ order:0; }
  .tr2__stage{ order:1; }
  .tr2__points{ order:2; margin-top:0; }
  .tr2__meta{ order:3; margin-top:0; }
}

/* Training: Live Workout als Hauptgerät, Routine klein und gedimmt dahinter */
.tr2__device--main{ z-index:2; }
.tr2__device--second{ position:absolute; right:0; top:9%; z-index:1; filter:brightness(.55) saturate(.9); }
.tr2__device--second .phone{ width:calc(var(--tr-phone) * .66); }
@media (max-width:1023px){
  .tr2__device--second{ display:none; }
  .tr2__device--main{ margin-right:0; }
}
.tr2__points li:nth-child(4){ border-left-color:rgb(255 255 255 / .18); }

/* Training-Callouts: einheitlich türkis, mit Abstand zum Gerät, animiert */
.tr2__wire{
  position:absolute; left:100%; top:50%; width:var(--gap); height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgb(98 225 213 / .75), rgb(98 225 213 / .25));
  transform-origin:left center;
}
.tr2__wire i{
  position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; opacity:0;
  background:#bff4ee; box-shadow:0 0 10px 2px rgb(40 216 200 / .6);
}
.tr2__stage.is-armed .tr2__callout{ opacity:0; }
.tr2__stage.is-armed .tr2__wire{ transform:scaleX(0); }
.tr2__stage.is-shown .tr2__callout{
  animation:tr2-in .8s cubic-bezier(.16,1,.3,1) var(--d) both, tr2-float var(--float) ease-in-out calc(var(--d) + 1.2s) infinite;
}
.tr2__stage.is-shown .tr2__wire{ animation:tr2-wire .6s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .55s) both; }
.tr2__stage.is-shown .tr2__wire i{ animation:tr2-pulse 5.6s ease-in-out calc(var(--d) + 2.4s) infinite; }
@keyframes tr2-in{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
@keyframes tr2-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes tr2-wire{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes tr2-pulse{ 0%{ left:0; opacity:0; } 6%{ opacity:1; } 26%{ left:calc(100% - 5px); opacity:1; } 32%,100%{ left:calc(100% - 5px); opacity:0; } }
@media (max-width:1023px){
  .tr2__wire{ display:none; }
  .tr2__stage.is-shown .tr2__callout{ animation:tr2-in .8s cubic-bezier(.16,1,.3,1) var(--d) both; }
}
@media (prefers-reduced-motion: reduce){
  .tr2__stage .tr2__callout, .tr2__stage .tr2__wire, .tr2__stage .tr2__wire i{ animation:none !important; opacity:1; transform:none; }
  .tr2__stage .tr2__wire i{ display:none; }
}

/* Callouts als versetzte Spalte links neben dem Gerät (überlappen sich nie) */
.tr2__callouts{
  position:absolute; z-index:3; top:30%; right:calc(var(--tr-phone) + 1.3rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:.9rem;
}
@media (max-width:1023px){
  .tr2__callouts{ position:static; order:2; width:100%; max-width:22rem; align-items:stretch; }
  .tr2__callouts .tr2__callout{ width:100%; margin-right:0; }
}

/* ==========================================================================
   Aktivität (act): großes echtes Gerät, große Schrittzahl, echter Verlauf, drei Kontext-Inseln
   ========================================================================== */
.act{ position:relative; isolation:isolate; overflow:hidden; background:var(--color-ink); }
.act__light{
  position:absolute; z-index:0; left:32%; top:48%; width:50rem; height:42rem; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .12), transparent 72%); filter:blur(24px); pointer-events:none;
}
.act > .container{ position:relative; z-index:1; }
.act__head{ text-align:center; max-width:52rem; margin-inline:auto; }
.act__title{ margin:0; font-size:clamp(2.3rem, 1.4rem + 3vw, 4rem); font-weight:700; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.act__sub{ margin:var(--space-md) auto 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.5; color:var(--color-fg-2); max-width:56ch; }

.act__stage{
  margin-top:clamp(2.5rem, 5vw, 4.5rem);
  display:grid; grid-template-columns:auto minmax(0, 30rem); justify-content:center; align-items:center;
  gap:clamp(2.5rem, 6vw, 6rem);
}
.act__device{ position:relative; }
.act__phone{ width:clamp(290px, 26vw, 380px); }
.act__glow{
  position:absolute; z-index:-1; left:50%; top:42%; width:170%; height:75%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(110 170 255 / .22), transparent 72%); filter:blur(28px); pointer-events:none;
}

.act__label{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.act__big{ margin:.6rem 0 0; display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.act__num{ font-size:clamp(4rem, 2.6rem + 5vw, 7rem); font-weight:700; letter-spacing:-.045em; line-height:.9; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.act__unit{ font-size:clamp(1.1rem, 1rem + .4vw, 1.4rem); font-weight:600; color:var(--color-fg-2); }
.act__bar{ margin-top:1.1rem; height:.35rem; border-radius:999px; background:rgb(255 255 255 / .1); overflow:hidden; max-width:26rem; }
.act__bar i{ display:block; height:100%; width:var(--p); border-radius:inherit; background:linear-gradient(90deg, var(--color-brand), #62E1D5); transform-origin:left center; }
.act__bar-note{ margin:.5rem 0 0; font-size:.85rem; color:var(--color-fg-3); font-variant-numeric:tabular-nums; }
.act__metrics{ margin:var(--space-lg) 0 0; display:flex; gap:2.4rem; flex-wrap:wrap; }
.act__metrics div{ display:flex; flex-direction:column-reverse; gap:.2rem; }
.act__metrics dt{ font-size:.82rem; color:var(--color-fg-3); }
.act__metrics dd{ margin:0; font-size:clamp(1.5rem, 1.2rem + .8vw, 2rem); font-weight:650; letter-spacing:-.02em; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.act__timeline{ margin:var(--space-xl) 0 0; }
.act__timeline figcaption{ margin-bottom:.7rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#62E1D5; }
.act__timeline img{
  display:block; width:100%; max-width:26rem; height:auto; border-radius:16px;
  border:1px solid rgb(255 255 255 / .08); box-shadow:0 20px 44px rgb(0 0 0 / .42);
}

/* Kontext: drei ruhige Textinseln, durch eine feine gemeinsame Linie verbunden */
.act__ctx{ margin-top:clamp(3.5rem, 7vw, 6rem); text-align:center; }
.act__ctx-lead{ margin:0; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight:650; letter-spacing:-.02em; color:var(--color-fg); }
.act__ctx-list{
  list-style:none; margin:var(--space-xl) auto 0; padding:1.6rem 0 0; max-width:60rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.2rem, 3vw, 2.6rem);
  position:relative;
}
.act__ctx-list::before{
  content:''; position:absolute; left:16.66%; right:16.66%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgb(122 176 255 / .45) 20%, rgb(98 225 213 / .45) 80%, transparent);
  transform-origin:center;
}
.act__ctx-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; }
.act__ctx-item::before{
  content:''; position:absolute; top:calc(-1.6rem - 3px); left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%;
  background:#cfe2ff; box-shadow:0 0 0 4px rgb(89 158 255 / .12), 0 0 14px rgb(89 158 255 / .45);
}
.act__ctx-head{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.act__ctx-icon{ width:1.05rem; height:1.05rem; color:var(--color-fg-2); display:inline-grid; }
.act__ctx-icon svg{ width:100%; height:100%; }
.act__ctx-val{ font-size:1.2rem; font-weight:650; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.act__ctx-q{ font-size:.9rem; color:var(--color-fg-2); max-width:24ch; }

/* Ruhige Reveals (einmalig): Zahlen, Balken, Kontext zeitversetzt */
.act.is-armed .act__bar i{ transform:scaleX(0); }
.act.is-armed .act__ctx-item, .act.is-armed .act__timeline{ opacity:0; transform:translateY(12px); }
.act.is-armed .act__ctx-list::before{ transform:scaleX(0); }
.act.is-shown .act__bar i{ transform:none; transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
.act.is-shown .act__timeline{ opacity:1; transform:none; transition:opacity .8s ease .6s, transform .8s cubic-bezier(.2,.8,.2,1) .6s; }
.act.is-ctx .act__ctx-list::before{ transform:none; transition:transform 1.1s cubic-bezier(.4,0,.2,1); }
.act.is-ctx .act__ctx-item{ opacity:1; transform:none; transition:opacity .8s ease calc(.35s + var(--i) * .22s), transform .8s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i) * .22s); }

@media (max-width:1023px){
  .act__stage{ grid-template-columns:1fr; justify-items:center; gap:var(--space-xl); }
  .act__phone{ width:min(78vw, 22rem); }
  .act__data{ width:100%; max-width:30rem; }
  .act__light{ left:50%; top:40%; }
}
@media (max-width:700px){
  .act__ctx-list{ grid-template-columns:1fr; padding-top:0; gap:1.6rem; max-width:22rem; }
  .act__ctx-list::before, .act__ctx-item::before{ display:none; }
  .act__ctx-item{ padding-top:1.2rem; border-top:1px solid rgb(255 255 255 / .08); }
}

/* ==========================================================================
   Fortschritt (prog): Dark Editorial Data, Chart lebt direkt auf der Fläche
   ========================================================================== */
.prog{ background:var(--color-ink); }
.prog__head{ max-width:62rem; }
.prog__title{ margin:0; font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.prog__title span{ display:block; }
.prog__title span + span{ color:#C7D1DE; }
.prog__sub{ margin:var(--space-md) 0 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.5; color:var(--color-fg-2); max-width:52ch; }

.prog__figure{ margin:clamp(2.5rem, 5vw, 4rem) 0 0; }
.prog__stats{ display:flex; gap:clamp(2rem, 6vw, 5rem); justify-content:flex-end; }
.prog__stat{ display:flex; flex-direction:column; gap:.3rem; }
.prog__stat-label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-3); }
.prog__stat-val{ font-size:clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.prog__stat-val small{ font-size:.42em; font-weight:500; letter-spacing:0; color:var(--color-fg-3); }
.prog__stat-val--delta{ color:#7DB2FF; }

.prog__chart{ position:relative; margin-top:1.4rem; height:clamp(15rem, 26vw, 22rem); }
.prog__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.prog__grid{ stroke:rgb(255 255 255 / .06); stroke-width:1; vector-effect:non-scaling-stroke; }
.prog__raw{ fill:none; stroke:rgb(255 255 255 / .12); stroke-width:1; vector-effect:non-scaling-stroke; }
.prog__dot{ fill:none; stroke:rgb(214 226 245 / .5); stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.prog__trend{ fill:none; stroke:#599EFF; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.prog__trend-glow{ fill:none; stroke:rgb(89 158 255 / .35); stroke-width:10; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:blur(6px); }
.prog__ylab{ position:absolute; left:0; transform:translateY(-120%); font-size:.78rem; color:var(--color-fg-3); font-variant-numeric:tabular-nums; }
.prog__xaxis{ position:absolute; left:0; right:0; top:100%; margin-top:.7rem; height:1.2rem; }
.prog__xlab{ position:absolute; transform:translateX(-50%); font-size:.78rem; color:var(--color-fg-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.prog__xlab:first-child{ transform:none; }
.prog__xlab:last-child{ transform:translateX(-100%); }
.prog__endpoint{
  position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:#cfe2ff; box-shadow:0 0 0 4px rgb(89 158 255 / .22), 0 0 18px rgb(89 158 255 / .55);
}
.prog__legend{ margin-top:2.6rem; display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; font-size:.8rem; color:var(--color-fg-3); }
.prog__key{ display:inline-flex; align-items:center; gap:.5rem; }
.prog__key--raw::before{ content:''; width:6px; height:6px; border-radius:50%; background:rgb(214 226 245 / .5); }
.prog__key--trend::before{ content:''; width:1.4rem; height:3px; border-radius:2px; background:#599EFF; }
.prog__example{ margin-left:auto; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .6rem; border:1px dashed var(--color-line-2); border-radius:999px; }

.prog__foot{ margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:clamp(1.5rem, 3vw, 2.2rem); border-top:1px solid rgb(255 255 255 / .07);
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem 3rem; flex-wrap:wrap; }
.prog__claim{ margin:0; font-size:clamp(1.3rem, 1.05rem + 1vw, 1.9rem); font-weight:650; letter-spacing:-.02em; color:var(--color-fg-2); }
.prog__claim span{ color:var(--color-fg); }
.prog__more{ margin:0; display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; font-size:.9rem; color:var(--color-fg-2); }
.prog__more-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-3); align-self:center; }

/* Einmalige Scroll-Animation (~2,3 s): Messwerte → Pause → Trend zeichnet sich → Werte */
.prog.is-armed .prog__dot, .prog.is-armed .prog__raw{ opacity:0; }
.prog.is-armed .prog__trendwrap{ clip-path:inset(0 100% 0 0); }
.prog.is-armed .prog__endpoint, .prog.is-armed .prog__stat{ opacity:0; transform:translateY(8px); }
.prog.is-armed .prog__endpoint{ transform:scale(.4); }
.prog.is-drawn .prog__dot{ opacity:1; transition:opacity .35s ease calc(var(--i) * 22ms); }
.prog.is-drawn .prog__raw{ opacity:1; transition:opacity .6s ease .2s; }
.prog.is-drawn .prog__trendwrap{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.45,0,.2,1) .95s; }
.prog.is-drawn .prog__endpoint{ opacity:1; transform:none; transition:opacity .4s ease 1.95s, transform .5s cubic-bezier(.2,.8,.2,1) 1.95s; }
.prog.is-drawn .prog__stat{ opacity:1; transform:none; transition:opacity .5s ease 1.95s, transform .5s ease 1.95s; }
.prog.is-drawn .prog__stat + .prog__stat{ transition-delay:2.1s; }

@media (max-width:760px){
  .prog__stats{ justify-content:flex-start; gap:2rem; }
  .prog__chart{ height:15rem; }
  .prog__ylab, .prog__xlab{ font-size:.8rem; }
  .prog__xlab:nth-child(2), .prog__xlab:nth-child(3){ display:none; }
  .prog__example{ margin-left:0; }
  .prog__foot{ flex-direction:column; }
}

/* ==========================================================================
   System-Sektion (sys): „Alles im Zusammenhang.“ Heute als Mitte, vier Bereiche drumherum
   ========================================================================== */
.sys{ position:relative; isolation:isolate; overflow:hidden; background:var(--color-ink); }
.sys__head{ text-align:center; max-width:68rem; margin-inline:auto; }
.sys__title{ margin:0; font-size:clamp(2.6rem, 1.5rem + 4.2vw, 5.4rem); font-weight:700; letter-spacing:-.045em; line-height:1; }
.sys__sub{ margin:var(--space-md) auto 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.5; color:var(--color-fg-2); max-width:50ch; }

.sys__stage{ position:relative; max-width:66rem; margin:clamp(2.5rem, 5vw, 4rem) auto 0; height:clamp(24rem, 30vw, 27rem); }
.sys__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sys__curve{ fill:none; stroke:rgb(122 176 255 / .38); stroke-width:1.2; vector-effect:non-scaling-stroke; }

.sys__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(17rem, 24vw, 21rem); padding:1.2rem 1.2rem 1.25rem; border-radius:22px; text-align:left;
  background:color-mix(in srgb, var(--color-panel) 78%, transparent);
  border:1px solid rgb(122 176 255 / .22);
  box-shadow:0 30px 70px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .03) inset;
}
.sys__core-glow{
  position:absolute; z-index:-1; left:50%; top:50%; width:200%; height:190%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .2), rgb(40 216 200 / .05) 55%, transparent 74%);
  filter:blur(24px); pointer-events:none;
}
.sys__core-label{ margin:0; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#62E1D5; }
.sys__core-title{ margin:.35rem 0 .9rem; font-size:1.3rem; font-weight:650; letter-spacing:-.02em; color:var(--color-fg); }
.sys__core img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid rgb(255 255 255 / .07); }

.sys__nodes{ list-style:none; margin:0; padding:0; }
.sys__node{
  position:absolute; z-index:3; width:clamp(11.5rem, 17vw, 14rem);
  display:flex; flex-direction:column; gap:.2rem; padding:.9rem 1rem 1rem; border-radius:16px;
  background:color-mix(in srgb, var(--color-ink) 70%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgb(255 255 255 / .08);
}
.sys__node--training{ left:0; top:10%; }
.sys__node--ernaehrung{ left:0; bottom:10%; }
.sys__node--aktivitaet{ right:0; top:10%; }
.sys__node--regeneration{ right:0; bottom:10%; }
.sys__node-head{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.sys__node-icon{ width:1.05rem; height:1.05rem; display:inline-grid; color:#7DB2FF; }
.sys__node-icon svg{ width:100%; height:100%; }
.sys__node-val{ display:inline-flex; align-items:center; gap:.45rem; font-size:1.2rem; font-weight:650; letter-spacing:-.01em; color:var(--color-fg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sys__node-q{ font-size:.86rem; color:var(--color-fg-2); }
.sys__amber{ width:.5rem; height:.5rem; border-radius:50%; background:#F3C46A; box-shadow:0 0 0 3px rgb(243 196 106 / .18); }

.sys__note{ margin:clamp(2rem, 4vw, 3rem) auto 0; max-width:52ch; text-align:center; font-size:.84rem; color:var(--color-fg-3); }

/* Einmaliger Reveal (~1,8 s): Mitte → vier Bereiche nacheinander → Verbindung */
.sys.is-armed .sys__core{ opacity:0; transform:translate(-50%,-46%); }
.sys.is-armed .sys__node{ opacity:0; transform:translateY(10px); }
.sys.is-armed .sys__curve{ opacity:0; }
.sys.is-shown .sys__core{ opacity:1; transform:translate(-50%,-50%); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.sys.is-shown .sys__node{ opacity:1; transform:none; transition:opacity .5s ease calc(.3s + var(--i) * .18s), transform .6s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .18s); }
.sys.is-shown .sys__curve{ opacity:1; transition:opacity .7s ease calc(1.1s + var(--i) * .06s); }

/* Tablet/Mobil: Heute oben, darunter die vier Bereiche an einer gemeinsamen vertikalen Linie */
@media (max-width:860px){
  .sys__stage{ height:auto; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
  .sys__lines{ display:none; }
  .sys__core{ position:relative; left:auto; top:auto; transform:none; width:min(100%, 21rem); }
  .sys.is-armed .sys__core{ transform:translateY(10px); }
  .sys.is-shown .sys__core{ transform:none; }
  .sys__nodes{ position:relative; width:min(100%, 21rem); display:flex; flex-direction:column; gap:.8rem; padding-left:1.6rem; }
  .sys__nodes::before{
    content:''; position:absolute; left:.45rem; top:-1.6rem; bottom:1.5rem; width:1px;
    background:linear-gradient(180deg, rgb(122 176 255 / .55), rgb(98 225 213 / .25));
  }
  .sys__node{ position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100%; }
  .sys__node::before{
    content:''; position:absolute; left:calc(-1.6rem + .45rem - 3px); top:1.55rem; width:7px; height:7px; border-radius:50%;
    background:#cfe2ff; box-shadow:0 0 10px rgb(89 158 255 / .5);
  }
}

/* ==========================================================================
   Coach (coach2, in Planung): Coach → Plan → dein Profil, Daten bleiben bei dir
   ========================================================================== */
.coach2{ position:relative; isolation:isolate; overflow:hidden; background:var(--color-ink); }
.coach2__head{ max-width:56rem; }
.coach2__title{ margin:1rem 0 0; font-size:clamp(2.3rem, 1.4rem + 3.2vw, 4.3rem); font-weight:700; letter-spacing:-.04em; line-height:1.02; }
.coach2__title span{ display:block; }
.coach2__title span + span{ color:#C7D1DE; }
.coach2__sub{ margin:var(--space-md) 0 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height:1.55; color:var(--color-fg-2); max-width:56ch; }

.coach2__flow{
  position:relative; margin-top:clamp(2.5rem, 5vw, 4rem);
  display:grid; grid-template-columns:1fr minmax(0, 22rem) 1fr; align-items:center; gap:clamp(1.5rem, 4vw, 4rem);
}
.coach2__line{
  position:absolute; left:8%; right:8%; top:50%; height:1px; z-index:0;
  background:linear-gradient(90deg, rgb(255 255 255 / .12), rgb(122 176 255 / .5) 45%, rgb(98 225 213 / .6));
  background-size:100% 1px;
}
.coach2__line::before{ /* gestrichelter Anteil = zeitlich begrenzte Verbindung auf Coach-Seite */
  content:''; position:absolute; left:0; width:34%; top:-1px; height:3px;
  background:repeating-linear-gradient(90deg, var(--color-ink) 0 6px, transparent 6px 12px);
}
.coach2__actor{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center; }
.coach2__avatar{
  width:4.2rem; height:4.2rem; border-radius:50%; display:grid; place-items:center;
  font-size:1.35rem; font-weight:650; color:var(--color-fg-2);
  background:var(--color-panel); border:1px solid rgb(255 255 255 / .12); box-shadow:0 0 0 8px var(--color-ink);
}
.coach2__avatar--you{
  width:5rem; height:5rem; font-size:1.2rem; color:var(--color-ink);
  background:linear-gradient(145deg, #7DB2FF, #62E1D5); border:0;
  box-shadow:0 0 0 8px var(--color-ink), 0 0 40px rgb(89 158 255 / .35);
}
.coach2__actor-label{ font-size:1.02rem; font-weight:650; color:var(--color-fg); }
.coach2__actor-note{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-3); }
.coach2__owned{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; max-width:17rem; }
.coach2__owned li{ font-size:.78rem; padding:.22rem .6rem; border-radius:999px; color:#bff4ee; background:rgb(98 225 213 / .08); border:1px solid rgb(98 225 213 / .25); }

.coach2__pack{
  position:relative; z-index:2; padding:1.1rem 1.2rem 1.15rem; border-radius:18px;
  background:color-mix(in srgb, var(--color-panel) 86%, transparent);
  border:1px dashed rgb(243 196 106 / .38); box-shadow:0 24px 60px rgb(0 0 0 / .5);
}
.coach2__pack-head{ margin:0 0 .8rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-2); }
.coach2__pack-tag{ color:#F3C46A; font-size:.62rem; }
.coach2__macros{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1rem; }
.coach2__macros div{ display:flex; flex-direction:column; gap:.05rem; }
.coach2__macros dt{ font-size:.74rem; color:var(--color-fg-3); }
.coach2__macros dd{ margin:0; font-size:1.12rem; font-weight:650; color:var(--color-fg); font-variant-numeric:tabular-nums; }
.coach2__pack-sub{ margin:.95rem 0 .4rem; font-size:.74rem; color:var(--color-fg-3); }
.coach2__routines{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.coach2__routines li{ font-size:.82rem; padding:.28rem .65rem; border-radius:8px; background:rgb(255 255 255 / .05); color:var(--color-fg); }
.coach2__pack-foot{ margin:.95rem 0 0; font-size:.8rem; color:#62E1D5; }

.coach2__statement{ margin-top:clamp(3rem, 6vw, 5rem); text-align:center; }
.coach2__big{ margin:0; font-size:clamp(2.1rem, 1.3rem + 3vw, 3.9rem); font-weight:700; letter-spacing:-.04em; line-height:1.02; }
.coach2__big span{ display:block; }
.coach2__big span + span{ color:#62E1D5; }
.coach2__small{ margin:var(--space-md) auto 0; max-width:46ch; font-size:1rem; color:var(--color-fg-2); }

.coach2__bottom{
  margin-top:clamp(2.5rem, 5vw, 3.5rem); padding-top:clamp(1.5rem, 3vw, 2rem); border-top:1px solid rgb(255 255 255 / .07);
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem 3rem; flex-wrap:wrap;
}
.coach2__points{ list-style:none; margin:0; padding:0; display:flex; gap:1.2rem 2.4rem; flex-wrap:wrap; }
.coach2__points li{ display:flex; flex-direction:column; gap:.15rem; }
.coach2__points strong{ font-size:.96rem; font-weight:650; color:var(--color-fg); }
.coach2__points span{ font-size:.84rem; color:var(--color-fg-3); }
.coach2__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.coach2__cta .microcopy{ margin:0; max-width:30ch; }

/* Einmaliger Reveal (~1,9 s): Nutzer → Coach → Plan erscheint beim Coach → wandert zur Mitte → Verbindung */
.coach2.is-armed .coach2__actor, .coach2.is-armed .coach2__line{ opacity:0; }
.coach2.is-armed .coach2__actor--you{ transform:translateY(10px); }
.coach2.is-armed .coach2__pack{ opacity:0; transform:translateX(-38%) scale(.94); }
.coach2.is-shown .coach2__actor--you{ opacity:1; transform:none; transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.coach2.is-shown .coach2__actor--coach{ opacity:1; transition:opacity .5s ease .3s; }
.coach2.is-shown .coach2__pack{ opacity:1; transform:none; transition:opacity .45s ease .6s, transform .9s cubic-bezier(.3,.7,.2,1) .75s; }
.coach2.is-shown .coach2__line{ opacity:1; transition:opacity .6s ease 1.45s; }

@media (max-width:900px){
  .coach2__flow{ grid-template-columns:1fr; justify-items:center; gap:1.4rem; }
  .coach2__line{ left:50%; right:auto; top:2rem; bottom:3rem; width:1px; height:auto;
    background:linear-gradient(180deg, rgb(255 255 255 / .12), rgb(122 176 255 / .5) 45%, rgb(98 225 213 / .6)); }
  .coach2__line::before{ left:-1px; top:0; width:3px; height:30%;
    background:repeating-linear-gradient(180deg, var(--color-ink) 0 6px, transparent 6px 12px); }
  .coach2__pack{ width:min(100%, 22rem); }
  .coach2.is-armed .coach2__pack{ transform:translateY(-24px) scale(.96); }
  .coach2__statement{ text-align:left; }
  .coach2__small{ margin-left:0; }
  .coach2__bottom{ flex-direction:column; align-items:flex-start; }
  .coach2__points{ flex-direction:column; gap:1rem; }
}

/* Desktop: Linie auf Höhe der Avatar-Mitten, läuft hinter Plan-Karte und Avataren (keine Kollision mit Beschriftungen) */
@media (min-width:901px){
  .coach2__flow{ align-items:start; }
  .coach2__line{ top:2.5rem; left:15%; right:15%; }
  .coach2__actor--coach{ padding-top:.4rem; }
}

/* ==========================================================================
   Datenschutz (priv): ruhiger Vertrauensmoment, Typografie + vier belegte Aussagen
   ========================================================================== */
.priv{ position:relative; isolation:isolate; overflow:hidden; background:var(--color-ink); }
.priv__mark{
  position:absolute; z-index:0; left:-1.5vw; bottom:-2.2vw; pointer-events:none; user-select:none;
  font-size:clamp(5rem, 15vw, 15rem); font-weight:800; letter-spacing:-.06em; line-height:.8; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgb(255 255 255 / .05);
}
.priv__grid{ position:relative; z-index:1; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.5rem, 6vw, 6rem); align-items:start; }
.priv__title{ margin:0; font-size:clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); font-weight:700; letter-spacing:-.04em; line-height:1.04; }
.priv__title span{ display:block; }
.priv__title span + span{ color:#C7D1DE; }
.priv__sub{ margin:var(--space-md) 0 0; font-size:clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height:1.6; color:var(--color-fg-2); max-width:44ch; }
.priv__facts{ margin:var(--space-lg) 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.95rem; font-weight:600; color:var(--color-fg); }
.priv__facts span{ display:inline-flex; align-items:center; gap:.5rem; }
.priv__facts span::before{ content:''; width:5px; height:5px; border-radius:50%; background:#62E1D5; }
.priv__online{ margin:var(--space-md) 0 0; font-size:.84rem; line-height:1.55; color:var(--color-fg-3); max-width:44ch; }

.priv__proofs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.priv__proof{ display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; padding:1.5rem 0; border-top:1px solid rgb(255 255 255 / .08); }
.priv__proof:last-child{ border-bottom:1px solid rgb(255 255 255 / .08); }
.priv__num{ font-family:var(--font-mono); font-size:.78rem; color:var(--color-fg-3); padding-top:.2rem; }
.priv__tag{ margin:0 0 .3rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-3); }
.priv__proof h3{ margin:0; font-size:clamp(1.12rem, 1rem + .4vw, 1.35rem); font-weight:650; letter-spacing:-.015em; color:var(--color-fg); }
.priv__proof-body > p:last-child{ margin:.45rem 0 0; font-size:.95rem; line-height:1.55; color:var(--color-fg-2); max-width:52ch; }
/* Nutrition Scan als stärkster konkreter Beleg etwas mehr Gewicht */
/* alle vier Belege gleich: türkise Nummer + Tag */
.priv__proof .priv__num, .priv__proof .priv__tag{ color:#62E1D5; }

/* Ruhiger Reveal: Belege erscheinen nacheinander (einmalig) */
.priv.is-armed .priv__proof{ opacity:0; transform:translateY(10px); }
.priv.is-shown .priv__proof{ opacity:1; transform:none; transition:opacity .7s ease calc(var(--i) * .16s), transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .16s); }

@media (max-width:900px){
  .priv__grid{ grid-template-columns:1fr; gap:var(--space-xl); }
  .priv__mark{ font-size:26vw; bottom:-1vw; }
  .priv__proof{ grid-template-columns:2rem 1fr; gap:.8rem; padding:1.25rem 0; }
}

/* ==========================================================================
   Datenschutz v2: „Was auf dem Gerät bleibt“ (pmap)
   ========================================================================== */
.priv__intro{ max-width:58rem; }
.pmap{
  position:relative; margin-top:clamp(2.5rem, 5vw, 4rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(2.2rem, 5vw, 5rem);
}
.pmap__side{ display:flex; flex-direction:column; gap:2.4rem; }
.pmap__side--in{ align-items:flex-end; }
.pmap__side--out{ align-items:flex-start; }
.pmap__node{ position:relative; max-width:19rem; }
.pmap__side--in .pmap__node{ text-align:right; }
.pmap__tag{ margin:0 0 .3rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#62E1D5; }
.pmap__node h3{ margin:0; font-size:clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight:650; letter-spacing:-.015em; color:var(--color-fg); }
.pmap__node > p:last-child{ margin:.4rem 0 0; font-size:.9rem; line-height:1.5; color:var(--color-fg-2); }

/* Leitungen zwischen Knoten und Gerät */
.pmap__wire{ position:absolute; top:2.05rem; height:1px; width:clamp(2.2rem, 5vw, 5rem); pointer-events:none; }
.pmap__wire--in{ left:100%; background:linear-gradient(90deg, rgb(98 225 213 / .15), rgb(98 225 213 / .75)); transform-origin:left center; }
.pmap__wire--out{ right:100%; background:linear-gradient(90deg, rgb(98 225 213 / .75), rgb(98 225 213 / .15)); transform-origin:left center; }
.pmap__wire--dashed{ background:repeating-linear-gradient(90deg, rgb(98 225 213 / .55) 0 5px, transparent 5px 10px); }
.pmap__wire i{ position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:#bff4ee; box-shadow:0 0 10px 2px rgb(40 216 200 / .55); opacity:0; }

/* abstraktes Gerät: nur Kontur + Licht, keine nachgebaute App-Oberfläche */
.pmap__device{ position:relative; }
.pmap__glow{
  position:absolute; z-index:-1; left:50%; top:50%; width:200%; height:120%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .16), rgb(40 216 200 / .05) 55%, transparent 74%);
  filter:blur(26px); pointer-events:none;
}
.pmap__phone{
  position:relative; width:clamp(16rem, 20vw, 18.5rem); min-height:30rem; padding:3rem 1.2rem 1.6rem;
  border-radius:2.6rem; border:1.5px solid rgb(255 255 255 / .16);
  background:linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / 0) 40%), color-mix(in srgb, var(--color-ink) 85%, transparent);
  box-shadow:0 0 0 6px rgb(255 255 255 / .02), 0 40px 90px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
  display:flex; flex-direction:column; gap:.8rem;
}
.pmap__notch{ position:absolute; top:.85rem; left:50%; width:5.2rem; height:1.35rem; transform:translateX(-50%); border-radius:1rem; background:rgb(255 255 255 / .06); }
.pmap__on{ margin:0 0 .2rem; text-align:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-fg-3); }
.pmap__block{ padding:.8rem .9rem .85rem; border-radius:16px; background:rgb(255 255 255 / .035); border:1px solid rgb(255 255 255 / .06); }
.pmap__block-title{ margin:0; font-size:.98rem; font-weight:650; color:var(--color-fg); }
.pmap__block-note{ margin:.3rem 0 0; font-size:.8rem; line-height:1.45; color:var(--color-fg-2); }
.pmap__chips{ margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.3rem; }
.pmap__chips span{ font-size:.72rem; padding:.18rem .5rem; border-radius:999px; color:#bff4ee; background:rgb(98 225 213 / .08); border:1px solid rgb(98 225 213 / .22); }

.priv__foot{
  margin-top:clamp(2.5rem, 5vw, 3.5rem); padding-top:clamp(1.3rem, 3vw, 1.8rem); border-top:1px solid rgb(255 255 255 / .07);
  display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
}
.priv__foot .priv__facts{ margin:0; }
.priv__delete{ margin:0; font-size:.9rem; color:var(--color-fg-2); }

/* Einmaliger Aufbau (~2,2 s): Gerät → Inhalte → Leitungen → Knoten → Lichtpunkte (rein bzw. raus) */
.priv.is-armed .pmap__phone{ opacity:0; transform:translateY(12px); }
.priv.is-armed .pmap__block, .priv.is-armed .pmap__node{ opacity:0; }
.priv.is-armed .pmap__block{ transform:translateY(6px); }
.priv.is-armed .pmap__side--in .pmap__node{ transform:translateX(-10px); }
.priv.is-armed .pmap__side--out .pmap__node{ transform:translateX(10px); }
.priv.is-armed .pmap__wire{ transform:scaleX(0); }
.priv.is-armed .pmap__wire--out{ transform-origin:right center; }
.priv.is-shown .pmap__phone{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.priv.is-shown .pmap__block{ opacity:1; transform:none; transition:opacity .5s ease calc(.35s + var(--i) * .15s), transform .5s ease calc(.35s + var(--i) * .15s); }
.priv.is-shown .pmap__node{ opacity:1; transform:none; transition:opacity .6s ease calc(1s + var(--i) * .18s), transform .6s cubic-bezier(.2,.8,.2,1) calc(1s + var(--i) * .18s); }
.priv.is-shown .pmap__wire{ transform:none; transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(1.05s + var(--i, 0) * .18s); }
.priv.is-shown .pmap__node--health .pmap__wire i{ animation:pmap-in 1s ease-in-out 1.9s 1 both; }
.priv.is-shown .pmap__node--backup .pmap__wire i{ animation:pmap-out 1s ease-in-out 2.1s 1 both; }
@keyframes pmap-in{ 0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 5px); opacity:0; } }
@keyframes pmap-out{ 0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 5px); opacity:0; } }

@media (max-width:980px){
  .pmap{ grid-template-columns:1fr; justify-items:center; gap:0; }
  .pmap__side{ gap:1.6rem; width:min(100%, 22rem); }
  .pmap__side--in, .pmap__side--out{ align-items:stretch; }
  .pmap__side--in .pmap__node{ text-align:left; }
  .pmap__node{ max-width:none; padding-left:1.3rem; border-left:1px solid rgb(98 225 213 / .35); }
  .pmap__node--off{ border-left-style:dashed; }
  .pmap__wire{ display:none; }
  .pmap__device{ margin:1.8rem 0; }
  .pmap__device::before, .pmap__device::after{ content:''; position:absolute; left:50%; width:1px; height:1.8rem; background:rgb(98 225 213 / .45); }
  .pmap__device::before{ top:-1.8rem; }
  .pmap__device::after{ bottom:-1.8rem; }
  .pmap__phone{ width:min(80vw, 18rem); min-height:0; }
  .priv.is-armed .pmap__side--in .pmap__node, .priv.is-armed .pmap__side--out .pmap__node{ transform:translateY(8px); }
  .priv__foot{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){ .pmap__wire i{ display:none; } }

/* ==========================================================================
   Community (comm): kleiner, menschlicher Ergänzungs-Abschnitt
   ========================================================================== */
.comm{ background:var(--color-ink); }
.comm__grid{
  display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"head examples" "rest examples";
  column-gap:clamp(2rem, 6vw, 5.5rem); row-gap:var(--space-xl); align-items:start;
}
.comm__head{ grid-area:head; }
.comm__examples{ grid-area:examples; align-self:center; }
.comm__rest{ grid-area:rest; }
.comm__brand{ margin:0 0 .9rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#62E1D5; }
.comm__title{ margin:0; font-size:clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); font-weight:700; letter-spacing:-.035em; line-height:1.04; }
.comm__title span{ display:block; }
.comm__title span + span{ color:#C7D1DE; }
.comm__sub{ margin:var(--space-md) 0 0; font-size:clamp(1.02rem, 1rem + .25vw, 1.15rem); line-height:1.55; color:var(--color-fg-2); max-width:44ch; }

/* abstrakte Avatar-Gruppe (keine Gesichter, keine Namen) */
.comm__crowd{ display:flex; margin-bottom:1.1rem; padding-left:.4rem; }
.comm__crowd span{
  width:2.3rem; height:2.3rem; border-radius:50%; margin-left:-.55rem; border:2px solid var(--color-ink);
  background:linear-gradient(145deg, rgb(125 178 255 / .55), rgb(98 225 213 / .35));
}
.comm__crowd span:nth-child(2){ background:linear-gradient(145deg, rgb(98 225 213 / .55), rgb(89 158 255 / .25)); }
.comm__crowd span:nth-child(3){ background:linear-gradient(145deg, rgb(199 209 222 / .45), rgb(89 158 255 / .25)); }
.comm__crowd span:nth-child(4){ background:linear-gradient(145deg, rgb(89 158 255 / .6), rgb(21 29 39 / .9)); }
.comm__crowd span:nth-child(5){ background:rgb(255 255 255 / .06); }

.comm__posts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.comm__post{
  display:flex; gap:.85rem; align-items:flex-start; padding:.95rem 1.1rem; border-radius:16px;
  background:color-mix(in srgb, var(--color-panel) 70%, transparent); border:1px solid rgb(255 255 255 / .07);
}
.comm__post:nth-child(2){ margin-left:clamp(1rem, 3vw, 2.4rem); }
.comm__post:nth-child(3){ margin-left:clamp(.4rem, 1.5vw, 1.2rem); border-color:rgb(98 225 213 / .25); }
.comm__av{ flex:none; width:2rem; height:2rem; border-radius:50%; background:linear-gradient(145deg, rgb(125 178 255 / .5), rgb(98 225 213 / .3)); }
.comm__av--1{ background:linear-gradient(145deg, rgb(98 225 213 / .5), rgb(89 158 255 / .2)); }
.comm__av--2{ background:linear-gradient(145deg, rgb(199 209 222 / .45), rgb(89 158 255 / .25)); }
.comm__meta{ margin:0; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-3); }
.comm__meta span{ color:#62E1D5; }
.comm__text{ margin:.3rem 0 0; font-size:1rem; line-height:1.45; color:var(--color-fg); }
.comm__example-note{ margin:.8rem 0 0; font-size:.74rem; color:var(--color-fg-3); }

.comm__points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.comm__points li{ display:flex; gap:.8rem; align-items:baseline; }
.comm__points strong{ flex:none; width:7.5rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#62E1D5; }
.comm__points span{ font-size:.95rem; color:var(--color-fg-2); }
.comm__bridge{ margin:var(--space-lg) 0 0; font-size:.9rem; color:var(--color-fg-3); max-width:46ch; }
.comm__cta{ margin-top:var(--space-lg); display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.comm__cta .microcopy{ margin:0; max-width:40ch; }

/* einmaliger Reveal: Avatare versetzt, Beiträge nacheinander */
.comm.is-armed .comm__crowd span, .comm.is-armed .comm__post{ opacity:0; transform:translateY(8px); }
.comm.is-shown .comm__crowd span{ opacity:1; transform:none; transition:opacity .4s ease, transform .5s ease; }
.comm.is-shown .comm__crowd span:nth-child(2){ transition-delay:.08s; } .comm.is-shown .comm__crowd span:nth-child(3){ transition-delay:.16s; }
.comm.is-shown .comm__crowd span:nth-child(4){ transition-delay:.24s; } .comm.is-shown .comm__crowd span:nth-child(5){ transition-delay:.32s; }
.comm.is-shown .comm__post{ opacity:1; transform:none; transition:opacity .6s ease calc(.35s + var(--i) * .18s), transform .6s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i) * .18s); }

@media (max-width:900px){
  .comm__grid{ grid-template-columns:1fr; grid-template-areas:"head" "examples" "rest"; }
  .comm__post:nth-child(2), .comm__post:nth-child(3){ margin-left:0; }
  .comm__points strong{ width:6.6rem; }
}

/* ==========================================================================
   Final CTA / Beta (beta2): Finale mit leiser Bergsilhouette
   ========================================================================== */
.beta2{ position:relative; overflow:hidden; isolation:isolate; background:var(--color-ink); padding-bottom:clamp(5rem, 10vw, 8rem); }
.beta2 .beta__bg, .beta2 .beta__scrim{ display:none; }
.beta2__bg{ position:absolute; inset:auto 0 0 0; height:70%; z-index:-2; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%); mask-image:linear-gradient(180deg, transparent 0%, #000 55%); }
.beta2__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 70%; opacity:.28; filter:saturate(.8); }
.beta2__horizon{
  position:absolute; z-index:-1; left:50%; bottom:22%; width:70rem; height:22rem; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 75%);
  filter:blur(20px); pointer-events:none; animation:beta2-breathe 14s ease-in-out infinite;
}
@keyframes beta2-breathe{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

.beta2__head{ text-align:center; max-width:44rem; margin-inline:auto; }
.beta2__title{ margin:0; font-size:clamp(2.4rem, 1.4rem + 3.8vw, 4.8rem); font-weight:700; letter-spacing:-.04em; line-height:1.02; text-wrap:balance; }
.beta2__sub{ margin:var(--space-md) auto 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.55; color:var(--color-fg-2); max-width:40ch; }
.beta2__when{ margin:var(--space-md) 0 0; font-size:.95rem; color:var(--color-fg); }
.beta2__platform{ margin:.5rem 0 0; display:flex; justify-content:center; gap:.4rem; font-family:var(--font-mono); font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-3); }
.beta2__platform span + span::before{ content:'·'; margin-right:.4rem; }
.beta2__platform span:first-child{ color:#62E1D5; }
.beta2__platform span + span{ color:var(--color-fg-2); }

.beta2__panel{
  position:relative; max-width:34rem; margin:clamp(2.2rem, 5vw, 3.2rem) auto 0; padding:clamp(1.4rem, 3vw, 2.2rem);
  border-radius:24px; background:color-mix(in srgb, var(--color-panel) 72%, transparent);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgb(255 255 255 / .09);
  box-shadow:0 40px 90px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .02) inset, 0 -1px 0 rgb(122 176 255 / .18) inset;
}
.beta2__form{ display:flex; flex-direction:column; gap:1.15rem; }
.beta2 .field input[type="text"], .beta2 .field input[type="email"]{ min-height:3rem; font-size:1rem; }
.beta2__device{ margin:0; padding:0; border:0; min-width:0; }
.beta2__device legend{ padding:0; margin-bottom:.6rem; font-size:.85rem; font-weight:600; color:var(--color-fg-2); }
.beta2 .radio-option{ min-height:2.75rem; padding:0 1rem; border-radius:12px; border:1px solid rgb(255 255 255 / .1); }
.beta2 .radio-option:has(input:checked){ border-color:rgb(122 176 255 / .5); background:rgb(89 158 255 / .08); }
.beta2 .radio-option:has(input:focus-visible){ outline:2px solid var(--color-brand-bright); outline-offset:2px; }
.beta2 .checkbox-row{ min-height:2.75rem; align-items:flex-start; }
.beta2 .checkbox-row input{ width:1.25rem; height:1.25rem; margin-top:.1rem; }
.beta2 .checkbox-row label{ cursor:pointer; }
.beta2__opt{ color:var(--color-fg-3); }
.beta2__consents{ display:flex; flex-direction:column; gap:.4rem; padding-top:1rem; border-top:1px solid rgb(255 255 255 / .07); }
.beta2__consent-error{ margin:-.3rem 0 .2rem 1.9rem; }
#field-consent.is-invalid + .beta2__consent-error{ display:block; }
#field-consent.is-invalid input{ outline:2px solid #FF8A8A; outline-offset:2px; }
.beta2__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.beta2 .beta__submit{ min-height:3.2rem; font-size:1.02rem; }
.beta2__trust{ margin:0; text-align:center; font-size:.88rem; color:var(--color-fg-2); }
.beta2__privacy{ margin:-.4rem 0 0; text-align:center; font-size:.78rem; line-height:1.5; color:var(--color-fg-3); }
.beta2__privacy a{ color:var(--color-fg-2); text-decoration:underline; text-underline-offset:2px; }
.beta2__success{ text-align:center; padding:1rem .5rem; outline:none; }
.beta2__success-title{ margin:0; font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight:700; letter-spacing:-.02em; color:var(--color-fg); }
.beta2__success p:last-child{ margin:.7rem auto 0; max-width:36ch; color:var(--color-fg-2); }

/* sanfter Reveal: Kopf, dann Formular (einmalig) */
.beta2.is-armed .beta2__head, .beta2.is-armed .beta2__panel{ opacity:0; transform:translateY(14px); }
.beta2.is-shown .beta2__head{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.beta2.is-shown .beta2__panel{ opacity:1; transform:none; transition:opacity .8s ease .2s, transform .8s cubic-bezier(.2,.8,.2,1) .2s; }
@media (prefers-reduced-motion: reduce){ .beta2__horizon{ animation:none; } }
@media (max-width:560px){
  .beta2__panel{ border-radius:20px; }
  .beta2__bg{ height:45%; }
}
.beta2__form[hidden], .beta2__success[hidden]{ display:none !important; }

/* ==========================================================================
   Footer final (footer2): ruhig, Masterlogo-Slot, klare Navigation
   ========================================================================== */
.footer2{ padding-block:clamp(3.5rem, 7vw, 5.5rem) var(--space-lg); border-top:1px solid rgb(255 255 255 / .07); background:var(--color-ink); }
.footer2__top{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.4fr); gap:clamp(2.5rem, 6vw, 6rem); padding-bottom:clamp(2.5rem, 5vw, 3.5rem); }
.footer2__logo{ display:inline-flex; flex-direction:column; gap:.55rem; color:var(--color-fg); text-decoration:none; border-radius:6px; }
.footer2__wordmark{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:.3em; padding-left:.3em; margin-left:-.3em; text-transform:uppercase; }
.footer2__claim{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#62E1D5; }
.footer2__desc{ margin:1.3rem 0 0; font-size:.98rem; line-height:1.55; color:var(--color-fg-2); max-width:34ch; }
.footer2__facts{ margin:.8rem 0 0; font-size:.82rem; color:var(--color-fg-3); max-width:40ch; }

.footer2__nav{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem 2rem; }
.footer2__col h2{ margin:0 0 1rem; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-fg-3); }
.footer2__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.footer2__col a{ display:inline-flex; align-items:center; min-height:2.1rem; font-size:.95rem; color:var(--color-fg-2); text-decoration:none; border-radius:6px; transition:color .15s ease; }
.footer2 a:hover{ color:var(--color-fg); }
.footer2 a:focus-visible{ outline:2px solid var(--color-brand-bright); outline-offset:3px; color:var(--color-fg); }

.footer2__bottom{ display:flex; justify-content:space-between; align-items:center; gap:.8rem 2rem; flex-wrap:wrap; padding-top:var(--space-lg); border-top:1px solid rgb(255 255 255 / .07); }
.footer2__bottom p{ margin:0; font-size:.84rem; color:var(--color-fg-3); }
.footer2__legal{ display:flex; gap:1.4rem; }
.footer2__legal a{ color:var(--color-fg-3); text-decoration:none; min-height:2rem; display:inline-flex; align-items:center; }

@media (max-width:860px){
  .footer2__top{ grid-template-columns:1fr; }
  .footer2__nav{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .footer2__nav{ grid-template-columns:1fr; }
  .footer2__col a{ min-height:2.6rem; font-size:1rem; }
  .footer2__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Finale Marke (30.09.2026): Compact Logo im Header, Masterlogo im Footer, Mark im Final CTA
   ========================================================================== */
.nav__brand img.nav__logo{ height:auto; width:8.3rem; aspect-ratio:490 / 85; }
@media (min-width:900px){ .nav__brand img.nav__logo{ width:9.4rem; } }
@media (min-width:1280px){ .nav__brand img.nav__logo{ width:10.4rem; } }
.footer2__logo{ display:inline-block; }
.footer2__logo img{ display:block; width:clamp(19rem, 15rem + 6vw, 22rem); max-width:100%; height:auto; aspect-ratio:900 / 315; margin-left:-.35rem; }
.beta2__symbol{ display:block; width:4.4rem; height:auto; aspect-ratio:256 / 125; margin:0 auto 1.4rem; opacity:.9; }

/* QA 01.10.2026: Menü-Schalter nur mobil im Tab-Fluss */
@media (min-width:1024px){ .nav__toggle{ display:none; } }

/* Kicker entfernt (01.10.2026): etwas mehr Luft über der H1 statt Lücke */
.hero{ padding-top:clamp(2.6rem, 4.6vw, 3.8rem); }

/* ==========================================================================
   Punkt 4 (03.10.2026): Tagesmoment „Aus deinen Daten wird eine Entscheidung.“
   Eigene Anordnung (Liste links → feine Linien → dominante Heute-Karte rechts),
   Designsprache von Problem/System übernommen, keine Kopie von .sys.
   Bewegung ohne neues JS: hängt an .is-visible aus dem bestehenden Scroll-Reveal,
   sichtbarer Zustand ist die Voreinstellung.
   ========================================================================== */
/* Lichtschein der Karte darf nicht über den Viewport ragen (sonst horizontaler Scroll) */
.dcs{ position:relative; overflow:hidden; }
.dcs__head{ max-width:48rem; margin-inline:auto; text-align:center; }
.dcs__title{ margin:0; font-size:clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); font-weight:700; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.dcs__sub{ margin:var(--space-md) auto 0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.5; color:var(--color-fg-2); max-width:46ch; text-wrap:balance; }

.dcs__stage{
  margin:clamp(2.5rem, 5vw, 4rem) auto 0; max-width:62rem;
  display:grid; grid-template-columns:minmax(14rem, 19rem) minmax(3.5rem, 1fr) minmax(19rem, 28rem); align-items:center;
}
/* Liste füllt die Zeilenhöhe: jede der vier Zeilen ist exakt 1/4 hoch, damit die Linien (y = 50/150/250/350 von 400) mittig andocken */
.dcs__inputs{ grid-column:1; grid-row:1; align-self:stretch; list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(4, 1fr); }
.dcs__in{ display:flex; align-items:center; padding-block:.35rem; }
.dcs__in-box{
  width:100%; display:flex; flex-direction:column; gap:.15rem; padding:.8rem 1rem .85rem; border-radius:14px;
  background:color-mix(in srgb, var(--color-panel) 72%, transparent); border:1px solid var(--color-line);
}
.dcs__in-label{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.dcs__in-label::before{ content:''; width:.42rem; height:.42rem; border-radius:50%; background:#7DB2FF; box-shadow:0 0 0 3px rgb(89 158 255 / .14); }
.dcs__in--regeneration .dcs__in-label::before{ background:#F3C46A; box-shadow:0 0 0 3px rgb(243 196 106 / .16); }
.dcs__in-val{ font-size:1.05rem; font-weight:650; letter-spacing:-.01em; color:var(--color-fg); }
.dcs__in-note{ font-size:.84rem; line-height:1.35; color:var(--color-fg-2); }

/* Rahmen füllt die Zeile; das SVG liegt absolut darin und bringt so keine eigene Höhe (viewBox 1:4) mit */
.dcs__wires{ grid-column:2; grid-row:1; align-self:stretch; position:relative; min-height:100%; }
.dcs__wires svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block; }
/* viewBox 260×480 ≥ größte Darstellung (240×465): Chrome rechnet Strichlängen bei non-scaling-stroke in Bildschirm-px
   auf Basis der viewBox-Länge – so bleibt der Strich immer ≥ Pfad (vollständiges Zeichnen, Lichtpunkt verlässt den Pfad) */
.dcs__wire{ fill:none; stroke:rgb(122 176 255 / .5); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:100; stroke-dashoffset:0; }
/* Lichtpunkt: kurzer Strich, im Ruhezustand außerhalb des Pfads (unsichtbar) */
.dcs__spark{ fill:none; stroke:#d6e8ff; stroke-width:2.4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:7 300; stroke-dashoffset:12; filter:drop-shadow(0 0 4px rgb(120 175 255 / .95)); }
.dcs__join{ display:none; }

.dcs__card{
  grid-column:3; grid-row:1; position:relative; isolation:isolate; margin:0;
  padding:clamp(1.4rem, 2.2vw, 1.9rem); border-radius:24px; text-align:left;
  background:color-mix(in srgb, var(--color-panel) 82%, transparent);
  border:1px solid rgb(122 176 255 / .26);
  box-shadow:0 30px 70px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .03) inset;
}
.dcs__card::before{ /* Mündungspunkt der Linien */
  content:''; position:absolute; left:-5px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:#cfe2ff; box-shadow:0 0 0 4px rgb(89 158 255 / .16), 0 0 18px 4px rgb(89 158 255 / .45);
}
.dcs__card-glow{
  position:absolute; z-index:-1; left:50%; top:50%; width:170%; height:170%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 74%);
  filter:blur(26px); pointer-events:none;
}
.dcs__card-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dcs__card-tag{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; border:1px dashed var(--color-line-2); color:var(--color-fg-3); }
.dcs__card-status{ margin:1rem 0 0; display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; color:#F3C46A; }
.dcs__card-dot{ width:.5rem; height:.5rem; border-radius:50%; background:#F3C46A; box-shadow:0 0 0 3px rgb(243 196 106 / .18); }
.dcs__card-impulse{ margin-top:1.1rem; padding:.85rem 1rem; border-radius:14px; background:rgb(255 255 255 / .03); border:1px solid var(--color-line); }
.dcs__card-impulse-label{ margin:0; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--color-fg-3); }
.dcs__card-impulse-text{ margin:.3rem 0 0; font-size:1rem; font-weight:600; color:var(--color-fg); }
.dcs__card-label{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#62E1D5; }
.dcs__card-title{ margin:.35rem 0 0; font-size:clamp(1.45rem, 1.1rem + 1vw, 1.95rem); font-weight:650; letter-spacing:-.025em; line-height:1.15; color:var(--color-fg); text-wrap:balance; }
.dcs__card-body{ margin:.7rem 0 0; font-size:.98rem; line-height:1.55; color:var(--color-fg-2); }
.dcs__card-foot{ margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--color-line); font-size:.86rem; color:var(--color-fg-3); }

/* Einmaliger Reveal: Datenpunkte → Linien laufen zusammen → Heute-Karte */
@keyframes dcs-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.dcs__stage.is-visible .dcs__in-box{ animation:dcs-rise .55s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .12s) both; }
/* Linien zeichnen sich zur Karte hin – per Transition wie in der Problemsektion
   (Animationen am SVG-Container lassen die Linien in Vollseiten-Screenshots/PDF verschwinden) */
html:not(.no-js) .dcs__stage:not(.is-visible) .dcs__wire{ stroke-dashoffset:100; }
.dcs__stage.is-visible .dcs__wire{ transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) calc(.55s + var(--i) * .12s); }
/* danach läuft je ein Lichtpunkt einmal entlang der Linie in die Karte */
.dcs__stage.is-visible .dcs__spark{ stroke-dashoffset:-104; transition:stroke-dashoffset 1.05s cubic-bezier(.45,0,.25,1) calc(1.55s + var(--i) * .1s); }
/* Mobil: Verbindungsstrich wächst nach unten, ein Lichtpunkt fällt in die Karte */
html:not(.no-js) .dcs__stage:not(.is-visible) .dcs__join{ transform:scaleY(0); }
.dcs__stage.is-visible .dcs__join{ transform:none; transition:transform .8s cubic-bezier(.4,0,.2,1) .7s; }
@keyframes dcs-drop{ 0%{ top:-4px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:calc(100% - 3px); opacity:0; } }
.dcs__stage.is-visible .dcs__join::after{ animation:dcs-drop .9s cubic-bezier(.45,0,.25,1) 1.6s; }
/* Ankunft: Andockpunkt leuchtet kurz auf, ein Ring breitet sich aus (beides im Ruhezustand unverändert/unsichtbar) */
.dcs__card::after{ content:''; position:absolute; left:-13px; top:50%; width:25px; height:25px; margin-top:-12.5px; border-radius:50%; border:1px solid rgb(170 210 255 / .9); opacity:0; pointer-events:none; }
@keyframes dcs-ping{ from{ opacity:.95; transform:scale(.35); } to{ opacity:0; transform:scale(2.4); } }
@keyframes dcs-dot{ 0%, 100%{ transform:none; } 35%{ transform:scale(1.6); box-shadow:0 0 0 6px rgb(89 158 255 / .28), 0 0 30px 8px rgb(89 158 255 / .7); } }
.dcs__stage.is-visible .dcs__card::after{ animation:dcs-ping 1.1s cubic-bezier(.2,.7,.3,1) 2.55s; }
.dcs__stage.is-visible .dcs__card::before{ animation:dcs-dot 1.1s ease 2.5s; }
.dcs__stage.is-visible .dcs__card{ animation:dcs-rise .7s cubic-bezier(.2,.8,.2,1) 1.2s both; }

/* Tablet/Mobil: Reihenfolge vertikal, keine verkleinerte Desktop-Grafik */
@media (max-width:860px){
  .dcs__stage{ display:flex; flex-direction:column; align-items:center; max-width:28rem; }
  .dcs__inputs{ width:100%; display:flex; flex-direction:column; gap:.6rem; }
  .dcs__in{ padding-block:0; }
  .dcs__wires{ display:none; }
  .dcs__join{
    display:block; position:relative; width:1px; height:2.6rem; margin:.9rem 0 .7rem;
    background:linear-gradient(180deg, rgb(122 176 255 / .15), rgb(122 176 255 / .7));
    transform-origin:top center;
  }
  .dcs__join::after{ content:''; position:absolute; left:-3px; top:0; width:7px; height:7px; border-radius:50%; background:#d6e8ff; box-shadow:0 0 10px 2px rgb(89 158 255 / .7); opacity:0; }
  .dcs__card{ width:100%; }
  .dcs__card::before{ left:50%; top:-5px; margin:0 0 0 -4.5px; }
  .dcs__card::after{ left:50%; top:-13px; margin:0 0 0 -12.5px; }
}
@media (prefers-reduced-motion: reduce){
  .dcs__stage .dcs__in-box, .dcs__stage .dcs__card, .dcs__stage .dcs__card::before, .dcs__stage .dcs__card::after, .dcs__stage .dcs__join::after{ animation:none !important; }
  .dcs__stage .dcs__wire, .dcs__stage .dcs__spark, .dcs__stage .dcs__join{ transition:none !important; }
}

/* ==========================================================================
   Punkt 5 (05.10.2026): „Für Menschen, die Fitness ernst nehmen …“
   Ruhige Identifikation statt Feature-Matrix: Headline + Einleitung, darunter
   vier Aussagen mit feiner Trennlinie und kurzem Akzent. Kein neues JS
   (Reveal über data-anim / data-anim-group), alles auf .fit begrenzt.
   ========================================================================== */
.fit__head{ display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 5fr); gap:clamp(2rem, 4vw, 4rem); align-items:end; }
.fit__title{ margin:0; font-size:clamp(2rem, 1.3rem + 2.3vw, 3.1rem); font-weight:700; letter-spacing:-.035em; line-height:1.06; text-wrap:balance; }
.fit__title span{ display:block; }
.fit__title span + span{ color:#C7D1DE; }
.fit__intro{ margin:0; font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height:1.55; color:var(--color-fg-2); max-width:46ch; }

.fit__list{ list-style:none; margin:clamp(2.5rem, 5vw, 3.5rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2rem clamp(1.25rem, 2.4vw, 2.25rem); }
.fit__item{ position:relative; padding-top:1.15rem; border-top:1px solid var(--color-line-2); }
.fit__item::before{ /* kurzer Akzent auf der Trennlinie */
  content:''; position:absolute; left:0; top:-1px; width:1.75rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #599EFF, #62E1D5);
}
.fit__item-title{ margin:0; font-size:1.12rem; font-weight:650; letter-spacing:-.01em; line-height:1.3; color:var(--color-fg); }
.fit__item-text{ margin:.45rem 0 0; font-size:.96rem; line-height:1.5; color:var(--color-fg-2); }

@media (max-width:1100px){
  .fit__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:860px){
  .fit__head{ grid-template-columns:1fr; gap:var(--space-md); }
}
@media (max-width:560px){
  .fit__list{ grid-template-columns:1fr; gap:1.5rem; margin-top:var(--space-xl); }
}

/* ==========================================================================
   Punkt 6 (05.10.2026): Ernährung im Fortschrittskontext – ruhiger Abschluss der
   Textspalte (Trennlinie + Text, kein Callout), nur innerhalb #ernaehrung.
   ========================================================================== */
#ernaehrung .nutri-context{ margin-top:var(--space-md); padding-top:1.1rem; border-top:1px solid var(--color-line); }
#ernaehrung .nutri-context__lead{ margin:0; max-width:46ch; font-size:clamp(1.08rem, 1rem + .35vw, 1.22rem); font-weight:600; letter-spacing:-.01em; line-height:1.45; color:var(--color-fg); text-wrap:pretty; }
#ernaehrung .nutri-context__sub{ margin:.55rem 0 0; max-width:52ch; font-size:.92rem; line-height:1.5; color:var(--color-fg-3); }

/* ==========================================================================
   Punkt 7 (05.10.2026): Training im Gesamtkontext – ruhiger Abschluss der Textspalte
   (Trennlinie + Text wie die Kernpunkte: erster Satz weiß, Rest fg-2), nur .tr2.
   Mobil (≤1023 px) ist .tr2__text display:contents → Block explizit ans Ende sortieren.
   ========================================================================== */
.tr2__context{ margin:var(--space-md) 0 0; padding-top:1.1rem; border-top:1px solid var(--color-line); max-width:46ch; font-size:1rem; line-height:1.55; color:var(--color-fg-2); text-wrap:pretty; }
.tr2__context strong{ color:var(--color-fg); font-weight:650; }
@media (max-width:1023px){ .tr2__context{ order:4; margin-top:0; } }

/* ==========================================================================
   Punkt 8 (05.10.2026): Aktivität im Zusammenhang – erklärende Zeile unter den drei
   Kontextpunkten, klar unter „Dieser Tag besteht nicht nur aus Schritten.“. Erscheint
   über die vorhandenen Zustände .is-armed / .is-ctx (kein neues JS), nur .act.
   ========================================================================== */
.act__ctx-note{ margin:clamp(2rem, 4vw, 2.75rem) auto 0; max-width:52ch; font-size:clamp(1rem, .96rem + .2vw, 1.1rem); line-height:1.55; color:var(--color-fg-2); text-wrap:balance; }
.act.is-armed .act__ctx-note{ opacity:0; transform:translateY(12px); }
.act.is-ctx .act__ctx-note{ opacity:1; transform:none; transition:opacity .8s ease 1.05s, transform .8s cubic-bezier(.2,.8,.2,1) 1.05s; }

/* ==========================================================================
   Punkt 9 (05.10.2026): Fortschritt als Ergebnis – ruhige Erklärzeile unter dem
   Abschluss („Die Richtung zählt.“ bleibt die stärkere Aussage), nur .prog.
   ========================================================================== */
.prog__note{ margin:var(--space-md) 0 0; max-width:60ch; font-size:clamp(1rem, .96rem + .2vw, 1.1rem); line-height:1.55; color:var(--color-fg-2); text-wrap:pretty; }

/* ==========================================================================
   Punkt 10 (05.10.2026): Schlusszeile unter der Grafik – etwas stärker als Fließtext,
   klar unter der Headline; der bestehende „In Entwicklung“-Hinweis rückt direkt darunter,
   weil er die „sollen“-Aussage einordnet. Nur .sys.
   ========================================================================== */
.sys__close{ margin:clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width:40ch; text-align:center; font-size:clamp(1.15rem, 1.02rem + .55vw, 1.45rem); font-weight:600; letter-spacing:-.015em; line-height:1.4; color:var(--color-fg); text-wrap:balance; }
.sys__close + .sys__note{ margin-top:var(--space-md); }
/* Punkt 10 Korrektur: Headline bricht unter ~350 px sonst mitten im Wort (globales overflow-wrap:break-word
   an h2) – nur hier und nur sehr schmal minimal kleiner (2,3rem: „Zusammenhang.“ = 272 px bei 280 px Platz). */
@media (max-width:349px){ .sys__title{ font-size:2.3rem; } }
/* Aktueller App-Status „Etwas niedriger erholt“ (gelber Punkt wie in der App) darf in der schmalen Karte umbrechen */
.sys__node--regeneration .sys__node-val{ display:block; white-space:normal; }
.sys__node--regeneration .sys__amber{ display:inline-block; vertical-align:.12em; margin-right:.45rem; }
/* Zentrale Karte ohne veraltetes Fokus-Bild: kein Restabstand unter dem Titel */
.sys__core-title:last-child{ margin-bottom:0; }

/* ==========================================================================
   Punkt 11 (05.10.2026): Coach – „Geplant“-Kennzeichnung über den drei Punkten
   (vorhandenes .badge--planned wie „In Planung“), Rahmen hält Badge + Liste zusammen
   als ein Element der bestehenden Zeile. Nur .coach2.
   ========================================================================== */
.coach2__planned{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }

/* ==========================================================================
   Konsistenz 05.10.2026: aktuelle App-Texte wie in „Alles im Zusammenhang“
   – Hero-Chip Regeneration „Etwas niedriger erholt“ darf (nur dieser Chip) umbrechen
   – Öffnen/Verstehen/Handeln: neutraler Text statt veraltetem Fokus-Kartenbild,
     typografisch wie die Status-Ebene (reiner Text, keine Karte)
   ========================================================================== */
/* Status „Etwas niedriger erholt“: auf Desktop zweizeilig statt dreizeilig – „Etwas niedriger“ muss in die
   120-px-Textspalte passen (bei 0,98rem ≈ 115 px). Mobil (< 760 px) bleibt die bestehende Größe. */
.hero__chip--regeneration .hero__chip-value{ white-space:normal; }
@media (min-width:760px){ .hero__chip--regeneration .hero__chip-value{ font-size:.98rem; } }
.hv3__focus{ margin:0; max-width:16ch; font-size:clamp(1.35rem, 1.1rem + .9vw, 1.75rem); font-weight:650; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); text-wrap:balance; }
/* Status „Etwas niedriger erholt“ in Öffnen/Verstehen/Handeln: auf Desktop (Seitenspalte 281–322 px) zweizeilig
   statt dreizeilig – 37,6 px bei 1024, max. 42,4 px (2 Zeilen brauchen ≤ 39 px bei 1024, ≤ 43,1 px ab 1600). */
@media (min-width:1024px){ .hv3__status-value{ font-size:clamp(2.35rem, 1.35rem + 1.5625vw, 2.65rem); } }

/* ==========================================================================
   Punkt 12 (05.10.2026): Kernaussage „Deine Gesundheitsdaten gehören dir.“ als ruhiger
   Abschluss unter der Datenkarte (Muster wie „Coaching endet. Deine Daten nicht.“),
   kleiner als die H2, keine Icons/Siegel. Nur .priv.
   ========================================================================== */
.priv__core{ margin:clamp(3rem, 6vw, 4.5rem) auto 0; max-width:46rem; text-align:center; }
.priv__core-line{ margin:0; font-size:clamp(1.65rem, 1.2rem + 2.4vw, 3rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; color:var(--color-fg); text-wrap:balance; }
.priv__core-text{ margin:var(--space-md) auto 0; max-width:48ch; font-size:clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height:1.6; color:var(--color-fg-2); text-wrap:pretty; }

/* P1 Sprung-Fix: Die Bildreihe ist Flex-Item in .split__visual und wurde vor dem Laden der
   Lazy-Bilder nur ~20 px breit (Prozentbreiten ohne Bezugsgröße) → Höhe sprang beim Laden um
   bis zu 515 px und verschob #beta. Volle Breite = exakt der Zustand nach dem Laden. */
.split__visual > .phone-row{ width:100%; }

/* P1 Direktaufruf mit #anker: Der Sprung beim Laden lief animiert und zielte auf das Layout vor dem
   Webfont-Wechsel (Geist verschiebt #beta um bis zu 118 px) → landete daneben. Weich scrollen erst,
   wenn Seite und Schriften geladen sind (main.js setzt .is-loaded); reduced motion bleibt auto. */
html:not(.is-loaded){ scroll-behavior:auto; }

/* Punkt 15 (06.10.2026): Footer mobil kompakter – Produkt links, Informationen + Beta rechts untereinander.
   Spalten nie schmaler als ihr längstes Wort („Datenschutzerklärung“), Linkflächen mind. 44 px hoch. */
@media (max-width:860px){
  .footer2__nav{ grid-template-columns:repeat(2, minmax(min-content, 1fr)); grid-template-rows:auto 1fr; }
  .footer2__nav .footer2__col:first-child{ grid-row:1 / span 2; }
  .footer2__col a{ min-height:2.75rem; }
}
/* Schmal (≈ 320–339 px): etwas engerer Spaltenabstand; darunter oder bei größerer Grundschrift
   (Breakpoints in em) wieder einspaltig, damit nichts überläuft. */
@media (max-width:21.1875em){ .footer2__nav{ column-gap:1.25rem; } }
@media (max-width:19.9375em){
  .footer2__nav{ grid-template-columns:1fr; grid-template-rows:none; }
  .footer2__nav .footer2__col:first-child{ grid-row:auto; }
}

/* Öffnen/Verstehen/Handeln mit Regenerations-Screen (05.10.2026): Markierungen auf das neue Bild ausgerichtet
   (Bild 920×2000, Box 900/1860 → y-Prozent = px / 1901). Schlaf = beide „Warum?“-Punkte (Schlaf + Ruhepuls),
   Schritte = Hinweis zu den Schritten, Regeneration = heutige Einordnung. Protein/Impuls stehen nicht auf diesem Screen. */
.hv-shot--regeneration .hv-hl--regeneration{ left:4.6%; top:20.6%; width:90.8%; height:14.1%; border-radius:4.5% / 14%; }
.hv-shot--regeneration .hv-hl--schlaf{ left:6.3%; top:39.7%; width:87.4%; height:10%; }
.hv-shot--regeneration .hv-hl--schritte{ left:6.3%; top:61.6%; width:87.4%; height:4.2%; }
.hv-shot--regeneration .hv-hl--protein, .hv-shot--regeneration .hv-hl--impuls{ display:none; }

/* Ernährung: ein Handy in Standardgröße wie Aktivität (vorher zwei kleine nebeneinander → App-Schrift nur 2–3 px, wirkte verpixelt) */
.nutri__phone{ width:clamp(290px, 26vw, 380px); }
@media (max-width:1023px){ .nutri__phone{ width:min(78vw, 22rem); } }

/* iPhone-Feinschliff 06.10.2026 (nur Handyansicht):
   Datenschutz – Verbindungslinie zum Geräte-Umriss endet mit 0,5 rem Luft vor dem Text statt ihn zu berühren. */
@media (max-width:980px){
  .pmap__device{ margin:2.6rem 0; }
  .pmap__device::before, .pmap__device::after{ height:2.1rem; }
  .pmap__device::before{ top:-2.1rem; }
  .pmap__device::after{ bottom:-2.1rem; }
}
/* Coach – statt einer durchgehenden Linie hinter Beschriftungen, Karte und Chips nur zwei Verbinder:
   oben gestrichelt (zeitlich begrenzte Coach-Verbindung) bis zur Karte, unten von der Karte zu „Du“. */
@media (max-width:900px){
  .coach2__flow{ gap:2.4rem; }
  .coach2__line{ display:none; }
  .coach2__pack::before, .coach2__pack::after{ content:''; position:absolute; left:50%; width:1px; pointer-events:none; }
  .coach2__pack::before{ top:-1.9rem; height:1.9rem; background:repeating-linear-gradient(180deg, rgb(160 190 230 / .5) 0 5px, transparent 5px 10px); }
  .coach2__pack::after{ bottom:-2.4rem; height:2.4rem; background:linear-gradient(180deg, rgb(122 176 255 / .55), rgb(98 225 213 / .65)); }
}
/* Endzustand nach dem Einblenden erzwingen: Die Startpositionen (is-armed) hatten gleiche/höhere Spezifität und standen
   weiter hinten → Coach-Karte blieb mobil 24 px hoch + 96 %, Datenschutz-Knoten blieben 8 px (mobil) bzw. 10 px (Desktop) versetzt. */
.coach2.is-armed.is-shown .coach2__pack{ transform:none; }
.priv.is-armed.is-shown .pmap__side .pmap__node{ transform:none; }

/* ==========================================================================
   Unterseite „Warum EMVAYO“ (06.10.2026): Langform-Text im Stil der Startseite
   ========================================================================== */
.nav__link[aria-current="page"]{ color:var(--color-fg); background:var(--color-panel-2); }
.nav__drawer a[aria-current="page"]{ color:var(--color-fg); }

.wy{ position:relative; overflow:hidden; }
.wy::before{ content:''; position:absolute; left:50%; top:-14rem; width:min(90rem, 160vw); height:46rem; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 72%); pointer-events:none; }
.wy__article{ position:relative; max-width:calc(46rem + 2 * var(--container-pad)); padding-block:clamp(7.5rem, 5rem + 6vw, 10.5rem) var(--section-pad-y); }

.wy-kicker{ margin:0 0 .9rem; font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-bright); }
.wy-hero{ margin-bottom:clamp(3rem, 2rem + 4vw, 5.5rem); }
.wy-hero h1{ font-size:clamp(2.3rem, 1.35rem + 3.8vw, 4.1rem); font-weight:700; line-height:1.04; letter-spacing:-.035em; color:var(--color-fg); }
.wy-lead{ font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.6; color:var(--color-fg-2); }
.wy-hero .wy-lead{ margin-top:1.4rem; }
.wy-cta{ margin-top:2rem; }

.wy-sec{ padding-block:clamp(2.6rem, 2rem + 2.4vw, 4.2rem); border-top:1px solid var(--color-line); }
.wy-sec > * + *{ margin-top:1.1rem; }
.wy-sec h2{ font-size:clamp(1.75rem, 1.25rem + 2vw, 2.65rem); font-weight:700; line-height:1.1; letter-spacing:-.025em; color:var(--color-fg); }
.wy-kicker + h2{ margin-top:0; }
.wy-sec h2 + *{ margin-top:1.4rem; }
.wy-sec h3{ margin-top:2.4rem; font-size:clamp(1.2rem, 1.08rem + .45vw, 1.42rem); font-weight:650; line-height:1.25; letter-spacing:-.012em; color:var(--color-fg); }
.wy-sec h3 + *{ margin-top:.75rem; }
.wy-sec p, .wy-list li{ font-size:clamp(1.02rem, .98rem + .15vw, 1.08rem); line-height:1.72; color:#C3CBD6; }
.wy-sec p.wy-lead{ font-size:clamp(1.12rem, 1.02rem + .4vw, 1.28rem); line-height:1.6; color:var(--color-fg-2); }
.wy-sec strong{ font-weight:650; color:var(--color-fg); }
.wy-sec em{ color:var(--color-fg); }

.wy-list{ padding-left:1.25rem; display:grid; gap:.55rem; }
ul.wy-list{ list-style:disc; }
ol.wy-list{ list-style:decimal; }
.wy-list li{ padding-left:.25rem; }
.wy-list li::marker{ color:var(--color-accent); font-weight:600; }

.wy-sec .wy-quote{ margin-block:2.2rem; padding:.1rem 0 .1rem 1.35rem; border-left:2px solid var(--color-brand); }
.wy-quote p{ font-size:clamp(1.25rem, 1.08rem + .7vw, 1.65rem) !important; line-height:1.38 !important; font-weight:600; letter-spacing:-.012em; color:var(--color-fg) !important; }
.wy-sec .wy-note{ margin-block:2rem; padding:1.15rem 1.35rem; border-radius:var(--radius-md); background:rgb(40 216 200 / .06); border:1px solid rgb(40 216 200 / .22); }
.wy-note p{ color:var(--color-fg) !important; }
.wy-note > * + *{ margin-top:.7rem; }
.wy-sec .wy-break{ margin-block:2.4rem; border:0; height:1px; background:var(--color-line); }

.wy-sec .wy-shot{ margin-block:2.6rem; text-align:center; }
.wy-shot img{ display:block; margin-inline:auto; width:min(100%, 19rem); height:auto; border-radius:2.3rem; border:1px solid rgb(255 255 255 / .1); background:#000; box-shadow:0 30px 80px rgb(0 0 0 / .55), 0 0 0 6px rgb(255 255 255 / .03); }
.wy-shot img[src*="impuls-card"], .wy-shot img[src*="scan-detail"], .wy-shot img[src*="aktivitaet-verlauf"]{ width:min(100%, 27rem); border-radius:1.25rem; box-shadow:0 24px 60px rgb(0 0 0 / .5); }
.wy-shot figcaption{ margin-top:1rem; font-size:.86rem; line-height:1.5; color:var(--color-fg-3); }

.wy-sec--final{ margin-top:1rem; padding:clamp(2rem, 1.4rem + 2.5vw, 3.2rem); border:1px solid rgb(89 158 255 / .28); border-radius:var(--radius-lg);
  background:radial-gradient(120% 90% at 50% 0%, rgb(89 158 255 / .14), transparent 60%), var(--color-panel); text-align:center; }
.wy-sec--final > *{ margin-inline:auto; max-width:38rem; }
/* unter 340 px passt der Beta-Button sonst nicht in den Kasten */
@media (max-width:21.1875em){ .wy-sec--final{ padding-inline:1.25rem; } }

/* Navigation mit „Warum EMVAYO“ (6 Punkte): Handy-Menü bis 1023 px (vorher 920), 1024–1180 px kompakte Leiste ohne Umbruch */
@media (min-width:1024px) and (max-width:1180px){ .nav__link{ white-space:nowrap; padding:.6rem .5rem; } }

/* ==========================================================================
   Unterseite „Passt EMVAYO zu mir?“ (Quiz) (06.10.2026)
   Eine Karte, drei Zustände (Intro / Frage / Ergebnis), gefüllt von js/quiz.js.
   Nur Bestandsmuster: Tokens, .btn, .wy-kicker. Präfix .qz-
   ========================================================================== */
.qz{ position:relative; overflow:hidden; }
@supports (overflow:clip){ .qz{ overflow:clip; } }   /* nicht programmatisch scrollbar (Fokus/scrollIntoView) */
.qz::before{ content:''; position:absolute; left:50%; top:-14rem; width:min(90rem, 160vw); height:46rem; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 72%); pointer-events:none; }
.qz__wrap{ position:relative; max-width:calc(46rem + 2 * var(--container-pad)); padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--section-pad-y); }
.qz-app{ min-height:24rem; }

.qz-card{ position:relative; scroll-margin-top:6.5rem; padding:clamp(1.35rem, 1rem + 2.2vw, 2.6rem); border:1px solid rgb(89 158 255 / .24); border-radius:var(--radius-lg);
  background:radial-gradient(120% 80% at 50% 0%, rgb(89 158 255 / .11), transparent 62%), var(--color-panel); }
.qz-card--intro{ padding:clamp(1.6rem, 1rem + 3vw, 3.2rem); }

/* Fortschritt: Zeile bleibt im DOM (aria-live), klappt in Intro/Ergebnis nur zu */
.qz-progress{ margin-bottom:1.5rem; }
.qz-progress.is-off{ height:0; margin:0; overflow:hidden; }
.qz-progress__text{ margin:0 0 .65rem; }
.qz-bar{ height:.4rem; border-radius:var(--radius-pill); background:rgb(255 255 255 / .08); overflow:hidden; }
.qz-bar > span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--color-brand), var(--color-accent)); transition:width .35s ease; }

.qz-stage > *{ animation:qz-in .28s ease backwards; }
@keyframes qz-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .qz-stage > *, .qz-bar > span{ animation:none; transition:none; } }

/* Intro */
.qz-kicker{ margin:0 0 .9rem; }
.qz-title{ font-size:clamp(2rem, 1.25rem + 3.2vw, 3.4rem); font-weight:700; line-height:1.06; letter-spacing:-.035em; color:var(--color-fg); }
.qz-lead{ margin:1.2rem 0 0; font-size:clamp(1.08rem, 1rem + .4vw, 1.26rem); line-height:1.6; color:var(--color-fg-2); }
.qz-intro .btn.qz-start{ margin-top:1.9rem; }
.qz-note{ margin:1.1rem 0 0; font-size:.9rem; line-height:1.5; color:var(--color-fg-3); }

/* Buttons im Quiz und Einstiege: Text darf umbrechen, damit nichts über den Rand läuft */
.qz-card .btn, .btn.qz-entry{ height:auto; min-height:3.1rem; padding-block:.8rem; max-width:100%; white-space:normal; text-align:center; line-height:1.25; }
.fit__cta{ margin:clamp(2rem, 4vw, 2.75rem) 0 0; }
.wy-cta--row{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }
.qz-fallback-links{ margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.75rem 1rem; }

/* Frage */
.qz-fieldset{ min-width:0; margin:0; padding:0; border:0; }
.qz-legend{ display:block; width:100%; padding:0; font-family:var(--font-display); font-size:clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); font-weight:700; line-height:1.2; letter-spacing:-.022em; color:var(--color-fg); text-wrap:balance; overflow-wrap:break-word; }
.qz-help{ margin:.6rem 0 0; font-size:.98rem; line-height:1.5; color:var(--color-fg-2); }
.qz-options{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.7rem; margin-top:1.4rem; }
.qz-opt{ display:flex; align-items:flex-start; gap:.9rem; min-height:3.5rem; padding:1rem 1.1rem; cursor:pointer;
  border:1px solid var(--color-line-2); border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-fg) 4%, transparent);
  transition:border-color .15s ease, background-color .15s ease; -webkit-tap-highlight-color:transparent; }
.qz-opt:hover{ border-color:color-mix(in srgb, var(--color-fg) 30%, var(--color-line-2)); background:color-mix(in srgb, var(--color-fg) 7%, transparent); }
.qz-opt.is-checked{ border-color:var(--color-brand); background:rgb(89 158 255 / .12); }
.qz-opt:has(.qz-opt__input:focus-visible){ outline:2px solid var(--color-accent-bright); outline-offset:3px; }
.qz-opt__body{ display:block; min-width:0; flex:1; }
.qz-opt__label{ display:block; font-size:1.05rem; font-weight:600; line-height:1.35; color:var(--color-fg); overflow-wrap:anywhere; }
.qz-opt__sub{ display:block; margin-top:.25rem; font-size:.92rem; line-height:1.45; color:var(--color-fg-2); overflow-wrap:anywhere; }

/* echte Radios/Checkboxes, nur gestaltet */
.qz-opt__input{ -webkit-appearance:none; appearance:none; flex:none; display:grid; place-content:center; width:1.4rem; height:1.4rem; margin:.1rem 0 0; cursor:pointer;
  border:2px solid rgb(255 255 255 / .38); border-radius:50%; background:transparent; transition:background-color .15s ease, border-color .15s ease; }
.qz-opt__input[type="checkbox"]{ border-radius:.4rem; }
.qz-opt__input::after{ content:''; width:.55rem; height:.55rem; border-radius:50%; background:var(--color-on-brand); transform:scale(0); transition:transform .15s ease; }
.qz-opt__input[type="checkbox"]::after{ width:.36rem; height:.66rem; margin-top:-.1rem; border-radius:0; background:none; border:solid var(--color-on-brand); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); }
.qz-opt__input:checked{ background:var(--color-brand); border-color:var(--color-brand); }
.qz-opt__input:checked::after{ transform:scale(1); }
.qz-opt__input[type="checkbox"]:checked::after{ transform:rotate(45deg) scale(1); }
.qz-opt__input:focus-visible{ outline:none; }
@supports not selector(:has(*)){ .qz-opt__input:focus-visible{ outline:2px solid var(--color-accent-bright); outline-offset:3px; } }
@media (prefers-reduced-motion: reduce){ .qz-opt, .qz-opt__input, .qz-opt__input::after{ transition:none; } }
@media (forced-colors: active){ .qz-opt.is-checked{ outline:2px solid Highlight; } .qz-opt__input:checked{ background:Highlight; } }

.qz-actions{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1.6rem; }
.qz-actions .qz-next{ margin-left:auto; }
.qz-next:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; filter:none; }
.qz-next:disabled::after{ display:none; }
/* Einzelauswahl springt von selbst weiter; „Weiter“ erscheint nur, wenn jemand mit der Tastatur arbeitet */
.qz-app:not(.is-kbd) .qz-next--auto{ display:none; }
.qz-app:not(.is-kbd) .qz-actions--auto-only{ display:none; }

/* Ergebnis */
.qz-badge{ display:inline-flex; align-items:center; gap:.55rem; max-width:100%; margin:0; padding:.42rem .9rem; border-radius:var(--radius-pill); border:1px solid var(--color-line-2);
  font-family:var(--font-mono); font-size:.74rem; font-weight:500; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; overflow-wrap:anywhere; }
.qz-badge::before{ content:''; flex:none; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.qz-badge--great{ color:var(--color-accent-bright); border-color:rgb(40 216 200 / .38); background:rgb(40 216 200 / .08); }
.qz-badge--partial{ color:var(--color-brand-bright); border-color:rgb(89 158 255 / .42); background:rgb(89 158 255 / .1); }
.qz-badge--notyet{ color:var(--color-fg-2); border-color:var(--color-line-2); background:rgb(255 255 255 / .04); }
.qz-result__title{ margin:1.1rem 0 0; font-size:clamp(1.75rem, 1.25rem + 2vw, 2.65rem); font-weight:700; line-height:1.1; letter-spacing:-.025em; color:var(--color-fg); }
.qz-result .qz-lead{ margin-top:1rem; }

.qz-stops{ margin-top:1.6rem; padding:1.1rem 1.25rem; border:1px solid var(--color-line-2); border-radius:var(--radius-md); background:rgb(255 255 255 / .04); }
.qz-block{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--color-line); }
.qz-block__title{ font-size:1.15rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.qz-list{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.7rem; }
.qz-block__title + .qz-list{ margin-top:.9rem; }
.qz-list li{ position:relative; padding-left:1.75rem; font-size:1.02rem; line-height:1.6; color:#C3CBD6; overflow-wrap:anywhere; }
.qz-list li::before{ content:''; position:absolute; left:0; }
.qz-list--check li::before{ left:.15rem; top:.6em; width:.7rem; height:.38rem; border-left:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent); transform:rotate(-45deg); }
.qz-list--note li::before{ left:.2rem; top:.62em; width:.5rem; height:.5rem; border-radius:50%; border:2px solid var(--color-fg-3); }

.qz-cta{ margin-top:2rem; display:grid; justify-items:start; gap:1rem; }
.qz-cta__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; }
.qz-beta{ margin:0; max-width:52ch; font-size:.94rem; line-height:1.55; color:var(--color-fg-2); }
.qz-restart{ min-height:2.75rem; padding:.5rem .25rem; font-size:.95rem; color:var(--color-fg-2); text-decoration:underline; text-underline-offset:3px; }
.qz-restart:hover{ color:var(--color-fg); }

@media (max-width:30em){
  .qz-start, .qz-cta__primary{ width:100%; }
  .qz-cta, .qz-cta__row{ justify-items:stretch; }
}
/* unter 340 px: Karte und Optionen etwas enger, damit nichts am Rand klebt */
@media (max-width:21.1875em){
  .qz-card, .qz-card--intro{ padding:1.15rem; }
  .qz-opt{ padding:.9rem .9rem; gap:.75rem; }
}

/* ==========================================================================
   Unterseite /fitness-app (07.10.2026)
   Nur Bestandsmuster: Tokens, .container/.section, .btn, .badge, .tag, .phone--stage,
   .beta2 (Abschluss), .footer2. Präfix .fa-. Keine JS-abhängigen Einblendungen:
   der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */
.fa{ position:relative; --fa-phone-w:clamp(270px, 28vw, 370px); }
.fa-band{ background:var(--color-ink-2); border-block:1px solid var(--color-line); }

/* ---- gemeinsame Typografie ---- */
.fa-head{ max-width:50rem; }
.fa-head--center{ margin-inline:auto; text-align:center; }
.fa-head h2, .fa-prod__head h2{ font-size:clamp(1.85rem, 1.15rem + 2.6vw, 3.1rem); font-weight:700; letter-spacing:-.03em; line-height:1.08; color:var(--color-fg); text-wrap:balance; }
.fa-lead{ margin-top:1.1rem; max-width:56ch; font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height:1.6; color:var(--color-fg-2); text-wrap:pretty; }
.fa-head--center .fa-lead{ margin-inline:auto; }
.fa-lead--hi{ color:var(--color-fg); font-weight:600; letter-spacing:-.012em; }
.fa-kicker{ margin:0; font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-bright); }
.fa-kicker--center{ text-align:center; }

.fa-note{ display:flex; align-items:flex-start; gap:.75rem; margin-top:1.4rem; padding:.95rem 1.15rem; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent) 7%, var(--color-panel-2)); border:1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-line));
  font-size:.94rem; line-height:1.55; color:var(--color-fg-2); }
.fa-note .badge{ flex:none; margin-top:.05rem; }
.fa-note--center{ max-width:46rem; margin-inline:auto; margin-top:2rem; }

.fa-nw{ white-space:nowrap; }
@media (max-width:21.1875em){ .fa-who .fa-head h2{ font-size:1.6rem; } }
.fa-h2--stack span{ display:block; }
.fa-problem .fa-h2--stack{ font-size:clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); letter-spacing:-.035em; line-height:1.03; }

/* ---- Hero ---- */
.fa-hero{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(2rem, 1rem + 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem); }
.fa-hero::before{ content:''; position:absolute; z-index:-1; left:50%; top:-16rem; width:min(90rem, 170vw); height:48rem; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 72%); }
.fa-hero__grid{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:center; }
.fa-hero__h1, .fa-hero__strong{ font-size:clamp(2.05rem, .9rem + 3.6vw, 3.85rem); font-weight:700; letter-spacing:-.04em; line-height:1.03; text-wrap:balance; }
.fa-hero__h1{ color:var(--color-fg); }
.fa-hero__strong{ margin:.3em 0 0; color:var(--color-brand-bright);
  background:linear-gradient(95deg, var(--color-brand-bright) 0%, var(--color-accent-bright) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fa-hero__sub{ margin-top:1.6rem; max-width:48ch; font-size:clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height:1.58; color:var(--color-fg-2); text-wrap:pretty; }
.fa-hero__ctas{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.fa-hero__micro{ margin-top:1.1rem; }
.fa-hero__visual{ position:relative; justify-self:center; }
.fa-hero__glow{ position:absolute; z-index:-1; left:50%; top:34%; width:190%; height:80%; transform:translate(-50%, -50%); pointer-events:none; filter:blur(30px);
  background:radial-gradient(closest-side, rgb(120 180 255 / .26), rgb(89 158 255 / .10) 48%, transparent 76%), radial-gradient(40% 30% at 50% 60%, rgb(40 216 200 / .10), transparent 70%); }

/* Gerät, unten ausgeblendet: zeigt den oberen Teil des Screens groß statt das ganze Gerät klein */
.fa-crop{ position:relative; width:var(--fa-phone-w); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 7rem), transparent 100%); mask-image:linear-gradient(180deg, #000 calc(100% - 7rem), transparent 100%); }
.fa-crop .phone{ position:absolute; top:0; left:0; width:100%; }
.fa-crop--hero{ aspect-ratio:9 / 15.4; }
.fa-crop--reg{ aspect-ratio:9 / 15; }

/* ---- Problem ---- */
.fa-problem{ position:relative; }
.fa-islands{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.9rem; margin-top:clamp(2.2rem, 5vw, 3.5rem); }
.fa-island{ display:flex; flex-direction:column; gap:.55rem; padding:1.15rem 1.1rem 1.05rem; border:1px dashed var(--color-line-2); border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-panel) 60%, transparent); }
.fa-island__name{ font-size:1.02rem; font-weight:650; line-height:1.25; color:var(--color-fg); }
.fa-island p{ flex:1; font-size:.92rem; line-height:1.5; color:var(--color-fg-2); }
.fa-island__tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-2); }
.fa-problem__close{ max-width:40rem; margin:clamp(2rem, 4vw, 3rem) auto 0; text-align:center; font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height:1.6; color:var(--color-fg); text-wrap:balance; }

/* ---- Übergang / So funktioniert ---- */
.fa-bridge{ position:relative; overflow:hidden; isolation:isolate; }
.fa-bridge__glow{ position:absolute; z-index:-1; left:50%; top:34%; width:min(70rem, 140vw); height:30rem; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgb(89 158 255 / .13), rgb(40 216 200 / .03) 60%, transparent 76%); }
.fa-bridge .fa-kicker{ margin-top:clamp(2.5rem, 5vw, 3.5rem); }
.fa-steps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.1rem; margin-top:1.1rem; }
.fa-step{ padding:1.5rem 1.4rem 1.6rem; border:1px solid var(--color-line); border-radius:var(--radius-lg); background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel)); }
.fa-step__num{ display:grid; place-items:center; width:2rem; height:2rem; margin-bottom:1rem; border-radius:50%; font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--color-on-brand);
  background:linear-gradient(120deg, var(--color-brand-bright), var(--color-accent-bright)); }
.fa-step h3{ font-size:1.12rem; font-weight:650; line-height:1.25; letter-spacing:-.012em; color:var(--color-fg); }
.fa-step p{ margin-top:.65rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.fa-bigline{ margin-top:clamp(3rem, 6vw, 5rem); text-align:center; font-size:clamp(2rem, 1rem + 4.2vw, 4.6rem); font-weight:700; letter-spacing:-.04em; line-height:1.05; }
.fa-bigline span{ display:block; }
.fa-bigline__dim{ color:var(--color-fg-2); }
.fa-bigline__hi{ color:var(--color-brand-bright);
  background:linear-gradient(95deg, var(--color-brand-bright) 0%, var(--color-accent-bright) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- Produktbereiche ---- */
.fa-prod{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(3.5rem, 7vw, 6rem); }
@supports (overflow:clip){ .fa-prod, .fa-hero, .fa-bridge{ overflow:clip; } }
.fa-prod__grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows:1fr auto auto 1fr; column-gap:clamp(2rem, 5vw, 5rem); align-items:start; }
.fa-prod__grid--wide{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.fa-prod__head{ grid-column:1; grid-row:2; }
.fa-prod__body{ grid-column:1; grid-row:3; margin-top:2rem; }
.fa-prod__visual{ position:relative; grid-column:2; grid-row:1 / 5; align-self:center; justify-self:center; }
.fa-prod--rev .fa-prod__grid{ grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); }
.fa-prod--rev .fa-prod__head, .fa-prod--rev .fa-prod__body{ grid-column:2; }
.fa-prod--rev .fa-prod__visual{ grid-column:1; }
.fa-prod__visual .phone{ width:var(--fa-phone-w); }
.fa-prod__visual .fa-crop .phone{ width:100%; }
.fa-prod__glow{ position:absolute; z-index:-1; left:50%; top:46%; width:170%; height:78%; transform:translate(-50%, -50%); pointer-events:none; filter:blur(28px);
  background:radial-gradient(closest-side, rgb(89 158 255 / .20), rgb(89 158 255 / .06) 52%, transparent 76%); }

.fa-points{ display:grid; gap:1.2rem; }
.fa-points li{ padding-left:1.15rem; border-left:2px solid rgb(89 158 255 / .38); }
.fa-points h3{ font-size:1.06rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.fa-points p{ margin-top:.35rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.fa-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.fa-prod__cta{ margin-top:1.75rem; }

.fa-card-shot{ width:100%; max-width:34rem; margin:0; }
.fa-card-shot img{ width:100%; height:auto; border-radius:1.25rem; border:1px solid rgb(255 255 255 / .1); background:var(--color-ink); box-shadow:0 24px 60px rgb(0 0 0 / .5); }
.fa-card-shot figcaption{ margin-top:.9rem; font-size:.88rem; line-height:1.5; color:var(--color-fg-3); }

.fa-chart{ width:100%; max-width:34rem; margin:0; }
.fa-chart svg{ width:100%; height:auto; padding:1rem 1.1rem; border-radius:1.25rem; border:1px solid var(--color-line); background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel)); box-shadow:0 24px 60px rgb(0 0 0 / .4); }
.fa-chart__grid{ stroke:rgb(255 255 255 / .08); stroke-width:1; }
.fa-chart__dots{ fill:#9AA6B8; }
.fa-chart__trend{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.fa-chart__cap{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; margin-top:.9rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--color-fg-2); }
.fa-chart__key{ display:inline-flex; align-items:center; gap:.5rem; }
.fa-chart__key::before{ content:''; width:.55rem; height:.55rem; border-radius:50%; background:#9AA6B8; }
.fa-chart__key--trend::before{ width:1.1rem; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--color-brand), var(--color-accent-bright)); }
.fa-chart__schema{ color:var(--color-fg-3); }

/* ---- Verbindung ---- */
.fa-flow{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.fa-lanes{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.9rem; }
.fa-lane{ position:relative; display:flex; flex-direction:column; gap:.4rem; padding:1.15rem 1rem; text-align:center; border:1px solid var(--color-line-2); border-radius:var(--radius-md); background:var(--color-panel); }
.fa-lane::after{ content:''; position:absolute; left:50%; top:100%; width:1px; height:2.2rem; background:linear-gradient(180deg, rgb(130 183 255 / .65), rgb(130 183 255 / .3)); }
.fa-lane__name{ font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-bright); }
.fa-lane__what{ font-size:.96rem; line-height:1.4; color:var(--color-fg); }
.fa-merge{ position:relative; height:5.4rem; margin-top:2.2rem; }
.fa-merge__bar{ position:absolute; top:0; left:calc(10% - .36rem); right:calc(10% - .36rem); height:1px; background:linear-gradient(90deg, rgb(130 183 255 / .6), rgb(53 224 208 / .6)); }
.fa-merge__stem{ position:absolute; top:0; left:50%; width:1px; height:2rem; background:linear-gradient(180deg, rgb(130 183 255 / .6), rgb(53 224 208 / .6)); }
.fa-merge__node{ position:absolute; top:2rem; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; min-width:11rem; padding:.85rem 1.8rem; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--color-fg);
  background:linear-gradient(var(--color-panel), var(--color-panel)) padding-box, linear-gradient(120deg, var(--color-brand-bright), var(--color-accent-bright)) border-box; border:1px solid transparent;
  box-shadow:0 0 40px rgb(89 158 255 / .28), 0 18px 40px rgb(0 0 0 / .4); }
.fa-results{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem 2rem; margin-top:clamp(1.5rem, 3vw, 2.5rem); }
.fa-results li{ padding-top:1.1rem; border-top:1px solid var(--color-line-2); }
.fa-results h3{ font-size:1.1rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.fa-results p{ margin-top:.5rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }

/* ---- Vergleich ---- */
.fa-compare__grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; margin-top:clamp(2rem, 4vw, 3rem); }
.fa-cmp{ display:flex; flex-direction:column; gap:.7rem; padding:1.5rem 1.35rem; border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-panel); }
.fa-cmp__focus{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; line-height:1.4; color:var(--color-fg-2); }
.fa-cmp h3{ font-size:1.18rem; font-weight:650; line-height:1.25; letter-spacing:-.012em; color:var(--color-fg); }
.fa-cmp p:last-child{ font-size:.97rem; line-height:1.6; color:#C3CBD6; }
.fa-cmp--us{ border-color:rgb(89 158 255 / .5); background:radial-gradient(120% 70% at 50% 0%, rgb(89 158 255 / .16), transparent 66%), var(--color-panel); }
.fa-cmp--us .fa-cmp__focus{ color:var(--color-accent-bright); }
@media (min-width:1100px){ .fa-cmp h3{ min-height:2.5em; } }

/* ---- Für wen ---- */
.fa-who__list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(2rem, 5vw, 4rem); margin-top:clamp(1.5rem, 3vw, 2.25rem); max-width:56rem; }
.fa-who__list li{ position:relative; padding:1rem 0 1rem 2rem; border-top:1px solid var(--color-line-2); font-size:clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height:1.5; color:var(--color-fg); }
.fa-who__list li::before{ content:''; position:absolute; left:.2rem; top:1.45rem; width:.72rem; height:.4rem; border-left:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent); transform:rotate(-45deg); }
.fa-who .fa-note{ max-width:56rem; }

/* ---- Quiz + Warum ---- */
.fa-next__grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; }
.fa-card{ display:flex; flex-direction:column; padding:clamp(1.5rem, 1rem + 2.5vw, 2.6rem); border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-panel); }
.fa-card h2{ font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight:700; letter-spacing:-.025em; line-height:1.12; color:var(--color-fg); text-wrap:balance; }
.fa-card > p:not(.fa-card__cta):not(.microcopy){ margin-top:.9rem; max-width:44ch; font-size:1.05rem; line-height:1.6; color:var(--color-fg-2); }
.fa-card__cta{ margin-top:auto; padding-top:1.6rem; }
.fa-card .microcopy{ margin-top:.9rem; color:var(--color-fg-2); }
.fa-card--quiz{ border-color:rgb(89 158 255 / .34); background:radial-gradient(120% 80% at 50% 0%, rgb(89 158 255 / .12), transparent 62%), var(--color-panel); }
.fa-arrowlink{ display:inline-flex; align-items:center; gap:.55rem; min-height:2.75rem; font-size:1.02rem; font-weight:600; color:var(--color-accent-bright); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em; }
.fa-arrowlink::after{ content:'→'; transition:transform .2s ease; }
.fa-arrowlink:hover{ color:var(--color-fg); }
.fa-arrowlink:hover::after{ transform:translateX(.25rem); }

/* ---- Datenschutz kompakt ---- */
.fa-priv__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.4rem 2.2rem; margin-top:clamp(2rem, 4vw, 3rem); }
.fa-priv__grid li{ padding-top:1.1rem; border-top:1px solid var(--color-line-2); }
.fa-priv__grid h3{ font-size:1.06rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.fa-priv__grid p{ margin-top:.45rem; font-size:.96rem; line-height:1.6; color:#C3CBD6; }
.fa-priv__more{ margin-top:clamp(1.5rem, 3vw, 2.25rem); text-align:center; }

/* ---- Beta-Abschluss ---- */
.fa-beta__cta{ display:flex; justify-content:center; margin-top:2rem; }
.fa-beta .beta2__platform{ margin-top:1.2rem; }

/* ---- Responsive ---- */
@media (max-width:1099px){
  .fa-islands{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .fa-island{ grid-column:span 2; }
  .fa-island:nth-child(4), .fa-island:nth-child(5){ grid-column:span 3; }
  .fa-compare__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .fa{ --fa-phone-w:min(76vw, 21rem); }
  .fa-hero__grid{ grid-template-columns:minmax(0, 1fr); }
  .fa-hero__visual{ margin-top:.5rem; }
  .fa-prod__grid, .fa-prod__grid--wide, .fa-prod--rev .fa-prod__grid{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
  .fa-prod__head, .fa-prod__body, .fa-prod__visual, .fa-prod--rev .fa-prod__head, .fa-prod--rev .fa-prod__body, .fa-prod--rev .fa-prod__visual{ grid-column:1; grid-row:auto; }
  .fa-prod__visual{ margin-top:2.2rem; }
  .fa-prod__body{ margin-top:2.2rem; }
  .fa-steps{ grid-template-columns:minmax(0, 1fr); }
  .fa-results, .fa-priv__grid{ grid-template-columns:minmax(0, 1fr); }
  .fa-next__grid{ grid-template-columns:minmax(0, 1fr); }
  .fa-lanes{ grid-template-columns:minmax(0, 1fr); gap:.75rem; max-width:26rem; margin-inline:auto; }
  .fa-lane::after{ height:.75rem; }
  .fa-merge{ height:4.6rem; margin-top:.75rem; }
  .fa-merge__bar{ display:none; }
  .fa-merge__stem{ height:1.6rem; }
  .fa-merge__node{ top:1.6rem; }
  .fa-flow{ margin-bottom:1.25rem; }
}
@media (max-width:759px){
  .fa-who__list{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:649px){
  .fa-compare__grid{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:599px){
  .fa-islands{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fa-island, .fa-island:nth-child(4), .fa-island:nth-child(5){ grid-column:auto; }
  .fa-island:last-child{ grid-column:1 / -1; }
}
@media (max-width:479px){
  .fa-islands{ grid-template-columns:minmax(0, 1fr); }
  .fa-island:last-child{ grid-column:auto; }
  .fa-island{ padding:.9rem 1rem; gap:.35rem; }
}
@media (max-width:30em){
  .fa-hero__ctas .btn, .fa-prod__cta .btn{ width:100%; }
  .fa-note{ flex-direction:column; gap:.55rem; }
}
@media (max-width:21.1875em){
  .fa-step, .fa-cmp{ padding-inline:1.15rem; }
  .fa-merge__node{ min-width:9.5rem; padding-inline:1.2rem; letter-spacing:.14em; }
}
@media (forced-colors:active){
  .fa-hero__strong, .fa-bigline__hi{ background:none; -webkit-text-fill-color:currentColor; color:CanvasText; }
}
@media (prefers-reduced-motion: reduce){
  .fa-arrowlink::after{ transition:none; }
  .fa-hero__glow, .fa-prod__glow{ filter:none; }
}

/* ==========================================================================
   Unterseite /training (07.10.2026)
   Baut auf dem Block /fitness-app auf und nutzt dessen .fa-*-Muster (Typografie, Notiz, Schritte,
   Ergebnisreihen, Vergleichskarten, Für-wen-Liste, Quiz-/Warum-Karten) sowie die Bestandsmuster
   .btn, .badge, .tag, .phone--stage, .beta2, .footer2. Neu nur mit Präfix .tr-.
   Keine JS-abhängigen Einblendungen: der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */
.tr{ --tr-phone-w:clamp(300px, 27vw, 380px); }
.tr-sec{ position:relative; overflow:hidden; isolation:isolate; }
@supports (overflow:clip){ .tr-sec, .tr-hero{ overflow:clip; } }

/* ---- Hero: zentriert, das Gerät steigt unter dem Text auf ---- */
.tr-hero{ position:relative; isolation:isolate; overflow:hidden; text-align:center; padding-top:clamp(2rem, 1rem + 5vw, 4.5rem); }
.tr-hero::before{ content:''; position:absolute; z-index:-1; left:50%; top:-16rem; width:min(90rem, 170vw); height:48rem; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgb(89 158 255 / .16), rgb(40 216 200 / .04) 55%, transparent 72%); }
.tr-hero__copy{ max-width:54rem; margin-inline:auto; }
.tr-hero__h1{ font-size:clamp(1.85rem, .85rem + 4.1vw, 4.1rem); font-weight:700; letter-spacing:-.04em; line-height:1.04; color:var(--color-fg); text-wrap:balance; }
.tr-hero__h1 span{ display:block; }
.tr-hero__h1 .tr-hero__hi{ width:fit-content; margin-inline:auto; margin-top:.04em; color:var(--color-brand-bright);
  background:linear-gradient(95deg, var(--color-brand-bright) 0%, var(--color-accent-bright) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tr-hero__sub{ margin:1.5rem auto 0; max-width:46ch; font-size:clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height:1.58; color:var(--color-fg-2); text-wrap:pretty; }
.tr-hero__ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:2rem; }
.tr-hero__micro{ margin-top:1.1rem; }
.tr-hero__stage{ position:relative; display:flex; flex-direction:column; align-items:center; margin:clamp(2.25rem, 4.5vw, 3.5rem) 0 0; }
.tr-hero__glow{ position:absolute; z-index:-1; left:50%; top:36%; width:calc(var(--tr-phone-w) * 2.5); height:80%; transform:translate(-50%, -50%); pointer-events:none; filter:blur(30px);
  background:radial-gradient(closest-side, rgb(120 180 255 / .26), rgb(89 158 255 / .10) 48%, transparent 76%), radial-gradient(40% 30% at 50% 60%, rgb(40 216 200 / .10), transparent 70%); }
/* Ausschnitt: zeigt die Routine bis zur dritten Übung und blendet nach unten aus. Die schwebende Tab-Leiste des Screenshots bleibt außerhalb des Ausschnitts. */
.tr-crop{ position:relative; width:var(--tr-phone-w); aspect-ratio:9 / 16.3; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 8rem), transparent 100%); mask-image:linear-gradient(180deg, #000 calc(100% - 8rem), transparent 100%); }
.tr-crop .phone{ position:absolute; top:0; left:0; width:100%; }
/* Die Screenshots zeigen ihre eigene Dynamic Island, die Attrappe des Rahmens würde doppelt erscheinen. */
.tr .phone__notch{ display:none; }
.tr-hero__cap{ position:relative; max-width:30rem; margin-top:.5rem; padding-bottom:.5rem; text-align:center; font-size:.9rem; line-height:1.5; color:var(--color-fg-3); text-wrap:balance; }

/* ---- Links / Rechts ---- */
.tr-sides{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:stretch; gap:1rem; margin-top:clamp(2rem, 4vw, 3rem); }
.tr-side{ display:flex; flex-direction:column; gap:.75rem; padding:clamp(1.4rem, 1rem + 1.6vw, 2.1rem); border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-panel); }
.tr-side__k{ font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-bright); }
.tr-side h3{ font-size:clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--color-fg); }
.tr-side p:last-child{ font-size:1rem; line-height:1.64; color:#C3CBD6; }
.tr-side--now{ border-color:rgb(89 158 255 / .5); background:radial-gradient(120% 80% at 50% 0%, rgb(89 158 255 / .15), transparent 64%), var(--color-panel); }
.tr-sides__arrow{ align-self:center; display:block; width:1.3em; height:1.3em; font-family:var(--font-mono); font-size:1.7rem; line-height:1.3; text-align:center; color:var(--color-accent-bright); }
.tr-read__k{ margin-top:clamp(2rem, 4vw, 3rem); }
.tr-read__k, .tr-sheet__k, .tr-range-k{ font-size:.9rem; letter-spacing:.03em; text-transform:none; }
.tr-read{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.9rem 1.5rem; margin-top:.9rem; }
.tr-read li{ display:flex; flex-direction:column; gap:.3rem; padding-top:.9rem; border-top:1px solid var(--color-line-2); font-size:.98rem; line-height:1.5; color:#C3CBD6; }
.tr-read__label{ font-family:var(--font-mono); font-size:1rem; font-weight:600; color:var(--color-accent-bright); }

/* ---- Zeilen mit optionalem Screen (Platz für spätere Aufnahmen) ---- */
.tr-split{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:center; margin-top:clamp(2rem, 4vw, 3rem); }
.tr-split:has(> .tr-shot), .tr-split--fig{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); }
.tr-split--rev:has(> .tr-shot), .tr-split--rev.tr-split--fig{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); }
.tr-split--rev:has(> .tr-shot) > .tr-shot, .tr-split--rev.tr-split--fig > .tr-shot{ order:-1; }
.tr-split--fig{ margin-top:0; }
.tr-split--top{ align-items:start; margin-top:clamp(1.25rem, 2.5vw, 2rem); }
.tr-split:has(> .tr-shot) .fa-results, .tr-split--fig .fa-results, .tr-split:has(> .tr-shot) .tr-grid2, .tr-split--fig .tr-grid2{ grid-template-columns:minmax(0, 1fr); }
.tr-shot{ position:relative; margin:0; display:flex; flex-direction:column; align-items:center; justify-self:center; }
.tr-shot .phone{ width:var(--fa-phone-w); }
.tr-shot .fa-crop .phone{ width:100%; }
.tr-shot__glow{ position:absolute; z-index:-1; left:50%; top:46%; width:170%; height:78%; transform:translate(-50%, -50%); pointer-events:none; filter:blur(28px);
  background:radial-gradient(closest-side, rgb(89 158 255 / .20), rgb(89 158 255 / .06) 52%, transparent 76%); }
.tr-shot figcaption{ margin-top:.9rem; max-width:var(--fa-phone-w); text-align:center; font-size:.88rem; line-height:1.5; color:var(--color-fg-3); }

/* ---- gemeinsame Bausteine ---- */
.fa-points h4{ font-size:1.06rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.tr-grid2{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.6rem clamp(2rem, 5vw, 4rem); }
.tr-steps{ margin-top:clamp(2rem, 4vw, 3rem); }
.tr-facts{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.tr-tags{ margin-top:1.25rem; }
.tr-tags--center{ justify-content:center; }
.tr-tags .tag{ font-size:.88rem; }
.tr-copy .fa-note{ margin-top:1.75rem; }

/* ---- Satztypen ---- */
.tr-types .fa-cmp h3, .tr-cmp2 .fa-cmp h3{ min-height:0; }
.tr-types .fa-cmp > p:nth-of-type(2){ flex:1; }
@media (min-width:1100px){ .fa-cmp p.tr-type__count{ min-height:5.2rem; box-sizing:border-box; } }
.fa-cmp p.tr-type__count{ margin-top:.3rem; padding-top:.9rem; border-top:1px solid var(--color-line); font-family:var(--font-mono); font-size:.88rem; letter-spacing:.01em; line-height:1.5; color:var(--color-fg-2); }
.tr-closer{ max-width:40rem; margin:1.5rem auto 0; text-align:center; font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height:1.6; color:var(--color-fg); text-wrap:balance; }

/* ---- Progression ---- */
.tr-verdicts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:clamp(2rem, 4vw, 3rem); }
.tr-verdict{ padding:1.4rem 1.3rem 1.55rem; border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-panel); }
.tr-verdict h3{ display:flex; align-items:baseline; gap:.6rem; font-size:1.3rem; font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--color-fg); }
.tr-verdict__mark{ font-family:var(--font-mono); font-size:1.15rem; font-weight:600; color:var(--color-accent-bright); }
.tr-verdict--same .tr-verdict__mark{ color:var(--color-fg-2); }
.tr-verdict--down .tr-verdict__mark{ color:#F3C46A; }
.tr-verdict p{ margin-top:.65rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.tr-two{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(2rem, 5vw, 4rem); margin-top:clamp(2.5rem, 5vw, 4rem); align-items:start; }
.tr-sub h3, .tr-prs h3, .tr-ux-block h3{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); }
.tr-sub .fa-points{ margin-top:1.25rem; }
.tr-sub__p{ margin-top:1.25rem; font-size:1rem; line-height:1.6; color:var(--color-fg); }
.tr-sub .fa-note{ margin-top:1.4rem; }
.tr-rule{ counter-reset:tr-rule; display:grid; gap:1rem; margin-top:1.25rem; }
.tr-rule li{ counter-increment:tr-rule; position:relative; min-height:2rem; padding:.2rem 0 .2rem 3rem; font-size:1.02rem; line-height:1.6; color:var(--color-fg); }
.tr-rule li::before{ content:counter(tr-rule); position:absolute; left:0; top:0; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--color-on-brand);
  background:linear-gradient(120deg, var(--color-brand-bright), var(--color-accent-bright)); }
.tr-prs{ max-width:52rem; margin:clamp(2.5rem, 5vw, 4rem) auto 0; text-align:center; }
.tr-prs__p{ margin:.8rem auto 0; max-width:56ch; font-size:1.02rem; line-height:1.6; color:var(--color-fg-2); }
.tr-prs .fa-tags{ justify-content:center; }
.tr-prs .fa-note{ max-width:46rem; margin-inline:auto; text-align:left; }

/* ---- Auswertung: Aufbau von oben nach unten ---- */
.tr-sheet__k{ margin-top:clamp(2rem, 4vw, 3rem); }
.tr-split--tight{ margin-top:1.1rem; }
.tr-sheet{ counter-reset:tr-sheet; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
.tr-sheet li{ counter-increment:tr-sheet; padding:1.3rem 1.3rem 1.5rem; border:1px solid var(--color-line); border-radius:var(--radius-lg); background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel)); }
.tr-sheet li::before{ content:counter(tr-sheet, decimal-leading-zero); display:block; margin-bottom:.7rem; font-family:var(--font-mono); font-size:.8rem; font-weight:600; letter-spacing:.1em; color:var(--color-accent-bright); }
.tr-sheet h3{ font-size:1.1rem; font-weight:650; line-height:1.28; letter-spacing:-.012em; color:var(--color-fg); }
.tr-sheet p{ margin-top:.55rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.tr-split:has(> .tr-shot) .tr-sheet{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* ---- Routinen: Schemata ---- */
.tr-schema__lead{ max-width:46rem; margin:clamp(1.75rem, 3.5vw, 2.5rem) auto 0; text-align:center; font-size:1.05rem; line-height:1.6; color:var(--color-fg-2); text-wrap:balance; }
.tr-schemas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.25rem; }
.tr-schema{ padding:.85rem 1.3rem; border:1px solid var(--color-line-2); border-radius:var(--radius-md); background:var(--color-panel); font-family:var(--font-mono); font-size:clamp(1.1rem, 1rem + .5vw, 1.45rem); font-weight:600; line-height:1.2; color:var(--color-fg); white-space:nowrap; }
.tr-schema--own{ border-style:dashed; color:var(--color-fg-2); font-weight:500; }

/* ---- Pause: Ablauf und Live Activity ---- */
.tr-two--rest{ margin-top:0; gap:clamp(2rem, 5vw, 3.5rem); }
.tr-flow{ counter-reset:tr-flow; position:relative; display:grid; gap:1.6rem; padding-left:3rem; }
.tr-flow li{ counter-increment:tr-flow; position:relative; }
.tr-flow li:not(:last-child)::after{ content:''; position:absolute; left:-2.05rem; top:1.95rem; bottom:-1.5rem; width:1px; background:linear-gradient(180deg, rgb(130 183 255 / .6), rgb(53 224 208 / .3)); }
.tr-flow li::before{ content:counter(tr-flow); position:absolute; left:-3rem; top:-.1rem; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--font-mono); font-size:.8rem; font-weight:600; color:var(--color-on-brand);
  background:linear-gradient(120deg, var(--color-brand-bright), var(--color-accent-bright)); }
.tr-flow h3{ font-size:1.1rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.tr-flow p{ margin-top:.35rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.tr-live{ padding:clamp(1.4rem, 1rem + 1.4vw, 2rem); border:1px solid rgb(89 158 255 / .38); border-radius:var(--radius-lg); background:radial-gradient(120% 70% at 50% 0%, rgb(89 158 255 / .14), transparent 64%), var(--color-panel); }
.tr-live__k{ font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-bright); }
.tr-live h3{ margin-top:.6rem; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); }
.tr-live > p:not(.tr-live__k){ margin-top:.7rem; font-size:1rem; line-height:1.62; color:#C3CBD6; }
.tr-live__list{ display:grid; gap:.8rem; margin-top:1.1rem; }
.tr-live__list li{ padding-top:.8rem; border-top:1px solid var(--color-line-2); font-size:.98rem; line-height:1.55; color:#C3CBD6; }
.tr-live__list strong{ color:var(--color-fg); font-weight:650; }
.tr-split:has(> .tr-shot) .tr-two--rest{ grid-template-columns:minmax(0, 1fr); }

/* ---- Reihenfolge, Abbruch ---- */
.tr-ux-block{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.tr-ux{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:1.25rem; }
.tr-ux li{ padding:1.3rem 1.25rem 1.4rem; border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-panel); }
.tr-ux h4{ font-size:1.08rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.tr-ux p{ margin-top:.5rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }

/* ---- Historie ---- */
.tr-range-k{ margin-top:clamp(2rem, 4vw, 3rem); }
.tr-range-k + .tr-tags{ margin-top:.9rem; }
.tr-sec > .container > .fa-note--center + .fa-note--center{ margin-top:1rem; }

/* ---- Zusammenspiel ---- */
.tr-links{ display:grid; gap:1.5rem; margin-top:clamp(1.5rem, 3vw, 2.25rem); }
.tr-links li{ padding-top:1.1rem; border-top:1px solid var(--color-line-2); }
.tr-links h3{ font-size:1.1rem; font-weight:650; line-height:1.3; letter-spacing:-.01em; color:var(--color-fg); }
.tr-links p{ margin-top:.45rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.tr-links .fa-arrowlink{ margin-top:.3rem; }
.tr-all{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--color-line-2); }

/* ---- Vergleich ---- */
.tr-cmp2{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:58rem; margin-inline:auto; }
.tr-qlist{ display:grid; gap:.55rem; }
.tr-qlist li{ position:relative; padding-left:1.4rem; font-size:1.02rem; line-height:1.45; color:var(--color-fg); }
.tr-qlist li::before{ content:''; position:absolute; left:.1rem; top:.6em; width:.5rem; height:.5rem; border-radius:50%; background:var(--color-accent); }

/* ---- Beta-Abschluss ---- */
.tr-beta__title{ font-size:clamp(2rem, 1.1rem + 3.2vw, 3.7rem); }
.fa-beta .beta2__head{ max-width:52rem; }

/* ---- Responsive ---- */
@media (max-width:899px){
  .tr{ --tr-phone-w:min(82vw, 22rem); }
  .tr-split:has(> .tr-shot), .tr-split--fig, .tr-split--rev:has(> .tr-shot), .tr-split--rev.tr-split--fig{ grid-template-columns:minmax(0, 1fr); }
  .tr-split--rev:has(> .tr-shot) > .tr-shot, .tr-split--rev.tr-split--fig > .tr-shot{ order:0; }
  .tr-two, .tr-verdicts, .tr-ux{ grid-template-columns:minmax(0, 1fr); }
  .tr-sheet, .tr-split:has(> .tr-shot) .tr-sheet{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tr-cmp2{ max-width:36rem; }
}
@media (max-width:759px){
  .tr-sides{ grid-template-columns:minmax(0, 1fr); gap:.6rem; }
  .tr-sides__arrow{ transform:rotate(90deg); justify-self:center; }
  .tr-read{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tr-grid2{ grid-template-columns:minmax(0, 1fr); }
  .tr-sheet, .tr-split:has(> .tr-shot) .tr-sheet{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:649px){
  .tr-cmp2{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:30em){
  .tr-hero__ctas .btn{ width:100%; }
}
@media (max-width:479px){
  .tr-read{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:21.1875em){
  .tr-hero__h1{ font-size:1.75rem; }
  .tr-side, .tr-verdict, .tr-ux li, .tr-sheet li{ padding-inline:1.15rem; }
}
@media (forced-colors:active){
  .tr-hero__hi{ background:none; -webkit-text-fill-color:currentColor; color:CanvasText; }
}
@media (prefers-reduced-motion: reduce){
  .tr-hero__glow, .tr-shot__glow{ filter:none; }
}

/* Produktwahrheits-Pass Training (07.10.2026): Routine-Screen statt veraltetem Live-Workout.
   Der Screen bringt seine eigene Dynamic Island mit – die Rahmen-Attrappe würde sie doppeln. */
.phone:has(img[src$="training-routine.webp"]) .phone__notch{ display:none; }

/* ==========================================================================
   Unterseite /ernaehrung (07.10.2026)
   Baut auf den Blöcken /fitness-app (.fa-*) und /training (.tr-*) auf: Hero, Typografie, Notiz,
   Schritte, Vergleichskarten, Ablauf, Zeilen mit Screen, Für-wen-Liste, Datenschutz-Raster,
   Quiz-/Warum-Karten sowie .btn, .badge, .tag, .phone--stage, .beta2, .footer2.
   Neu nur mit Präfix .er-. Keine JS-abhängigen Einblendungen: der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */

/* ---- Hero: die Wege als Sprungmarken (kein Gerät, solange kein aktueller Tagesansicht-Screen existiert) ---- */
.er-hero{ padding-bottom:clamp(2.5rem, 5vw, 4.5rem); }
.er-hero .tr-hero__h1{ font-size:clamp(1.85rem, .9rem + 3.7vw, 3.8rem); }
.er-jump__k{ margin-top:clamp(2rem, 4vw, 3rem); font-size:.9rem; letter-spacing:.03em; text-transform:none; }
.er-jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.9rem; }
.er-jump a{ display:inline-flex; align-items:center; min-height:2.75rem; padding:.55rem 1.2rem; border:1px solid var(--color-line-2); border-radius:var(--radius-pill); background:var(--color-panel);
  font-size:1rem; font-weight:600; line-height:1.2; color:var(--color-fg); transition:border-color .2s ease, background-color .2s ease; }
.er-jump a:hover{ border-color:rgb(89 158 255 / .6); background:color-mix(in srgb, var(--color-brand) 12%, var(--color-panel)); }

/* ---- Karten (Eingabewege, Makros, Orte für Wiederkehrendes) ---- */
.er-cards .fa-cmp h3{ min-height:0; }
.er-cards .fa-cmp__focus{ font-size:.78rem; }
.er-cards .fa-cmp > p:nth-of-type(2){ flex:1; }
.fa-cmp p.er-net{ margin-top:.3rem; padding-top:.9rem; border-top:1px solid var(--color-line); font-family:var(--font-mono); font-size:.88rem; letter-spacing:.01em; line-height:1.5; color:var(--color-fg-2); }
@media (min-width:1100px){ .fa-cmp p.er-net{ min-height:3.7rem; box-sizing:border-box; } }
.er-cards--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.er-closer{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.1rem 1.25rem; }
.er-closer .fa-arrowlink{ font-size:1.02rem; }
.er-links + .er-closer{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ---- Schnell eintragen: Pflicht / Optional ---- */
.er-fields .tr-side__k{ font-size:.8rem; }
.er-fields{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; max-width:52rem; margin:clamp(2rem, 4vw, 3rem) auto 0; }

/* ---- Nutrition Scan ---- */
.er-sources .tr-copy{ text-align:center; }
.er-sources .tr-tags{ margin-top:.9rem; }
.er-src__k{ font-size:.9rem; letter-spacing:.03em; text-transform:none; }
.tr-split:has(> .tr-shot).er-sources .tr-copy{ text-align:left; }
.tr-split:has(> .tr-shot).er-sources .er-src__k{ text-align:left; }
.tr-split:has(> .tr-shot).er-sources .tr-tags--center{ justify-content:flex-start; }
/* Der Screen ist ein Ausschnitt der Prüfansicht, kein ganzes Gerät: als Karte statt im Rahmen. */
.er-shot img{ width:100%; max-width:32rem; height:auto; aspect-ratio:900 / 1019; border-radius:1.25rem; border:1px solid rgb(255 255 255 / .1); background:var(--color-ink); box-shadow:0 24px 60px rgb(0 0 0 / .5); }
.tr-shot.er-shot figcaption{ max-width:32rem; }
.er-limits{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.er-limits__h{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); }
.er-limits .fa-points{ margin-top:1.25rem; }

/* ---- Menge: Rechenbeispiel ---- */
.er-calc{ max-width:36rem; margin:clamp(2.25rem, 4.5vw, 3.5rem) auto 0; padding:clamp(1.1rem, .8rem + 1.4vw, 1.9rem); border:1px solid var(--color-line); border-radius:var(--radius-lg); background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel)); }
.er-calc table{ width:100%; border-collapse:collapse; }
.er-calc caption{ padding-bottom:.9rem; text-align:left; font-family:var(--font-mono); font-size:.875rem; letter-spacing:.04em; line-height:1.4; color:var(--color-accent-bright); }
.er-calc th, .er-calc td{ padding:.8rem .4rem; border-top:1px solid var(--color-line-2); text-align:right; font-variant-numeric:tabular-nums; line-height:1.3; }
.er-calc thead th{ padding-top:.2rem; border-top:0; font-family:var(--font-mono); font-size:.9rem; font-weight:500; color:var(--color-fg-2); white-space:nowrap; }
.er-calc tbody th{ text-align:left; font-size:1.02rem; font-weight:600; color:var(--color-fg); }
.er-calc tbody td{ font-family:var(--font-mono); font-size:1.15rem; font-weight:500; color:var(--color-fg); white-space:nowrap; }
.er-calc tbody td:last-child{ color:var(--color-brand-bright); font-weight:600; }
.er-calc__u{ display:block; margin-top:.15rem; font-family:var(--font-mono); font-size:.875rem; font-weight:400; color:var(--color-fg-2); }
.er-calc figcaption{ margin-top:1rem; font-size:.9rem; line-height:1.5; color:var(--color-fg-3); }

/* ---- Ziele ---- */
.er-goals{ display:grid; max-width:66rem; margin-inline:auto; }
.er-goal{ display:grid; grid-template-columns:minmax(0, 16rem) minmax(0, 1fr); gap:.7rem clamp(1.5rem, 4vw, 3.5rem); align-items:start; padding:1.6rem 0; border-top:1px solid var(--color-line-2); }
.er-goal:last-child{ border-bottom:1px solid var(--color-line-2); }
.er-goal__head{ display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; }
.er-goal .badge{ font-size:.78rem; }
.er-goal h3{ font-size:clamp(1.2rem, 1.1rem + .5vw, 1.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); }
.er-goal p{ font-size:1rem; line-height:1.64; color:#C3CBD6; }
.tr-split:has(> .tr-shot) .er-goal{ grid-template-columns:minmax(0, 1fr); }

/* ---- Zusammenhang ---- */
.er-links{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.8rem clamp(2rem, 5vw, 4rem); }
.er-dir{ margin-bottom:.6rem; font-size:.78rem; }
.er-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem 2.25rem; margin-top:1.1rem; }

/* ---- Responsive ---- */
@media (max-width:1099px){
  .er-cards--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .er-cards--3{ grid-template-columns:minmax(0, 1fr); max-width:36rem; margin-inline:auto; }
}
@media (max-width:759px){
  .er-fields, .er-links{ grid-template-columns:minmax(0, 1fr); }
  .er-goal{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:21.1875em){
  .er-hero .tr-hero__h1{ font-size:1.7rem; }
  .er-calc{ padding:.9rem .75rem; }
  .er-calc th, .er-calc td{ padding-inline:.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .er-jump a{ transition:none; }
}

/* ==========================================================================
   Unterseite /aktivitaet (07.10.2026)
   Baut auf den Blöcken /fitness-app (.fa-*), /training (.tr-*) und /ernaehrung (.er-*) auf: Hero,
   Typografie, Notiz, Schritte, Vergleichskarten, Ablauf, Zeilen mit Screen, Ziele, Zusammenhang,
   Für-wen-Liste, Datenschutz-Raster, Quiz-/Warum-Karten sowie .btn, .badge, .tag, .phone--stage,
   .beta2, .footer2. Neu nur mit Präfix .ak-.
   Keine JS-abhängigen Einblendungen: der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */

/* ---- Hero: lange Zweisatz-Überschrift, Sprungmarken wie /ernaehrung (kein Gerät, solange kein aktueller Aktivitäts-Screen existiert) ---- */
.ak-hero{ padding-bottom:clamp(2.5rem, 5vw, 4.5rem); }
.ak-hero .tr-hero__copy{ max-width:60rem; }
.ak-hero .tr-hero__h1{ font-size:clamp(1.7rem, .85rem + 3.2vw, 2.75rem); line-height:1.1; }
.ak-hero .tr-hero__sub{ max-width:52ch; }

/* ---- Beschriftungen: auf dieser Seite nirgends unter 14 px ---- */
.ak .fa-kicker, .ak .fa-cmp__focus, .ak .tr-side__k, .ak .er-dir{ font-size:.875rem; }
.ak .er-goal .badge{ font-size:.875rem; }
.ak .tr-sheet li::before{ font-size:.875rem; }

/* ---- Ziele: Link steht in der eigenen Zeile ---- */
.ak-goals .fa-arrowlink{ display:flex; width:fit-content; margin-top:.2rem; }

/* ---- Ziele, Apple-Health-Beschriftung, Werte in drei Spalten ---- */
.ak-goals{ margin-top:clamp(2rem, 4vw, 3rem); }
.ak-read__k{ margin-top:clamp(2rem, 4vw, 3rem); }
.ak .tr-facts + .tr-closer{ margin-top:clamp(2rem, 4vw, 3rem); }
@media (min-width:900px){
  .ak-trio{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.6rem clamp(1.5rem, 3vw, 2.5rem); }
}

/* ---- Kalorienziel: Rechnung und „zählt / zählt nicht“ links, Heute-Screen rechts ---- */
.ak-count{ max-width:none; margin:clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.ak-count .tr-qlist{ margin-top:.2rem; }
.tr-split:has(> .tr-shot) .ak-count{ grid-template-columns:minmax(0, 1fr); }

/* ---- Verlauf: Ausschnitt als Karte statt im Rahmen (die Liste ist kein ganzes Gerät) ---- */
.ak-shot img{ width:100%; max-width:32rem; height:auto; aspect-ratio:900 / 511; border-radius:1.25rem; border:1px solid rgb(255 255 255 / .1); background:var(--color-ink); box-shadow:0 24px 60px rgb(0 0 0 / .5); }
.tr-shot.ak-shot figcaption{ max-width:32rem; }
.ak-detail{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.ak-detail__p{ margin-top:.7rem; max-width:52ch; font-size:1.02rem; line-height:1.6; color:var(--color-fg-2); }
.ak-detail .fa-points{ margin-top:1.25rem; }
.ak-detail__more{ margin-top:1.25rem; }
.ak-rules{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---- Heute-Screen: zeigt keine eigene Dynamic Island, also bleibt die Attrappe des Rahmens stehen ---- */
.ak .phone:has(img[src$="heute-hero-2026-10-05.webp"]) .phone__notch{ display:block; }

/* ---- Datenschutz: vier Punkte in zwei Spalten ---- */
@media (min-width:760px){
  .ak-priv{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Produktwahrheits-Pass Aktivität (07.10.2026): Startseite ohne veralteten Aktivitäts-Screen – Datenblock allein, zentriert */
.act__stage--solo{ grid-template-columns:minmax(0, 30rem); }

/* ==========================================================================
   Unterseite /fortschritt (07.10.2026)
   Baut auf den Blöcken /fitness-app (.fa-*), /training (.tr-*), /ernaehrung (.er-*) und /aktivitaet (.ak-*) auf:
   Hero mit Sprungmarken, Typografie, Notiz, Verdict-Karten, Lese-Reihe, Vergleichskarten, Zeilen mit Screen,
   Ziele, Zusammenhang, Für-wen-Liste, Quiz-/Warum-Karten sowie .btn, .badge, .tag, .phone--stage, .beta2, .footer2.
   Neu nur mit Präfix .fo-. Kein Gerät und keine nachgezeichnete Chart-Oberfläche: Es gibt keinen echten Screenshot des Bereichs.
   Keine JS-abhängigen Einblendungen: der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */

/* ---- Hero: lange Aussage, Sprungmarken wie /ernaehrung (kein Gerät) ---- */
.fo-hero{ padding-bottom:clamp(2.5rem, 5vw, 4.5rem); }
.fo-hero .tr-hero__copy{ max-width:60rem; }
.fo-hero .tr-hero__h1{ font-size:clamp(1.85rem, .9rem + 3.7vw, 3.8rem); }
.fo-hero .tr-hero__sub{ max-width:52ch; }

/* ---- Beschriftungen: auf dieser Seite nirgends unter 14 px ---- */
.fo .fa-kicker, .fo .fa-cmp__focus, .fo .tr-side__k, .fo .er-dir{ font-size:.875rem; }
.fo .er-goal .badge{ font-size:.875rem; }
.fo .tr-sheet li::before{ font-size:.875rem; }
.fo .fo-k{ margin-top:clamp(2rem, 4vw, 3rem); font-size:.9rem; letter-spacing:.03em; text-transform:none; }

/* ---- Vier Zahlen: Struktur des Bereichs, keine Messwerte ---- */
.fo-facts{ padding-block:clamp(2.25rem, 4.5vw, 3.5rem); }
.fo .fo-facts .fo-k{ margin-top:0; }
.fo-numbers{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem clamp(1.5rem, 3vw, 3rem); margin-top:1.25rem; }
.fo-numbers li{ display:flex; flex-direction:column; gap:.55rem; padding-top:1.1rem; border-top:1px solid var(--color-line-2); }
.fo-num__v{ font-family:var(--font-mono); font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--color-brand-bright); }
.fo-num__l{ max-width:26ch; font-size:1rem; line-height:1.5; color:#C3CBD6; }

/* ---- Aufbau: acht Stationen von oben nach unten ---- */
.fo-sheet{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.tr-split:has(> .tr-shot) .fo-sheet{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* ---- Gewicht: Zielgewicht als eigene Zeile ---- */
.fo-goal{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---- Beobachtung: Regeln als Lese-Reihe ---- */
.fo-rules-row{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }
.fo .fo-rules-row .fo-k{ margin-top:0; }
.fo-rules{ margin-top:.9rem; }
.fo-rules .tr-read__label{ font-size:1.15rem; }
.tr-split:has(> .tr-shot) .fo-rules{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* ---- Zeiträume und Kennzahlen: statische Tags, keine Bedienelemente ---- */
.fo-range .tag, .fo-metrics .tag{ color:var(--color-fg); }
.fo-range .tag{ padding:.75rem 1.3rem; font-size:1.1rem; font-weight:500; }
.fo-metrics .tag{ font-size:.95rem; }
.fo-scope{ margin-top:clamp(2rem, 4vw, 3rem); }
.fo .fo-range + .fo-scope{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ---- Stärke und Training ---- */
.fo .tr-two + .tr-closer{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ---- Bestleistungen: Rekordarten als Beispiele ---- */
.fo-pr__p{ margin-top:1rem; font-size:1.02rem; line-height:1.6; color:var(--color-fg-2); }
.fo-pr__p .fa-arrowlink{ display:flex; width:fit-content; margin-top:.2rem; }

/* ---- Kennzahlen im Detail ---- */
.fo-detail{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }
.fo-trio{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }
@media (min-width:900px){
  .fo-trio{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.6rem clamp(1.5rem, 3vw, 2.5rem); }
}

/* ---- Gesamtbild: nebeneinander / nicht dabei ---- */
.fo-cmp .tr-qlist{ margin-top:.2rem; }

/* ---- Beta-Abschluss: zwei Sätze, je einer pro Zeile ---- */
.fo-beta__title{ font-size:clamp(1.85rem, 1rem + 2.9vw, 3.2rem); }
.fo-beta__title span{ display:block; }

/* ---- Responsive ---- */
@media (max-width:1099px){
  .fo-sheet{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .fo-numbers{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:759px){
  .fo-sheet, .tr-split:has(> .tr-shot) .fo-sheet{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:479px){
  .fo-numbers{ grid-template-columns:minmax(0, 1fr); gap:1.1rem; }
  .fo-numbers li{ display:grid; grid-template-columns:3.6rem minmax(0, 1fr); align-items:baseline; gap:0 1rem; }
  .fo-num__l{ max-width:none; }
  .tr-split:has(> .tr-shot) .fo-rules{ grid-template-columns:minmax(0, 1fr); }
  .fo-range .tag{ padding:.65rem 1.1rem; }
}
@media (max-width:21.1875em){
  .fo-hero .tr-hero__h1{ font-size:1.7rem; }
}

/* ============================================================================
   Lesbarkeit (Aufräum-Pass 08.10.2026)
   Hinweise, Formular-, Meta-, Bild- und Statustexte nicht unter 14 px (.875rem), Versal-Beschriftungen
   und Status-Badges nicht unter 12 px. Nur Schriftgrößen – Farben bleiben (Kontrast gemessen, überall ≥ 4,5:1).
   Referenz: .beta2__platform. Rein dekorative Kicker (.wy-kicker, .fa-kicker, .eyebrow, .tag …) bleiben bewusst klein.
   Ausnahme Handy: Hero-Chip-Label (.hero__chip-label) – Chip ist 9,4 rem breit, der Kontext darunter steht in 14 px.
   ========================================================================== */
.beta2__privacy, .field label, .field-hint, .field-error, .beta2__device legend,
.footer2__facts, .footer2__bottom p,
.comm__example-note, .sys__note, .sys__node-q, .heute-v2__future-text,
.dcs__card-foot, .dcs__in-note, .hv3__note,
.act__bar-note, .act__metrics dt, .problem-v2__src-note,
.wy-shot figcaption, .scan-note__shot figcaption, .prog__legend,
.coach2__pack-sub, .coach2__macros dt, .coach2__routines li, .coach2__owned li, .coach2__pack-foot,
.tr2__callout-note, .pmap__block-note, .hero__chip-ctx-inner,
.coach2__points span, .priv__online, .footer__legal, .prog__ylab, .prog__xlab, .tag{ font-size:.875rem; }
.pmap__chips span{ font-size:.8125rem; }

/* Versal-Beschriftungen von Werten und Status-Badges: mindestens 12 px */
.hv3__sig-label, .dcs__in-label, .sys__node-head, .problem-v2__src-head, .prog__stat-label, .act__ctx-head,
.tr2__callout-label, .hv3__layer-label, .act__timeline figcaption, .coach2__actor-note,
.badge, .heute-v2__future-pill, .dcs__card-tag, .prog__example, .fa-chart__cap, .fa-cmp__focus,
.coach2__pack-head, .coach2__pack-tag, .hero__chip-meta, .dcs__card-impulse-label, .tr2__meta, .pmap__on{ font-size:.75rem; }
.hero__chip-label{ font-size:.75rem; }
@media (max-width:759px){ .hero__chip-label{ font-size:.6rem; } }
.coach2__pack-head{ flex-wrap:wrap; }
.coach2__pack-head > span:first-child{ white-space:nowrap; }
.act__label{ font-size:.8rem; }
.footer2__col h2{ font-size:.78rem; }

/* ==========================================================================
   Unterseite /recovery (08.10.2026)
   Baut auf den Blöcken /fitness-app (.fa-*), /training (.tr-*) und /ernaehrung (.er-*) auf: Hero mit Sprungmarken,
   Typografie, Notiz, Vergleichskarten, Ziele-Zeilen (Hinweise), Zeilen mit Screen, Zusammenhang, Quiz-/Warum-Karten
   sowie .btn, .badge, .tag, .phone--stage, .beta2, .footer2. Neu nur mit Präfix .rc-.
   Kein Gerät und keine nachgezeichnete App-Oberfläche: Es gibt keinen Screenshot mit Demo-/Testdaten.
   Einzige Grafik: das Schema zum üblichen Bereich (Band, Punkte, ohne Zahlen).
   Keine JS-abhängigen Einblendungen: der Zustand ohne Skript ist der Endzustand.
   ========================================================================== */

/* ---- Hero: Frage als Überschrift, Sprungmarken wie /fortschritt (kein Gerät) ---- */
.rc-hero{ padding-bottom:clamp(2.5rem, 5vw, 4.5rem); }
.rc-hero .tr-hero__copy{ max-width:60rem; }
.rc-hero .tr-hero__h1{ font-size:clamp(1.85rem, .9rem + 3.7vw, 3.8rem); }
.rc-hero .tr-hero__sub{ max-width:54ch; }

/* ---- Beschriftungen: auf dieser Seite nirgends unter 14 px ---- */
.rc .fa-kicker, .rc .fa-cmp__focus, .rc .tr-side__k, .rc .er-dir{ font-size:.875rem; }
.rc .fa-cmp p.er-net{ font-size:.875rem; }

/* ---- Üblicher Bereich: vier Punkte links, Schema rechts ---- */
.rc .tr-split--fig{ margin-top:clamp(2rem, 4vw, 3rem); }
.rc-range-points{ gap:1.35rem; }
.rc-schema{ width:100%; max-width:34rem; margin:0; justify-self:center; }
.rc-schema svg{ display:block; width:100%; height:auto; padding:1rem 1.1rem; border-radius:1.25rem; border:1px solid var(--color-line);
  background:linear-gradient(175deg, var(--color-panel-2), var(--color-panel)); box-shadow:0 24px 60px rgb(0 0 0 / .4); }
.rc-schema__band{ fill:rgb(89 158 255 / .16); }
.rc-schema line{ vector-effect:non-scaling-stroke; }
.rc-schema circle.rc-schema__ring{ vector-effect:non-scaling-stroke; }
.rc-schema__edge{ stroke:rgb(130 183 255 / .55); stroke-width:1.2; }
.rc-schema__mid{ stroke:rgb(130 183 255 / .75); stroke-width:1.5; stroke-dasharray:5 6; }
.rc-schema__dots{ fill:#9AA6B8; }
.rc-schema__split{ stroke:rgb(255 255 255 / .2); stroke-width:1; stroke-dasharray:3 5; }
.rc-schema__gap{ stroke:var(--color-accent-bright); stroke-width:1.5; stroke-dasharray:3 4; }
.rc-schema__ring{ fill:none; stroke:var(--color-accent-bright); stroke-opacity:.45; stroke-width:1.5; }
.rc-schema__today{ fill:var(--color-accent-bright); }
.rc-schema__cap{ display:grid; gap:.5rem; margin-top:.95rem; font-size:.875rem; line-height:1.45; color:var(--color-fg-2); }
.rc-schema__key{ display:flex; align-items:center; gap:.65rem; }
.rc-schema__key::before{ content:''; flex:none; box-sizing:border-box; }
.rc-schema__key--band::before{ width:1.1rem; height:.7rem; border-radius:2px; background:rgb(89 158 255 / .22); border:1px solid rgb(130 183 255 / .65); }
.rc-schema__key--dot::before{ width:.6rem; height:.6rem; margin-inline:.25rem; border-radius:50%; background:#9AA6B8; }
.rc-schema__key--today::before{ width:.75rem; height:.75rem; margin-inline:.175rem; border-radius:50%; background:var(--color-accent-bright); box-shadow:0 0 0 4px rgb(53 224 208 / .22); }
.rc-schema__note{ color:var(--color-fg-3); }

/* ---- Drei Signale: Karten und der Fall ohne HRV ---- */
.rc-signals .fa-cmp h3{ min-height:0; }
.rc-nohrv{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---- Vier Stufen: Farbpunkt wie in der App (grün, grün, gelb, rot), Name bleibt der Träger der Aussage ---- */
.rc-dot{ display:inline-block; width:.62rem; height:.62rem; margin-right:.6rem; border-radius:50%; vertical-align:.08em; background:var(--rc-dot, var(--color-fg-2)); }
.rc-level--good{ --rc-dot:#35E0A8; }
.rc-level--normal{ --rc-dot:#35E0A8; }
.rc-level--lower{ --rc-dot:#F5C451; }
.rc-level--low{ --rc-dot:#FF6B6B; }
.rc-levels{ margin-top:0; }
.rc-levels .fa-cmp h3{ min-height:0; }
.rc-levels .fa-cmp > p:nth-of-type(2){ flex:1; }
.rc-lvl-row{ margin-top:clamp(2rem, 4vw, 3rem); }
.rc-none-row{ margin-top:clamp(1.5rem, 3vw, 2.25rem); }
.rc-none{ padding:1.4rem 1.35rem 1.5rem; border:1px dashed var(--color-line-2); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--color-panel) 60%, transparent); }
.rc-none h3{ font-size:1.18rem; font-weight:650; line-height:1.25; letter-spacing:-.012em; color:var(--color-fg); }
.rc-none p{ margin-top:.55rem; font-size:.98rem; line-height:1.62; color:#C3CBD6; }
.rc-rules{ margin-top:clamp(1.6rem, 3vw, 2.25rem); }
.rc-none-row .tr-copy .fa-note{ margin-top:1.6rem; }

/* ---- Hinweis fürs Training: Sätze wörtlich, eine Zeile je Stufe ---- */
.rc-advice{ margin-top:clamp(1.5rem, 3vw, 2.25rem); }
.rc-goal__body > p + p{ margin-top:.5rem; }
.er-goal p.rc-sent{ font-size:clamp(1.12rem, 1.02rem + .45vw, 1.3rem); font-weight:650; line-height:1.35; letter-spacing:-.012em; color:var(--color-fg); }
.rc-tip-row{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); }
.rc-cmp{ max-width:none; }
.rc-cmp .fa-cmp h3{ min-height:0; }

/* ---- Verlauf: drei Orte, je ein Textblock (Platz für spätere Screens daneben) ---- */
.rc-hist-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1.5rem, 3vw, 2.5rem); margin-top:clamp(2rem, 4vw, 3rem); }
.rc-hist-row{ margin-top:0; padding-top:1.1rem; border-top:1px solid var(--color-line-2); }
.rc-hist-grid:has(.tr-shot){ grid-template-columns:minmax(0, 1fr); }
.rc-hist h3{ font-size:clamp(1.2rem, 1.1rem + .5vw, 1.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--color-fg); }
.rc-hist p{ margin-top:.6rem; max-width:60ch; font-size:1.02rem; line-height:1.62; color:#C3CBD6; }
.rc-hist .fa-arrowlink{ margin-top:.4rem; }

/* ---- Grenzen: eine Karte „Das wird gerechnet“, eine „Das bleibt draußen“ ---- */
.rc-cmp2 .fa-cmp h3{ min-height:0; }
.rc-cmp2 .tr-qlist{ margin-top:.2rem; }
.rc .rc-cmp2 + .tr-closer{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ---- Gesamtbild ---- */
.rc-link-row{ margin-top:clamp(1.5rem, 3vw, 2.25rem); }
.rc-links{ margin-top:0; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rc .tr-links + .tr-closer, .rc .rc-link-row + .tr-closer{ margin-top:clamp(2rem, 4vw, 3rem); }

/* ---- Beta-Abschluss: zwei Sätze, je einer pro Zeile ---- */
.rc-beta__title{ font-size:clamp(1.85rem, 1rem + 2.9vw, 3.2rem); }
.rc-beta__title span{ display:block; }

/* ---- Mit eingesetztem Screen (SCREEN-SLOTs): die Raster daneben werden schmaler ---- */
.tr-split:has(> .tr-shot) .rc-levels{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tr-split:has(> .tr-shot) .rc-cmp{ grid-template-columns:minmax(0, 1fr); }
.tr-split:has(> .tr-shot) .rc-links{ grid-template-columns:minmax(0, 1fr); }

/* ---- Responsive ---- */
@media (max-width:1099px){
  .rc-links{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .rc-hist-grid{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:899px){
  .rc-links{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:649px){
  .rc-levels{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:30em){
  .rc-none{ padding-inline:1.15rem; }
}
@media (max-width:21.1875em){
  .rc-hero .tr-hero__h1{ font-size:1.7rem; }
  .rc-schema svg{ padding:.75rem; }
}
@media (forced-colors:active){
  .rc-level, .rc-none{ border-color:CanvasText; }
  .rc-dot{ background:CanvasText; }
}

/* ============================= RECHTSTEXTE (Impressum, Datenschutz) ============================= */
.legal-page__body{ max-width:72ch; }
.legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4{ hyphens:manual; overflow-wrap:break-word; }
.legal-page h2{ margin-top:var(--space-xl); font-size:clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight:700; line-height:1.25; }
.legal-page h3{ margin-top:var(--space-lg); font-size:1.15rem; font-weight:700; line-height:1.3; }
.legal-page h4{ margin-top:var(--space-md); font-size:1rem; font-weight:700; line-height:1.35; }
.legal-page h2 + p, .legal-page h3 + p, .legal-page h4 + p, .legal-page h3 + ul{ margin-top:var(--space-sm); }
.legal-page ul{ margin-top:var(--space-md); padding-left:1.25rem; list-style:disc; color:var(--color-fg-2); max-width:60ch; }
.legal-page li + li{ margin-top:.5rem; }
.legal-page__body a{ color:var(--color-accent-bright); text-decoration:underline; text-underline-offset:.15em; overflow-wrap:anywhere; }