/* ==========================================================================
   Fitiva marketing site, prototype. Brand: BRAND_GUIDE.md (Outfit + Inter,
   one violet accent, aurora reserved for Ava). Copy is German, "du", and
   never uses dashes.
   ========================================================================== */
/* Fonts are self hosted (Inter and Outfit, SIL Open Font License, see
   assets/fonts): no request to Google, so no visitor IP leaves for it. */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/outfit-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  color-scheme: light only;
  --ink: #0B1022;
  --text: #0F172A;
  --dim: #5B6478;
  --faint: #94A3B8;
  --line: #E6E8F0;
  --mist: #F4F6FB;
  --white: #FFFFFF;
  --violet: #5B5DF1;
  --violet-600: #4F46E5;
  --violet-50: #EEF0FF;
  --emerald: #10B981;
  --emerald-50: #E7F8F1;
  --amber: #F59E0B;
  --rose: #F43F5E;
  --aurora: linear-gradient(135deg, #6366F1 0%, #7C3AED 50%, #DB2777 100%);
  --grad-text: linear-gradient(95deg, #6366F1 0%, #8B5CF6 45%, #DB2777 100%);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 30px 80px rgba(15, 23, 42, .14), 0 8px 20px rgba(15, 23, 42, .06);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-3xl: 36px;
  --wrap: 1200px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font: 400 17px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: Outfit, Inter, sans-serif; font-weight: 600; letter-spacing: -.025em; margin: 0; color: var(--text); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 3px; border-radius: 10px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 16px; }

/* audience switching: one site, two stories ------------------------------ */
/* each audience has its own page (site/build/build.py removes the other audience's
   elements); this rule only still matters for what a script builds at runtime */
[data-for] { transition: opacity .35s var(--ease); }
body[data-aud="athlete"] [data-for="coach"],
body[data-aud="coach"] [data-for="athlete"] { display: none !important; }
/* an old link to the coach side on the athlete page is on its way to /coaches/ (the head script) */
html[data-leaving] body { visibility: hidden; }
main { transition: opacity .35s var(--ease); }

/* buttons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 14px; font-weight: 600; font-size: 16px; transition: transform .2s var(--ease), background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 8px 24px rgba(99, 102, 241, .35); }
.btn-primary:hover { background: var(--violet-600); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1b2340; }
.btn-ghost { border: 1px solid var(--line); color: var(--text); background: #fff; }
.btn-ghost:hover { border-color: #cfd4e2; }
.btn-light { background: #fff; color: var(--ink); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

.kicker { font: 600 13px Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* background-clip text only paints inside the element's box: with a tight line height a block or inline block
   gradient cut the descenders (the g of Verbindung, of geht). The padding lets the paint reach below the
   baseline; the negative margin keeps the layout where it was (inline boxes ignore both) */
.grad { padding-bottom: .14em; margin-bottom: -.14em; }
.lede { font-size: 20px; line-height: 1.5; color: var(--dim); max-width: 640px; }
.h-sec { font-size: clamp(34px, 5vw, 60px); line-height: 1.04; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.tag-demo { display: inline-block; font: 500 11px Inter; color: var(--faint); letter-spacing: .02em; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }

/* nav: the bar and its mega menu (site/src/partials/nav.html, site.js "mega menu") ---------------
   Leon 2026-09-28, in the spirit of bloxley.com: four calm words, and a panel on frosted glass under
   the bar. The glass (.mm-bg) is one layer for the bar and the open panel: taller than any panel, it
   sits above the top edge and slides down to the height it has to cover (transform only), so the
   bar and the panel read as one sheet and the height glides when the panel changes. The header
   itself never gets a filter or a transform: the dim (.mm-dim) and the phone sheet are fixed
   descendants and need the window as their box. Below 1100 px the nav is a full height sheet. */
.nav { --nav-h: 68px; position: fixed; inset: 0 0 auto 0; z-index: 100; }
.nav > .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 20px Outfit; letter-spacing: -.02em; }
.logo img { width: 30px; height: 30px; border-radius: 8px; }
.logo b { font-weight: 600; } .logo em { font-style: normal; color: var(--violet); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.mm-bg { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 100vh; min-height: 640px; pointer-events: none;
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px);
  box-shadow: 0 12px 32px -26px rgba(15, 23, 42, .22); opacity: 0; transform: translateY(calc(var(--nav-h) - max(100vh, 640px)));
  transition: transform .32s var(--ease), opacity .3s ease, background-color .3s, box-shadow .3s; }
.nav.scrolled .mm-bg, .nav.mm-open .mm-bg { opacity: 1; }
.nav.mm-open .mm-bg { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: saturate(1.9) blur(14px); backdrop-filter: saturate(1.9) blur(14px); box-shadow: 0 34px 60px -34px rgba(15, 23, 42, .3); }
/* over a dark section the open panel keeps more white, so its dark text stays crisp */
.nav.mm-open.on-dark .mm-bg { background: rgba(255, 255, 255, .86); }
/* the bar is light glass over the page, no hard line (Leon 2026-09-28: "nicht wie ein Cut"); without blur, or for
   people who ask for less transparency, it stays nearly solid so the links keep their contrast */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .mm-bg, .nav.mm-open .mm-bg { background: rgba(255, 255, 255, .95); } }
@media (prefers-reduced-transparency: reduce) { .mm-bg, .nav.mm-open .mm-bg { background: rgba(255, 255, 255, .97); } }
/* over a dark full width section the bar turns to dark glass with light links (site.js toneUnderBar) */
.nav.on-dark.scrolled:not(.mm-open) .mm-bg { background: rgba(11, 16, 34, .52); box-shadow: 0 12px 32px -26px rgba(0, 0, 0, .7); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav.on-dark.scrolled:not(.mm-open) .mm-bg { background: rgba(11, 16, 34, .94); } }
@media (prefers-reduced-transparency: reduce) { .nav.on-dark.scrolled:not(.mm-open) .mm-bg { background: rgba(11, 16, 34, .96); } }
.nav.on-dark:not(.mm-open) > .wrap > .logo b { color: #fff; }
.nav.on-dark:not(.mm-open) .mm-btn, .nav.on-dark:not(.mm-open) .mm-tog { color: rgba(226, 232, 255, .8); }
.nav.on-dark:not(.mm-open) .nav-login { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.nav.on-dark:not(.mm-open) .mm-btn:hover, .nav.on-dark:not(.mm-open) .mm-item:hover > .mm-tog { color: #fff; }
.nav.on-dark:not(.mm-open) .nav-login:hover { background: rgba(255, 255, 255, .16); }
body[data-aud="athlete"] .nav.on-dark:not(.mm-open) .mm-item[data-mm="athlete"] > :is(.mm-btn, .mm-tog),
body[data-aud="coach"] .nav.on-dark:not(.mm-open) .mm-item[data-mm="coach"] > :is(.mm-btn, .mm-tog) { color: #C7D2FE; }
.nav.on-dark:not(.mm-open) .nav-burger { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.nav.on-dark:not(.mm-open) .nav-right .lang { border-color: rgba(255, 255, 255, .26); }
.nav.on-dark:not(.mm-open) > .wrap :focus-visible { outline-color: #A5B4FC; }
.nav .logo b, .nav .mm-btn, .nav .mm-tog, .nav .nav-burger, .nav .nav-right .lang { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.nav .nav-login { transition: color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.mm-dim { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: rgba(11, 16, 34, .1); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.nav.mm-open .mm-dim { opacity: 1; visibility: visible; transition: opacity .3s ease; }

/* Anmelden: a quiet pill, a little more present than the menu words (Leon 2026-09-28), never louder than the primary button */
.nav-login { display: none; height: 40px; line-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--violet-600); background: rgba(91, 93, 241, .08); box-shadow: inset 0 0 0 1px rgba(91, 93, 241, .16); transition: color .2s, background-color .2s, box-shadow .2s; }
.nav-login:hover { color: var(--violet-700, #4338CA); background: rgba(91, 93, 241, .13); box-shadow: inset 0 0 0 1px rgba(91, 93, 241, .26); }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; place-items: center; color: var(--text); cursor: pointer; }
.nav-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-burger[aria-expanded="true"] { background: var(--mist); }
:where(.mm-list, .mm-list ul) { list-style: none; margin: 0; padding: 0; }
.mm-head, .mm-foot { display: none; }
.mm-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--dim); transition: color .2s; }
.mm-chev { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .3s var(--ease), opacity .2s; }
.mm-tog { display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; background: none; color: var(--dim); cursor: pointer; transition: color .2s, background-color .2s; }
.mm-item.is-open > .mm-tog .mm-chev { transform: rotate(180deg); opacity: .9; }
/* a word that leads to a German only page (Company on English pages): the bar stays calm, the small DE shows
   inside the panel; screen readers still hear "(in German)" */
.mm-btn .de-tag { display: none; }
/* the page's own audience is marked in the bar (like the page it is on) */
body[data-aud="athlete"] .mm-item[data-mm="athlete"] > .mm-btn,
body[data-aud="coach"] .mm-item[data-mm="coach"] > .mm-btn { color: var(--violet-600); }
.mm-arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }

/* the panels' parts (both layouts) */
.mm-in { display: grid; align-items: start; }
/* the big link to the audience's page wears that audience's door colours from the first screen */
.mm-lead { position: relative; display: grid; justify-items: start; gap: 10px; align-content: start; padding: 22px 22px 24px; border-radius: 24px; color: var(--ink); background: linear-gradient(160deg, var(--dh-warm-1) 0%, var(--dh-warm-2) 100%); box-shadow: inset 0 0 0 1px rgba(180, 70, 27, .1); transition: box-shadow .3s var(--ease); }
.mm-item[data-mm="coach"] .mm-lead { background: linear-gradient(160deg, var(--dh-cool-1) 0%, var(--dh-cool-2) 100%); box-shadow: inset 0 0 0 1px rgba(67, 56, 202, .1); }
.mm-lead:hover { box-shadow: inset 0 0 0 1px rgba(180, 70, 27, .22), 0 16px 30px -22px rgba(180, 70, 27, .45); }
.mm-item[data-mm="coach"] .mm-lead:hover { box-shadow: inset 0 0 0 1px rgba(67, 56, 202, .22), 0 16px 30px -22px rgba(67, 56, 202, .45); }
.mm-lead:focus-visible { outline-offset: 3px; border-radius: 24px; }
.mm-lead-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 22px -12px rgba(15, 23, 42, .5); }
.mm-lead-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mm-lead-ath { background: linear-gradient(135deg, #FB923C, #E11D48); }
.mm-lead-coa { background: linear-gradient(135deg, #6366F1, #0EA5E9); }
.mm-lead-t { margin-top: 6px; font: 600 23px/1.15 Outfit, Inter, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.mm-lead-go { position: absolute; top: 22px; right: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), var(--shadow-sm); transition: transform .3s var(--ease); }
.mm-lead-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-lead-s { font-size: 14.5px; line-height: 1.5; color: var(--dim); max-width: 26ch; }
.mm-h { margin: 0 0 12px; font: 500 13px/1.3 Inter, sans-serif; letter-spacing: .01em; color: var(--dim); }
.mm-col a { display: inline-flex; align-items: center; min-height: 36px; font: 500 18.5px/1.25 Outfit, Inter, sans-serif; letter-spacing: -.012em; color: var(--text); transition: color .2s; }
.mm-col a:hover { color: var(--violet-600); }
.mm .de-tag { margin-left: 8px; vertical-align: 2px; }

.mm-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 100%; padding: 22px 22px 20px; border-radius: 24px; color: #fff; }
.mm-card-ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px; }
span.mm-card-ic { display: grid; place-items: center; }
.mm-card-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mm-card-t { font: 600 22px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.mm-card-t b { font-weight: 600; }
.mm-card-s { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.mm-card-s b { font-weight: 600; color: #fff; white-space: nowrap; }
.mm-card-go { margin-top: 14px; }
/* the membership each card speaks of links its page (Premium, Free for coaches) */
.mm-card-s a { font-weight: 600; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mm-card-t a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mm-card-t a:hover { text-decoration-color: #fff; }
.mm-card-ava { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), var(--aurora); box-shadow: 0 22px 44px -26px rgba(124, 58, 237, .75); }
.mm-card-ava .mm-card-ic { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 20px -10px rgba(11, 16, 34, .5); }
.mm-card-coach { background: radial-gradient(110% 90% at 100% 0%, rgba(99, 102, 241, .6), transparent 58%), radial-gradient(90% 70% at 0% 110%, rgba(14, 165, 233, .28), transparent 60%), var(--ink); box-shadow: 0 22px 44px -26px rgba(11, 16, 34, .8); }
.mm-card-pin { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mm-card-mail { color: var(--ink); background: radial-gradient(90% 80% at 100% 0%, rgba(99, 102, 241, .16), transparent 60%), linear-gradient(160deg, #FFFFFF, #F1F3FB); box-shadow: inset 0 0 0 1px var(--line); }
.mm-card-mail .mm-card-s { color: var(--dim); }
.mm-card-env { color: #fff; background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .6); }
.mm-card-mail .btn-light { background: var(--ink); color: #fff; }
.mm-card-mail .btn-light:hover { background: #1b2340; }

/* the Memberships panel (Leon 2026-09-28): the athletes' warm glass and the coaches' cool glass side by side, a
   seam of light between them; each membership one link with its card (site.css "membership card"), name and
   price, its conditions and one line of what it gives. On a coach page the coach group comes first (build.py
   own_first). Below 1100 px the groups stand one under the other as rows with a 72 px card. */
.mm-ms-w { position: relative; min-width: 0; --mm-acc: #9B2F55; --mm-ring: #B8325F; }
.mm-ms-w.is-coa { --mm-acc: #3F42C9; --mm-ring: #4447D8; }
.mm-ms-k { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-acc); }
.mm-ms-l { list-style: none; margin: 0; padding: 0; }
.mm-mc { position: relative; display: grid; align-content: start; color: var(--ink); border-radius: 16px; }
.mm-mc .mcw { position: relative; }
.mm-mc-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.mm-mc-n { font: 600 15px/1.25 Inter, sans-serif; color: var(--ink); }
.mm-mc-p { font: 500 13px/1.25 Inter, sans-serif; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-mc-p b { font-weight: 600; color: var(--ink); }
.mm-mc-c { font-size: 12.5px; line-height: 1.35; color: var(--dim); }
.mm-mc-s { font-size: 13px; line-height: 1.4; color: var(--dim); text-wrap: pretty; }
.mm-mc-c b, .mm-mc-s b { font-weight: inherit; }
/* the coach Free line breaks at its dot, never inside "aktive Athleten" or "Fitiva Gebühr" */
.mm-nw { white-space: nowrap; }
.mm-mc-go { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--dim); }
.mm-mc:focus-visible { outline: 2px solid var(--mm-ring); outline-offset: 3px; border-radius: 16px; }
.mm-ms-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 14.5px Inter, sans-serif; color: var(--mm-ring); }
.mm-ms-all a:hover .mm-arrow { transform: translateX(3px); }
.mm-ms-all a:focus-visible { outline-color: var(--mm-ring); }
.mm-lead:hover .mm-lead-go { transform: translateX(2px); }
@media (hover: hover) {
  .mm-mc:hover .mc-sheen::after { animation: mc-pass .9s cubic-bezier(.22, 1, .36, 1); }
}
.mm-mc:focus-visible .mc-sheen::after { animation: mc-pass .9s cubic-bezier(.22, 1, .36, 1); }
@keyframes mc-pass { from { opacity: 1; transform: translateX(-70%); } to { opacity: 1; transform: translateX(70%); } }

/* desktop: the words in the bar, the panel under it --------------------------------------------- */
@media (min-width: 1100px) {
  .mm { display: flex; align-self: stretch; }
  .mm-list { display: flex; align-items: center; gap: 2px; }
  /* the word is the link to its page, the arrow beside it opens the panel (both open it on hover) */
  .mm-item { display: flex; align-items: center; }
  .mm-btn { height: 40px; padding: 0 3px 0 12px; border-radius: 999px; font: 500 15px/1 Inter, sans-serif; }
  .mm-tog { width: 24px; height: 40px; margin-right: 6px; border-radius: 999px; }
  .mm-btn:hover, .mm-item.is-open > .mm-btn, .mm-item:hover > .mm-tog, .mm-item.is-open > .mm-tog { color: var(--ink); }
  body[data-aud="athlete"] .mm-item[data-mm="athlete"] > .mm-btn, body[data-aud="athlete"] .mm-item[data-mm="athlete"] > .mm-tog,
  body[data-aud="coach"] .mm-item[data-mm="coach"] > .mm-btn, body[data-aud="coach"] .mm-item[data-mm="coach"] > .mm-tog { color: var(--violet-600); }
  .mm-btn:focus-visible, .mm-tog:focus-visible { outline-offset: 0; border-radius: 999px; }
  /* the panel hangs from the header (no positioned box in between), full width under the bar */
  .mm-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .16s ease, transform .3s var(--ease), visibility 0s .3s; }
  .mm-item.is-open > .mm-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .26s ease .05s, transform .36s var(--ease), visibility 0s; }
  .mm-in { padding-top: 30px; padding-bottom: 42px; column-gap: 36px; }
  .mm-aud { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
  .mm-lead { min-height: 100%; }
  .mm-col .mm-h { margin-top: 0; }
  .mm-company { display: flex; }
  .mm-company > .mm-col { flex: 1 1 0; min-width: 0; }
  .mm-company > .mm-card { flex: 1.5 1 0; min-height: 0; }
  /* the Memberships panel: two glass groups in 2 : 3, so all five cards are equally wide */
  .mm-ms { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 0; align-items: stretch; padding-top: 22px; padding-bottom: 34px; }
  .mm-ms:has(> .is-coa:first-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .mm-ms-w { display: flex; flex-direction: column; padding: 22px 26px 16px; box-shadow: 0 30px 70px -40px rgba(30, 20, 60, .45); }
  .mm-ms-w.is-ath { background: linear-gradient(160deg, rgba(255, 238, 230, .92), rgba(255, 226, 222, .86)); }
  .mm-ms-w.is-coa { background: linear-gradient(160deg, rgba(236, 239, 255, .95), rgba(226, 240, 255, .9)); }
  .mm-ms-w:first-child { border-radius: 26px 0 0 26px; }
  .mm-ms-w:last-child { border-radius: 0 26px 26px 0; }
  /* the seam of the two worlds: a thread of light, faded at both ends */
  .mm-ms-w + .mm-ms-w::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(120, 110, 180, .4) 30%, rgba(255, 255, 255, .9) 50%, rgba(120, 110, 180, .4) 70%, rgba(255, 255, 255, 0)); }
  .mm-ms-l { display: grid; gap: 20px; margin-top: 16px; }
  .is-ath .mm-ms-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-coa .mm-ms-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-mc { row-gap: 3px; }
  .mm-mc .mcw { margin-bottom: 11px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  .mm-mc:hover .mcw, .mm-mc:focus-visible .mcw { transform: translateY(-4px); }
  .mm-mc:hover .mc, .mm-mc:focus-visible .mc { box-shadow: 0 1.2cqw 3cqw rgba(30, 10, 40, .12), 0 9cqw 18cqw -4cqw var(--mc-shadow, rgba(30, 10, 40, .3)); }
  /* both groups end on their "Alle vergleichen" at the same height, whatever their cards hold */
  .mm-ms-all { margin-top: auto; padding-top: 10px; }
  .mm-mc-c .mm-sep { display: none; }
  .mm-mc-c .mm-c2 { display: block; }
  .nav-login { display: inline-block; }
  .nav-burger { display: none; }
  /* no script: a panel still opens on hover and focus, on its own white */
  .mm:not(.mm-js) .mm-item:hover > .mm-panel, .mm:not(.mm-js) .mm-item:focus-within > .mm-panel { visibility: visible; opacity: 1; transform: none; transition: none; background: rgba(255, 255, 255, .97); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav > .wrap { gap: 18px; }
  .mm-btn { padding: 0 2px 0 10px; }
  .mm-tog { margin-right: 3px; }
  .mm-in { column-gap: 26px; }
  .mm-col a { font-size: 17px; }
  .mm-lead { padding: 20px 18px 22px; }
  .mm-lead-t { font-size: 21px; }
  .mm-ms-w { padding: 20px 20px 14px; }
  .mm-ms-l { gap: 16px; }
}

/* phones and tablets: the burger opens the whole menu as a sheet, the sections as accordions ---- */
@media (max-width: 1099px) {
  .mm { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.6) blur(24px); backdrop-filter: saturate(1.6) blur(24px);
    visibility: hidden; opacity: 0; transition: opacity .24s ease, visibility 0s .24s; }
  .mm.is-sheet { visibility: visible; opacity: 1; transition: opacity .24s ease; }
  .mm-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--gutter); }
  .mm-close { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
  .mm-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px var(--gutter) 28px; transform: translateY(-10px); transition: transform .34s var(--ease); }
  .mm.is-sheet .mm-list { transform: none; }
  .mm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
  .mm-item > .mm-panel { grid-column: 1 / -1; }
  .mm-tog { width: 44px; height: 44px; border-radius: 50%; }
  .mm-btn { width: 100%; justify-content: space-between; min-height: 66px; padding: 0; font: 600 25px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.025em; color: var(--ink); text-align: left; }
  .mm-btn:focus-visible { outline-offset: -3px; }
  .mm-chev { width: 32px; height: 32px; padding: 10px; border-radius: 50%; background: var(--mist); stroke-width: 1.6; opacity: 1; color: var(--text); box-sizing: border-box; }
  .mm-panel { display: none; }
  .mm-item.is-open > .mm-panel { display: block; animation: mmOpen .34s var(--ease) both; }
  .mm-in { gap: 22px 28px; padding: 2px 0 26px; }
  .mm-in.wrap { padding-left: 0; padding-right: 0; }
  .mm-aud { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .mm-lead, .mm-aud .mm-card { grid-column: 1 / -1; }
  .mm-lead { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 4px; padding: 14px; border-radius: 20px; }
  .mm-lead-go { position: static; grid-column: 3; grid-row: 1 / span 2; }
  .mm-lead-ic { grid-row: span 2; }
  .mm-lead-t { margin-top: 0; font-size: 19px; }
  .mm-lead-s { max-width: none; font-size: 14px; }
  .mm-col a { min-height: 44px; font-size: 19px; }
  .mm-h { margin-bottom: 4px; }
  .mm-card { min-height: 0; }
  .mm-company { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .mm-company > .mm-card { grid-column: 1 / -1; }
  /* the Memberships: the two groups one under the other, each membership a row with its card at 72 px */
  .mm-ms { gap: 22px; }
  .mm-ms-k { margin: 2px 0 4px; }
  .mm-mc { grid-template-columns: 72px minmax(0, 1fr) 20px; column-gap: 14px; row-gap: 1px; align-items: center; min-height: 64px; padding: 9px 0; }
  .mm-mc .mcw { width: 72px; grid-row: 1 / span 2; }
  .mm-mc-t { grid-column: 2; align-self: end; }
  .mm-mc-c { grid-column: 2; align-self: start; }
  .mm-mc-s { display: none; }
  .mm-mc-go { display: block; grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .mm-mc-n { font-size: 16px; }
  /* a straight hairline between the rows, from the text on (the row itself keeps its round focus ring) */
  .mm-ms-l > li + li .mm-mc::before { content: ""; position: absolute; top: 0; left: 86px; right: 0; height: 1px; background: rgba(15, 23, 42, .07); }
  .mm-ms-all { margin-top: 2px; }
  /* a tablet has room for both groups side by side, own audience on the left */
  @media (min-width: 700px) {
    .mm-ms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  }
  .mm-foot { display: grid; flex: none; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .72); box-shadow: 0 -1px 0 var(--line); }
  .mm-cta { grid-column: 1 / -1; order: -1; height: 52px; width: 100%; }
  .mm-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 600 16px Inter, sans-serif; color: var(--text); }
  .mm-foot .mm-lang { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; font: 500 15px Inter, sans-serif; color: var(--dim); }
  .nav-burger { display: grid; }
  .nav-right .lang, .nav-login { display: none; }
  html.mm-lock, html.mm-lock body { overflow: hidden; }
  html.mm-lock .cm-bar { opacity: 0; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .mm-in .mm-card { max-width: 560px; }
  .mm-foot { grid-template-columns: auto 1fr auto; }
  .mm-cta { grid-column: auto; order: 0; width: auto; justify-self: end; padding: 0 26px; }
  .mm-login { order: -1; }
}
@keyframes mmOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mm-bg { transition: opacity .2s ease, background-color .2s, box-shadow .2s; }
  .mm-panel, .mm-item.is-open > .mm-panel { transform: none !important; transition: opacity .15s ease, visibility 0s !important; }
  .mm-list { transform: none !important; }
  .mm-item.is-open > .mm-panel { animation: none; }
  .mm-lead-go, .mm-arrow, .mm-chev, .mm-mc .mcw { transition: none; }
  .mm-ms-all a:hover .mm-arrow, .mm-lead:hover .mm-lead-go { transform: none; }
  .mm-mc:hover .mc-sheen::after, .mm-mc:focus-visible .mc-sheen::after { animation: none; }
}


.ava-mark { width: 18px; height: 18px; border-radius: 6px; background: var(--aurora); display: grid; place-items: center; color: #fff; }
.ava-mark svg { width: 11px; height: 11px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px Inter; padding: 4px 9px; border-radius: 999px; }
.chip.ok { background: var(--emerald-50); color: #047857; }
.chip.vi { background: var(--violet-50); color: var(--violet-600); }
.chip.am { background: #FEF3C7; color: #92400E; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 11px Inter; color: #fff; flex: none; }

/* two photos in one frame (.duo) */
.duo { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.duo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); }

/* collapse: four apps become one ------------------------------------------ */
.collapse { height: 260vh; position: relative; }
.collapse .sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.collapse .ctext { position: absolute; top: 15vh; left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.collapse .ctext .h-sec { position: absolute; left: 0; right: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.collapse .ctext .b { opacity: 0; transform: translateY(20px); }
.collapse.done .ctext .a { opacity: 0; transform: translateY(-20px); }
.collapse.done .ctext .b { opacity: 1; transform: none; }
.tiles { position: relative; width: 1px; height: 1px; margin-top: 12vh; }
.tile { position: absolute; left: -85px; top: -85px; width: 170px; height: 170px; border-radius: 42px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font: 600 15px Inter; color: var(--dim); will-change: transform, opacity; }
.tile .ti { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; }
.tile .ti svg { width: 26px; height: 26px; }
.onemark { position: absolute; left: -95px; top: -95px; width: 190px; height: 190px; border-radius: 48px; box-shadow: 0 40px 100px rgba(99, 102, 241, .45); will-change: transform, opacity; }
.onemark img { width: 100%; height: 100%; border-radius: 48px; }
.collapse .csub { position: absolute; bottom: 12vh; left: 0; right: 0; text-align: center; color: var(--dim); font-size: 19px; opacity: 0; transition: opacity .6s var(--ease); padding: 0 var(--gutter); }
.collapse.done .csub { opacity: 1; }

/* Ava: the dark section ------------------------------------------------------ */
.ava-sec { position: relative; background: var(--ink); color: #fff; height: 330vh; }
.ava-sec .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.ava-sec .aura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 78% 45%, rgba(124, 58, 237, .35), transparent 70%), radial-gradient(35% 40% at 15% 85%, rgba(99, 102, 241, .22), transparent 70%); }
.ava-sec .grid-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1.2px, transparent 1.2px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 70%); }
.ava-in { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.ava-sec h2 { color: #fff; }
.ava-sec .lede { color: rgba(255, 255, 255, .66); margin-top: 16px; }
.ava-badge { display: inline-flex; align-items: center; gap: 10px; font: 600 14px Inter; color: #C7D2FE; }
.ava-badge .ava-mark { width: 30px; height: 30px; border-radius: 10px; }
.ava-badge .ava-mark svg { width: 16px; height: 16px; }
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 6px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; transition: background .4s var(--ease), opacity .4s; opacity: .8; }
.steps li.on { background: rgba(255, 255, 255, .06); opacity: 1; }
.steps .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 600 13px Inter; background: rgba(255, 255, 255, .08); }
.steps li.on .n { background: var(--aurora); }
.steps b { font: 600 19px Outfit; display: block; }
.steps small { color: rgba(255, 255, 255, .62); font-size: 15px; }
.ava-prog { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 24px; overflow: hidden; max-width: 460px; }
.ava-prog i { display: block; height: 100%; width: 0; background: var(--aurora); }
.device { position: relative; height: 560px; }
.scene { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.panel { padding: 26px; }
.panel h3 { color: #fff; font-size: 20px; }
.panel .sub { color: rgba(255, 255, 255, .55); font-size: 13px; margin-top: 4px; }
.msg { padding: 13px 16px; border-radius: 18px; font-size: 15px; line-height: 1.45; max-width: 88%; }
.msg.me { margin-left: auto; background: var(--violet); border-bottom-right-radius: 6px; }
.msg.ava { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-bottom-left-radius: 6px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); font-size: 14.5px; }
.lrow .k { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.lrow .g { color: rgba(255, 255, 255, .55); }
.stack { display: grid; gap: 10px; }
.pop { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.scene.on .pop { opacity: 1; transform: none; }
.scene.on .pop.p1 { transition-delay: .25s; } .scene.on .pop.p2 { transition-delay: .6s; } .scene.on .pop.p3 { transition-delay: .95s; } .scene.on .pop.p4 { transition-delay: 1.3s; } .scene.on .pop.p5 { transition-delay: 1.65s; }
.rings2 { display: flex; gap: 28px; justify-content: center; padding: 10px 0 6px; }
.r2 { text-align: center; }
.r2 svg { width: 118px; height: 118px; transform: rotate(-90deg); }
.r2 .arc { transition: stroke-dashoffset 1.6s var(--ease) .8s; }
.r2 b { display: block; font: 600 22px Outfit; margin-top: -78px; margin-bottom: 44px; }
.r2 small { color: rgba(255, 255, 255, .6); font-size: 12px; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: #fff; color: var(--ink); font: 600 14px Inter; }
.toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(16, 185, 129, .16); border: 1px solid rgba(16, 185, 129, .45); color: #6EE7B7; font: 600 14px Inter; }
.demo-dark { position: absolute; right: 8px; bottom: -28px; font-size: 11px; color: rgba(255, 255, 255, .35); }

/* bridge ------------------------------------------------------------------ */
.bridge { padding: 140px 0 120px; background: linear-gradient(#fff, var(--mist)); }
@keyframes arrive { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.bridge-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 80px; }
.bcard { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.bcard .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet); margin-bottom: 16px; }
.bcard .ic svg { width: 22px; height: 22px; }
.bcard h4 { font-size: 20px; margin-bottom: 6px; }
.bcard p { color: var(--dim); font-size: 15.5px; }

/* the map --------------------------------------------------------------------- */
.mapsec { padding: 130px 0 110px; }
.map-shell { position: relative; margin-top: 48px; height: 740px; border-radius: var(--r-3xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #EEF1F8; }
#map { position: absolute; inset: 0; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 15px; background: radial-gradient(circle at 60% 40%, #fff, #E9EDF7); }
.map-panel { position: absolute; top: 20px; left: 20px; bottom: 20px; width: 400px; z-index: 5; display: flex; flex-direction: column; border-radius: 28px; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(24px); -webkit-backdrop-filter: saturate(1.4) blur(24px); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--shadow-md); overflow: hidden; }
.mp-head { padding: 22px 22px 14px; }
.mp-head h3 { font-size: 24px; line-height: 1.15; }
.mp-head p { color: var(--dim); font-size: 14.5px; margin-top: 6px; }
.mp-body { flex: 1; overflow-y: auto; padding: 4px 22px 22px; }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field label, .field .lab { font: 600 13px Inter; color: var(--text); }
.field .help { font-size: 12.5px; color: var(--dim); }
.input { height: 46px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 0 14px; font: 400 15px Inter; color: var(--text); width: 100%; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(99, 102, 241, .15); }
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; color: var(--faint); }
.search-wrap .input { padding-left: 42px; }
.sugg { position: absolute; left: 0; right: 0; top: 50px; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; display: none; }
.sugg.open { display: block; }
.sugg button { display: flex; width: 100%; padding: 11px 14px; font-size: 14.5px; text-align: left; gap: 8px; }
.sugg button:hover, .sugg button.act { background: var(--mist); }
.sugg small { color: var(--faint); margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 14px Inter; color: var(--dim); transition: all .2s var(--ease); }
.tchip:hover { border-color: #cdd2e2; color: var(--text); }
.tchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.clist { display: grid; gap: 10px; margin-top: 16px; }
.ccard { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: left; width: 100%; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.ccard:hover, .ccard.act { border-color: rgba(99, 102, 241, .5); box-shadow: 0 0 0 4px rgba(99, 102, 241, .1); }
.ccard .av { width: 44px; height: 44px; font-size: 14px; }
.ccard b { display: block; font-size: 15px; }
.ccard small { color: var(--dim); font-size: 13px; }
.ccard .side { margin-left: auto; text-align: right; font-size: 13px; color: var(--dim); white-space: nowrap; }
.legend { position: absolute; right: 20px; bottom: 20px; z-index: 4; display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; }
.legend .l1 { background: var(--violet); } .legend .l2 { border: 2px solid var(--violet); background: #fff; } .legend .l3 { background: radial-gradient(circle, rgba(219, 39, 119, .7), rgba(219, 39, 119, 0)); }
.map-tools { position: absolute; top: 20px; right: 20px; z-index: 4; display: flex; gap: 8px; }
.tool { height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); font: 600 13px Inter; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.tool[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tool svg { width: 16px; height: 16px; }
.map-demo { position: absolute; left: 440px; bottom: 26px; z-index: 4; }

/* pins */
.pin { width: 44px; height: 44px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); display: grid; place-items: center; background: var(--violet); box-shadow: 0 10px 24px rgba(79, 70, 229, .35); border: 3px solid #fff; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, opacity .3s; }
.pin span { transform: rotate(45deg); font: 700 12px Inter; color: #fff; letter-spacing: .02em; }
.pin.basic { background: #fff; border: 3px solid var(--violet); }
.pin.basic span { color: var(--violet-600); }
.pin:hover, .pin.act { transform: rotate(-45deg) scale(1.15); box-shadow: 0 14px 30px rgba(79, 70, 229, .45); }
.pin.dim { opacity: .18; pointer-events: none; }
.pin-wrap { animation: drop .7s var(--ease) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px); } }
.pin.me { background: var(--aurora); width: 54px; height: 54px; }
.pin.me:after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid rgba(124, 58, 237, .5); animation: ripple 1.8s var(--ease) infinite; }
@keyframes ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.pin.draft { background: #fff; border: 3px dashed var(--violet); }
.pin.draft span { color: var(--violet); }
.city { padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px Inter; box-shadow: var(--shadow-md); white-space: nowrap; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.city b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--violet); font-size: 12px; }

/* pin flow */
.stepper { display: flex; gap: 6px; margin: 2px 0 6px; }
.stepper i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .4s; }
.stepper i.on { background: var(--violet); }
.pstep { display: none; animation: stepin .45s var(--ease); }
.pstep.on { display: block; }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } }
.hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--violet-50); color: #3730A3; font-size: 13.5px; margin-top: 14px; }
.hint svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.hint.ok { background: var(--emerald-50); color: #065F46; }
.pflow-actions { display: flex; gap: 10px; margin-top: 18px; }
.pflow-actions .btn { flex: 1; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--dim); margin-top: 14px; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--violet); flex: none; }
.sharecard { margin-top: 16px; border-radius: 22px; padding: 18px; color: #fff; background: var(--ink); position: relative; overflow: hidden; }
.sharecard:before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .6), transparent 65%); }
.sharecard .who { position: relative; display: flex; align-items: center; gap: 12px; }
/* the preview step says what the promise line says, so the line makes room for it */
.kd-tool.pf-preview .kd-promise { display: none; }
.pstep[data-step="3"] .sharecard { margin-top: 4px; padding: 16px 18px; }
.pstep[data-step="3"] .next-list { margin-top: 14px; gap: 8px; }
@media (min-width: 861px) and (max-height: 800px) { .pstep[data-step="3"] .next-list li:nth-child(3) { display: none; } }
.sharecard .pv-tag { position: absolute; top: 14px; right: 14px; z-index: 1; font: 600 11px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 4px 9px; }
.sharecard .who .av { width: 46px; height: 46px; background: var(--aurora); font-size: 15px; }
.sharecard b { font: 600 17px Outfit; }
.sharecard small { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.sharecard .url { position: relative; margin-top: 14px; font: 500 13px Inter; color: #C7D2FE; }
.next-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; font-size: 14px; }
.next-list li { display: flex; gap: 10px; align-items: flex-start; }
.next-list .dot { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: var(--mist); font: 600 11px Inter; color: var(--dim); flex: none; }
.req { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--mist); }

.howpin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.hp { padding: 22px; border-radius: 22px; background: var(--mist); }
.hp .n { font: 600 13px Inter; color: var(--violet-600); }
.hp b { display: block; font: 600 18px Outfit; margin: 6px 0 4px; }
.hp p { font-size: 14.5px; color: var(--dim); }
.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 26px; color: var(--dim); font-size: 14.5px; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--emerald); }

/* calculator and quiz -------------------------------------------------------- */
.tool-sec { padding: 110px 0; background: var(--mist); }
.tool-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px; border-radius: var(--r-3xl); background: #fff; box-shadow: var(--shadow-md); }
.slider { margin-top: 26px; }
.slider .top { display: flex; justify-content: space-between; font-size: 15px; }
.slider .top b { font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; margin-top: 12px; accent-color: var(--violet); height: 24px; }
.result { text-align: center; padding: 40px 24px; border-radius: 28px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.result:before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .5), transparent 65%); }
.result small { position: relative; color: rgba(255, 255, 255, .65); font-size: 14px; }
.result .big { position: relative; font: 600 clamp(48px, 6vw, 72px) Outfit; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.result p { position: relative; color: rgba(255, 255, 255, .7); font-size: 14.5px; max-width: 360px; margin: 0 auto; }
.quiz .q { margin-top: 22px; }
.quiz .q .lab { font: 600 15px Inter; margin-bottom: 10px; display: block; }
.planprev { padding: 28px; border-radius: 28px; background: var(--ink); color: #fff; position: relative; overflow: hidden; min-height: 360px; }
.planprev:before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 65%); }
.planprev > * { position: relative; }
.planprev h3 { color: #fff; font-size: 22px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.day { text-align: center; padding: 10px 0; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 12px; color: rgba(255, 255, 255, .55); transition: background .4s, color .4s; }
.day.tr { background: var(--violet); color: #fff; }
.day b { display: block; font-size: 11px; font-weight: 500; opacity: .8; }

/* pricing ---------------------------------------------------------------------- */
/* Premium launch price: who keeps it, and the price after (Leon 2026-09-28; the date is final) */
.pin-free { margin: 26px auto 0; display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 15px; color: var(--dim); }

/* faq, final --------------------------------------------------------------------- */
.faq { padding: 40px 0 120px; }
/* its top padding is less than the fixed bar: a jump to #faq (menu, footer, switch) stops below the bar */
#faq { scroll-margin-top: 72px; }
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 600 19px Outfit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 30px; height: 30px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease); font-style: normal; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { color: var(--dim); margin-top: 10px; max-width: 700px; }
.final { position: relative; margin: 0 var(--gutter) var(--gutter); border-radius: 40px; overflow: hidden; color: #fff; min-height: 620px; display: grid; place-items: center; text-align: center; isolation: isolate; }
.final > div:last-child { position: relative; z-index: 2; }
.final:before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 60% at 50% 50%, rgba(11, 16, 34, .35), rgba(11, 16, 34, .8)); }
.final h2 { color: #fff; font-size: clamp(44px, 7vw, 88px); line-height: 1; }
.final p { color: rgba(255, 255, 255, .8); font-size: 20px; margin: 18px auto 0; max-width: 560px; }
.final .row { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* responsive ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ava-in { grid-template-columns: 1fr; gap: 20px; align-content: center; }
  .device { height: 430px; }
  /* one step at a time, stacked in one cell: the list keeps the tallest step's height, so nothing below it jumps */
  .steps li { grid-area: 1 / 1; }
  .steps li:not(.on) { visibility: hidden; }
  .ava-sec .lede { display: none; }
  .howpin { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .nav > .wrap { gap: 12px; }
  .nav-right .btn { display: none; }
  .tool-card, .bridge-cards { grid-template-columns: 1fr; }
  .tool-card { padding: 24px; gap: 24px; }
  .map-shell { height: auto; display: flex; flex-direction: column; }
  #map { position: relative; height: 420px; order: 1; }
  .map-panel { position: relative; inset: auto; width: auto; order: 2; border-radius: 0; box-shadow: none; background: #fff; max-height: none; }
  .map-tools { top: 12px; right: 12px; } .legend { bottom: auto; top: 364px; right: 12px; }
  .map-demo { display: none; }
  .howpin { grid-template-columns: 1fr; }
  .tile { width: 128px; height: 128px; left: -64px; top: -64px; border-radius: 32px; font-size: 13px; gap: 8px; }
  .tile .ti { width: 44px; height: 44px; border-radius: 13px; }
  .onemark { width: 150px; height: 150px; left: -75px; top: -75px; border-radius: 38px; } .onemark img { border-radius: 38px; }
  .final { margin: 0 8px 8px; border-radius: 28px; min-height: 520px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Events: the coach creates, the flyer builds itself, athletes join
   ========================================================================== */
.events { padding: 130px 0 120px; background: linear-gradient(var(--mist), #fff); }
.ev-stage { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 26px; align-items: center; margin-top: 56px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); padding: 22px; }
.ev-label { display: flex; align-items: center; gap: 8px; font: 600 12px Inter; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.ev-field { padding: 10px 12px; border-radius: 12px; background: var(--mist); margin-top: 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; min-height: 42px; align-items: center; }
.ev-field span:first-child { color: var(--dim); }
.ev-field b { font-weight: 600; text-align: right; }
.ev-price { display: inline-flex; gap: 4px; padding: 3px; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.ev-price i { font-style: normal; padding: 3px 9px; border-radius: 7px; font: 600 12px Inter; color: var(--dim); }
.ev-price i.on { background: var(--ink); color: #fff; }
.ev-btn { margin-top: 14px; height: 44px; border-radius: 13px; background: var(--violet); color: #fff; display: grid; place-items: center; font: 600 14px Inter; transition: transform .2s, background .3s; }
.ev-btn.press { transform: scale(.96); }
.ev-btn.ok { background: var(--emerald); }
.flyer { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; padding: 22px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(20px) rotate(-2deg) scale(.96); transition: opacity .6s, transform .8s var(--ease); display: flex; flex-direction: column; }
.flyer.on { opacity: 1; transform: rotate(-2deg); }
.flyer:before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .7), transparent 65%); }
.flyer:after { content: ""; position: absolute; inset: auto auto -30% -30%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(219, 39, 119, .45), transparent 65%); }
.flyer > * { position: relative; z-index: 1; }
.flyer .fd { font: 700 13px Inter; letter-spacing: .12em; color: #C7D2FE; }
.flyer h3 { color: #fff; font-size: 30px; line-height: 1.02; margin: 10px 0 6px; }
.flyer .fm { font-size: 13px; color: rgba(255, 255, 255, .7); }
.flyer .fq { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.qr { width: 92px; height: 92px; background: #fff; border-radius: 10px; padding: 7px; display: grid; grid-template-columns: repeat(21, 1fr); gap: 0; }
.qr i { background: var(--ink); opacity: 0; transition: opacity .25s; }
.qr i.on { opacity: 1; }
.qr i.off { background: transparent; }
.flyer .fu { font: 500 11px Inter; color: rgba(255, 255, 255, .6); }
.flyer .fc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 8px; }
.flyer .fc .av { width: 26px; height: 26px; font-size: 10px; }
.sent { margin-top: 16px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.sent.on { opacity: 1; transform: none; }
.evlist { display: grid; gap: 10px; }
.evcard { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .3s; }
.evcard.new { animation: arrive .7s var(--ease); border-color: rgba(99, 102, 241, .5); box-shadow: 0 0 0 4px rgba(99, 102, 241, .1); }
.evdate { width: 52px; height: 56px; border-radius: 14px; background: var(--violet-50); display: grid; place-items: center; text-align: center; line-height: 1.05; color: var(--violet-600); }
.evdate b { font: 700 19px Outfit; display: block; } .evdate small { font: 600 10.5px Inter; letter-spacing: .05em; }
.evcard .t b { display: block; font-size: 14.5px; }
.evcard .t small { color: var(--dim); font-size: 12.5px; }
.evcard .t small .evp { white-space: nowrap; }
.evcard .t small .evp i { font-style: normal; }
/* phones: the price gets its own line instead of wrapping after a dot */
@media (max-width: 480px) { .evcard .t small .evp { display: block; } .evcard .t small .evp i { display: none; } }
/* phones: the coach list's button goes under the text, so the count and its word keep one line */
@media (max-width: 480px) {
  .ev-stage .evcard { grid-template-columns: 52px minmax(0, 1fr); }
  .ev-stage .evcard .evdate { grid-row: span 2; }
  .ev-stage .evcard .join { grid-column: 2; justify-self: start; }
}
.stackav { display: flex; align-items: center; margin-top: 6px; }
.stackav .av { width: 22px; height: 22px; font-size: 9px; border: 2px solid #fff; margin-right: -6px; }
.stackav em { font-style: normal; font-size: 12px; color: var(--dim); margin-left: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.join { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 12.5px Inter; white-space: nowrap; transition: background .3s, transform .2s; display: inline-flex; align-items: center; gap: 5px; }
.join.press { transform: scale(.94); }
.join.in { background: var(--emerald); }
.join svg { width: 13px; height: 13px; }
.ev-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.ev-points div { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; color: var(--dim); }
.ev-points b { display: block; color: var(--text); font: 600 16px Outfit; margin-bottom: 4px; }

/* ==========================================================================
   Alles drin: a bento of everything else, each tile with one small motion
   ========================================================================== */
.bento-sec { padding: 120px 0; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.bt { border-radius: 28px; background: var(--mist); padding: 22px; display: flex; flex-direction: column; overflow: hidden; min-height: 290px; position: relative; }
.bt.w2 { grid-column: span 2; }
.bt.dark { background: var(--ink); color: #fff; }
.bt.dark h3 { color: #fff; } .bt.dark p { color: rgba(255, 255, 255, .62); }
.bt h3 { font-size: 19px; margin-top: auto; padding-top: 14px; }
.bt p { color: var(--dim); font-size: 14.5px; margin-top: 4px; }
.bv { position: relative; flex: 1; min-height: 150px; display: grid; place-items: center; }
/* water */
.glass-w { position: relative; width: 84px; height: 118px; border: 4px solid #BFD3F5; border-top: 0; border-radius: 6px 6px 22px 22px; overflow: hidden; background: #fff; }
.glass-w i { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(#7DD3FC, #3B82F6); transition: height 1s var(--ease); }
.glass-w i:before { content: ""; position: absolute; left: -20%; right: -20%; top: -6px; height: 12px; border-radius: 50%; background: #7DD3FC; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 50% { transform: translateX(8%); } }
.wlab { position: absolute; bottom: 4px; font: 600 13px Inter; color: var(--dim); font-variant-numeric: tabular-nums; }
/* fasting */
.fast svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.fast .arcf { stroke-dasharray: 339; stroke-dashoffset: 339; transition: stroke-dashoffset 2.4s var(--ease); }
.play .fast .arcf { stroke-dashoffset: 110; }
.fast .ft { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.fast .ft b { font: 600 22px Outfit; font-variant-numeric: tabular-nums; display: block; }
.fast .ft small { font-size: 11px; color: var(--dim); }
/* shopping list */
.shop { width: 100%; display: grid; gap: 7px; }
.shop div { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: #fff; font-size: 13.5px; }
.shop .ck { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #CBD2E1; flex: none; display: grid; place-items: center; transition: background .3s, border-color .3s; }
.shop .ck svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.shop div.done { color: var(--faint); text-decoration: line-through; }
.shop div.done .ck { background: var(--emerald); border-color: var(--emerald); } .shop div.done .ck svg { opacity: 1; }
/* supplements */
.supp { width: 100%; display: grid; gap: 8px; }
.supp div { padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); }
.play .supp div { opacity: 1; transform: none; }
.play .supp div:nth-child(2) { transition-delay: .25s; } .play .supp div:nth-child(3) { transition-delay: .5s; }
.src { font: 600 10.5px Inter; padding: 3px 7px; border-radius: 6px; background: var(--emerald-50); color: #047857; }
/* records */
.prs { display: flex; align-items: flex-end; gap: 12px; height: 130px; }
.prs i { width: 34px; border-radius: 9px 9px 4px 4px; background: #DADFF0; height: 0; transition: height 1s var(--ease); }
.prs i.top { background: var(--aurora); }
.pr-badge { position: absolute; right: 14px; top: 8px; transform: scale(.6); opacity: 0; transition: transform .5s var(--ease) 1.1s, opacity .3s 1.1s; }
.play .pr-badge { transform: none; opacity: 1; }
/* challenge leaderboard */
.board { width: 100%; position: relative; height: 176px; }
.board div { position: absolute; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: #fff; font-size: 13.5px; transition: transform .9s var(--ease), box-shadow .3s; }
.board div b { margin-left: auto; font-variant-numeric: tabular-nums; }
.board .rk { width: 20px; font: 700 13px Outfit; color: var(--faint); }
.board div.me { box-shadow: 0 0 0 2px rgba(99, 102, 241, .5); }
/* body progress */
.bodyline { width: 100%; height: 150px; }
.bodyline .pl { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s var(--ease); }
.play .bodyline .pl { stroke-dashoffset: 0; }
/* course */
.course { width: 100%; display: flex; gap: 14px; align-items: center; }
.course .cv { width: 110px; height: 110px; border-radius: 20px; background: var(--aurora); flex: none; display: grid; place-items: center; color: #fff; }
.course .cv svg { width: 34px; height: 34px; }
.course .pb { height: 8px; border-radius: 8px; background: #fff; overflow: hidden; margin-top: 10px; }
.course .pb i { display: block; height: 100%; width: 0; background: var(--violet); transition: width 1.8s var(--ease); border-radius: 8px; }
.play .course .pb i { width: 38%; }
/* coach: calendar */
.cal { width: 100%; display: grid; grid-template-columns: 34px repeat(5, 1fr); gap: 5px; font-size: 11px; color: var(--faint); }
.cal span { text-align: center; }
.cal i { height: 24px; border-radius: 7px; background: #fff; transition: background .4s; }
.cal i.free { background: #fff; box-shadow: inset 0 0 0 1.5px #C7D2FE; }
.cal i.bk { background: var(--violet); }
/* coach: payment link */
.plink { width: 100%; display: grid; gap: 10px; }
.plink .pl-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13px; }
.plink .copy { margin-left: auto; font: 600 12px Inter; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; transition: background .3s; }
.plink .copy.ok { background: var(--emerald); }
.pk { padding: 12px; border-radius: 14px; background: #fff; display: flex; justify-content: space-between; font-size: 13.5px; }
/* check in form */
.form { width: 100%; display: grid; gap: 8px; }
.form div { padding: 9px 12px; border-radius: 11px; background: #fff; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.dots5 { display: inline-flex; gap: 4px; } .dots5 i { width: 9px; height: 9px; border-radius: 50%; background: #E2E8F0; transition: background .3s; }
.dots5 i.on { background: var(--violet); }
/* fee ladder */
.ladder { display: flex; align-items: flex-end; gap: 10px; height: 140px; width: 100%; }
.ladder div { flex: 1; text-align: center; font: 600 12px Inter; color: var(--dim); }
.ladder i { display: block; border-radius: 10px 10px 4px 4px; background: #D9DDF0; height: 0; margin-bottom: 6px; transition: height 1s var(--ease); }
.ladder div:last-child i { background: var(--emerald); }
/* post */
.post { width: 100%; padding: 14px; border-radius: 18px; background: #fff; font-size: 13.5px; }
.post .ph { height: 80px; border-radius: 12px; margin: 10px 0; background: linear-gradient(135deg, #C7D2FE, #F5D0FE); }
.post .lk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.post .lk svg { width: 16px; height: 16px; color: var(--rose); transition: transform .3s var(--ease); }
.post .lk.pop svg { transform: scale(1.35); }
/* chat */
.minichat { width: 100%; display: grid; gap: 8px; }
.minichat .m { max-width: 80%; padding: 9px 12px; border-radius: 16px; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.minichat .m.on { opacity: 1; transform: none; }
.minichat .a { background: #fff; border-bottom-left-radius: 5px; }
.minichat .b { margin-left: auto; background: var(--violet); color: #fff; border-bottom-right-radius: 5px; }

@media (max-width: 1100px) {
  .ev-stage { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .flyer { max-width: min(300px, calc(100% - 24px)); margin: 0 auto; } /* its -2deg tilt stays inside a 320 px phone */
  .bento { grid-template-columns: repeat(2, 1fr); }
  .ev-points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .bt.w2 { grid-column: auto; }
  .ev-points { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tour: the finished motion films as a small cinema with chapters
   ========================================================================== */
.tour { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 130px 0; }
.tour:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 70% 50%, rgba(124, 58, 237, .32), transparent 70%), radial-gradient(30% 40% at 15% 20%, rgba(99, 102, 241, .2), transparent 70%); }
.tour .wrap { position: relative; }
.tour h2 { color: #fff; }
.tour .lede { color: rgba(255, 255, 255, .65); }
.tour .kicker { color: #A5B4FC; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 56px; }
.chapters { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.chap { width: 100%; text-align: left; padding: 14px 16px; border-radius: 20px; display: grid; grid-template-columns: 48px 1fr auto; gap: 2px 14px; align-items: center; opacity: .8; transition: opacity .35s, background .35s; }
.chap:hover { opacity: .92; }
.chap.on { opacity: 1; background: rgba(255, 255, 255, .07); }
.chap .th { grid-row: span 2; width: 48px; height: 60px; border-radius: 11px; overflow: hidden; background: #111833; }
.chap .th img { width: 100%; height: 100%; object-fit: cover; }
.chap b { font: 600 17px Outfit; color: #fff; }
.chap small { color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.4; }
.chap .dur { grid-row: 1; grid-column: 3; font-size: 12px; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.chap .prog { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 8px; }
.chap .prog i { display: block; height: 100%; width: 0; background: var(--aurora); }
.screen { position: relative; justify-self: center; width: min(100%, 540px); max-height: 80vh; aspect-ratio: 4 / 5; transition: box-shadow .3s; border-radius: 34px; overflow: hidden; background: #070A18; box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.screen video { width: 100%; height: 100%; object-fit: contain; display: block; background: #070A18; }
.tv-tag { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: rgba(7, 10, 24, .6); backdrop-filter: blur(10px); font: 600 12px Inter; color: #C7D2FE; }
.tv-btn { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(7, 10, 24, .45); backdrop-filter: blur(12px); display: grid; place-items: center; color: #fff; }
.tv-btn svg { width: 18px; height: 18px; }
.tv-big { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgba(7, 10, 24, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
.screen.paused .tv-big { opacity: 1; pointer-events: auto; }
.tv-big span { width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.tv-big svg { width: 30px; height: 30px; margin-left: 4px; }
@media (max-width: 860px) {
  .tour { padding: 96px 0; }
  .tour-grid { grid-template-columns: 1fr; gap: 24px; }
  .screen { order: -1; width: 100%; border-radius: 26px; }
  .chap small { display: none; }
}


/* ==========================================================================
   Event cards: money tiles, a list of people, the sample label
   ========================================================================== */
.money2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.money2 > div { padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.money2 small { color: var(--dim); font-size: 12px; display: block; }
.money2 b { font: 600 20px Outfit; }
.reglist { display: grid; gap: 8px; margin-top: 14px; }
.reglist > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; }
.reglist .chip { margin-left: auto; }
.reglist.req3 > div { align-items: flex-start; }
.reglist.req3 small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.reglist.req3 .join { margin-left: auto; flex: none; }
@keyframes runit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.demo-light { position: absolute; right: 6px; bottom: -6px; font-size: 11px; color: var(--faint); }
@media (max-width: 860px) {
  .money2 b { font-size: 16px; }
}

.lang { height: 34px; min-width: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); display: inline-grid; place-items: center; font: 600 13px Inter; color: var(--dim); }
.lang:hover { color: var(--text); border-color: #cfd4e2; }
/* the language switch shows the other language's flag (nav, phone menu, footer) */
.flag { display: block; flex: none; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.lang .flag { width: 22px; height: 16px; }
.mm-lang .flag, .foot-lang .flag { width: 20px; height: 15px; }

/* body progress: the line is stretched, the labels are not */
.chart { position: relative; width: 100%; height: 150px; }
.chart .bodyline { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); transition: clip-path 2s var(--ease); }
.play .chart .bodyline { clip-path: inset(0 0 0 0); }
.chart .cl { position: absolute; font: 600 12px Inter; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s var(--ease); }
.play .chart .cl { opacity: 1; transform: none; }
.c-start { left: 0; top: -2px; color: var(--dim); transition-delay: .3s; }
.c-now { right: 0; top: calc(64% - 52px); display: flex; flex-direction: column; align-items: flex-end; padding: 6px 10px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); transition-delay: 1.9s !important; }
.c-now b { font: 600 16px Outfit; color: var(--text); }
.c-now em { font-style: normal; font-size: 11.5px; color: #047857; }
.c-goal { right: 0; top: calc(83% + 8px); padding: 3px 9px; border-radius: 999px; background: var(--violet-50); color: var(--violet-600); transition-delay: .6s; }
.enddot { position: absolute; right: -6px; top: 64%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--violet); border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(99, 102, 241, .18); opacity: 0; transition: opacity .3s 1.8s; }
.play .enddot { opacity: 1; }

/* course cover: a route, a runner, a play button */
.course { gap: 18px; }
.cover { position: relative; flex: none; width: 160px; height: 138px; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 90% at 85% 10%, rgba(219, 39, 119, .55), transparent 60%), radial-gradient(90% 90% at 10% 100%, rgba(99, 102, 241, .75), transparent 60%), var(--ink); box-shadow: 0 16px 36px rgba(79, 70, 229, .28); }
.cover svg { position: absolute; left: 0; top: 14px; }
.cw { position: absolute; left: 12px; top: 10px; font: 700 10.5px Inter; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.cdot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 0 16px rgba(255, 255, 255, .9); offset-path: path('M16 110 C 44 110, 50 56, 80 56 S 116 104, 144 44'); offset-rotate: 0deg; animation: runit 4.5s ease-in-out infinite; }
.cplay { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.cplay svg { position: static; width: 15px; height: 15px; margin-left: 2px; }
.cinfo { flex: 1; min-width: 0; }
.ct { display: block; font: 600 18px Outfit; line-height: 1.2; }
.ca { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
.weeks8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 14px; }
.weeks8 i { height: 8px; border-radius: 8px; background: #fff; transition: background .4s; }
.play .weeks8 i.on { background: var(--violet); }
.play .weeks8 i.on:nth-child(2) { transition-delay: .2s; } .play .weeks8 i.on:nth-child(3) { transition-delay: .4s; }
.weeks8 i.cur { background: linear-gradient(90deg, var(--violet) 40%, #fff 40%); animation: curpulse 1.6s ease-in-out infinite; }
@keyframes curpulse { 50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); } }
.next { font-size: 13px; color: var(--dim); margin-top: 12px; }
.next b { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .course { flex-direction: column; align-items: stretch; }
  .cover { width: 100%; }
}

/* ==========================================================================
   The coach door: a faithful replica of the real coach dashboard
   ========================================================================== */
.rd { position: absolute; left: 50%; top: 0; width: 930px; margin-left: -465px; height: 650px; border-radius: 24px; overflow: hidden; background: #F7F8FC; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.rd:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(rgba(247, 248, 252, 0), #F7F8FC); pointer-events: none; }
.rd .bar-top { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #EEF0F6; border-bottom: 1px solid var(--line); }
.rd .bar-top i { width: 10px; height: 10px; border-radius: 50%; background: #D8DCE8; }
.rd .bar-top span { margin-left: 10px; font-size: 12px; color: var(--faint); }
.rd-in { display: grid; grid-template-columns: 196px 1fr; height: calc(100% - 38px); }
@keyframes bump { 40% { transform: scale(1.4); } }
.rd-main { padding: 16px; display: grid; gap: 12px; align-content: start; overflow: hidden; }
.rd-hero { border-radius: 20px; padding: 16px 18px; color: #fff; background: linear-gradient(115deg, #7C3AED 0%, #6D5CF5 55%, #4F46E5 100%); }
.rd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rd-top small { display: block; font-size: 11px; color: rgba(255, 255, 255, .85); }
.rd-top b { display: block; font: 600 21px Outfit; letter-spacing: -.02em; }
.rd-btns { display: flex; gap: 6px; }
.rd-btns i { font-style: normal; height: 28px; min-width: 28px; padding: 0 8px; border-radius: 9px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; }
.rd-btns svg { width: 13px; height: 13px; }
.rd-ava { display: flex; gap: 9px; align-items: center; margin-top: 12px; padding: 9px 11px; border-radius: 13px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; min-height: 40px; }
.rd-ava .ava-mark { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.rd-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.rd-ic svg { width: 15px; height: 15px; }
.rd-ic.sm { width: 24px; height: 24px; background: var(--violet-50); color: var(--violet); }
.rd-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.rd-cardhead { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #FAFAFD; border-bottom: 1px solid var(--line); }
.rd-ct { display: flex; align-items: center; gap: 8px; font: 600 13px Inter; margin-right: auto; }
.rd-ct .rd-ic svg { width: 13px; height: 13px; }
@media (max-width: 1100px) {
  .rd { width: 100%; left: 0; margin-left: 0; }
}
@media (max-width: 860px) {
  .rd { height: 590px; border-radius: 20px; }
  .rd-in { grid-template-columns: 1fr; }
  .rd-main { padding: 10px; gap: 10px; }
  .rd-hero { padding: 14px; border-radius: 16px; }
  .rd-top b { font-size: 18px; }
}

.sugg-note { padding: 11px 14px; font-size: 13.5px; color: var(--dim); margin: 0; }
.remove-pin { margin-top: 8px; width: 100%; color: var(--rose); border-color: rgba(244, 63, 94, .3); }
.remove-pin[hidden] { display: none; }
@media (max-width: 380px) {
  .logo b { display: none; }
}
/* ==========================================================================
   Kurse (coach): a course is built, goes live, sells, and the fee drops a
   rung. Then a calculator on the real ladder.
   ========================================================================== */
.course-sec { position: relative; overflow: hidden; background: #0B1022; color: #fff; padding: 130px 0 120px; }
.cs-glow { position: absolute; inset: -10% -10% auto; height: 900px; pointer-events: none;
  background: radial-gradient(36% 40% at 22% 18%, rgba(99, 102, 241, .28), transparent 70%), radial-gradient(30% 36% at 82% 30%, rgba(219, 39, 119, .18), transparent 70%); }
.course-sec .wrap { position: relative; }
.course-sec .kicker { color: #A5B4FC; }
.course-sec h2 { color: #fff; }
.course-sec .grad { background: linear-gradient(95deg, #A5B4FC 0%, #C4B5FD 45%, #F9A8D4 100%); -webkit-background-clip: text; background-clip: text; }
.course-sec .lede { color: rgba(255, 255, 255, .68); }
.cs-head { text-align: center; max-width: 860px; margin: 0 auto; }
.cs-head .h-sec { margin-top: 12px; }
.cs-head .lede { margin: 18px auto 0; }
.cs-stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; max-width: 1000px; margin: 56px auto 0; }
.cs-card { position: relative; background: #fff; color: var(--text); border-radius: 28px; padding: 24px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.cs-label { display: flex; align-items: center; gap: 7px; font: 600 12px Inter; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cs-label svg { width: 14px; height: 14px; color: var(--violet); }
.cs-title { display: flex; align-items: center; min-height: 32px; margin-top: 10px; font: 600 23px Outfit; letter-spacing: -.02em; }
.cs-caret { width: 2px; height: 24px; margin-left: 3px; background: var(--violet); animation: caret 1s steps(1) infinite; }
.cs-stage:not(.typing) .cs-caret { opacity: 0; animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.cs-lessons { display: grid; gap: 8px; margin-top: 14px; }
.cs-l { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 15px; background: var(--mist); opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--ease); }
.cs-l.on { opacity: 1; transform: none; }
.cs-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff; font: 600 13px Outfit; color: var(--violet-600); }
.cs-lt { min-width: 0; }
.cs-lt b { display: block; font: 600 14.5px Inter; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-lt small { font-size: 12px; color: var(--dim); }
.cs-att { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 600 11.5px Inter; color: #334155; white-space: nowrap; }
.cs-att svg { width: 12px; height: 12px; color: var(--violet); }
.cs-att.free { background: var(--emerald-50); border-color: transparent; color: #047857; }
.cs-att.free svg { color: #047857; }
.cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-price small { display: block; font-size: 11.5px; color: var(--dim); }
.cs-price b { font: 600 22px Outfit; }
.cs-pub { position: relative; height: 42px; min-width: 150px; padding: 0 18px; border-radius: 13px; background: var(--ink); color: #fff; font: 600 14px Inter; display: inline-grid; place-items: center; transition: background .35s, transform .2s; }
.cs-pub > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity .3s, transform .4s var(--ease); }
.cs-pub .t2 { opacity: 0; transform: translateY(8px); }
.cs-pub svg { width: 14px; height: 14px; }
.cs-pub.press { transform: scale(.95); }
.cs-pub.live { background: var(--emerald); }
.cs-pub.live .t1 { opacity: 0; transform: translateY(-8px); } .cs-pub.live .t2 { opacity: 1; transform: none; }
.cs-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 13px; border-radius: 14px; background: var(--violet-50); color: var(--violet-600); font: 600 13.5px Inter; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s var(--ease); }
.cs-link.on { opacity: 1; transform: none; }
.cs-link svg { width: 15px; height: 15px; flex: none; }
.cs-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-link em { margin-left: auto; font-style: normal; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: #fff; color: #047857; }
.cs-sales { display: flex; flex-direction: column; }
.cs-big { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cs-big b { font: 600 52px Outfit; letter-spacing: -.03em; line-height: 1; }
.cs-fee { font: 600 12.5px Inter; padding: 6px 11px; border-radius: 999px; background: var(--mist); color: var(--text); white-space: nowrap; transition: background .4s, color .4s; }
.cs-fee.drop { background: var(--emerald); color: #fff; animation: bump .6s var(--ease); }
.cs-bar { position: relative; height: 10px; border-radius: 10px; background: var(--mist); margin: 18px 0 8px; }
.cs-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 88.2%; border-radius: 10px; background: var(--aurora); transition: width .7s var(--ease); }
.cs-bar.done i { background: var(--emerald); }
.cs-mark { display: none; }
.cs-next { font-size: 13px; color: var(--dim); min-height: 20px; }
.cs-next b { color: var(--text); }
.cs-feed { display: grid; gap: 7px; margin-top: 14px; }
.cs-sale { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line); font-size: 13.5px; animation: rowin .7s var(--ease); }
.cs-sale small { display: block; font-size: 11.5px; color: var(--dim); }
.cs-sale .chip { margin-left: auto; }
.cs-toast { display: flex; gap: 11px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #0B1022; color: #fff; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s, transform .6s var(--ease); }
.cs-toast.on { opacity: 1; transform: none; }
.cs-toast b { display: block; font: 600 14px Inter; }
.cs-toast small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.cs-ti { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--aurora); display: grid; place-items: center; }
.cs-ti svg { width: 17px; height: 17px; }
.cs-sales .demo-light { right: 18px; bottom: 10px; }
.cs-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin: 22px auto 0; }
.cs-points > div { padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: rgba(255, 255, 255, .66); line-height: 1.5; }
.cs-points b { display: block; margin: 12px 0 4px; font: 600 17px Outfit; color: #fff; }
.cs-pi { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(165, 180, 252, .14); color: #C7D2FE; }
.cs-pi svg { width: 18px; height: 18px; }
/* calculator */
.cs-calc { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; max-width: 1000px; margin: 22px auto 0; border-radius: 30px; overflow: hidden; background: #fff; color: var(--text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.cc-in { padding: 34px; }
.cc-in .kicker { color: var(--violet-600); }
.cc-in h3 { font-size: 28px; line-height: 1.12; margin-top: 8px; }
.cc-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; margin-top: 24px; font-size: 15px; color: var(--dim); }
.cc-row b { font: 600 20px Outfit; color: var(--text); }
.cc-row input { grid-column: 1 / -1; width: 100%; margin: 10px 0 0; accent-color: var(--violet); height: 28px; cursor: pointer; }
.cc-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--dim); }
.cc-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); }
.cc-seg button { position: relative; z-index: 1; height: 36px; padding: 0 16px; border-radius: 999px; font: 600 14px Inter; color: var(--dim); transition: color .25s; white-space: nowrap; }
.cc-seg button[aria-pressed="true"] { color: var(--text); }
.cc-seg .knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), width .45s var(--ease); }
.cc-out { padding: 34px; background: var(--mist); display: flex; flex-direction: column; }
.cc-out > small { font-size: 14px; color: var(--dim); }
.cc-keep { font: 600 58px Outfit; letter-spacing: -.035em; line-height: 1.05; margin-top: 4px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-sub { font-size: 14.5px; color: var(--dim); margin-top: 6px; min-height: 44px; }
.cc-sub b { color: var(--text); }
.cc-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 150px; margin-top: 18px; }
.cc-ladder > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-align: center; }
.cc-ladder i { width: 100%; border-radius: 12px 12px 5px 5px; background: #DDE1F0; transition: height .6s var(--ease), background .4s; }
.cc-ladder b { font: 600 14px Outfit; margin-bottom: 6px; color: var(--dim); transition: color .3s; }
.cc-ladder small { font-size: 11px; color: var(--faint); margin-top: 6px; white-space: nowrap; }
.cc-ladder .past i { background: #C7D2FE; }
.cc-ladder .cur i { background: var(--aurora); }
.cc-ladder .cur b { color: var(--violet-600); }
.cc-note { font-size: 12px; color: var(--faint); margin-top: auto; padding-top: 16px; line-height: 1.5; }
@media (max-width: 1100px) {
  .cs-points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .course-sec { padding: 90px 0 80px; }
  .cs-stage { grid-template-columns: 1fr; margin-top: 36px; gap: 14px; }
  .cs-card { padding: 18px; border-radius: 24px; }
  .cs-title { font-size: 19px; }
  .cs-l { grid-template-columns: 26px 1fr; gap: 10px; }
  .cs-n { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
  .cs-att { grid-column: 2; justify-self: start; margin-top: -2px; }
  .cs-big b { font-size: 42px; }
  .cs-points { grid-template-columns: 1fr; gap: 10px; }
  .cs-points > div { padding: 16px 18px; display: grid; grid-template-columns: 36px 1fr; gap: 2px 14px; }
  .cs-points .cs-pi { grid-row: span 2; }
  .cs-points b { margin: 0; }
  .cs-calc { grid-template-columns: 1fr; border-radius: 24px; }
  .cc-in, .cc-out { padding: 22px; }
  .cc-in h3 { font-size: 23px; }
  .cc-keep { font-size: 46px; }
  .cc-ladder { height: 130px; gap: 6px; }
  .cc-ladder small { font-size: 10px; }
}
/* ==========================================================================
   Für jeden Sport: a menu of pills, and photo panels that open wide
   ========================================================================== */
.sports { padding: 120px 0 110px; }
.sp-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 34px auto 0; max-width: 900px; }
.sp-pill { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14.5px Inter; color: var(--dim); transition: background .3s, color .3s, border-color .3s, transform .2s; white-space: nowrap; }
.sp-pill:hover { color: var(--text); border-color: #cfd4e2; }
.sp-pill:active { transform: scale(.96); }
.sp-pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sp-pill.sp-more { border-style: dashed; }
.sp-pill.sp-more.on { border-style: solid; background: var(--violet); border-color: var(--violet); }
.sp-stage { display: flex; gap: 10px; height: 540px; margin-top: 30px; }
.sp-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 28px; overflow: hidden; cursor: pointer; background: var(--ink); isolation: isolate; transition: flex-grow .8s var(--ease); }
.sp-panel.on { flex-grow: 10; cursor: default; }
.sp-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.sp-panel.on img { transform: scale(1); }
.sp-panel:before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 16, 34, .55); transition: opacity .6s; }
.sp-panel:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 10, 28, .92) 0%, rgba(8, 10, 28, .5) 36%, rgba(8, 10, 28, 0) 64%); opacity: 0; transition: opacity .6s; }
.sp-panel.on:before { opacity: 0; }
.sp-panel.on:after { opacity: 1; }
.sp-panel:not(.on):hover:before { opacity: .6; }
.sp-vert { position: absolute; left: 50%; bottom: 22px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: 600 17px Outfit; letter-spacing: .01em; color: #fff; white-space: nowrap; transition: opacity .35s; }
.sp-panel.on .sp-vert { opacity: 0; }
.sp-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease); pointer-events: none; }
.sp-panel.on .sp-body { opacity: 1; transform: none; transition: opacity .5s .35s, transform .7s var(--ease) .35s; pointer-events: auto; }
.sp-body { min-width: 420px; }
.sp-num { display: block; font: 600 13px Inter; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.sp-body h3 { color: #fff; font-size: 44px; line-height: 1.02; letter-spacing: -.03em; margin-top: 6px; }
.sp-body p { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.5; max-width: 520px; margin-top: 10px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sp-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); font: 600 13.5px Inter; color: #fff; white-space: nowrap; }
.sp-chip svg { width: 15px; height: 15px; }
.sp-yours { background: linear-gradient(140deg, #312E81 0%, #6D28D9 50%, #BE185D 100%); }
.sp-yours:before { background: rgba(11, 16, 34, .25); }
.sp-yours:after { background: linear-gradient(to top, rgba(8, 10, 28, .6), rgba(8, 10, 28, 0) 60%); }
.sp-cloud { position: absolute; inset: 30px 30px 45% 30px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; opacity: 0; transition: opacity .5s .3s; }
.sp-panel.on .sp-cloud { opacity: 1; }
.sp-cloud span { padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 600 15px Inter; animation: floaty 6s ease-in-out infinite; }
.sp-cloud span:nth-child(3n) { animation-delay: -2s; } .sp-cloud span:nth-child(3n+1) { animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-6px); } }
.sp-demo { text-align: right; font-size: 11px; color: var(--faint); margin-top: 8px; }
.sp-cta { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 1100px) {
  .sp-stage { height: 500px; gap: 8px; }
  .sp-panel.on { flex-grow: 12; }
  .sp-body { min-width: 360px; padding: 28px; }
  .sp-body h3 { font-size: 36px; }
}
@media (max-width: 860px) {
  .sports { padding: 90px 0 80px; }
  .sp-menu { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 26px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .sp-menu::-webkit-scrollbar { display: none; }
  .sp-pill { height: 40px; padding: 0 16px; font-size: 14px; scroll-snap-align: center; }
  .sp-stage { display: grid; height: 460px; margin-top: 18px; }
  .sp-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; border-radius: 24px; }
  .sp-panel.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
  .sp-vert { display: none; }
  .sp-body { min-width: 0; padding: 22px; }
  .sp-body h3 { font-size: 32px; }
  .sp-body p { font-size: 15.5px; }
  .sp-chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .sp-cloud { inset: 22px 22px 48% 22px; gap: 8px; }
  .sp-cloud span { padding: 7px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sp-cloud span { animation: none; } }
/* ==========================================================================
   The intro: the logo draws itself fullscreen, then flies into the nav.
   Only when html.has-intro is set by the head script.
   ========================================================================== */
.intro { display: none; }
html.has-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 500; cursor: pointer; }
.intro:before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 44%, #1E1B63 0%, #0D0C31 46%, #05050F 100%); transition: opacity .75s var(--ease) .1s; }
html.has-intro body { overflow: hidden; }
html.has-intro .nav .logo img, html.has-intro .nav .logo b { opacity: 0; transition: none; }
.intro-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.intro-mark { width: 190px; height: 190px; overflow: visible; transform-origin: 0 0; }
.intro-mark .in-bg { opacity: 0; }
.intro-mark .in-ch { stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 44px rgba(34, 211, 238, .45)); animation: inDraw 1s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
.intro-mark .in-dot { transform-box: fill-box; transform-origin: center; transform: translateY(-320px) scale(0); filter: drop-shadow(0 0 36px rgba(34, 211, 238, .7)); animation: inDot .75s cubic-bezier(.34, 1.56, .64, 1) 1s forwards; }
@keyframes inDraw { to { stroke-dashoffset: 0; } }
@keyframes inDot { 60% { transform: translateY(16px) scale(1.08); } to { transform: none; } }
.intro-word { margin-top: 40px; font: 600 76px Outfit; letter-spacing: -.035em; color: #fff; line-height: 1; display: flex; transform-origin: 0 0; }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(26px); filter: blur(6px); animation: inLetter .7s var(--ease) forwards; }
@keyframes inLetter { to { opacity: 1; transform: none; filter: blur(0); } }
.intro-tag { margin-top: 16px; font: 500 16px Inter; letter-spacing: .02em; color: rgba(199, 210, 254, .75); opacity: 0; animation: inFade .8s var(--ease) 1.75s forwards; }
@keyframes inFade { to { opacity: 1; } }
/* skipped: jump every part to its end state */
.intro.skip .in-ch { animation: none; stroke-dashoffset: 0; }
.intro.skip .in-dot { animation: none; transform: none; }
.intro.skip .intro-word span { animation: none; opacity: 1; transform: none; filter: none; }
/* the exit: the backdrop fades, the mark and the word fly into the nav */
.intro.out { cursor: default; pointer-events: none; }
.intro.out:before { opacity: 0; }
.intro.out .intro-mark, .intro.out .intro-word { transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
.intro.out .intro-mark .in-bg { opacity: 1; transition: opacity .45s .3s; }
.intro.out .in-ch, .intro.out .in-dot { filter: none; }
.intro.out .intro-word { color: var(--text); transition: transform .9s cubic-bezier(.7, 0, .2, 1), color .5s .25s; }
.intro.out .intro-tag { opacity: 0 !important; animation: none; transition: opacity .2s; }
@media (max-width: 860px) {
  .intro-mark { width: 124px; height: 124px; }
  .intro-word { font-size: 52px; margin-top: 28px; }
  .intro-tag { font-size: 14.5px; }
}
/* bento: wearables (not live yet, so it carries "Bald"), cash on site, course lessons */
.bt .soon { position: absolute; top: 16px; right: 16px; z-index: 2; }
.wear { width: 100%; display: grid; gap: 7px; }
.wr { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: #fff; font: 600 13px Inter; }
.wd { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tg { margin-left: auto; width: 30px; height: 18px; border-radius: 999px; background: #E2E8F0; position: relative; transition: background .35s; flex: none; }
.tg:after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); transition: transform .35s var(--ease); }
.play .tg { background: var(--emerald); }
.play .tg:after { transform: translateX(12px); }
.play .wr:nth-child(1) .tg, .play .wr:nth-child(1) .tg:after { transition-delay: .5s; }
.play .wr:nth-child(2) .tg, .play .wr:nth-child(2) .tg:after { transition-delay: .9s; }
.play .wr:nth-child(3) .tg, .play .wr:nth-child(3) .tg:after { transition-delay: 1.3s; }
.wimp { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 7px 10px; border-radius: 10px; font: 600 12px Inter; color: #047857; background: var(--emerald-50); opacity: 0; transform: translateY(6px); transition: opacity .4s 1.9s, transform .5s var(--ease) 1.9s; }
.wimp svg { width: 12px; height: 12px; }
.play .wimp { opacity: 1; transform: none; }
.cash { width: 100%; display: grid; gap: 10px; }
.cr { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #fff; font-size: 13px; }
.cr b { display: block; font-size: 13.5px; }
.cr small { font-size: 11.5px; color: var(--dim); }
.cst { margin-left: auto; display: inline-grid; }
.cst i, .cbtn > span { grid-area: 1 / 1; transition: opacity .35s, transform .45s var(--ease); }
.cst i { font: 600 11px Inter; font-style: normal; padding: 4px 8px; border-radius: 999px; }
.cst .st-a { background: #FEF3C7; color: #92400E; }
.cst .st-b { background: var(--emerald-50); color: #047857; opacity: 0; transform: scale(.8); }
.cbtn { display: grid; place-items: center; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 13px Inter; transition: background .35s .9s, transform .2s .75s; }
.cbtn .st-b { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(6px); }
.cbtn svg { width: 13px; height: 13px; }
.play .cbtn { background: var(--emerald); animation: tap .3s ease .8s; }
.play .cbtn .st-a { opacity: 0; transform: translateY(-6px); transition-delay: .95s; }
.play .cbtn .st-b { opacity: 1; transform: none; transition-delay: .95s; }
.play .cst .st-a { opacity: 0; transition-delay: 1.1s; }
.play .cst .st-b { opacity: 1; transform: none; transition-delay: 1.1s; }
@keyframes tap { 50% { transform: scale(.95); } }
.cles { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font: 600 11px Inter; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.cles svg { position: static; width: 12px; height: 12px; color: var(--violet); }
.cs-sale.old { animation: none; opacity: .7; }
.soon + .bv { padding-top: 30px; }
.cr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; }
.cr .cn { min-width: 0; }
.cr .cn b, .cr .cn small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cst { margin-left: 0; justify-items: end; }
.cst i { white-space: nowrap; }
@media (min-width: 861px) { .nw { white-space: nowrap; } }
@media (max-width: 860px) { .sports .nw { white-space: nowrap; } }
/* the narrowest phones: 'Such dir deinen Sport.' is wider than 288px, so there it may wrap */
@media (max-width: 359px) { .sports .nw { white-space: normal; } }
/* ==========================================================================
   Warum Fitiva: the category comparison (no competitor names on purpose)
   ========================================================================== */
.why { padding: 120px 0 110px; background: linear-gradient(#fff, var(--mist)); }
.why-block .lede { max-width: 760px; }
.why-pick { display: none; }
.why-card { margin: 46px auto 0; max-width: 1040px; background: #fff; border-radius: 30px; box-shadow: var(--shadow-md); border: 1px solid var(--line); padding: 8px 10px 10px; }
.why-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.why-t th, .why-t td { padding: 15px 16px; text-align: center; vertical-align: middle; font-size: 14.5px; }
.why-t thead th { font: 600 13px Inter; color: var(--dim); padding-top: 20px; padding-bottom: 16px; }
.why-t thead th:first-child { width: 30%; }
.why-t tbody th { text-align: left; font: 600 15px Inter; color: var(--text); }
.why-t tbody tr + tr th, .why-t tbody tr + tr td { border-top: 1px solid var(--line); }
.why-t td.fit, .why-t th.fit { background: linear-gradient(180deg, rgba(99, 102, 241, .07), rgba(219, 39, 119, .05)); }
.why-t thead th.fit { border-radius: 20px 20px 0 0; }
.why-t tbody tr:last-child td.fit { border-radius: 0 0 20px 20px; }
.why-t tbody tr + tr td.fit { border-top-color: rgba(99, 102, 241, .14); }
.why-logo { display: inline-flex; align-items: center; gap: 8px; font: 700 16px Outfit; color: var(--text); letter-spacing: -.01em; }
.why-logo img { width: 26px; height: 26px; border-radius: 7px; }
.why-t .yes, .why-t .no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
.why-t .yes { background: var(--emerald-50); color: #047857; }
.why-t .no { background: #F1F2F6; color: #A3AAB9; }
.why-t .yes svg, .why-t .no svg { width: 14px; height: 14px; }
.why-t td.fit .yes { background: var(--emerald); color: #fff; box-shadow: 0 6px 14px -6px rgba(16, 185, 129, .7); }
.why-t small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--dim); }
.why-t td.fit small { color: var(--text); font-weight: 500; }
.why-t .part { display: inline-block; font-size: 13px; line-height: 1.35; color: var(--dim); }
/* the Fitiva column fills in, check after check */
.why-t td.fit > span { transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.why-t td.fit small { opacity: 0; transition: opacity .5s .15s; }
.why-card.in .why-t td.fit > span, .why-card.in .why-t td.fit small { transform: none; opacity: 1; }
.why-card.in .why-t tr:nth-child(2) td.fit > span { transition-delay: .08s; } .why-card.in .why-t tr:nth-child(3) td.fit > span { transition-delay: .16s; }
.why-card.in .why-t tr:nth-child(4) td.fit > span { transition-delay: .24s; } .why-card.in .why-t tr:nth-child(5) td.fit > span { transition-delay: .32s; }
.why-card.in .why-t tr:nth-child(6) td.fit > span { transition-delay: .4s; } .why-card.in .why-t tr:nth-child(7) td.fit > span { transition-delay: .48s; }
.why-card.in .why-t tr:nth-child(8) td.fit > span { transition-delay: .56s; }
.why-note { max-width: 1040px; margin: 12px auto 0; font-size: 12px; color: var(--faint); text-align: right; }
.why-k { text-align: center; margin-top: 64px; }
.why-only { display: grid; gap: 16px; max-width: 1040px; margin: 20px auto 0; }
.why-only.n3 { grid-template-columns: repeat(3, 1fr); }
.why-only.n4 { grid-template-columns: repeat(4, 1fr); }
.why-only > div { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px; font-size: 14.5px; color: var(--dim); line-height: 1.5; }
.why-only b { display: block; margin: 14px 0 6px; font: 600 18px Outfit; color: var(--text); letter-spacing: -.01em; line-height: 1.25; }
.why-oi { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--aurora); color: #fff; }
.why-oi svg { width: 19px; height: 19px; }
@media (max-width: 1100px) {
  .why-only.n4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .why { padding: 90px 0 80px; }
  .why-pick { display: flex; gap: 6px; margin: 28px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
  .why-pick::-webkit-scrollbar { display: none; }
  .why-pick button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 13px Inter; color: var(--dim); white-space: nowrap; }
  .why-pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .why-card { margin-top: 14px; border-radius: 24px; padding: 4px 6px 6px; }
  .why-t th, .why-t td { padding: 13px 8px; font-size: 13.5px; }
  .why-t thead th:first-child { width: 42%; }
  .why-t tbody th { font-size: 14px; }
  .why-t[data-col="0"] .wc1, .why-t[data-col="0"] .wc2, .why-t[data-col="1"] .wc0, .why-t[data-col="1"] .wc2, .why-t[data-col="2"] .wc0, .why-t[data-col="2"] .wc1 { display: none; }
  .why-t small { font-size: 11.5px; }
  .why-logo { font-size: 14px; } .why-logo img { width: 22px; height: 22px; }
  .why-note { text-align: left; }
  .why-k { margin-top: 48px; }
  .why-only.n3, .why-only.n4 { grid-template-columns: 1fr; gap: 10px; }
  .why-only > div { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 18px; }
  .why-only .why-oi { grid-row: span 2; }
  .why-only b { margin: 0; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .why-t td.fit > span, .why-t td.fit small { transform: none; opacity: 1; transition: none; } }
.why-t thead th.wc0, .why-t thead th.wc1, .why-t thead th.wc2 { width: 16.5%; }
.why-t thead th.fit { width: 20.5%; }
@media (max-width: 860px) { .why-t thead th.wc0, .why-t thead th.wc1, .why-t thead th.wc2, .why-t thead th.fit { width: auto; } }
.why-t .part, .why-t small { text-wrap: balance; }
.why-t td.fit .part { color: var(--text); font: 700 16px Outfit; }

/* ==========================================================================
   The first screen: two worlds (Leon, 2026-09-28, a trial). The athlete world
   warm, the coach world cool: two photos graded into the two palettes
   (assets/worlds-*.jpg), the headline where they meet, one big button on each
   side. The page's own audience is on the left (on a phone on top).
   On a desktop the side under the pointer (or the keyboard focus) grows from
   half to 58 % of the width, all in transforms: each side is a window as wide
   as the stage whose edge is the seam (it slides), and its photo box slides
   half as far back, so the photo stays centred in what is left of the window.
   Every class starts with tw.
   ========================================================================== */
.tw { --tw-in: 12px; --tw-r: 28px; --tw-ease: cubic-bezier(.2, .8, .2, 1);
  /* the buttons sit this far above the bottom. "Nie allein." (prototype zusammen) sits higher, under the chins
     and over the phones in their hands: the sub line ends 45.5 % of the stage height above its bottom (on
     wide screens the photos run lower, so a little less), about 28 px over the higher phone */
  --tw-pb: clamp(30px, 7vh, 76px); --tw-say: calc((clamp(600px, 100vh, 1500px) - 80px) * .455); --tw-say: calc((clamp(600px, 100svh, 1500px) - 80px) * .455);
  position: relative; height: 100vh; height: 100svh; min-height: 600px; max-height: 1500px; padding: 68px var(--tw-in) var(--tw-in); }
.tw-stage { position: relative; height: 100%; border-radius: var(--tw-r); overflow: hidden; isolation: isolate; background: #140B1E;
  box-shadow: 0 30px 80px rgba(30, 27, 75, .16); }
.tw-side { position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden; cursor: pointer; }
.tw-side:nth-child(1) { right: 50%; }
.tw-side:nth-child(2) { left: 50%; }
/* the photo box: 58.33 % of the stage (the widest a side gets), centred in its side at rest */
.tw-box { position: absolute; top: 0; bottom: 0; width: 58.3333%; }
.tw-side:nth-child(1) .tw-box { left: 45.8333%; }
.tw-side:nth-child(2) .tw-box { left: -4.1667%; }
.tw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 50% 40%;
  transition: transform 1.6s var(--tw-ease); }
.tw-a .tw-img { object-position: 62% 24%; }
.tw-c .tw-img { object-position: 46% 20%; }
.tw-stage.in .tw-img { transform: none; }
html.intro-hold .tw-stage.in .tw-img { transform: scale(1.08); }
/* the light on each side: a veil for the words over the photo, deeper towards the button */
.tw-box:before, .tw-box:after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .8s var(--tw-ease); }
.tw-box:before { background: linear-gradient(180deg, rgba(12, 6, 24, .16) 0%, rgba(12, 6, 24, .30) 34%, rgba(12, 6, 24, .46) 58%, rgba(12, 6, 24, .80) 100%); }
/* the other side calms down while one is chosen */
.tw-box:after { background: rgba(10, 8, 26, .42); opacity: 0; }
/* the seam: a thread of light where the two worlds meet */
.tw-side:nth-child(2):before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38) 30%, rgba(255, 255, 255, .38) 70%, rgba(255, 255, 255, 0)); }
/* the thread steps aside where the headline and the sub line cross it (site.js sets the band) */
@media (min-width: 861px) {
  /* (without the script: where the layout puts them, the sub line's foot --tw-say over the stage's foot) */
  .tw-side:nth-child(2):before { --bt: var(--tw-bt, calc(100% - var(--tw-say) - 40px - 1.02 * clamp(60px, min(7.2vw, 11vh), 124px))); --bb: var(--tw-bb, calc(100% - var(--tw-say) + 6px));
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--bt) - 28px), transparent var(--bt), transparent var(--bb), #000 calc(var(--bb) + 28px));
    mask-image: linear-gradient(180deg, #000 calc(var(--bt) - 28px), transparent var(--bt), transparent var(--bb), #000 calc(var(--bb) + 28px)); }
}

/* the headline over both worlds, low enough to leave the faces free */
.tw-mid { position: absolute; z-index: 3; top: 68px; left: var(--tw-in); right: var(--tw-in); bottom: var(--tw-in);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px var(--tw-say);
  text-align: center; pointer-events: none; }
.tw-mid:before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(var(--tw-say) - 150px); width: min(1180px, 100%); height: 460px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(12, 6, 26, .54), rgba(12, 6, 26, .28) 55%, rgba(12, 6, 26, 0)); }
/* "Nie allein." is painted by the worlds: two stacked inks in one grid cell. The h1 is the left world's
   ink up to --split (the seam, measured from the headline's left edge), the copy next to it the right
   world's from there on, so the seam cuts through a letter. Each ink runs its whole gradient over its own
   part. site.js moves --split: a chosen side paints more of the headline, a moment that crosses carries
   its colour through it. Without @property it simply stays at the seam (50 %, the headline is centred on it). */
@property --split { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
.tw-head { position: relative; display: grid; justify-items: center; filter: drop-shadow(0 2px 24px rgba(8, 4, 20, .38)); }
.tw-ink { grid-area: 1 / 1; position: relative; margin: 0; padding: 0 .08em; font: 800 clamp(60px, min(7.2vw, 11vh), 124px) / 1.02 Outfit, Inter, sans-serif;
  letter-spacing: -.045em; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; }
.tw-ink-l { background-image: linear-gradient(96deg, #FFC48E 0%, #FF8DB0 100%); background-size: var(--split, 50%) 100%;
  clip-path: inset(-.25em calc(100% - var(--split, 50%)) -.25em -.25em); }
.tw-ink-r { background-image: linear-gradient(96deg, #B7BEFF 0%, #7FD6FF 100%); background-size: calc(100% - var(--split, 50%)) 100%; background-position: 100% 0;
  clip-path: inset(-.25em -.25em -.25em var(--split, 50%)); }
body[data-aud="coach"] .tw-ink-l { background-image: linear-gradient(96deg, #B7BEFF 0%, #7FD6FF 100%); }
body[data-aud="coach"] .tw-ink-r { background-image: linear-gradient(96deg, #FFC48E 0%, #FF8DB0 100%); }
/* the opening's white headline (a copy the script in #top makes): "allein." alone, then "Nie" rises */
.tw-ink-0 { color: #fff; background: none; }
.tw-seo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tw-ink-0 .tw-w1, .tw-ink-0 .tw-w2, .tw-ink-0 .tw-l { display: inline-block; }
.tw-ink-0 .tw-w1 { clip-path: inset(-50% -30% 0 -30%); }
.tw-sub { margin-top: clamp(10px, 1.5vh, 16px); font-size: clamp(16px, min(1.5vw, 2.4vh), 21px); font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .9); letter-spacing: -.005em;
  text-shadow: 0 1px 16px rgba(8, 4, 20, .5); }
/* a soft light where the seam's thread crosses the headline (the opening) */
.tw-flash { position: absolute; z-index: -1; left: 0; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 226, 240, .18) 45%, rgba(255, 255, 255, 0)); }
/* desktop: the right hand person is mirrored, so both face the seam and their phones flank it. Lena's
   desktop photo is a wider cut of the same shot (the river on past her phone, the far bank retouched),
   so her phone sits a good way from the seam on both pages */
@media (min-width: 861px) {
  .tw-side:nth-child(2) .tw-img { scale: -1 1; }
  .tw-side:nth-child(2).tw-c .tw-img { object-position: 54% 20%; }
  /* the wide Lena (assets/worlds-ath-wide-*.jpg, the river runs on past her phone): where the photo is cut
     at its sides, the cut goes to the river side, so her phone stays well clear of the seam */
  .tw-a .tw-img { object-position: 100% 24%; }
}

/* the choice on each side: who it is for, the button, and on a desktop the one line when chosen */
.tw-pick { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--tw-pb); padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.tw-kick { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 14px rgba(8, 4, 20, .45); }
.tw-kick svg { width: 16px; height: 16px; flex: none; }
.tw-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 16px; height: 64px; padding: 0 10px 0 30px; border-radius: 999px;
  background: #fff; color: var(--ink); font: 600 19px/1 Inter, sans-serif; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 18px 44px rgba(8, 4, 24, .34), 0 2px 6px rgba(8, 4, 24, .12); transition: transform .45s var(--tw-ease), box-shadow .45s var(--tw-ease); }
.tw-arr { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.tw-arr svg { width: 20px; height: 20px; transition: transform .45s var(--tw-ease); }
.tw-a .tw-arr { background: linear-gradient(135deg, #FB923C 0%, #E11D48 100%); }
.tw-c .tw-arr { background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%); }
.tw-go:hover { transform: translateY(-2px); box-shadow: 0 24px 54px rgba(8, 4, 24, .42), 0 2px 6px rgba(8, 4, 24, .12); }
.tw-go:hover .tw-arr svg { transform: translateX(3px); }
.tw-go:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 999px; }
.tw-line { margin-top: 14px; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 14px rgba(8, 4, 20, .5); }

/* ---------------------------------------------------------------- a desktop: the chosen side grows */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .tw-line { opacity: .8; transition: opacity .5s var(--tw-ease); }
  .tw-side:hover .tw-line, .tw-side:has(:focus-visible) .tw-line { opacity: 1; }
  .tw-side:hover .tw-box:before, .tw-side:has(:focus-visible) .tw-box:before { opacity: .72; }
  .tw-stage:has(> .tw-side:hover, > .tw-side :focus-visible) > .tw-side:not(:hover):not(:has(:focus-visible)) .tw-box:after { opacity: 1; }
  .tw-pick { transition: opacity .6s var(--tw-ease), transform .95s var(--tw-ease); }
}
/* (never during the opening: the worlds are still gliding together) */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tw-side, .tw-box { transition: transform .95s var(--tw-ease); }
  .tw:not(.is-op) .tw-stage.in .tw-side:hover .tw-img, .tw:not(.is-op) .tw-stage.in .tw-side:has(:focus-visible) .tw-img { transform: scale(1.05); transition-duration: 1.3s; }
  .tw:not(.is-op) .tw-stage:has(> .tw-side:nth-child(1):hover, > .tw-side:nth-child(1) :focus-visible) > .tw-side { transform: translateX(8.3333%); }
  .tw:not(.is-op) .tw-stage:has(> .tw-side:nth-child(1):hover, > .tw-side:nth-child(1) :focus-visible) .tw-box { transform: translateX(-7.1429%); }
  .tw:not(.is-op) .tw-stage:has(> .tw-side:nth-child(2):hover, > .tw-side:nth-child(2) :focus-visible) > .tw-side { transform: translateX(-8.3333%); }
  .tw:not(.is-op) .tw-stage:has(> .tw-side:nth-child(2):hover, > .tw-side:nth-child(2) :focus-visible) .tw-box { transform: translateX(7.1429%); }
}
/* the logo intro holds the first screen */
html.intro-hold .tw .rv.in { opacity: 0; transform: translateY(26px); }
/* leaving the first screen: the photos drift slower than the page and the words lift away
   (scroll driven, on the compositor; translate, so the hover's transform stays its own) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tw-img { animation: tw-drift linear both; animation-timeline: --tw; animation-range: exit 0% exit 100%; }
    .tw-mid { animation: tw-lift linear both; animation-timeline: --tw; animation-range: exit 0% exit 42%; }
    .tw { view-timeline: --tw block; }
  }
}
@keyframes tw-drift { to { translate: 0 16%; } }
@keyframes tw-lift { to { translate: 0 -40px; opacity: 0; } }

/* ---------------------------------------------------------------- short and narrow desktops */
@media (min-width: 861px) and (max-height: 760px) {
  .tw-go { height: 56px; font-size: 17.5px; padding-left: 26px; }
  .tw-arr { width: 40px; height: 40px; }
  .tw-go { margin-top: 12px; }
  .tw-line { margin-top: 10px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .tw-go { height: 58px; font-size: 18px; padding-left: 26px; gap: 14px; }
  .tw-arr { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- phones and tablets: the worlds stacked, the headline above them */
@media (max-width: 860px) {
  .tw { --tw-in: 8px; --tw-r: 24px; display: flex; flex-direction: column; min-height: 560px; max-height: none; }
  .tw-mid { position: relative; inset: auto; padding: clamp(4px, 1.4vh, 14px) 12px clamp(12px, 2vh, 20px); }
  .tw-mid:before { display: none; }
  /* the headline in ink on white above the worlds: "Nie" in the first world's gradient, "allein." in the second's */
  .tw-head { filter: none; }
  .tw-ink { font-size: clamp(40px, 11vw, 54px); line-height: 1.05; }
  .tw-ink-l, body[data-aud="coach"] .tw-ink-l { background: none; clip-path: none; }
  .tw-ink-l .tw-w1, .tw-ink-l .tw-w2 { -webkit-background-clip: text; background-clip: text; color: transparent; }
  .tw-ink-l .tw-w1, body[data-aud="coach"] .tw-ink-l .tw-w2 { background-image: linear-gradient(96deg, var(--dh-warm-a) 0%, var(--dh-warm-b) 100%); }
  .tw-ink-l .tw-w2, body[data-aud="coach"] .tw-ink-l .tw-w1 { background-image: linear-gradient(96deg, var(--dh-cool-a) 0%, var(--dh-cool-b) 100%); }
  .tw-ink-r { display: none; }
  .tw-ink-0 { color: #3A3F4F; }
  .tw-sub { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--dim); text-shadow: none; text-wrap: balance; }
  .tw-sub > span { display: block; }
  .tw-stage { flex: 1; min-height: 0; box-shadow: none; }
  .tw-side { left: 0; right: 0; width: auto; height: 50%; }
  .tw-side:nth-child(1) { top: 0; bottom: auto; right: 0; }
  .tw-side:nth-child(2) { top: 50%; bottom: 0; left: 0; }
  .tw-side:nth-child(2):before { right: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, 0)); }
  .tw-side:nth-child(n) .tw-box { left: 0; width: 100%; }
  .tw-box:before { background: linear-gradient(180deg, rgba(12, 6, 24, .04) 18%, rgba(12, 6, 24, .36) 48%, rgba(12, 6, 24, .84) 100%); }
  /* her face and her phone (at the photo's edge on a phone) both in the low photo */
  .tw-a .tw-img { object-position: 60% 35%; }
  .tw-c .tw-img { object-position: 50% 18%; }
  .tw-pick { left: 0; right: 0; bottom: clamp(12px, 2.2vh, 20px); padding: 0 18px; align-items: flex-start; text-align: left; }
  .tw-kick { font-size: 11.5px; letter-spacing: .14em; gap: 7px; }
  .tw-kick svg { width: 14px; height: 14px; }
  .tw-go { margin-top: 9px; height: 54px; padding: 0 7px 0 22px; gap: 12px; font-size: 17px; }
  .tw-arr { width: 40px; height: 40px; }
  .tw-arr svg { width: 18px; height: 18px; }
  .tw-line { margin-top: 8px; font-size: 14.5px; }
}
/* tablets upright: the wide Lena (as on a desktop), her face and her phone both in the low photo */
@media (min-width: 640px) and (max-width: 860px) { .tw-a .tw-img { object-position: 60% 38%; } }
/* phones with little height: the one line steps back, the button stays */
@media (max-width: 860px) and (max-height: 720px) {
  .tw-line { display: none; }
}

/* ---------------------------------------------------------------- the way to the other side, while reading
   The signpost after the first chapter (once per page), and a quiet "you are here" over the first one. */
.aud-post { display: flex; justify-content: center; margin: -48px 0 56px; }
.aud-post a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 18px 6px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 15px; line-height: 1.3; color: var(--dim);
  transition: border-color .3s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.aud-post a:hover { border-color: #D5D9E6; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.aud-post b { font-weight: 600; color: var(--text); }
.ap-ic { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.ap-ic svg { width: 17px; height: 17px; }
.aud-post[data-for="athlete"] .ap-ic { background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%); }
.aud-post[data-for="coach"] .ap-ic { background: linear-gradient(135deg, #FB923C 0%, #E11D48 100%); }
.ap-go { width: 16px; height: 16px; flex: none; color: var(--violet-600); transition: transform .3s var(--ease); }
.aud-post a:hover .ap-go { transform: translateX(3px); }
.collapse .here { position: absolute; z-index: 1; top: max(84px, calc(15vh - 40px)); left: 0; right: 0; margin: 0; padding: 0 var(--gutter); text-align: center;
  font: 600 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.here i { font-style: normal; margin: 0 .7em; }
.here a { color: var(--violet-600); text-decoration: underline; text-decoration-color: rgba(79, 70, 229, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.here a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .aud-post { margin: -30px 0 40px; }
  .aud-post a { font-size: 14px; gap: 10px; padding-right: 14px; }
  .ap-ic { width: 32px; height: 32px; }
}

/* Nie allein (prototype zusammen, Leon 2026-09-28): what crosses the seam, and the opening.
   site.js ("Nie allein") moves and shows these; every word on a card is in the HTML (#twLive). */
.tw-live { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tw-live > i, .tw-glow, .tw-card { position: absolute; left: 0; top: 0; }
/* the seam's thread: drawn once by the opening, and a short segment lights where a moment crosses */
.tw-thread { width: 1px; height: 100%; margin-left: -.5px; transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 6%, #fff 94%, rgba(255, 255, 255, 0)); box-shadow: 0 0 6px 1px rgba(255, 255, 255, .95), 0 0 16px 4px rgba(255, 226, 242, .75), 0 0 44px 10px rgba(214, 200, 255, .35); }
/* the spark that runs ahead of the thread when the seam fires (the opening), its tail behind it */
.tw-spark { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; background: #fff;
  box-shadow: 0 0 8px 2px #fff, 0 0 26px 8px rgba(255, 214, 236, .75), 0 0 64px 22px rgba(200, 190, 255, .35); }
.tw-spark:before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; height: 140px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); }
/* where a moment crosses: the seam lights along a stretch of it */
.tw-hit { width: 2px; height: 160px; margin: -80px 0 0 -1px; border-radius: 2px; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)); box-shadow: 0 0 18px 3px rgba(255, 255, 255, .55); }
/* and the sender's colour runs a little way into the other photo (a colour blend over the photos, under the choices) */
.tw-bleed { position: absolute; left: 0; top: 0; width: 150px; height: 420px; margin: -210px 0 0 -75px; border-radius: 50%; pointer-events: none; opacity: 0;
  mix-blend-mode: color; background: radial-gradient(closest-side, var(--tw-bc, #FF7A59) 0%, var(--tw-bc, #FF7A59) 35%, transparent 100%); }
/* a phone lights up: its screen (an oval as long as the phone, turned like it: site.js), the light on the
   hands around it, and the screen's light on the face above it */
.tw-glow { width: 0; height: 0; }
.tw-glow i { position: absolute; border-radius: 50%; opacity: 0; }
.tw-glow i:first-child { left: -64px; top: -26px; width: 128px; height: 52px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .98) 0%, rgba(255, 242, 230, .85) 34%, rgba(255, 200, 164, .32) 68%, rgba(255, 176, 140, 0) 100%); }
.tw-glow i + i { left: -160px; top: -120px; width: 320px; height: 240px;
  background: radial-gradient(closest-side, rgba(255, 216, 188, .52) 0%, rgba(255, 170, 132, .2) 52%, rgba(255, 160, 120, 0) 100%); }
.tw-glow[data-at="c"] i:first-child { background: radial-gradient(closest-side, rgba(255, 255, 255, .98) 0%, rgba(232, 238, 255, .85) 34%, rgba(160, 182, 255, .32) 68%, rgba(130, 170, 255, 0) 100%); }
.tw-glow[data-at="c"] i + i { background: radial-gradient(closest-side, rgba(200, 214, 255, .52) 0%, rgba(140, 164, 255, .2) 52%, rgba(120, 160, 255, 0) 100%); }
.tw-shine { display: none; position: absolute; left: 0; top: 0; width: 440px; height: 360px; margin: -180px 0 0 -220px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 192, .6), rgba(255, 190, 150, .22) 55%, rgba(255, 190, 150, 0)); }
.tw-glow[data-at="c"] .tw-shine { background: radial-gradient(closest-side, rgba(200, 214, 255, .6), rgba(160, 180, 255, .22) 55%, rgba(160, 180, 255, 0)); }
/* a moment: a point that travels (the card), its two faces centred on it; the face in view has .on.
   A card comes out of a phone as light (the flash, site.js sizes it) and opens into the face. */
.tw-card { width: 0; height: 0; }
.tw-flash-f { position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 18px; opacity: 0;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, .5) 100%); box-shadow: 0 0 34px 10px rgba(255, 255, 255, .5); }
.tw-f { position: absolute; left: 0; top: 0; translate: -50% -50%; width: max-content; min-width: clamp(236px, 21vw, 380px); max-width: clamp(288px, 26vw, 440px);
  display: none; align-items: center; gap: clamp(11px, .9vw, 15px); padding: clamp(11px, .9vw, 15px) clamp(14px, 1.15vw, 19px) clamp(11px, .9vw, 15px) clamp(11px, .9vw, 15px);
  border-radius: clamp(16px, 1.35vw, 22px); color: #fff; text-align: left; opacity: 0; background: rgba(14, 10, 32, .5); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 50px -18px rgba(4, 2, 16, .75); }
.tw-f.on { display: flex; }
.tw-ic { flex: none; display: grid; place-items: center; width: clamp(34px, 3vw, 46px); height: clamp(34px, 3vw, 46px); border-radius: clamp(10px, .85vw, 13px); color: #fff; }
.tw-ic svg { width: clamp(18px, 1.5vw, 23px); height: clamp(18px, 1.5vw, 23px); }
.ic-a { background: linear-gradient(135deg, #FB923C 0%, #E11D48 100%); }
.ic-c { background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%); }
.ic-ava { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); --ava-dot: #22D3EE; --ava-sw: 2.4; }
.tw-tx { display: grid; min-width: 0; gap: 2px; }
.tw-tx b { font: 600 clamp(13.5px, 1.1vw, 18px)/1.3 Inter, sans-serif; letter-spacing: -.01em; }
.tw-tx small { font-size: clamp(12px, .95vw, 15px); line-height: 1.35; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
/* the coach's view: a row in his activity feed (name, type badge, the feed's own text) */
.tw-feed { flex-direction: column; align-items: stretch; gap: clamp(9px, .75vw, 12px); }
.tw-fh { display: flex; align-items: center; justify-content: space-between; font: 600 clamp(10.5px, .8vw, 12.5px)/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.tw-fh > span { display: inline-flex; align-items: center; gap: 6px; }
.tw-fh svg { width: 1.15em; height: 1.15em; color: #A5B4FC; }
.tw-fh em { font-style: normal; letter-spacing: .04em; text-transform: none; font-size: 1.05em; color: rgba(255, 255, 255, .6); }
.tw-row { display: flex; align-items: center; gap: clamp(11px, .9vw, 15px); }
.tw-tag { display: inline-block; margin-left: .45em; padding: .34em .5em .3em; border-radius: 5px; vertical-align: .14em; font: 700 .6em/1 Inter, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; font-style: normal; color: #FFD2B3; background: rgba(251, 146, 60, .24); }
/* a push on the lock screen: bright glass */
.tw-push { align-items: flex-start; color: #0F172A; background: rgba(252, 252, 253, .94); border-color: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(1.08); backdrop-filter: blur(28px) saturate(1.6) brightness(1.08); box-shadow: 0 24px 48px -18px rgba(4, 2, 16, .6); }
.tw-push img { width: clamp(30px, 2.5vw, 40px); height: clamp(30px, 2.5vw, 40px); border-radius: clamp(8px, .7vw, 10px); flex: none; margin-top: 1px; }
.tw-push .tw-tx b { font-size: clamp(13px, 1.05vw, 17px); line-height: 1.32; }
.tw-push .tw-tx small { color: rgba(15, 23, 42, .7); }
.tw-ph { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.tw-tx .tw-ph b { font: 600 clamp(11px, .85vw, 13.5px)/1.3 Inter, sans-serif; letter-spacing: .01em; color: rgba(15, 23, 42, .7); }
.tw-tx .tw-ph small { font-size: clamp(11px, .85vw, 13.5px); line-height: 1.3; color: rgba(15, 23, 42, .7); }
/* Ava's draft: the coach decides */
.tw-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: clamp(26px, 2.1vw, 34px); margin-top: 8px; padding: 0 clamp(10px, .85vw, 14px) 0 clamp(11px, .9vw, 15px); border-radius: 999px;
  font: 600 clamp(11.5px, .9vw, 14px)/1 Inter, sans-serif; letter-spacing: -.005em; color: #0F172A; background: #fff; transition: background .25s, color .25s; }
.tw-chip svg { width: 1em; height: 1em; opacity: 0; transition: opacity .25s; }
.tw-chip.is-on { color: #fff; background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%); }
.tw-chip.is-on svg { opacity: 1; }
/* a message on its way */
.tw-msg { padding-right: 12px; }
.tw-msg .tw-tx { flex: 1; }
.tw-send { flex: none; display: grid; place-items: center; width: clamp(28px, 2.3vw, 36px); height: clamp(28px, 2.3vw, 36px); border-radius: 50%; background: rgba(255, 255, 255, .14); }
.tw-send svg { width: 50%; height: 50%; }
.tw-demo { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: rgba(255, 255, 255, .55); }
/* ?debug=tw: the anchors, the face boxes, what a card keeps clear of and the slots it found */
.tw-dbg { position: absolute; inset: 0; }
.tw-dbg b { position: absolute; border: 1px dashed; font: 600 10px Inter, sans-serif; color: #fff; }
.tw-dbg i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; }
/* phones: compact moments in the free upper part of each photo (over the street lamps, over the gym), the thread across */
@media (max-width: 860px) {
  .tw-thread { width: 100%; height: 1px; margin: -.5px 0 0; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 8%, #fff 92%, rgba(255, 255, 255, 0)); }
  .tw-spark:before { height: 90px; }
  .tw-hit { width: 170px; height: 2px; margin: -1px 0 0 -85px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)); }
  .tw-bleed { width: 280px; height: 110px; margin: -55px 0 0 -140px; }
  .tw-glow i:first-child { left: -40px; top: -17px; width: 80px; height: 34px; }
  .tw-glow i + i { left: -95px; top: -72px; width: 190px; height: 144px; }
  .tw-shine { width: 240px; height: 200px; margin: -100px 0 0 -120px; }
  /* at most 200 px (site.js sets the width to the free room): compact, the tile shrinks */
  .tw-f { min-width: 0; max-width: none; gap: 8px; padding: 8px; border-radius: 13px; }
  .tw-ic { width: 22px; height: 22px; border-radius: 7px; }
  .tw-ic svg { width: 12px; height: 12px; }
  .tw-tx { gap: 1px; }
  .tw-tx b { font-size: 11.5px; line-height: 1.25; letter-spacing: -.005em; }
  .tw-tx small { font-size: 10.5px; line-height: 1.3; }
  .tw-feed { gap: 6px; padding: 7px 10px 8px 9px; }
  .tw-fh { font-size: 9px; letter-spacing: .08em; }
  .tw-fh em { display: none; }
  .tw-row { gap: 8px; }
  .tw-tag { font-size: 8px; padding: 3px 4px 2px; border-radius: 4px; }
  /* the feed card and the push give their width to the words: the tile and the app mark step back */
  .tw-feed .tw-row .tw-ic { display: none; }
  /* the side that acts: its tile becomes a small mark before the title (hanging), the words get the width */
  .tw-f > .tw-ic { position: absolute; left: 8px; top: 8px; width: 15px; height: 15px; border-radius: 5px; }
  .tw-f > .tw-ic svg { width: 9px; height: 9px; }
  .tw-f > .tw-ic + .tw-tx > b:first-child { text-indent: 20px; }
  .tw-tx small { text-wrap: balance; }
  .tw-msg > .tw-ic { display: none; }
  .tw-f.tw-msg > .tw-ic + .tw-tx > b:first-child { text-indent: 0; }
  .tw-msg { gap: 6px; padding-right: 8px; }
  .tw-push img { position: absolute; left: 9px; top: 8px; width: 13px; height: 13px; border-radius: 4px; margin: 0; }
  .tw-push .tw-tx b { font-size: 11.5px; }
  .tw-tx .tw-ph b, .tw-tx .tw-ph small { font-size: 10px; }
  .tw-tx .tw-ph b { padding-left: 18px; }
  .tw-opt { display: none; }
  .tw-chip { height: 21px; margin-top: 5px; padding: 0 7px; font-size: 9.5px; letter-spacing: -.015em; white-space: nowrap; }
  .tw-chip svg { display: none; }
  .tw-send { width: 20px; height: 20px; }
  .tw-send svg { width: 11px; height: 11px; }
  .tw-flash-f { border-radius: 13px; }
  /* a small phone: a pill with its title only (two lines at most) */
  .tw-f.is-pill { padding: 7px 10px 7px 8px; border-radius: 12px; }
  .tw-f.is-pill small, .tw-f.is-pill .tw-fh, .tw-f.is-pill .tw-chip, .tw-f.is-pill .tw-ph { display: none; }
  .tw-f.is-pill .tw-tx > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tw-push.is-pill .tw-tx > b { text-indent: 18px; }
  .tw-push.is-pill img { top: 7px; }
}
/* reduced motion: the composed still, nothing travels */
@media (prefers-reduced-motion: reduce) { .tw-live > :not(.tw-demo), .tw-bleed { display: none; } }

/* the opening: armed by the script in #top, played by site.js ("Nie allein"), gone after about 2.4 s.
   is-full (with the logo intro): the two worlds start apart and grey, two cards with their own rounded
   inner corners over a faint thread, the headline plain with only "allein."; they meet, "Nie" rises, the
   seam fires. is-flood (once per visit without the intro): grey, everything readable at once, the seam
   fires and the colour floods out. Kickers and buttons stand at full strength from the first frame and
   never move (the sides move, their choices move back the same way). */
.tw.is-op .tw-stage { background: #0C0618; }
.tw.is-op .tw-head.rv, .tw.is-op .tw-pick.rv, html.intro-hold .tw.is-op .tw-head.rv.in, html.intro-hold .tw.is-op .tw-pick.rv.in { opacity: 1; transform: none; transition: none; }
.tw.is-full .tw-sub.rv, html.intro-hold .tw.is-full .tw-sub.rv.in { opacity: 0; transform: none; transition: none; }
.tw.is-flood .tw-sub.rv { opacity: 1; transform: none; transition: none; }
.tw.is-op .tw-ink-l, .tw.is-op .tw-ink-r { clip-path: inset(0 100% 0 0); }
.tw.is-op .tw-img:not(.tw-grey) { clip-path: inset(0 0 0 100%); }
.tw.is-op .tw-ink-0 .tw-l { opacity: 0; }
.tw.is-op .tw-side:nth-child(2):before { opacity: 0; }
.tw-side:nth-child(2):before { transition: opacity .8s var(--tw-ease); }
.tw.op-done .rv { transition: none; }
.tw-grey { filter: grayscale(1) brightness(.78) contrast(1.05); }
/* apart: a narrow gap with a faint thread in it, each world's inner corners rounded and shaded */
.tw.is-op .tw-stage:before { content: ""; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 1px; margin-left: -.5px; opacity: .5;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(226, 216, 255, .7) 50%, rgba(255, 255, 255, 0)); animation: tw-idle 1.4s ease-in-out infinite alternate; }
@keyframes tw-idle { to { opacity: 1; } }
.tw-side:after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s var(--tw-ease); }
.tw-side:nth-child(1):after { box-shadow: inset -26px 0 34px -22px rgba(4, 2, 12, .85); }
.tw-side:nth-child(2):after { box-shadow: inset 26px 0 34px -22px rgba(4, 2, 12, .85); }
.tw-stage.is-gap > .tw-side:after { opacity: 1; }
.tw-stage.is-apart > .tw-side:nth-child(1) { translate: -24px 0; border-radius: 0 var(--tw-r) var(--tw-r) 0; }
.tw-stage.is-apart > .tw-side:nth-child(2) { translate: 24px 0; border-radius: var(--tw-r) 0 0 var(--tw-r); }
.tw-stage.is-apart > .tw-side:nth-child(1) .tw-pick { translate: 24px 0; }
.tw-stage.is-apart > .tw-side:nth-child(2) .tw-pick { translate: -24px 0; }
@media (max-width: 860px) {
  .tw.is-op .tw-stage:before { left: 12%; right: 12%; top: 50%; bottom: auto; width: auto; height: 1px; margin: -.5px 0 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(226, 216, 255, .7) 50%, rgba(255, 255, 255, 0)); }
  .tw-side:nth-child(1):after { box-shadow: inset 0 -22px 30px -20px rgba(4, 2, 12, .85); }
  .tw-side:nth-child(2):after { box-shadow: inset 0 22px 30px -20px rgba(4, 2, 12, .85); }
  .tw-stage.is-apart > .tw-side:nth-child(1) { translate: 0 -8px; border-radius: 0 0 var(--tw-r) var(--tw-r); }
  .tw-stage.is-apart > .tw-side:nth-child(2) { translate: 0 8px; border-radius: var(--tw-r) var(--tw-r) 0 0; }
  .tw-stage.is-apart > .tw-side:nth-child(1) .tw-pick { translate: 0 8px; }
  .tw-stage.is-apart > .tw-side:nth-child(2) .tw-pick { translate: 0 -8px; }
}

/* @@ANCHOR hero-a: the athlete hero (builder A) inserts its CSS below this line */
/* ==========================================================================
   The first screen: two living doors. Athletes are warm, coaches are cool:
   the cards, the kickers, the headline and the light between them. Each card
   is the door into its side of the page and holds its live product, the real
   athlete app in a phone and the real coach dashboard in a browser window,
   both cut by the card's edge. The colour stays in the headline; the card
   titles are ink. Every class starts with dh (the replicas keep h1 and rd).
   ========================================================================== */
:root {
  --dh-warm-1: #FFF8F3; --dh-warm-2: #FDE9DE; --dh-warm-ink: #B4461B; --dh-warm-a: #F97316; --dh-warm-b: #DB2777;
  --dh-cool-1: #F6F8FF; --dh-cool-2: #E4EAFD; --dh-cool-ink: #4338CA; --dh-cool-a: #4F46E5; --dh-cool-b: #0EA5E9;
}
.dh { position: relative; height: 100vh; height: 100svh; min-height: 660px; max-height: 1100px; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(68px + clamp(10px, 2.2vh, 24px)) 0 clamp(10px, 1.6vh, 18px); }
.dh > .wrap { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 1400px; display: flex; flex-direction: column; }
html.intro-hold .dh .rv.in { opacity: 0; transform: translateY(26px); }

/* the second screen asks (2026-09-28): the headline moved up to the two worlds, the doors put the question */
.dh-kicker { text-align: center; font: 600 12.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); }
.dh-q { margin-top: clamp(4px, .8vh, 10px); text-align: center; font-size: clamp(28px, min(3.2vw, 5.4vh), 48px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }

.dh-doors { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(12px, 2.2vh, 26px); }

/* a door: the promise on top, the live product below it */
.dh-card { position: relative; min-height: 0; display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.dh-ath { --dh-ink: var(--dh-warm-ink); --dh-ring: rgba(234, 88, 12, .38);
  background: radial-gradient(70% 52% at 50% 100%, rgba(251, 113, 133, .16), transparent 72%), linear-gradient(172deg, var(--dh-warm-1) 0%, var(--dh-warm-2) 100%); }
.dh-coa { --dh-ink: var(--dh-cool-ink); --dh-ring: rgba(79, 70, 229, .38);
  background: radial-gradient(70% 52% at 50% 100%, rgba(56, 189, 248, .14), transparent 72%), linear-gradient(172deg, var(--dh-cool-1) 0%, var(--dh-cool-2) 100%); }
@media (hover: hover) and (pointer: fine) {
  .dh-card { cursor: pointer; }
  .dh-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--dh-ring), 0 28px 60px rgba(30, 27, 75, .10); }
}
.dh-door { position: absolute; inset: 0; z-index: 3; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.dh-door:focus-visible { outline: 3px solid var(--dh-ring); outline-offset: -3px; border-radius: inherit; }
.dh-card.dh-on { box-shadow: inset 0 0 0 2px var(--dh-ring), 0 22px 50px rgba(30, 27, 75, .08); }

.dh-copy { position: relative; z-index: 4; pointer-events: none; text-align: center; padding: clamp(18px, 3vh, 34px) 36px 0; }
.dh-copy a { pointer-events: auto; }
.dh-kick { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dh-ink); }
.dh-kick > svg { width: 16px; height: 16px; flex: none; }
.dh-kick > span { display: inline-flex; align-items: center; }
/* the whole card is a door: on hover and keyboard focus it says where it leads. The hint opens IN the
   line, so the centered kicker and the hint stay centered as one group (the kicker glides left as it opens) */
.dh-hint { display: inline-flex; align-items: center; gap: 4px; max-width: 0; margin-left: 0; overflow: hidden; font: 500 13px Inter, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--dh-ink);
  opacity: 0; transition: max-width .45s var(--ease), margin-left .45s var(--ease), opacity .3s ease; }
.dh-hint svg { width: 13px; height: 13px; flex: none; }
.dh-card:hover .dh-hint, .dh-card:has(.dh-door:focus-visible) .dh-hint { max-width: 10em; margin-left: 12px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dh-hint { transition: opacity .2s ease; } }
/* a door's title is an h2 under the landing page's h1 and an h3 under the h2 of a country page's doors
   (site/src/partials/doors.html, {{dh_h}}). The phone's greeting (.h1-greet) was an h2 until 2026-09-28
   and got its size from here; it keeps it */
.dh-card :is(h2, h3), .dh-card .h1-greet { margin-top: clamp(6px, 1vh, 10px); font-size: clamp(24px, min(2.3vw, 4.2vh), 36px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.dh-say { margin: 6px auto 0; max-width: 32em; font-size: clamp(14.5px, 1.8vh, 16px); line-height: 1.45; color: var(--dim); }
.dh-act { margin-top: clamp(12px, 2vh, 20px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
/* the door's own button says who it is for; the signup stays, quieter, next to it */
.dh-pick, .dh-cta { height: 46px; padding: 0 20px; border-radius: 14px; font-size: 15.5px; }
/* the door's choice speaks the first screen's language: a pill, the side's colour in its arrow */
.dh-pick { gap: 12px; padding: 0 5px 0 20px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(11, 16, 34, .22); }
.dh-pick:hover { background: #1B2140; }
.dh-pick svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; color: #fff; transition: transform .3s var(--ease); }
.dh-ath .dh-pick svg { background: linear-gradient(135deg, #FB923C 0%, #E11D48 100%); }
.dh-coa .dh-pick svg { background: linear-gradient(135deg, #6366F1 0%, #0EA5E9 100%); }
.dh-pick:hover svg { transform: translateX(2px); }
.dh-cta { border-radius: 999px; }
.dh-cta { background: rgba(255, 255, 255, .72); border-color: rgba(15, 23, 42, .1); }
.dh-cta:hover { background: #fff; }
/* the coach door's signup says as a coach where there is room, on a phone the door says it already */
.dh-cs { display: none; }
@media (max-width: 560px) { .dh-cl { display: none; } .dh-cs { display: inline; } }
.dh-price { flex-basis: 100%; text-align: center; font-size: 13px; line-height: 1.4; color: #5B6478; font-variant-numeric: tabular-nums; }
.dh-price b { font-weight: 600; color: var(--text); }

.dh-win { --dh-bleed: 48px; position: relative; z-index: 1; flex: 1; min-height: 0; margin-top: calc(clamp(14px, 2.4vh, 26px) - var(--dh-bleed)); padding-top: var(--dh-bleed); pointer-events: none; }
/* the card's edge never slices a line of text: the product fades out before it. The window
   reaches up by --dh-bleed, so the mask keeps the soft shadow above the phone and the browser */
.dh-win { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.dh-win > * { transition: opacity .5s ease; }
.dh-fade > * { opacity: 0; }

/* ---------------------------------------------------------------- athlete: the real phone, cut by the card */
.dh-win-a .h1-phone { position: absolute; left: 50%; right: auto; top: var(--dh-bleed); margin: 0; translate: -50% 0; padding: 11px; border-radius: 54px; z-index: 1;
  box-shadow: 0 40px 90px rgba(124, 45, 18, .16), 0 14px 34px rgba(15, 23, 42, .14), inset 0 0 0 1.5px #2A3354, inset 0 0 0 4px #0B1022, inset 0 0 0 5px #1A2140; }
.dh-win-a .h1-scr { border-radius: 43px; }
.dh-win-a .h1-sheet { padding-bottom: 18px; }
.dh-win-a .h1-bw:not(.on) > div { visibility: hidden; }
.dh-win-a .h1-cnt { transition-duration: 1s; }
.dh-inst, .dh-inst * { transition: none !important; }
/* every sheet fits the crop: what matters least steps back first (hero-a.js fitSheets) */
.dh-measure .h1-bw { grid-template-rows: 1fr !important; transition: none !important; }
.dh-measure #h1DotW { grid-template-rows: 0fr !important; }
.dh-measure .h1-rest { height: 46px !important; margin-top: 12px !important; }
.dh-l1#h1SAva #h1AvW { display: none; }
.dh-l2 .h1-grab { display: none; }
.dh-l2.h1-sheet { padding-top: 16px; }
.dh-l3 .h1-sheeth small, .dh-l3 .h1-wh small, .dh-l3 .h1-wdh small { display: none; }
.dh-l3#h1SWk .h1-ex > .h1-set:nth-child(3) { display: none; }
.dh-l4#h1SAva.dh-sent .h1-inp { display: none; }
.dh-l4#h1SWk .h1-ex > .h1-set:nth-child(4) { display: none; }
/* numbers without their labels say nothing: the summary keeps its title and the record instead */
.dh-l4#h1SDone .h1-wstats { display: none; }
.dh-l5#h1SWk .h1-rest { display: none; }
.dh-l5#h1SWk .h1-fin { margin-top: 12px; }
.dh-l5#h1SDone { padding-bottom: 10px; }
/* a short phone crop: once the sentence is sent, the chat scrolls its header away */
.dh-l5#h1SAva.dh-sent .h1-sheeth { display: none; }
.dh-l5#h1SAva.dh-sent .h1-msgs { margin-top: 0; }
.dh-l6#h1SAva .h1-undo { display: none; }
.dh-l7#h1SAva { padding-bottom: 10px; }
.dh-l6#h1SWk .h1-exh small { display: none; }
.dh-l6#h1SWk .h1-ex { margin-top: 10px; padding: 10px; }
.dh-l7#h1SWk .h1-wh { display: none; }
.dh-l7#h1SWk .h1-ex { margin-top: 0; }
.dh-l7#h1SWk .h1-fin { height: 46px; }

/* ---------------------------------------------------------------- coach: the real dashboard in a browser window */
.dh-win-c .rd { position: absolute; left: 50%; top: var(--dh-bleed); margin: 0; translate: -50% 0; width: calc(100% - 64px); max-width: 640px; height: calc(100% - var(--dh-bleed) + 60px); border-radius: 18px;
  box-shadow: 0 34px 80px rgba(30, 41, 99, .16), 0 10px 24px rgba(15, 23, 42, .07); }
.dh-win-c .rd:after { display: none; }
.dh-win-c .rd-in { grid-template-columns: 1fr; }
.dh-win-c .rd-main { padding: 14px; gap: 12px; }
.dh-win-c .rd-hero { padding: 14px 16px; }
.dh-win-c .rd-top { align-items: center; gap: 12px; }
.dh-hello { flex: 1; min-width: 0; }
.dh-hello b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the month's money sits in the header, so it is on screen at every size */
.dh-rev { position: relative; flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: 13px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); transition: background .6s, box-shadow .6s; }
.dh-revi { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #fff; color: var(--emerald); }
.dh-revi svg { width: 16px; height: 16px; }
.dh-revt b { display: block; font: 600 19px/1.15 Outfit, Inter, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dh-revt small { display: block; font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .86); white-space: nowrap; }
/* the short label for narrow windows: the money never stands there without its meaning */
.dh-revs { display: none; }
.dh-plus { font-style: normal; align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #047857; font: 600 12px/18px Inter, sans-serif;
  opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .35s, transform .5s var(--ease); }
.dh-paid .dh-plus { opacity: 1; transform: none; }
/* narrower windows: the plus rides on the pill's corner, so the greeting keeps its room */
@media (max-width: 1360px) {
  .dh-plus { position: absolute; top: -9px; right: -7px; margin: 0; padding: 0 6px; font-size: 11px; line-height: 17px; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
  .dh-rev { padding-right: 14px; }
}
.dh-paid.dh-rev { background: rgba(255, 255, 255, .2); }
.dh-bell { position: relative; }
.dh-bdot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--rose); font: 700 10px/17px Inter, sans-serif; text-align: center; color: #fff;
  opacity: 0; transform: scale(.5); transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dh-bdot.on { opacity: 1; transform: none; }
/* Ava's line always keeps room for two lines, so nothing below it moves when she writes */
.dh-win-c .rd-ava { margin-top: 12px; font-size: 13.5px; line-height: 1.45; min-height: calc(2.9em + 20px); transition: background .5s, box-shadow .5s; }
.dh-avat { flex: 1; min-width: 0; }
.dh-win-c .rd-ava.dh-glow { background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }
.dh-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: #fff; vertical-align: -2px; animation: h1blink 1s steps(1) infinite; }
/* Ava prepares, the coach decides with one click */
.dh-ask { flex: none; display: none; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 9px; background: #fff; color: var(--violet-600); font: 600 13px Inter, sans-serif; white-space: nowrap; transition: background .35s, color .35s; }
.dh-ask.on { display: inline-flex; animation: dhpop .45s var(--ease); }
.dh-ask svg { width: 13px; height: 13px; display: none; }
.dh-ask .dh-ask2 { display: none; }
.dh-ask.done { background: var(--emerald); color: #fff; }
.dh-ask.done svg { display: block; }
.dh-ask.done .dh-ask1 { display: none; }
.dh-ask.done .dh-ask2 { display: inline; }
@keyframes dhpop { from { opacity: 0; transform: scale(.9); } }
.dh-click { position: absolute; z-index: 20; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); background: rgba(99, 102, 241, .28); pointer-events: none; animation: dhclick .7s ease-out forwards; }
@keyframes dhclick { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.2); } }
/* Aktivitäten: whatever lands, lands on top, readable at a glance */
.dh-feed .rd-cardhead { padding: 10px 14px; }
.dh-feed .rd-ct { font-size: 14px; }
.dh-live { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px Inter, sans-serif; color: #047857; }
.dh-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.dh-rows { padding: 4px 8px 8px; }
.dh-rw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease); }
.dh-rw > div { min-height: 0; overflow: hidden; }
.dh-rw.on { grid-template-rows: 1fr; }
.dh-rw .dh-row { opacity: 0; transform: translateY(-6px); transition: opacity .45s ease .1s, transform .6s var(--ease), background 1.2s ease, box-shadow 1.2s ease; }
.dh-rw.on .dh-row { opacity: 1; transform: none; }
.dh-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-top: 4px; padding: 8px 10px; border-radius: 13px; }
.dh-row.dh-new { background: #F5F6FF; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .35); }
.dh-row.dh-new.dh-fromA { background: #FFF7F1; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .45); }
.dh-row.dh-new.dh-money { background: #F0FDF7; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .42); }
.dh-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font: 600 12px Inter, sans-serif; color: #fff; }
.dh-avi { background: var(--emerald-50); color: var(--emerald); }
.dh-avi svg { width: 17px; height: 17px; }
.dh-rt { min-width: 0; }
.dh-rt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-rt small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-when { align-self: start; margin-top: 2px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.dh-sm { display: none; }

/* ---------------------------------------------------------------- the light between the two doors */
.dh-sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.dh-sky path { fill: none; stroke-linecap: round; opacity: 0; }
.dh-chip { position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 5px; border-radius: 999px; pointer-events: none;
  background: #fff; font: 600 13.5px Inter, sans-serif; color: var(--text); white-space: nowrap; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 12px 30px rgba(30, 27, 75, .20), 0 2px 6px rgba(15, 23, 42, .08), 0 0 0 1px var(--dh-cr, rgba(99, 102, 241, .35)); }
.dh-ci { width: 25px; height: 25px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--dh-cb, var(--violet)); }
.dh-ci svg { width: 13px; height: 13px; }
.dh-chip.dh-toc { --dh-cr: rgba(249, 115, 22, .45); --dh-cb: linear-gradient(135deg, #FB923C, #E11D48); }
.dh-chip.dh-toa { --dh-cr: rgba(79, 70, 229, .45); --dh-cb: linear-gradient(135deg, #6366F1, #0EA5E9); }
.dh-chip.dh-dot { height: auto; padding: 3px; gap: 0; }

/* ---------------------------------------------------------------- under the doors: sample data, what just crossed, a pause */
.dh-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 34px; margin-top: clamp(8px, 1.4vh, 14px); }
.dh-ctl { display: contents; }
.dh-ctl .tag-demo { order: 0; font-size: 12px; }
.dh-cap { order: 1; position: relative; display: inline-grid; font-size: 14px; color: var(--dim); }
.dh-cap > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .5s var(--ease); }
.dh-cap > span.on { opacity: 1; transform: none; transition-delay: .12s; }
.dh-cap b { color: var(--text); font-weight: 600; }
.dh-ca { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font: 700 10px/1 Inter, sans-serif; font-style: normal; color: #fff; }
.dh-caL { background: linear-gradient(135deg, #FB923C, #DB2777); }
.dh-caM { background: linear-gradient(135deg, #6366F1, #0EA5E9); }
.dh-cap svg { width: 14px; height: 14px; flex: none; color: var(--faint); }
.dh-pause { order: 2; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--dim); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); transition: color .2s; }
.dh-pause:hover { color: var(--text); }
.dh-pause svg { width: 11px; height: 11px; fill: currentColor; }
.dh-pause .dh-pl { display: none; }
.dh-paused .dh-pause .dh-pa { display: none; }
.dh-paused .dh-pause .dh-pl { display: block; }
.dh-paused .dh-win *, .dh-paused .dh-win *:before, .dh-paused .dh-win *:after { animation-play-state: paused !important; }
.dh-still .dh-pause { display: none; }

/* ---------------------------------------------------------------- nav: the doors carry their own buttons
   The language link sits after the button in the markup (focus order matches), so it never moves when the button comes in to its left. */
.nav-right .btn { transition: opacity .4s ease, transform .2s var(--ease), background .2s, box-shadow .2s; }
/* the button waits until the doors, which carry their own buttons, are gone; the bar's audience word always shows which page this is */
body.dh-inhero .nav-right .btn, body.tw-inhero .nav-right .btn { position: absolute; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
/* the doors carry their own sample data tag, so the badge says only Prototyp while they are on screen */
body.dh-inhero .proto-more { display: none; }
/* a door moves focus to the section it scrolled to (site.js go()); that section needs no ring */
#main > section[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- short desktop screens: the doors stay tight */
@media (min-width: 861px) and (max-height: 800px), (min-width: 861px) and (max-width: 1260px) {
  .dh-say { display: none; }
}
@media (min-width: 861px) and (max-height: 800px) {
  .dh-card :is(h2, h3), .dh-card .h1-greet { font-size: clamp(22px, min(2.1vw, 4vh), 30px); }
}
/* (until 2026-09-28 the promise sat left and the signup right; with two buttons per door there is no
   room beside the promise, so short screens keep the stacked door, only tighter) */
@media (min-width: 861px) and (max-height: 800px) {
  .dh-copy { padding-top: clamp(14px, 2.4vh, 22px); }
  .dh-act { margin-top: 10px; gap: 6px 8px; }
  .dh-price { font-size: 12.5px; line-height: 1.35; }
}
/* narrow desktops: the button over its price line */
@media (max-width: 1180px) and (min-width: 861px) {
  .dh-copy { padding-left: 22px; padding-right: 22px; }
  .dh-pick, .dh-cta { padding: 0 16px; font-size: 15px; }
  .dh-pick { padding: 0 5px 0 16px; }
  .dh-win-c .rd { width: calc(100% - 40px); }
  .dh-revt small { font-size: 10.5px; }
  .dh-revl { display: none; }
  .dh-revs { display: inline; }
  .dh-win-c .rd-top b { font-size: 18px; }
  .dh-hello small { font-size: 10.5px; }
  .dh-bell { display: none !important; }
}

/* ---------------------------------------------------------------- phones and tablets: both doors stacked, both buttons on the first screen */
@media (max-width: 860px) {
  .dh { height: auto; min-height: 0; max-height: none; overflow: visible; padding-top: 84px; padding-bottom: 18px; }
  .dh > .wrap { padding: 0 14px; }
  .dh-q { font-size: clamp(24px, 6.6vw, 36px); }
  /* the narrating line takes the subline's place, so what connects the two doors is read first */
  .dh-doors { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 9px; margin-top: 7px; }
  .dh-cap, .dh-card { grid-column: 1; }
  .dh-cap { grid-row: 1; }
  .dh-ath, .dh-coachfirst .dh-coa { grid-row: 2; }
  .dh-coa, .dh-coachfirst .dh-ath { grid-row: 3; }
  .dh-card { border-radius: 26px; }
  .dh-copy { text-align: left; padding: 12px 18px 0; }
  .dh-kick { display: flex; font-size: 11px; gap: 6px; letter-spacing: .12em; }
  .dh-kick > svg { width: 14px; height: 14px; }
  .dh-hint { display: none; }
  .dh-card :is(h2, h3), .dh-card .h1-greet { font-size: clamp(19px, 5.3vw, 28px); margin-top: 5px; line-height: 1.12; letter-spacing: -.025em; }
  .dh-say { display: none; }
  .dh-act { justify-content: flex-start; gap: 6px 8px; margin-top: 9px; }
  .dh-pick, .dh-cta { height: 44px; padding: 0 16px; font-size: 15px; }
  .dh-pick { padding: 0 4px 0 16px; gap: 10px; }
  .dh-pick svg { width: 36px; height: 36px; padding: 9px; }
  .dh-price { text-align: left; font-size: 12.5px; line-height: 1.3; }
  .dh-win { flex: none; margin-top: calc(10px - var(--dh-bleed)); -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
  .dh-win-a { height: calc(clamp(168px, 43vw, 380px) + var(--dh-bleed)); }
  .dh-win-c { height: calc(clamp(262px, 66vw, 400px) + var(--dh-bleed)); }
  /* the coach window opens on Aktivitäten, where Lena's moments land; the line under the
     headline tells what Ava writes there, so her strip steps back */
  .dh-win-c .dh-feed { order: -1; }
  .dh-win-c .rd-ava { display: none; }
  .dh-win-a .h1-phone { padding: 8px; border-radius: 44px; }
  .dh-win-a .h1-scr { border-radius: 36px; }
  /* the phone keeps its status bar and island; the app header gives its room to the story */
  .dh-win-a .h1-hd { display: none; }
  .dh-win-a .h1-vp { top: 52px; }
  .dh-foot { display: contents; }
  /* the sample data tag and the pause sit in the first door's top corner */
  .dh-ctl { grid-row: 2; grid-column: 1; justify-self: end; align-self: start; position: relative; z-index: 6; margin: 6px 12px 0 0; display: flex; align-items: center; gap: 8px; height: 26px; }
  .dh-pause { width: 26px; height: 26px; }
  .dh-pause svg { width: 10px; height: 10px; }
  .dh-cap { display: grid; margin: 0; padding: 0 6px; font-size: 14px; line-height: 1.4; text-align: center; }
  .dh-cap > span { display: block; white-space: normal; }
  .dh-cap > span > span { display: inline; }
  .dh-cap .dh-ca { display: inline-grid; width: 17px; height: 17px; font-size: 9px; vertical-align: middle; margin: -2px 4px 0 2px; }
  .dh-cap .dh-ca:last-child { margin: 0 2px 0 4px; }
  .dh-cap svg { display: inline; width: 12px; height: 12px; vertical-align: -1px; margin: 0 1px 0 -1px; }
}
@media (max-width: 560px) {
  .dh-win-c .rd { width: calc(100% - 24px); border-radius: 16px; }
  .dh-win-c .rd .bar-top { height: 28px; }
  .dh-win-c .rd-in { height: calc(100% - 28px); }
  .dh-win-c .rd-main { padding: 10px; gap: 10px; }
  .dh-win-c .rd-hero { padding: 10px 10px 10px 12px; border-radius: 14px; }
  .dh-hello small { display: none; }
  .dh-win-c .rd-top b { font-size: 16px; }
  .dh-bell { display: none !important; }
  .dh-rev { padding: 4px 9px 4px 4px; gap: 6px; border-radius: 11px; }
  .dh-revi { width: 24px; height: 24px; border-radius: 8px; }
  .dh-revi svg { width: 14px; height: 14px; }
  .dh-revt b { font-size: 16px; }
  .dh-revt small { font-size: 10.5px; line-height: 1.2; }
  .dh-revl { display: none; }
  .dh-revs { display: inline; }
  .dh-win-c .rd-ava { margin-top: 10px; font-size: 13px; }
  .dh-feed .rd-cardhead { padding: 8px 12px; }
  .dh-rows { padding: 2px 6px 6px; }
  .dh-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding: 7px 8px; }
  .dh-av { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
  .dh-row { grid-template-columns: 32px minmax(0, 1fr); }
  .dh-when { display: none; }
  .dh-rt small { font-size: 12.5px; }
  .dh-lg { display: none; }
  .dh-sm { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-card, .dh-card *, .dh-win * { transition: none !important; animation: none !important; }
}

/* Ava's mark on the whole site: "Stimme wird Bewegung", three voice bars that
   turn into the Fitiva chevron, with the cyan dot (the symbol i-spark). On an
   aurora tile it is the app's tile: glyph at 78% of the tile, white, the tile's
   heavier stroke, cyan dot. Next to other icons it is drawn a step larger than
   they are, because it is wider than it is tall. Never a glow or a ring. */
.ava-mark, .why-oi { --ava-dot: #22D3EE; }
.ava-mark { --ava-sw: 2.64; }
.ava-mark, .ava-badge .ava-mark, .rd-ava .ava-mark { border-radius: 22%; }
/* explicit sizes, never a percentage: a percentage height inside the grid tile
   can resolve against the svg's default 150 px and push the glyph out of the
   tile, which leaves only the coloured square */
.ava-mark svg { width: 14px; height: 14px; }
.ava-badge .ava-mark svg { width: 23px; height: 23px; }
.rd-ava .ava-mark svg { width: 17px; height: 17px; }
.msg-light .ava-mark svg { width: 19px; height: 19px; }
.rd-it.ai svg { width: 17px; height: 17px; margin: 0 -1px; }
.bcard .ic svg:has(use[href="#i-spark"]) { width: 26px; height: 26px; }
.sp-chip svg:has(use[href="#i-spark"]) { width: 17px; height: 17px; }
.why-oi svg:has(use[href="#i-spark"]) { width: 23px; height: 23px; }
/* ==========================================================================
   The athlete app inside the athlete door (builder A): a faithful replica of
   the real athlete dashboard (TodayHero, Ernährung heute) and its sheets (Ava,
   the workout, the summary after it), authored at the app's own 390 x 844 and
   scaled into the phone by hero-a.js. Every class here starts with h1.
   ========================================================================== */
/* the phone */
.h1-phone { --h1-k: .82564; position: absolute; left: 0; right: 0; top: 0; width: 344px; height: 719px; margin: 0 auto; z-index: 2;
  border-radius: 56px; background: #0B1022; padding: 11px;
  box-shadow: 0 50px 100px rgba(30, 27, 75, .22), 0 18px 40px rgba(15, 23, 42, .16), inset 0 0 0 1.5px #2A3354, inset 0 0 0 4px #0B1022, inset 0 0 0 5px #1A2140; }
.h1-phone:before, .h1-phone:after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #1A2140; }
.h1-phone:before { left: -3px; top: 150px; height: 58px; box-shadow: 0 74px 0 #1A2140; }
.h1-phone:after { right: -3px; top: 190px; height: 86px; }
.h1-scr { position: relative; width: 100%; height: 100%; border-radius: 45px; overflow: hidden; isolation: isolate;
  background: radial-gradient(115% 65% at 50% -10%, rgba(124, 58, 237, .06), transparent 56%), linear-gradient(180deg, #FAFAFC 0%, #F3F3F8 100%); }
.h1-app { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--h1-k));
  font: 400 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, sans-serif; color: #0F172A; transition: opacity .45s ease; }
.h1-app svg { display: block; }
.h1-app p { margin: 0; }
.h1-app .h1-num { font-variant-numeric: tabular-nums; }

/* status bar and island */
.h1-sb { position: absolute; left: 0; right: 0; top: 0; height: 52px; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px; font: 600 16px Inter; letter-spacing: -.01em; color: #0F172A; }
.h1-sbr { display: flex; align-items: center; gap: 6px; }
/* the island sits outside the scaled app (the loop end fades the app, never the
   hardware), so it scales itself: 124 x 36 at 11 px from the top of a 390 wide screen */
.h1-isl { position: absolute; top: calc(11px * var(--h1-k)); left: 50%; width: calc(124px * var(--h1-k)); height: calc(36px * var(--h1-k)); margin-left: calc(-62px * var(--h1-k)); border-radius: calc(20px * var(--h1-k)); background: #000; z-index: 13; pointer-events: none; }

/* app header */
.h1-hd { position: absolute; left: 0; right: 0; top: 52px; height: 64px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226, 232, 240, .7); }
.h1-hd img { width: 34px; height: 34px; border-radius: 9px; }
.h1-hd b { font: 700 19px Inter, sans-serif; letter-spacing: -.01em; color: #1E293B; }
.h1-menu { margin-left: auto; width: 42px; height: 42px; border-radius: 12px; background: #F1F5F9; display: grid; place-items: center; color: #334155; }
.h1-menu svg { width: 20px; height: 20px; }

/* scroll viewport */
.h1-vp { position: absolute; left: 0; right: 0; top: 116px; bottom: 0; overflow: hidden; }
.h1-cnt { padding: 16px 16px 140px; transition: transform 1.25s cubic-bezier(.65, 0, .35, 1); }

/* TodayHero */
.h1-th { position: relative; overflow: hidden; border-radius: 24px; padding: 20px; color: #fff;
  background: radial-gradient(130% 130% at 88% -15%, rgba(232, 121, 249, .42), transparent 54%), radial-gradient(120% 120% at -12% 125%, rgba(129, 140, 248, .38), transparent 50%), linear-gradient(140deg, #7C3AED 0%, #4F46E5 100%); }
.h1-thtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.h1-date { grid-column: 1; grid-row: 1; align-self: center; font-size: 12px; color: rgba(255, 255, 255, .9); }
.h1-greet { grid-column: 1 / span 2; grid-row: 2; margin: 6px 0 0; font: 600 24px/1.25 Outfit, Inter, sans-serif; letter-spacing: -.025em; color: #fff; }
.h1-next { grid-column: 1 / span 2; grid-row: 3; display: flex; white-space: nowrap; align-items: center; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .85); overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease .12s, margin .6s cubic-bezier(.22, 1, .36, 1); }
.h1-next svg { width: 16px; height: 16px; opacity: .8; flex: none; }
.h1-next.on { max-height: 24px; opacity: 1; margin-top: 4px; }
.h1-next.on span { animation: h1hl 1.6s ease-out .3s; border-radius: 6px; }
@keyframes h1hl { 0% { background: rgba(255, 255, 255, 0); } 30% { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); } 100% { background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); } }
.h1-hbs { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.h1-hb { position: relative; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); display: grid; place-items: center; }
.h1-hb svg { width: 16px; height: 16px; }
.h1-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #F43F5E; font: 600 10px/18px Inter; text-align: center; }
.h1-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 500; }
.h1-pill svg { width: 16px; height: 16px; color: #FB923C; }
.h1-rr { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.h1-ring { position: relative; width: 96px; height: 96px; flex: none; }
.h1-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.h1-ring .h1-arc { transition: stroke-dashoffset 1.3s cubic-bezier(.22, 1, .36, 1); }
.h1-ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.h1-ringc b { font-size: 20px; font-weight: 600; line-height: 1; }
.h1-ringc small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .9); margin-top: 3px; }
.h1-focus { flex: 1; min-width: 0; }
.h1-kick { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .9); }
.h1-ft { font-size: 18px; font-weight: 600; letter-spacing: -.025em; margin-top: 2px; }
.h1-fm { font-size: 12px; color: rgba(255, 255, 255, .9); margin-top: 4px; }
.h1-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; height: 40px; padding: 0 16px; border-radius: 12px; background: #fff; color: #0B1022; font-size: 14px; font-weight: 600; }
.h1-cta svg { width: 16px; height: 16px; }
.h1-swap { transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.h1-swap.h1-out { opacity: 0; transform: translateY(6px); }
.h1-avl { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .09); }
.h1-am { width: 28px; height: 28px; border-radius: 22%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #6366F1 0%, #7C3AED 50%, #DB2777 100%); color: #fff; --ava-sw: 2.64; --ava-dot: #22D3EE; }
.h1-am svg { width: 22px; height: 22px; overflow: visible; }
.h1-avl p { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .85); min-height: 42px; }
.h1-avl p i { font-style: normal; color: #C4B5FD; font-weight: 500; }

/* Ernährung heute: the ring, and next to it the meals that add up to it */
.h1-card { background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); margin-top: 24px; }
.h1-nut { padding: 18px 14px 16px; }
.h1-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h1-ch .h1-cht { font: 600 20px Outfit, Inter, sans-serif; letter-spacing: -.01em; margin: 0; color: #0F172A; }
.h1-est { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: #64748B; white-space: nowrap; }
.h1-est svg { width: 16px; height: 16px; color: #7C3AED; --ava-dot: #22D3EE; overflow: visible; }
.h1-nrow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.h1-bring { position: relative; width: 112px; height: 112px; flex: none; }
.h1-bring svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.h1-bring .h1-arc { transition: stroke-dashoffset 1.3s cubic-bezier(.22, 1, .36, 1); }
.h1-bringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.h1-bringc b { font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.h1-bringc small { font-size: 10.5px; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; }
.h1-bringc em { font-style: normal; font-size: 12.5px; color: #059669; font-weight: 500; margin-top: 3px; }
.h1-mlist { flex: 1; min-width: 0; display: grid; gap: 7px; }
.h1-mr { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px 0 4px; border-radius: 12px; background: #fff; border: 1px solid #EEF0F5; transition: border-color 1s ease, box-shadow 1s ease; }
.h1-mf { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex: none; }
.h1-mf svg { width: 36px; height: 36px; }
.h1-mn { flex: 1; min-width: 0; }
.h1-mn b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h1-mn small { display: block; font-size: 11.5px; line-height: 1.3; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h1-mr strong { flex: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.h1-mnew { display: grid; grid-template-rows: 0fr; margin-bottom: -7px; transition: grid-template-rows .8s cubic-bezier(.22, 1, .36, 1), margin .8s cubic-bezier(.22, 1, .36, 1); }
.h1-mnew > div { min-height: 0; overflow: hidden; }
.h1-mnew .h1-mr { opacity: 0; transition: opacity .5s ease .2s, border-color 1s ease, box-shadow 1s ease; }
.h1-mnew.on { grid-template-rows: 1fr; margin-bottom: 0; }
.h1-mnew.on .h1-mr { opacity: 1; }
.h1-mr.dh-new { border-color: rgba(99, 102, 241, .5); box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); }

/* sheets */
.h1-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(15, 23, 42, .16); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.h1-scrim.on { opacity: 1; }
.h1-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: #fff; border-radius: 30px 30px 0 0; padding: 10px 16px 30px;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .16); transform: translateY(104%); transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
.h1-sheet.on { transform: none; }
.h1-grab { width: 38px; height: 5px; border-radius: 3px; background: #E2E8F0; margin: 0 auto 14px; }
.h1-sheeth { display: flex; align-items: center; gap: 10px; }
.h1-sheeth .h1-am { width: 34px; height: 34px; }
.h1-sheeth .h1-am svg { width: 26px; height: 26px; }
.h1-sheeth b { display: block; font: 600 17px Outfit, Inter, sans-serif; line-height: 1.2; }
.h1-sheeth small { display: block; font-size: 12.5px; color: #64748B; }
.h1-msgs { display: flex; flex-direction: column; margin-top: 4px; }
.h1-bw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1); }
.h1-bw > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.h1-bw.on { grid-template-rows: 1fr; }
.h1-bw .h1-bub { margin-top: 10px; }
.h1-bub { max-width: 84%; padding: 10px 14px; font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.h1-bub.on { opacity: 1; transform: none; }
.h1-me { align-self: flex-end; background: #6366F1; color: #fff; border-radius: 18px 18px 6px 18px; }
.h1-av { align-self: flex-start; max-width: 94%; background: #F8FAFC; border: 1px solid #EEF2F7; border-radius: 18px 18px 18px 6px; padding: 11px 13px 12px; font-size: 14.5px; }
.h1-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.h1-who .h1-am { width: 20px; height: 20px; }
.h1-who .h1-am svg { width: 16px; height: 16px; }
.h1-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.h1-dots i { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; animation: h1dot 1s infinite; }
.h1-dots i:nth-child(2) { animation-delay: .15s; } .h1-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes h1dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
/* the real Ava tool card: emerald when done, with its undo */
.h1-tc { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid #D1FAE5; background: #ECFDF5; color: #047857; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.h1-tc svg { flex: none; }
.h1-tcs { width: 16px; height: 16px; }
.h1-tci { width: 14px; height: 14px; }
.h1-tcl { flex: 1; min-width: 0; }
.h1-undo { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #065F46; }
.h1-undo svg { width: 12px; height: 12px; }
.h1-inp { display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 14px; padding: 0 7px 0 16px; border-radius: 16px; border: 1px solid #E2E8F0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); font-size: 15px; }
.h1-inp .h1-t { flex: 1; white-space: nowrap; overflow: hidden; color: #0F172A; }
.h1-inp .h1-t.ph { color: #94A3B8; }
.h1-caret { display: inline-block; width: 2px; height: 18px; background: #6366F1; vertical-align: -3px; margin-left: 1px; animation: h1blink 1s steps(1) infinite; }
@keyframes h1blink { 50% { opacity: 0; } }
.h1-send { width: 38px; height: 38px; border-radius: 12px; background: #6366F1; color: #fff; display: grid; place-items: center; }
.h1-send svg { width: 17px; height: 17px; }

/* workout sheet */
.h1-wh { display: flex; align-items: center; justify-content: space-between; }
.h1-wh b { display: block; font: 600 19px Outfit, Inter, sans-serif; }
.h1-wh small { display: block; font-size: 12.5px; color: #64748B; }
.h1-timer { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #EEF2FF; color: #4F46E5; font-size: 13px; font-weight: 600; }
.h1-timer i { width: 7px; height: 7px; border-radius: 50%; background: #F43F5E; animation: h1blink 1.2s steps(1) infinite; }
.h1-ex { margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px solid #EEF0F5; }
.h1-exh { display: flex; align-items: center; gap: 10px; }
.h1-chipi { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.h1-chipi svg { width: 20px; height: 20px; }
.h1-in-c { background: #EEF2FF; color: #4F46E5; }
.h1-exh .h1-chipi { width: 38px; height: 38px; }
.h1-exh b { display: block; font-size: 16px; font-weight: 600; }
.h1-exh small { display: block; font-size: 12px; color: #64748B; }
.h1-sh, .h1-set { display: grid; grid-template-columns: 44px 1fr 1fr 40px; align-items: center; gap: 6px; }
.h1-sh { margin-top: 12px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.h1-set { position: relative; height: 46px; margin-top: 6px; padding: 0 8px; border-radius: 12px; background: #F8FAFC; font-size: 15px; font-weight: 600; transition: background .4s; }
.h1-set em { font-style: normal; width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid #E2E8F0; display: grid; place-items: center; font-size: 12px; color: #64748B; }
.h1-set .h1-chk { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #CBD5E1; background: #fff; color: #CBD5E1; display: grid; place-items: center; transition: background .3s, border-color .3s, color .3s; }
.h1-chk svg { width: 16px; height: 16px; }
.h1-set.d { background: #ECFDF5; }
.h1-set.d .h1-chk { background: #10B981; border-color: #10B981; color: #fff; }
.h1-rest { display: flex; align-items: center; gap: 10px; margin-top: 12px; height: 46px; padding: 0 14px; border-radius: 14px; background: #EEF2FF; color: #4338CA; font-size: 13.5px; font-weight: 600; transition: opacity .4s, height .5s, margin .5s; overflow: hidden; }
.h1-rest svg { width: 17px; height: 17px; }
.h1-rest .h1-rb { flex: 1; height: 6px; border-radius: 999px; background: #fff; overflow: hidden; }
.h1-rest .h1-rb i { display: block; height: 100%; width: 100%; border-radius: 999px; background: #6366F1; }
.h1-rest.off { opacity: 0; height: 0; margin-top: 0; }
.h1-fin { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; margin-top: 16px; border-radius: 15px; background: #6366F1; color: #fff; font-size: 15.5px; font-weight: 600; box-shadow: 0 8px 20px rgba(99, 102, 241, .3); }
.h1-fin svg { width: 17px; height: 17px; }

/* the summary after "Workout beenden": what the session was worth, and the record with where it came from */
.h1-wdh { display: flex; align-items: center; gap: 12px; }
.h1-okc { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #ECFDF5; color: #059669; display: grid; place-items: center; }
.h1-okc svg { width: 22px; height: 22px; }
.h1-wdh b { display: block; font: 600 20px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.h1-wdh small { display: block; font-size: 13px; color: #64748B; }
.h1-wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.h1-wstats > div { padding: 10px 12px; border-radius: 13px; background: #F8FAFC; }
.h1-wstats b { display: block; font: 600 22px/1.15 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.h1-wstats b span { margin-left: 2px; font: 500 13px Inter, sans-serif; letter-spacing: 0; color: #64748B; }
.h1-wstats small { display: block; margin-top: 2px; font-size: 12px; color: #64748B; }
.h1-wrec { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #FFFBEB; border: 1px solid #FDECB5; transition: box-shadow 1s ease, border-color 1s ease; }
.h1-wrec.dh-new { border-color: rgba(245, 158, 11, .6); box-shadow: 0 0 0 3px rgba(245, 158, 11, .14); }
.h1-wtro { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #FEF3C7; color: #B45309; }
.h1-wtro svg { width: 18px; height: 18px; }
.h1-wrt { flex: 1; min-width: 0; }
.h1-wrt b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #92400E; }
.h1-wrt small { display: block; font-size: 13.5px; line-height: 1.3; color: #78350F; white-space: nowrap; }
.h1-wrec em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 500; color: #B45309; white-space: nowrap; }

/* the plan from the coach arrives as a real notification, never under the status bar */
.h1-pushw { position: absolute; left: 0; right: 0; top: 52px; height: 150px; z-index: 16; padding: 6px 10px 0; overflow: hidden; pointer-events: none; }
.h1-push { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #FCFCFF;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06); transform: translateY(-115%); transition: transform .7s cubic-bezier(.32, .72, 0, 1); }
.h1-push.on { transform: none; }
.h1-push img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.h1-pt { min-width: 0; }
.h1-pt b { display: flex; justify-content: space-between; font: 600 14px Inter, sans-serif; color: #0F172A; }
.h1-pt b time { font-weight: 400; font-size: 12.5px; color: #64748B; }
.h1-pt > span { display: block; margin-top: 1px; font-size: 14px; line-height: 1.38; color: #1E293B; }

/* touch indicator */
.h1-tap { position: absolute; z-index: 20; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(148, 163, 184, .45); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(15, 23, 42, .2); pointer-events: none; animation: h1tap .75s ease-out forwards; }
@keyframes h1tap { 0% { opacity: 0; transform: scale(1.5); } 25% { opacity: 1; transform: scale(.9); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.1); } }

/* ------------------------------------------------------------------------ */
/* spacer between merge anchors, keep                                       */
/* ------------------------------------------------------------------------ */

/* @@ANCHOR aud-1: athlete fixes, upper sections (builder B1) insert below */
/* ==========================================================================
   The map as the stage (#karte): the city full bleed and tilted, warm and a
   little violet, the headline over it with the reader's own line in ink,
   the finder or the pin flow in a frosted panel, sample cards over "Du"
   ========================================================================== */
#karte { padding: 0; background: var(--mist); }
#karte .map-shell { --kd-cw: 356px; --kd-sb: 40px; --kd-th: 22px; position: relative; margin: 0; height: 100vh; height: 100svh; min-height: 820px; max-height: 980px; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; isolation: isolate; background: linear-gradient(#fff, #F1EEF5 220px); }
body[data-aud="coach"] #karte .map-shell { --kd-sb: 80px; --kd-th: 18px; }
#karte #map { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
#karte .kd-live #map { opacity: 1; }
#karte .map-fallback { z-index: 0; overflow: hidden; align-items: end; padding: 0 0 120px var(--kd-colr, 40%); font-size: 13px; color: #6E7390; background: radial-gradient(70% 60% at 70% 64%, #F8F6FB 0%, #EFEBF5 62%, #E9E4F1 100%); transition: opacity .6s ease 1s; }
/* until the live map is there: a soft still of the same city, loaded shortly before the section */
#karte .map-fallback::before { content: ""; position: absolute; inset: -16px; background: 62% 58% / cover no-repeat; filter: blur(3px); opacity: 0; transition: opacity .8s ease; z-index: -1; }
#karte .kd-near .map-fallback::before { background-image: url(assets/karte-poster.jpg); opacity: .95; }
#karte .map-fallback { isolation: isolate; text-shadow: 0 0 8px #fff, 0 0 2px #fff; }
#karte .kd-live .map-fallback { opacity: 0; }
#karte .maplibregl-canvas { outline: none; }
#karte .maplibregl-ctrl-bottom-right { right: 8px; bottom: 10px; }
#karte .maplibregl-ctrl-attrib { font-size: 10.5px; }
#karte .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { opacity: .5; transition: opacity .2s; }
#karte .maplibregl-ctrl-attrib.maplibregl-compact:hover { opacity: 1; }

/* the veil keeps the words clear of labels and roofs without hiding the city */
#karte .kd-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(420px 300px at var(--ax, 72%) var(--ay, 70%), rgba(219, 39, 119, .07), rgba(124, 58, 237, .045) 45%, rgba(124, 58, 237, 0) 72%),
    linear-gradient(90deg, rgba(247, 245, 251, .98) 0, rgba(247, 245, 251, .95) calc(var(--kd-colr, 560px) + 120px), rgba(247, 245, 251, .5) calc(var(--kd-colr, 560px) + 190px), rgba(247, 245, 251, 0) calc(var(--kd-colr, 560px) + 310px)),
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, .88) 70px, rgba(255, 255, 255, 0) 200px),
    linear-gradient(0deg, var(--mist) 0, rgba(244, 246, 251, .85) 36px, rgba(244, 246, 251, 0) 140px); }

/* words and panel */
#karte .kd-wrap { position: absolute; inset: 0; z-index: 4; display: flex; padding-top: 104px; padding-bottom: 36px; pointer-events: none; }
#karte .kd-col { width: 468px; display: flex; flex-direction: column; min-height: 0; }
#karte .kd-head { width: 640px; pointer-events: none; }
#karte .kd-h { font-size: clamp(46px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -.04em; margin-top: 14px; color: var(--ink); }
#karte .kd-h span { display: block; transition: color .7s var(--ease); }
#karte .kd-h .kd-l2 { padding-bottom: .04em; }
body[data-aud="athlete"] #karte .kd-l2, body[data-aud="coach"] #karte .kd-l1 { color: #A3A8BC; }

#karte .map-panel { position: relative; inset: auto; width: 100%; flex: 0 1 auto; min-height: 0; max-height: 640px; margin-top: 28px; padding: 7px; display: flex; flex-direction: column; border-radius: 28px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(1.5) blur(22px); backdrop-filter: saturate(1.5) blur(22px); border: 1px solid rgba(255, 255, 255, .92); box-shadow: 0 30px 70px rgba(30, 27, 75, .13), 0 6px 18px rgba(15, 23, 42, .06); pointer-events: auto; overflow: hidden; }
#karte .kd-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none; width: 100%; padding: 4px; border: 0; border-radius: 21px; background: rgba(15, 23, 42, .055); }
#karte .kd-seg a { position: relative; z-index: 1; height: 46px; padding: 0 10px; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 15px Inter; color: #5B6478; transition: color .35s; }
#karte .kd-seg a svg { width: 18px; height: 18px; opacity: .7; transition: opacity .35s, color .35s; }
#karte .kd-seg a:hover { color: var(--text); }
#karte .kd-seg a[aria-current="page"] { color: var(--ink); }
#karte .kd-seg a[aria-current="page"] svg { opacity: 1; color: var(--violet); }
#karte .kd-seg a:focus-visible { outline: 3px solid rgba(99, 102, 241, .45); outline-offset: 1px; }
#karte .kd-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 17px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .08); transition: transform .5s var(--ease); }
body[data-aud="coach"] #karte .kd-knob { transform: translateX(100%); }

#karte .kd-tool { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#karte .mp-head { padding: 14px 13px 4px; }
#karte .mp-head p.kd-promise { margin: 0; font-size: 15px; line-height: 1.5; color: #4B5468; text-wrap: pretty; }
#karte .kd-promise b { color: var(--text); font-weight: 600; }
#karte .mp-head .search-wrap { margin-top: 12px; }
#karte #focusChips { margin-top: 10px; gap: 6px; }
#karte #focusChips .tchip { height: 32px; padding: 0 12px; font-size: 13.5px; }
#karte .mp-head p.kd-count { margin: 12px 0 0; font-size: 13px; color: var(--dim); }
#karte .mp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 13px 12px; }
#karte .clist { margin-top: 4px; gap: 8px; }
#karte .ccard { padding: 10px 12px; border-radius: 16px; }
#karte .ccard .av { width: 40px; height: 40px; font-size: 13px; }
#karte .ccard small { font-size: 12.5px; }
#karte .stepper { margin: 14px 0 10px; }
#karte .mp-head h3 { font-size: 21px; }
#karte .mp-head p#pfSub { margin-top: 4px; font-size: 14px; color: var(--dim); }
#karte .kd-tool:has(.pstep[data-step="1"].on) #pfSub { display: none; }
#karte .pstep .chips { gap: 6px; }
#karte .pstep .tchip { height: 34px; padding: 0 11px; font-size: 13px; }
#karte .pstep .field { margin-top: 12px; }
#karte .pstep .hint { margin-top: 12px; padding: 10px 12px; }
#karte .pflow-actions { margin-top: 14px; }
/* the step's own button stays in reach while the panel scrolls */
#karte .mp-body .pflow-actions { position: sticky; bottom: -12px; z-index: 2; margin-bottom: -12px; padding: 14px 0 12px; background: linear-gradient(rgba(252, 251, 254, 0), rgba(252, 251, 254, .97) 14px); }
#karte .kd-foot { flex: none; display: flex; align-items: center; gap: 14px; margin: 0 6px; padding: 12px 6px 7px; border-top: 1px solid rgba(15, 23, 42, .07); }
#karte .kd-cta { flex: none; height: 46px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
#karte .kd-cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
#karte .kd-cta:hover svg { transform: translateX(3px); }
#karte .kd-fine { font-size: 12.5px; line-height: 1.45; color: #6B7389; text-wrap: pretty; }
#karte .kd-fine a { color: var(--violet-600); font-weight: 600; white-space: nowrap; }
#karte .kd-fine a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* an open coach has its own "Termin buchen": the footer keeps only the price line */
#karte .map-panel:has(#coachDetail:not(:empty)) .kd-cta { display: none; }

/* the live cards grow upward out of "Du", newest nearest */
#karte .kd-stack { position: absolute; z-index: 3; left: calc(var(--ax, 72%) - var(--kd-cw) / 2); bottom: calc(100% - var(--ay, 70%) + var(--kd-sb)); width: var(--kd-cw); height: 0; pointer-events: none; }
#karte .kd-tail { position: absolute; z-index: 3; left: calc(var(--ax, 72%) - 1px); top: calc(var(--ay, 70%) - var(--kd-sb) + 6px); width: 2px; height: var(--kd-th); border-radius: 2px; background: linear-gradient(rgba(99, 102, 241, .55), rgba(99, 102, 241, 0)); opacity: 0; transition: opacity .5s; pointer-events: none; }
#karte .kd-has-cards .kd-tail { opacity: 1; }
#karte .kd-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 15px; border-radius: 20px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(230, 232, 240, .95); box-shadow: 0 22px 54px rgba(30, 27, 75, .15), 0 5px 14px rgba(15, 23, 42, .06); font-size: 14px; line-height: 1.4; color: var(--text); opacity: 0; transform-origin: 50% 100%; transition: transform .85s var(--ease), opacity .45s ease, box-shadow .6s ease; }
#karte .kd-card.old { box-shadow: 0 10px 28px rgba(30, 27, 75, .09), 0 3px 8px rgba(15, 23, 42, .04); }
#karte .kd-card.kd-now { transition: none; }
#karte .kd-row { display: flex; align-items: center; gap: 12px; }
#karte .kd-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
#karte .kd-ic svg { width: 20px; height: 20px; }
#karte .kd-ic.ok { background: var(--emerald-50); color: #059669; }
#karte .kd-ic.or { background: #FFF1E6; color: #EA580C; }
#karte .kd-ic.me { background: var(--aurora); color: #fff; }
#karte .kd-tx { min-width: 0; flex: 1; }
#karte .kd-tx b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
#karte .kd-tx small { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.4; margin-top: 1px; }
#karte .kd-when { align-self: flex-start; margin-left: auto; padding-left: 6px; font-size: 11px; font-weight: 500; color: var(--faint); white-space: nowrap; }
#karte .kd-avah { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
#karte .kd-avah .ava-mark { width: 24px; height: 24px; flex: none; }
#karte .kd-avah b { font-weight: 600; }
#karte .kd-avah small { color: var(--faint); font-size: 12.5px; }
#karte .kd-avah .kd-when { align-self: center; }
#karte .kd-say { display: flex; justify-content: flex-end; margin-top: 10px; }
#karte .kd-bub { max-width: 92%; padding: 8px 13px; border-radius: 16px 16px 5px 16px; background: var(--violet); color: #fff; font-size: 13.5px; line-height: 1.35; }
#karte .kd-ans { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
#karte .kd-res { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px; border-radius: 14px; background: #F6F5FB; }
#karte .kd-res .av { width: 36px; height: 36px; font-size: 12px; }
#karte .kd-res .kd-tx b { font-size: 13.5px; }
#karte .kd-side { display: grid; justify-items: end; gap: 4px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
#karte .kd-side .chip svg { width: 11px; height: 11px; }
#karte .kd-side .chip.kd-done { background: var(--emerald); color: #fff; animation: kdDone .6s var(--ease); }
@keyframes kdDone { from { transform: scale(.8); } }
#karte .kd-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: #065F46; }
#karte .kd-note svg { width: 15px; height: 15px; flex: none; color: var(--emerald); }
#karte .kd-btns { display: flex; gap: 8px; margin-top: 11px; }
#karte .kd-btns span { height: 30px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; background: #F1F5F9; color: var(--text); }
#karte .kd-btns span.p { background: var(--violet); color: #fff; }

/* on the map: pins, you, events, Mia */
#karte .pin { width: 40px; height: 40px; border-width: 2.5px; box-shadow: 0 8px 18px rgba(79, 70, 229, .3); }
#karte .pin span { font-size: 11.5px; }
#karte .pin.me { width: 50px; height: 50px; }
#karte .kd-hot .pin { transform: rotate(-45deg) scale(1.2); box-shadow: 0 0 0 7px rgba(99, 102, 241, .18), 0 14px 28px rgba(79, 70, 229, .45); }
#karte .kd-off, #karte .kd-far .kd-me-m, #karte .kd-far .kd-ev-m { pointer-events: none; }
#karte .kd-off > *, #karte .kd-far .kd-me-m > *, #karte .kd-far .kd-ev-m > * { opacity: 0 !important; }
#karte .kd-hide { display: none !important; }
#karte .kd-me-m, #karte .kd-ghost-m { z-index: 2; }
#karte .kd-me { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); border: 3.5px solid #fff; box-shadow: 0 3px 10px rgba(79, 70, 229, .45); transition: opacity .3s; }
#karte .kd-me::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: rgba(99, 102, 241, .22); animation: kdHalo 2.8s var(--ease) infinite; }
#karte .kd-me em { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 700 11px Inter; font-style: normal; letter-spacing: .02em; color: var(--violet-600); background: rgba(255, 255, 255, .94); padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(15, 23, 42, .1); white-space: nowrap; }
@keyframes kdHalo { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
#karte .kd-ghost-m { padding-bottom: 9px; }
#karte .kd-ghost-m .pin { width: 46px; height: 46px; cursor: default; animation: kdGhost .8s var(--ease) both; }
@keyframes kdGhost { from { opacity: 0; transform: translateY(-34px) rotate(-45deg); } to { transform: rotate(-45deg); } }
#karte .kd-mia-m { padding-bottom: 4px; }
#karte .kd-ath { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .18); font: 600 12px Inter; color: var(--text); animation: kdPop .7s var(--ease) both; }
#karte .kd-ath span { width: 24px; height: 24px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font: 700 11px Inter; }
@keyframes kdPop { from { opacity: 0; transform: translateY(-18px) scale(.9); } }
#karte .kd-ev-m { padding: 0 0 6px; border: 0; background: none; cursor: pointer; }
#karte .kd-ev { display: grid; grid-template-rows: 13px 1fr; width: 36px; height: 40px; border-radius: 11px; overflow: hidden; text-align: center; background: #fff; border: 2.5px solid #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .18); transition: transform .3s var(--ease), opacity .3s; animation: kdPop .7s var(--ease) both; animation-delay: inherit; }
#karte .kd-ev i { font: 700 8.5px/13px Inter; letter-spacing: .08em; color: #fff; background: var(--rose); font-style: normal; }
#karte .kd-ev b { font: 700 15px/22px Outfit; color: var(--ink); }
#karte .kd-ev-m:hover .kd-ev, #karte .kd-ev-m:focus-visible .kd-ev { transform: scale(1.12); }
#karte .kd-ev-m:focus-visible { outline: none; }
#karte .kd-ev-m:focus-visible .kd-ev { box-shadow: 0 0 0 3px rgba(99, 102, 241, .5), 0 8px 18px rgba(15, 23, 42, .18); }

/* legend, the example label, the coach's demand switch and the pause button */
#karte .kd-legend { position: absolute; z-index: 5; right: 50px; bottom: 16px; display: flex; align-items: center; gap: 8px; }
#karte .kd-legend .legend { position: static; inset: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; max-width: none; height: 36px; padding: 0 6px 0 13px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); font: 500 12px Inter; color: #56607A; white-space: nowrap; }
#karte .legend i { width: 11px; height: 11px; }
#karte .legend .l4 { width: 10px; height: 11px; border-radius: 3px; background: linear-gradient(var(--rose) 0 38%, #fff 38%); box-shadow: inset 0 0 0 1px #E1E3EC; }
#karte .map-shell .map-demo { position: static; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin: 0; border-radius: 999px; background: var(--violet-50); color: var(--violet-600); font: 600 11.5px Inter; letter-spacing: .01em; }
#karte .kd-legend .tool { height: 36px; padding: 0 14px 0 12px; border-radius: 999px; gap: 8px; font: 600 12.5px Inter; background: rgba(255, 255, 255, .86); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); transition: background .3s, color .3s; }
#karte .kd-legend .tool .l3 { width: 22px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(236, 72, 153, .4), rgba(168, 85, 247, .65), rgba(99, 102, 241, .85)); }
#karte .kd-legend .tool[aria-pressed="true"] { background: var(--ink); color: #fff; }
#karte .kd-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); color: #56607A; }
#karte .kd-play:hover { color: var(--text); }
#karte .kd-play[hidden] { display: none; }
#karte .kd-play svg { display: none; width: 12px; height: 12px; fill: currentColor; }
#karte .kd-play .rp { width: 15px; height: 15px; fill: none; }
#karte .kd-play[data-state="pause"] .pa, #karte .kd-play[data-state="play"] .pl, #karte .kd-play[data-state="replay"] .rp { display: block; }
#karte .kd-paused .kd-me::before, #karte .kd-paused .pin.me::after { animation-play-state: paused; }

/* below the stage, coaches: the four steps and the promises */
#karte .kd-after { padding-top: 34px; padding-bottom: 96px; }
#karte .kd-after .howpin { margin-top: 0; }
#karte .hp { background: #fff; box-shadow: var(--shadow-sm); }

@media (min-width: 1281px) { #karte .map-shell { --kd-cw: 372px; } }
@media (max-width: 1100px) {
  #karte .map-shell { --kd-cw: 300px; }
  #karte .kd-col { width: 420px; }
  #karte .kd-head { width: 520px; }
  #karte .kd-h { font-size: 46px; }
}
@media (max-width: 960px) {
  #karte .kd-col { width: 390px; }
  #karte .kd-head { width: 440px; }
  #karte .kd-h { font-size: 40px; }
  #karte .kd-legend .legend { height: auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; max-width: 230px; padding: 7px 6px 6px 12px; border-radius: 18px; }
}

/* phones: the headline over the top of the map, the card under it, the city open around
   you, and the panel as a sheet that overlaps the bottom of the map */
@media (max-width: 860px) {
  #karte .map-shell { --kd-mh: 620px; --kd-cw: auto; display: block; height: auto; min-height: 0; max-height: none; padding-top: var(--kd-mh); overflow: visible; background: none; }
  #karte #map, #karte .map-fallback, #karte .kd-veil { position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: var(--kd-mh); order: 0; }
  #karte .map-fallback { padding: 0 16px 150px; place-items: end center; text-align: center; }
  #karte .kd-veil { background:
    linear-gradient(180deg, #fff 0, #F7F5FB 70px, #F7F5FB calc(var(--kd-st, 190px) - 10px), rgba(247, 245, 251, .6) calc(var(--kd-st, 190px) + 30px), rgba(247, 245, 251, 0) calc(var(--kd-st, 190px) + 90px)),
    linear-gradient(0deg, rgba(247, 245, 251, .75) 0, rgba(247, 245, 251, 0) 90px); }
  #karte .kd-wrap { position: static; display: block; width: auto; margin: 0; padding: 0; max-width: none; }
  #karte .kd-col { display: contents; }
  #karte .kd-head { position: absolute; z-index: 4; top: 86px; left: 16px; right: 16px; width: auto; }
  #karte .kd-h { font-size: min(9.4vw, 40px); line-height: 1.05; letter-spacing: -.035em; margin-top: 10px; }
  #karte .map-panel { z-index: 6; margin: -28px 0 0; width: auto; max-height: none; padding: 8px 8px 0; border-radius: 28px; background: #fff; border: 0; box-shadow: 0 -14px 40px rgba(30, 27, 75, .1), 0 12px 30px rgba(30, 27, 75, .06); -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  #karte .kd-seg a { height: 48px; padding: 0 8px; font-size: 15px; }
  #karte .mp-head { padding: 16px 10px 4px; }
  #karte #focusChips { flex-wrap: nowrap; overflow-x: auto; margin: 10px -18px 0; padding: 0 18px 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent); }
  #karte #focusChips::-webkit-scrollbar { display: none; }
  #karte #focusChips .tchip { flex: none; height: 36px; padding: 0 14px; font-size: 14px; }
  #karte .mp-body { overflow: visible; padding: 4px 10px 12px; }
  #karte .mp-body .pflow-actions { position: static; margin-bottom: 0; padding: 0; background: none; }
  #karte .kd-foot { flex-direction: column; align-items: stretch; gap: 10px; margin: 0 2px; padding: 14px 8px 20px; }
  #karte .kd-cta { width: 100%; height: 52px; font-size: 16px; }
  #karte .kd-fine { text-align: center; font-size: 13px; }
  #karte .kd-stack { left: 16px; right: 16px; width: auto; max-width: 440px; margin: 0 auto; top: var(--kd-st, 190px); bottom: auto; }
  #karte .kd-card { top: 0; bottom: auto; transform-origin: 50% 0; padding: 12px 13px; border-radius: 18px; }
  #karte .kd-tail { display: none; }
  #karte .kd-legend { right: 42px; left: auto; top: auto; bottom: calc(100% - var(--kd-mh) + 42px); display: grid; grid-template-columns: auto auto; justify-content: end; justify-items: end; gap: 6px; }
  #karte .kd-legend .tool { grid-column: 1 / -1; white-space: nowrap; }
  #karte .kd-legend .legend { height: auto; padding: 6px 6px 5px 12px; gap: 4px 10px; }
  #karte .kd-legend .tool { height: 34px; padding: 0 12px 0 10px; font-size: 12px; gap: 7px; }
  #karte .kd-legend .tool .l3 { width: 18px; }
  #karte .kd-play { width: 34px; height: 34px; }
  #karte .kd-lg { display: none; }
  #karte .maplibregl-ctrl-bottom-right { bottom: 36px; }
  #karte .maplibregl-ctrl-group { display: none; }
  #karte .kd-after { padding-top: 28px; padding-bottom: 72px; }
}


/* athlete headlines: the gradient half gets its own line at every width, so it never splits */
.h-sec .grad.blk { display: block; }
.h-sec:has(> .grad.blk) { text-wrap: balance; }

/* Ava: kcal values never break away from their number */
#ava .scene[data-for="athlete"] .lrow .k { white-space: nowrap; }
#avaSteps small { text-wrap: pretty; }

/* Du und dein Coach: the card for a trainer who is not here yet */
.invite-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 6px 20px; align-items: center; margin-top: 14px; padding: 22px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.invite-card .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet); }
.invite-card .ic svg { width: 24px; height: 24px; }
.invite-card h3 { font-size: 20px; text-wrap: balance; }
.invite-card p { color: var(--dim); font-size: 15px; margin-top: 4px; max-width: 620px; text-wrap: pretty; }
/* both states share one grid cell, so the button keeps its width when it says Kopiert */
#trainerLink { display: inline-grid; }
#trainerLink > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .25s, visibility .25s; }
#trainerLink .done { opacity: 0; visibility: hidden; }
#trainerLink.copied { background: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, .3); }
#trainerLink.copied .lbl { opacity: 0; visibility: hidden; }
#trainerLink.copied .done { opacity: 1; visibility: visible; }
.tl-url { margin-top: 8px !important; font-size: 14px !important; color: var(--dim); overflow-wrap: anywhere; }
.tl-url b { font-weight: 600; color: var(--text); user-select: all; -webkit-user-select: all; }

/* map: on a phone the athlete list starts with five coaches */
.clist-more { display: none; }

@media (max-width: 860px) {
  #ava .demo-dark { bottom: auto; top: -19px; right: 6px; }
  #ava .scene[data-for="athlete"] .panel { padding: 18px; }
  #ava .scene[data-for="athlete"] .msg.ava { max-width: 100%; }
  #ava .scene[data-for="athlete"] .lrow { padding: 10px 12px; }
  .invite-card { grid-template-columns: 44px 1fr; padding: 20px; gap: 12px 14px; }
  .invite-card .ic { width: 44px; height: 44px; border-radius: 14px; align-self: start; }
  .invite-card .ic svg { width: 21px; height: 21px; }
  .invite-card h3 { font-size: 18px; }
  .invite-card .btn { grid-column: 1 / -1; width: 100%; }
  #clist:not(.all) > .ccard:nth-child(n+6) { display: none; }
  .clist-more { display: flex; width: 100%; margin-top: 10px; }
  .clist-more[hidden] { display: none; }
  .clist-more b { font-weight: 600; color: var(--faint); }
}

/* ------------------------------------------------------------------------ */
/* spacer between merge anchors, keep                                       */
/* ------------------------------------------------------------------------ */

/* @@ANCHOR aud-2: athlete fixes, lower sections and global (builder B2) insert below */
/* 360 px (#warum and the whole page): the comparison picks scroll inside their own row */
.why-pick { max-width: 100vw; }
/* ==========================================================================
   Order rework, 2026-09-26: coach map early, one "Du und dein Coach"
   section, the 10 km run inside Events, a shorter coach opener, six tiles
   plus "Mehr zeigen" on phones, and real buttons where a decision happens
   ========================================================================== */
/* coach opener: the pinned track is half as long as it was (260vh) */
.collapse { height: 180vh; }

/* Du und dein Coach: the bridge fades back to white for whatever follows it */
.bridge { background: linear-gradient(#fff, var(--mist) 38%, var(--mist) 74%, #fff); padding-bottom: 110px; }
#bruecke { position: relative; }
.alias { position: absolute; top: 0; left: 0; }
.bx-ways { margin-top: 76px; }
/* #wege (the quiz link) and #lauf (old links to the run) are blocks inside a section: they land below the fixed nav */
#wege, #lauf { scroll-margin-top: 96px; }
.bx-ways-h { text-align: center; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; text-wrap: balance; }
.bx-ways .bridge-cards { margin-top: 26px; }
@media (max-width: 860px) {
  .bx-ways { margin-top: 56px; }
  .bx-ways .bridge-cards { gap: 10px; margin-top: 18px; }
  .bx-ways .bcard { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 18px; border-radius: 20px; }
  .bx-ways .bcard .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; margin: 0; }
  .bx-ways .bcard .ic svg { width: 20px; height: 20px; }
  .bx-ways .bcard h4 { font-size: 17px; margin: 0; }
  .bx-ways .bcard p { font-size: 14.5px; }
}
.bridge .invite-card { margin-top: 16px; }

/* Ava, desktop: a quiet way to start, right under what Ava just built in the last
   scene. It sits in the right column, inside the device box (the last scenes leave
   more than 100 px free below their panel), so it never reaches the bottom edge or
   the Prototyp pill on laptop heights. It fades in after the scene has built itself;
   while the scene is off it is hidden from clicks and the keyboard. Below 1101 px
   the athlete button stays away (the phone bar comes in over the last scene there),
   and the coach button shows on taller phones, since the bar stays off over Ava for
   coaches */
.btn-quiet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.btn-quiet:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.btn-quiet svg { width: 16px; height: 16px; }
.ava-cta { display: none; }
@media (min-width: 1101px) {
  #ava .scene .ava-cta { display: block; margin-top: 18px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s; }
  #ava .scene.on .ava-cta { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s var(--ease) 1.9s, transform .6s var(--ease) 1.9s; }
  .ava-cta .btn { height: 44px; font-size: 15px; }
}
@media (max-width: 1100px) and (min-height: 740px) {
  body[data-aud="coach"] #ava .scene[data-for="coach"] .ava-cta { display: block; margin-top: 14px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
  body[data-aud="coach"] #ava .scene[data-for="coach"].on .ava-cta { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) 1.2s; }
  body[data-aud="coach"] #ava .scene[data-for="coach"] .ava-cta .btn { display: flex; width: 100%; max-width: 100%; height: auto; min-height: 44px; padding: 10px 16px; justify-content: space-between; gap: 10px; white-space: normal; text-wrap: balance; text-align: left; line-height: 1.3; font-size: 14.5px; }
}

/* Alles drin on phones: six tiles, the rest behind "Mehr zeigen" */
.bento-more { display: none; }
@media (max-width: 860px) {
  #alles:not(.all) .bento > .bt:nth-child(n+7) { display: none; }
  #alles:not(.all) .bento-more { display: flex; width: 100%; margin-top: 16px; }
}
/* the calculator, the quiz and the prices: the button sits with the answer */
.result .result-cta { position: relative; margin-top: 22px; }
/* phones: the calculator label is wider than the result card, so it wraps to two lines instead of being cut */
@media (max-width: 560px) { .result .result-cta { white-space: normal; height: auto; min-height: 48px; padding: 12px 20px; line-height: 1.3; max-width: 100%; text-align: center; } }
#qCoach a { white-space: nowrap; }
.go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.web-note { font-size: 13px; color: var(--dim); }
.planprev .web-note { color: rgba(255, 255, 255, .6); }

/* events: a real button next to each demo */
.ev-cta { display: flex; justify-content: center; margin-top: 22px; }

/* the 10 km run as the big example inside Events, four steps and one card, no pinned story */
.run-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 72px; padding: 48px; border-radius: 36px; background: var(--mist); }
.rx-h { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; margin-top: 10px; text-wrap: balance; }
.rx-h .grad { display: block; }
.rx-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.rx-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.rx-steps .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 600 13px Inter; background: var(--aurora); color: #fff; }
.rx-steps b { display: block; font: 600 17px Outfit; }
.rx-steps small { display: block; color: var(--dim); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.rx-card { position: relative; }
.rx-card .demo-light { top: 24px; right: 22px; bottom: auto; }
.rx-route { margin: 2px -6px 0; }
.rx-route svg { display: block; width: 100%; height: auto; }
.rx-draw { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.rx-card.in .rx-draw { stroke-dashoffset: 0; }
.rx-card .money2 { margin-top: 4px; }
.rx-sub { margin: 18px 0 0; }
.rx-card .reglist { margin-top: 10px; }
@media (max-width: 1100px) { .run-ex { grid-template-columns: 1fr; gap: 28px; max-width: 620px; margin-left: auto; margin-right: auto; } }
@media (max-width: 860px) {
  .run-ex { margin-top: 48px; padding: 24px 18px; border-radius: 28px; }
  .rx-card { padding-bottom: 34px; }
  /* the route labels scale with the viewBox: 20 units come to about 12 px on a phone */
  .rx-route text { font-size: 20px; }
  .rx-card .demo-light { top: auto; bottom: 12px; right: 18px; }
  .rx-card .reglist.req3 > div { display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; }
  .rx-card .reglist.req3 .join { grid-column: 2; justify-self: start; margin: 0; height: 30px; }
}

/* courses: the button under the yearly result */
.cc-out .cc-cta { margin-top: 16px; align-self: flex-start; }

/* the films end with a way in */
.tour-cta { display: flex; margin-top: 26px; padding-left: 16px; }
@media (max-width: 860px) { .tour-cta { padding-left: 0; justify-content: center; } }

/* the last call, coaches: a quiet way straight to an account next to the pin */
.final .final-alt { background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); padding: 0 14px; }
.final .final-alt:hover { background: transparent; text-decoration-color: #fff; }

/* ==========================================================================
   Review fixes, sections and global (builder Y)
   ========================================================================== */
/* headlines and ledes never leave one word alone on the last line (the top of the hero keeps its own) */
.h-sec { text-wrap: balance; }
main > section:not(#top) .lede { text-wrap: pretty; }

/* Alles drin: every caption holds three lines, so the titles of a row line up */
@media (min-width: 861px) { .bento .bt p { min-height: 4.65em; } }

/* the map: the legend sits top right, clear of the zoom buttons and the
   OpenStreetMap credit at the bottom; for coaches under their tool button */
.legend { top: 20px; right: 20px; bottom: auto; }
body[data-aud="coach"] .legend { top: 70px; }
@media (max-width: 860px) {
  .legend { top: 12px; left: 12px; right: auto; bottom: auto; flex-wrap: wrap; max-width: calc(100% - 24px); }
  body[data-aud="coach"] .legend { top: 62px; }
  /* phones: the sample label stays on the map, under the legend */
  .map-shell .map-demo { display: inline-block; left: 12px; right: auto; bottom: auto; top: 58px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .9); }
  body[data-aud="coach"] .map-shell .map-demo { top: 108px; }
}

/* events: the count never breaks from its number; a real click gets a demo note with the signup */
.ev-detail .stackav em { white-space: nowrap; }
.evd-note.demo { color: var(--dim); }
.evd-note a { color: var(--violet-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* coach pricing: which payments the fee applies to */
.fee-note { margin: 22px auto 0; max-width: 720px; text-align: center; font-size: 14px; color: var(--dim); text-wrap: balance; }
.fee-note + .pin-free { margin-top: 14px; }

/* Ava's pinned stage on smaller screens starts below the nav, and on short
   screens the scene gets a little less height so the column fits */
@media (max-width: 1100px) { .ava-sec .sticky { padding-top: 68px; } }
/* short laptop screens (1280x720, 1366x768): the column is taller than the room
   below the nav, so the stage starts below it and the column packs tighter */
@media (min-width: 1101px) and (max-height: 900px) {
  .ava-sec .sticky { padding-top: 68px; }
  .ava-sec .h-sec { font-size: clamp(34px, 3.4vw, 46px); margin-top: 12px !important; }
  .ava-sec .lede { margin-top: 12px; }
  .ava-sec .steps { margin-top: 18px; }
  .ava-sec .steps li { padding: 11px 16px; }
  .ava-sec .ava-prog { margin-top: 14px; }
}
@media (max-width: 1100px) and (max-height: 880px) {
  .ava-in { gap: 14px; align-content: start; padding-top: 14px; }
  .ava-sec .h-sec { font-size: clamp(30px, 4.4vw, 44px); margin-top: 12px !important; }
  .ava-sec .steps { margin-top: 16px; }
  .ava-sec .steps li { padding: 12px 14px; }
  .ava-sec .ava-prog { margin-top: 12px; }
  .ava-sec .device { height: 360px; }
  #ava .scene .panel { padding: 18px; }
  #ava .scene .stack { gap: 8px; }
  #ava .scene .panel .lrow { padding: 9px 12px; }
  #ava .scene .msg { padding: 11px 14px; font-size: 14.5px; }
  #ava .scene .panel:not(.stack) > .stack, #ava .scene .panel:not(.stack) > .pop { margin-top: 12px !important; }
}
/* short screens: the second headline line goes, the scene shrinks a little (shorter tiers under fix-hero).
   The 800 px tier is for phones only; windows 861 to 1100 wide (iPad landscape, small laptops) keep 720. */
@media (max-width: 860px) and (max-height: 800px), (max-width: 1100px) and (max-height: 720px) {
  .ava-sec .h-sec br, .ava-sec .h-sec span { display: none; }
  .ava-sec .device { height: 320px; transform: scale(.88); transform-origin: top center; }
}

/* Athlete page: the order of the story (what someone gets alone first, the
   coach cluster after it) is set in the DOM by site.js arrange(), so the tab
   order matches the screen. */

/* ==========================================================================
   Events, athlete side: the list nearby and one open event to join
   ========================================================================== */
.ev-ath { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin-top: 56px; }
#events h2[data-for="athlete"] .grad, #alles h2[data-for="athlete"] .grad { white-space: nowrap; }
.ev-ath .stackav .av { width: 24px; height: 24px; font-size: 8.5px; }
.ev-lcard { padding: 26px; display: flex; flex-direction: column; }
.ev-lcard .evlist { flex: 1; grid-auto-rows: 1fr; }
.ev-ath .evlist { gap: 12px; }
.ev-ath .evcard { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; padding: 14px; border-radius: 20px; }
.ev-ath .evcard:hover { border-color: #cfd4e2; }
.ev-ath .evcard.on { border-color: rgba(99, 102, 241, .55); box-shadow: 0 0 0 4px rgba(99, 102, 241, .1); }
.ev-ath .evdate { width: 60px; height: 64px; border-radius: 16px; }
.ev-ath .evdate b { font-size: 22px; }
.ev-ath .evdate small { font-size: 11px; }
.ev-ath .evcard .t b { font-size: 16px; }
.ev-ath .evcard .t small { display: block; font-size: 13.5px; line-height: 1.4; }
.ev-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--dim); transition: background .3s, color .3s; }
.ev-go svg { width: 16px; height: 16px; }
.ev-ath .evcard.on .ev-go { background: var(--violet); color: #fff; }
.ev-detail { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ev-detail.swap .evd-cover > *, .ev-detail.swap .evd-facts { animation: evdIn .45s var(--ease); }
@keyframes evdIn { from { opacity: 0; transform: translateY(6px); } }
.evd-cover { position: relative; padding: 24px 26px 22px; color: #fff; overflow: hidden; background: radial-gradient(80% 130% at 100% 0%, rgba(124, 58, 237, .75), transparent 62%), radial-gradient(60% 110% at 0% 100%, rgba(219, 39, 119, .38), transparent 62%), var(--ink); }
.evd-kind { display: inline-block; font: 700 11.5px Inter; letter-spacing: .12em; text-transform: uppercase; color: #C7D2FE; }
.evd-cover h3 { color: #fff; font-size: 30px; line-height: 1.05; margin-top: 8px; }
.evd-sub { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.evd-facts { list-style: none; margin: 0; padding: 18px 26px 4px; display: grid; gap: 11px; }
.evd-facts li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.evd-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet); flex: none; }
.evd-ic svg { width: 16px; height: 16px; }
.evd-facts .av { width: 32px; height: 32px; font-size: 11px; }
.evd-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px 0; }
.ev-detail .stackav { margin-top: 0; min-width: 0; }
.ev-detail .stackav .av { width: 28px; height: 28px; font-size: 9.5px; }
.ev-detail .stackav .av.me { background: #DB2777; animation: arrive .6s var(--ease); }
.evd-join { flex: none; display: inline-grid; height: 46px; padding: 0 20px; border-radius: 14px; background: var(--violet); color: #fff; font: 600 15px Inter; box-shadow: 0 8px 24px rgba(99, 102, 241, .35); transition: background .35s, box-shadow .35s, transform .2s; }
.evd-join > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: opacity .3s, transform .4s var(--ease); }
.evd-join .jb { opacity: 0; transform: translateY(8px); }
.evd-join svg { width: 16px; height: 16px; }
.evd-join:hover { background: var(--violet-600); }
.evd-join.press, .evd-join:active { transform: scale(.95); }
.evd-join[aria-pressed="true"] { background: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, .3); }
.evd-join[aria-pressed="true"] .ja { opacity: 0; transform: translateY(-8px); }
.evd-join[aria-pressed="true"] .jb { opacity: 1; transform: none; }
.evd-note { padding: 10px 26px 22px; font-size: 13px; color: var(--faint); }
@media (max-width: 1100px) {
  .ev-ath { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 860px) {
  .ev-ath { margin-top: 36px; gap: 14px; }
  .ev-lcard { padding: 18px; }
  .ev-ath .evcard { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
  .ev-ath .evdate { width: 52px; height: 58px; border-radius: 14px; }
  .ev-ath .evdate b { font-size: 20px; }
  .ev-ath .evcard .t b { font-size: 15px; }
  .ev-ath .evcard .t small { font-size: 12.5px; }
  .ev-go { width: 30px; height: 30px; }
  .evd-cover { padding: 20px; }
  .evd-cover h3 { font-size: 26px; }
  .evd-facts { padding: 16px 20px 2px; }
  .evd-facts li { font-size: 14.5px; }
  .evd-foot { padding: 16px 20px 0; }
  .evd-join { padding: 0 14px; }
  .evd-note { padding: 10px 20px 18px; }
}
/* narrow phones: the avatars and count get their own row and the button spans the width under them,
   before and after the press, so "18 dabei" is never covered and the card never jumps */
@media (max-width: 380px) { .evd-foot { flex-wrap: wrap; row-gap: 12px; } .ev-detail .stackav { flex: none; } .evd-join { flex: 1 1 100%; } }

/* ==========================================================================
   Alles drin: energy balance, reminders, wearables that are honestly "soon"
   ========================================================================== */
.eb { width: 100%; max-width: 520px; }
.eb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eb-stat { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; }
.eb-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.eb-ic svg { width: 17px; height: 17px; }
.eb-stat small { display: block; font-size: 11.5px; line-height: 1.2; color: var(--dim); }
.eb-stat b { display: block; font: 600 17px Outfit; }
.eb-chip { margin-left: auto; font-size: 12.5px; padding: 6px 11px; opacity: 0; transform: scale(.85); transition: opacity .4s 1.6s, transform .5s var(--ease) 1.6s; }
.play .eb-chip { opacity: 1; transform: none; }
.eb-bar { position: relative; height: 14px; border-radius: 999px; background: #fff; margin-top: 22px; overflow: hidden; }
.eb-net { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #A5B4FC, var(--violet)); transition: width 1.4s var(--ease) .2s; }
.eb-gap { position: absolute; right: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(135deg, rgba(16, 185, 129, .4) 0 5px, rgba(16, 185, 129, .14) 5px 10px); transition: width .7s var(--ease) 1.4s; }
.play .eb-net { width: 76.1%; }
.play .eb-gap { width: 23.9%; }
.eb-scale { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--dim); }
.eb-scale b { color: var(--text); font-weight: 600; }
.push { width: 100%; max-width: 440px; display: grid; gap: 10px; }
.pn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .06); opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .5s, transform .6s var(--ease); }
.pn img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.pn-in { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.pn-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--faint); }
.pn-top b { font-weight: 600; color: var(--dim); }
.pn-t { display: block; font-weight: 600; color: var(--text); margin-top: 1px; }
.pn-m { display: block; color: var(--dim); }
.play .pn { opacity: 1; transform: none; }
.play .pn2 { transition-delay: .45s; }
.pn2 { opacity: 0; }
.play .pn2 { opacity: .78; }
.pn-quiet { justify-self: start; font-size: 12px; padding: 6px 11px; opacity: 0; transition: opacity .5s 1s; }
.pn-quiet svg { width: 13px; height: 13px; }
.play .pn-quiet { opacity: 1; }
.wear.later { max-width: 250px; }
.wwatch { justify-self: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--faint); box-shadow: var(--shadow-sm); }
.wwatch svg { width: 26px; height: 26px; }
.wear.later .wr { color: var(--dim); }
.wear.later .chip { margin-left: auto; }
#alles .sp-demo { margin-top: 12px; }
@media (max-width: 860px) {
  .eb-chip { margin-left: 0; }
  .eb-stat { flex: 1 1 auto; }
  /* one column: the record chip sits above the bars instead of on them */
  .bt.dark .pr-badge { position: relative; right: auto; top: auto; order: -1; margin-bottom: 16px; }
}

/* the quiz: a suggested week, labelled as one */
.q-sugg { margin-top: 18px; font: 600 11px Inter; letter-spacing: .12em; text-transform: uppercase; color: rgba(199, 210, 254, .7); }
.q-sugg + .days { margin-top: 8px; }
.quiz h2 .grad { white-space: nowrap; }
.planprev h3 { line-height: 1.2; text-wrap: balance; }
@media (max-width: 560px) {
  .planprev { padding: 22px; }
  /* seven columns do not fit the word Training: a dot marks the day instead */
  .days { gap: 4px; }
  .day { font-size: 0; padding: 10px 0 9px; }
  .day b { font-size: 11px; }
  .day:after { content: ""; display: block; width: 6px; height: 6px; margin: 6px auto 0; border-radius: 50%; background: rgba(255, 255, 255, .22); }
  .day.tr:after { background: #fff; }
}

/* the last call: the athlete headline is longer than the coach one */
.final h2[data-for="athlete"] { font-size: clamp(40px, 6vw, 76px); max-width: 900px; margin: 0 auto; text-wrap: balance; }

/* ==========================================================================
   Phones: a signup bar once the hero stage has scrolled away
   ========================================================================== */
.sbar { display: none; }
@media (max-width: 860px) {
  .sbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 20px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); transform: translateY(calc(100% + 30px)); opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s; }
  .sbar.on { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .3s; }
  .sbar small { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--dim); text-wrap: balance; }
  .sbar .btn { flex: none; height: 44px; padding: 0 18px; font-size: 15px; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .sbar, .sbar.on { transition: none; } }

/* coach bento: a real coach post (type, title, cover, pinned), no invented likes */
.post { padding: 12px; }
.post-h { display: flex; align-items: center; gap: 9px; }
.post-who { min-width: 0; flex: 1; }
.post-who b { display: block; font-size: 13.5px; }
.post-who small { display: block; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-pin { flex: none; font: 600 10.5px Inter; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: var(--violet-50); color: var(--violet-600); }
.post-cover { position: relative; height: 96px; margin: 10px 0 9px; border-radius: 12px; overflow: hidden; background: var(--mist); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.06); opacity: 0; transition: opacity .6s, transform 1.2s var(--ease); }
.post-type { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #4F46E5; font: 600 11px Inter; }
.post-type svg { width: 12px; height: 12px; }
.post-t { display: block; font: 600 15px Outfit; letter-spacing: -.01em; }
.post-p { font-size: 12.5px !important; color: var(--dim); margin: 3px 0 0 !important; line-height: 1.45; }
.post-live { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 4px 9px; border-radius: 999px; background: var(--emerald-50); color: #047857; font: 600 11px Inter; opacity: 0; transform: translateY(6px); transition: opacity .4s .9s, transform .5s var(--ease) .9s; }
.post-live svg { width: 11px; height: 11px; }
.bt.pub .post-cover img { opacity: 1; transform: none; }
.bt.pub .post-live { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .post-cover img, .post-live { opacity: 1; transform: none; } }

/* the course cover's runner lives inside the svg now (animateMotion on the same path), so it always sits on the dashed line */
.cover .crun { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
@media (max-width: 860px) { .cover > svg { left: 50%; margin-left: -80px; } }

/* coach bento: the "Zuverlässig" badge as athletes see it on a coach profile,
   with the kept rate, and the Sprints overview with each athlete's pace. The
   sample sprints follow the app's pace rule (ahead from 10 points over the
   share of time gone, behind from 10 under). */
.relc, .spr { width: 100%; max-width: 320px; }
/* both mocks sit at the top of their tile, like the post and chat tiles next to them */
.bt .bv:has(> .relc), .bt .bv:has(> .spr) { align-items: flex-start; }
.bt:has(.relc) > p, .bt:has(.spr) > p { text-wrap: pretty; }
.relc { display: grid; gap: 8px; }
.relp { padding: 14px; border-radius: 18px; background: #fff; }
.rel-h { display: flex; align-items: center; gap: 10px; }
.rel-h .av { width: 34px; height: 34px; font-size: 12px; }
.rel-who { min-width: 0; }
.rel-who b { display: block; font-size: 13.5px; line-height: 1.3; }
.rel-who small { display: block; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--violet-50); color: #4338CA; box-shadow: inset 0 0 0 1px #C7D2FE; font: 600 11.5px Inter; opacity: 0; transform: scale(.86); transform-origin: left center; transition: opacity .35s 1.15s, transform .6s var(--ease) 1.15s; }
.rel-badge svg { width: 13px; height: 13px; flex: none; }
.rel-badge:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: translateX(-110%); }
.play .rel-badge { opacity: 1; transform: none; }
.play .rel-badge:after { transform: translateX(190%); transition: transform .9s ease 1.45s; }
.rel-kept { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rel-kept b { font: 600 28px/1 Outfit; letter-spacing: -.02em; white-space: nowrap; }
.rel-kept small { font-size: 12px; line-height: 1.3; color: var(--dim); }
.rel-bar { display: block; height: 6px; margin-top: 10px; border-radius: 6px; background: #E9EDF4; overflow: hidden; }
.rel-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--emerald); transition: width 1.4s var(--ease) .15s; }
.play .rel-bar i { width: 97%; }
.rel-off { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line); background: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s 1.6s, transform .5s var(--ease) 1.6s; }
.rel-off .av { width: 28px; height: 28px; font-size: 10.5px; }
.rel-ow { min-width: 0; }
.rel-ow b { display: block; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-ow small { display: flex; align-items: flex-start; gap: 4px; font: 600 11px/1.35 Inter; color: #047857; }
.rel-ow small svg { width: 11px; height: 11px; flex: none; margin-top: 2px; }
.play .rel-off { opacity: 1; transform: none; }

.spr { padding: 4px 14px; border-radius: 18px; background: #fff; }
.spr-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 7px; }
.spr-h b { font: 600 13px Inter; }
.spr-h span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mist); color: var(--dim); font: 600 11px/20px Inter; text-align: center; }
.spr-r { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; row-gap: 7px; align-items: center; padding: 9px 0 10px; border-top: 1px solid var(--line); }
.spr-r .av { width: 28px; height: 28px; font-size: 10.5px; }
.spr-t { min-width: 0; }
.spr-n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.spr-n b { font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spr-n small { flex: none; font-size: 11px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spr-t > small { display: block; font-size: 11px; line-height: 1.35; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spr-c { flex: none; min-width: 84px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 600 10.5px Inter; white-space: nowrap; opacity: 0; transform: translateX(4px); transition: opacity .35s 1.1s, transform .5s var(--ease) 1.1s; }
.spr-c svg { width: 11px; height: 11px; flex: none; }
.spr-c.up { background: var(--emerald-50); color: #047857; }
.spr-c.on { background: var(--violet-50); color: var(--violet-600); }
.spr-c.dn { background: #FFF1F2; color: #BE123C; }
.spr-c.dn svg { transform: scaleY(-1); }
.spr-l { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.spr-b { position: relative; flex: 1; height: 6px; border-radius: 6px; background: #EDF0F6; }
.spr-b i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6366F1, #8B5CF6); transition: width 1.3s var(--ease); }
.spr-b i:after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px #7C6CF4, 0 1px 3px rgba(15, 23, 42, .18); opacity: 0; transition: opacity .3s; }
.play .spr-b i { width: var(--p); }
.play .spr-b i:after { opacity: 1; }
.play .spr-c { opacity: 1; transform: none; }
.play .spr-r:nth-child(3) .spr-b i { transition-delay: .15s; }
.play .spr-r:nth-child(4) .spr-b i { transition-delay: .3s; }
.play .spr-r:nth-child(3) .spr-c { transition-delay: 1.25s; }
.play .spr-r:nth-child(4) .spr-c { transition-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .rel-badge, .rel-off, .spr-c, .spr-b i:after { opacity: 1; transform: none; }
  .rel-badge:after { display: none; }
  .rel-bar i { width: 97%; }
  .spr-b i { width: var(--p); }
}

/* ---- review fixes 2026-09-27: each builder adds its rules right under its own anchor */

/* @@ANCHOR fix-mapui */
/* phones and touch screens: 16px fields, so iOS Safari never zooms in on focus (desktop keeps 15px) */
@media (max-width: 860px), (pointer: coarse) { .input { font-size: 16px; } }
/* forced colors drop the violet ring and shadow: a transparent outline becomes a visible one there */
.input:focus { outline: 2px solid transparent; outline-offset: 2px; }
#karte .kd-ev-m:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
/* the echo of a long query wraps inside the suggestions */
.sugg-note { overflow-wrap: anywhere; }
/* touch: "Auf die Karte" brings the city field into view with a short cue instead of the keyboard */
#karte .input.kd-cue { border-color: var(--violet); animation: kdCue 1.8s var(--ease); }
@keyframes kdCue { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } 30%, 70% { box-shadow: 0 0 0 5px rgba(99, 102, 241, .22); } }
@media (prefers-reduced-motion: reduce) { #karte .input.kd-cue { animation: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, .15); } }
#karte #pinCity { scroll-margin-bottom: 16px; }
/* a coach's price says what it is for */
#clist .side .per { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: var(--dim); }
#coachDetail .req .per { font-size: 13px; font-weight: 500; color: var(--dim); }
/* the demo notes under a coach offer the signup */
#reqDone a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* narrow phones: "Termin buchen" and "Anfrage senden" share the row without running past the panel */
@media (max-width: 400px) { #coachDetail .pflow-actions .btn { min-width: 0; padding: 0 12px; } }
/* desktop: the coach list fades out above the footer instead of ending in a hard cut,
   and the wheel moves on to the page at the list's end (see map.js); a thin scrollbar */
#karte .mp-body { overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .22) transparent; }
@media (min-width: 861px) {
  #karte .kd-tool[data-for="athlete"] .mp-body { padding-bottom: 30px; }
  /* a coach's detail keeps the 12px its sticky Termin buchen row (bottom -12px) was built for */
  #karte .map-panel:has(#coachDetail:not(:empty)) .kd-tool[data-for="athlete"] .mp-body { padding-bottom: 12px; }
  #karte .kd-tool[data-for="athlete"] .kd-foot { position: relative; }
  #karte .kd-tool[data-for="athlete"] .kd-foot::before { content: ""; position: absolute; left: -6px; right: -6px; bottom: 100%; height: 28px; background: linear-gradient(rgba(252, 251, 254, 0), rgba(252, 251, 254, .97)); pointer-events: none; }
  #karte .map-panel:has(#coachDetail:not(:empty)) .kd-foot::before { display: none; }
}
/* the preview card: a long name wraps before the Vorschau tag instead of running under it */
#pinFlow .sharecard .who { padding-right: 92px; }
/* outside Frankfurt the demand switch rests (no sample data there) */
#karte .kd-legend .tool:disabled { opacity: .45; cursor: default; }
/* phones: the fine print link gets a finger sized tap area without moving the line */
@media (max-width: 860px) { #karte .kd-fine a { padding: 10px 4px; } }
/* phones: the key now has two rows, so it sits a little lower and stays clear of the pins around you */
@media (max-width: 860px) { #karte .kd-legend { bottom: calc(100% - var(--kd-mh) + 34px); gap: 5px; } }


/* @@ANCHOR fix-hero */
/* Ava's pinned stage on short phones: every scene, down to its last row and the
   Workout starten pill, fits the visible screen, and on the last athlete step
   it also clears the signup bar (extra.js). The scene scale for 800 px is above; 800 px on phones, 720 px up to 1100 wide. */
@media (max-width: 860px) and (max-height: 800px), (max-width: 1100px) and (max-height: 720px) {
  .ava-in { gap: 10px; padding-top: 6px; }
  .ava-sec .h-sec { font-size: 28px; margin-top: 8px !important; }
  .ava-sec .steps { margin-top: 10px; }
  .ava-sec .steps li { padding: 10px 12px; }
  .ava-sec .steps small { font-size: 14px; line-height: 1.4; }
}
@media (max-width: 1100px) and (max-height: 700px) {
  .ava-sec .device { transform: scale(.78); }
}
@media (max-width: 1100px) and (max-height: 640px) {
  .ava-sec .steps small { display: none; }
  .ava-sec .h-sec { font-size: 26px; }
  .ava-sec .device { transform: scale(.74); }
}
/* the wordmark in the bar never gets squeezed */
@media (min-width: 861px) { .nav .logo { flex-shrink: 0; } }

/* short laptop windows (1280x600 to 1366x650): the heading, the active step and the progress
   bar fit the pinned stage; the lede steps back (the badge says what Ava is) */
@media (min-width: 1101px) and (max-height: 659px) {
  .ava-sec .lede { display: none; }
  .ava-sec .steps li { padding: 9px 16px; }
}
/* phones held sideways: the screen is too short for a bottom bar next to the fixed header, so
   the button moves into the header; Ava's stage puts the steps and the scene side by side */
@media (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .sbar { display: none !important; }
  .nav-right .btn { display: inline-flex; }
  .ava-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-content: start; padding-top: 22px; }
  .ava-sec .h-sec { font-size: 28px; margin-top: 10px !important; }
  .ava-sec .device { height: 400px; transform: scale(.74); transform-origin: top center; margin-bottom: -104px; }
  /* the collapse: the headline clears the header, the tiles sit below it, the payoff line stays on one line */
  .collapse .ctext { top: 80px; }
  .collapse .h-sec { font-size: 28px; }
  .collapse .tiles { margin-top: 18vh; transform: scale(.6); }
  .collapse .csub { font-size: 16px; }
}
@media (max-width: 1100px) and (max-height: 380px) and (orientation: landscape) { .ava-sec .device { transform: scale(.66); } }

/* the pinned stages are 100vh, the tallest screen a phone can have; the payoff line under
   the collapse keeps its distance from the bottom of the screen the toolbar leaves visible
   (on a desktop 100vh and 100svh are the same, so nothing moves there) */
.collapse .csub { bottom: calc(12vh + (100vh - 100svh)); }

/* phones and tablets: the coach window shows Aktivitäten only. The greeting and the month's
   money sat below the window's edge, where only a cut +65 € chip peeked through */
@media (max-width: 860px) {
  .dh-win-c .rd-hero { display: none; }
  .dh-win-c .rd-main { grid-template-columns: minmax(0, 1fr); }
}
/* short laptop windows: the doors are taller than the screen, so the strip under them with
   its Beispieldaten tag starts below it; until then the fixed badge says it */
@media (min-width: 861px) and (max-height: 659px) { body.dh-inhero .proto .proto-more { display: inline; } }

/* a tall desktop window, a tablet and a phone show two earlier rows, so the coach window never ends
   in an empty white band (below 861 px they run out under the window's bottom fade) */
.dh-rw.dh-old { display: none; }
@media (max-width: 860px), (min-width: 861px) and (min-height: 1000px) { .dh-rw.dh-old { display: grid; } }

/* a door's price breaks only between its parts, never before its last word (the athlete launch price line
   is two .dh-pr parts, so on a narrow phone it breaks between "Premium zum Launchpreis" and the amount) */
.dh-pr { white-space: nowrap; }
@media (max-width: 300px) { .dh-pr { white-space: normal; } }
/* the athlete events button ("Kostenlos starten und Events finden") is 2px wider than a 320px phone */
@media (max-width: 340px) { #events .btn { white-space: normal; height: auto; min-height: 48px; padding: 12px 18px; text-align: center; line-height: 1.25; } }

/* the caption's last avatar is glued to the last word, so it never stands alone on a line */
.dh-glue { white-space: nowrap; }
.dh-cap .dh-glue .dh-ca { margin-left: 8px; vertical-align: middle; }
@media (max-width: 860px) { .dh-cap .dh-glue .dh-ca { margin: -2px 2px 0 4px; } }

/* small phones: the window and its rows give their padding to the text, so no line is cut */
@media (max-width: 400px) {
  .dh-win-c .rd { width: calc(100% - 12px); }
  .dh-win-c .rd-main { padding: 8px; }
  .dh-rows { padding: 2px 4px 6px; }
  .dh-row { gap: 8px; padding: 7px 6px; }
  .dh-feed .rd-cardhead { padding: 8px 10px; }
}


/* @@ANCHOR fix-a11y */
/* fine print that has to be read (every Beispieldaten label, the comparison and course notes,
   the donation line, the map card's Beispiel) reaches 4.5:1; --faint stays for icons and lines */
.tag-demo, .sp-demo, .demo-light, .why-note, .cc-note, .evd-note, #karte .kd-when { color: var(--dim); }
.demo-dark { color: rgba(255, 255, 255, .7); }
/* visitors who ask their system for more contrast get darker secondary text and lines */
@media (prefers-contrast: more) {
  :root { --faint: #5B6478; --dim: #475569; --line: #CBD5E1; }
}

/* focus: a ring of 3:1 or more on every tab stop. On the dark sections and cards it turns light */
#ava :focus-visible, #tour :focus-visible, #start :focus-visible, .result :focus-visible, .planprev :focus-visible { outline-color: #A5B4FC; }
.dh-door:focus-visible { outline-color: var(--dh-ink); }
#karte .kd-seg a:focus-visible { outline-color: var(--violet-600); }
#karte .kd-ev-m:focus-visible .kd-ev { box-shadow: 0 0 0 3px var(--violet-600), 0 8px 18px rgba(15, 23, 42, .18); }
/* the map itself is a tab stop: a ring around the map while it has keyboard focus (never on a click) */
#karte .map-shell:has(.maplibregl-canvas:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; box-shadow: inset 0 0 0 3px var(--violet-600); }
/* rings that were faded or cut off: a dimmed film chapter, the play button inside the clipped
   screen, a suggestion inside its clipped list, the map credit while it is dimmed */
.chap:focus-visible { opacity: 1; }
#tvBig:focus-visible { outline-offset: -6px; border-radius: 28px; }
.sugg button:focus-visible { outline-offset: -3px; }
#karte .maplibregl-ctrl-attrib.maplibregl-compact:focus-within { opacity: 1; }

/* FAQ: the whole row opens the answer, the padding moves from the row onto the question */
.faq details { padding: 0 4px; }
.faq summary { padding: 20px 0; }
.faq details[open] summary { padding-bottom: 10px; }
.faq details p { margin-top: 0; padding-bottom: 20px; }
.faq summary i { transition: transform .3s var(--ease), background .2s, color .2s; }

/* hover feedback for everything clickable that had none */
@media (hover: hover) {
  .btn-light:hover { background: var(--violet-50); }
  .faq summary:hover i { background: var(--violet-50); color: var(--violet-600); }
  .cc-seg button[aria-pressed="false"]:hover { color: var(--text); }
  .tv-btn { transition: background .2s; }
  .tv-btn:hover { background: rgba(255, 255, 255, .24); }
}

/* the hero pause keeps its size and gets a 44 px hit area */
.dh-pause { position: relative; }
.dh-pause::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }

/* glass on Safari 17 and older, which only knows the prefixed property */
.legend, .tool, .tv-btn { -webkit-backdrop-filter: blur(12px); }
.proto, .tv-tag { -webkit-backdrop-filter: blur(10px); }

/* two column tablets (861 to 1100 px): wide tiles take one column, only the first stays wide */
@media (min-width: 861px) and (max-width: 1100px) {
  .bento .bt.w2 { grid-column: span 1; }
  .bento .bt.w2:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* tap targets of 40 px or more for the switches a thumb has to hit */
  #karte .pstep .tchip { height: 40px; }
  #karte .kd-legend .tool { height: 40px; }
  /* Warum Fitiva: all three comparisons in view, no hidden sideways row */
  .why-pick { flex-wrap: wrap; justify-content: center; margin: 28px 0 0; padding: 0; overflow: visible; }
  .why-pick button { padding: 0 12px; }
  /* sections read as one flow: the same phone padding the other sections already use */
  .bento-sec, .tool-sec, .pricing, .events, .bridge { padding-top: 90px; padding-bottom: 80px; }
  .faq { padding-bottom: 80px; }
  /* the signup bar never hides the element that has keyboard focus */
  html:has(.sbar.on) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #karte .map-shell:has(.maplibregl-canvas:focus-visible)::after { bottom: auto; height: var(--kd-mh); }
  /* the sideways pill rows leave room for the focus ring above and below (same place on screen) */
  .sp-menu { margin-top: 21px; margin-bottom: -1px; padding-top: 7px; padding-bottom: 7px; }
  #karte #focusChips { margin-top: 4px; margin-bottom: -4px; padding-top: 6px; padding-bottom: 6px; scroll-padding-inline: 18px 30px; }
}
/* narrow desktop windows with a mouse: the pill rows wrap, since a wheel cannot scroll them sideways */
@media (max-width: 860px) and (hover: hover) and (pointer: fine) {
  .sp-menu { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
  #karte #focusChips { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
}

/* the floating sport names float one round when their panel opens, then settle */
.sp-cloud span { animation-name: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-panel.on .sp-cloud span { animation-name: floaty; animation-iteration-count: 1; }
}

/* Windows High Contrast: the chosen option, the doors, the buttons and the highlighted plan stay visible */
@media (forced-colors: active) {
  .tchip[aria-pressed="true"], .why-pick button[aria-pressed="true"], .sp-pill.on, .tool[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .cc-seg .knob, #karte .kd-knob { forced-color-adjust: none; background: Highlight; }
  .cc-seg button[aria-pressed="true"], #karte .kd-seg a[aria-current="page"] { forced-color-adjust: none; color: HighlightText; }
  /* the bar: the page's own audience and the open word stand out, the open panel has an edge */
  body[data-aud="athlete"] .mm-item[data-mm="athlete"] > .mm-btn, body[data-aud="coach"] .mm-item[data-mm="coach"] > .mm-btn { forced-color-adjust: none; color: LinkText; }
  .mm-item.is-open > .mm-btn { text-decoration: underline; }
  .mm-panel, .mm { border-bottom: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .dh-card { border: 1px solid CanvasText; }
  .dh-card.dh-on { outline: 3px solid Highlight; outline-offset: -3px; }
  .badge { border: 1px solid CanvasText; }
}

/* print: everything shows, whatever was scrolled into view */
@media print {
  /* the page prints as designed: without its backgrounds the white copy on the dark sections and
     the gradient words would vanish, even when the browser leaves background graphics off */
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rv, .why-t td.fit > span, .why-t td.fit small { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .skip, .sbar, .proto { display: none !important; }
  /* the pinned scroll stages print once, as one screen, instead of as pages of empty track */
  .ava-sec, .collapse { height: auto; }
  .ava-sec .sticky, .collapse .sticky { position: relative; }
}


/* @@ANCHOR fix-copy */
/* Events, stacked (phones, tablets): the flyer keeps its dark card while the form types,
   as a faint template, so the slot between the two cards never reads as an empty gap */
@media (max-width: 1100px) {
  .flyer { opacity: 1; }
  .flyer > * { transition: opacity .5s; }
  .flyer:not(.on) > * { opacity: .14; }
}
/* Courses on small phones: the whole demo link stays readable next to "Kopiert" */
@media (max-width: 380px) {
  .cs-link { font-size: 12.5px; padding: 10px 11px; gap: 6px; }
  .cs-link em { font-size: 11px; padding: 3px 6px; }
  .cs-link span { white-space: normal; overflow-wrap: anywhere; }
}
/* Prices: one quiet VAT line under the plans, on both sides */
.vat-note { font-size: 13px; }
body[data-aud="coach"] .pin-free + .vat-note { margin-top: 12px; }


/* @@ANCHOR fix-mapload */
/* no map (no WebGL, library or map server blocked, far too slow): the poster's line says so
   in ink, and the switch for the demand glow goes, since that glow needs the map */
#karte .kd-nomap .map-fallback { color: var(--text); font-size: 14px; text-align: center; }
#karte .kd-nomap .map-fallback > span { max-width: 460px; text-wrap: balance; }
#karte .kd-nomap #demandBtn { display: none; }

/* @@ANCHOR fix-assets */

/* ---- additions 2026-09-27 (Leon's picks): trust strips, coverage, contact (the login link and the
   menu moved into the mega menu block under "nav" at the top, 2026-09-28) */
.trust-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 26px auto 0; padding: 0; max-width: 820px; font-size: 14.5px; color: var(--text); }
.trust-strip li { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip svg { width: 16px; height: 16px; color: var(--emerald); flex: none; }
.kd-cover { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 14.5px; color: var(--dim); text-wrap: balance; padding: 0 16px; }
/* ---------------------------------------------------------------- footer (site/src/partials/footer.html, on every page)
   The brand and five columns side by side on a desktop; below 1200 px the brand sits above
   them, below 861 px the columns go two by two, and on the narrowest phones one under the other. */
footer.foot { padding: 64px 0 44px; color: var(--dim); font-size: 14px; }
.foot-main { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 4fr); gap: 36px 40px; }
.foot-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot-brand p { margin: 0; }
.foot .logo { color: var(--text); }
.foot .logo b { display: inline; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.foot-h { font: 600 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--text); margin: 0 0 10px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot-col a { display: inline-flex; align-items: center; min-height: 34px; color: var(--dim); overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--text); }
.foot-contact a { color: var(--violet-600); font-weight: 600; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot-company { margin: 0; font-size: 13px; color: var(--dim); }
.foot-lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--text); }
.foot-lang:hover { color: var(--violet-600); }
@media (max-width: 1200px) { .foot-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  footer.foot { padding: 48px 0 36px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  /* thumb sized rows */
  .foot-col a { min-height: 44px; }
}
@media (max-width: 359px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
/* the line under the four apps scene breaks evenly on phones */
.collapse .csub { text-wrap: balance; }

/* coach page: "Und für dich selbst", the athlete app for the coach's own training */
.self-band { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; margin-top: 16px; padding: 36px 40px; border-radius: 28px; background: var(--mist); }
.self-band .kicker { margin: 0; }
.self-band h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin-top: 10px; letter-spacing: -.02em; text-wrap: balance; }
.self-band .sb-copy > p:last-child { color: var(--dim); font-size: 16px; line-height: 1.55; margin-top: 12px; max-width: 520px; text-wrap: pretty; }
.sb-card { justify-self: end; width: 100%; max-width: 340px; display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06); }
.sb-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sb-h .av { width: 32px; height: 32px; font-size: 11.5px; }
.sb-who b { display: block; font-size: 14px; line-height: 1.25; }
.sb-who small { display: block; font-size: 12px; color: var(--dim); }
.sb-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sb-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.sb-ic svg { width: 16px; height: 16px; }
.sb-t { flex: 1; min-width: 0; }
.sb-t b { display: block; font-size: 13.5px; line-height: 1.3; }
.sb-t small { display: block; font-size: 12px; color: var(--dim); }
.sb-bar { width: 72px; height: 6px; border-radius: 6px; background: #EDF0F6; overflow: hidden; flex: none; }
.sb-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #F97316, #FB923C); transition: width 1.2s var(--ease) .2s; }
.self-band.in .sb-bar i { width: 80%; }
.sb-row .chip { flex: none; }
.sb-card .sp-demo { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .sb-bar i { transition: none; width: 80%; } }
@media (max-width: 860px) {
  .self-band { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; margin-top: 20px; }
  .sb-card { justify-self: stretch; max-width: none; }
}


/* ---------------------------------------------------------------- 404 (site/src/404.html) */
.nf { padding: 150px 0 90px; }
.nf .kicker { text-align: center; }
.nf-h { text-align: center; margin: 12px auto 0; max-width: 820px; text-wrap: balance; }
.nf-lede { text-align: center; margin: 18px auto 0; max-width: 620px; }
.nf-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 44px auto 0; max-width: 960px; }
.nf-door { position: relative; display: block; min-height: 380px; border-radius: var(--r-2xl); overflow: hidden; color: #fff; isolation: isolate; box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.nf-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.nf-door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 16, 34, 0) 30%, rgba(11, 16, 34, .82) 100%); }
.nf-door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.nf-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 24px; }
.nf-kick { justify-self: start; font: 600 13px Inter, system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nf-copy b { font: 600 clamp(24px, 2.6vw, 30px)/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.nf-copy > span:not(.nf-kick):not(.nf-go) { color: rgba(255, 255, 255, .82); font-size: 15px; }
.nf-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.nf-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nf-door:hover .nf-go svg { transform: translateX(4px); }
.nf-more { text-align: center; margin-top: 28px; color: var(--dim); font-size: 15px; }
.nf-more a { color: var(--violet-600); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 860px) {
  .nf { padding: 110px 0 60px; }
  .nf-doors { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .nf-door { min-height: 300px; }
}

/* ---------------------------------------------------------------- English pages: a footer link to a page that exists only in German
   (build.py mark_german: hreflang="de", this small tag and "(in German)" for screen readers) */
.de-tag { display: inline-grid; place-items: center; margin-left: 7px; padding: 2px 5px 1px; border: 1px solid var(--line); border-radius: 5px; font: 600 9.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .06em; color: var(--faint); vertical-align: 1px; }
.foot-col a:hover .de-tag { color: var(--dim); border-color: #cfd4e2; }

/* Chat bubbles: since the athlete bridge's chat (10f1120) these two rules also shape the
   Ava section's bubbles, so they stay although the bridge became the two phones below. */
.msg { max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.42; animation: msgIn .5s var(--ease) both; }
.msg.me { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 6px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

/* ==========================================================================
   Du und dein Coach: two phones, one connection (Leon 2026-09-28, "das ist
   mir noch nicht wow genug"). A dark stage with a slow aurora; Lena's phone
   and coach Markus's phone, turned toward each other, float above it and a
   four beat story plays by itself (site.js "two phones"). Every state is a
   class on #bridgeStage, so every motion here is transform or opacity (the
   light's trail is an SVG stroke). A phone is drawn in em: --u is one em of
   phone, set by the window's width and height, so the pair and the captions
   always fit and nothing moves the page. --tb enlarges the phones' text on
   small screens, where the phones are small.
   ========================================================================== */
.twin { --gap: clamp(120px, 14.5vw, 216px); --u: min(16px, calc((100vh - 190px) / 47.8), calc((min(100vw, 1200px) - 150px - var(--gap)) / 40.8)); --vio: #5B5DF1; position: relative; isolation: isolate; overflow: hidden; margin-top: 56px; padding: 28px 32px 18px; border-radius: 36px; background: #0B1022; color: #fff; box-shadow: 0 50px 100px -40px rgba(11, 16, 34, .55); }
.twin::before { content: ""; position: absolute; inset: -30% -15%; z-index: -1; pointer-events: none; background: radial-gradient(32% 42% at 27% 58%, rgba(99, 102, 241, .42), transparent 70%), radial-gradient(30% 40% at 74% 50%, rgba(219, 39, 119, .26), transparent 70%), radial-gradient(44% 34% at 50% 104%, rgba(6, 182, 212, .2), transparent 70%); animation: twinAur 22s ease-in-out infinite alternate; }
.twin::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .05); }
@keyframes twinAur { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }

/* the captions: four beats, the one playing lit, a thin line fills while it plays */
.twin-caps { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1010px; margin: 0 auto; padding: 0; list-style: none; }
.twin-caps li { opacity: .38; transition: opacity .6s var(--ease); }
.twin-caps li.on { opacity: 1; }
.twin-bar { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.twin-bar em { display: block; height: 100%; background: linear-gradient(90deg, #818CF8, #C084FC 55%, #F472B6); transform: scaleX(0); transform-origin: 0 50%; }
.twin-n { display: block; margin-top: 14px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .1em; color: #A5B4FC; font-variant-numeric: tabular-nums; }
.twin-caps b { display: block; margin-top: 7px; font: 600 20px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.twin-demo { position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); font: 500 11px/1 Inter, sans-serif; letter-spacing: .03em; color: rgba(255, 255, 255, .5); white-space: nowrap; }

/* the scene: the beam, the light, the two phones */
.twin-scene { position: relative; display: flex; justify-content: center; gap: var(--gap); margin-top: 6px; padding: 4.4em 0 2.6em; font-size: var(--u); }
.twin-beam { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.twin-beam path { fill: none; stroke-linecap: round; }
.bm-halo { stroke: url(#twinBeamG); stroke-width: 12; opacity: .14; transition: opacity .7s; }
.twin-scene.hot .bm-halo { opacity: .34; transition-duration: .3s; }
.bm-base { stroke: url(#twinBeamG); stroke-width: 2; opacity: .9; }
.bm-t { opacity: 0; }
.bm-t1 { stroke: #fff; stroke-width: 3; }
.bm-t2 { stroke: #C4B5FD; stroke-width: 11; }
.twin-orb { position: absolute; left: 0; top: 0; z-index: 1; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 7%, rgba(238, 240, 255, .95) 10%, rgba(196, 181, 253, .75) 17%, rgba(139, 92, 246, .38) 30%, rgba(236, 72, 153, .14) 48%, transparent 68%); will-change: transform, opacity; }
.twin-chip { position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(18, 23, 46, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .03em; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.twin-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .9), 0 0 22px rgba(139, 92, 246, .75); opacity: 0; transition: opacity .35s; }
.twin-chip.hot::after { opacity: 1; }
.twin-chip i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.twin-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34D399; animation: twinPing 2s ease-out infinite; }
@keyframes twinPing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3); opacity: 0; } }

.twin-ph { position: relative; z-index: 2; flex: none; width: 20em; transition: transform 1s var(--ease); }
.twin-halo { position: absolute; left: -32%; right: -32%; top: 6%; bottom: 6%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(129, 140, 248, .5), rgba(192, 132, 252, .18) 58%, transparent); opacity: 0; transition: opacity 1.1s var(--ease); }
.twin-fl { animation: twinFl 7s ease-in-out infinite; }
.twin-b .twin-fl, .twin-b .twin-floor { animation-duration: 8.2s; animation-delay: -3.4s; }
@keyframes twinFl { 0%, 100% { transform: translate3d(0, -.45em, 0); } 50% { transform: translate3d(0, .45em, 0); } }
.twin-floor { position: absolute; left: 14%; right: 14%; bottom: -2.2em; height: 1.4em; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); animation: twinSh 7s ease-in-out infinite; }
@keyframes twinSh { 0%, 100% { transform: scale(.86); opacity: .65; } 50% { transform: scale(1); opacity: 1; } }

/* the phone: titanium frame, black bezel, the screen with its glass */
.twin-dev { position: relative; height: 41em; padding: .24em; border-radius: 3.6em; background: linear-gradient(140deg, #6b7189 0%, #262b40 16%, #0f1324 48%, #2a3046 82%, #767c95 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(0, 0, 0, .6), 0 2.6em 4.4em -1.4em rgba(0, 0, 0, .8); --ry: 12deg; --ry1: 14deg; --ry2: 10deg; transform: perspective(100em) rotateY(var(--ry)) rotateX(2deg); animation: twinTurn 12s ease-in-out infinite alternate; }
.twin-b .twin-dev { --ry: -12deg; --ry1: -10deg; --ry2: -14deg; }
@keyframes twinTurn { from { transform: perspective(100em) rotateY(var(--ry1)) rotateX(2deg); } to { transform: perspective(100em) rotateY(var(--ry2)) rotateX(2.6deg); } }
.twin-dev::before, .twin-dev::after { content: ""; position: absolute; width: .22em; border-radius: .2em; background: linear-gradient(90deg, #4a5068, #1b2033); }
.twin-dev::before { left: -.2em; top: 7.6em; height: 5.2em; box-shadow: 0 6.4em 0 #262b40; }
.twin-dev::after { right: -.2em; top: 10.6em; height: 7.6em; }
.twin-bz { height: 100%; padding: .5em; border-radius: 3.36em; background: #03050b; }
.twin-scr { --tb: 1; position: relative; height: 100%; overflow: hidden; border-radius: 2.86em; background: #F3F4F9; color: #0F172A; font: 400 1em/1.35 Inter, -apple-system, sans-serif; letter-spacing: -.005em; }
.twin-scr::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .1) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.twin-scr svg { display: block; flex: none; }
.twin-sb { position: absolute; z-index: 14; left: 0; right: 0; top: 0; height: 3.3em; display: flex; align-items: center; justify-content: space-between; padding: .2em 1.8em 0 2.4em; font: 600 calc(.95em * var(--tb)) / 1 Inter, sans-serif; letter-spacing: -.01em; color: #0B1022; }
.twin-sb span { display: flex; align-items: center; gap: .3em; }
.twin-sb svg { height: .74em; width: auto; fill: currentColor; }
.twin-sb svg:last-child { height: .86em; }
.twin-isl { position: absolute; z-index: 16; top: .8em; left: 50%; width: 6.4em; height: 1.85em; margin-left: -3.2em; border-radius: 1em; background: #000; }
.twin-home { position: absolute; z-index: 14; left: 50%; bottom: .5em; width: 6.6em; height: .3em; margin-left: -3.3em; border-radius: .2em; background: #0B1022; opacity: .85; }
.twin-dim { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #0B1022; opacity: 0; transition: opacity 1s var(--ease); }
.twin-hit { position: absolute; z-index: 29; left: -30%; right: -30%; top: -36%; height: 72%; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(196, 181, 253, .75), rgba(139, 92, 246, .3) 45%, rgba(236, 72, 153, .1) 70%, transparent); opacity: 0; }

/* focus: the phone whose beat it is lights up, the other one rests */
.twin.s-fa .twin-a .twin-halo, .twin.s-fb .twin-b .twin-halo { opacity: .8; }
.twin.s-fb:not(.s-fa) .twin-a .twin-dim, .twin.s-fa:not(.s-fb) .twin-b .twin-dim { opacity: .26; }
.twin.s-fb:not(.s-fa) .twin-a, .twin.s-fa:not(.s-fb) .twin-b { transform: scale(.97); }
.twin.s-hita .twin-a .twin-hit, .twin.s-hitb .twin-b .twin-hit { animation: twinHit 1.1s ease-out both; }
@keyframes twinHit { 0% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
.twin.s-hita .twin-a .twin-halo, .twin.s-hitb .twin-b .twin-halo { animation: twinFlare 1.3s ease-out both; }
@keyframes twinFlare { 0% { opacity: .3; transform: scale(.94); } 25% { opacity: 1; transform: scale(1.06); } 100% { opacity: .8; transform: none; } }

/* a push comes out of the Dynamic Island: a black card grows from the island and goes back into it */
.twin-push { position: absolute; z-index: 17; top: .8em; left: .7em; right: .7em; display: flex; align-items: center; gap: .7em; padding: .85em .95em; border-radius: 1.75em; background: #000; color: #fff; transform-origin: 50% .93em; transform: scale(.37, .4); opacity: 0; transition: transform .55s cubic-bezier(.5, 0, .2, 1), opacity .15s .45s; }
.twin-push > * { opacity: 0; transition: opacity .12s; }
.twin-push img { width: 2.5em; height: 2.5em; border-radius: .62em; }
.dp-t { flex: 1; min-width: 0; display: grid; gap: .12em; line-height: 1.25; }
.dp-t b { font-size: calc(.84em * var(--tb)); font-weight: 600; }
.dp-t span { font-size: calc(.78em * var(--tb)); color: rgba(255, 255, 255, .72); }
.twin-push small { align-self: flex-start; font-size: calc(.68em * var(--tb)); color: rgba(255, 255, 255, .5); }
.twin.s-push .twin-a .twin-push, .twin.s-bpush .twin-b .twin-push { transform: none; opacity: 1; transition: transform .8s cubic-bezier(.22, 1.3, .36, 1), opacity .1s; }
.twin.s-push .twin-a .twin-push > *, .twin.s-bpush .twin-b .twin-push > * { opacity: 1; transition: opacity .3s .25s; }

/* the screens: one or two views each, content starts under the status bar */
.twin-ui { position: absolute; inset: 0; padding: 3.7em 1.15em 1.2em; transition: opacity .45s; }
/* a new round: both screens go dark for a moment, like phones going to sleep, and wake up reset */
.twin.s-rs .twin-ui { opacity: 0; }
.twin.s-rs .twin-dim { opacity: .92 !important; transition-duration: .4s; }
.twin.s-rs .twin-ui *, .twin.s-rs .twin-ui *::before, .twin.s-rs .twin-ui *::after { transition: none !important; animation: none !important; }
.dm-v { position: absolute; inset: 0; padding: 3.7em 1.15em 1.2em; background: #F3F4F9; transition: transform .75s cubic-bezier(.32, .72, 0, 1), opacity .6s; }
.dm-v2 { transform: translateX(100%); box-shadow: -1em 0 2.4em rgba(11, 16, 34, .1); }
.twin.s-v2 .twin-b .dm-v1, .twin.s-week .twin-a .dm-v1 { transform: translateX(-28%); opacity: 0; }
.twin.s-v2 .twin-b .dm-v2, .twin.s-week .twin-a .dm-v2 { transform: none; }
.twin .dl-n { flex: 1; min-width: 0; display: grid; }
.twin .dl-n b { font-size: calc(.88em * var(--tb)); font-weight: 600; line-height: 1.25; }
.twin .dl-n small { margin-top: .12em; font-size: calc(.74em * var(--tb)); line-height: 1.25; color: #5B6478; }
.dxf { display: grid; }
.dxf > span { grid-area: 1 / 1; transition: opacity .45s, transform .5s var(--ease); }
.dxf > span + span { opacity: 0; transform: translateY(.6em); }
.twin-av { flex: none; display: grid; place-items: center; width: calc(2.5em / .74 / var(--tb)); height: calc(2.5em / .74 / var(--tb)); border-radius: 50%; color: #fff; font: 600 calc(.74em * var(--tb)) / 1 Inter, sans-serif; }
.dtap { position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: rgba(255, 255, 255, .7); pointer-events: none; opacity: 0; transform: scale(.3); }
@keyframes twinTap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* Lena, athletes: today's workout set by set */
.dl-k { font: 600 calc(.7em * var(--tb)) / 1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--vio); }
.dl-t { margin-top: .3em; font: 600 calc(1.55em * var(--tb)) / 1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.dl-m { margin-top: .35em; font-size: calc(.76em * var(--tb)); color: #5B6478; }
.dl-pg { display: block; height: .32em; margin-top: .95em; border-radius: .3em; background: #E3E6F0; overflow: hidden; }
.dl-pg i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10B981, #34D399); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.twin.s-set1 .dl-pg i { transform: scaleX(.25); }
.twin.s-set2 .dl-pg i { transform: scaleX(.5); }
.twin.s-set3 .dl-pg i { transform: scaleX(.75); }
.twin.s-set4 .dl-pg i { transform: none; }
.dl-rows { display: grid; gap: .42em; margin-top: 1em; }
.dl-r { position: relative; display: flex; align-items: center; gap: .7em; padding: .66em .8em; border-radius: 1.05em; background: #fff; box-shadow: 0 .06em .25em rgba(15, 23, 42, .06); }
.dl-r::before, .dl-r::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.dl-r::before { background: #E9F8F1; transition: opacity .4s; }
.dl-r::after { box-shadow: 0 0 0 .14em rgba(91, 93, 241, .6), 0 0 1.6em rgba(91, 93, 241, .45); transition: opacity .6s; }
.dl-r > * { position: relative; }
.dck { position: relative; flex: none; display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; box-shadow: inset 0 0 0 .13em #CBD2E1; color: #fff; }
.dck::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10B981; transform: scale(0); transition: transform .38s cubic-bezier(.3, 1.6, .5, 1); }
.dck svg { position: relative; width: .92em; height: .92em; opacity: 0; transform: scale(.4); transition: opacity .2s .08s, transform .4s cubic-bezier(.3, 1.7, .5, 1) .06s; }
.twin.s-set1 .dr1::before, .twin.s-set2 .dr2::before, .twin.s-set3 .dr3::before, .twin.s-set4 .dr4::before { opacity: 1; }
.twin.s-set1 .dr1 .dck::before, .twin.s-set2 .dr2 .dck::before, .twin.s-set3 .dr3 .dck::before, .twin.s-set4 .dr4 .dck::before { transform: none; }
.twin.s-set1 .dr1 .dck svg, .twin.s-set2 .dr2 .dck svg, .twin.s-set3 .dr3 .dck svg, .twin.s-set4 .dr4 .dck svg { opacity: 1; transform: none; }
.dl-w { font-size: calc(.84em * var(--tb)); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* set by set: three small bars per exercise fill, then its check */
.dpl { display: inline-flex; gap: .2em; margin-right: .5em; vertical-align: .14em; }
.dpl i { position: relative; width: 1.05em; height: .36em; overflow: hidden; border-radius: .2em; background: #DCE0EA; }
.dpl i::after { content: ""; position: absolute; inset: 0; background: #10B981; transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease-out; }
.twin.s-p1 .dr1 .dpl i:nth-child(1)::after, .twin.s-p2 .dr1 .dpl i:nth-child(2)::after, .twin.s-p3 .dr1 .dpl i:nth-child(3)::after, .twin.s-p4 .dr2 .dpl i:nth-child(1)::after, .twin.s-p5 .dr2 .dpl i:nth-child(2)::after, .twin.s-p6 .dr2 .dpl i:nth-child(3)::after, .twin.s-p7 .dr3 .dpl i:nth-child(1)::after, .twin.s-p8 .dr3 .dpl i:nth-child(2)::after, .twin.s-p9 .dr3 .dpl i:nth-child(3)::after, .twin.s-p10 .dr4 .dpl i:nth-child(1)::after, .twin.s-p11 .dr4 .dpl i:nth-child(2)::after, .twin.s-p12 .dr4 .dpl i:nth-child(3)::after { transform: none; }
.twin.s-next .dr1 .dxf > span:first-child { opacity: 0; transform: translateY(-.6em); }
.twin.s-next .dr1 .dxf > span + span { opacity: 1; transform: none; color: var(--vio); font-weight: 600; }
.twin.s-next .dr1 .dl-w { color: var(--vio); }
.twin.s-glow .dr1::after { opacity: 1; }

/* the odometer: 50 kg rolls to 52,5 kg; the decimal is a CSS comma (a point in English) */
.odo { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.odo > span, .od-n > span { display: inline-block; height: 1.2em; vertical-align: top; }
.od-n { display: inline-flex; transform: translateX(var(--dw, .9em)); transition: transform .8s var(--ease) .1s; }
.od-c, .od-dec { overflow: hidden; }
.od-reel { display: block; transition: transform 1.05s cubic-bezier(.25, .9, .3, 1.15); }
.od-reel > span, .od-dec > span { display: block; height: 1.2em; }
.od-dec > span { transform: translateY(1.1em); opacity: 0; transition: transform .7s cubic-bezier(.25, .9, .3, 1.15) .35s, opacity .3s .35s; }
.od-sep::before { content: ","; font-style: normal; }
html[lang="en"] .od-sep::before { content: "."; }
.od-u { margin-left: .22em; transition: transform .8s var(--ease) .1s; }
.odo.ctr .od-n { transform: translateX(calc(var(--dw, .9em) / 2)); }
.odo.ctr .od-u { transform: translateX(calc(var(--dw, .9em) / -2)); }
.twin.s-next .twin-a .od-n, .twin.s-roll .twin-b .od-n, .twin.s-roll .twin-b .od-u { transform: none; }
.twin.s-next .twin-a .od-reel, .twin.s-roll .twin-b .od-reel { transform: translateY(-2.4em); }
.twin.s-next .twin-a .od-dec > span, .twin.s-roll .twin-b .od-dec > span { transform: none; opacity: 1; }

/* the record: a trophy, a small burst of sparks */
.dl-pr { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; }
.dl-pr::before { content: ""; position: absolute; inset: 0; background: rgba(11, 16, 34, .42); opacity: 0; transition: opacity .45s; }
.dl-prc { position: relative; display: grid; justify-items: center; width: 13em; padding: 1.7em 1em 1.4em; border-radius: 1.6em; background: #fff; text-align: center; box-shadow: 0 1.6em 3.2em -1em rgba(11, 16, 34, .55); opacity: 0; transform: translateY(1em) scale(.8); transition: transform .45s cubic-bezier(.55, 0, .75, .2), opacity .3s .1s; }
.dl-prc b { margin-top: .75em; font: 700 calc(1.2em * var(--tb)) / 1.15 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.dl-prc small { margin-top: .3em; font-size: calc(.8em * var(--tb)); color: #5B6478; }
.dtro { position: relative; display: grid; place-items: center; width: 3.7em; height: 3.7em; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #FCD34D, #F59E0B 60%, #D97706); box-shadow: 0 .7em 1.5em -.3em rgba(245, 158, 11, .65), inset 0 .12em 0 rgba(255, 255, 255, .45); }
.dtro.dok { background: linear-gradient(145deg, #34D399, #10B981 60%, #059669); box-shadow: 0 .7em 1.5em -.3em rgba(16, 185, 129, .6), inset 0 .12em 0 rgba(255, 255, 255, .45); }
.dtro svg { width: 1.75em; height: 1.75em; }
.dtro::before { content: ""; position: absolute; inset: -.2em; border-radius: 50%; box-shadow: 0 0 0 .16em rgba(245, 158, 11, .55); opacity: 0; }
.dtro.dok::before { box-shadow: 0 0 0 .16em rgba(16, 185, 129, .5); }
.dtro i { position: absolute; left: 50%; top: 50%; width: .28em; height: 1.1em; margin: -.55em 0 0 -.14em; border-radius: .2em; background: #F59E0B; opacity: 0; }
.dtro i:nth-of-type(3n+2) { background: #A78BFA; }
.dtro i:nth-of-type(3n) { background: #F472B6; }
.dtro.dok i:nth-of-type(odd) { background: #10B981; }
@keyframes twinSpark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-2em) scaleY(.2); } 15% { opacity: 1; } 55% { opacity: .95; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.4em) scaleY(1); } }
@keyframes twinRing { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.1); } }
.twin.s-pr .twin-a .dl-pr::before, .twin.s-ok .twin-a .dl-pr::before { opacity: 1; }
/* then the card flies out of the top of the screen, where the light leaves the phone */
.twin.s-prout .twin-a .dl-pr::before { opacity: 0; transition: opacity .5s .1s; }
.twin.s-pr .twin-a .dl-prc, .twin.s-ok .twin-a .dl-prc { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2, 1.45, .4, 1), opacity .25s; }
.twin.s-prout .twin-a .dl-prc { opacity: 0; transform: translate(5em, -25em) scale(.12); transition: transform .44s cubic-bezier(.6, 0, .9, .45), opacity .1s .36s; }
.dl-prc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 3em 1em rgba(167, 139, 250, .9); opacity: 0; transition: opacity .25s; }
.twin.s-prout .twin-a .dl-prc::after { opacity: 1; }
.twin.s-pr .twin-a .dtro i, .twin.s-ok .twin-a .dtro i { animation: twinSpark 1.25s cubic-bezier(.2, .8, .3, 1) .24s both; }
.twin.s-pr .twin-a .dtro::before, .twin.s-ok .twin-a .dtro::before { animation: twinRing .9s cubic-bezier(.2, .8, .3, 1) .22s both; }
/* every second spark is a dot that flies further */
.dtro i:nth-of-type(even) { width: .44em; height: .44em; margin: -.22em 0 0 -.22em; border-radius: 50%; }
.twin.s-pr .twin-a .dtro i:nth-of-type(even), .twin.s-ok .twin-a .dtro i:nth-of-type(even) { animation-name: twinDotFly; animation-duration: 1.4s; }
@keyframes twinDotFly { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-2em) scale(.4); } 15% { opacity: 1; } 60% { opacity: .95; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-5.4em) scale(1); } }

/* chat bubbles */
.dbub { max-width: 84%; padding: .56em .82em; border-radius: 1.1em; font-size: calc(.8em * var(--tb)); line-height: 1.3; opacity: 0; transform: translateY(.7em) scale(.92); transition: opacity .3s, transform .55s cubic-bezier(.2, 1.35, .4, 1); }
.dbub.in { justify-self: start; transform-origin: 0 100%; background: #fff; border-bottom-left-radius: .35em; box-shadow: 0 .08em .3em rgba(15, 23, 42, .08); }
.dbub.me { justify-self: end; transform-origin: 100% 100%; background: var(--vio); color: #fff; border-bottom-right-radius: .35em; }
.dbub small { display: block; margin-bottom: .1em; font-size: .78em; font-weight: 600; color: var(--vio); }
.dl-chat, .dm-thread { position: absolute; left: 1.15em; right: 1.15em; bottom: 5.5em; display: grid; gap: .45em; }
.twin.s-inmsg .dl-chat .in, .twin.s-reply .dl-chat .me, .twin.s-sent .dm-thread .me, .twin.s-reply2 .dm-thread .in { opacity: 1; transform: none; }

/* one button, two states */
.dl-btn { position: absolute; left: 1.15em; right: 1.15em; bottom: 1.45em; height: 3.25em; font: 600 calc(.9em * var(--tb)) / 1 Inter, sans-serif; }
.dl-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45em; overflow: hidden; border-radius: calc(1.1em / var(--tb)); color: #fff; }
.dl-btn .b0 { background: #0B1022; transition: transform .15s; }
.dl-btn .b1 { background: #10B981; opacity: 0; transform: scale(.94); transition: opacity .3s, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.dl-btn svg { width: 1.1em; height: 1.1em; }
.twin.s-done .twin-a .dl-btn .b1, .twin.s-paid .twin-a .dl-btn .b1, .twin.s-assigned .twin-b .dl-btn .b1 { opacity: 1; transform: none; }
.twin.s-tp-pay .db-pay .b0, .twin.s-tp-assign .dc-btn .b0 { transform: scale(.96); }
.twin.s-tp-pay .db-pay .dtap, .twin.s-tp-assign .dc-btn .dtap, .twin.s-tp-slot .pick .dtap, .twin.s-tp-card .dm-live .dtap, .twin.s-tp-plus .dsb-p .dtap, .twin.s-tp-send .dm-send .dtap { animation: twinTap .6s ease-out both; }

/* Markus: his activity feed, and a workout arrives live */
.dm-k { font-size: calc(.76em * var(--tb)); color: #5B6478; }
.dm-t { margin-top: .2em; font: 600 calc(1.55em * var(--tb)) / 1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.dm-chips { display: flex; gap: .4em; margin-top: .95em; }
.dm-chips span { padding: .42em .8em; border-radius: 1em; background: #fff; font-size: calc(.7em * var(--tb)); font-weight: 600; color: #5B6478; box-shadow: inset 0 0 0 1px #E3E6EF; }
.dm-chips .on { background: #0B1022; color: #fff; box-shadow: none; }
.dm-feed { position: relative; margin-top: .95em; }
.dm-live { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: .7em .65em; align-items: center; overflow: hidden; padding: .85em .85em .9em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 .13em rgba(91, 93, 241, .55), 0 .9em 2em -.7em rgba(91, 93, 241, .55); opacity: 0; transform: translateY(-1.4em) scale(.94); transition: opacity .35s, transform .7s cubic-bezier(.2, 1.3, .4, 1); }
.dm-lt { display: grid; min-width: 0; }
.dm-lt b { font-size: calc(.86em * var(--tb)); font-weight: 600; line-height: 1.25; }
.dm-lt small { display: flex; align-items: center; gap: .4em; margin-top: .15em; font-size: calc(.7em * var(--tb)); font-weight: 600; color: #059669; }
.dm-lt small i { width: .5em; height: .5em; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 .2em rgba(16, 185, 129, .2); }
.dm-rec { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .4em; padding: .42em .7em; border-radius: .8em; background: #FEF3C7; color: #92400E; font-size: calc(.72em * var(--tb)); font-weight: 600; }
.dm-rec.dm-paid { background: #D1FAE5; color: #065F46; }
.dm-rec svg { width: 1.15em; height: 1.15em; }
.dm-old { display: grid; gap: .45em; transition: transform .75s cubic-bezier(.2, 1, .3, 1); }
.dm-it { display: flex; align-items: center; gap: .6em; padding: .66em .75em; border-radius: 1.05em; background: #fff; box-shadow: 0 .06em .25em rgba(15, 23, 42, .05); }
.dm-it > span:nth-child(2) { flex: 1; min-width: 0; font-size: calc(.76em * var(--tb)); line-height: 1.3; }
.dm-it em { align-self: flex-start; font-style: normal; font-size: calc(.64em * var(--tb)); color: #94A3B8; white-space: nowrap; }
.twin.s-live .dm-live { opacity: 1; transform: none; }
.twin.s-live .dm-old { transform: translateY(var(--lh, 8.2em)); }
.twin.s-tp-card .dm-live { transform: scale(.97); transition: transform .15s; }

/* Markus, athletes: the plan for next week, a stepper, a message */
.dm-back { display: flex; align-items: center; gap: .1em; margin-left: -.25em; font-size: calc(.84em * var(--tb)); font-weight: 500; color: var(--vio); }
.dm-back svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-who { display: flex; align-items: center; gap: .65em; margin-top: .85em; }
.dm-who b { display: block; font: 600 calc(1.1em * var(--tb)) / 1.2 Outfit, Inter, sans-serif; }
.dm-who small { display: block; font-size: calc(.72em * var(--tb)); color: #5B6478; }
.dm-card { margin-top: 1em; padding: 1em 1em .9em; border-radius: 1.3em; background: #fff; box-shadow: 0 .08em .3em rgba(15, 23, 42, .06); }
.dm-card > small { display: block; font-size: calc(.66em * var(--tb)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #94A3B8; }
.dm-card > b { display: block; margin-top: .35em; font: 600 calc(1.08em * var(--tb)) / 1.2 Outfit, Inter, sans-serif; }
.dm-sets { display: block; font-size: calc(.74em * var(--tb)); color: #5B6478; }
.dm-step { display: flex; align-items: center; justify-content: space-between; margin-top: .8em; padding: .35em; border-radius: 1.15em; background: #F1F2F8; }
.dsb { position: relative; display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: .9em; background: #fff; box-shadow: 0 .06em .2em rgba(15, 23, 42, .1); overflow: hidden; transition: transform .15s; }
.dsb svg { width: 1.1em; height: 1.1em; fill: none; stroke: #0B1022; stroke-width: 2.4; stroke-linecap: round; }
.dsb-p { background: var(--vio); box-shadow: 0 .4em .9em -.3em rgba(91, 93, 241, .7); }
.dsb-p svg { stroke: #fff; }
.twin.s-tp-plus .dsb-p { transform: scale(.9); }
.dm-step .odo { font: 700 calc(1.65em * var(--tb)) / 1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.twin.s-roll .dm-step .odo { color: var(--vio); }
.dm-hint { display: flex; align-items: center; gap: .35em; margin-top: .7em; font-size: calc(.7em * var(--tb)); font-weight: 500; color: #B45309; }
.dm-hint svg { width: 1.2em; height: 1.2em; }
.dm-comp { position: absolute; left: 1.15em; right: 1.15em; bottom: 1.45em; display: flex; align-items: center; gap: .45em; }
.dm-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 3em; padding: 0 1em; border-radius: 1.5em; background: #fff; box-shadow: inset 0 0 0 1px #E3E6EF; overflow: hidden; }
.dm-ph, .dm-txt { font-size: calc(.8em * var(--tb)); white-space: nowrap; }
.dm-ph { position: absolute; left: 1.25em; color: #94A3B8; transition: opacity .2s; }
.dm-txt { position: relative; opacity: 1; }
.dm-cov { position: absolute; top: -.2em; bottom: -.2em; left: 0; width: calc(100% + .4em); background: #fff; transform: translateX(0); }
.dm-cov i { position: absolute; left: 0; top: .3em; bottom: .3em; width: .1em; border-radius: .1em; background: var(--vio); opacity: 0; }
.dm-send { position: relative; flex: none; display: grid; place-items: center; height: 3em; padding: 0 1.1em; border-radius: 1.5em; background: var(--vio); color: #fff; font-size: calc(.8em * var(--tb)); font-weight: 600; overflow: hidden; transition: transform .15s; }
.twin.s-type .dm-ph { opacity: 0; }
.twin.s-type .dm-cov { transform: translateX(100%); transition: transform 1s steps(15, end); }
.twin.s-type .dm-cov i { opacity: 1; animation: twinBlink .8s steps(1) infinite; }
.twin.s-tp-send .dm-send { transform: scale(.93); }
.twin.s-sent .dm-txt { opacity: 0; transition: opacity .2s; }
.twin.s-sent .dm-ph { opacity: 1; transition: opacity .3s .3s; }
.twin.s-sent .dm-cov i { opacity: 0; animation: none; }
@keyframes twinBlink { 50% { opacity: 0; } }

/* Lena, coaches: a session with Markus, booked and paid */
.db-l { margin-top: 1em; font-size: calc(.66em * var(--tb)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #94A3B8; }
.db-days, .db-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35em; margin-top: .45em; }
.db-slots { grid-template-columns: repeat(3, 1fr); }
.db-days span, .db-slots span { position: relative; display: grid; place-items: center; height: 2.5em; overflow: hidden; border-radius: .85em; background: #fff; font-size: calc(.78em * var(--tb)); font-weight: 600; color: #334155; box-shadow: 0 .06em .2em rgba(15, 23, 42, .06); }
.db-days .on { background: #0B1022; color: #fff; }
.db-slots .pick b { position: relative; z-index: 1; font-weight: 600; }
.db-slots .pick::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--vio); opacity: 0; transition: opacity .25s; }
.twin.s-slot .db-slots .pick { color: #fff; }
.twin.s-slot .db-slots .pick::before { opacity: 1; }
.db-sum { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1em; padding: .8em .9em; border-radius: 1em; background: #fff; font-size: calc(.8em * var(--tb)); color: #5B6478; }
.db-sum b { font: 700 calc(1.25em * var(--tb)) / 1 Outfit, Inter, sans-serif; color: #0F172A; }

/* the week: plan days and the booked session */
.dw-rows { display: grid; gap: .42em; margin-top: 1em; }
.dw-r { position: relative; display: flex; align-items: center; gap: .75em; padding: .62em .8em; border-radius: 1.05em; background: #fff; box-shadow: 0 .06em .25em rgba(15, 23, 42, .06); }
.dw-d { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .75em; background: #EEF0FF; color: var(--vio); font-size: calc(.74em * var(--tb)); font-weight: 700; }
.dw-s { box-shadow: 0 0 0 .13em rgba(16, 185, 129, .5); }
.dw-s .dw-d { background: #D1FAE5; color: #047857; }
.twin-a .dw-r { opacity: 0; transform: translateY(.9em); transition: opacity .4s, transform .6s var(--ease); }
.twin.s-week .twin-a .dw-r { opacity: 1; transform: none; }
.twin.s-week .twin-a .dw1 { transition-delay: .35s; }
.twin.s-week .twin-a .dw2 { transition-delay: .5s; }
.twin.s-week .twin-a .dw3 { transition-delay: .65s; }
.twin.s-week .twin-a .dw4 { transition-delay: .8s; }

/* Markus, coaches: Ava drafts the week, he assigns it */
.dc-ava { display: flex; align-items: center; gap: .65em; margin-top: 1em; padding: .75em .85em; border-radius: 1.1em; background: #fff; box-shadow: 0 0 0 .1em rgba(124, 58, 237, .18); }
.twin-ava { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .72em; background: linear-gradient(135deg, #6366F1, #7C3AED 50%, #DB2777); color: #fff; --ava-dot: #22D3EE; }
.twin-ava svg { width: 1.35em; height: 1.35em; }
.ddots { display: inline-flex; gap: .2em; margin-left: .2em; vertical-align: middle; }
.ddots i { width: .32em; height: .32em; border-radius: 50%; background: #7C3AED; opacity: .3; animation: twinDot 1s ease-in-out infinite; }
.ddots i:nth-child(2) { animation-delay: .15s; }
.ddots i:nth-child(3) { animation-delay: .3s; }
@keyframes twinDot { 40% { opacity: 1; transform: translateY(-.15em); } }
.twin.s-drafted .dc-ava .dxf > span:first-child { opacity: 0; transform: translateY(-.6em); }
.twin.s-drafted .dc-ava .dxf > span + span { opacity: 1; transform: none; color: #7C3AED; font-weight: 600; }
.dc-rows .dw-r { overflow: hidden; }
.dc-rows .dw-r > * { opacity: 0; transform: translateY(.5em); transition: opacity .4s, transform .55s var(--ease); }
.dc-rows .dw-r::before { content: ""; position: absolute; inset: .9em 1em; border-radius: .5em; background: linear-gradient(90deg, #EEF0F6 0%, #F7F8FB 50%, #EEF0F6 100%); opacity: 0; transition: opacity .3s; }
.twin.s-ava .dc-rows .dw-r::before { opacity: 1; }
.dc-rows .dw-r::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .3s; }
.twin.s-ava .dc-rows .dw-r::after { opacity: 1; animation: twinShim 1.2s linear infinite; }
.twin.s-k1 .dc-rows .dw1::after, .twin.s-k2 .dc-rows .dw2::after, .twin.s-k3 .dc-rows .dw4::after { opacity: 0; }
@keyframes twinShim { to { transform: translateX(330%); } }
.twin.s-k1 .dc-rows .dw1::before, .twin.s-k2 .dc-rows .dw2::before, .twin.s-k3 .dc-rows .dw4::before { opacity: 0; }
.twin.s-k1 .dc-rows .dw1 > *, .twin.s-k2 .dc-rows .dw2 > *, .twin.s-k3 .dc-rows .dw4 > * { opacity: 1; transform: none; }
.dc-btn .b0 { background: var(--vio); }

/* paused out of view and in a hidden tab */
.twin:not(.s-run)::before, .twin:not(.s-run) * { animation-play-state: paused !important; }

/* reduced motion: the composed last beat, all four captions */
.twin.s-still::before, .twin.s-still *, .twin.s-still *::before, .twin.s-still *::after { animation: none !important; transition: none !important; }
.twin.s-still .twin-caps li { opacity: 1; }
.twin.s-still .twin-bar em { transform: none; }

/* windows of tablet size: smaller captions */
@media (max-width: 1100px) {
  .twin-caps { gap: 18px; }
  .twin-caps b { font-size: 17px; }
}
/* phones: the stage runs edge to edge, the two phones sit side by side at the largest size that
   fits, their text is larger for its size; the captions become four lines above the one playing */
@media (max-width: 700px) {
  .twin { --gap: 10px; --u: min(calc((100vw - 20px - var(--gap)) / 41.2), 11px); margin: 40px calc(-1 * var(--gutter)) 0; padding: 24px 0 26px; border-radius: 0; }
  .twin-scr { --tb: 1.34; }
  .twin-dev { --ry: 8deg; --ry1: 9.5deg; --ry2: 6.5deg; }
  .twin-b .twin-dev { --ry: -8deg; --ry1: -6.5deg; --ry2: -9.5deg; }
  .twin-caps { position: relative; gap: 6px; margin: 0 16px; padding-bottom: 34px; }
  .twin-caps li { opacity: 1; }
  .twin-caps .twin-n { display: none; }
  /* the old line leaves first, the new one follows: the two never sit on top of each other */
  .twin-caps b { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-size: 19px; text-align: center; opacity: 0; transform: translateY(-5px); transition: opacity .22s, transform .3s; }
  .twin-caps li.on b { opacity: 1; transform: none; transition: opacity .4s .24s, transform .6s var(--ease) .24s; }
  .twin-scene { margin-top: 0; padding: 4.8em 0 2.6em; }
  .twin-demo { bottom: 10px; }
  .dl-m, .dm-chips, .dm-sets, .dm-hint { display: none; }
  .dl-rows, .dw-rows { gap: .36em; margin-top: .75em; }
  .dl-r { padding: .56em .7em; gap: .55em; }
  .dl-pg { margin-top: .75em; }
  .dm-feed { margin-top: .8em; }
  .dm-card { margin-top: .75em; padding: .85em .85em .8em; }
  .dm-who { margin-top: .65em; }
  .db-l { margin-top: .75em; }
  .dl-chat, .dm-thread { bottom: 5.9em; }
  .dl-chat .dbub small, .dm-it em, .twin-sb svg:first-child { display: none; }
  .twin-sb { padding: .2em 1.6em 0 2.1em; }
  .twin-chip { gap: 5px; padding: 4px 8px 4px 7px; font-size: 10px; }
  .twin-chip i { width: 5px; height: 5px; }
  .twin.s-still .twin-caps { padding-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .twin.s-still .twin-caps b { position: static; opacity: 1; transform: none; margin-top: 8px; font-size: 16px; text-align: left; }
}
/* footer base: the company line, then the health note on its own line (Leon 2026-09-28) */
.foot-company .foot-note { display: block; margin-top: 4px; }
/* footer: the social profiles as round icons under the contact line (Leon 2026-09-28) */
.foot-social { display: flex; gap: 10px; margin: 18px 0 0; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--text); transition: color .25s, border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.foot-social a:hover { color: var(--violet-600); border-color: rgba(99, 102, 241, .45); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(99, 102, 241, .6); }
.foot-social svg { width: 19px; height: 19px; }

/* >>> membership card ======================================================================
   "Ein Club, vier Stunden Licht" (Leon 2026-09-28). The card of every Fitiva membership: in the bar's
   Memberships panel on every page, on the landing tiles, on the membership pages (hero, tiles, the back
   face) and on their share images (site/build/og/og.html reads this block between its markers, keep them).
   Markup: site/build/memberships.py card_html, spans only (it may sit inside a link), aria-hidden.
     .mcw.mcw-SIZE        the box: a size container (the face scales with it, cqw), with its perspective
       .mc.m-AUD-PLAN     the card: its material, bottom to top mat, motif (and the plan's own layers:
                          Premium dusk, sun, water; Pro beam; Elite aurora), grain, then the face
                          (logo, audience, chip, name, seats, meta), sheen and rim on top
   Sizes: hero up to 560 px, tile up to 360, mini fills its cell (the panel, about 200), thumb 72, swatch 40.
   Under 240 px the wordmark and the audience go, under 120 px only material, motif and chip remain.
   Motion: only transform, opacity and the foil's background position. The rest angle is --rx0/--ry0/--rz0
   (set by the place), the tilt adds --tx/--ty (site.js, [data-tilt]); the sheen follows --mx/--my, the foil
   --fx. Keep .mc generic: a new material is one more m-* class (the Sternennacht of Elite may carry other
   cards later). Never a card number, an expiry date or a name: it must never look like a payment card. */
:root {
  /* athletes, warm: sunset */
  --a-peach: #FFC48E; --a-apricot: #FF9E74; --a-coral: #F2645C; --a-rose: #D63A67; --a-berry: #8E1F52; --a-plum: #3E0F33; --a-night: #1E0819;
  --a-ink: #3A1830; --a-mist: #FFF4EE; --a-blush: #FFE1D6; --a-accent: #B8325F; --a-accent-dark: #FFD9C6;
  --a-arrow: linear-gradient(135deg, #FB923C, #E11D48);
  /* coaches, cool: blue hour */
  --c-ice: #C7CCFF; --c-sky: #7FD6FF; --c-peri: #8C94FF; --c-violet: #5B5DF1; --c-indigo: #3434B8; --c-deep: #16175E; --c-night: #070A26;
  --c-ink: #141645; --c-mist: #F1F3FF; --c-accent: #4447D8; --c-accent-dark: #C7D2FE;
  --c-arrow: linear-gradient(135deg, #6366F1, #0EA5E9);
  /* the gradient words on membership surfaces (the site's violet to magenta .grad is not used there) */
  --a-grad-dark: linear-gradient(96deg, #FFC48E, #FF8DB0); --a-grad-light: linear-gradient(96deg, #E0613F, #B8325F);
  --c-grad-dark: linear-gradient(96deg, #B7BEFF, #7FD6FF); --c-grad-light: linear-gradient(96deg, #4447D8, #0E8FD0);
  /* one noise tile for every card's grain (no image file) */
  --mc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.mcw { display: block; container-type: inline-size; width: 100%; perspective: 1100px; -webkit-tap-highlight-color: transparent; }
.mcw-hero { width: min(560px, 100%); }
.mcw-tile { max-width: 360px; }
.mcw-thumb { width: 72px; flex: none; }
.mcw-swatch { width: 40px; flex: none; }
.mc { position: relative; display: block; aspect-ratio: 1.586; border-radius: 4.6cqw; overflow: hidden; isolation: isolate;
  color: var(--mc-ink, #fff); font-family: Inter, sans-serif; line-height: 1; text-align: left; letter-spacing: 0; white-space: nowrap;
  transform: rotateX(calc(var(--rx0, 0deg) + var(--tx, 0deg))) rotateY(calc(var(--ry0, 0deg) + var(--ty, 0deg))) rotateZ(var(--rz0, 0deg));
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 1.2cqw 3cqw rgba(30, 10, 40, .1), 0 6cqw 14cqw -3cqw var(--mc-shadow, rgba(30, 10, 40, .28)); }
.mc.is-tilt { transition: transform .14s linear, box-shadow .6s cubic-bezier(.22, 1, .36, 1); }
.mc > span, .mc > svg { position: absolute; }
.mc-mat, .mc-motif, .mc-grain, .mc-sheen, .mc-rim, .mc-dusk, .mc-sun, .mc-beam, .mc-aurora { inset: 0; pointer-events: none; }
.mc-grain { background: var(--mc-grain); background-size: 160px; mix-blend-mode: overlay; opacity: var(--grain-o, .22); }
.mc-sheen { background: radial-gradient(60cqw 42cqw at var(--mx, 30%) var(--my, 18%), rgba(255, 255, 255, var(--sheen, .28)), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; overflow: hidden; }
/* one pass of light across the card (the panel, on hover or focus) */
.mc-sheen::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-70%); opacity: 0; }
.mc-rim { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, var(--rim, .16)), inset 0 1px 0 rgba(255, 255, 255, var(--rim-top, .35)); }
/* the face */
.mc-logo { left: 6.5cqw; top: 6.2cqw; display: flex; align-items: center; gap: 1.6cqw; font: 600 4.6cqw/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.mc-mark { width: 5.2cqw; height: 5.2cqw; flex: none; opacity: .92; }
.mc-aud { right: 6.5cqw; top: 7.4cqw; font: 600 2.6cqw/1 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.mc-chip { left: 6.5cqw; top: 36%; width: 11.5cqw; height: 8.8cqw; border-radius: 2cqw; display: grid; place-items: center;
  background: var(--chip, linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 .4cqw 1.2cqw rgba(0, 0, 0, .14); }
.mc-chip svg { width: 6cqw; height: 6cqw; color: var(--chip-ink, rgba(255, 255, 255, .95)); }
.mc-chip .mc-dot { fill: #06B6D4; }
.mc-name { left: 6.5cqw; bottom: 6cqw; font: 600 10.5cqw/.9 Outfit, Inter, sans-serif; letter-spacing: -.035em; padding-bottom: .08em; }
.mc-foil { background: var(--foil); background-size: 220% 100%; background-position: var(--fx, 40%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-meta { right: 6.5cqw; bottom: 7cqw; font: 600 2.6cqw/1.2 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-align: right; opacity: .85; }
.mc-seats { right: 6.5cqw; bottom: 12.4cqw; display: grid; grid-template-columns: repeat(5, 1.8cqw); gap: 1.3cqw; direction: rtl; color: var(--seat, currentColor); }
.mc-seats i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: currentColor; opacity: .92; box-shadow: 0 0 1.4cqw var(--seat-glow, transparent); }
.mc-inf { right: 6.5cqw; bottom: 11.6cqw; width: 12cqw; height: 6cqw; color: #E8EEFF; filter: drop-shadow(0 0 1.2cqw rgba(143, 227, 255, .45)); }

/* Tageslicht, athletes Free: frosted glass, rose haze, sunrise light in the corner */
.m-athlete-free { --mc-ink: var(--a-ink); --mc-shadow: rgba(214, 58, 103, .22); --rim: .75; --rim-top: .9; --grain-o: .1; --sheen: .7;
  --chip: linear-gradient(135deg, #FFFFFF, #FFE3D4); --chip-ink: var(--a-rose); --foil: linear-gradient(100deg, #5A2340, #A83A5E 45%, #5A2340 60%); }
.m-athlete-free .mc-mat { background: radial-gradient(60cqw 46cqw at 8% -10%, rgba(255, 200, 214, .7), rgba(255, 200, 214, 0) 70%),
  radial-gradient(70cqw 50cqw at 88% 118%, rgba(255, 158, 116, .45), rgba(255, 158, 116, 0) 70%),
  linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 244, 238, .66)), #FFF3EE; }
.m-athlete-free .mc-motif { background: radial-gradient(30cqw 26cqw at 86% 104%, rgba(255, 176, 128, .95), rgba(255, 176, 128, 0) 70%),
  radial-gradient(26cqw 20cqw at 60% 112%, rgba(255, 141, 176, .55), rgba(255, 141, 176, 0) 70%); }
/* Tageslicht, coaches Free: the same glass, ice haze, sky and peri light, three seats */
.m-coach-free { --mc-ink: var(--c-ink); --mc-shadow: rgba(91, 93, 241, .22); --rim: .75; --rim-top: .9; --grain-o: .1; --sheen: .7;
  --chip: linear-gradient(135deg, #FFFFFF, #DDE3FF); --chip-ink: var(--c-violet); --foil: linear-gradient(100deg, #1E2166, #4B4FD6 45%, #1E2166 60%); --seat: #5B5DF1; }
.m-coach-free .mc-mat { background: radial-gradient(60cqw 46cqw at 6% -12%, rgba(183, 190, 255, .8), rgba(183, 190, 255, 0) 70%),
  radial-gradient(70cqw 50cqw at 90% 118%, rgba(127, 214, 255, .5), rgba(127, 214, 255, 0) 70%),
  linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(241, 243, 255, .66)), #F1F3FF; }
.m-coach-free .mc-motif { background: radial-gradient(30cqw 26cqw at 86% 104%, rgba(127, 214, 255, .9), rgba(127, 214, 255, 0) 70%),
  radial-gradient(26cqw 20cqw at 60% 112%, rgba(140, 148, 255, .6), rgba(140, 148, 255, 0) 70%); }
/* the frosted cards blur what is behind them only where they float over content */
.mcw.is-float .m-athlete-free .mc-mat, .mcw.is-float .m-coach-free .mc-mat { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

/* Abendrot, Premium: the sky over the sea, the sun on the horizon, its light on the water */
.m-athlete-premium { --mc-shadow: rgba(142, 31, 82, .45); --rim: .18; --rim-top: .42; --grain-o: .22; --sheen: .38;
  --chip: linear-gradient(135deg, #FFF3EA 0%, #FFCDB8 45%, #FFE6EE 100%); --chip-ink: var(--a-berry);
  --foil: linear-gradient(100deg, #FFF4EC 0%, #FFD3BF 30%, #FFFFFF 46%, #FFC7D6 62%, #FFF1E6 100%); }
.m-athlete-premium .mc-mat { background: linear-gradient(180deg, #2E0C33 0%, #5A1646 20%, #9A2A5C 38%, #D8466A 50%, #F7705F 57%, #FFA274 61.5%, #FFD09C 63%, #5B1838 63.2%, #3A0E2C 78%, #22081D 100%); }
.m-athlete-premium .mc-motif { background: radial-gradient(46cqw 13cqw at 70% 63%, rgba(255, 170, 120, .6), rgba(255, 170, 120, 0) 72%); }
.m-athlete-premium .mc-sun { background: radial-gradient(8.5cqw 8.5cqw at 70% 63%, #FFF6E6 0%, #FFE0B0 38%, rgba(255, 196, 142, 0) 72%); }
.m-athlete-premium .mc-dusk { background: linear-gradient(180deg, rgba(30, 8, 25, .75), rgba(62, 15, 51, .35) 50%, rgba(0, 0, 0, 0) 63%); opacity: 0; }
.m-athlete-premium .mc-water { left: 0; right: 0; top: 63.2%; bottom: 0; pointer-events: none; transform-origin: 50% 0;
  background: repeating-linear-gradient(180deg, rgba(255, 200, 150, .85) 0 .45cqw, rgba(255, 200, 150, 0) .45cqw 1.9cqw);
  -webkit-mask: radial-gradient(9cqw 26cqw at 70% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 75%); mask: radial-gradient(9cqw 26cqw at 70% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 75%); opacity: .8; }

/* Blaue Stunde, Pro: blue satin, two beams of window light, brushed lines, a cyan top edge, fifteen seats */
.m-coach-pro { --mc-shadow: rgba(52, 52, 184, .45); --rim: .2; --rim-top: .5; --grain-o: .16; --sheen: .4;
  --chip: linear-gradient(135deg, #F4F6FF 0%, #C9D0FF 45%, #E6F7FF 100%); --chip-ink: var(--c-indigo);
  --foil: linear-gradient(100deg, #EEF1FF 0%, #BFC7FF 30%, #FFFFFF 46%, #B5ECFF 62%, #EEF1FF 100%); --seat: #E8F7FF; --seat-glow: rgba(127, 214, 255, .55); }
.m-coach-pro .mc-mat { background: radial-gradient(90cqw 60cqw at 100% 0%, rgba(127, 214, 255, .55), rgba(127, 214, 255, 0) 60%),
  radial-gradient(80cqw 60cqw at 0% 100%, rgba(22, 23, 94, .8), rgba(22, 23, 94, 0) 70%), linear-gradient(145deg, #2B2DA6 0%, #4446DA 45%, #6C74FF 100%); }
.m-coach-pro .mc-motif { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(255, 255, 255, 0) 1px 3px); }
.m-coach-pro .mc-beam { background: linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(200, 236, 255, .22) 60%, rgba(255, 255, 255, 0) 70%),
  linear-gradient(118deg, rgba(255, 255, 255, 0) 72%, rgba(200, 236, 255, .14) 77%, rgba(255, 255, 255, 0) 83%); }
.m-coach-pro .mc-rim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(170, 230, 255, .8); }

/* Sternennacht, Elite: a violet night, twelve fixed stars, a bright aurora, the infinity engraved and, only on Elite,
   a brushed platinum edge (review 2026-09-29: Elite reads as its own material, not the old dark navy) */
.m-coach-elite { --mc-shadow: rgba(7, 10, 38, .6); --rim: .16; --rim-top: .38; --grain-o: .18; --sheen: .32;
  --chip: linear-gradient(135deg, #F3F5FF 0%, #AEB8E8 40%, #FFFFFF 55%, #9FB0E8 100%); --chip-ink: #141847;
  --foil: linear-gradient(100deg, #DDE3FF 0%, #9FAEF0 28%, #FFFFFF 46%, #8FE3FF 58%, #C3B5FF 72%, #DDE3FF 100%); }
.m-coach-elite .mc-mat { background: radial-gradient(90cqw 70cqw at 12% -6%, #3B2FA6 0%, rgba(59, 47, 166, 0) 70%),
  radial-gradient(80cqw 60cqw at 104% 112%, rgba(24, 104, 150, .55), rgba(24, 104, 150, 0) 70%), linear-gradient(165deg, #1C1566 0%, #100C46 52%, #08082A 100%); }
.m-coach-elite .mc-motif { opacity: .85; background:
  radial-gradient(1.2px 1.2px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 28% 12%, #fff 99%, transparent),
  radial-gradient(1.4px 1.4px at 44% 30%, #E4F4FF 99%, transparent), radial-gradient(1px 1px at 61% 16%, #fff 99%, transparent),
  radial-gradient(1.2px 1.2px at 79% 26%, #fff 99%, transparent), radial-gradient(1px 1px at 90% 10%, #D6DCFF 99%, transparent),
  radial-gradient(1px 1px at 36% 48%, #fff 99%, transparent), radial-gradient(1.3px 1.3px at 69% 44%, #fff 99%, transparent),
  radial-gradient(1px 1px at 54% 58%, #CFE9FF 99%, transparent), radial-gradient(1px 1px at 18% 62%, #fff 99%, transparent),
  radial-gradient(1px 1px at 86% 60%, #fff 99%, transparent), radial-gradient(1.1px 1.1px at 8% 40%, #fff 99%, transparent); }
.m-coach-elite .mc-aurora { mix-blend-mode: screen; filter: blur(2.2cqw); transform: translate3d(var(--ax, 0%), 0, 0) rotate(-9deg);
  background: radial-gradient(76cqw 14cqw at 58% 30%, rgba(127, 214, 255, .78), rgba(127, 214, 255, 0) 70%),
    radial-gradient(62cqw 12cqw at 36% 42%, rgba(170, 134, 255, .68), rgba(170, 134, 255, 0) 70%),
    radial-gradient(46cqw 10cqw at 82% 20%, rgba(110, 240, 220, .5), rgba(110, 240, 220, 0) 70%); }
.m-coach-elite .mc-rim { padding: .7cqw; box-shadow: none; opacity: .9;
  background: linear-gradient(125deg, #FFFFFF 0%, #A9B1D6 14%, #F2F4FF 28%, #7F88B8 44%, #FFFFFF 58%, #9AA4D0 74%, #E6EAFF 88%, #8D96C4 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* the back face: a darker version of the material, a band where a stripe would be, four figures */
.mc-back .mc-mat { background: linear-gradient(170deg, #3A0E2C, #22081D); }
.mc-back.m-athlete-free .mc-mat { background: radial-gradient(70cqw 50cqw at 90% 110%, rgba(255, 158, 116, .45), rgba(255, 158, 116, 0) 70%), linear-gradient(165deg, #FFE7DC, #FFD3C8); }
.mc-back.m-coach-free .mc-mat { background: radial-gradient(70cqw 50cqw at 90% 110%, rgba(127, 214, 255, .45), rgba(127, 214, 255, 0) 70%), linear-gradient(165deg, #E4E8FF, #CFD6FF); }
.mc-back.m-coach-pro .mc-mat { background: radial-gradient(90cqw 60cqw at 100% 0%, rgba(127, 214, 255, .3), rgba(127, 214, 255, 0) 60%), linear-gradient(160deg, #24258E, #16175E); }
.mc-back.m-coach-elite .mc-mat { background: radial-gradient(90cqw 70cqw at 15% 0%, #2C238A 0%, rgba(44, 35, 138, 0) 70%), linear-gradient(170deg, #120E4C, #08082A); }
.mc-stripe { left: 0; right: 0; top: 8cqw; height: 9cqw; background: rgba(0, 0, 0, .3); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.mc-back.m-athlete-free .mc-stripe { background: rgba(90, 35, 64, .14); }
.mc-back.m-coach-free .mc-stripe { background: rgba(30, 33, 102, .12); }
.mc-figs { left: 6.5cqw; right: 6.5cqw; top: 22cqw; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 2.3cqw 3.4cqw; white-space: normal; }
.mc-fig { display: contents; }
.mc-fig > span { font: 500 2.9cqw/1.25 Inter, sans-serif; opacity: .86; transition: opacity .4s ease; }
.mc-fig b { font: 600 4.6cqw/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; opacity: .92; transition: color .4s ease, text-shadow .4s ease, opacity .4s ease; }
.mc-back .mc-meta { top: 3.2cqw; bottom: auto; opacity: .55; }

/* sizes that change the face: the wordmark and the audience go under 240 px, all but material, motif and chip under 120 */
@container (max-width: 240px) {
  .mc-word, .mc-aud { display: none; }
  .mc-seats { gap: 1.6cqw; }
}
@container (max-width: 120px) {
  .mc-logo, .mc-aud, .mc-name, .mc-meta, .mc-seats, .mc-inf, .mc-figs, .mc-stripe { display: none; }
  .mc-chip { left: 50%; top: 50%; width: 32cqw; height: 24cqw; border-radius: 6cqw; transform: translate(-50%, -50%); }
  .mc-chip svg { width: 17cqw; height: 17cqw; }
  .mc { border-radius: 9cqw; }
}
@container (max-width: 30px) { .mc-chip { display: none; } }
/* browsers without size containers: fixed sizes per size (cqw would not resolve) */
@supports not (container-type: inline-size) {
  .mc { border-radius: 14px; }
  .mcw-hero .mc-name { font-size: 52px; } .mcw-tile .mc-name { font-size: 36px; } .mcw-mini .mc-name { font-size: 20px; }
  .mc-logo { left: 20px; top: 18px; font-size: 16px; } .mc-mark { width: 16px; height: 16px; }
  .mc-aud, .mc-meta { font-size: 9px; right: 20px; } .mc-name { left: 20px; bottom: 18px; }
  .mc-chip { left: 20px; width: 36px; height: 28px; border-radius: 7px; } .mc-chip svg { width: 18px; height: 18px; }
  .mcw-mini .mc-logo .mc-word, .mcw-mini .mc-aud, .mcw-thumb .mc-name, .mcw-thumb .mc-logo, .mcw-thumb .mc-meta, .mcw-swatch .mc-name,
  .mcw-swatch .mc-logo, .mcw-swatch .mc-meta, .mcw-thumb .mc-seats, .mcw-swatch .mc-seats, .mcw-thumb .mc-inf, .mcw-swatch .mc-inf { display: none; }
  .mc-seats { grid-template-columns: repeat(5, 6px); gap: 4px; bottom: 36px; } .mc-seats i { width: 6px; height: 6px; }
}
/* a card that tilts, lifts or catches the light never moves for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .mc, .mc.is-tilt { transition: none; }
  .mc-sheen::after { display: none; }
}
@media (forced-colors: active) {
  .mc { forced-color-adjust: none; border: 1px solid CanvasText; }
}
/* <<< membership card */

/* ---------------------------------------------------------------- memberships: buttons and pills (everywhere)
   The buttons of the memberships (site/build/memberships.py cta_html, the landing tiles): on a dark stage a white pill
   with ink text, on light an ink pill (warm plum for athletes, deep indigo for coaches), both with a round arrow dot in
   the audience's gradient; the quiet one is outlined at the same size. ms-a / ms-c pick the audience. */
.ms-btn { --b-ink: #3A0E2C; --b-dot: var(--a-arrow); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px/1.2 Inter, sans-serif; letter-spacing: -.005em; text-align: center;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background-color .25s, border-color .25s, color .25s; }
.ms-btn.ms-c { --b-ink: #141645; --b-dot: var(--c-arrow); }
.ms-btn.is-p { padding-right: 8px; background: var(--b-ink); color: #fff; box-shadow: 0 16px 34px -18px var(--b-ink); }
.ms-btn.is-q { border: 1px solid color-mix(in srgb, var(--b-ink) 35%, transparent); color: var(--b-ink); background: rgba(255, 255, 255, .5); }
.ms-btn-dot { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--b-dot); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); transition: transform .3s var(--ease); }
.ms-btn-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-btn:active { transform: scale(.98); }
/* a small phone keeps "Kostenlos als Coach starten" on one line inside a tile */
@media (max-width: 400px) { .ms-btn { padding: 0 16px; font-size: 15.5px; } .ms-btn.is-p { padding-right: 7px; } }
@media (hover: hover) {
  .ms-btn.is-p:hover { box-shadow: 0 20px 40px -18px var(--b-ink); }
  .ms-btn.is-p:hover .ms-btn-dot { transform: translateX(3px); }
  .ms-btn.is-q:hover { border-color: var(--b-ink); background: #fff; }
}
.ms-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--b-ink) 70%, #fff); outline-offset: 3px; border-radius: 999px; }
/* on a dark stage (dusk, blue hour, night) */
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-btn.is-p { background: #fff; color: var(--b-ink); box-shadow: 0 18px 44px -12px rgba(8, 4, 20, .55); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-btn.is-q { color: #fff; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .38); }
@media (hover: hover) { :is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-btn.is-q:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); } }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-btn:focus-visible { outline-color: #fff; }
.ms-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .ms-cta:not(.is-tile) { flex-direction: column; align-items: stretch; }
  .ms-cta .ms-btn { width: 100%; }
}
/* the pill that stands next to a price: Launchpreis in foil (pearl for athletes, ice silver for coaches), Free tinted */
.ms-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.ms-pill.is-launch { color: var(--a-ink); background: linear-gradient(100deg, #FFF4EC, #FFD3BF 40%, #FFFFFF 55%, #FFC7D6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 12px -6px rgba(142, 31, 82, .35); }
.ms-pill.is-free { color: var(--a-accent); background: rgba(184, 50, 95, .08); box-shadow: inset 0 0 0 1px rgba(184, 50, 95, .14); }
:is(.ms-coa, body[data-aud="coach"] .ms-land) .ms-pill.is-launch { color: var(--c-ink); background: linear-gradient(100deg, #EEF1FF, #C9D0FF 40%, #FFFFFF 55%, #CFEFFF); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 12px -6px rgba(52, 52, 184, .35); }
:is(.ms-coa, body[data-aud="coach"] .ms-land) .ms-pill.is-free { color: var(--c-accent); background: rgba(68, 71, 216, .08); box-shadow: inset 0 0 0 1px rgba(68, 71, 216, .14); }

/* ---------------------------------------------------------------- landing: #preise, the membership tiles
   (site/src/index.html; Leon 2026-09-28: the new look of the memberships). The section is its audience's daylight:
   warm mist with peach and rose for athletes, cool mist with ice and sky for coaches. Each tile carries its card on
   top (a link to its page, data-tilt 5), then name, who it is for, price and launch lines, what it gives, the button
   and "Alles über ...". The cards rise and settle from 10 degrees as the tiles come into view (a view timeline). */
.ms-land { position: relative; isolation: isolate; padding: 124px 0 116px; background-color: #FFF6F1; overflow: hidden;
  --lt-acc: var(--a-accent); --lt-ink: var(--a-ink); --lt-shadow: rgba(214, 58, 103, .16); }
.ms-land::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 38% at 8% 4%, rgba(255, 200, 214, .7), transparent 70%), radial-gradient(50% 44% at 96% 96%, rgba(255, 176, 128, .5), transparent 70%),
    radial-gradient(34% 30% at 60% 55%, rgba(255, 225, 214, .55), transparent 70%); }
body[data-aud="coach"] .ms-land { background-color: #F3F5FF; --lt-acc: var(--c-accent); --lt-ink: var(--c-ink); --lt-shadow: rgba(91, 93, 241, .16); }
body[data-aud="coach"] .ms-land::before { background: radial-gradient(46% 38% at 8% 4%, rgba(199, 204, 255, .75), transparent 70%), radial-gradient(50% 44% at 96% 96%, rgba(127, 214, 255, .45), transparent 70%),
  radial-gradient(34% 30% at 60% 55%, rgba(226, 240, 255, .6), transparent 70%); }
.ms-land-k, .ms-land-h { text-align: center; }
.ms-land-k { color: var(--lt-acc); }
.ms-land-h { margin-top: 12px; color: var(--lt-ink); }
.ms-land .grad, .ms-ath .grad-light { background-image: var(--a-grad-light); }
body[data-aud="coach"] .ms-land .grad { background-image: var(--c-grad-light); }
.lt-tiles { display: grid; gap: 24px; margin: 56px auto 0; align-items: start; }
.lt-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.lt-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 30px 26px; border-radius: 30px;
  background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 70px -40px var(--lt-shadow), 0 2px 8px rgba(15, 23, 42, .04); }
.lt-tile.is-hl { border-color: transparent; background: linear-gradient(180deg, rgba(255, 236, 228, .95), rgba(255, 255, 255, .92) 42%) padding-box, linear-gradient(130deg, #FFD3BF, #FFFFFF 38%, #FFC7D6 62%, #FF9E74) border-box;
  box-shadow: 0 40px 90px -40px rgba(142, 31, 82, .42), 0 2px 8px rgba(15, 23, 42, .04); }
body[data-aud="coach"] .lt-tile.is-hl { background: linear-gradient(180deg, rgba(226, 232, 255, .96), rgba(255, 255, 255, .93) 42%) padding-box, linear-gradient(130deg, #BFC7FF, #FFFFFF 38%, #B5ECFF 62%, #6C74FF) border-box;
  box-shadow: 0 40px 90px -40px rgba(52, 52, 184, .45), 0 2px 8px rgba(15, 23, 42, .04); }
.lt-card { display: block; width: min(100%, 360px); margin: 0 auto 24px; --rz0: -2deg; }
.lt-tile:nth-child(2n) .lt-card { --rz0: 2deg; }
.lt-body { display: flex; flex-direction: column; flex: 1; }
.lt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lt-head h3 { font-size: 26px; letter-spacing: -.025em; color: var(--lt-ink); }
.lt-for { margin-top: 4px; font-size: 15px; color: var(--dim); }
.lt-price { margin-top: 18px; font-variant-numeric: tabular-nums; }
.lt-price > b, .lt-price > p:first-child > b { font: 600 44px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: var(--lt-ink); white-space: nowrap; }
.lt-price small { font: 400 15px Inter, sans-serif; color: color-mix(in srgb, var(--lt-ink) 75%, transparent); white-space: nowrap; }
.lt-price .lt-or { margin-top: 6px; font-size: 14.5px; color: var(--dim); }
.lt-or b { font: 600 14.5px Inter, sans-serif; letter-spacing: 0; color: var(--lt-ink); }
.lt-launch { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--lt-acc) 6%, transparent); }
.lt-l1 { font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--lt-ink); text-wrap: pretty; }
.lt-l2 { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--dim); }
.lt-l2 b { font-weight: 600; white-space: nowrap; }
.lt-key { margin-top: 12px; font-size: 14.5px; font-weight: 500; color: var(--lt-ink); }
.lt-key b { font-weight: 600; white-space: nowrap; }
.lt-check { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text); }
.lt-check li { position: relative; padding-left: 28px; text-wrap: pretty; }
.lt-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--lt-acc);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat; }
.lt-check b { font-weight: 600; }
.lt-cta { margin-top: auto; display: flex; }
.lt-cta .ms-btn { flex: 1; }
.lt-tile .web-note { margin-top: 10px; text-align: center; font-size: 12.5px; }
.lt-go { margin-top: 14px; text-align: center; }
.lt-go a, .lt-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 15px Inter, sans-serif; color: var(--lt-acc); }
.lt-go svg, .lt-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) { .lt-go a:hover svg, .lt-all a:hover svg { transform: translateX(3px); } }
.lt-all { margin-top: 26px; text-align: center; }
.lt-all a { padding: 0 20px; min-height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lt-acc) 22%, transparent); }
.ms-land .fee-note { color: var(--dim); }
.ms-land .pin-free svg { color: var(--lt-acc); }
.ms-land .trust-strip svg { color: var(--lt-acc); }
/* the cards rise and settle as the tiles come into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lt-card .mcw { animation: lt-settle linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
    .lt-tile:nth-child(2) .lt-card .mcw { animation-range: entry 12% cover 42%; }
    .lt-tile:nth-child(3) .lt-card .mcw { animation-range: entry 19% cover 46%; }
  }
}
@keyframes lt-settle { from { opacity: 0; transform: translateY(46px) rotate(10deg) scale(.96); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) and (max-width: 1023px) {
  /* the coach tiles as rows: the card on the left, the text beside it */
  .lt-n3 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .lt-n3 .lt-tile { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .lt-n3 .lt-card { width: 240px; margin: 4px 0 0; }
}
@media (max-width: 860px) { .lt-n2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 767px) {
  .ms-land { padding: 90px 0 84px; }
  .lt-tiles { margin-top: 40px; gap: 20px; }
  .lt-n3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .lt-tile { padding: 22px 20px 22px; border-radius: 26px; }
  .lt-price > b, .lt-price > p:first-child > b { font-size: 40px; }
}
@media (forced-colors: active) {
  .lt-tile { border: 1px solid CanvasText; }
  .lt-tile.is-hl { border: 3px solid Highlight; }
  .ms-btn { border: 1px solid ButtonText; }
  .lt-check li::before { background: CanvasText; }
}
/* >>> Ava pages (2026-09-28): the quiet link from the landing page's Ava section to /ava/ and
   /coaches/ava/, the Pro and Elite tag on the coach's plan scene
   and the 404 walk. The Ava pages themselves are site/ava.css. */
.ava-more { margin-top: 14px; }
.ava-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #C7D2FE; font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(199, 210, 254, .35); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.ava-more a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.ava-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.ava-more a:hover svg { transform: translateX(3px); }
.pro-tag { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 99px; background: #fff; color: var(--ink); font: 600 11.5px/1.2 Inter, sans-serif; letter-spacing: 0; }
@media (max-width: 1100px) { .ava-sec .ava-more { margin-top: 8px; } }
@media (max-width: 700px) { .ava-sec .ava-more { margin-top: 2px; } .ava-sec .ava-more a { font-size: 14px; } }
.nf-ava { display: flex; gap: 14px; align-items: flex-start; max-width: 620px; margin: 36px auto 0; padding: 18px 20px; border-radius: 22px; background: var(--ink); color: #E8ECFF; box-shadow: var(--shadow-md); text-align: left; }
.nf-ava > img { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.nf-ava-t { flex: 1; min-width: 0; }
.nf-ava-p { font-size: 15.5px; line-height: 1.55; }
.nf-ava-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.nf-ava-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.nf-ava-chip:hover { background: #E0E7FF; }
.nf-ava-chip[disabled] { opacity: .5; cursor: default; }
.nf-ava-pill { padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .16); color: rgba(226, 232, 255, .62); font-size: 12px; }
.nf-ava-tool { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 6px 8px 6px 12px; border-radius: 14px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .34); color: #6EE7B7; font-size: 14px; }
.nf-ava-tool[hidden], .nf-ava-note[hidden], .nf-ava-undone[hidden], .nf-ava-undo[hidden] { display: none; }
.nf-ava-done { flex: 1; min-width: 0; }
.nf-ava-tool.is-undone { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .22); color: #CBD5E1; }
.nf-ava-tool.is-undone .nf-ava-done { text-decoration: line-through; color: #64748B; }
.nf-ava-undo { position: relative; min-height: 32px; padding: 0 12px; border-radius: 9px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #E0E7FF; font-size: 13px; font-weight: 600; }
.nf-ava-undo::after { content: ""; position: absolute; inset: -6px -4px; }
.nf-ava-note { margin-top: 8px; font-size: 13px; color: rgba(226, 232, 255, .62); }
/* <<< Ava pages */
/* >>> Coach feature pages: landing links. The end of #kurse and of the coach's #warum lead on to
   the page of their own (/coaches/online-kurse/, /coaches/buchung-und-zahlung/). */
.fx-more { display: flex; justify-content: center; margin-top: 36px; }
.fx-more .btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.fx-more .btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .fx-more .btn:hover svg { transform: none; } }
/* <<< Coach feature pages: landing links */
/* >>> Easter eggs (2026-09-30, site/eggs.js): the toast and the pill bottom left, the plank timer,
   Beast Mode, Ava peeking, the logo push ups, the country scenes' secrets, the 404 warm up and the
   print line. Everything fixed lets clicks through (pointer-events: none) except its own buttons. */
.egg-stack { position: fixed; left: 16px; bottom: var(--egg-b, 16px); z-index: 130; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.egg-toast { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 10px 12px 12px; border-radius: 18px; background: rgba(15, 14, 40, .95); border: 1px solid rgba(255, 255, 255, .12); color: #EEF0FF; font: 500 14px/1.45 Inter, system-ui, sans-serif; box-shadow: 0 22px 50px -18px rgba(15, 14, 40, .7), 0 0 0 1px rgba(91, 93, 241, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: 0 100%; transition: opacity .28s var(--ease), transform .38s var(--ease), visibility 0s .38s; }
.egg-toast.on { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .38s var(--ease), visibility 0s; }
.egg-ic { flex: none; width: 32px; height: 32px; }
.egg-ic svg, .egg-ic img { display: block; width: 32px; height: 32px; }
.egg-t { flex: 1; min-width: 0; padding-top: 1px; }
.egg-msg { color: #fff; }
.egg-got { margin-top: 3px; font-size: 12.5px; color: #B8BEF5; }
.egg-got:first-child { margin-top: 6px; }
.egg-got b { color: #fff; font-weight: 600; }
.egg-act { margin-top: 10px; }
.egg-toast a, .egg-toast button, .egg-pill button { pointer-events: auto; }
.egg-toast a { color: #C7D2FE; text-decoration: underline; text-underline-offset: 3px; }
.egg-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 99px; background: #fff; color: #1E1B4B; font: 600 13.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.egg-btn:hover { background: #E0E7FF; }
.egg-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -2px 0 0; border-radius: 10px; color: rgba(226, 232, 255, .6); cursor: pointer; }
.egg-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.egg-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.egg-btn:focus-visible, .egg-x:focus-visible, .egg-warm-b:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; }
.egg-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; border-radius: 99px; background: linear-gradient(90deg, #5B5DF1, #7C3AED); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 12px 30px -12px rgba(91, 93, 241, .8); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .28s var(--ease), transform .38s var(--ease), visibility 0s .38s; }
.egg-pill:has(button) { padding: 3px 3px 3px 12px; }
.egg-pill .egg-btn { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.egg-pill.on { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .38s var(--ease), visibility 0s; }
.egg-stack.is-right { left: auto; right: 16px; align-items: flex-end; }
.egg-stack:has(.af-card) { width: min(460px, calc(100vw - 32px)); }
.egg-msg .af-card { margin-top: 8px; }
.egg-msg .af-tool { flex-wrap: wrap; }
.egg-stack.is-top { bottom: auto; top: 132px; }
@media (max-width: 600px) { .egg-stack { left: 12px; width: calc(100vw - 24px); } .egg-stack.is-right { right: 12px; } }

/* the plank timer, bottom centre */
.egg-plank { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 131; display: flex; align-items: baseline; gap: 10px; padding: 10px 22px 11px; border-radius: 99px; background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; box-shadow: 0 18px 44px -14px rgba(79, 70, 229, .75), inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.egg-plank.on { opacity: 1; transform: translate(-50%, 0); }
.egg-plank-k { font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.egg-plank b { min-width: 3.2ch; font: 700 24px/1 Outfit, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Beast Mode: a dark gym tint, glowing headlines, the banner and a few dumbbells */
.egg-gym { position: fixed; inset: 0; z-index: 125; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 42%, #C9C3FA 0%, #7F74D6 58%, #231C5C 100%); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s var(--ease); }
.egg-gym.on { opacity: 1; }
html.egg-beast h1, html.egg-beast .h-sec, html.egg-beast h2 { text-shadow: 0 0 16px rgba(139, 92, 246, .75), 0 0 40px rgba(99, 102, 241, .5); transition: text-shadow .5s; }
.egg-banner { position: fixed; top: 92px; left: 50%; z-index: 132; padding: 12px 28px 13px; border-radius: 99px; background: linear-gradient(90deg, #5B5DF1, #A855F7); color: #fff; font: 800 clamp(20px, 2.6vw, 28px)/1 Outfit, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 50px -10px rgba(124, 58, 237, .85); pointer-events: none; opacity: 0; transform: translate(-50%, -14px) scale(.92); transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.egg-banner.on { opacity: 1; transform: translate(-50%, 0); animation: egg-pulse 1.2s ease-in-out .5s infinite; }
@keyframes egg-pulse { 50% { transform: translate(-50%, 0) scale(1.05); } }
.egg-rain { position: fixed; inset: 0; z-index: 131; overflow: hidden; pointer-events: none; }
.egg-bell { position: absolute; top: -40px; width: 52px; color: #E0E7FF; filter: drop-shadow(0 6px 10px rgba(15, 14, 40, .45)); animation: egg-fall 2.6s cubic-bezier(.45, 0, .7, 1) both; }
.egg-bell svg { display: block; width: 100%; height: auto; fill: currentColor; }
.egg-bell:nth-child(even) { color: #C4B5FD; width: 40px; }
@keyframes egg-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(100vh + 80px)) rotate(var(--r, 30deg)); } }

/* Ava peeks up from the bottom right */
.egg-peek { position: fixed; right: 20px; bottom: var(--egg-b, 16px); z-index: 130; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.egg-peek-g { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: radial-gradient(circle at 30% 20%, #3B3597, #0B1022 72%); box-shadow: 0 0 0 1px rgba(165, 180, 252, .3), 0 16px 36px -12px rgba(15, 14, 40, .7); transform: translateY(calc(100% + 30px)) rotate(-10deg); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.egg-peek-g img { width: 34px; height: 34px; filter: invert(1); }
.egg-peek-q { max-width: min(250px, calc(100vw - 120px)); margin-bottom: 30px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; color: #1E1B4B; font: 500 14px/1.4 Inter, system-ui, sans-serif; box-shadow: 0 16px 40px -14px rgba(15, 14, 40, .45), 0 0 0 1px rgba(91, 93, 241, .14); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease) .35s, transform .4s var(--ease) .35s; }
.egg-peek-q:empty { visibility: hidden; }
.egg-peek.on .egg-peek-g { transform: translateY(8px) rotate(-6deg); }
.egg-peek.on .egg-peek-q { opacity: 1; transform: none; }

/* the big logo's push ups */
.egg-pu { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.onemark { transition: box-shadow .25s; }
.onemark.egg-busy { box-shadow: 0 40px 100px rgba(99, 102, 241, 0); }
.egg-reps { position: absolute; top: -14px; right: -14px; z-index: 2; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 99px; background: #fff; color: #5B5DF1; font: 800 18px/1 Outfit, system-ui, sans-serif; box-shadow: 0 10px 26px -8px rgba(79, 70, 229, .6); transition: opacity .35s; pointer-events: none; }
.egg-reps:empty { opacity: 0; }
.egg-reps.egg-pop { animation: egg-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.egg-reps.out { opacity: 0; }
@keyframes egg-pop { from { transform: scale(.6); } }

/* the country scenes: a goal in Germany, a yodel in Austria, a flag on the Swiss summit */
.egg-net { fill: #A78BFA; fill-opacity: 0; }
.egg-kick.is-goal .egg-net { animation: egg-net .9s ease-out; }
@keyframes egg-net { 20% { fill-opacity: .7; } }
.egg-tor { position: absolute; z-index: 5; padding: 8px 18px 10px; border-radius: 99px; background: linear-gradient(90deg, #5B5DF1, #A855F7); color: #fff; font: 800 clamp(22px, 3vw, 34px)/1 Outfit, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 16px 40px -10px rgba(124, 58, 237, .9); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 18px)) scale(.6); transition: opacity .25s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.egg-tor.on { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.egg-tor.out { transition: opacity .45s; }
.egg-kick { transition: opacity .5s; }
.egg-kick.out { opacity: 0; }
.egg-yodel { position: absolute; z-index: 5; pointer-events: none; transform: translate(8px, calc(-100% - 10px)); }
.egg-yodel b { display: block; padding: 9px 16px 10px; border-radius: 18px 18px 18px 4px; background: #fff; color: #1E1B4B; font: 800 20px/1 Outfit, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 14px 34px -12px rgba(30, 27, 75, .45), 0 0 0 1px rgba(91, 93, 241, .16); opacity: 0; transform: scale(.7); transform-origin: 0 100%; transition: opacity .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.egg-yodel i { position: absolute; left: 100%; font: italic 700 14px/1 Outfit, system-ui, sans-serif; color: rgba(30, 27, 75, .45); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.egg-yodel i:nth-of-type(1) { top: -6px; margin-left: 12px; transition-delay: .5s; }
.egg-yodel i:nth-of-type(2) { top: -22px; margin-left: 64px; font-size: 12px; color: rgba(30, 27, 75, .3); transition-delay: .9s; }
.egg-yodel.is-left { transform: translate(calc(-100% - 8px), calc(-100% - 10px)); }
.egg-yodel.is-left b { border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; }
.egg-yodel.is-left i { left: auto; right: 100%; margin: 0 12px 0 0; }
.egg-yodel.is-left i:nth-of-type(2) { margin-right: 64px; }
.egg-yodel.on b, .egg-yodel.on i { opacity: 1; transform: none; }
.egg-yodel.out { opacity: 0; transition: opacity .45s; }
.egg-pole { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.egg-cloth { opacity: 0; transform: translateY(24px); transition: opacity .3s .55s, transform .9s var(--ease) .55s; }
.egg-flag.on .egg-pole, .egg-flag.on .egg-cloth { opacity: 1; transform: none; }
.egg-flag { transition: opacity .6s; }
.egg-flag.out { opacity: 0; }

/* the 404 warm up */
.egg-warm { max-width: 620px; margin: 16px auto 0; padding: 16px 20px 18px; border-radius: 22px; background: var(--violet-50); border: 1px solid rgba(91, 93, 241, .14); color: var(--ink); text-align: left; }
.egg-warm-p { font-weight: 600; font-size: 15.5px; }
.egg-warm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.egg-warm-b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 99px; background: var(--violet); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.egg-warm-b:hover { background: var(--violet-600); }
.egg-warm-b[aria-disabled="true"] { opacity: .5; cursor: default; }
.egg-warm-bar { flex: 1; min-width: 140px; height: 10px; border-radius: 99px; background: rgba(91, 93, 241, .14); overflow: hidden; }
.egg-warm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5B5DF1, #A855F7, #F472B6); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.egg-warm-done { margin-top: 12px; font-weight: 600; }
.egg-warm-done:empty { display: none; }
.egg-warm-done a { color: var(--violet-600); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .egg-toast, .egg-toast.on, .egg-pill, .egg-pill.on, .egg-plank, .egg-gym, .egg-banner, .egg-yodel b, .egg-yodel i, .egg-pole, .egg-cloth, .egg-tor, .egg-warm-bar i, .egg-reps, .egg-peek-g, .egg-peek-q { transition: none; }
  .egg-toast, .egg-pill, .egg-yodel b, .egg-tor, .egg-cloth, .egg-pole, .egg-peek-q { transform: none; }
  .egg-plank, .egg-banner, .egg-banner.on { transform: translate(-50%, 0); }
  .egg-tor, .egg-tor.on { transform: translate(-50%, calc(-100% - 18px)); transition: none; }
  .egg-banner.on, .egg-reps.egg-pop, .egg-kick.is-goal .egg-net { animation: none; }
  .egg-peek { opacity: 0; } .egg-peek.on { opacity: 1; } .egg-peek-g, .egg-peek.on .egg-peek-g { transform: translateY(8px); }
}
@media print {
  .egg-stack, .egg-peek, .egg-plank, .egg-gym, .egg-banner, .egg-rain { display: none !important; }
  body::after { content: "Papier ist geduldig. Dein Coach nicht."; display: block; margin: 24px 0 0; text-align: center; font: 600 11pt/1.4 Inter, system-ui, sans-serif; color: #5B5DF1; }
  html:lang(en) body::after { content: "Paper is patient. Your coach is not."; }
  body:has(main.t-legal)::after { content: none; }
}
/* Leg Day needs no styles (a tremble of main). The protein shaker and the pull up counter: */
.egg-shake { position: fixed; z-index: 131; width: 76px; height: 104px; margin: -52px 0 0 -38px; pointer-events: none; opacity: 0; transform: translateY(12px) scale(.7); transition: opacity .25s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.egg-shake.on { opacity: 1; transform: none; }
.egg-shake.out { opacity: 0; transform: translateY(-10px) scale(.9); transition: opacity .4s, transform .4s var(--ease); }
.egg-shake::before { content: ""; position: absolute; inset: -34px -44px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .96), rgba(255, 255, 255, .85) 55%, rgba(255, 255, 255, 0)); }
.egg-shake svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 88%; filter: drop-shadow(0 12px 18px rgba(79, 70, 229, .35)); }
.egg-shake-fill { transform: translateY(56px); }
.egg-shake.is-full .egg-shake-fill { transform: none; }
.egg-shake.is-full svg { animation: egg-cupdone .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes egg-cupdone { 50% { transform: scale(1.1); } }
.egg-pull { position: fixed; top: 84px; left: 50%; z-index: 131; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 99px; background: rgba(15, 14, 40, .92); color: #fff; font: 700 13.5px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 14px 34px -12px rgba(15, 14, 40, .6), 0 0 0 1px rgba(165, 180, 252, .25); pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.egg-pull svg { width: 22px; height: 22px; }
.egg-pull.on { opacity: 1; transform: translate(-50%, 0); }
.egg-pull.egg-pop { animation: egg-pullpop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes egg-pullpop { 40% { transform: translate(-50%, -4px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .egg-shake, .egg-shake.on, .egg-shake.out, .egg-pull, .egg-pull.on { transition: none; transform: none; }
  .egg-pull, .egg-pull.on { transform: translate(-50%, 0); }
  .egg-shake.is-full svg, .egg-pull.egg-pop { animation: none; }
}
@media print { .egg-shake, .egg-pull { display: none !important; } }
/* <<< Easter eggs */