/* =============================================================================
   PEAKFY — Landing-Entwurf „Schwarz · Laser", HELLER MODUS (Per, 01.10.2026)
   Farben, Schrift und Bewegung aus dem App-Brand-Guide 3.2
   (~/peakfy-app/docs/brand-guide.md, lib/theme.ts `light`). Die App-Nachbauten
   zeigen den hellen Modus der App mit dessen Werten (Sonderfaelle je Baustein
   im Kommentar daneben). Die dunkle Fassung steht in Git (c1c6ab4).
   Mobile first: alles ist fuer 375 px gebaut, groessere Bildschirme erweitern.
   Keine Bibliothek, keine fremden Server.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Neutral — Hellmodus der App (lib/theme.ts `light`, (195) „Schwarz · Laser") */
  --bg: #ffffff;
  --bg-0: rgba(255, 255, 255, 0);
  --card: #f2f2f7;
  --line: #e3e3e8;
  --text: #000000;
  --text-2: #5e5e63; /* textSecondary */
  --text-3: #6c6c71; /* textMuted */
  /* Marke (§2, §2b) — Flaeche bleibt brand.cta, Schrift im Hellen der dunklere Ton */
  --brand: #6966ff;
  --cta: #625eff;
  --cta-press: #5653e0;
  --link: #5250c8; /* linkText (203) */
  --daten: #5250c8; /* daten (202)/(203): Datenlinien im Hellen = Schriftton */
  --aurora-a: #5653e0; /* aurora light */
  --aurora-b: #7a5ae8;
  --coach-blase: #e2e1f8; /* coachBlase light (203) */
  --cyan: #008fb0; /* aqua light */
  /* Bedeutung (§4–6) — im Hellen tragen Schrift und duenne Grafik die dunklen Toene */
  --green: #3dba1e; /* Ampel als Flaeche */
  --green-text: #177700; /* scoreTextLight.green */
  --blue-text: #0074b2; /* compare.betterLight */
  --yellow: #ffe600;
  --orange: #ff7800;
  --red: #b92f29;
  --blue: #00a6ff;
  --violet: #cd00ff;
  --z1: #8e93a3;
  --z5-strich: #a34d00; /* zonenStrich.z5 light */
  --gold: #b88100; /* gold light */
  --balken-kante: rgba(0, 0, 0, 0.45); /* balkenKante light */
  /* Statuspille (StatusPille.tsx): 10 % Ampelgruen deckend ueber card = #E0ECE1 */
  --pille-gruen: #e0ece1;
  /* Glas (lib/glas.ts, hell): Toenung, Kante, Blur-Grund (card · 0,55) */
  --glas-tint: rgba(248, 248, 246, 0.6);
  --glas-kante: rgba(0, 0, 0, 0.08);
  --glas-grund: rgba(242, 242, 247, 0.55);
  /* Karten (Apple Maps „standard" im Hellen, route-zeichnen.ts routeStil) */
  --karte-land: #eeece6;
  /* Orb (lib/theme.ts `orb`) */
  --orb-base: #625eff;
  --orb-mid: #4340d8;
  --orb-deep: #2e2ca8;
  --orb-violet: #a78bff;
  --orb-cyan: #00cfff;

  --f-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --r-card: 20px;
  --r-btn: 12px;
  --gutter: 20px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip; /* clip statt hidden: haelt position: sticky am Leben */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.num {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ── Typografie ─────────────────────────────────────────────────────────── */
.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 8.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lead {
  font-size: clamp(1.02rem, 3.9vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.55;
}
.grad-text {
  background: linear-gradient(100deg, #000 22%, #4340d8 62%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Knöpfe (Brand Guide §7: flach, solide, 12 px, nur einer in Indigo) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--primary {
  background: var(--cta);
  color: #fff;
}
.btn--primary:hover {
  background: var(--cta-press);
}
.btn--primary:active {
  transform: scale(0.98);
}
.btn--sm {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Navigation: Glas-Kapsel wie die Tab-Leiste der App ────────────────── */
.nav {
  position: fixed;
  z-index: 50;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 56px;
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 40px rgba(20, 18, 74, 0.1);
}
.nav__logo {
  width: 96px;
  color: var(--text);
}
.nav__links {
  display: none;
  gap: 26px;
  font-size: 14px;
  color: var(--text-2);
}
.nav__links a:hover {
  color: var(--text);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 104px;
  isolation: isolate;
  overflow: hidden;
}
/* Heller Modus: helles Tageslicht-Video ueber die ganze Flaeche (Himmel fast weiss). Ein weisser Schleier
   oben haelt die schwarze Schrift lesbar, unten laeuft das Bild ins Weiss der Seite aus. Am Schleifenpunkt
   blendet das Video kurz aus (app.js 2) — auf Weiss wirkt das wie ein weicher Lichtschnitt. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0.12) 52%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0.55) 88%,
    #fff 100%
  );
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--text-2);
}
.hero__chip .new {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.hero__chip b {
  color: var(--text);
  font-weight: 500;
}
/* Fett + Rest als EIN Textblock: längere Sprachen brechen als Satz um statt in zwei schmale
   Spalten zu zerfallen. Abstand nach dem Fettteil = die 8 px des früheren Flex-Abstands. */
.hero__chip-txt {
  min-width: 0;
  line-height: 1.35;
}
.hero__chip-txt b {
  margin-right: 4px;
}
.hero .h1 {
  margin-top: 18px;
}
.hero .lead {
  margin-top: 16px;
  max-width: 34rem;
  color: var(--text-2);
}
.hero__cta {
  margin-top: 26px;
}
/* Vertrauenszeile unter den Badges (CRO-SEO-PLAN §6 B1): Haken in der Schriftfarbe Grün der App
   (scoreTextLight.green), Text gedämpft; bricht zeilenweise um, nie mitten in einer Aussage */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.trust svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--green-text);
}
/* ab Tablet zwei saubere Spalten (am Handy fließt die Zeile frei, damit nichts überläuft) */
@media (min-width: 720px) {
  .trust {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(61, 186, 30, 0.18);
  flex: none;
}
.hero__stage {
  position: relative;
  margin-top: 44px;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}
.float {
  position: absolute;
  z-index: 3;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 50px rgba(20, 18, 74, 0.14);
  font-size: 12px;
  color: var(--text-2);
}
.float .num {
  display: block;
  font-size: 24px;
  color: var(--text);
  margin-top: 2px;
}
.float .num small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 2px;
}

/* ── Das Telefon: Rahmen + Bildschirm, alles in cqw (1 cqw = 1 % Breite) ── */
.phone {
  --pw: min(78vw, 300px);
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 19.4;
  border-radius: calc(var(--pw) * 0.16);
  padding: calc(var(--pw) * 0.032);
  background: linear-gradient(145deg, #3a3a3e, #0d0d0f 40%, #2a2a2e);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 50px 100px rgba(20, 18, 74, 0.22),
    0 0 120px rgba(98, 94, 255, 0.18);
  container-type: inline-size;
  flex: none;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * 0.13);
  background: var(--bg);
  overflow: hidden;
  font-size: 3.6cqw;
  color: var(--text);
}
.island {
  position: absolute;
  z-index: 9;
  top: 2.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8.6cqw;
  transform: translateX(-50%);
  background: #000;
  border-radius: 99px;
}
.sbar {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.6cqw 7cqw 0;
  font-weight: 600;
  font-size: 4cqw;
  height: 12cqw;
}
.sbar i {
  display: inline-flex;
  gap: 1.4cqw;
  align-items: center;
}
.sbar i b {
  display: inline-block;
  width: 6cqw;
  height: 2.8cqw;
  border-radius: 1cqw;
  border: 0.35cqw solid var(--text);
  position: relative;
}
.sbar i b::after {
  content: "";
  position: absolute;
  inset: 0.4cqw;
  right: 1.2cqw;
  background: var(--text);
  border-radius: 0.4cqw;
}
.scr-pad {
  position: relative;
  z-index: 5;
  padding: 0 5.2cqw;
}

/* Kopfleiste der App: Avatar · Glocke · Sync-Pille */
.kopf {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 2cqw;
}
.avatar {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d1d1d6, #aeaeb2);
  border: 0.4cqw solid rgba(0, 0, 0, 0.08);
}
.bell {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: var(--glas-tint);
  border: 0.5px solid var(--glas-kante);
  display: grid;
  place-items: center;
}
.bell svg {
  width: 4.4cqw;
  height: 4.4cqw;
}
.sync {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  height: 9cqw;
  padding: 0 3.4cqw;
  border-radius: 99px;
  background: var(--card);
  border: 0.3cqw solid var(--line);
  font-size: 3.3cqw;
  font-weight: 500;
}
.sync::before {
  content: "";
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: var(--text-2);
}
.greet {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 6.6cqw;
  margin-top: 5cqw;
  letter-spacing: -0.02em;
}
.scr-label {
  font-size: 3cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 4.5cqw;
  font-weight: 500;
}
.bignum {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 27cqw;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.bignum small {
  font-size: 9cqw;
  font-weight: 600;
  margin-left: 1cqw;
}
.scr-sub {
  margin-top: 2.6cqw;
  font-size: 3.4cqw;
  line-height: 1.4;
  color: var(--text);
}

/* Coach-Blase auf Heute */

.today-card {
  margin-top: 4cqw;
  padding: 3.6cqw 4cqw;
  border-radius: 5cqw;
  background: var(--card);
}
.band {
  position: relative;
  height: 2.4cqw;
  margin: 2.6cqw 0 2cqw;
  border-radius: 99px;
  background: var(--line);
}
.band::before {
  content: "";
  position: absolute;
  left: 43%;
  width: 15%;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: rgba(82, 80, 200, 0.35);
}
.band::after {
  content: "";
  position: absolute;
  left: 71%;
  top: -1cqw;
  width: 0.8cqw;
  height: 4.4cqw;
  border-radius: 1cqw;
  background: var(--text);
}
.today-card p {
  font-size: 3.1cqw;
  color: var(--text-2);
}

/* Glas-Tab-Leiste: Heute · Plan · Fortschritt · Community + Orb-Knopf */
.tabbar {
  position: absolute;
  z-index: 7;
  left: 3.6cqw;
  right: 3.6cqw;
  bottom: 4.4cqw;
  display: flex;
  gap: 2.4cqw;
  align-items: center;
}
.tabs {
  flex: 1;
  display: flex;
  justify-content: space-around;
  height: 15cqw;
  border-radius: 99px;
  background: var(--glas-grund);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 0.3cqw solid var(--glas-kante);
  align-items: center;
  padding: 0 1.5cqw;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  font-size: 2.5cqw;
  color: var(--text-3);
  padding: 1.2cqw 2cqw;
  border-radius: 99px;
}
.tab svg {
  width: 5cqw;
  height: 5cqw;
}
.tab.on {
  color: var(--link);
  background: rgba(98, 94, 255, 0.16);
}
.orb-btn {
  width: 15cqw;
  height: 15cqw;
  border-radius: 50%;
  background: var(--glas-grund);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.3cqw solid var(--glas-kante);
  display: grid;
  place-items: center;
}

/* ── Der Coach-Orb (docs/mockups/coach-orb.html, Farben aus lib/theme.ts) ── */
.orb {
  --s: 56px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  position: relative;
  flex: none;
  background: radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 30% 78%, var(--orb-cyan) 0%, rgba(0, 207, 255, 0) 42%),
    radial-gradient(circle at 72% 30%, var(--orb-violet) 0%, rgba(167, 139, 255, 0) 55%),
    radial-gradient(circle at 50% 50%, var(--orb-base) 0%, var(--orb-mid) 70%, var(--orb-deep) 100%);
  box-shadow: 0 calc(var(--s) * 0.12) calc(var(--s) * 0.28) rgba(67, 64, 216, 0.4),
    inset 0 calc(var(--s) * -0.06) calc(var(--s) * 0.14) rgba(20, 18, 90, 0.45);
  animation: schweben 6s ease-in-out infinite;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.35), transparent 40%);
  animation: atmen 4.5s ease-in-out infinite;
}
.augen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(var(--s) * 0.14);
  animation: schauen 9s ease-in-out infinite;
}
.auge {
  width: calc(var(--s) * 0.13);
  height: calc(var(--s) * 0.3);
  background: #fff;
  border-radius: calc(var(--s) * 0.065) / calc(var(--s) * 0.09);
  box-shadow: 0 0 calc(var(--s) * 0.06) rgba(255, 255, 255, 0.35);
  animation: blinzeln 7s infinite;
}
.orb.spricht .auge {
  animation: sprechen 1.1s ease-in-out infinite;
}

.orb--sm {
  --s: 11cqw;
}
@keyframes schweben {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(1.2deg);
  }
}
@keyframes atmen {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes blinzeln {
  0%,
  41%,
  45%,
  100% {
    transform: scaleY(1);
  }
  43% {
    transform: scaleY(0.08);
  }
  78%,
  82% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(0.08);
  }
}
@keyframes schauen {
  0%,
  30%,
  100% {
    transform: translate(-50%, -50%);
  }
  38%,
  52% {
    transform: translate(calc(-50% + 7%), calc(-50% - 2%));
  }
  60%,
  72% {
    transform: translate(calc(-50% - 6%), -50%);
  }
}
@keyframes sprechen {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.62);
  }
}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.sec {
  position: relative;
  padding: clamp(72px, 14vw, 140px) 0;
}
.sec__head {
  max-width: 44rem;
}
.sec__head--c {
  margin-inline: auto;
  text-align: center;
}
.sec__head .h2 {
  margin-top: 14px;
}
.sec__head .lead {
  margin-top: 16px;
}
/* Eine Lichtquelle je Abschnitt (Brand Guide §2a Regel 3: hoechstens 30 %) */
.light {
  /* Nie breiter als der Bildschirm: sonst verbreitert Mobile-Safari/Chrome den
     Layout-Viewport und die ganze Seite rutscht seitlich (gemessen 412 statt 375 px) */
  position: absolute;
  z-index: -1;
  width: min(100%, 1100px);
  aspect-ratio: 1;
  left: 50%;
  top: 0;
  transform: translate(-50%, -45%);
  background: radial-gradient(circle, rgba(105, 102, 255, 0.2), rgba(105, 102, 255, 0) 62%);
  pointer-events: none;
}
.sec {
  isolation: isolate;
}

/* Funktioniert mit — Laufband */
.works {
  padding: 8px 0 20px;
}
.works__label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.marquee {
  margin-top: 16px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
/* Reihenfolge nach Verbreitung (Garmin, Apple Health, Wahoo zuerst — 2.10.2026). Das Band startet erst, wenn es
   ins Bild kommt (js/home.js 9), damit beim ersten Blick genau diese vorn stehen; der Innenabstand links haelt das
   erste Logo aus der Ausblendzone. Ohne JS laeuft es wie bisher. */
.js .marquee__track {
  animation-play-state: paused;
}
.js .works.laeuft .marquee__track {
  animation-play-state: running;
}
.marquee {
  padding-left: 12%;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.src .dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

/* Karten */
.card {
  position: relative;
  border-radius: 24px;
  background: var(--card);
  padding: 22px;
  overflow: hidden;
}
.card p:not(.screen p) {
  color: var(--text-2);
}
.card .h3 {
  margin: 10px 0 8px;
}

/* Programm rechnet / KI erklärt */
.split {
  display: grid;
  gap: 14px;
  margin-top: 40px;
}
.metrics {
  display: grid;
  /* minmax(0, …): ein langes Wort („Belastungsverhältnis") darf eine Spalte nicht aufdrücken */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.metric {
  padding: 14px;
  border-radius: 16px;
  background: var(--bg);
  min-width: 0;
}
.metric .label {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.metric .num {
  display: block;
  font-size: 30px;
  margin-top: 4px;
}
.metric .num small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 2px;
}
.chat {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.msg.in {
  opacity: 1;
  transform: none;
}
.msg--me {
  justify-self: end;
  background: var(--cta);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.msg--coach {
  background: rgba(98, 94, 255, 0.1);
  border: 1px solid rgba(82, 80, 200, 0.35);
  border-bottom-left-radius: 6px;
}
.msg--coach b {
  display: block;
  font-size: 12px;
  color: var(--link);
  margin-bottom: 2px;
}
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(98, 94, 255, 0.14);
  width: max-content;
  opacity: 0;
  transition: opacity 0.3s;
}
.typing.in {
  opacity: 1;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--text);
  opacity: 0.3;
  animation: tippen 1.2s infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes tippen {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}
.added {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.added.in {
  opacity: 1;
  transform: none;
}

.added b {
  font-weight: 600;
  font-size: 15px;
}
.added p {
  font-size: 13px;
  margin-top: 2px;
}

/* Liste mit Häkchen */
.ticks {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.ticks li {
  display: flex;
  gap: 12px;
  color: var(--text-2);
  list-style: none;
}
.ticks {
  padding: 0;
}
.ticks b {
  color: var(--text);
  font-weight: 500;
}
.ticks svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--link);
  margin-top: 2px;
}

/* ── STORY: das mitlaufende Telefon ──────────────────────────────────────── */
.story {
  position: relative;
  margin-top: 36px;
}
.story__stage {
  position: sticky;
  top: 74px;
  z-index: 2;
  height: min(56svh, 520px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}
.story__stage::after {
  /* Das Telefon laeuft unten ins Schwarz aus, damit der Text darunter liest */
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -2px;
  height: 90px;
  background: linear-gradient(180deg, var(--bg-0), var(--bg) 85%);
}
.story__stage .phone {
  --pw: min(58vw, 236px);
}
.story__steps {
  position: relative;
  z-index: 3;
  margin-top: -20px;
}
.step {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 12svh;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease);
}
.step.is-on {
  opacity: 1;
}
.step__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--link);
  letter-spacing: 0.1em;
}
.step .h3 {
  margin: 8px 0 8px;
  font-size: clamp(1.5rem, 6.4vw, 2.1rem);
}
.step p {
  color: var(--text-2);
  max-width: 30rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  color: var(--text-2);
}
.chip b {
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 600;
}

/* Die vier Bildschirme im Story-Telefon */
.sv {
  position: absolute;
  inset: 0;
  padding-top: 13cqw;
  opacity: 0;
  transform: translateY(4%) scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.sv.on {
  opacity: 1;
  transform: none;
}
.sv .scr-pad {
  margin-top: 4cqw;
}
/* 1 Woche */
.days {
  display: grid;
  gap: 2.6cqw;
}
/* 2 Einheit */

/* 3 Fahrt */

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease-io);
}
.sv.on .draw,
.in .draw {
  stroke-dashoffset: 0;
}
/* 4 Auswertung */

.hm {
  display: grid;
  gap: 12px;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 10px;
  border-radius: 3px;
  opacity: 0;
}
.in .confetti i {
  animation: fall 2.6s var(--ease) forwards;
}
@keyframes fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 260px, 0) rotate(var(--r));
  }
}

/* ── Rund um die Fahrt ──────────────────────────────────────────────────── */
.around {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}
.privacy {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.privacy div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--text-2);
}
.privacy b {
  color: var(--text);
  font-weight: 600;
}
/* Wetterkarte: gewoehnliche Karte mit zwei weichen Lichtern (Brand Guide §2a) */

/* ── Profis: Karte mit Videohintergrund ─────────────────────────────────── */
.pros {
  color: #fff;
  --text-2: rgba(255, 255, 255, 0.72);
  --link: #9e9cff;
  position: relative;
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 22px;
  isolation: isolate;
  /* dunkle Grundfarbe, bis das Poster (erst in Bildschirmnähe geladen) und das Video da sind */
  background: #24262b;
}
.pros video,
.pros > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.94) 100%);
}
.pros .lead {
  margin-top: 14px;
  color: #c7c7cc;
}
.pros__pts {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.pros__pts h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
}
.pros__pts p {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 4px;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq {
  max-width: 760px;
  margin: 36px auto 0;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 24px;
  line-height: 1;
  color: var(--link);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 0 20px;
  color: var(--text-2);
}

/* ── Abschluss ──────────────────────────────────────────────────────────── */
.final {
  text-align: center;
}
.final .orb {
  --s: 120px;
  margin: 0 auto 30px;
}
.final .stores {
  justify-content: center;
  margin-top: 28px;
}
.footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer nav a:hover {
  color: var(--text);
}
.footer__note {
  margin-top: 18px;
  max-width: 60rem;
}

/* ── Einblenden beim Scrollen ───────────────────────────────────────────── */
.js [data-anim] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.js [data-anim].in {
  opacity: 1;
  transform: none;
  filter: none;
}
.js [data-anim="2"] {
  transition-delay: 0.08s;
}
.js [data-anim="3"] {
  transition-delay: 0.16s;
}
.js [data-anim="4"] {
  transition-delay: 0.24s;
}

/* ═══ Ab Tablet ═════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .around {
    grid-template-columns: 1fr 1fr;
  }
  .pros {
    padding: 48px;
    min-height: 620px;
  }
  .pros__pts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══ Ab Desktop ════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .nav__links {
    display: flex;
  }
  .hero {
    /* 100svh minus die Logoleiste (.works, 107 px): auf hohen Bildschirmen steht „mit welchen Geräten" schon im
       ersten Bild (2.10.2026). Der Hero-Inhalt selbst ist 858 px hoch — auf Laptops bleibt die Leiste daher knapp darunter. */
    min-height: calc(100svh - 107px);
    padding: 96px 0 48px;
    justify-content: center;
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
  }
  .hero__stage {
    margin-top: 0;
    padding: 24px 0 0;
  }
  /* Desktop-Video gespiegelt und auf 6 s gekuerzt. Der Fahrer faehrt im Bild von x 0,595 nach 0,531; die Mitte
     seines Wegs (0,563) soll 25 px rechts der Seitenmitte stehen — in der Luecke zwischen Text und Telefon, die
     mit dem auf 1180 px zentrierten Inhalt mitwandert. Bei breiten Bildschirmen ist das Bild bildschirmbreit,
     daher die Verschiebung in vw: 25 px − 0,063 · Bildbreite. */
  .hero__media video,
  .hero__media img {
    object-position: calc(50% + 25px - 6.3vw) 50%;
  }
  .hero .lead {
    max-width: 30rem;
    text-wrap: pretty;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.55) 38%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 78%, #fff 100%);
  }
  .hero .phone {
    --pw: 320px;
  }
  .story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .story__stage {
    order: 2;
    top: calc(50vh - 330px);
    height: 660px;
    align-items: center;
  }
  .story__stage::after {
    display: none;
  }
  .story__stage .phone {
    --pw: 300px;
  }
  .story__steps {
    margin-top: 0;
  }
  .step {
    min-height: 78vh;
    justify-content: center;
    padding-bottom: 0;
  }
  .around {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Handy/Tablet: Abstaende im Hero enger, damit die Batterie von Heute schon im ersten Bildschirm steht (Safari auf
   dem iPhone zeigt mit Leisten nur ~660 px; vorher endete „71 %" bei 764 px). */
@media (max-width: 999px) {
  .hero {
    padding-top: 86px;
  }
  .hero .h1 {
    margin-top: 12px;
  }
  .hero .lead {
    margin-top: 12px;
  }
  .hero__cta {
    margin-top: 20px;
  }
  .trust {
    margin-top: 12px;
  }
  .hero__stage {
    margin-top: 18px;
  }
  .hero .phone {
    --pw: min(74vw, 300px);
  }
}

/* Schmale Laptops: zwischen Fliesstext und Telefon fehlte Platz fuer den Weg des Fahrers (~160 px; gemessen bei
   1000 px nur 89, bei 1100 px 148). Kleineres Telefon, schmalerer Text, Bildausschnitt 22 px weiter links. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .hero .phone {
    --pw: 280px;
  }
  .hero .lead {
    max-width: 26rem;
  }
  .hero .h1 {
    font-size: 4.4rem;
  }
  .hero__media video,
  .hero__media img {
    object-position: calc(50% + 3px - 6.3vw) 50%;
  }
}

/* ── Weniger Bewegung ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-anim] {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .marquee__track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .marquee {
    padding-left: 0;
  }
}

/* Der Orb lebt immer — auch bei „Bewegung reduzieren" (Per, 04.09.2026,
   docs/entscheidungen.md 2026-09-04 (3)): die Bewegung ist klein, kein Zoom. */
@media (prefers-reduced-motion: reduce) {
  .orb {
    animation: schweben 6s ease-in-out infinite !important;
  }
  .orb::after {
    animation: atmen 4.5s ease-in-out infinite !important;
  }
  .augen {
    animation: schauen 9s ease-in-out infinite !important;
  }
  .auge {
    animation: blinzeln 7s infinite !important;
  }
}
/* Handy: die schwebenden Kennzahlen wuerden das Telefon verdecken */
@media (max-width: 719px) {
  .float {
    display: none;
  }
}

/* Story auf dem Handy: Telefon steht oben auf Schwarz, der Text laeuft darunter
   hindurch (nicht darueber). Ab 1000 px gilt das Zwei-Spalten-Layout oben. */
@media (max-width: 999px) {
  .story__stage {
    z-index: 3;
    height: auto;
    padding: 6px var(--gutter) 34px;
    margin-inline: calc(-1 * var(--gutter));
    background: var(--bg);
  }
  .story__stage::after {
    bottom: -60px;
    height: 60px;
    background: linear-gradient(180deg, var(--bg), var(--bg-0));
  }
  /* Groesser als vorher (44 vw): Breite nach der sichtbaren Hoehe (svh, im Safari mit Leisten ~660 px), damit unter
     dem klebenden Telefon ~210 px fuer den Text frei bleiben. Das untere Fuenftel (Tab-Leiste, Speichern) laeuft weich
     aus und nimmt keinen Platz ein — der Text darunter scheint durch. */
  .story__stage {
    padding-bottom: 10px;
  }
  .story__stage .phone {
    --pw: clamp(165px, min(62vw, calc((100svh - 300px) * 0.58)), 250px);
    margin-bottom: calc(var(--pw) * -0.43);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 80%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 80%);
  }
  .story__steps {
    z-index: 1;
    margin-top: 0;
  }
  .step {
    min-height: 72svh;
    padding-bottom: 8svh;
  }
}

.pros::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.95) 100%);
}
@media (min-width: 720px) {
  .pros::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.2) 100%);
  }
}
.orb {
  display: inline-block;
}
.final .orb {
  display: block;
}

/* ═══ EXAKTE APP-BILDSCHIRME (nach Simulator-Aufnahmen 29./30.09.2026) ════════
   Heute (Kaltstart), Schlaf, Gesundheitsmonitor, Fortschritt, Level-Fenster.
   Einheiten in cqw — 1 cqw = 1 % der Telefonbreite, wie auf dem Geraet.     */

/* Gemeinsam */
.wm {
  height: 5.2cqw;
  width: auto;
  color: var(--text);
}
.ic {
  width: 4.4cqw;
  height: 4.4cqw;
  color: var(--text-2);
  flex: none;
}
.ac {
  position: relative;
  margin: 2.6cqw 3.6cqw 0;
  padding: 4.2cqw;
  border-radius: 5.4cqw;
  background: var(--card);
}
.ac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}
.ac-top .scr-label {
  margin: 0;
}
.spill {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 1.6cqw 3.4cqw 1.6cqw 1.6cqw;
  border-radius: 99px;
  background: var(--pille-gruen);
  color: var(--green-text);
  font-weight: 600;
  font-size: 3.4cqw;
  margin-top: 3cqw;
}
.spill .ck {
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: var(--green);
  border: calc(1 * var(--pt)) solid var(--balken-kante);
  display: grid;
  place-items: center;
}
.spill .ck svg {
  width: 3cqw;
  height: 3cqw;
}
.spill--good {
  background: var(--pille-gruen);
  margin: 0;
}
.sub-head {
  display: flex;
  align-items: center;
  gap: 3.6cqw;
  padding: 1cqw 3.6cqw 1cqw;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 5.4cqw;
}
.back {
  width: 9.4cqw;
  height: 9.4cqw;
  border-radius: 2.6cqw;
  background: var(--card);
  display: grid;
  place-items: center;
}
.back svg {
  width: 4.6cqw;
  height: 4.6cqw;
}

/* HEUTE — Kopf, Licht, Kaltstart */
.app-today .kopf {
  position: relative;
}
.app-today .wm,
.app-prog .wm {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.app-today .wm {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.app-today .sync {
  transition: opacity 0.5s var(--ease);
}
.app-today.is-synced .sync {
  opacity: 0;
}
.app-today.is-synced .wm {
  opacity: 1;
}
/* Das Kopf-Feld = die Erholungs-Batterie (components/HintergrundLicht.tsx, Kopf-Modus; Zahlen aus
   lib/licht.ts KOPF). Gemalt von einem WebGL-Shader in app.js (8b) — derselbe Rechenweg wie der
   Skia-Shader der App. Ohne WebGL steht hier der ruhende Endzustand als Verlauf. */
.t-light {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: calc(580 * var(--pt));
  overflow: hidden;
  pointer-events: none;
}
.t-feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.t-light.ohne-gl {
  background: linear-gradient(90deg, transparent 71%, rgba(255, 255, 255, 0.81) 71%),
    linear-gradient(180deg, rgba(61, 186, 30, 0.76) 0, rgba(61, 186, 30, 0.64) 31.5%, rgba(61, 186, 30, 0.96) 31.6%, rgba(61, 186, 30, 0.86) 48.7%, rgba(61, 186, 30, 0.41) 48.8%, rgba(61, 186, 30, 0) 86%);
}
/* Das Zaehlwerk (components/Zaehlwerk.tsx): je Stelle ein Streifen, der wie am Kilometerzaehler
   nach oben durchlaeuft — jede Zahl ist beim Hochzaehlen zu sehen. 96 pt, Medium, −2 Laufweite. */
.app-today .bignum {
  display: flex;
  align-items: flex-end;
  margin-top: 0;
  font-size: calc(96 * var(--pt));
  line-height: calc(96 * var(--pt));
  letter-spacing: 0;
}
.zw {
  display: inline-flex;
  align-items: flex-end;
}
.zw-f {
  display: block;
  height: calc(96 * var(--pt));
  margin-right: calc(-2 * var(--pt));
  overflow: hidden;
}
.zw-s {
  display: block;
  transform: translateY(calc(var(--p) * -96 * var(--pt)));
}
.zw-s[data-stelle="1"] {
  --p: 7;
}
.zw-s[data-stelle="0"] {
  --p: 1;
}
.zw-s i {
  display: block;
  height: calc(96 * var(--pt));
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.app-today .bignum small {
  font-size: calc(30 * var(--pt));
  font-weight: 500;
  line-height: 1;
  margin: 0 0 calc(12 * var(--pt)) calc(2 * var(--pt));
}
.t-skel {
  position: absolute;
  left: 5.2cqw;
  right: 5.2cqw;
  top: 26cqw;
  display: grid;
  gap: 3.4cqw;
  transition: opacity 0.4s var(--ease);
}
.t-skel i {
  display: block;
  border-radius: 3cqw;
  background: linear-gradient(90deg, var(--card) 0%, #e8e8ed 50%, var(--card) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
}
.t-skel .k1 {
  height: 5cqw;
  width: 44%;
}
.t-skel .k2 {
  height: 3.6cqw;
  width: 66%;
}
.t-skel .k3,
.t-skel .k4,
.t-skel .k5 {
  height: 20cqw;
  border-radius: 5cqw;
}
@keyframes skel {
  to {
    background-position: -200% 0;
  }
}
.t-live {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.app-today.is-live .t-skel {
  opacity: 0;
}
.app-today.is-live .t-live {
  opacity: 1;
}
.t-lbl {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
}
.t-lbl .ic {
  width: 3.6cqw;
  height: 3.6cqw;
  color: var(--text-2);
}
.app-today .bignum {
  font-size: 25cqw;
  margin-top: 0.6cqw;
}
.app-today .scr-sub {
  color: var(--text);
}

.app-today .today-card {
  margin-top: 3cqw;
}
.app-today .band::before {
  left: 62%;
  width: 22%;
  background: rgba(0, 0, 0, 0.28);
}
.app-today .band::after {
  left: 80%;
}
.t-hm {
  margin-top: 16cqw !important;
}

/* SCHLAF */
.app-sub {
  padding-bottom: 6cqw;
}
.score {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin-top: 1cqw;
  padding-bottom: 3.4cqw;
  border-bottom: 0.3cqw solid var(--line);
}
.score .n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16cqw;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.dur {
  display: flex;
  justify-content: space-between;
  margin-top: 3.4cqw;
  font-size: 3.2cqw;
  color: var(--text-2);
}
.dur b {
  color: var(--text);
}
.durbar {
  position: relative;
  height: 2.4cqw;
  margin-top: 2.4cqw;
  border-radius: 99px;
  background: var(--line);
}
.durbar span {
  position: absolute;
  inset: 0 5% 0 0;
  border-radius: 99px;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease);
}
.in .durbar span {
  transform: scaleX(1);
}
.durbar em {
  position: absolute;
  left: 76%;
  width: 8%;
  top: -0.8cqw;
  bottom: -0.8cqw;
  border: 0.3cqw dashed rgba(23, 119, 0, 0.8);
  border-radius: 1cqw;
}
.hyp {
  width: 100%;
  height: 16cqw;
  margin: 3cqw 0 2cqw;
}
.stg {
  display: grid;
  grid-template-columns: 13cqw 1fr 10cqw 11cqw;
  align-items: center;
  gap: 2cqw;
  font-size: 3.1cqw;
  margin-top: 2.2cqw;
}
.stg b {
  text-align: right;
  font-weight: 600;
}
.stg small {
  text-align: right;
  color: var(--text-2);
  font-size: 3cqw;
}
.stg__bar {
  position: relative;
  height: 2.6cqw;
  border-radius: 99px;
  background: var(--line);
}
.stg__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 99px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.in .stg__bar i {
  transform: scaleX(1);
}
.stg__bar em {
  position: absolute;
  top: -0.9cqw;
  bottom: -0.9cqw;
  border: 0.3cqw dashed var(--text-3);
  border-radius: 1cqw;
}
.usual {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 3cqw;
  font-size: 2.9cqw;
  color: var(--text-2);
}
.usual i {
  width: 3.4cqw;
  height: 2.4cqw;
  border: 0.3cqw solid rgba(0, 0, 0, 0.4);
  border-radius: 0.8cqw;
}
.tiles2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
  margin: 2.6cqw 3.6cqw 0;
}
.tiles2 .ac {
  margin: 0;
}
.t2k {
  font-size: 3.2cqw;
  color: var(--text-2);
}
.tiles2 b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 8.4cqw;
  line-height: 1.1;
  margin-top: 1cqw;
  font-variant-numeric: tabular-nums;
}
.tiles2 small {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 1.6cqw;
  font-size: 2.9cqw;
  color: var(--green-text);
  font-weight: 600;
}
.tiles2 small i {
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
}
.tonight {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10cqw;
  color: var(--green-text);
  margin-top: 1.6cqw;
}

/* GESUNDHEITSMONITOR */
.mon-top {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  padding: 2cqw 5.2cqw 0;
}
.mon-v {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mon-v small {
  font-size: 4.2cqw;
  font-weight: 500;
  margin-left: 1cqw;
}
.mon-top > div > small {
  display: block;
  margin-top: 1.4cqw;
  font-size: 2.9cqw;
  color: var(--text-2);
}
.mon-nr {
  text-align: right;
  font-size: 3cqw;
}
.mon-nr span {
  color: var(--text);
}
.mon-nr b {
  display: block;
  font-weight: 600;
  font-size: 3.4cqw;
}
.mon-nr small {
  display: block;
  color: var(--text-2);
  font-size: 2.6cqw;
  max-width: 34cqw;
  margin-left: auto;
}
.mchips {
  display: flex;
  gap: 2cqw;
  padding: 3.4cqw 5.2cqw 0;
  white-space: nowrap;
  overflow: hidden;
}
.mchips span {
  padding: 1.8cqw 3.2cqw;
  border-radius: 99px;
  background: var(--card);
  font-size: 3cqw;
}
.mchips span.on {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.mchart svg {
  width: 100%;
  height: 40cqw;
}
.seg {
  display: flex;
  justify-content: space-between;
  margin-top: 2cqw;
  padding: 1cqw;
  border-radius: 3cqw;
  background: var(--bg);
  font-size: 3cqw;
  color: var(--text-2);
}
.seg span {
  flex: 1;
  text-align: center;
  padding: 1.6cqw 0;
  border-radius: 2.2cqw;
}
.seg span.on {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}
.mon-last {
  padding: 0 5.2cqw;
  font-size: 3cqw;
  color: var(--text);
}
.mtab {
  font-size: 3.1cqw;
}
.mt-h,
.mt-r {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  padding: 1.8cqw 0;
}
.mt-h {
  color: var(--text-2);
  font-size: 2.9cqw;
  border-bottom: 0.3cqw solid var(--line);
}
.mt-r + .mt-r {
  border-top: 0.3cqw solid var(--line);
}
.mt-r .up {
  color: var(--blue-text);
  font-weight: 600;
}

/* FORTSCHRITT */
.p-light {
  position: absolute;
  z-index: 0;
  left: -20%;
  right: -20%;
  top: -12%;
  height: 48%;
  background: radial-gradient(ellipse at 50% 20%, rgba(105, 102, 255, 0.26), rgba(105, 102, 255, 0) 65%);
  pointer-events: none;
}
.app-prog .kopf {
  position: relative;
  margin-bottom: 2cqw;
}
.goal {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  color: var(--link);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.goal svg {
  width: 4.2cqw;
  height: 4.2cqw;
}
.icons {
  display: inline-flex;
  gap: 3cqw;
}
.g-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  margin-top: 2.6cqw;
}
.g-title b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 5.2cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.days {
  flex: none;
  padding: 1.2cqw 2.6cqw;
  border-radius: 99px;
  background: var(--bg);
  font-size: 3cqw;
  font-weight: 600;
}
.g-focus {
  margin-top: 2.4cqw;
  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 1.4;
}
.g-sub {
  margin-top: 1.6cqw;
  font-size: 3cqw;
  color: var(--text-2);
  line-height: 1.4;
}
.ff-n {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 9cqw;
  margin-top: 2cqw;
  font-variant-numeric: tabular-nums;
}
.ff-sub {
  font-size: 3cqw;
  color: var(--text-2);
  margin-top: 1cqw;
}
.ff {
  width: 100%;
  height: calc(148 * var(--pt));
  margin-top: 3cqw;
  overflow: visible;
}
/* ProjectedLoadCard.tsx: Fitness (CTL) 2,4 pt in der Datenfarbe, Ermuedung (ATL) 1,6 pt gedaempft,
   Vorschau gestrichelt 5/4, „heute" 1 pt gepunktet 2/3, Ring am letzten Messpunkt. */
.ff path,
.ff line,
.ff circle {
  vector-effect: non-scaling-stroke;
}
.ff-ctl,
.ff-atl {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ff-ctl {
  stroke: var(--daten);
  stroke-width: calc(2.4 * var(--pt));
}
.ff-atl {
  stroke: var(--text-2);
  stroke-width: calc(1.6 * var(--pt));
}
.ff-vor {
  stroke-dasharray: calc(5 * var(--pt)) calc(4 * var(--pt));
}
.ff-heute {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.ff-ring {
  fill: var(--card);
  stroke: var(--daten);
  stroke-width: calc(2 * var(--pt));
}
.ff-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  margin-top: 2.4cqw;
  padding-top: 2.4cqw;
  border-top: 0.3cqw solid var(--line);
  font-size: 3cqw;
  color: var(--text-2);
}
.ff-cols b {
  display: block;
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5cqw;
}
.ff-cols small {
  font-size: 2.6cqw;
}
.ff-how {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3cqw;
  padding-top: 2.6cqw;
  border-top: 0.3cqw solid var(--line);
  font-size: 3.2cqw;
  color: var(--text-2);
}
.ff-how svg {
  width: 4cqw;
  height: 4cqw;
}

/* LEVEL-FENSTER (Wow-Blatt, hell — components/wow/WowBlatt.tsx, WowTeile.tsx grafikFarben(false);
   Vorlage: Simulator level_hell.png, 81. Chat). Hinter dem Blatt liegt der verschleierte Bildschirm. */
.app-level {
  background: linear-gradient(180deg, #9a9a9a 0%, #969697 60%, #8e8e92 100%);
}
.lv-conf {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 36%;
  height: 12%;
}
.lv-conf i {
  position: absolute;
  width: 1.4cqw;
  height: 2.2cqw;
  border-radius: 1cqw;
  opacity: 0;
}
.in .lv-conf i {
  animation: konfetti 1.6s var(--ease) forwards;
}
@keyframes konfetti {
  0% {
    opacity: 0;
    transform: translate3d(0, 30cqw, 0) rotate(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--dx), 0, 0) rotate(var(--r));
  }
}
.lv-sheet {
  position: absolute;
  left: 3.6cqw;
  right: 3.6cqw;
  bottom: 5cqw;
  padding: 6cqw 6cqw 4cqw;
  border-radius: 7cqw;
  background: radial-gradient(80% 55% at 50% 0%, rgba(105, 102, 255, 0.13), rgba(105, 102, 255, 0) 100%), var(--bg);
  border: 0.3cqw solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 calc(18 * var(--pt)) calc(34 * var(--pt)) rgba(20, 18, 74, 0.2);
}
/* lichtKante: 1 pt Linie oben, 24 pt vom Rand, zur Mitte hin Indigo */
.lv-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(24 * var(--pt));
  right: calc(24 * var(--pt));
  height: calc(1 * var(--pt));
  background: linear-gradient(90deg, rgba(98, 94, 255, 0), rgba(98, 94, 255, 0.45) 50%, rgba(98, 94, 255, 0));
}
.lv-bars {
  display: flex;
  align-items: flex-end;
  gap: 1.8cqw;
  height: 28cqw;
  margin-top: 4cqw;
}
.lv-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 1.8cqw;
  background: #dcdce3;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s var(--ease);
}
.lv-bars i.d {
  background: rgba(98, 94, 255, 0.3);
}
.lv-bars i.now {
  background: #625eff;
  box-shadow: 0 0 12cqw rgba(98, 94, 255, 0.55);
}
.in .lv-bars i {
  transform: scaleY(1);
}
.lv-bars i:nth-child(2) { transition-delay: 0.05s; }
.lv-bars i:nth-child(3) { transition-delay: 0.1s; }
.lv-bars i:nth-child(4) { transition-delay: 0.18s; }
.lv-bars i:nth-child(5) { transition-delay: 0.24s; }
.lv-bars i:nth-child(6) { transition-delay: 0.3s; }
.lv-bars i:nth-child(7) { transition-delay: 0.36s; }
.lv-cat {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16cqw;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 3cqw;
}
.lv-sub {
  margin-top: 2cqw;
  font-size: 3.2cqw;
  color: var(--text-2);
}
.lv-btn {
  display: block;
  margin-top: 4.4cqw;
  padding: 3.4cqw 0;
  border-radius: 3.4cqw;
  background: var(--cta);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 3.8cqw;
}
.lv-close {
  display: block;
  margin-top: 3.4cqw;
  text-align: center;
  font-size: 3.6cqw;
  font-weight: 600;
  color: var(--text-2);
}

/* Telefonreihe mit Bildunterschrift (Handy: Wischstreifen) */
.prow {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter) 24px;
  scrollbar-width: none;
}
.prow::-webkit-scrollbar {
  display: none;
}
.pfig {
  margin: 0;
  flex: none;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pfig .phone {
  --pw: min(72vw, 290px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 40px 90px rgba(20, 18, 74, 0.2),
    0 0 90px rgba(98, 94, 255, 0.14);
}
.pfig figcaption {
  max-width: min(72vw, 290px);
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.pfig figcaption b {
  display: block;
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 2px;
}

@media (min-width: 720px) {
  .prow {
    justify-content: center;
    gap: 48px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .pfig .phone {
    --pw: 300px;
  }
  .pfig figcaption {
    max-width: 300px;
  }
}
.t-hm {
  margin-top: 5cqw !important;
}
.t-mon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
  margin-top: 2.4cqw;
}
.t-mon div {
  padding: 3.4cqw;
  border-radius: 4.4cqw;
  background: var(--card);
  font-size: 3cqw;
  color: var(--text-2);
}
.t-mon b {
  display: block;
  margin-top: 1cqw;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 6.4cqw;
  color: var(--text);
}
.t-mon small {
  font-size: 3cqw;
  font-weight: 500;
  color: var(--text-2);
  margin-left: 0.8cqw;
}

/* ═══ PRAEZISIONS-PASS nach der Code-Auswertung (30.09.2026) ═══════════════
   --pt: 1 iOS-Punkt. Das Referenzgeraet ist 402 pt breit (1206 px @3x).
   Schrift in den Bildschirmen: SF Pro (Systemschrift), wie die App; Titel und
   Heldenzahlen: Space Grotesk. Werte aus lib/theme.ts, SCHRIFT-Rollen, Komponenten. */
.screen {
  --pt: calc(100cqw / 402);
  font-family: -apple-system, "SF Pro Text", system-ui, "Inter", sans-serif;
}
.screen .scr-label,
.screen .label {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 500;
  letter-spacing: calc(1 * var(--pt));
  color: var(--text-2);
}
/* Glas-Tab-Leiste (components/GlassTabBar.tsx) */
.screen .tabbar {
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  bottom: calc(42 * var(--pt));
  gap: calc(10 * var(--pt));
}
.screen .tabs {
  height: calc(69 * var(--pt));
  border-radius: calc(28 * var(--pt));
  padding: calc(9 * var(--pt)) calc(10 * var(--pt));
  background: var(--glas-grund);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 0.5px solid var(--glas-kante);
}
.screen .tab {
  position: relative;
  gap: calc(3 * var(--pt));
  padding: 0 calc(6 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.2 * var(--pt));
  color: var(--text-3);
  background: none;
}
.screen .tab svg {
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
  opacity: 0.85;
  stroke-width: 1.8;
}
.screen .tab.on {
  color: #625eff;
  background: none;
}
.screen .tab.on svg {
  opacity: 1;
  stroke-width: 2;
}
.screen .tab.on::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(-6 * var(--pt));
  width: calc(64 * var(--pt));
  height: calc(64 * var(--pt));
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 94, 255, 0.16), rgba(98, 94, 255, 0.056) 65%, rgba(98, 94, 255, 0) 100%);
}
.screen .orb-btn {
  width: calc(56 * var(--pt));
  height: calc(56 * var(--pt));
  background: var(--glas-grund);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid var(--glas-kante);
}
.screen .orb--sm {
  --s: calc(30 * var(--pt));
}
.orb--32 {
  --s: calc(32 * var(--pt));
}
.orb--28 {
  --s: calc(28 * var(--pt));
}
/* Coach-Blase (components/CoachBlase.tsx, CoachCard.tsx) */
.cb-row {
  display: flex;
  align-items: flex-end;
  gap: calc(10 * var(--pt));
  margin-top: calc(16 * var(--pt));
}
.cb-frame {
  position: relative;
  flex: 1;
  padding: calc(1.5 * var(--pt));
  border-radius: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt)) calc(6 * var(--pt));
  background: linear-gradient(135deg, var(--aurora-a), var(--aurora-b));
  overflow: hidden;
}
.cb-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(140 * var(--pt));
  background: linear-gradient(90deg, rgba(82, 80, 200, 0), var(--daten), rgba(82, 80, 200, 0));
  transform: translateX(calc(-140 * var(--pt)));
}
.is-answered .cb-band {
  animation: cbBand 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
@keyframes cbBand {
  0% {
    transform: translateX(calc(-140 * var(--pt)));
  }
  31%,
  100% {
    transform: translateX(calc(330 * var(--pt)));
  }
}
.cb-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pt));
  padding: calc(13 * var(--pt)) calc(15 * var(--pt));
  border-radius: calc(16.5 * var(--pt)) calc(16.5 * var(--pt)) calc(16.5 * var(--pt)) calc(4.5 * var(--pt));
  background: var(--coach-blase);
}
.cb-from {
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  font-weight: 600;
  letter-spacing: calc(0.2 * var(--pt));
  color: var(--link);
}
.cb-text {
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  color: var(--text);
}
.cb-from,
.cb-text {
  opacity: 0;
  transform: translateY(calc(8 * var(--pt)));
  transition: opacity 0.36s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.36s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.is-answered .cb-from,
.is-answered .cb-text {
  opacity: 1;
  transform: none;
}
.cb-dots {
  position: absolute;
  left: calc(15 * var(--pt));
  top: calc(16 * var(--pt));
  display: flex;
  gap: calc(4 * var(--pt));
  height: calc(14 * var(--pt));
  align-items: center;
  transition: opacity 0.36s;
}
.cb-dots i {
  width: calc(6 * var(--pt));
  height: calc(6 * var(--pt));
  border-radius: 50%;
  background: var(--link);
  animation: cbDot 1.74s infinite;
}
.cb-dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.cb-dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes cbDot {
  0% {
    opacity: 0.3;
    transform: translateY(0);
  }
  18% {
    opacity: 0.9;
    transform: translateY(calc(-3 * var(--pt)));
  }
  42%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
}
.is-answered .cb-dots {
  opacity: 0;
}
.cb-chips {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  margin: calc(10 * var(--pt)) 0 0 calc(42 * var(--pt));
  opacity: 0;
  transform: translateY(calc(6 * var(--pt)));
  transition: opacity 0.28s ease 0.3s, transform 0.28s ease 0.3s;
}
.is-answered .cb-chips {
  opacity: 1;
  transform: none;
}
.cb-chip {
  display: inline-flex;
  align-items: center;
  height: calc(34 * var(--pt));
  padding: 0 calc(13 * var(--pt));
  border-radius: 999px;
  border: 1px solid rgba(82, 80, 200, 0.35);
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  color: var(--link);
}
.cb-thumbs {
  margin-left: auto;
  display: inline-flex;
  gap: calc(4 * var(--pt));
  color: var(--text-2);
}
.cb-thumbs svg {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
  margin: 0 calc(6 * var(--pt));
}

/* Space Grotesk in der App ist „Medium" (SpaceGrotesk_500Medium) — auch Zahlen */
.screen .bignum,
.screen .greet,
.screen .score .n,
.screen .mon-v,
.screen .ff-n,
.screen .ff-cols b,
.screen .lv-cat,
.screen .tiles2 b,
.screen .tonight,
.screen .t-mon b,
.screen .sub-head,
.screen .g-title b {
  font-weight: 500;
}
.orb--28px {
  --s: 28px;
}
.msg--coach-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.msg--coach {
  background: var(--card);
  border: 0;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  font-size: 15px;
  line-height: 21px;
}
.card .msg--coach {
  background: var(--bg);
}
.msg--me {
  border-radius: 18px 18px 6px 18px;
  background: #625eff;
  max-width: 86%;
}
/* Chat-Blasen in Karten: `.card p:not(.screen p)` faerbt Absaetze grau (textSecondary) und war staerker als die
   Blasenfarbe — die Frage stand grau auf Indigo. Wie in der App: weisse Schrift auf brand.cta (4,60 : 1),
   Coach-Antwort in theme.text. */
.card .msg.msg--me {
  color: #fff;
}
.card .msg--coach-row .msg--coach {
  color: var(--text);
}

/* Icon-Knoepfe der Kopfzeilen */
.ib {
  flex: none;
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  border-radius: calc(11 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
  display: grid;
  place-items: center;
}
.ib svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

/* COACH-CHAT (app/(tabs)/coach.tsx) */
.ch-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  height: calc(50 * var(--pt));
  padding: 0 calc(20 * var(--pt));
}
.ch-title {
  flex: 1;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(22 * var(--pt));
  letter-spacing: calc(-0.4 * var(--pt));
}
.ch-body {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
  padding: calc(8 * var(--pt)) calc(20 * var(--pt));
}
.ub {
  color: #fff;
  align-self: flex-end;
  max-width: 86%;
  padding: calc(10 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(6 * var(--pt)) calc(18 * var(--pt));
  background: #625eff;
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
}
.ch-row {
  display: flex;
  align-items: flex-end;
  gap: calc(8 * var(--pt));
  max-width: 92%;
}
.cbub {
  padding: calc(10 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt)) calc(6 * var(--pt));
  background: var(--card);
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
}
.cbub ul {
  margin: calc(8 * var(--pt)) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(4 * var(--pt));
}
.cbub li {
  display: flex;
  gap: calc(8 * var(--pt));
}
.cbub li::before {
  content: "•";
  font-weight: 700;
  color: var(--link);
}
.cbub b {
  font-weight: 600;
}
.shim {
  background: linear-gradient(90deg, var(--text-2) 0%, var(--text-2) 38%, var(--text) 48%, var(--text) 52%, var(--text-2) 62%, var(--text-2) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shim 1.8s ease-in-out infinite;
}
@keyframes shim {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.ch-fb {
  display: flex;
  gap: calc(8 * var(--pt));
  margin-top: calc(6 * var(--pt));
}
.ch-fb span {
  padding: calc(4 * var(--pt)) calc(10 * var(--pt));
  border: 0.5px solid var(--line);
  border-radius: calc(8 * var(--pt));
  font-size: calc(13 * var(--pt));
}
.ch-follow p {
  font-size: calc(12.5 * var(--pt));
  letter-spacing: calc(0.2 * var(--pt));
  color: var(--text-3);
  margin-bottom: calc(2 * var(--pt));
}
.ch-follow span {
  display: flex;
  align-items: center;
  min-height: calc(46 * var(--pt));
  margin-top: calc(8 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
  font-size: calc(14.5 * var(--pt));
  line-height: calc(19 * var(--pt));
}
.ch-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(121 * var(--pt));
  display: flex;
  align-items: flex-end;
  gap: calc(10 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt)) calc(8 * var(--pt));
  background: var(--bg);
  border-top: 0.5px solid var(--line);
}
.ch-field {
  flex: 1;
  min-height: calc(44 * var(--pt));
  padding: calc(11 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
  font-size: calc(16 * var(--pt));
  color: var(--text-3);
}
.ch-send {
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 50%;
  background: #625eff;
  display: grid;
  place-items: center;
}
.ch-send svg {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}
/* Ablauf: Frage → denkt → Antwort streamt → Rueckmeldung. Ohne JavaScript steht
   der fertige Verlauf da (ohne den Denk-Zwischenstand). */
.app-chat:not(.c2) .ch-think,
.js .app-chat .ub,
.js .app-chat .ch-think,
.js .app-chat .ch-ans,
.js .app-chat .ch-fb,
.js .app-chat .ch-follow {
  display: none;
}
.app-chat.c1 .ub {
  display: block;
  animation: pop 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.app-chat.c2 .ch-think {
  display: flex;
  animation: pop 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.app-chat.c3 .ch-think {
  display: none;
}
.app-chat.c3 .ch-ans {
  display: flex;
}
.app-chat.c4 .ch-fb,
.app-chat.c4 .ch-follow {
  display: block;
  animation: pop 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.app-chat.c4 .ch-fb {
  display: flex;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(calc(10 * var(--pt))) scale(0.96);
  }
}
#stream .w.on {
  animation: wortEin 0.12s ease-out;
}
@keyframes wortEin {
  from {
    opacity: 0;
  }
}

/* FAHRT-DETAIL (app/activity/[id].tsx) */
.sub-head2 {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(8 * var(--pt)) calc(18 * var(--pt));
}
.sub-head2 .ib {
  width: calc(38 * var(--pt));
  height: calc(38 * var(--pt));
}
.st {
  flex: 1;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(22 * var(--pt));
  letter-spacing: calc(-0.4 * var(--pt));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rmap {
  position: relative;
  height: calc(230 * var(--pt));
  margin: calc(4 * var(--pt)) calc(20 * var(--pt)) 0;
  border-radius: calc(16 * var(--pt));
  border: 0.5px solid var(--line);
  overflow: hidden;
}
.rmap svg {
  width: 100%;
  height: 100%;
}
.rmap-x {
  position: absolute;
  top: calc(10 * var(--pt));
  right: calc(10 * var(--pt));
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  border-radius: calc(8 * var(--pt));
  background: var(--bg);
  opacity: 0.92;
  border: 0.5px solid var(--line);
  display: grid;
  place-items: center;
}
.rmap-x svg {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
}
.rdate {
  margin: calc(14 * var(--pt)) calc(20 * var(--pt)) 0;
  font-size: calc(13.5 * var(--pt));
  color: var(--text-2);
}
.rtiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(10 * var(--pt)) calc(20 * var(--pt)) 0;
}
.rt {
  width: 33.33%;
  padding: calc(12 * var(--pt)) calc(8 * var(--pt)) calc(12 * var(--pt)) 0;
}
.rt b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(21 * var(--pt));
  letter-spacing: calc(-0.4 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.rt small {
  font-size: calc(12 * var(--pt));
  font-weight: 400;
  color: var(--text-2);
}
.rt span {
  display: block;
  margin-top: calc(2 * var(--pt));
  font-size: calc(11.5 * var(--pt));
  color: var(--text-2);
}
.rprov {
  margin: 0 calc(20 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: calc(17 * var(--pt));
  color: var(--text-3);
}
.r1 {
  margin: calc(24 * var(--pt)) calc(20 * var(--pt));
  padding: calc(20 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: var(--card);
}
.r1 b {
  display: block;
  margin-top: calc(4 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(32 * var(--pt));
  line-height: calc(34 * var(--pt));
  letter-spacing: calc(-0.4 * var(--pt));
}
.r1 p {
  margin-top: calc(12 * var(--pt));
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  color: var(--text-2);
}
.r1 .r1-do {
  padding-left: calc(12 * var(--pt));
  border-left: calc(3 * var(--pt)) solid #625eff;
  font-weight: 600;
  color: var(--text);
}

/* Kleine App-Bausteine in Karten („Rund um die Fahrt") — 1 pt = Kartenbreite / 362 */
.mini {
  margin-top: 16px;
  container-type: inline-size;
}
.mini-scr {
  --pt: calc(100cqw / 362);
  height: auto;
  border-radius: 16px;
  padding: calc(16 * var(--pt));
  background: var(--bg);
  overflow: visible;
}
.mini .cb-from,
.mini .cb-text,
.mini .cb-chips {
  opacity: 1;
  transform: none;
}
.mini .cb-band {
  animation: cbBand 4.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s infinite;
}
.mem-card {
  border-radius: calc(18 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
  overflow: hidden;
}
.mem-r {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
  font-size: calc(14.5 * var(--pt));
  line-height: calc(20 * var(--pt));
}
.mem-r + .mem-r {
  border-top: 0.5px solid var(--line);
}
.mem-r span {
  flex: 1;
}
.mem-r svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
  margin: 0 calc(6 * var(--pt));
  flex: none;
}
.pfig--solo {
  align-items: center;
}

/* ═══ STORY-BILDSCHIRME exakt nach dem App-Code (30.09.2026, zweiter Pass) ═══
   Woche (availability.tsx, DayTimeSlider, KeilRegler, VolumeConsequence),
   Einheit (workout/[id].tsx, WorkoutCard, FuelingRow, WorkoutForecast, EinheitAktionen),
   Plan-Tab (calendar.tsx, Zusammenfassungskarte, RoutenKomet). Alles in --pt.   */
@property --a {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.sv .sub-head2 .hshare {
  flex: none;
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}

/* 1 WOCHENPLANUNG */
.av-body {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--pt));
  padding: calc(8 * var(--pt)) calc(20 * var(--pt)) 0;
}
.av-sub {
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  color: var(--text-2);
}
.av-rows {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pt));
}
.av-r {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
}
.av-d {
  flex: none;
  width: calc(38 * var(--pt));
  font-size: calc(14 * var(--pt));
  font-weight: 600;
}
.keil {
  position: relative;
  flex: 1;
  height: calc(32 * var(--pt));
  display: flex;
  align-items: center;
  transition: --a 0.8s var(--ease);
}
.kk {
  position: relative;
  width: 100%;
  height: calc(8 * var(--pt));
  border-radius: calc(4 * var(--pt));
  background: var(--line);
  overflow: hidden;
}
.kk i {
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--balken-kante);
  border-radius: calc(4 * var(--pt));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--a) * 100%);
  background: #625eff;
}
.is-rest .kk i {
  background: var(--line);
  box-shadow: none;
}
/* Der Keil: links ein Fuenftel der Hoehe, rechts voll und rund; waechst beim Greifen
   in 250 ms linear aus der Kapsel (scaleY 8/32), zurueck in 315 ms nach 90 ms. */
.kw {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #625eff calc(var(--a) * 100%), var(--line) 0);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  border-radius: 0 calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
  transform: scaleY(0.25);
  opacity: 0;
  transition: transform 0.315s linear 0.09s, opacity 0.08s linear 0.33s;
}
.av-r.grip .kw {
  transform: none;
  opacity: 1;
  transition: transform 0.25s linear, opacity 0.0625s linear;
}
.keil b {
  position: absolute;
  z-index: 2;
  top: calc(6 * var(--pt));
  left: calc(var(--a) * 100%);
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
  margin-left: calc(-10 * var(--pt));
  border-radius: 50%;
  background: var(--bg);
  border: calc(3 * var(--pt)) solid var(--text);
}
.av-v {
  flex: none;
  width: calc(70 * var(--pt));
  text-align: right;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(15 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.av-v.rest {
  color: var(--text-3);
}
.av-card {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--pt));
  padding: calc(18 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
}
.av-card .scr-label {
  margin: calc(24 * var(--pt)) 0 calc(8 * var(--pt));
  text-transform: uppercase;
}
.av-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
}
.av-kv + .av-kv {
  margin-top: calc(-2 * var(--pt));
}
.av-kv span {
  flex: 1;
  font-size: calc(14 * var(--pt));
  line-height: calc(19 * var(--pt));
  color: var(--text-2);
}
.av-kv b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(20 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.av-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(12 * var(--pt)) calc(18 * var(--pt)) calc(28 * var(--pt));
  border-top: 0.5px solid var(--line);
  background: var(--bg);
}
.av-save {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(48 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--card);
  color: var(--text-3);
  font-size: calc(15 * var(--pt));
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s;
}
.av-save.on {
  background: #625eff;
  color: #fff;
}

/* 2 EINHEIT */
.wd {
  display: flex;
  flex-direction: column;
  padding: calc(8 * var(--pt)) calc(20 * var(--pt)) 0;
}
.wd-card {
  display: flex;
  border-radius: calc(18 * var(--pt));
  background: var(--card);
  overflow: hidden;
}
.zstrip {
  flex: none;
  align-self: stretch;
  width: calc(6 * var(--pt));
}
.wd-in {
  flex: 1;
  min-width: 0;
  padding: calc(16 * var(--pt));
  border: 0.5px solid var(--line);
  border-left: calc(3 * var(--pt)) solid var(--z5-strich);
  border-radius: calc(18 * var(--pt));
}
.wd-type {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.wd-type i {
  width: calc(9 * var(--pt));
  height: calc(9 * var(--pt));
  border-radius: calc(3 * var(--pt));
}
.wd-title {
  margin-top: calc(8 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
}
.ivp {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--pt));
  height: calc(64 * var(--pt));
  margin: calc(12 * var(--pt)) 0 calc(4 * var(--pt));
}
.ivp i {
  flex-basis: 0;
  min-width: calc(3 * var(--pt));
  border-radius: calc(3 * var(--pt)) calc(3 * var(--pt)) 0 0;
}
.wd-stats {
  display: flex;
  margin-top: calc(8 * var(--pt));
  border-top: 0.5px solid var(--line);
}
.wd-stats > div {
  flex: 1;
  padding: calc(12 * var(--pt)) 0 calc(2 * var(--pt));
  text-align: center;
}
.wd-stats > div + div {
  border-left: 0.5px solid var(--line);
}
.wd-stats b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(19 * var(--pt));
  line-height: calc(23 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
}
.wd-stats small {
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-weight: 400;
  font-size: calc(11 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.wd-stats span {
  display: block;
  margin-top: calc(1 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.wd-sec {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  margin-top: calc(12 * var(--pt));
  padding-top: calc(12 * var(--pt));
  border-top: 0.5px solid var(--line);
}
.wd-lbl {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 500;
  letter-spacing: calc(1 * var(--pt));
  text-transform: uppercase;
  color: var(--text-3);
}
.wd-why {
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
}
.trig {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--pt));
  margin-top: calc(10 * var(--pt));
}
.trig span {
  padding: calc(4 * var(--pt)) calc(9 * var(--pt));
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--bg);
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  font-weight: 500;
  color: var(--text-2);
}
.fuel2 {
  display: flex;
  gap: calc(10 * var(--pt));
  margin-top: calc(12 * var(--pt));
}
.fuel2 > div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  padding: calc(10 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--bg);
}
.fuel2 svg {
  flex: none;
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
}
.fuel2 span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fuel2 b {
  font-size: calc(14 * var(--pt));
  line-height: calc(17 * var(--pt));
  font-weight: 500;
}
.fuel2 small {
  margin-top: calc(1 * var(--pt));
  font-size: calc(10.5 * var(--pt));
  color: var(--text-2);
}
.fuel2 em {
  margin-top: calc(2 * var(--pt));
  font-style: normal;
  font-size: calc(10.5 * var(--pt));
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wd-exp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(8 * var(--pt));
}
.wd-exp b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(14.5 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.wd-exp span {
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  color: var(--text-2);
}
.wd-place {
  display: flex;
  gap: calc(8 * var(--pt));
  margin-top: calc(18 * var(--pt));
}
.wd-place span,
.wd-move,
.wd-menu {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  border: 0.5px solid var(--line);
  border-radius: calc(8 * var(--pt));
  background: var(--bg);
  font-size: calc(13 * var(--pt));
  font-weight: 500;
}
.wd-place span {
  padding: calc(10 * var(--pt)) calc(12 * var(--pt));
  color: var(--text-2);
}
.wd-place span.on {
  background: #625eff;
  border-color: #625eff;
  color: #fff;
}
.wd-place svg,
.wd-move svg {
  width: calc(15 * var(--pt));
  height: calc(15 * var(--pt));
}
.wd-acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(12 * var(--pt));
}
.wd-move {
  gap: calc(7 * var(--pt));
  min-height: calc(44 * var(--pt));
  padding: calc(8 * var(--pt)) calc(12 * var(--pt));
}
.wd-menu {
  justify-content: center;
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
}
.wd-menu svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

/* 4 PLAN-TAB */
.pl-light {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: calc(380 * var(--pt));
  background: linear-gradient(180deg, rgba(105, 102, 255, 0.26) 0%, rgba(105, 102, 255, 0.158) 30%, rgba(105, 102, 255, 0.046) 60%, rgba(105, 102, 255, 0) 79%);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}
.sv.pl-wipe .pl-light {
  animation: plWipe 0.7s cubic-bezier(0.65, 0, 0.35, 1) both, plAtmen 6s ease-in-out 0.7s infinite;
}
@keyframes plWipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes plAtmen {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
.sv[data-sv="3"] > :not(.pl-light):not(.tabbar) {
  position: relative;
  z-index: 1;
}
.kopf2 {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  height: calc(48 * var(--pt));
  padding: 0 calc(18 * var(--pt));
}
.kopf2 .av {
  flex: none;
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  margin: 0 calc(2 * var(--pt));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d1d1d6, #aeaeb2);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
}
.glas {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  margin: 0 calc(1 * var(--pt));
  border-radius: 50%;
  background: var(--glas-tint);
  border: 0.5px solid var(--glas-kante);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glas svg {
  width: calc(19 * var(--pt));
  height: calc(19 * var(--pt));
}
.kopf2 .wm {
  position: absolute;
  left: 50%;
  top: 50%;
  height: calc(18 * var(--pt));
  transform: translate(-50%, -50%);
}
.k2-today {
  margin-left: auto;
  padding: calc(6 * var(--pt)) calc(14 * var(--pt));
  border-radius: 999px;
  border: 0.5px solid #625eff;
  color: var(--link);
  font-size: calc(14 * var(--pt));
  font-weight: 600;
  letter-spacing: calc(0.2 * var(--pt));
}
.seg2 {
  display: flex;
  gap: calc(3 * var(--pt));
  width: calc(220 * var(--pt));
  margin: 0 auto calc(10 * var(--pt));
  padding: calc(3 * var(--pt));
  border-radius: calc(12 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--card);
}
.seg2 span {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: calc(44 * var(--pt));
  border-radius: calc(9 * var(--pt));
  font-size: calc(14 * var(--pt));
  font-weight: 500;
  color: var(--text-2);
}
.seg2 span.on {
  background: #625eff;
  color: #fff;
}
.pnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--pt));
  padding-bottom: calc(8 * var(--pt));
}
.pn-a {
  display: grid;
  place-items: center;
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
}
.pn-a svg {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}
.pn-t {
  display: flex;
  align-items: baseline;
  padding: 0 calc(8 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(17 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
}
.pn-t b {
  font-weight: 500;
}
.pn-t em {
  font-style: normal;
  color: var(--link);
}
.pn-t svg {
  align-self: center;
  width: calc(15 * var(--pt));
  height: calc(15 * var(--pt));
  margin-left: calc(5 * var(--pt));
}
.mchips2 {
  display: flex;
  gap: calc(8 * var(--pt));
  padding: 0 calc(12 * var(--pt)) calc(10 * var(--pt));
}
.mchips2 span {
  padding: calc(7 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--card);
  font-size: calc(13 * var(--pt));
  font-weight: 500;
  color: var(--text-2);
}
.mchips2 span.on {
  background: var(--text);
  color: var(--bg);
}
.wdays {
  display: flex;
  padding: 0 calc(12 * var(--pt)) calc(4 * var(--pt));
}
.wdays span {
  flex: 1;
  text-align: center;
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-3);
}
.mgrid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 calc(12 * var(--pt));
}
.dc {
  width: calc(100% / 7);
  aspect-ratio: 1 / 1.05;
  display: grid;
  grid-template-rows: calc(30 * var(--pt)) calc(6 * var(--pt));
  row-gap: calc(5 * var(--pt));
  align-content: center;
  justify-items: center;
}
.dc b {
  display: grid;
  place-items: center;
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
  border-radius: 50%;
  border: calc(1.5 * var(--pt)) solid transparent;
  font-weight: 400;
  font-size: calc(15 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.dc.sel b {
  border-color: #625eff;
}
.dc.today b {
  color: #fff;
  background: #625eff;
  font-family: var(--f-display);
  font-weight: 500;
}
.dc i {
  align-self: center;
}
.mk-dot {
  width: calc(6 * var(--pt));
  height: calc(6 * var(--pt));
  border-radius: 50%;
  background: var(--text-3);
}

.mk-moon {
  width: calc(9 * var(--pt));
  height: calc(9 * var(--pt));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%236C6C71'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-bar {
  width: calc(15 * var(--pt));
  height: calc(4 * var(--pt));
  border-radius: calc(2 * var(--pt));
}
.pdate {
  margin: calc(14 * var(--pt)) calc(16 * var(--pt)) calc(12 * var(--pt)) calc(18 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(16 * var(--pt));
  line-height: calc(20 * var(--pt));
}
.zk {
  display: flex;
  margin: 0 calc(16 * var(--pt));
  border-radius: calc(18 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--card);
  overflow: hidden;
}
.zk-c {
  flex: 1;
  min-width: 0;
  padding: calc(14 * var(--pt)) calc(8 * var(--pt)) calc(14 * var(--pt)) calc(16 * var(--pt));
}
.zk-t {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
}
.zk-s {
  margin-top: calc(4 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-2);
}
.ivp--mini {
  height: calc(18 * var(--pt));
  margin: calc(8 * var(--pt)) 0 0;
  opacity: 0.9;
}
.zk-k {
  display: flex;
  margin-top: calc(12 * var(--pt));
  padding-top: calc(8 * var(--pt));
  border-top: 0.5px solid var(--line);
}
.zk-k > div {
  flex: 1;
}
.zk-k b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(16 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
  white-space: nowrap;
}
.zk-k span {
  display: block;
  margin-top: calc(1 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-3);
}
.zk-route {
  flex: none;
  align-self: center;
  width: calc(64 * var(--pt));
  height: calc(44 * var(--pt));
  margin-right: calc(4 * var(--pt));
  overflow: visible;
}
.zk-route .comet {
  stroke-dasharray: 0 2;
  opacity: 0;
}
.zk-r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(12 * var(--pt)) calc(12 * var(--pt)) calc(12 * var(--pt)) calc(4 * var(--pt));
}
.zk-ck {
  display: grid;
  place-items: center;
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
  border-radius: 50%;
  background: #3dba1e;
}
.zk-ck svg {
  width: calc(12 * var(--pt));
  height: calc(12 * var(--pt));
}
.zk-r .orb {
  margin-top: calc(10 * var(--pt));
}
.zk-dots {
  display: grid;
  place-items: center;
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  margin-top: calc(8 * var(--pt));
}
.zk-dots svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

/* Coach-Chat: der Orb „denkt" (Augen 0.12 × Groesse hoeher), die Antwort streamt
   wortweise — die Blase waechst mit dem Text, wie in der App. */
.orb.denkt .augen {
  margin-top: calc(var(--s) * -0.12);
}
.cbub > p + p {
  margin-top: calc(8 * var(--pt));
}
.js #stream.streaming .w {
  display: none;
  opacity: 1;
}
.js #stream.streaming .w.on {
  display: inline;
}
.js #stream.streaming li:not(.on),
.js #stream.streaming ul:not(:has(li.on)) {
  display: none;
}

/* ═══ RUND UM DIE FAHRT — exakte Mini-Bausteine (1 pt = Kartenbreite / 362) ═══ */
.ar-card {
  display: flex;
  flex-direction: column;
}
.ar-card > p {
  padding-bottom: 16px;
}
.ar-card .mini {
  margin-top: auto;
}
.ar-card .privacy {
  margin-top: 12px;
}
.mini-scr p {
  color: var(--text);
}
.mini-scr .cb-from {
  color: var(--link);
}

/* Community — Reiterleiste (Reiterleiste.tsx) + Beitrag (FeedCard.tsx) */
.mini-scr .fd-tabs {
  display: flex;
  gap: calc(24 * var(--pt));
  margin: calc(-6 * var(--pt)) calc(-16 * var(--pt)) calc(14 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  border-bottom: 0.5px solid var(--line);
  overflow: hidden;
}
.fd-tabs span {
  position: relative;
  flex: none;
  padding: calc(10 * var(--pt)) 0;
  font-size: calc(15.5 * var(--pt));
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.fd-tabs span.on {
  color: var(--text);
}
.fd-tabs span.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2 * var(--pt));
  border-radius: calc(2 * var(--pt));
  background: #625eff;
}
.fd-card {
  padding: calc(16 * var(--pt));
  border-radius: calc(20 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--card);
}
.fd-kopf {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
}
.fd-av {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  border-radius: 50%;
  border: 0.5px solid var(--line);
  background: var(--bg);
  color: var(--text-2);
  font-size: calc(16 * var(--pt));
  font-weight: 600;
}
.fd-wer {
  flex: 1;
  min-width: 0;
}
.fd-wer b {
  display: block;
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  font-weight: 600;
}
.fd-wer span {
  display: block;
  margin-top: calc(1 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-3);
}
.mini-scr .fd-titel {
  margin-top: calc(12 * var(--pt));
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
  font-weight: 600;
}
.fd-medien {
  display: flex;
  gap: calc(6 * var(--pt));
  margin-top: calc(12 * var(--pt));
  overflow: hidden;
}
.fd-feld {
  flex: 0 0 78%;
  height: calc(150 * var(--pt));
  border-radius: calc(14 * var(--pt));
  overflow: hidden;
  background: var(--karte-land);
}
.fd-feld svg,
.fd-feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-zahlen {
  display: flex;
  margin-top: calc(14 * var(--pt));
}
.fd-zahlen div {
  flex: 1;
}
.fd-zahlen b {
  display: block;
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fd-zahlen span {
  display: block;
  margin-top: calc(2 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-3);
}
.fd-liker {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  margin-top: calc(12 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-2);
}
.fd-gesichter {
  display: flex;
}
.fd-gesichter i {
  display: grid;
  place-items: center;
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
  border-radius: 50%;
  border: calc(1.5 * var(--pt)) solid var(--card);
  background: var(--bg);
  font-style: normal;
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  color: var(--text-2);
}
.fd-gesichter i + i {
  margin-left: calc(-6 * var(--pt));
}
.fd-fuss {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--pt));
  margin-top: calc(12 * var(--pt));
}
.fd-herz,
.fd-komm {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  padding: calc(4 * var(--pt)) 0;
}
.fd-komm {
  gap: calc(6 * var(--pt));
}
.fd-herz svg {
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
}
.fd-komm svg {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}
.fd-herz b {
  font-size: calc(14 * var(--pt));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fd-komm b {
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  color: var(--text-2);
}

/* Wetter — WetterKarte.tsx, WetterFlaeche, WetterStunden (Fassung B), WetterQuelle */
.wk {
  position: relative;
  border-radius: calc(20 * var(--pt));
  border: 0.5px solid var(--line);
  background: var(--card);
  overflow: hidden;
}
.wk-l1,
.wk-l2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wk-l1 {
  top: -46%;
  right: -18%;
  width: calc(280 * var(--pt));
  height: calc(280 * var(--pt));
  background: radial-gradient(closest-side, rgba(122, 90, 232, 0.45), rgba(122, 90, 232, 0) 65%);
}
.wk-l2 {
  bottom: -48%;
  left: -24%;
  width: calc(250 * var(--pt));
  height: calc(250 * var(--pt));
  background: radial-gradient(closest-side, rgba(0, 143, 176, 0.12), rgba(0, 143, 176, 0) 65%);
}
.wk-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: calc(16 * var(--pt));
}
.wk-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(8 * var(--pt));
}
.wk-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--pt));
}
.mini-scr .wk-ort {
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  font-weight: 600;
}
.mini-scr .wk-bed {
  margin-top: calc(1 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.mini-scr .wk-urteil {
  margin-top: calc(24 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
}
.wk-rechts {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
}
.wk-sym {
  width: calc(38 * var(--pt));
  height: calc(38 * var(--pt));
}
.wk-grad {
  font-family: -apple-system, "SF Pro Display", system-ui, "Inter", sans-serif;
  font-size: calc(56 * var(--pt));
  line-height: calc(56 * var(--pt));
  font-weight: 200;
  letter-spacing: calc(-2 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.mini-scr .wk-blase {
  margin-top: calc(4 * var(--pt));
}
.wk-std {
  border-radius: calc(14 * var(--pt));
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.wk-std-in {
  position: relative;
  display: flex;
  padding: calc(12 * var(--pt)) calc(8 * var(--pt));
}
.wk-bogen {
  position: absolute;
  left: 0;
  top: calc(12 * var(--pt));
  height: calc(72 * var(--pt));
  max-width: none;
  pointer-events: none;
}
.wk-h {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--pt));
  width: calc(52 * var(--pt));
  padding: calc(3 * var(--pt)) 0;
  border-radius: calc(6 * var(--pt));
}
.wk-h.on {
  background: rgba(86, 83, 224, 0.18);
}
.wk-h > span {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  /* „08 Uhr" (de) ist als Pille ~1,7 pt breiter als die 52-pt-Spalte — einzeilig lassen, sie ragt
     mittig knapp über (gemessen 01.10.2026; App-Fund an Per: dort bricht sie vermutlich um). */
  white-space: nowrap;
}
.wk-h > span.wk-now {
  padding: calc(1 * var(--pt)) calc(7 * var(--pt));
  border-radius: 999px;
  background: var(--aurora-a);
  color: #fff;
  font-weight: 600;
}
.wk-h svg {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}
.wk-h b {
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mini-scr .wk-q {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(4 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.wk-q u {
  color: var(--text);
}

/* Rennplan — RacePlanCard.tsx (ohne Hoehenprofil: in der App nicht gebaut) */
.rp {
  padding: calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt));
  border: 0.5px solid rgba(184, 129, 0, 0.333);
  background: var(--card);
}
.mini-scr .rp-lbl {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 500;
  letter-spacing: calc(1 * var(--pt));
  text-transform: uppercase;
  color: var(--text-2);
}
.mini-scr .rp-abs {
  margin: calc(18 * var(--pt)) 0 calc(8 * var(--pt));
}
.mini-scr .rp-kopf {
  margin-top: calc(8 * var(--pt));
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
  font-weight: 500;
}
.mini-scr .rp-ziel {
  margin-top: calc(12 * var(--pt));
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  font-weight: 500;
  white-space: pre-wrap;
}
.mini-scr .rp-hin {
  margin-top: calc(4 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-2);
}
.mini-scr .rp-m {
  color: var(--text-3);
}
.rp-z {
  display: flex;
  gap: calc(10 * var(--pt));
  margin-bottom: calc(12 * var(--pt));
}
.rp-z > b {
  flex: none;
  width: calc(18 * var(--pt));
  text-align: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(17 * var(--pt));
  /* Im Hellen der Schrift-Token goldText #8C6200 (4,87 : 1 auf card). RacePlanCard.tsx nimmt theme.gold, die
     Flaechenfarbe — im Hellen nur 3,05 : 1 (an Per gemeldet, 01.10.2026). */
  color: #8c6200;
}
.rp-z > div {
  flex: 1;
  min-width: 0;
}
.mini-scr .rp-wo {
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  font-weight: 600;
}
.mini-scr .rp-w {
  margin-top: calc(2 * var(--pt));
  font-size: calc(15 * var(--pt));
  line-height: calc(19 * var(--pt));
  letter-spacing: calc(-0.2 * var(--pt));
  font-weight: 500;
}
.rp-gr {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  margin-top: calc(16 * var(--pt));
  padding-top: calc(12 * var(--pt));
  border-top: 0.5px solid var(--line);
}
.mini-scr .rp-gr p {
  font-size: calc(13 * var(--pt));
  line-height: calc(18 * var(--pt));
  letter-spacing: calc(0.3 * var(--pt));
  color: var(--text-3);
}

/* Export — nativer iOS-Dialog (Alert.alert) ueber der Einheit. Das Systembild
   ist iOS 26 nachempfunden; eine Simulator-Aufnahme gibt es dafuer noch nicht. */
.mini-scr .ex-typ {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.ex-typ i {
  width: calc(9 * var(--pt));
  height: calc(9 * var(--pt));
  border-radius: calc(3 * var(--pt));
  background: var(--z5-strich);
}
.mini-scr .ex-titel {
  margin-top: calc(8 * var(--pt));
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
}
.ex-ivp {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--pt));
  height: calc(64 * var(--pt));
  margin-top: calc(12 * var(--pt));
}
.ex-ivp i {
  flex-basis: 0;
  min-width: calc(3 * var(--pt));
  border-radius: calc(3 * var(--pt)) calc(3 * var(--pt)) 0 0;
}

/* Gedaechtnis — app/settings/memory.tsx */
.mini-scr .mem-l {
  margin-bottom: calc(8 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 500;
  letter-spacing: calc(1 * var(--pt));
  text-transform: uppercase;
  color: var(--text-2);
}

/* Wochenrueckblick in der Coach-Blase (lib/tages-momente-text.ts wochenZahlen, CoachBlase.tsx
   „Fassung C"): drei Zahlen ueber dem Satz, die positive Fitness-Aenderung in Gruen. */
.cb-zahlen {
  display: flex;
  gap: calc(14 * var(--pt));
  margin-top: calc(1 * var(--pt));
}
.cb-zahlen > div {
  flex: 1;
  min-width: 0;
}
.cb-zahlen b {
  display: block;
  font-size: calc(22 * var(--pt));
  line-height: calc(26 * var(--pt));
  letter-spacing: calc(-0.3 * var(--pt));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cb-zahlen b.gut {
  /* Im Hellen der Schrift-Token blaseGut #167600 (4,51 : 1 auf der Blase). CoachBlase.tsx nimmt hier score.good
     #3DBA1E — im Hellen nur 1,99 : 1 (an Per gemeldet, 01.10.2026). */
  color: #167600;
}
.cb-zahlen span {
  display: block;
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}

/* ═══ PARTNER — die echten, freigegebenen Logos der App (assets/marken, lib/marken.ts) ═══
   Wie MarkenLogo.tsx: App-Symbol-Form (Radius 25 %), vollflaechige Symbole bis zur Kante mit
   Haarlinie, freigestellte Bildmarken (Polar, WHOOP) auf Weiss mit Luft, Apple Health als eigenes
   Verlaufsherz ohne Flaeche (Apples Symbol darf keine fremde App zeigen), .fit-Import als Peakfy-Kachel. */
.pt-ic {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 25%;
  overflow: hidden;
  border: 0.5px solid var(--line);
  background: var(--bg);
}
.pt-ic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pt-ic--ohne {
  border: 0;
  background: none;
  overflow: visible;
}
.pt-ic--ohne svg {
  width: 100%;
  height: 100%;
}
.pt-ic--peakfy {
  background: #625eff;
  border-color: #625eff;
}
.pt-ic--peakfy svg {
  width: 56%;
  height: 56%;
}
/* Laufband unter dem Hero: kleine Logos in den Kapseln */
.src--logo {
  gap: 10px;
  padding: 0 16px 0 6px;
  height: 44px;
}
.src--logo .pt-ic {
  width: 32px;
  height: 32px;
}
.src--logo .pt-ic--ohne {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}
/* Verbindungen: ein Raster aus Partner-Kacheln, alle gleichrangig */
.partner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
}
.pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 8px 18px;
  border-radius: 20px;
  background: var(--card);
  text-align: center;
}
.pt b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
}
@media (min-width: 720px) {
  .partner {
    grid-template-columns: repeat(5, 1fr);
  }
  .pt-ic {
    width: 64px;
    height: 64px;
  }
}
@media (min-width: 1000px) {
  .partner {
    grid-template-columns: repeat(9, 1fr);
  }
}

/* Export: die Einheit geht als Datei zu Garmin (.fit), zu Zwift (.zwo) oder an einen Freund —
   genau die drei Wege der App (EinheitAktionen.tsx). Garmin und Peakfy mit echtem Logo;
   fuer Zwift liegt kein freigegebenes Logo vor, dort steht ein neutrales Symbol. */
.ex2 {
  display: flex;
  flex-direction: column;
}
.ex2-karte {
  display: flex;
  border-radius: calc(18 * var(--pt));
  background: var(--card);
  overflow: hidden;
}
.ex2-in {
  flex: 1;
  min-width: 0;
  padding: calc(16 * var(--pt));
  border: 0.5px solid var(--line);
  border-left: calc(3 * var(--pt)) solid var(--z5-strich);
  border-radius: calc(18 * var(--pt));
}
.ex2-weg {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  margin: calc(16 * var(--pt)) 0 calc(14 * var(--pt));
}
.ex2-weg span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(98, 94, 255, 0), rgba(98, 94, 255, 0.6), rgba(98, 94, 255, 0));
}
.ex2-weg em {
  font-style: normal;
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 500;
  letter-spacing: calc(1 * var(--pt));
  text-transform: uppercase;
  color: var(--text-2);
}
.ex2-ziele {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(10 * var(--pt));
}
.ex2-z {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--pt));
  padding: calc(14 * var(--pt)) calc(6 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--card);
  border: 0.5px solid var(--line);
  text-align: center;
}
.ex2-z small {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: calc(0.4 * var(--pt));
  color: var(--text-2);
}
.ex2 .ex-ivp {
  margin-bottom: 0;
}
.js .ex2-z {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js .in .ex2-z {
  opacity: 1;
  transform: none;
}
.js .in .ex2-z:nth-child(2) {
  transition-delay: 0.12s;
}
.js .in .ex2-z:nth-child(3) {
  transition-delay: 0.24s;
}

/* Profi-Video: Abdunkeln am Schleifenpunkt (app.js 8); auf dem Handy die Fahrer im Bild halten */
.pros video {
  object-position: 62% 50%;
}
.pros video,
#heroVideo {
  transition: opacity 0.5s var(--ease-io);
}
.pros video.dip,
#heroVideo.dip {
  opacity: 0.12;
}

/* Offizielle Store-Badges (Apple: tools.applemediaservices.com, Google: play.google.com/intl/en_us/badges),
   unveraendert und gleich hoch. Google Play kommt spaeter: das Badge bleibt original, daneben das Etikett. */
.badge {
  position: relative;
  display: inline-flex;
  flex: none;
}
.badge img {
  display: block;
  height: 48px;
  width: auto;
}
.badge--bald {
  cursor: default;
}
.badge--bald em {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* ═══ ORIGINAL-WORTMARKEN der Partner (Presse-/Markenseiten der Hersteller, unveraendert; Wahoo als
   eingebettetes SVG mit currentColor, wie auf wahoofitness.com). Je Marke eine optisch abgeglichene Hoehe. */
.wm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.wm img,
.wm svg {
  display: block;
  height: calc(var(--h) * var(--s, 1));
  width: auto;
  max-width: none;
}
.wm--garmin { --h: 40px; } /* die Datei traegt Garmins Schutzraum mit (Inhalt 37 % der Hoehe) */
.wm--whoop { --h: 15px; }
.wm--polar { --h: 15px; }
.wm--wahoo { --h: 19px; }
.wm--wahoo svg { width: calc(var(--h) * var(--s, 1) * 273 / 67); }
.wm--coros { --h: 23.5px; } /* dunkles Original fuellt die Datei ganz (das weisse hatte 6 % Rand) */
.wm--suunto { --h: 25px; }
.wm--suunto img { width: calc(var(--h) * var(--s, 1) * 150 / 49); }

/* Laufband: Wortmarken in schlanken Kapseln */
.src--logo.src--wm {
  --s: 0.78;
  padding: 0 22px;
}
.src--logo.src--text b {
  font-weight: 500;
}
.src--logo .pt-ic--ohne img {
  width: 100%;
  height: 100%;
}

/* Verbindungen: 3 × 3 grosse Kacheln, die Wortmarke traegt den Namen */
.partner {
  grid-template-columns: repeat(3, 1fr);
}
/* Ein Satz zur Datenfrage (Gesundheitsdaten!), verlinkt auf security.html — „gespeichert in der EU", nicht
   „bleiben in der EU": der KI-Kontext geht ohne Name/E-Mail an Anthropic (USA), siehe subprocessors.html. */
.partner__daten {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-3);
}
.partner__daten a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.partner__daten a:hover {
  color: var(--text-2);
}
.pt {
  justify-content: center;
  min-height: 108px;
  padding: 18px 8px;
  --s: 0.82;
}
.pt--text {
  gap: 10px;
}
.pt--text .pt-ic {
  width: 36px;
  height: 36px;
}
.pt--text .pt-ic--ohne img {
  width: 100%;
  height: 100%;
}
.pt--text b {
  font-size: 13px;
}
@media (min-width: 720px) {
  .partner {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .pt {
    min-height: 132px;
    --s: 1.15;
  }
  .pt--text .pt-ic {
    width: 44px;
    height: 44px;
  }
  .pt--text b {
    font-size: 15px;
  }
}
@media (min-width: 1000px) {
  .partner {
    grid-template-columns: repeat(3, 1fr);
  }
  .pt {
    min-height: 140px;
    --s: 1.3;
  }
}

/* Export-Ziele mit Original-Logos */
.ex2-z {
  justify-content: space-between;
  gap: calc(10 * var(--pt));
  padding: calc(18 * var(--pt)) calc(6 * var(--pt)) calc(12 * var(--pt));
}
.ex2-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(34 * var(--pt));
  overflow: visible;
  color: var(--text);
}
.ex2-logo img,
.ex2-logo svg {
  display: block;
  width: auto;
  max-width: 100%;
}
.ex2-logo--garmin img { height: calc(44 * var(--pt)); }
.ex2-logo--zwift img { height: calc(21 * var(--pt)); }
.ex2-logo--peakfy svg { height: calc(19 * var(--pt)); }

/* Gleich breite Spalten: die Wortmarke passt sich der Kachel an, das Seitenverhaeltnis bleibt */
.partner,
.partner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pt .wm {
  max-width: 100%;
}
.pt .wm img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--h) * var(--s, 1));
}
.pt .wm--suunto img {
  width: min(100%, calc(var(--h) * var(--s, 1) * 150 / 49));
}
.pt .wm--wahoo svg {
  max-width: 100%;
  height: auto;
}

/* „Works with Apple Health" — Apples Original-Badge (Developer Artwork License): unveraendert, nicht animiert,
   mindestens 30 px hoch, Freiraum ein Viertel der Hoehe, kleiner als die eigene Hauptaussage. */
.ah-reihe {
  display: flex;
  margin-top: 28px;
  padding: 10px 0;
}
.ah-badge {
  display: block;
  height: 40px;
  width: auto;
}
.partner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
.pt {
  --s: 1;
}
@media (min-width: 720px) {
  .partner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pt {
    --s: 1.1;
  }
}
@media (min-width: 1000px) {
  .partner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pt {
    --s: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEUE STARTSEITE — Teile, die der Entwurf nicht hatte (01.10.2026, build/home.js)
   Sprachmenü in der Glas-Kapsel, schlanke Vergleichstabelle, voller Footer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sprungmarke #how (Unterseiten verlinken /#how) — unsichtbar, mit Abstand zur Kapsel */
.anker {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}
section[id] {
  scroll-margin-top: 80px;
}

/* ── Sprachmenü ─────────────────────────────────────────────────────────── */
.nav .btn--sm {
  margin-left: 0;
  /* längere Sprachen („Download de app") dürfen den Knopf nicht zweizeilig machen */
  white-space: nowrap;
  flex: none;
}
.lang {
  position: relative;
  margin-left: auto;
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 500 13px/1 var(--f-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang__btn:hover,
.lang.open .lang__btn {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}
.lang__btn svg {
  width: 17px;
  height: 17px;
}
.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glas-kante);
  box-shadow: 0 14px 44px rgba(20, 18, 74, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.lang.open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.lang__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
}
.lang__menu a:hover {
  background: var(--card);
}
.lang__menu a[aria-current] {
  color: var(--link);
  font-weight: 600;
}
@media (min-width: 1000px) {
  .lang {
    margin-left: 0;
  }
}
/* Logo nie stauchen; auf schmalen Handys gibt der Sprachknopf den Platz ab, den ein längerer
   Knopftext braucht („Download de app" = 145 px). */
.nav__logo {
  flex: none;
}
@media (max-width: 420px) {
  .lang__btn {
    padding: 0 7px;
    gap: 5px;
  }
}
/* 320-px-Telefone: „Download de app" (nl) und „Consigue la app" (es) ragten 26–14 px aus der Kapsel
   (gefunden 02.10.2026) — dort Logo, Abstände und Knopf etwas kleiner */
@media (max-width: 359px) {
  .nav {
    gap: 8px;
    padding-left: 14px;
  }
  .nav__logo {
    width: 80px;
  }
  .nav .btn--sm {
    padding: 0 11px;
    font-size: 13px;
  }
}

/* ── Vergleich (dieselbe Tabelle wie die alte Startseite, im hellen Entwurf) ── */
.vgl {
  max-width: 860px;
  margin: 36px auto 0;
  padding: 6px 18px;
  border-radius: var(--r-card);
  background: var(--card);
}
/* Handy: der Zeilentitel steht als eigene Zeile über den drei Werten, die genau unter den
   drei Spaltenköpfen liegen; ab 720 px vier Spalten nebeneinander. */
.vgl__r {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.vgl__k {
  grid-column: 1 / -1;
}
.vgl .vgl__r--kopf > span:first-child {
  display: none;
}
.vgl__r--kopf {
  border-top: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.vgl__r > span:not(.vgl__k) {
  display: flex;
  justify-content: center;
  text-align: center;
}
.vgl__k {
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.vgl__txt {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-2);
}
.vgl__pk {
  color: var(--link);
  font-weight: 600;
}
.vgl svg {
  width: 20px;
  height: 20px;
}
.vgl svg.no {
  color: var(--text-3);
}
.vgl svg.yes {
  color: var(--green-text);
}
.vgl__links {
  max-width: 860px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
}
.vgl__links a {
  color: var(--link);
}
.vgl__links a:hover {
  text-decoration: underline;
}
@media (min-width: 720px) {
  .vgl {
    padding: 8px 28px;
  }
  .vgl__r {
    grid-template-columns: minmax(0, 1fr) 120px 120px 96px;
    gap: 16px;
    font-size: 15px;
  }
  .vgl__k {
    grid-column: auto;
  }
  .vgl .vgl__r--kopf > span:first-child {
    display: block;
  }
  .vgl__r--kopf {
    font-size: 13px;
  }
  .vgl__txt {
    font-size: 13px;
  }
}

/* ── Footer (voll: alle Unterseiten, Sprachen, Social) ─────────────────── */
.footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  padding-bottom: 28px;
}
.footer__brand {
  grid-column: 1 / -1;
}
.footer__logo {
  display: inline-block;
  width: 104px;
  color: var(--text);
}
.footer__brand p {
  margin: 12px 0 0;
  max-width: 30ch;
  font-size: 14px;
  color: var(--text-2);
}
.footer__social {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text-2);
}
.footer__social a:hover {
  color: var(--text);
}
.footer__social svg {
  width: 18px;
  height: 18px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col h3 {
  margin: 0 0 4px;
  font: 600 12px/1.2 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer__col a {
  font-size: 14px;
  color: var(--text-2);
}
.footer__col a:hover,
.footer__langs a:hover {
  color: var(--text);
}
.footer__langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.footer__langs svg {
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.footer__langs a[aria-current] {
  color: var(--text);
  font-weight: 600;
}
.footer__bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .footer__top {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1000px) {
  .footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
  .footer__brand {
    grid-column: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRO + SEO/GEO (CRO-SEO-PLAN.md §6, 02.10.2026)
   Problem → Lösung, Links im Fließtext, Grand-Tour-Zusatz, klebender Download-Knopf,
   QR-Code am Desktop (erst zum Start), Sprachhinweis im hellen Stil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A3 Links im Fließtext: Linkfarbe der App (linkText), Pfeil nur fürs Auge */
.more {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--link);
  text-underline-offset: 3px;
}
.more:hover {
  text-decoration: underline;
}
.more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 14px;
}
.more-row .more {
  margin-top: 0;
}
.sec__head--c .more-row {
  justify-content: center;
}
.card .more {
  margin-top: 12px;
}

/* B3 Problem → Lösung: Karten wie im Rest der Seite (card), oben das Problem gedämpft, darunter die
   Lösung — die ganze Karte springt zum Abschnitt, der sie zeigt */
.fit {
  padding-bottom: 0;
}
.fit .eyebrow {
  text-wrap: balance;
}
.fit__grid {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}
.fit__card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 24px;
  background: var(--card);
  transition: background 0.25s var(--ease);
}
.fit__card:hover {
  background: #ebebf0;
}
.fit__vorher {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-3);
}
.fit__statt {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fit__nachher {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fit__nachher svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--link);
}
.fit__mehr {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--link);
}
.fit__card:hover .fit__mehr {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Handy: kompakter, damit sechs Karten nicht zu lang werden */
@media (max-width: 719px) {
  .fit__grid {
    gap: 10px;
    margin-top: 28px;
  }
  .fit__card {
    padding: 16px 18px 15px;
    border-radius: 20px;
  }
  .fit__vorher {
    font-size: 14px;
  }
  .fit__statt {
    margin-bottom: 2px;
    font-size: 10.5px;
  }
  .fit__nachher {
    gap: 9px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16.5px;
  }
  .fit__nachher svg {
    width: 18px;
    height: 18px;
  }
  .fit__mehr {
    padding-top: 8px;
    font-size: 13.5px;
  }
}
@media (min-width: 720px) {
  .fit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .fit__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* A1 Grand-Tour-Zusatz (ENTITY §5) — klein und gedämpft, aber lesbar auf der dunklen Profi-Karte */
.pros__note {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* A4 QR-Code neben den Badges — nur am Desktop und erst zum Start (build/home.js setzt ihn nur mit Datei) */
.qr {
  display: none;
}
@media (min-width: 1000px) {
  .qr {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    max-width: 22rem;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-2);
    text-align: left;
  }
  .qr img {
    flex: none;
    width: 88px;
    height: 88px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
}

/* B4 Klebender Download-Knopf (Handy/Tablet): Glas wie die Navigation, unten statt oben. Ohne JavaScript
   bleibt er unsichtbar; js/home.js schaltet .is-on zwischen den Badges im Hero und denen im Abschluss. */
.stick {
  position: fixed;
  z-index: 55;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 460px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 40px rgba(20, 18, 74, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.45s;
}
.stick.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.stick__orb {
  --s: 32px;
}
.stick__txt {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text-2);
}
.stick__txt b,
.stick__txt span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stick__txt b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.stick .badge img {
  height: 40px;
}
/* sehr schmale Telefone (320 px): ohne Orb und etwas kleiner, damit beide Zeilen ganz zu lesen sind
   („Résiliable à tout moment", „Cancela cuando quieras") */
@media (max-width: 359px) {
  .stick__orb {
    display: none;
  }
  .stick {
    gap: 8px;
    padding-left: 14px;
  }
  .stick__txt {
    font-size: 12px;
  }
  .stick__txt b {
    font-size: 14px;
  }
}
@media (min-width: 1000px) {
  .stick {
    display: none;
  }
}

/* Sprachhinweis (js/lang-hint.js) — stand auf der neuen Seite ungestylt unter dem Footer (gefunden 02.10.);
   gleiche Leiste wie in css/styles.css, mit den hellen Tokens dieser Seite */
.langhint {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, calc(100% + 1.5rem));
  width: min(calc(100vw - 2rem), 34rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.85rem 0.85rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(20, 18, 74, 0.14);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.langhint.is-in {
  transform: translate(-50%, 0);
  opacity: 1;
}
.langhint__msg {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.35;
  color: var(--text);
}
.langhint__cta {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0.7rem 1rem;
  border-radius: var(--r-btn);
  background: var(--cta);
  color: #fff;
  transition: background 0.2s var(--ease);
}
.langhint__cta:hover {
  background: var(--cta-press);
}
.langhint__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.langhint__close:hover {
  color: var(--text);
  background: var(--card);
}
.langhint__close svg {
  width: 1.05rem;
  height: 1.05rem;
}
@media (max-width: 26rem) {
  .langhint {
    flex-wrap: wrap;
    padding-right: 3rem;
  }
  .langhint__msg {
    flex-basis: 100%;
  }
  .langhint__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-OPTIMIERUNG (2.10.2026, Vorbild bevel.health) — nur Handy/Tablet, der Desktop bleibt unverändert.
   Kürzere Wege statt langer Stapel: die Story, „Around the ride" und die Telefonreihen werden Wischstreifen
   mit Punkten (js/home.js Punkt 11); Links werden zu fingergroßen Pillen; ruhigerer Abschnittsrhythmus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Punkte unter einem Wischstreifen — sichtbar nur, wo der Streifen wirklich wischbar ist */
.wisch-punkte {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.wisch-punkte i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #c7c7cc;
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.wisch-punkte i.on {
  width: 18px;
  background: var(--text);
}

/* Story (Plan · Fahren · Auswerten): statt klebendem Telefon mit langen, blassen Schritten ein Telefon und darunter
   die vier Schritte als Karten zum Wischen — die gewischte Karte schaltet den Bildschirm (wie die Karten bei Bevel) */
@media (max-width: 999px) {
  .story {
    margin-top: 28px;
  }
  .story__stage {
    position: relative;
    top: auto;
    z-index: 1;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
  }
  .story__stage::after {
    display: none;
  }
  .story__stage .phone {
    /* das untere Fünftel (Tab-Leiste, Speichern) läuft weich aus und nimmt keinen Platz ein */
    --pw: min(68vw, 280px);
    margin-bottom: calc(var(--pw) * -0.42);
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 80%);
    mask-image: linear-gradient(180deg, #000 64%, transparent 80%);
  }
  .story__steps {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 18px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .story__steps::-webkit-scrollbar {
    display: none;
  }
  .story .step {
    flex: 0 0 min(86%, 520px);
    min-height: 0;
    justify-content: flex-start;
    padding: 20px 20px 22px;
    border-radius: 24px;
    background: var(--card);
    opacity: 1;
    scroll-snap-align: center;
  }
  .story .step .h3 {
    font-size: 22px;
  }
  .story .step .chip,
  .story .step .more {
    background: var(--bg);
  }
  .story__steps + .wisch-punkte {
    display: flex;
  }
}

@media (max-width: 719px) {
  /* Abschnittsrhythmus: 56 statt 72 px oben und unten */
  .sec {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Rund um die Fahrt: Karten als Wischstreifen statt Stapel (seit 2.10.2026 drei: Wetter, Rennplan, Coach meldet sich) */
  .around {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 28px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .around::-webkit-scrollbar {
    display: none;
  }
  .around > .card {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .around + .wisch-punkte {
    display: flex;
  }
  /* in der schmaleren Karte bleibt der Wert einzeilig, die Beschriftung darf umbrechen */
  .around .privacy div {
    padding: 9px 11px;
    font-size: 13px;
  }
}
@media (min-width: 360px) and (max-width: 719px) {
  .around .privacy b {
    white-space: nowrap;
  }
}
@media (max-width: 719px) {
  /* Telefonreihen (Erholung, Fortschritt): Punkte zeigen, dass es ein zweites Telefon gibt */
  .prow {
    position: relative;
    padding-bottom: 8px;
  }
  .prow + .wisch-punkte {
    display: flex;
    margin-top: 6px;
  }

  /* Links im Fließtext: fingergroße Pillen (mindestens 44 px hoch) */
  .more-row {
    gap: 8px;
  }
  .more {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* im Flex-Kasten fällt das Leerzeichen vor dem Pfeil weg */
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--card);
    font-size: 14.5px;
    line-height: 1.25;
  }
  .card .more {
    background: var(--bg);
  }

  /* Verbindungen: drei Kacheln je Reihe statt zwei */
  .partner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .pt {
    min-height: 78px;
    padding: 12px 6px;
    border-radius: 16px;
    --s: 0.78;
  }
  .pt--text {
    gap: 6px;
  }
  .pt--text .pt-ic {
    width: 28px;
    height: 28px;
  }
  .pt b {
    font-size: 12.5px;
  }

  /* Benannte Vergleiche: ein Wischstreifen aus Pillen statt Fließtext mit 16-px-Links */
  .vgl__links {
    margin-top: 16px;
  }
  .vgl__lbl {
    display: block;
    margin-bottom: 8px;
  }
  .vgl__sep {
    display: none;
  }
  .vgl__reihe {
    display: flex;
    gap: 8px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vgl__reihe::-webkit-scrollbar {
    display: none;
  }
  .vgl__reihe a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--card);
    white-space: nowrap;
    font-size: 13.5px;
  }

  /* FAQ: etwas dichter, Fragen größer */
  .faq {
    margin-top: 28px;
  }
  .faq summary {
    padding: 16px 0;
    font-size: 17px;
    line-height: 1.35;
  }

  /* Footer: Links mit Fingerhöhe */
  .footer__col {
    gap: 0;
  }
  .footer__col a {
    display: flex;
    align-items: center;
    min-height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WENIGER TEXT AM HANDY + MENÜ (2.10.2026, Per: „unübersichtlich voll", Vorbild Bevel/RestOrTrain)
   Erster Bildschirm wie bei Bevel: Überschrift, kurzer Untertitel, Badges, eine Zeile Vertrauen.
   In den Abschnitten tragen Überschrift + Bild; Einleitungen, die die Überschrift wiederholen, entfallen am Handy.
   Alles bleibt im HTML (für Suche und Desktop) — der Desktop ist unverändert.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav__burger,
.nav__panel {
  display: none;
}

@media (max-width: 719px) {
  /* Hero: zentriert, kurzer Untertitel, nur die zwei wichtigsten Vertrauenspunkte in einer Zeile */
  .hero__copy {
    text-align: center;
  }
  .hero__chip-rest {
    display: none;
  }
  .hero .lead {
    max-width: 30ch;
    margin-inline: auto;
    font-size: 18px;
    line-height: 1.45;
  }
  .hero__cta .stores {
    justify-content: center;
  }
  .trust {
    justify-content: center;
  }
  .pros__pts {
    gap: 10px;
  }
  /* Problem → Lösung: die ganze Karte ist der Link, ein Pfeil statt „See how" */
  .fit__card {
    position: relative;
    padding-right: 40px;
  }
  .fit__mehr {
    display: none;
  }
  .fit__card::after {
    content: "→";
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-size: 17px;
    color: var(--link);
  }
}

/* Menü: bis 999 px (dort sind die Abschnitts-Links der Leiste ausgeblendet). Nur mit JavaScript — sonst bleibt die
   bisherige Leiste mit Sprache und Knopf. */
@media (max-width: 999px) {
  .js .nav .lang,
  .js .nav > .btn--sm {
    display: none;
  }
  .js .nav__burger {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .nav__burger span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav__burger span:first-child {
    top: 17px;
  }
  .nav__burger span:last-child {
    top: 25px;
  }
  .nav.is-open .nav__burger span:first-child {
    top: 21px;
    transform: rotate(45deg);
  }
  .nav.is-open .nav__burger span:last-child {
    top: 21px;
    transform: rotate(-45deg);
  }
  .nav.is-open {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 6px;
    padding-bottom: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 60px rgba(20, 18, 74, 0.16);
  }
  .nav.is-open .nav__panel {
    display: block;
    flex-basis: 100%;
    padding: 4px 10px 0 0;
  }
  .nav__panel-links {
    display: flex;
    flex-direction: column;
  }
  .nav__panel-links a {
    display: flex;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid var(--line);
    font-family: var(--f-display);
    font-size: 21px;
    font-weight: 500;
    color: var(--text);
  }
  .nav__panel-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
  }
  .nav__panel-lang a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    color: var(--text-2);
  }
  .nav__panel-lang a[aria-current] {
    background: var(--text);
    color: #fff;
  }
  .nav__panel-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    margin-top: 16px;
    font-size: 16px;
  }
}

/* Aufgeräumt wie Bevel/RestOrTrain (2.10.2026), für alle Breiten: ohne Kleintitel steht die Überschrift oben,
   Problem → Lösung hat drei Karten in einer Reihe, die Häkchen beim Coach sind nur noch kurze Sätze. */
.sec__head > .h2:first-child {
  margin-top: 0;
}
.sec__head--c > .h2:first-child + .lead {
  margin-top: 16px;
}
#coach .ticks {
  gap: 12px;
}
#coach .ticks b {
  font-weight: 500;
}
.pros__pts h3 {
  font-size: 18px;
}
@media (min-width: 720px) {
  .fit__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pros__pts > div {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
}
@media (min-width: 720px) and (max-width: 999px) {
  .fit__nachher {
    font-size: 16px;
  }
}