/* The coach feature pages (site/src/pages/online-kurse.html, buchung-und-zahlung.html and their English
   twins, meta type "feature"). Loaded only by those pages, after content.css (build.py). The cool coach
   world: deep indigo, periwinkle and a cyan signal on dark, white glass for product UI.
   Motion: only transform, opacity and stroke-dashoffset move. Every loop is paused unless its section is
   on screen ([data-fx-run="1"], feature.js) and the reader allows motion. */

/* >>> fx shared =================================================================================== */
.t-feature {
  --fx-night: #070B1A; --fx-deep: #0B1022; --fx-indigo: #4F46E5; --fx-blue: #6366F1; --fx-peri: #A5B4FC; --fx-ice: #C7D2FE;
  --fx-cyan: #22D3EE; --fx-money: #34D399; --fx-wait: #FBBF24; --fx-line: rgba(165, 180, 252, .14);
  --fx-ease: cubic-bezier(.22, 1, .36, 1); --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-mist: #F3F4FF; --fx-ink: #0B1022; --fx-dim: #5B6478;
  --fx-grad-dark: linear-gradient(95deg, #C7D2FE 0%, #818CF8 45%, #22D3EE 100%);
  --fx-grad-light: linear-gradient(96deg, #4F46E5, #0284C7);
}
.t-feature .grad { background: var(--fx-grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-feature .cp-head .grad, .t-feature .fx-dark .grad { background-image: var(--fx-grad-dark); }
.t-feature .num, .t-feature output { font-variant-numeric: tabular-nums; }

/* the dark head with the hero beside the h1 */
.t-feature .cp-head, .t-feature .fx-dark { background: var(--fx-deep); color: #fff; }
.t-feature .cp-head { overflow: hidden; text-align: left; padding: 132px 0 84px; }
.t-feature .cp-head::before, .t-feature .fx-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(46% 62% at 12% 0%, rgba(79, 70, 229, .38), transparent 70%),
              radial-gradient(40% 50% at 92% 100%, rgba(34, 211, 238, .12), transparent 72%);
}
.t-feature .cp-head::after, .t-feature .fx-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(165, 180, 252, .09) 1.2px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%); mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.t-feature .cp-head .kicker, .t-feature .fx-dark .kicker { color: var(--fx-peri); }
.t-feature .cp-h1 { color: #fff; margin: 14px 0 0; max-width: 620px; font-size: clamp(40px, 5.2vw, 68px); }
.t-feature .cp-h1 .grad { display: block; width: max-content; max-width: 100%; }
.t-feature .cp-lede { color: rgba(226, 232, 255, .76); margin: 22px 0 0; max-width: 560px; }
.fx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.t-feature .fx-dark .btn-quiet, .t-feature .cp-head .btn-quiet { color: #E0E7FF; border-color: rgba(199, 210, 254, .3); background: rgba(255, 255, 255, .04); }
.t-feature .fx-dark .btn-quiet:hover, .t-feature .cp-head .btn-quiet:hover { color: #fff; border-color: rgba(199, 210, 254, .6); }
.fx-scene-wrap { position: relative; }
.fx-scene { position: relative; height: 480px; overflow: clip; contain: layout paint; }
.fx-scene-wrap > .fx-demo { position: absolute; right: 4px; bottom: 6px; }
@media (min-width: 1024px) {
  .t-feature .cp-head > .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .t-feature .cp-head > .wrap > :not(.fx-scene-wrap) { grid-column: 1; }
  .t-feature .cp-head .fx-scene-wrap { grid-column: 2; grid-row: 1 / span 5; }
}
@media (max-width: 1023px) {
  .t-feature .cp-head { text-align: center; padding: 116px 0 40px; }
  .t-feature .cp-h1, .t-feature .cp-lede { margin-left: auto; margin-right: auto; }
  .t-feature .cp-h1 .grad { margin: 0 auto; }
  .fx-cta-row { justify-content: center; }
  .fx-scene-wrap { margin-top: 28px; }
  .fx-scene { height: 300px; }
}
@media (max-width: 560px) { .fx-scene { height: 250px; } .fx-cta-row .btn { flex: 1 1 100%; justify-content: center; } }
body:has(main.t-feature) .nav:not(.scrolled) .logo b { color: #fff; }
body:has(main.t-feature) .nav:not(.scrolled) .nav-links a, body:has(main.t-feature) .nav:not(.scrolled) .nav-login { color: rgba(226, 232, 255, .74); }
body:has(main.t-feature) .nav:not(.scrolled) .nav-links a:hover, body:has(main.t-feature) .nav:not(.scrolled) .nav-login:hover { color: #fff; }
body:has(main.t-feature) .nav:not(.scrolled) .nav-burger { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
body:has(main.t-feature) .nav:not(.scrolled) .lang { border-color: rgba(255, 255, 255, .24); }

/* sections */
.t-feature .fx-sec { position: relative; isolation: isolate; padding: 104px 0; }
.t-feature .cp-sec.fx-sec + .cp-sec.fx-sec { padding-top: 104px; }
.t-feature [hidden] { display: none !important; }
.t-feature .fx-mist { background: var(--fx-mist); }
.t-feature .fx-dark { overflow: clip; }
.t-feature .fx-head { max-width: 780px; margin: 0 auto 48px; }
.t-feature .fx-head h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.03em; line-height: 1.04; }
.t-feature .fx-dark h2, .t-feature .fx-dark h3 { color: #fff; }
.t-feature .fx-dark .fx-head p:not(.kicker) { color: rgba(226, 232, 255, .74); }
.t-feature .cp-sec.fx-light + .cp-sec.fx-light, .t-feature .cp-sec.fx-mist + .cp-sec.fx-mist { padding-top: 24px; }
@media (max-width: 720px) { .t-feature .fx-sec { padding: 72px 0; } .t-feature .cp-sec.fx-sec + .cp-sec.fx-sec { padding-top: 72px; } .t-feature .cp-sec.fx-light + .cp-sec.fx-light { padding-top: 16px; } .t-feature .fx-head { margin-bottom: 32px; } }

/* small parts */
.fx-demo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #4338CA; background: #EEF0FF; border: 1px solid #DCDFFE; white-space: nowrap; }
.fx-dark .fx-demo, .cp-head .fx-demo { color: var(--fx-ice); background: rgba(165, 180, 252, .1); border-color: rgba(165, 180, 252, .22); }
.fx-head .fx-demo { margin-top: 16px; }
.fx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 Inter, sans-serif; white-space: nowrap; }
.fx-ok { color: #047857; background: #D1FAE5; }
.fx-wt { color: #92400E; background: #FEF3C7; }
.fx-in { color: #3730A3; background: #E0E7FF; }
.fx-mute { color: #475569; background: #EEF1F6; }
.fx-ic { width: 1em; height: 1em; flex: none; }
.fx-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: #EEF0F8; border: 1px solid var(--line); }
.fx-dark .fx-seg { background: rgba(255, 255, 255, .06); border-color: var(--fx-line); }
.fx-seg button { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 14.5px/1 Inter, sans-serif; color: var(--fx-dim); cursor: pointer; transition: color .3s var(--fx-ease); white-space: nowrap; }
.fx-dark .fx-seg button { color: rgba(226, 232, 255, .7); }
.fx-seg button[aria-pressed="true"] { color: #fff; }
.fx-seg button:disabled { cursor: default; }
.fx-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--fx-indigo), #3B5BDB); box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .8); transform: translateX(var(--kx, 4px)); width: var(--kw, 0); transition: transform .42s var(--fx-spring), width .42s var(--fx-ease); }
.fx-seg:not(.is-live) button[aria-pressed="true"] { background: linear-gradient(135deg, var(--fx-indigo), #3B5BDB); }
.fx-ctl { display: grid; gap: 8px; }
.fx-ctl > span, .fx-ctl legend, .fx-lab { font: 600 13px/1.3 Inter, sans-serif; letter-spacing: .02em; color: var(--fx-dim); }
.fx-dark .fx-ctl > span, .fx-dark .fx-lab { color: rgba(226, 232, 255, .66); }
fieldset.fx-ctl { border: 0; padding: 0; margin: 0; min-width: 0; }
.fx-range { width: 100%; accent-color: var(--fx-indigo); height: 44px; cursor: pointer; }
.fx-glass { border-radius: 24px; background: #fff; color: var(--fx-ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.fx-browser { color: var(--fx-ink); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .06); }
.fx-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F4F5FA; border-bottom: 1px solid #E6E8F0; font: 500 12.5px/1.2 Inter, sans-serif; color: #475569; }
.fx-bar::before { content: ""; width: 38px; height: 10px; flex: none; background: radial-gradient(circle at 5px 5px, #F87171 4px, transparent 4.5px), radial-gradient(circle at 19px 5px, #FBBF24 4px, transparent 4.5px), radial-gradient(circle at 33px 5px, #34D399 4px, transparent 4.5px); }
.fx-url { flex: 1; min-width: 0; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #E6E8F0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fx-limits > div { padding: 26px 26px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.fx-limits h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 0 14px; }
.fx-limits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-limits li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--fx-dim); }
.fx-limits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #D1FAE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* "Bald dabei": planned, so a small clock instead of a minus (Leon 2026-09-30) */
.fx-limits .is-no li::before { background: #EEF0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / 13px no-repeat; }
@media (max-width: 760px) { .fx-limits { grid-template-columns: 1fr; } }

/* tiles that open (short line visible, the rest on a tap) */
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.fx-tile { border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .25s, box-shadow .35s var(--fx-ease), transform .35s var(--fx-ease); }
.fx-tile:hover { border-color: #C7CCF8; box-shadow: 0 18px 40px -24px rgba(79, 70, 229, .45); transform: translateY(-2px); }
.fx-tile summary { list-style: none; display: grid; grid-template-columns: 40px 1fr 28px; gap: 4px 14px; align-items: start; padding: 20px; cursor: pointer; min-height: 44px; }
.fx-tile summary::-webkit-details-marker { display: none; }
.fx-tile summary::after { content: ""; grid-column: 3; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; background: #EEF0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .3s var(--fx-ease); }
.fx-tile[open] summary::after { transform: rotate(45deg); }
.fx-tile-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, #EEF0FF, #E0F2FE); color: var(--fx-indigo); }
.fx-tile-ic svg { width: 20px; height: 20px; }
.fx-tile h3 { grid-column: 2; font-size: 17.5px; line-height: 1.3; margin: 0; letter-spacing: -.01em; }
.fx-tile summary > span:not(.fx-tile-ic) { grid-column: 2 / span 2; font-size: 14.5px; line-height: 1.5; color: var(--fx-dim); }
.fx-tile > p { margin: 0; padding: 0 20px 20px 74px; font-size: 15px; line-height: 1.6; color: var(--fx-dim); }
@media (max-width: 560px) { .fx-tile > p { padding-left: 20px; } }

/* the film: captions and a stage, one engine for both pages (feature.js FX.film) */
.fx-film { display: grid; gap: 28px; }
@media (min-width: 1024px) { .fx-film { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 48px; align-items: center; } .fx-film .fx-stage { grid-column: 2; grid-row: 1; } .fx-film .fx-caps { grid-column: 1; grid-row: 1; } }
.fx-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: cap; }
.fx-cap { position: relative; padding: 14px 16px 16px; border-radius: 16px; transition: background-color .35s var(--fx-ease); }
.fx-cap h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.fx-cap-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: rgba(226, 232, 255, .62); text-align: left; cursor: pointer; transition: color .3s; }
.fx-cap-btn:hover, .fx-cap[aria-current] .fx-cap-btn { color: #fff; }
.fx-cap-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid rgba(165, 180, 252, .3); font: 600 13px/1 Inter, sans-serif; color: var(--fx-ice); transition: background-color .3s, border-color .3s; }
.fx-cap[aria-current] .fx-cap-n { background: var(--fx-indigo); border-color: var(--fx-indigo); color: #fff; }
.fx-cap p { margin: 8px 0 0 40px; font-size: 15px; line-height: 1.6; color: rgba(226, 232, 255, .72); }
.fx-cap[aria-current] { background: rgba(255, 255, 255, .05); }
.fx-cap-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: transparent; }
.fx-cap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--fx-blue), var(--fx-cyan)); transform-origin: left; transform: scaleX(0); }
.fx-js .fx-cap:not([aria-current]) p { display: none; }
.fx-js .fx-cap[aria-current] .fx-cap-bar i { animation: fx-bar var(--fx-dw, 6s) linear forwards paused; }
@media (prefers-reduced-motion: no-preference) { .fx-film[data-fx-run="1"]:not(.is-paused) .fx-cap[aria-current] .fx-cap-bar i { animation-play-state: running; } }
@keyframes fx-bar { to { transform: scaleX(1); } }
.fx-pause { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--fx-line); background: rgba(255, 255, 255, .04); color: var(--fx-ice); font: 600 13.5px/1 Inter, sans-serif; cursor: pointer; }
.fx-pause svg { width: 14px; height: 14px; }
@media (min-width: 1024px) { .fx-pause { grid-column: 1; grid-row: 2; } }
@media (max-width: 1023px) { .fx-film .fx-stage { order: -2; } .fx-film .fx-pause { order: -1; } .fx-film { gap: 18px; } }
.fx-stage { position: relative; container-type: inline-size; overflow: clip; contain: layout paint; border-radius: 28px; background: linear-gradient(160deg, rgba(79, 70, 229, .16), rgba(11, 16, 34, .2) 60%), rgba(255, 255, 255, .02); border: 1px solid var(--fx-line); }
.fx-stage.fx-fade > * { opacity: 0; transition: opacity .6s var(--fx-ease); }
/* beats: an element of chapter K carries fx-sK (appears) and maybe fx-xK (leaves). Without the engine the
   stage is the still of the last chapter; the engine adds fx-on and s1..sK. */
.fx-b { transition: none; }
.fx-anim .fx-b { transition: opacity .5s var(--fx-ease) var(--d, 0s), transform .65s var(--fx-spring) var(--d, 0s); }
.fx-anim.fx-cut .fx-b { transition: none; }
.fx-x1, .fx-x2, .fx-x3, .fx-x4, .fx-x5, .fx-x6, .fx-x7, .fx-x8 { opacity: 0; transform: var(--fx-out, scale(.96)); pointer-events: none; }
.fx-on:not(.s1) .fx-x1, .fx-on:not(.s2) .fx-x2, .fx-on:not(.s3) .fx-x3, .fx-on:not(.s4) .fx-x4, .fx-on:not(.s5) .fx-x5, .fx-on:not(.s6) .fx-x6, .fx-on:not(.s7) .fx-x7, .fx-on:not(.s8) .fx-x8 { opacity: 1; transform: none; pointer-events: auto; }
.fx-stage.fx-on:not(.s1) .fx-s1, .fx-stage.fx-on:not(.s2) .fx-s2, .fx-stage.fx-on:not(.s3) .fx-s3, .fx-stage.fx-on:not(.s4) .fx-s4, .fx-stage.fx-on:not(.s5) .fx-s5, .fx-stage.fx-on:not(.s6) .fx-s6, .fx-stage.fx-on:not(.s7) .fx-s7, .fx-stage.fx-on:not(.s8) .fx-s8 { opacity: 0; transform: var(--fx-in, translateY(12px) scale(.97)); pointer-events: none; }
.fx-stack { display: grid; }
.fx-stack > * { grid-area: 1 / 1; }

/* ends: plan tiles and the door to the sister page */
.fx-end .fx-head { margin-bottom: 40px; }
.fx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; border-radius: 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); color: rgba(226, 232, 255, .78); transition: transform .4s var(--fx-ease), border-color .3s, background-color .3s; }
.fx-plan:hover { transform: translateY(-3px); border-color: rgba(165, 180, 252, .4); background: rgba(255, 255, 255, .06); }
.fx-plan.is-pro { background: linear-gradient(160deg, rgba(79, 70, 229, .34), rgba(14, 165, 233, .12)); border-color: rgba(165, 180, 252, .36); }
.fx-plan h3 { font-size: 22px; margin: 0; }
.fx-plan .fx-badge { position: absolute; top: 22px; right: 20px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 Inter, sans-serif; letter-spacing: .04em; color: #0B1022; background: linear-gradient(95deg, #C7D2FE, #67E8F9); }
.fx-price { font: 600 34px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: #fff; }
.fx-price small { font: 500 14px/1 Inter, sans-serif; letter-spacing: 0; color: rgba(226, 232, 255, .66); margin-left: 4px; }
.fx-plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.fx-plan li { position: relative; padding-left: 22px; }
.fx-plan li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--fx-cyan); border-bottom: 2px solid var(--fx-cyan); transform: rotate(-45deg); }
.fx-plan .fx-fine { font-size: 13px; line-height: 1.5; color: rgba(226, 232, 255, .56); }
.fx-plan .btn { margin-top: auto; justify-content: center; }
.fx-plans-note { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: rgba(226, 232, 255, .62); }
.fx-door { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 40px; padding: 28px 30px; border-radius: 26px; background: linear-gradient(120deg, rgba(79, 70, 229, .22), rgba(34, 211, 238, .08)); border: 1px solid rgba(165, 180, 252, .24); color: #fff; text-decoration: none; transition: border-color .3s, transform .4s var(--fx-ease); }
.fx-door:hover { border-color: rgba(165, 180, 252, .5); transform: translateY(-2px); }
.fx-door h3 { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; }
.fx-door h3 svg { width: 22px; height: 22px; transition: transform .3s var(--fx-ease); }
.fx-door:hover h3 svg { transform: translateX(4px); }
.fx-door p { margin: 6px 0 0; color: rgba(226, 232, 255, .72); font-size: 15.5px; }
.fx-door-art { width: 220px; height: 90px; position: relative; }
.fx-all { display: block; width: max-content; margin: 26px auto 0; color: var(--fx-ice); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(199, 210, 254, .4); }
.fx-all:hover { color: #fff; }
@media (max-width: 900px) { .fx-plans { grid-template-columns: 1fr; } .fx-door { grid-template-columns: 1fr; } .fx-door-art { display: none; } }

.t-feature .cp-faq { margin-top: 0; }
.fx-help { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fx-help a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #EEF0FF; color: #3730A3; font-weight: 600; font-size: 15px; }
.fx-help a svg { width: 16px; height: 16px; }
.fx-help a:hover { background: #E0E7FF; }

/* the loops: paused unless on screen */
.fx-loop { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) { [data-fx-run="1"] .fx-loop { animation-play-state: running !important; } }
@media (prefers-reduced-motion: reduce) { .fx-loop { animation: none !important; } }
/* <<< fx shared */



/* >>> fx-kurse, Online Kurse ========================================================================= */
/* hero: the stack of lesson cards, a beam, the link chip */
.ku-scene { perspective: 1400px; }
.ku-plinth { position: absolute; left: 50%; top: 64%; width: 460px; height: 170px; margin-left: -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(99, 102, 241, .55), rgba(99, 102, 241, 0)); filter: blur(6px); }
.ku-stack { position: absolute; left: 50%; top: 52%; width: 340px; height: 0; margin-left: -170px; transform: rotateX(54deg) rotateZ(-32deg); transform-style: preserve-3d; }
.ku-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: ku-float 8s ease-in-out infinite; }
@keyframes ku-float { 50% { transform: translateZ(10px); } }
.ku-card { position: absolute; left: 0; width: 340px; height: 78px; margin-top: -39px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 30px -12px rgba(2, 6, 23, .6); display: flex; align-items: center; gap: 12px; padding: 0 18px; color: #0B1022; transform: translateZ(calc(var(--i) * 46px)); }
.ku-card b { font: 600 15px/1.2 Outfit, Inter, sans-serif; }
.ku-card small { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: #64748B; }
.ku-card .ku-dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #EEF0FF; color: var(--fx-indigo); flex: none; }
.ku-card .ku-dot svg { width: 18px; height: 18px; }
.ku-card.is-cover { background: linear-gradient(120deg, #4F46E5, #2563EB 55%, #06B6D4); color: #fff; }
.ku-card.is-cover .ku-dot { background: rgba(255, 255, 255, .18); color: #fff; }
.ku-card.is-cover small { color: rgba(255, 255, 255, .8); letter-spacing: .14em; }
.ku-beam { position: absolute; left: 50%; top: 13%; width: 2px; height: 36%; margin-left: -1px; background: linear-gradient(180deg, rgba(34, 211, 238, 0), var(--fx-cyan)); transform-origin: bottom; }
.ku-chip { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(165, 180, 252, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #E0E7FF; font: 500 13px/1.2 Inter, sans-serif; white-space: nowrap; box-shadow: 0 12px 30px -12px rgba(34, 211, 238, .45); }
.ku-chip svg { width: 15px; height: 15px; color: var(--fx-cyan); flex: none; }
.ku-sale { position: absolute; left: 50%; top: 42%; margin-left: 178px; padding: 5px 10px; border-radius: 999px; background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .45); color: #A7F3D0; font: 600 12.5px/1 Inter, sans-serif; opacity: 0; animation: ku-sale 2.6s var(--fx-ease) infinite; }
.ku-sale + .ku-sale { animation-delay: 1.3s; }
@keyframes ku-sale { 0% { opacity: 0; transform: translateY(0) scale(.9); } 18% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-64px) scale(.9); } }
.fx-anim .ku-card { animation: ku-rise .9s var(--fx-spring) both; animation-delay: calc(.35s + var(--i) * .12s); }
@keyframes ku-rise { from { transform: translateZ(0); opacity: .4; } }
.fx-anim .ku-beam { animation: ku-beam .7s var(--fx-ease) .9s both; }
@keyframes ku-beam { from { transform: scaleY(0); } }
.fx-anim .ku-chip { animation: ku-pop .5s var(--fx-spring) 1.3s both; }
@keyframes ku-pop { from { opacity: 0; transform: translateX(-50%) scale(.85); } }
@media (max-width: 1023px) { .ku-stack, .ku-plinth { scale: .78; } .ku-stack { top: 58%; } .ku-sale { margin-left: 136px; top: 50%; } }
@media (max-width: 560px) { .ku-stack, .ku-plinth { scale: .6; } .ku-chip { font-size: 11px; padding: 8px 10px; } .ku-stack { top: 60%; } .ku-sale { margin-left: 104px; top: 54%; } }

/* the film stage */
.ku-film .fx-stage { height: min(600px, calc(100vh - 140px)); min-height: 520px; }
.ku-cv { position: absolute; inset: 0; font-size: clamp(9px, 2.35cqi, 17px); }
.ku-shot { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 1.6em; }
.ku-card2 { width: 30em; max-width: 100%; border-radius: 1.5em; background: #fff; color: #0B1022; padding: 1.4em 1.5em; box-shadow: 0 2.5em 5em -2em rgba(0, 0, 0, .6); }
.ku-row { display: flex; align-items: center; gap: .7em; }
.ku-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; font: 600 1.15em/1.2 Outfit, Inter, sans-serif; }
.ku-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-bottom: 1em; }
.ku-kind { padding: .7em .6em; border-radius: .9em; border: 1px solid #E6E8F0; font: 600 .9em/1.2 Inter, sans-serif; text-align: center; }
.ku-kind small { display: block; font-weight: 500; font-size: .82em; color: #64748B; margin-top: .25em; }
.ku-kind.is-on { border-color: var(--fx-indigo); box-shadow: 0 0 0 .18em rgba(79, 70, 229, .18); }
.ku-f { margin-top: .7em; }
.ku-f label, .ku-f > span { display: block; font: 600 .75em/1.2 Inter, sans-serif; color: #64748B; margin-bottom: .3em; letter-spacing: .02em; }
.ku-in { padding: .6em .8em; border-radius: .7em; background: #F6F7FB; border: 1px solid #E6E8F0; font: 500 .95em/1.3 Inter, sans-serif; white-space: nowrap; overflow: hidden; }
.ku-cover { height: 4.4em; border-radius: .9em; background: linear-gradient(120deg, #4F46E5, #2563EB 55%, #06B6D4); display: flex; align-items: flex-end; padding: .7em .9em; color: #fff; font: 600 .95em/1 Outfit, Inter, sans-serif; }
.ku-price { display: flex; align-items: baseline; gap: .6em; margin-top: .8em; }
.ku-price b { font: 600 1.7em/1 Outfit, Inter, sans-serif; }
.ku-price span { font-size: .8em; color: #64748B; }
.ku-lessons { display: grid; gap: .55em; }
.ku-les { display: grid; grid-template-columns: 1.9em 1fr auto; align-items: center; gap: .7em; padding: .65em .8em; border-radius: .9em; border: 1px solid #E6E8F0; background: #fff; }
.ku-les .ku-n { width: 1.9em; height: 1.9em; border-radius: .6em; display: grid; place-items: center; background: #EEF0FF; color: var(--fx-indigo); font: 600 .8em/1 Inter, sans-serif; }
.ku-les b { font: 600 .92em/1.25 Inter, sans-serif; }
.ku-les small { display: block; font-size: .76em; color: #64748B; margin-top: .15em; }
.ku-tag { display: inline-flex; align-items: center; gap: .3em; padding: .25em .6em; border-radius: 999px; font: 600 .72em/1.2 Inter, sans-serif; background: #EEF0FF; color: #3730A3; white-space: nowrap; }
.ku-tag.is-ok { background: #D1FAE5; color: #047857; }
.ku-tag.is-lock { background: #F1F5F9; color: #475569; }
.ku-tag svg { width: 1em; height: 1em; }
.ku-nudge { display: block; margin-top: .7em; padding: .6em .8em; border-radius: .8em; background: #FEF3C7; color: #78350F; font-size: .8em; line-height: 1.4; }
.ku-grey { margin-top: .7em; font-size: .76em; line-height: 1.45; color: #64748B; }
.ku-toast { position: absolute; top: 1.4em; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: .9em; background: #0B1022; color: #fff; font: 500 .85em/1.3 Inter, sans-serif; box-shadow: 0 1.2em 2.4em -1em rgba(0, 0, 0, .6); border: 1px solid rgba(165, 180, 252, .25); white-space: nowrap; z-index: 3; }
.ku-toast svg { width: 1.1em; height: 1.1em; color: var(--fx-money); }
.ku-pub { width: 34em; max-width: 100%; }
.ku-pub .fx-bar { font-size: .78em; }
.ku-page { padding: 1.1em 1.3em 1.2em; }
.ku-page .ku-cover { height: 5.2em; }
.ku-meta { margin: .8em 0 .2em; font: 600 .7em/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-indigo); }
.ku-title { font: 600 1.35em/1.15 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.ku-by { font-size: .78em; color: #64748B; margin-top: .3em; }
.ku-inside { display: flex; align-items: center; justify-content: space-between; margin: .9em 0 .5em; font: 600 .85em/1.2 Inter, sans-serif; }
.ku-inside span { font-weight: 500; font-size: .9em; color: #64748B; }
.ku-copy { position: absolute; right: 1.3em; top: 3.4em; }
.ku-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; width: 100%; max-width: 44em; align-items: center; }
.ku-pay { border-radius: 1.3em; background: #fff; color: #0B1022; padding: 1.2em; box-shadow: 0 2em 4em -2em rgba(0, 0, 0, .6); }
.ku-pay .ku-h { margin-bottom: .6em; }
.ku-consent { display: flex; gap: .6em; margin-top: .8em; font-size: .72em; line-height: 1.4; color: #475569; }
.ku-tick { width: 1.5em; height: 1.5em; flex: none; border-radius: .4em; background: var(--fx-indigo); display: grid; place-items: center; color: #fff; }
.ku-tick svg { width: 1em; height: 1em; }
.ku-btn { margin-top: .9em; padding: .75em; border-radius: .8em; background: #0B1022; color: #fff; text-align: center; font: 600 .88em/1.2 Inter, sans-serif; }
.ku-phone { width: 17em; justify-self: center; border-radius: 2.4em; padding: .7em; background: #0E1330; border: 1px solid rgba(165, 180, 252, .22); box-shadow: 0 2.4em 5em -2em rgba(0, 0, 0, .7), inset 0 0 0 .35em #060818; }
.ku-scr { border-radius: 1.8em; background: linear-gradient(180deg, #121A3E, #0B1022); padding: 1.2em .9em 1em; min-height: 26em; color: #E0E7FF; }
.ku-scr .ku-h { font-size: 1em; color: #fff; }
.ku-notes { display: grid; gap: .5em; }
.ku-note { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .9em; background: rgba(255, 255, 255, .06); border: 1px solid rgba(165, 180, 252, .14); font-size: .78em; }
.ku-note i { width: 2.2em; height: 2.2em; border-radius: .7em; display: grid; place-items: center; background: rgba(99, 102, 241, .3); color: #C7D2FE; font-style: normal; }
.ku-note i svg { width: 1.2em; height: 1.2em; }
.ku-note b { display: block; color: #fff; font-weight: 600; }
.ku-note em { font-style: normal; color: #A7F3D0; font-weight: 600; white-space: nowrap; }
.ku-kpi { margin-top: .9em; padding: .9em; border-radius: 1em; background: rgba(99, 102, 241, .16); border: 1px solid rgba(165, 180, 252, .22); }
.ku-kpi span { font-size: .72em; color: #A5B4FC; letter-spacing: .04em; }
.ku-kpi b.fx-stack { display: grid; }
.ku-kpi b { display: block; font: 600 1.7em/1.1 Outfit, Inter, sans-serif; color: #fff; }
.ku-kpi small { font-size: .7em; color: rgba(224, 231, 255, .7); }
.ku-fee { width: 30em; max-width: 100%; border-radius: 1.5em; padding: 1.4em; background: linear-gradient(160deg, #141B45, #0B1022); border: 1px solid rgba(165, 180, 252, .24); color: #E0E7FF; box-shadow: 0 2.4em 5em -2em rgba(0, 0, 0, .7); position: relative; }
.ku-fee-big { font: 600 1.25em/1.3 Outfit, Inter, sans-serif; color: #fff; }
.ku-fee-big .fx-stack { display: inline-grid; color: var(--fx-cyan); }
.ku-track { position: relative; height: .6em; margin: 1em 0 .5em; border-radius: 1em; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ku-track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--fx-blue), var(--fx-cyan)); transform-origin: left; }
.ku-fee p { margin: 0; font-size: .82em; line-height: 1.45; color: rgba(224, 231, 255, .78); }
.ku-anno { position: absolute; right: -.4em; top: -2.6em; display: flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: .8em; border: 1px dashed rgba(34, 211, 238, .7); color: #A5F3FC; font: 600 .78em/1.2 Inter, sans-serif; background: rgba(8, 47, 73, .5); }
.ku-anno svg { width: 1.1em; height: 1.1em; }
.ku-mini { display: flex; align-items: flex-end; gap: .3em; height: 4.2em; margin-top: 1.1em; }
.ku-mini i { flex: 1; border-radius: .4em .4em 0 0; background: linear-gradient(180deg, rgba(129, 140, 248, .8), rgba(79, 70, 229, .3)); height: calc(var(--h) * 1%); transform-origin: bottom; }
.ku-mini i.is-on { background: linear-gradient(180deg, var(--fx-cyan), rgba(34, 211, 238, .3)); }
@media (max-width: 1023px) { .ku-film .fx-stage { height: 470px; min-height: 0; } }
@media (max-width: 560px) { .ku-film .fx-stage { height: 440px; } .ku-cv { font-size: clamp(9px, 2.9cqi, 13px); } .ku-shot { padding: 1em; } .ku-split { grid-template-columns: 1fr; gap: .8em; } .ku-split .ku-pay { display: none; } }
.ku-t { display: inline-block; }
.fx-anim .fx-on .ku-type.fx-b { transition: clip-path 1.1s steps(18) var(--d, 0s), opacity .1s linear var(--d, 0s); clip-path: inset(0 0 0 0); }
.fx-on:not(.s1) .ku-type.fx-s1 { clip-path: inset(0 100% 0 0); }

/* #probieren: the configurator and the buyer's page */
.ku-tool { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 36px; align-items: start; }
.ku-set { display: grid; gap: 22px; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .3); }
.ku-kpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ku-kpick button { min-height: 64px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; font: 600 15px/1.2 Inter, sans-serif; color: var(--fx-ink); transition: border-color .25s, box-shadow .25s; }
.ku-kpick button small { display: block; margin-top: 4px; font-weight: 500; font-size: 12.5px; line-height: 1.3; color: var(--fx-dim); }
.ku-kpick button[aria-pressed="true"] { border-color: var(--fx-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .16); }
.ku-text { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #D5D9E6; font: 500 16px/1 Inter, sans-serif; color: var(--fx-ink); background: #F8F9FC; }
.ku-text:focus { outline: 2px solid var(--fx-indigo); outline-offset: 1px; background: #fff; }
.ku-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fx-dim); }
.ku-step { display: inline-flex; align-items: center; gap: 6px; }
.ku-step button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 600 20px/1 Inter, sans-serif; color: var(--fx-ink); cursor: pointer; }
.ku-step button:disabled { opacity: .4; cursor: default; }
.ku-step output { min-width: 110px; text-align: center; font: 600 22px/1 Outfit, Inter, sans-serif; }
.ku-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ku-out { display: block; margin: 0; padding: 14px 16px; border-radius: 14px; background: #F0FDF4; color: #065F46; font-size: 15px; line-height: 1.5; }
.ku-view { position: relative; margin: 0; min-width: 0; }
.ku-view .fx-browser { font-size: 15px; }
.ku-bp { padding: 22px 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; }
.ku-bp ol.ku-lessons { list-style: none; margin: 0; padding: 0; }
.ku-bp .ku-les b { font-size: 14px; }
.ku-bp .ku-inside { display: block; }
.ku-bp .ku-inside span { display: block; margin-top: 2px; }
.ku-bp .ku-cover { grid-column: 1 / -1; height: 110px; font-size: 20px; border-radius: 16px; }
.ku-bp .ku-title { font-size: 26px; }
.ku-bp .ku-one { margin: 6px 0 0; font-size: 15px; color: var(--fx-dim); line-height: 1.45; }
.ku-bp .ku-les { font-size: 15px; transition: transform .45s var(--fx-ease), opacity .3s; }
.ku-read { font-size: 13.5px; color: var(--fx-dim); margin: 0 0 10px; }
.ku-box { border-radius: 16px; border: 1px solid var(--line); padding: 16px; align-self: start; display: grid; gap: 8px; }
.ku-box b.ku-amt { font: 600 28px/1 Outfit, Inter, sans-serif; }
.ku-box small { font-size: 12.5px; line-height: 1.45; color: var(--fx-dim); }
.ku-box .ku-btn { font-size: 14px; margin-top: 4px; }
.ku-box .ku-fields { display: grid; gap: 6px; }
.ku-box .ku-fields span { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #F8F9FC; font-size: 12.5px; color: #94A3B8; padding: 8px 10px; }
.ku-box .ku-consent { font-size: 11.5px; margin-top: 2px; }
.ku-box .ku-consent .ku-tick { background: #fff; border: 1.5px solid #94A3B8; width: 16px; height: 16px; }
.ku-sw { display: none; }
@media (max-width: 1023px) { .ku-tool { grid-template-columns: 1fr; } .ku-bp { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ku-set { padding: 20px; } .ku-kpick button small { display: none; } .ku-bp { padding: 16px; } .ku-bp .ku-title { font-size: 22px; } }

/* #kaeufer: the buyer's four steps */
.ku-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.ku-path::before { content: ""; position: absolute; left: 12%; right: 12%; top: 150px; height: 2px; background: linear-gradient(90deg, #C7D2FE, #67E8F9); transform-origin: left; }
.ku-path li { position: relative; display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; }
.ku-mph { position: relative; width: 168px; height: 300px; border-radius: 28px; padding: 8px; background: #0B1022; box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .5); }
.ku-mph > div { height: 100%; border-radius: 21px; background: #fff; padding: 16px 12px; display: grid; align-content: start; gap: 8px; text-align: left; font-size: 11.5px; line-height: 1.35; color: #334155; overflow: hidden; }
.ku-mph b { font: 600 13px/1.25 Outfit, Inter, sans-serif; color: #0B1022; }
.ku-mph > div { grid-template-columns: minmax(0, 1fr); }
.ku-mph .ku-tag { white-space: normal; justify-self: start; line-height: 1.3; }
.ku-mph i { display: block; height: 7px; border-radius: 4px; background: #E8EBF3; font-style: normal; }
.ku-mph i.s { width: 60%; }
.ku-mph .ku-btn { font-size: 11px; padding: 8px; margin: 0; }
.ku-mph .ku-fld { height: 24px; border-radius: 6px; border: 1px solid #E2E8F0; background: #F8FAFC; padding: 4px 7px; color: #94A3B8; font-size: 10.5px; }
.ku-path h3 { font-size: 17px; margin: 4px 0 0; }
.ku-path p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fx-dim); max-width: 250px; }
.ku-path .ku-num { position: absolute; top: 139px; left: 50%; margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--fx-indigo); color: #fff; font: 600 12px/24px Inter, sans-serif; text-align: center; z-index: 1; box-shadow: 0 0 0 5px var(--fx-mist); display: none; }
.ku-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.ku-after > div { display: flex; gap: 14px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--fx-dim); }
.ku-after b { display: block; color: var(--fx-ink); font-size: 15.5px; margin-bottom: 2px; }
.ku-after svg { width: 22px; height: 22px; flex: none; color: var(--fx-indigo); margin-top: 2px; }
.ku-small { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--fx-dim); }
.fx-anim .ku-path.is-in::before { animation: ku-draw 1.4s var(--fx-ease) both; }
@keyframes ku-draw { from { transform: scaleX(0); } }
.ku-mph.fx-loop { animation: ku-lift 12s var(--fx-ease) infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes ku-lift { 0%, 25%, 100% { transform: none; } 8%, 17% { transform: translateY(-8px); } }
@media (max-width: 1023px) {
  .ku-path { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 4px 14px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .ku-path::-webkit-scrollbar { display: none; }
  .ku-path::before { display: none; }
  .ku-path li { flex: 0 0 min(78%, 280px); scroll-snap-align: center; }
  .ku-after { grid-template-columns: 1fr; }
}

/* #gebuehr: the staircase */
.ku-stair { position: relative; max-width: 1000px; margin: 0 auto; }
.ku-stair svg { display: block; width: 100%; height: auto; overflow: visible; }
.ku-stair .st-step { transition: transform .6s var(--fx-spring); transform: translateY(calc(var(--off, 0) * 1px)); }
.ku-stair .st-top { stroke: #818CF8; stroke-width: 3; fill: none; }
.ku-stair .st-body { fill: url(#kuStepFill); }
.ku-stair .st-pct { font: 600 30px/1 Outfit, Inter, sans-serif; fill: #fff; text-anchor: middle; }
.ku-stair .st-rev { font: 500 16px/1 Inter, sans-serif; fill: rgba(226, 232, 255, .7); text-anchor: middle; }
.ku-stair .st-lock { font: 600 13px/1 Inter, sans-serif; fill: #67E8F9; text-anchor: middle; opacity: 0; transition: opacity .3s; }
.ku-stair .st-floor { stroke: var(--fx-cyan); stroke-width: 2; stroke-dasharray: 6 8; }
.ku-stair .st-floor-t { font: 600 15px/1 Inter, sans-serif; fill: #67E8F9; paint-order: stroke; stroke: #0B1022; stroke-width: 8px; stroke-linejoin: round; }
.ku-stair .is-cur .st-top { stroke: var(--fx-cyan); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .8)); }
.ku-stair .is-cur .st-body { fill: url(#kuStepCur); }
.ku-stair .is-past .st-lock { opacity: 1; }
.ku-stair .is-past .st-body { opacity: .55; }
.fx-anim .ku-stair.is-in .st-top { stroke-dasharray: 400; animation: ku-dash 1.2s var(--fx-ease) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes ku-dash { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.ku-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; max-width: 1000px; margin: 34px auto 0; }
.ku-ctl output.fx-val { font: 600 15px/1 Inter, sans-serif; color: #fff; }
.ku-ctl .fx-chips { display: flex; gap: 6px; }
.fx-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fx-line); background: rgba(255, 255, 255, .04); color: rgba(226, 232, 255, .8); font: 600 14px/1 Inter, sans-serif; cursor: pointer; }
.fx-chips button[aria-pressed="true"] { background: #fff; color: var(--fx-ink); border-color: #fff; }
.ku-read2 { max-width: 1000px; margin: 26px auto 0; padding: 22px 26px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid var(--fx-line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 26px; align-items: center; }
.ku-read2 .ku-rate { grid-row: 1 / span 2; font: 600 clamp(40px, 5vw, 60px)/1 Outfit, Inter, sans-serif; color: #fff; letter-spacing: -.03em; }
.ku-read2 .ku-rate small { display: block; font: 600 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-peri); margin-bottom: 8px; }
.ku-read2 p { margin: 0; color: rgba(226, 232, 255, .8); font-size: 16px; line-height: 1.5; }
.ku-read2 p b { color: #fff; }
.ku-notes3 { max-width: 1000px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ku-notes3 p { margin: 0; display: flex; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--fx-line); font-size: 14px; line-height: 1.5; color: rgba(226, 232, 255, .74); }
.ku-notes3 svg { width: 18px; height: 18px; flex: none; color: var(--fx-cyan); margin-top: 1px; }
.fx-table { max-width: 1000px; margin: 18px auto 0; }
.fx-table summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--fx-ice); font-weight: 600; }
.fx-table summary::marker { color: var(--fx-cyan); }
.fx-dark .fx-table .pr-ladder, .fx-dark .fx-table table { color: var(--fx-ink); }
.ku-last { font-size: 14px; color: rgba(226, 232, 255, .62); max-width: 1000px; margin: 10px auto 0; }
@media (max-width: 860px) {
  .ku-ctl { grid-template-columns: 1fr; }
  .ku-notes3 { grid-template-columns: 1fr; }
  .ku-read2 { grid-template-columns: 1fr; }
  .ku-read2 .ku-rate { grid-row: auto; }
  .ku-stair .st-pct { font-size: 44px; } .ku-stair .st-rev { font-size: 24px; } .ku-stair .st-lock, .ku-stair .st-floor-t { font-size: 22px; }
}

/* #abo: the renewal ring and the buyer card */
.ku-abo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ku-abo .fx-head, .bz-ava .fx-head { text-align: left; margin: 0 0 22px; }
.ku-buyer .fx-demo { justify-self: start; }
.ku-abo-txt p { font-size: 17px; line-height: 1.65; color: var(--fx-dim); margin: 0 0 14px; }
.ku-ring { position: relative; width: min(360px, 100%); aspect-ratio: 1; margin: 0 auto; }
.ku-ring svg { width: 100%; height: 100%; }
.ku-orb { transform-origin: 180px 180px; animation: ku-spin 12s linear infinite; }
@keyframes ku-spin { to { transform: rotate(360deg); } }
.ku-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ku-ring-c b { font: 600 40px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: var(--fx-ink); }
.ku-ring-c span { font-size: 13.5px; color: var(--fx-dim); margin-top: 6px; }
.ku-buyer { margin-top: 26px; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(15, 23, 42, .4); display: grid; gap: 12px; }
.ku-buyer p { margin: 0; font-size: 15px; line-height: 1.5; }
.ku-buyer .btn { justify-self: start; }
.ku-buyer small { font-size: 13px; color: var(--fx-dim); }
.fx-mini-t { margin-top: 14px; }
.fx-mini-t summary { cursor: pointer; font-weight: 600; color: #3730A3; min-height: 44px; display: flex; align-items: center; }
/* the disclosure toggles carry the same plus icon as the tiles, turned to a cross when open */
.fx-mini-t summary, .fx-table summary { gap: 10px; list-style: none; }
.fx-mini-t summary::-webkit-details-marker, .fx-table summary::-webkit-details-marker { display: none; }
.fx-mini-t summary::after, .fx-table summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EEF0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat; transition: transform .3s var(--fx-ease); }
.fx-table summary::after { background: rgba(165, 180, 252, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5F3FC' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fx-mini-t[open] summary::after, .fx-table[open] summary::after { transform: rotate(45deg); }
@media (max-width: 900px) { .ku-abo { grid-template-columns: 1fr; gap: 28px; } }

/* #weiter door art: a week strip */
.ku-week { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.ku-week i { height: 70%; border-radius: 10px; background: rgba(165, 180, 252, .14); border: 1px solid rgba(165, 180, 252, .2); position: relative; overflow: hidden; }
.ku-week i::after { content: ""; position: absolute; left: 4px; right: 4px; top: calc(var(--y) * 1%); height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--fx-blue), var(--fx-cyan)); animation: ku-slot 5s var(--fx-ease) infinite paused; animation-delay: calc(var(--i) * .5s); opacity: .25; }
@media (prefers-reduced-motion: no-preference) { [data-fx-run="1"] .ku-week i::after { animation-play-state: running; } }
@keyframes ku-slot { 0%, 100% { opacity: .25; } 20%, 40% { opacity: 1; } }
/* <<< fx-kurse */



/* >>> fx-buchung, Buchung und Zahlung ================================================================ */
/* hero: the week as a floor of light */
.bz-scene { perspective: 900px; }
.bz-floor { position: absolute; left: 50%; top: 50%; width: 560px; height: 420px; margin: -210px 0 0 -280px; transform: rotateX(58deg) rotateZ(-8deg); transform-origin: 50% 60%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 26px repeat(10, 1fr); gap: 5px; }
.bz-floor > b { font: 600 13px/26px Inter, sans-serif; color: rgba(199, 210, 254, .8); text-align: center; }
.bz-floor > i { border-radius: 6px; border: 1px solid rgba(165, 180, 252, .16); background: rgba(165, 180, 252, .03); }
.bz-floor > i.is-lit { background: linear-gradient(135deg, rgba(99, 102, 241, .9), rgba(59, 130, 246, .7)); border-color: rgba(165, 180, 252, .6); box-shadow: 0 0 18px rgba(99, 102, 241, .7); }
.bz-floor > i.is-paid { background: linear-gradient(135deg, rgba(52, 211, 153, .85), rgba(34, 211, 238, .7)); box-shadow: 0 0 18px rgba(52, 211, 153, .6); }
.bz-now { position: absolute; top: 26px; bottom: 0; left: 0; width: 3px; border-radius: 2px; background: var(--fx-cyan); box-shadow: 0 0 16px var(--fx-cyan); animation: bz-now 8s linear infinite; }
@keyframes bz-now { from { transform: translateX(0); } to { transform: translateX(557px); } }
.bz-glow { position: absolute; left: 10%; right: 10%; top: 18%; height: 30%; background: radial-gradient(closest-side, rgba(99, 102, 241, .35), transparent); filter: blur(10px); }
.bz-coin { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); animation-delay: calc(var(--dl, 0) * 1s) !important; position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #34D399, #22D3EE); color: #042F2E; font: 700 14px/1 Inter, sans-serif; opacity: 0; animation: bz-coin 3.6s var(--fx-ease) infinite; box-shadow: 0 0 20px rgba(52, 211, 153, .6); }
@keyframes bz-coin { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-10px) scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(.9); } }
.fx-anim .bz-floor { animation: bz-rise 1.3s var(--fx-ease) .3s both; }
@keyframes bz-rise { from { transform: rotateX(80deg) rotateZ(-8deg); opacity: 0; } }
.bz-lit { animation: bz-lit 8.1s var(--fx-ease) infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes bz-lit { 0% { opacity: .15; } 10%, 85% { opacity: 1; } 100% { opacity: .15; } }
@media (max-width: 1180px) { .bz-floor { scale: .8; } }
@media (max-width: 1023px) { .bz-floor { scale: .7; } }
@media (max-width: 560px) { .bz-floor { scale: .52; } }

/* #woche: the week film */
.bz-film .fx-stage { height: 620px; }
.bz-cv { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 13.5em; grid-template-rows: minmax(0, 1fr) auto; gap: 1em; padding: 1.2em; font-size: clamp(11px, 1.95cqi, 15px); }
.bz-grid { position: relative; display: grid; grid-template-columns: 2.4em repeat(7, minmax(0, 1fr)); grid-template-rows: 1.8em repeat(28, minmax(0, 1fr)); column-gap: .3em; border-radius: 1.1em; background: rgba(255, 255, 255, .03); border: 1px solid var(--fx-line); padding: .6em .6em .6em .3em; }
.bz-day { grid-column: var(--c); grid-row: 1; text-align: center; font: 600 .78em/1.8em Inter, sans-serif; color: rgba(199, 210, 254, .75); }
.bz-hr { grid-column: 1; grid-row: var(--r); font: 500 .66em/1 Inter, sans-serif; color: rgba(199, 210, 254, .45); align-self: start; text-align: right; padding-right: .3em; }
.bz-col { grid-row: 2 / -1; border-left: 1px dashed rgba(165, 180, 252, .1); }
.bz-band { grid-column: var(--c); grid-row: var(--r) / span var(--h); border-radius: .5em; background: rgba(99, 102, 241, .16); border: 1px solid rgba(129, 140, 248, .28); transform-origin: top; }
.bz-off { grid-column: var(--c); grid-row: var(--r) / span var(--h); border-radius: .5em; background: repeating-linear-gradient(135deg, rgba(251, 191, 36, .18) 0 .4em, transparent .4em .8em); border: 1px solid rgba(251, 191, 36, .4); display: grid; place-items: center; font: 600 .6em/1.1 Inter, sans-serif; color: #FDE68A; writing-mode: vertical-rl; transform: rotate(180deg); }
.bz-ev { grid-column: var(--c); grid-row: var(--r) / span var(--h); z-index: 1; margin: 0 .1em; border-radius: .45em; padding: .25em .4em; background: linear-gradient(135deg, #10B981, #0EA5E9); color: #fff; font: 600 .7em/1.15 Inter, sans-serif; overflow: hidden; box-shadow: 0 .4em 1em -.4em rgba(16, 185, 129, .8); }
.bz-ev.is-req { background: linear-gradient(135deg, #F59E0B, #F97316); box-shadow: 0 .4em 1em -.4em rgba(245, 158, 11, .8); }
.bz-ev.is-conf { background: linear-gradient(135deg, #6366F1, #3B82F6); }
.bz-ev.is-ghost { background: transparent; border: 1.5px dashed rgba(248, 113, 113, .8); color: #FCA5A5; box-shadow: none; }
.bz-ev.is-cred { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
.bz-ev small { display: block; font-weight: 500; opacity: .85; }
.bz-rail { grid-column: 2; grid-row: 1; position: relative; }
.bz-rail-h { font: 600 .72em/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-peri); margin-bottom: .7em; }
.bz-toasts { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .6em; align-content: start; }
.bz-t { grid-column: 1; grid-row: calc(var(--k, 0) + 1); align-self: start; padding: .65em .75em; border-radius: .9em; background: #fff; color: #0B1022; font-size: .74em; line-height: 1.35; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .6); }
.bz-t b { display: block; font-size: 1.02em; }
.bz-t small { color: #64748B; }
.bz-t .fx-pill { margin-top: .4em; font-size: .9em; padding: .2em .55em; white-space: normal; }
.bz-t .bz-acts { display: flex; gap: .4em; margin-top: .45em; }
.bz-t .bz-acts span { padding: .3em .6em; border-radius: .5em; background: #EEF0FF; color: #3730A3; font-weight: 600; font-size: .92em; }
.bz-t .bz-acts span.is-go { background: #0B1022; color: #fff; }
.bz-t.is-site { background: rgba(255, 255, 255, .07); color: #E0E7FF; border: 1px dashed rgba(165, 180, 252, .5); box-shadow: none; }
.bz-t.is-site small { color: rgba(224, 231, 255, .7); }
.bz-money { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; padding: .7em .9em; border-radius: 1em; background: rgba(255, 255, 255, .05); border: 1px solid var(--fx-line); color: #E0E7FF; font-size: .8em; }
.bz-money > b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85em; color: var(--fx-peri); margin-right: .4em; }
.bz-mp { display: inline-flex; align-items: center; gap: .5em; padding: .35em .75em; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.bz-mp .fx-stack { font-weight: 700; color: #fff; }
.bz-sum { grid-column: 1; grid-row: 1 / span 4; display: grid; align-content: start; gap: .7em; }
.bz-sum .fx-pill { white-space: normal; }
.bz-tile { padding: .9em 1em; border-radius: 1em; background: #fff; color: #0B1022; }
.bz-tile span { font-size: .72em; color: #64748B; }
.bz-tile b { display: block; font: 600 1.7em/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.bz-tile.is-net { background: linear-gradient(135deg, #4F46E5, #0EA5E9); color: #fff; }
.bz-tile.is-net span { color: rgba(255, 255, 255, .8); }
.bz-bank { font-size: .72em; line-height: 1.4; color: #E0E7FF; padding: .6em .8em; border-radius: .8em; border: 1px solid var(--fx-line); }
.fx-on.s7 .bz-grid { opacity: .35; transition: opacity .6s; }
/* a toast of the last day leaves at once, so it never shows through the next day's toasts */
.fx-on.s2 .bz-t.fx-x2, .fx-on.s3 .bz-t.fx-x3, .fx-on.s4 .bz-t.fx-x4, .fx-on.s5 .bz-t.fx-x5, .fx-on.s6 .bz-t.fx-x6, .fx-on.s7 .bz-t.fx-x7, .fx-on.s8 .bz-t.fx-x8 { transition-delay: 0s; transition-duration: .25s; }
@media (max-width: 1023px) { .bz-film .fx-stage { height: 640px; } .bz-cv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 12.5em auto; font-size: clamp(10px, 2.3cqi, 14px); } .bz-rail { grid-column: 1; grid-row: 2; overflow: clip; } .bz-money { grid-row: 3; } .bz-t { grid-row: 1; min-height: 8.4em; } .bz-t.is-site { background: #161C3F; } .bz-sum { grid-template-columns: 1fr 1fr; } .bz-sum .bz-bank, .bz-sum .fx-pill { grid-column: 1 / -1; } }
@media (max-width: 560px) { .bz-film .fx-stage { height: 600px; } .bz-cv { font-size: clamp(9.5px, 3cqi, 13px); padding: .8em; } .bz-ev { font-size: .55em; padding: .15em .25em; } .bz-ev small { display: none; } .bz-hr { font-size: .56em; } }

/* #probieren: athlete phone and coach window */
.bz-try-top { display: flex; justify-content: center; margin-bottom: 26px; }
.bz-try { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1080px; margin: 0 auto; }
.bz-phone { border-radius: 40px; padding: 10px; background: #0B1022; box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .6); }
.bz-scr { border-radius: 31px; background: #fff; padding: 20px 18px; min-height: 620px; display: grid; align-content: start; gap: 14px; font-size: 14.5px; }
.bz-coach { display: flex; align-items: center; gap: 10px; }
.bz-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #06B6D4); color: #fff; display: grid; place-items: center; font: 600 14px/1 Inter, sans-serif; flex: none; }
.bz-coach b { display: block; font-size: 15.5px; }
.bz-grp { display: grid; gap: 8px; }
.bz-grp > span { font: 600 12.5px/1.2 Inter, sans-serif; color: var(--fx-dim); }
.bz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-chips button { min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 13.5px/1 Inter, sans-serif; color: var(--fx-ink); cursor: pointer; }
.bz-chips button[aria-pressed="true"] { border-color: var(--fx-indigo); background: #EEF0FF; color: #3730A3; }
.bz-chips button:disabled { opacity: .45; cursor: default; }
.bz-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; line-height: 1.35; }
.bz-opt input { margin: 2px 0 0; accent-color: var(--fx-indigo); width: 18px; height: 18px; flex: none; }
.bz-opt:has(input:checked) { border-color: var(--fx-indigo); background: #F5F6FF; }
.bz-opt:has(input:disabled) { opacity: .55; cursor: default; }
.bz-opt small { display: block; color: var(--fx-dim); font-size: 12.5px; margin-top: 2px; }
.bz-pol { padding: 10px 12px; border-radius: 12px; background: #F8F9FC; font-size: 12.5px; line-height: 1.45; color: #475569; }
.bz-pol b { display: block; color: var(--fx-ink); font-size: 13px; }
.bz-cta { min-height: 48px; border-radius: 14px; border: 0; background: #0B1022; color: #fff; font: 600 15px/1.2 Inter, sans-serif; cursor: pointer; }
.bz-cta:disabled { opacity: .5; cursor: default; }
.bz-done { display: grid; gap: 10px; text-align: center; padding-top: 30px; }
.bz-done .bz-big { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #D1FAE5; color: #047857; }
.bz-done .bz-big svg { width: 30px; height: 30px; }
.bz-done h3 { font-size: 20px; margin: 0; }
.bz-done p { margin: 0; color: var(--fx-dim); font-size: 14px; line-height: 1.5; }
.bz-fields { display: grid; gap: 6px; }
.bz-fields span { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #F8F9FC; color: #64748B; font-size: 13.5px; }
.bz-side { display: grid; gap: 16px; }
.bz-cal { padding: 20px; display: grid; gap: 14px; min-height: 300px; align-content: start; }
.bz-cal-h { display: flex; align-items: center; justify-content: space-between; font: 600 16px/1.2 Outfit, Inter, sans-serif; }
.bz-slotrow { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.bz-slotrow > span { font: 600 13px/1 Inter, sans-serif; color: #64748B; text-align: right; }
.bz-cell { min-height: 58px; border-radius: 12px; border: 1.5px dashed #D5D9E6; display: flex; align-items: center; padding: 10px 14px; font-size: 14px; color: #94A3B8; transition: background-color .35s, border-color .35s, color .35s; }
.bz-cell.is-paid { border: 0; background: linear-gradient(135deg, #10B981, #0EA5E9); color: #fff; }
.bz-cell.is-req { border: 0; background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; }
.bz-cell.is-conf { border: 0; background: linear-gradient(135deg, #6366F1, #3B82F6); color: #fff; }
.bz-cell b { font-weight: 600; }
.bz-panel { border-radius: 14px; border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 10px; font-size: 14.5px; }
.bz-panel .bz-row { display: flex; justify-content: space-between; gap: 12px; }
.bz-panel .bz-row.is-tot { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.bz-panel .bz-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-panel .btn { min-height: 40px; }
.bz-slotnote { margin: 0; font-size: 14px; color: var(--fx-dim); }
.bz-slotnote b { color: var(--fx-ink); font-weight: 700; }
.bz-notif { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fx-dim); }
.bz-notif svg { width: 16px; height: 16px; color: var(--fx-indigo); }
.bz-live { margin: 0; font-size: 14px; color: var(--fx-dim); min-height: 1.5em; }
.bz-flash { animation: bz-flash .6s var(--fx-ease); }
@keyframes bz-flash { from { box-shadow: 0 0 0 4px rgba(99, 102, 241, .45); } }
.bz-table { margin-top: 18px; }
@media (max-width: 900px) { .bz-try { grid-template-columns: 1fr; } .bz-phone { max-width: 380px; margin: 0 auto; width: 100%; } .bz-scr { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .bz-flash { animation: none; } }

/* #geldwege: seven routes, one diagram */
.bz-routes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.bz-map { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.bz-map svg { width: 100%; height: auto; display: block; }
.bz-map .nd rect { fill: rgba(255, 255, 255, .05); stroke: rgba(165, 180, 252, .3); }
.bz-map .nd text { fill: #E0E7FF; font: 600 17px/1 Inter, sans-serif; }
.bz-map .nd .sub { fill: rgba(199, 210, 254, .66); font-weight: 500; font-size: 14px; }
.bz-map .nd.is-on rect { stroke: var(--fx-cyan); fill: rgba(34, 211, 238, .1); }
.bz-map .pt { fill: none; stroke: rgba(165, 180, 252, .22); stroke-width: 2; }
.bz-map .pt.is-cash { stroke-dasharray: 6 7; }
.bz-map .pt.is-on { stroke: var(--fx-cyan); stroke-width: 3; stroke-dasharray: 10 12; animation: bz-flow 1.2s linear infinite paused; }
@media (prefers-reduced-motion: no-preference) { .bz-map[data-fx-run="1"] .pt.is-on { animation-play-state: running; } }
.bz-map .pt.is-cash.is-on { stroke: var(--fx-money); }
@keyframes bz-flow { to { stroke-dashoffset: -22; } }
.bz-det { position: relative; min-height: 250px; }
.bz-rd { padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid var(--fx-line); }
.fx-js .bz-rd:not(.is-cur) { display: none; }
.bz-rd h3 { font-size: 22px; margin: 0 0 10px; }
.bz-rd p { margin: 0; color: rgba(226, 232, 255, .78); font-size: 15.5px; line-height: 1.6; }
.bz-rd .bz-fee { margin-top: 14px; display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(34, 211, 238, .08); color: #A5F3FC; font-size: 14px; line-height: 1.5; }
.bz-rd .bz-fee svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.no-js-list .bz-rd + .bz-rd { margin-top: 12px; }
.bz-line { margin: 26px auto 0; max-width: 760px; text-align: center; color: rgba(226, 232, 255, .72); font-size: 15.5px; }
.bz-connect { margin-top: 56px; padding: 30px; border-radius: 26px; background: rgba(255, 255, 255, .03); border: 1px solid var(--fx-line); }
.bz-connect h3 { font-size: 22px; margin: 0 0 20px; }
.bz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.bz-steps li { position: relative; padding-top: 46px; font-size: 14.5px; line-height: 1.5; color: rgba(226, 232, 255, .78); }
.bz-steps li b { display: block; color: #fff; font-size: 15.5px; margin-bottom: 2px; }
.bz-steps li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-indigo); color: #fff; font: 600 14px/32px Inter, sans-serif; text-align: center; }
.bz-steps li:last-child::before { background: #10B981; }
.bz-steps::before { content: ""; position: absolute; left: 32px; right: 20%; top: 15px; height: 2px; background: linear-gradient(90deg, var(--fx-indigo), #10B981); transform-origin: left; }
.fx-anim .bz-steps.is-in::before { animation: ku-draw 2.2s var(--fx-ease) both; }
.bz-connect .bz-nb { margin: 20px 0 0; font-size: 14.5px; color: rgba(226, 232, 255, .7); }
.bz-connect .bz-nb a { color: #A5F3FC; font-weight: 600; }
@media (max-width: 600px) { .bz-map svg { display: none; } }
@media (max-width: 900px) {
  .bz-map { grid-template-columns: 1fr; }
  .bz-routes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1) 20px; padding: 2px var(--gutter) 10px; scrollbar-width: none; }
  .bz-routes::-webkit-scrollbar { display: none; }
  .bz-routes button { flex: none; scroll-snap-align: start; }
  .bz-steps { grid-template-columns: 1fr; gap: 18px; }
  .bz-steps li { padding: 4px 0 0 48px; }
  .bz-steps::before { left: 15px; right: auto; top: 32px; bottom: 20px; width: 2px; height: auto; transform-origin: top; }
}

/* #rechnung: the receipt */
.bz-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; max-width: 1060px; margin: 0 auto; }
.bz-ctls { display: grid; gap: 22px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.bz-ctls .fx-val { font: 600 26px/1 Outfit, Inter, sans-serif; color: var(--fx-ink); }
.bz-rcpt { display: block; position: relative; padding: 28px 28px 30px; border-radius: 6px 6px 18px 18px; background: #fff; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35); font-variant-numeric: tabular-nums; }
.bz-rcpt::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 10px; background: radial-gradient(circle at 8px 0, transparent 7px, #fff 7.5px) 0 0 / 16px 10px repeat-x; }
.bz-rcpt h3 { margin: 0 0 16px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-dim); }
.bz-rl { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 15.5px; border-bottom: 1px dashed #E2E8F0; }
.bz-rl.is-grp { border: 0; padding-bottom: 2px; font: 600 12.5px/1.2 Inter, sans-serif; color: var(--fx-dim); letter-spacing: .04em; }
.bz-rl.is-keep { border: 0; padding-top: 18px; align-items: baseline; }
.bz-rl.is-keep b { font: 600 36px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: #047857; }
.bz-rcpt .bz-demo { position: absolute; top: 24px; right: 24px; }
.bz-plans3 { margin-top: 18px; display: grid; gap: 8px; }
.bz-p3 { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; }
.bz-p3.is-cur { border-color: var(--fx-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.bz-p3 b { font-weight: 700; }
.bz-p3 small { color: var(--fx-dim); font-size: 13px; }
.bz-p3 .num { font-weight: 700; font-size: 16px; }
.bz-be { margin: 22px auto 0; max-width: 1060px; padding: 18px 22px; border-radius: 18px; background: #EEF0FF; color: #312E81; font-size: 15.5px; line-height: 1.6; }
.bz-fine { max-width: 1060px; margin: 14px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--fx-dim); }
.bz-fine a { color: #3730A3; font-weight: 600; }
.fx-anim .bz-rcpt.is-print .bz-rl { animation: bz-print .45s var(--fx-ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes bz-print { from { opacity: 0; transform: translateY(-6px); } }
.fx-anim .bz-rcpt.is-feed { animation: bz-feed .3s var(--fx-ease); }
@keyframes bz-feed { from { transform: translateY(-10px); } }
@media (max-width: 900px) { .bz-calc { grid-template-columns: 1fr; } }

/* #absagen: a timeline with a labelled deadline zone, the controls, and the outcome as the hero of the section */
.bz-cx { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1080px; margin: 0 auto; }
.bz-cx-main { display: grid; gap: 26px; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35); }
.bz-tlw { display: grid; gap: 10px; padding: 18px 18px 14px; border-radius: 18px; background: #F8F9FC; }
.bz-tl { padding: 0 14px; overflow-x: clip; }
.bz-axis { position: relative; height: 82px; }
.bz-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #C7D2FE, #A5B4FC 52%, #E2E8F0 52%); }
.bz-win { position: absolute; left: 52%; width: 30%; top: 6px; height: 52px; border-radius: 14px 14px 10px 10px; background: linear-gradient(180deg, rgba(251, 191, 36, .32), rgba(251, 191, 36, .1)); border: 1px solid rgba(245, 158, 11, .5); }
.bz-win-t { position: absolute; left: 10px; top: 6px; font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #92400E; white-space: nowrap; }
.bz-past { position: absolute; left: 82%; right: 0; top: 38px; height: 8px; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(135deg, #CBD5E1 0 3px, transparent 3px 7px); }
.bz-tick { position: absolute; left: calc(var(--x) * 1%); top: 60px; transform: translateX(-50%); font: 600 12px/1.2 Inter, sans-serif; color: var(--fx-dim); white-space: nowrap; }
.bz-tick::before { content: ""; position: absolute; left: 50%; top: -18px; width: 2px; height: 12px; margin-left: -1px; border-radius: 2px; background: #94A3B8; }
.bz-tick.is-first { transform: none; }
.bz-tick.is-first::before { left: 0; margin-left: 0; }
.bz-tick.is-start { color: var(--fx-ink); }
.bz-tick.is-start::before { top: -26px; height: 20px; width: 3px; background: var(--fx-ink); }
.bz-pinw { position: absolute; left: 0; top: 30px; width: 100%; height: 24px; transform: translateX(calc(var(--p) * 1%)); transition: transform .45s var(--fx-ease); pointer-events: none; }
.bz-pinw i { position: absolute; left: -12px; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 4px solid #fff; background: #F59E0B; box-shadow: 0 0 0 5px rgba(245, 158, 11, .22), 0 6px 14px -4px rgba(15, 23, 42, .4); transition: background-color .3s, box-shadow .3s; }
.bz-cx[data-tone="green"] .bz-pinw i { background: #10B981; box-shadow: 0 0 0 5px rgba(16, 185, 129, .22), 0 6px 14px -4px rgba(15, 23, 42, .4); }
.bz-cx[data-tone="slate"] .bz-pinw i { background: #64748B; box-shadow: 0 0 0 5px rgba(100, 116, 139, .22), 0 6px 14px -4px rgba(15, 23, 42, .4); }
.bz-winlab { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: #92400E; }
.bz-winlab i { flex: none; width: 16px; height: 10px; margin-top: 4px; border-radius: 4px; background: rgba(251, 191, 36, .35); border: 1px solid rgba(245, 158, 11, .6); }
.bz-when > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.bz-cx .fx-val { font: 600 22px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--fx-ink); }
.bz-cx-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.bz-cx-res { display: grid; gap: 22px; }
.bz-out { position: relative; display: grid; gap: 10px; padding: 26px 26px 26px 84px; min-height: 150px; align-content: start; border-radius: 26px; border: 1px solid #A7F3D0; background: linear-gradient(160deg, #ECFDF5, #fff 70%); transition: background-color .3s, border-color .3s; }
.bz-out::before { content: ""; position: absolute; left: 26px; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bz-out.is-amber { border-color: #FDE68A; background: linear-gradient(160deg, #FFFBEB, #fff 70%); }
.bz-out.is-amber::before { background: #F59E0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bz-out.is-slate { border-color: #E2E8F0; background: linear-gradient(160deg, #F1F5F9, #fff 70%); }
.bz-out.is-slate::before { background: #64748B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bz-out b { font: 600 20px/1.25 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--fx-ink); }
.bz-out p { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; }
/* the coach's two taps in the app, shown as a path, not as buttons */
.bz-out .bz-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bz-out .bz-btns span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px dashed #CBD5E1; background: rgba(255, 255, 255, .7); color: #475569; font: 600 13px/1.2 Inter, sans-serif; cursor: default; }
.bz-out .bz-btns span + span::before { content: "›"; margin: 0 4px 0 -2px; color: #94A3B8; font-weight: 700; }
.bz-sw { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 15px/1.2 Inter, sans-serif; color: var(--fx-ink); }
.bz-sw i { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #CBD5E1; transition: background-color .25s; }
.bz-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--fx-spring); }
.bz-sw[aria-pressed="true"] i { background: var(--fx-indigo); }
.bz-sw[aria-pressed="true"] i::after { transform: translateX(18px); }
.bz-cx-side { display: grid; gap: 0; padding: 0 6px; }
.bz-cx-side p { margin: 0; padding: 14px 0; font-size: 15px; line-height: 1.6; color: var(--fx-dim); border-top: 1px solid var(--line); }
.bz-cx-side p:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 960px) { .bz-cx { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
@media (max-width: 560px) {
  .bz-cx-main { padding: 18px; gap: 22px; }
  .bz-tlw { padding: 14px 10px 12px; }
  .bz-tl { padding: 0 12px; }
  .bz-out { padding: 76px 20px 22px; }
  .bz-out::before { left: 20px; top: 20px; }
  .bz-cx-row .fx-ctl, .bz-cx-row .fx-seg { width: 100%; }
}

/* #ava */
.t-feature .fx-ava::before { background: radial-gradient(40% 60% at 20% 20%, rgba(99, 102, 241, .45), transparent 70%), radial-gradient(36% 50% at 85% 70%, rgba(219, 39, 119, .28), transparent 70%), radial-gradient(30% 40% at 60% 110%, rgba(34, 211, 238, .18), transparent 70%); }
.t-feature .fx-ava .grad { background-image: linear-gradient(95deg, #C7D2FE, #F0ABFC 55%, #67E8F9); }
.bz-ava { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.bz-ava-txt p { color: rgba(226, 232, 255, .78); font-size: 17px; line-height: 1.65; margin: 0; }
.bz-chat { position: relative; height: 460px; border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(240, 171, 252, .2); padding: 22px; overflow: clip; }
.bz-turn { position: absolute; inset: 22px; display: grid; align-content: start; gap: 12px; }
.bz-me { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--fx-indigo); color: #fff; font-size: 15px; }
.bz-dots { display: flex; gap: 4px; padding: 12px 14px; width: max-content; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.bz-dots i { width: 6px; height: 6px; border-radius: 50%; background: #C7D2FE; animation: bz-dot 1s ease-in-out infinite paused; }
@media (prefers-reduced-motion: no-preference) { [data-fx-run="1"] .bz-dots i { animation-play-state: running; } }
.bz-dots i:nth-child(2) { animation-delay: .15s; } .bz-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bz-dot { 50% { transform: translateY(-4px); opacity: .5; } }
.bz-card { max-width: 88%; padding: 16px; border-radius: 18px; background: #fff; color: #0B1022; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.bz-card .bz-ch { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 Outfit, Inter, sans-serif; }
.bz-card .bz-ch svg { width: 20px; height: 20px; color: var(--fx-indigo); }
.bz-card small { color: #64748B; }
.bz-card .bz-go { justify-self: start; padding: 8px 14px; border-radius: 10px; background: #0B1022; color: #fff; font-weight: 600; font-size: 13.5px; }
.bz-ok { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(52, 211, 153, .14); color: #A7F3D0; font-size: 14px; font-weight: 600; }
.bz-ok svg { width: 16px; height: 16px; }
.bz-turn.is-b { top: 50%; }
.bz-chat .fx-loop { animation: bz-chat 14s var(--fx-ease) infinite both; }
@keyframes bz-chat { 0% { opacity: 0; transform: translateY(10px); } 4%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .bz-chat[data-fx-run] .bz-a1 { animation-delay: 0s; } .bz-chat[data-fx-run] .bz-a2 { animation-delay: .6s; } .bz-chat[data-fx-run] .bz-a3 { animation-delay: 1.4s; } .bz-chat[data-fx-run] .bz-a4 { animation-delay: 2.8s; }
  .bz-chat[data-fx-run] .bz-b1 { animation-delay: 4.5s; } .bz-chat[data-fx-run] .bz-b2 { animation-delay: 5.1s; } .bz-chat[data-fx-run] .bz-b3 { animation-delay: 5.9s; } .bz-chat[data-fx-run] .bz-b4 { animation-delay: 7.3s; }
  .bz-chat[data-fx-run] .bz-dots { animation-name: bz-dotsin; }
}
@keyframes bz-dotsin { 0% { opacity: 0; } 2%, 5% { opacity: 1; } 6%, 100% { opacity: 0; } }
@media (max-width: 900px) { .bz-ava { grid-template-columns: 1fr; gap: 28px; } .bz-chat { height: 500px; } }

/* #grenzen: small tiles, not included and how it works today */
.bz-lim { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.bz-lim > div { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.bz-lim b { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--fx-ink); }
.bz-lim b::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #EEF0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bz-lim span { display: block; margin: 6px 0 0 26px; font-size: 14px; line-height: 1.5; color: var(--fx-dim); }
.bz-lim span::before { content: "→ "; color: var(--fx-indigo); font-weight: 700; }
.bz-lim a { color: #3730A3; font-weight: 600; }
.bz-more { margin-top: 12px; }
.bz-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-weight: 600; color: #3730A3; list-style: none; }
.bz-more summary::-webkit-details-marker { display: none; }
.bz-more summary::after { content: ""; flex: none; width: 24px; height: 24px; margin-right: -6px; border-radius: 50%; background: #EEF0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat; transition: transform .3s var(--fx-ease); }
.bz-more[open] summary::after { transform: rotate(45deg); }
.bz-more[open] summary { margin-bottom: 12px; }

/* #weiter door art: a fan of lessons */
.bz-fan { position: absolute; inset: 0; }
.bz-fan i { position: absolute; left: 40px; top: 20px; width: 150px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); transform: rotate(calc(var(--i) * -7deg + 10deg)) translateY(calc(var(--i) * 6px)); transform-origin: 0 100%; }
.bz-fan i:last-child { background: linear-gradient(120deg, #4F46E5, #06B6D4); }
/* <<< fx-buchung */



/* >>> fx-track, Training und Ernährung (athletes) ================================================== */
/* The athlete feature page (site/src/pages/training-und-ernaehrung.html). The same fx system, in the
   athlete light of the Ava page: violet into pink on the dark stage, food green, water blue, the
   fasting amber and the streak orange as the only signal colours. Motion: transform, opacity and
   stroke-dashoffset only; every loop runs while seen (fx-loop, data-fx-run) and the reader allows it. */
.fx-track {
  --fx-indigo: #5B5DF1; --fx-blue: #7C6CF6; --fx-peri: #C4B5FD; --fx-ice: #E4DDFE; --fx-cyan: #F472B6;
  --fx-line: rgba(196, 181, 253, .15); --fx-mist: #F6F4FF;
  --fx-grad-dark: linear-gradient(95deg, #A5B4FC 0%, #C4B5FD 45%, #F9A8D4 100%);
  --fx-grad-light: linear-gradient(95deg, #6366F1 0%, #8B5CF6 45%, #DB2777 100%);
  --tr-food: #34D399; --tr-water: #38BDF8; --tr-fast: #FBBF24; --tr-flame: #FB923C; --tr-train: #A78BFA;
  --tr-ok: #047857; --tr-ok-bg: #D1FAE5;
}
.fx-track .cp-head::before, .fx-track .fx-dark::before {
  background: radial-gradient(46% 62% at 10% 0%, rgba(124, 58, 237, .36), transparent 70%),
              radial-gradient(40% 50% at 94% 100%, rgba(219, 39, 119, .16), transparent 72%);
}
.fx-track .cp-head::after, .fx-track .fx-dark::after { background-image: radial-gradient(rgba(196, 181, 253, .09) 1.2px, transparent 1.2px); }
.fx-track .fx-knob, .fx-track .fx-seg:not(.is-live) button[aria-pressed="true"] { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .7); }
.fx-track .fx-cap[aria-current] .fx-cap-n { background: linear-gradient(135deg, #6366F1, #8B5CF6); border-color: transparent; }
.fx-track .fx-cap-bar i { background: linear-gradient(90deg, #818CF8, #F472B6); }
.fx-track .fx-demo { color: #6D28D9; background: #F3EEFF; border-color: #E4DAFE; }
.fx-track .fx-dark .fx-demo, .fx-track .cp-head .fx-demo { color: var(--fx-ice); background: rgba(196, 181, 253, .1); border-color: rgba(196, 181, 253, .24); }
.tr-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 Inter, sans-serif; white-space: nowrap; }
.tr-tag.is-free { color: #047857; background: #D1FAE5; }
.tr-tag.is-ai { color: #6D28D9; background: #F3EEFF; }
.tr-tag.is-prem { color: #fff; background: linear-gradient(95deg, #6366F1, #A855F7 55%, #DB2777); }
.fx-dark .tr-tag.is-free { color: #A7F3D0; background: rgba(52, 211, 153, .14); }
.fx-dark .tr-card .tr-tag.is-free, .fx-dark .tr-player .tr-tag.is-free { color: #047857; background: #D1FAE5; }
.tr-tag svg { width: 12px; height: 12px; }

/* hero: the day as rings, the entries around it */
.tr-rig { position: absolute; left: 50%; top: 50%; width: 540px; height: 460px; margin: -230px 0 0 -270px; }
.tr-halo { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .42), rgba(219, 39, 119, .12) 60%, transparent); filter: blur(8px); }
.tr-core { position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px 0 0 -135px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 70%); border: 1px solid rgba(196, 181, 253, .22); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); }
.tr-core svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); overflow: visible; }
.tr-core circle { fill: none; stroke-linecap: round; }
.tr-core .bg { stroke: rgba(255, 255, 255, .07); }
.tr-core .fg { stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to)); }
.tr-core .k { stroke: url(#trGradK); stroke-width: 8; }
.tr-core .p { stroke: var(--tr-food); stroke-width: 6; }
.tr-core .w { stroke: var(--tr-water); stroke-width: 6; }
.tr-core-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; color: #fff; }
.tr-core-t b { font: 600 34px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tr-core-t span { font: 500 12.5px/1.3 Inter, sans-serif; color: rgba(226, 232, 255, .7); }
.tr-core-t small { font: 600 11px/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-peri); }
.tr-fl { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.tr-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: #0B1022; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); white-space: nowrap; font: 500 12px/1.25 Inter, sans-serif; }
.tr-chip b { display: block; font: 600 14px/1.2 Inter, sans-serif; }
.tr-chip small { color: #64748B; font-size: 11.5px; }
.tr-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; }
.tr-ic svg { width: 18px; height: 18px; }
.tr-ic.is-food { background: #DCFCE7; color: #15803D; }
.tr-ic.is-train { background: #EDE9FE; color: #6D28D9; }
.tr-ic.is-water { background: #E0F2FE; color: #0369A1; }
.tr-ic.is-flame { background: #FFEDD5; color: #C2410C; }
.tr-ic.is-fast { background: #FEF3C7; color: #B45309; }
.tr-ok { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: var(--tr-ok-bg); color: var(--tr-ok); font: 700 9.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.tr-est { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: #F1F5F9; color: #475569; font: 700 9.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.tr-plus { position: absolute; left: 50%; top: 50%; padding: 6px 12px; border-radius: 999px; background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .5); color: #A7F3D0; font: 600 13px/1 Inter, sans-serif; white-space: nowrap; opacity: 0; }
.tr-bob { animation: tr-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s) !important; }
@keyframes tr-bob { 50% { transform: translateY(-8px); } }
.tr-plus.fx-loop { animation: tr-plus 5.4s var(--fx-ease) infinite; }
@keyframes tr-plus { 0% { opacity: 0; transform: translate(-50%, 120px) scale(.9); } 18% { opacity: 1; } 55% { opacity: 1; transform: translate(-50%, 40px) scale(1); } 75%, 100% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } }
.fx-anim .tr-core .fg { animation: tr-draw 1.6s var(--fx-ease) both; animation-delay: calc(.35s + var(--i, 0) * .18s); }
@keyframes tr-draw { from { stroke-dashoffset: 100; } }
.fx-anim .tr-core { animation: tr-in 1s var(--fx-ease) .1s both; }
@keyframes tr-in { from { opacity: 0; transform: scale(.9); } }
.fx-anim .tr-fl { animation: tr-pop .8s var(--fx-spring) both; animation-delay: calc(.8s + var(--i, 0) * .14s); }
@keyframes tr-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@media (max-width: 1180px) { .tr-rig { scale: .88; } }
@media (max-width: 1023px) { .tr-rig { scale: .7; } }
@media (max-width: 560px) { .tr-rig { scale: .54; } }
@media (max-width: 380px) { .tr-rig { scale: .5; } }

/* #tag: the film of one day. The phone (the day's diary and its ring) stays, the focus card changes
   per chapter; the ring and the numbers follow the chapter through the stage's s1..s6 classes. */
.tr-film .fx-stage { height: 600px; }
.tr-cv { position: absolute; inset: 0; display: grid; grid-template-columns: 17em minmax(0, 1fr); gap: 1.6em; align-items: center; padding: 1.6em 2em; font-size: clamp(10px, 2.05cqi, 16px); }
.tr-ph { position: relative; height: 34em; border-radius: 2.4em; padding: .55em; background: #05070F; box-shadow: 0 2.4em 4.4em -1.6em rgba(0, 0, 0, .8), 0 0 0 1px rgba(196, 181, 253, .18); }
.tr-scr { height: 100%; border-radius: 1.9em; background: #F7F7FB; color: #0B1022; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.tr-ph-top { display: flex; align-items: baseline; justify-content: space-between; padding: 1.1em 1.1em .3em; }
.tr-ph-top b { font: 600 1.3em/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.tr-ph-top span { font: 500 .72em/1 Inter, sans-serif; color: #64748B; }
.tr-sum { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: .8em; align-items: center; margin: .5em .8em; padding: .8em; border-radius: 1.2em; background: #fff; box-shadow: 0 .1em .3em rgba(15, 23, 42, .06); }
.tr-mring { position: relative; width: 6.2em; height: 6.2em; }
.tr-mring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-mring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.tr-mring .bg { stroke: #EEF0F6; }
.tr-mring .fg { stroke: url(#trGradK2); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to, 0)); transition: stroke-dashoffset 1s var(--fx-ease); }
.tr-mring .fx-stack { position: absolute; inset: 0; place-items: center; text-align: center; }
.tr-mring .fx-stack b { font: 600 1.05em/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-mring small { display: block; font: 500 .56em/1.2 Inter, sans-serif; color: #64748B; }
.tr-bal { display: grid; gap: .35em; font-size: .7em; }
.tr-bal > span { display: flex; justify-content: space-between; gap: .6em; color: #64748B; }
.tr-bal > span b { color: #0B1022; font-variant-numeric: tabular-nums; }
.tr-bal .fx-stack { justify-items: end; }
.tr-feed { list-style: none; margin: 0; padding: .2em .8em .8em; display: grid; align-content: start; gap: .45em; overflow: hidden; }
.tr-row { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .55em .6em; border-radius: 1em; background: #fff; box-shadow: 0 .1em .3em rgba(15, 23, 42, .06); font-size: .74em; line-height: 1.25; }
.tr-row .tr-ic { width: 2.3em; height: 2.3em; border-radius: .75em; }
.tr-row .tr-ic svg { width: 1.15em; height: 1.15em; }
.tr-row b { display: block; font-weight: 600; font-size: 1.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row small { display: block; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row > em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-row > em.is-burn { color: #6D28D9; }
.tr-focus { position: relative; height: 34em; }
.tr-fc { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1em; }
.tr-card { width: 26em; max-width: 100%; border-radius: 1.5em; background: #fff; color: #0B1022; padding: 1.3em 1.4em; box-shadow: 0 2.4em 4.4em -1.8em rgba(0, 0, 0, .75); display: grid; gap: .8em; }
.tr-card-k { display: flex; align-items: center; justify-content: space-between; gap: .8em; font: 600 .72em/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7C3AED; }
.tr-card-t { font: 600 1.25em/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; margin: 0; }
.tr-search { display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: .9em; background: #F4F5FA; border: 1px solid #E6E8F0; font-size: .92em; }
.tr-search svg { width: 1.1em; height: 1.1em; color: #64748B; flex: none; }
.tr-caret { display: inline-block; width: 2px; height: 1.1em; background: #7C3AED; vertical-align: middle; margin-left: 1px; }
.tr-res { display: grid; gap: .4em; }
.tr-re { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .8em; align-items: center; padding: .6em .8em; border-radius: .9em; border: 1px solid #E6E8F0; font-size: .86em; }
.tr-re b { font-weight: 600; }
.tr-re small { grid-column: 1; color: #64748B; }
.tr-re .tr-ok, .tr-re .tr-est { grid-column: 2; grid-row: 1 / span 2; }
.tr-re.is-pick { border-color: #8B5CF6; box-shadow: 0 0 0 .2em rgba(139, 92, 246, .16); }
.tr-amt { display: flex; align-items: center; justify-content: space-between; gap: .8em; font-size: .86em; }
.tr-amt span { display: inline-flex; align-items: center; gap: .5em; }
.tr-amt i { font-style: normal; display: inline-grid; place-items: center; min-width: 4.2em; padding: .35em .6em; border-radius: .6em; background: #F4F5FA; font-weight: 600; }
.tr-btn { justify-self: stretch; text-align: center; padding: .75em 1em; border-radius: .9em; background: #0B1022; color: #fff; font: 600 .9em/1.2 Inter, sans-serif; }
.tr-plate { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 1em; align-items: center; }
.tr-bowl { position: relative; width: 7.4em; height: 7.4em; border-radius: 50%; overflow: hidden; }
.tr-bowl svg { width: 100%; height: 100%; display: block; }
.tr-scanline { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(167, 139, 250, .55)); border-bottom: 2px solid #A78BFA; transform: translateY(-100%); opacity: 0; }
.fx-anim.s2:not(.s3) .tr-scanline { animation: tr-scan 1.8s var(--fx-ease) .3s 2 both; }
@keyframes tr-scan { 0% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(460%); opacity: 0; } }
.tr-items { display: grid; gap: .35em; }
.tr-it { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5em; align-items: center; font-size: .8em; }
.tr-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-it b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right; }
.tr-tot { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; padding-top: .6em; border-top: 1px solid #EEF0F6; font-size: .86em; color: #64748B; }
.tr-tot b { font: 600 1.5em/1 Outfit, Inter, sans-serif; color: #0B1022; }
.tr-mac { display: flex; flex-wrap: wrap; gap: .4em; font-size: .78em; }
.tr-mac span { padding: .3em .6em; border-radius: 999px; background: #F4F5FA; color: #334155; font-weight: 600; }
.tr-note { margin: 0; font-size: .76em; line-height: 1.45; color: #64748B; }
.tr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; width: 30em; max-width: 100%; }
.tr-duo .tr-card { width: auto; }
.tr-cups { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3em; }
.tr-cups i { height: 2.2em; border-radius: .35em .35em .6em .6em; background: #E0F2FE; border: 1px solid #BAE6FD; }
.tr-cups i.is-full { background: linear-gradient(180deg, #7DD3FC, #0EA5E9); border-color: #38BDF8; }
.tr-big .fx-stack { display: inline-grid; }
.tr-big { font: 600 1.7em/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tr-big small { font: 500 .45em/1 Inter, sans-serif; color: #64748B; letter-spacing: 0; margin-left: .2em; }
.tr-dial { position: relative; width: 6.4em; height: 6.4em; justify-self: center; }
.tr-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-dial circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.tr-dial .bg { stroke: #FEF3C7; }
.tr-dial .fg { stroke: #F59E0B; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to, 0)); }
.tr-green { color: #047857; font-weight: 600; }
.tr-push { width: 26em; max-width: 100%; display: flex; gap: .7em; align-items: center; padding: .8em 1em; border-radius: 1.1em; background: rgba(255, 255, 255, .92); color: #0B1022; box-shadow: 0 1.6em 3em -1.4em rgba(0, 0, 0, .7); font-size: .82em; line-height: 1.35; }
.tr-push img { width: 2.2em; height: 2.2em; border-radius: .6em; flex: none; }
.tr-push b { display: block; }
.tr-push small { color: #64748B; }
.tr-sets { display: grid; gap: .4em; }
.tr-set { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .55em .7em; border-radius: .9em; border: 1px solid #E6E8F0; font-size: .86em; }
.tr-set .n { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #F1F5F9; font-weight: 600; font-size: .9em; color: #475569; }
.tr-set.is-done { background: #F5F3FF; border-color: #DDD6FE; }
.tr-set.is-done .n { background: #7C3AED; color: #fff; }
.tr-set em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-rest { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em .8em; border-radius: .9em; background: #0B1022; color: #fff; font-size: .84em; }
.tr-rest b { font: 600 1.2em/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-pr { width: 26em; max-width: 100%; display: flex; align-items: center; gap: .8em; padding: .9em 1.1em; border-radius: 1.2em; background: linear-gradient(120deg, #7C3AED, #DB2777); color: #fff; box-shadow: 0 1.6em 3.2em -1.2em rgba(219, 39, 119, .6); }
.tr-pr svg { width: 1.6em; height: 1.6em; flex: none; }
.tr-pr b { display: block; font: 600 1.05em/1.2 Outfit, Inter, sans-serif; }
.tr-pr small { opacity: .85; font-size: .8em; }
.tr-desc { padding: .8em .9em; border-radius: .9em; background: #F4F5FA; border: 1px solid #E6E8F0; font-size: .9em; line-height: 1.45; }
.tr-parse { display: grid; gap: .35em; }
.tr-parse > span { display: flex; justify-content: space-between; gap: .8em; font-size: .84em; padding: .45em .1em; border-bottom: 1px solid #F1F2F7; }
.tr-parse > span b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-bars { display: grid; gap: .7em; }
.tr-bar { display: grid; gap: .3em; font-size: .82em; }
.tr-bar > span { display: flex; justify-content: space-between; color: #64748B; }
.tr-bar > span b { color: #0B1022; font-variant-numeric: tabular-nums; }
.tr-track { display: block; height: .6em; border-radius: 999px; background: #EEF0F6; overflow: hidden; }
.tr-track i { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v)); }
.tr-track .is-eat { background: linear-gradient(90deg, #34D399, #10B981); }
.tr-track .is-burn { background: linear-gradient(90deg, #A78BFA, #7C3AED); }
.tr-track .is-net { background: linear-gradient(90deg, #6366F1, #DB2777); }
.tr-delta { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .7em .9em; border-radius: .9em; background: #ECFDF5; color: #065F46; font-size: .86em; }
.tr-delta b { font: 600 1.15em/1 Outfit, Inter, sans-serif; }
.tr-streak { width: 26em; max-width: 100%; display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: 1.2em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(251, 146, 60, .4); color: #FED7AA; font-size: .86em; }
.tr-streak .tr-ic { width: 2.4em; height: 2.4em; }
.tr-streak b .fx-stack { display: inline-grid; }
.tr-streak b { color: #fff; font: 600 1.15em/1 Outfit, Inter, sans-serif; }
@media (max-width: 1023px) {
  /* the phone becomes a strip with the day's numbers; the focus card fills the rest */
  .tr-film .fx-stage { height: 640px; }
  .tr-cv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 1em; padding: 1.2em; font-size: clamp(10px, 2.3cqi, 14px); }
  .tr-ph { height: auto; border-radius: 1.7em; padding: .45em; max-width: 34em; width: 100%; justify-self: center; }
  .tr-scr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; height: auto; border-radius: 1.3em; align-items: center; }
  .tr-ph-top { display: grid; gap: .3em; padding: .6em 0 .6em 1.1em; }
  .tr-sum { margin: .5em; box-shadow: none; background: #fff; }
  .tr-feed { display: none; }
  .tr-focus { height: 100%; }
}
@media (max-width: 560px) {
  .tr-film .fx-stage { height: 600px; }
  .tr-cv { font-size: clamp(9.5px, 3.3cqi, 13px); padding: .9em; }
  .tr-ph-top b { font-size: 1.1em; }
  .tr-sum { grid-template-columns: 4.8em minmax(0, 1fr); gap: .7em; padding: .5em .7em; margin: .4em; }
  .tr-mring { width: 4.8em; height: 4.8em; }
  .tr-duo { grid-template-columns: 1fr; }
  .tr-plate { grid-template-columns: 5.4em minmax(0, 1fr); gap: .8em; }
  .tr-bowl { width: 5.4em; height: 5.4em; }
}
.tr-cv .tr-tag { font-size: .8em; padding: .3em .75em; }
.tr-cv .tr-ok, .tr-cv .tr-est { font-size: .66em; padding: .2em .55em; border-radius: .5em; }
/* the phone's ring follows the chapter (the still without JS is the evening) */
.tr-mring .fg { --to: 77; }
.fx-on:not(.s2) .tr-mring .fg { --to: 21; }
.fx-on.s2:not(.s4) .tr-mring .fg { --to: 61; }
.fx-on.s4:not(.s5) .tr-mring .fg { --to: 54; }
.fx-on.s5:not(.s6) .tr-mring .fg { --to: 50; }
.fx-cut .tr-mring .fg { transition: none; }
.tr-hit { background: #0EA5E9 !important; color: #fff !important; }
.tr-hero-note { margin: 18px 0 0; font-size: 14.5px; color: rgba(226, 232, 255, .62); }
.tr-hero-note a { color: #E4DDFE; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(228, 221, 254, .4); }
@media (max-width: 1023px) { .tr-hero-note { text-align: center; } }

/* #probieren: the search basket */
.tr-try { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1080px; margin: 0 auto; }
.tr-app { position: relative; display: grid; gap: 14px; padding: 22px 20px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -44px rgba(76, 29, 149, .45); }
.tr-app-h { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.tr-app-h b { font: 600 19px/1.2 Outfit, Inter, sans-serif; }
.tr-app-m { padding: 5px 12px; border-radius: 999px; background: #F3EEFF; color: #6D28D9; font: 600 13px/1.2 Inter, sans-serif; }
.tr-search.is-field { font-size: 14px; color: #64748B; }
.tr-search.is-field span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-app > * { min-width: 0; }
.tr-foods { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tr-food { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; font: inherit; color: var(--fx-ink); cursor: pointer; transition: border-color .25s, background-color .25s, transform .3s var(--fx-ease); }
.tr-food b { grid-column: 1 / -1; padding-right: 22px; font-size: 14px; line-height: 1.25; font-weight: 600; }
.tr-food small { font-size: 12.5px; color: #64748B; }
.tr-food .tr-ok, .tr-food .tr-est { grid-column: 2; grid-row: 2; }
.tr-food:not(:disabled):hover { border-color: #C4B5FD; transform: translateY(-1px); }
.tr-food[aria-pressed="true"] { border-color: #8B5CF6; background: #F7F4FF; }
.tr-food[aria-pressed="true"]::after { content: ""; position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #7C3AED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.tr-food:disabled { cursor: default; }
.tr-app-s { margin: 4px 0 0; font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7C3AED; }
.tr-basket { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-pos { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #F8F7FC; font-size: 14px; animation: tr-posin .45s var(--fx-ease); }
@keyframes tr-posin { from { opacity: 0; transform: translateY(6px); } }
.tr-pos-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-pos-n .tr-ok, .tr-pos-n .tr-est { flex: none; }
.tr-pos-n b { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-pos-k { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.tr-qty { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tr-qty output { min-width: 50px; text-align: center; font-weight: 600; }
.tr-qty button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--fx-ink); font: 600 17px/1 Inter, sans-serif; cursor: pointer; display: grid; place-items: center; }
.tr-qty button:hover { border-color: #C4B5FD; }
.tr-qty button:disabled { opacity: .4; cursor: default; }
.tr-empty { padding: 14px; border-radius: 14px; border: 1.5px dashed #DDD6FE; color: #64748B; font-size: 14px; text-align: center; }
.tr-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); color: #64748B; font-size: 15px; }
.tr-total b { font: 600 30px/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.tr-total b output { font: inherit; }
.tr-macline { margin: -6px 0 0; font-size: 13.5px; color: #64748B; font-variant-numeric: tabular-nums; }
.tr-app .tr-btn { font-size: 15px; padding: 13px 16px; border-radius: 14px; }
.tr-why { display: grid; gap: 14px; }
.tr-why-c { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.tr-why-c h3 { margin: 12px 0 6px; font-size: 19px; }
.tr-why-c p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fx-dim); }
.tr-why-c.is-scan { background: linear-gradient(150deg, #F7F4FF, #FDF2F8); border-color: #EDE4FE; }
.tr-why-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #fff; color: #7C3AED; box-shadow: 0 6px 16px -8px rgba(124, 58, 237, .5); }
.tr-why-ic svg { width: 20px; height: 20px; }
.tr-ok.is-lg, .tr-est.is-lg { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; }
.tr-lim { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.tr-fine { max-width: 780px; margin: 28px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--fx-dim); }
@media (max-width: 900px) { .tr-try { grid-template-columns: 1fr; } .tr-app { max-width: 480px; width: 100%; margin: 0 auto; } }
@media (max-width: 420px) { .tr-foods { grid-template-columns: 1fr; } .tr-app { padding: 18px 14px; border-radius: 24px; } .tr-pos { grid-template-columns: minmax(0, 1fr) auto; } .tr-pos-k { grid-column: 2; grid-row: 1; } .tr-pos .tr-qty { grid-column: 1 / -1; justify-self: start; } }

/* #training: the player and the ways in */
.tr-gym { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: start; }
.tr-player { position: relative; display: grid; gap: 12px; padding: 24px 22px 22px; border-radius: 30px; background: #0B1022; color: #fff; box-shadow: 0 40px 80px -40px rgba(11, 16, 34, .7); align-content: start; }
.tr-pl-top { display: flex; justify-content: space-between; font: 600 12.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-peri); }
.tr-pl-ex { margin: 4px 0 0; font: 600 28px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.tr-pl-last { margin: 0; font-size: 14px; color: rgba(226, 232, 255, .64); }
.tr-pl-sets { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.tr-pl-set { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(196, 181, 253, .14); font-size: 15px; transition: background-color .35s, border-color .35s; }
.tr-pl-set .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(196, 181, 253, .3); font-weight: 600; font-size: 14px; transition: background-color .35s, border-color .35s; }
.tr-pl-set b { font-variant-numeric: tabular-nums; }
.tr-pl-set.is-cur { border-color: rgba(196, 181, 253, .55); background: rgba(139, 92, 246, .14); }
.tr-pl-set.is-done { background: rgba(139, 92, 246, .22); border-color: transparent; }
.tr-pl-set.is-done .n { background: linear-gradient(135deg, #6366F1, #A855F7); border-color: transparent; font-size: 0; }
.tr-pl-set.is-done .n::before { content: ""; width: 14px; height: 8px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.tr-pl-rest { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.tr-pl-rest small { display: block; font-size: 12px; color: rgba(226, 232, 255, .6); }
.tr-pl-rest b { font: 600 22px/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-pl-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); display: block; }
.tr-pl-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.tr-pl-ring .bg { stroke: rgba(255, 255, 255, .1); }
.tr-pl-ring .fg { stroke: #F472B6; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to, 100)); transition: stroke-dashoffset 1s linear; }
.tr-pl-skip { min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(196, 181, 253, .3); background: none; color: #E4DDFE; font: 600 13px/1.2 Inter, sans-serif; cursor: pointer; }
.tr-pl-go { min-height: 52px; border: 0; border-radius: 16px; background: #fff; color: #0B1022; font: 600 16px/1.2 Inter, sans-serif; cursor: pointer; transition: transform .3s var(--fx-ease); }
.tr-pl-go:not(:disabled):hover { transform: translateY(-1px); }
.tr-pl-go:disabled { opacity: .55; cursor: default; }
.tr-pl-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 6px 0 0; }
.tr-pl-big { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 14px 30px -12px rgba(219, 39, 119, .7); }
.tr-pl-big svg { width: 30px; height: 30px; }
.tr-pl-h { margin: 0; font: 600 22px/1.2 Outfit, Inter, sans-serif; }
.tr-pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.tr-pl-stats span { padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.tr-pl-stats small { display: block; font-size: 12px; color: rgba(226, 232, 255, .6); }
.tr-pl-stats b { font: 600 18px/1.3 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-pl-pr { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 8px 14px; border-radius: 999px; background: rgba(244, 114, 182, .14); border: 1px solid rgba(244, 114, 182, .4); color: #FBCFE8; font-weight: 600; font-size: 14px; }
.tr-pl-pr svg { width: 15px; height: 15px; color: #F9A8D4; }
.tr-pl-done .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.tr-pl-demo { position: absolute; right: 18px; bottom: -34px; }
.tr-pl-demo.fx-demo { color: #6D28D9; }
.tr-pl-in .tr-pl-done { animation: tr-posin .5s var(--fx-ease); }
.tr-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-ways .fx-tile-ic { background: linear-gradient(135deg, #F3EEFF, #FCE7F3); color: #7C3AED; }
.tr-ways .fx-tile:hover { border-color: #DDD6FE; box-shadow: 0 18px 40px -24px rgba(124, 58, 237, .45); }
.tr-ways .fx-tile summary::after { background-color: #F3EEFF; }
.tr-ways .fx-tile summary .tr-tag { margin-top: 6px; display: flex; width: max-content; }
.tr-ways .fx-tile a { color: #6D28D9; font-weight: 600; }
@media (max-width: 1100px) { .tr-ways { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .tr-gym { grid-template-columns: 1fr; gap: 56px; } .tr-player { max-width: 420px; width: 100%; margin: 0 auto; min-height: 0; } .tr-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tr-ways { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tr-pos, .tr-pl-in .tr-pl-done { animation: none; } .tr-pl-ring .fg { transition: none; } }

/* #bilanz: the equation */
.tr-balance { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.tr-bal-txt .fx-head { margin: 0 0 20px; text-align: left; }
.tr-bal-txt > p { margin: 0; color: rgba(226, 232, 255, .76); font-size: 17px; line-height: 1.65; }
.tr-bal-ctl { margin-top: 28px; }
.tr-bal-ctl .fx-seg { max-width: 100%; }
.tr-eq { display: grid; gap: 22px; padding: 28px; border-radius: 30px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); }
.tr-eq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.tr-eq-t { padding: 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); text-align: center; }
.tr-eq-t small { display: block; font-size: 13px; color: rgba(226, 232, 255, .64); }
.tr-eq-t b { display: block; margin-top: 4px; font: 600 clamp(22px, 2.6vw, 32px)/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tr-eq-t b output { font: inherit; }
.tr-eq-t.is-eat b { color: #6EE7B7; }
.tr-eq-t.is-burn b { color: #C4B5FD; }
.tr-eq-t.is-net { background: linear-gradient(150deg, rgba(99, 102, 241, .3), rgba(219, 39, 119, .2)); }
.tr-eq-op { font: 500 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(226, 232, 255, .5); }
.tr-eq-ring { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 22px; align-items: center; }
.tr-bring { position: relative; display: block; }
.tr-bring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tr-bring-t b { font: 600 22px/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-bring-t small { font-size: 11.5px; color: rgba(226, 232, 255, .6); }
.tr-bring-t output { font: inherit; }
.tr-bring svg { width: 130px; height: 130px; transform: rotate(-90deg); display: block; }
.tr-bring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.tr-bring .bg { stroke: rgba(255, 255, 255, .08); }
.tr-bring .fg { stroke: url(#trGradK3); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to, 0)); transition: stroke-dashoffset .9s var(--fx-ease); }
.tr-eq-goal { margin: 0; font-size: 14.5px; color: rgba(226, 232, 255, .66); }
.tr-eq-goal b { color: #fff; }
.tr-eq-left { margin: 6px 0 0; font: 600 22px/1.25 Outfit, Inter, sans-serif; }
.tr-eq-chip { display: inline-flex; margin: 10px 0 0; padding: 5px 12px; border-radius: 999px; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .4); color: #A7F3D0; font: 600 13.5px/1.2 Inter, sans-serif; }
.tr-eq-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(226, 232, 255, .56); }
.tr-bump { animation: tr-bump .5s var(--fx-ease); }
@keyframes tr-bump { 40% { transform: scale(1.06); } }
@media (max-width: 960px) { .tr-balance { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .tr-eq { padding: 18px 14px; gap: 18px; border-radius: 24px; }
  .tr-eq-row { grid-template-columns: 1fr 1fr; }
  .tr-eq-op { display: none; }
  .tr-eq-t.is-net { grid-column: 1 / -1; }
  .tr-eq-ring { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .tr-bring svg { width: 96px; height: 96px; }
  .tr-bring-t b { font-size: 17px; } .tr-bring-t small { font-size: 10.5px; }
  .tr-bal-ctl .fx-seg { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; border-radius: 22px; width: 100%; }
  .tr-bal-ctl .fx-seg .fx-knob { display: none; }
  .tr-bal-ctl .fx-seg button[aria-pressed="true"] { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
}
@media (prefers-reduced-motion: reduce) { .tr-bump { animation: none; } .tr-bring .fg { transition: none; } }

/* #alltag: the bento */
.tr-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tr-b { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease); }
.tr-b:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(76, 29, 149, .4); }
.tr-b h3 { margin: 6px 0 0; font-size: 19px; }
.tr-b p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fx-dim); flex: 1; }
.tr-b-art { align-self: stretch; display: flex; align-items: center; gap: 14px; min-height: 118px; padding: 16px; border-radius: 18px; background: #F7F5FF; }
.tr-b.is-fast .tr-b-art { background: linear-gradient(150deg, #FFFBEB, #FEF3C7); }
.tr-b.is-water .tr-b-art { background: linear-gradient(150deg, #F0F9FF, #E0F2FE); }
.tr-b.is-goals .tr-b-art { background: linear-gradient(150deg, #F5F3FF, #EDE9FE); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tr-b.is-list .tr-b-art { background: linear-gradient(150deg, #F0FDF4, #DCFCE7); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tr-b.is-check .tr-b-art { background: linear-gradient(150deg, #FDF2F8, #FCE7F3); flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.tr-b.is-streak .tr-b-art { background: linear-gradient(150deg, #FFF7ED, #FFEDD5); }
.tr-bdial { position: relative; width: 86px; height: 86px; flex: none; }
.tr-bdial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-bdial circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.tr-bdial .bg { stroke: rgba(245, 158, 11, .18); }
.tr-bdial .fg { stroke: #F59E0B; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--to)); }
.tr-bdial > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tr-bdial b { font: 600 19px/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tr-bdial small { font-size: 11px; color: #92400E; }
.tr-b-pill { display: inline-flex; padding: 5px 11px; border-radius: 999px; font: 600 12.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.tr-b-pill.is-ok { background: #D1FAE5; color: #047857; }
.tr-glass { position: relative; width: 52px; height: 82px; flex: none; border-radius: 6px 6px 16px 16px; border: 2px solid #7DD3FC; background: rgba(255, 255, 255, .7); overflow: hidden; }
.tr-glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, #7DD3FC, #0EA5E9); transform-origin: bottom; transform: scaleY(var(--v)); }
.tr-b-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-b-quick span { padding: 6px 10px; border-radius: 10px; background: #fff; font: 600 12.5px/1.2 Inter, sans-serif; color: #0B1022; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); white-space: nowrap; }
.tr-gt { display: grid; place-content: center; text-align: center; padding: 12px 4px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tr-gt b { font: 600 16px/1.2 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-gt small { font-size: 11.5px; color: #64748B; }
.tr-aisle { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 13.5px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tr-aisle small { font: 600 11px/1.3 Inter, sans-serif; letter-spacing: .04em; color: #15803D; }
.tr-aisle span { display: flex; align-items: center; gap: 8px; }
.tr-aisle span::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 4px; border: 1.5px solid #CBD5E1; }
.tr-aisle span.is-ticked { color: #94A3B8; text-decoration: line-through; }
.tr-aisle span.is-ticked::before { border-color: #16A34A; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat; }
.tr-moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tr-moods i { font-style: normal; padding: 7px 2px; border-radius: 10px; background: #fff; font: 600 11.5px/1.2 Inter, sans-serif; text-align: center; color: #64748B; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tr-moods i.is-on { background: #DB2777; color: #fff; }
.tr-flame { display: grid; place-items: center; width: 74px; height: 74px; flex: none; border-radius: 22px; background: linear-gradient(160deg, #FB923C, #EF4444); color: #fff; position: relative; box-shadow: 0 14px 28px -14px rgba(239, 68, 68, .7); }
.tr-flame svg { width: 30px; height: 30px; margin-top: -12px; }
.tr-flame b { position: absolute; bottom: 9px; font: 600 17px/1 Outfit, Inter, sans-serif; }
.tr-note-push { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 12.5px; line-height: 1.35; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tr-note-push b { font-size: 13.5px; }
.tr-note-push small { color: #64748B; font-size: 12.5px; }
.tr-tag.is-plan { color: #15803D; background: #DCFCE7; }
@media (max-width: 1023px) { .tr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tr-bento { grid-template-columns: 1fr; } }

/* #koerper */
.tr-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tr-body-txt .fx-head { margin: 0 0 22px; text-align: left; }
.tr-chart { position: relative; padding: 24px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -48px rgba(76, 29, 149, .5); }
.tr-chart-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-chart-h small { display: block; font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7C3AED; }
.tr-chart-h b { font: 600 34px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.tr-chart svg { display: block; width: 100%; height: auto; margin: 14px 0 10px; overflow: visible; }
.tr-goalline { stroke: #CBD5E1; stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; }
.tr-goaltxt { font: 600 12px Inter, sans-serif; fill: #64748B; }
.tr-line { fill: none; stroke: url(#trChartL); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; }
.tr-dots circle { fill: #fff; stroke: #8B5CF6; stroke-width: 2.5; }
.tr-dots circle:last-child { fill: #DB2777; stroke: #fff; stroke-width: 3; }
.fx-anim .tr-chart .tr-line { stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--fx-ease); }
.fx-anim .tr-chart .tr-dots circle, .fx-anim .tr-chart .tr-area { opacity: 0; transition: opacity .6s var(--fx-ease) 1.2s; }
.fx-anim .tr-chart.is-in .tr-line { stroke-dashoffset: 0; }
.fx-anim .tr-chart.is-in .tr-dots circle, .fx-anim .tr-chart.is-in .tr-area { opacity: 1; }
.tr-photos { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.tr-photos > span { position: relative; min-height: 96px; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.tr-ph1, .tr-ph2 { background: radial-gradient(40% 32% at 50% 30%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(34% 58% at 50% 88%, rgba(255, 255, 255, .42), transparent 72%), linear-gradient(160deg, #C4B5FD, #A78BFA); color: #fff; }
.tr-ph2 { background: radial-gradient(40% 32% at 50% 30%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(30% 56% at 50% 88%, rgba(255, 255, 255, .42), transparent 72%), linear-gradient(160deg, #F9A8D4, #C084FC); }
.tr-photos small { font: 600 12px/1.2 Inter, sans-serif; }
.tr-bf { background: #F7F5FF; gap: 4px; }
.tr-bf small { color: #64748B; font-weight: 500; }
.tr-bf b { font: 600 22px/1.1 Outfit, Inter, sans-serif; }
.tr-bf .tr-est { align-self: flex-start; }
.tr-chart > .fx-demo { position: absolute; right: 20px; bottom: -36px; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tr-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--fx-dim); }
.tr-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #F3EEFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.tr-list b { color: var(--fx-ink); }
.tr-list .tr-tag { margin-left: 4px; vertical-align: 1px; }
.tr-body-txt .cp-go { margin-top: 26px; }
@media (max-width: 960px) { .tr-body { grid-template-columns: 1fr; gap: 56px; } .tr-body-txt { order: -1; } }
@media (max-width: 480px) { .tr-chart { padding: 18px 16px; border-radius: 24px; } .tr-photos { grid-template-columns: 1fr 1fr; } .tr-bf { grid-column: 1 / -1; min-height: 0 !important; } }

/* #coach */
.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; }
.tr-two-c { padding: 30px 28px; border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); }
.tr-two-c.is-coach { background: linear-gradient(160deg, rgba(124, 58, 237, .28), rgba(219, 39, 119, .1)); border-color: rgba(196, 181, 253, .32); }
.tr-two-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .08); color: #E4DDFE; }
.tr-two-ic svg { width: 22px; height: 22px; }
.tr-two-c h3 { margin: 18px 0 8px; font-size: 24px; }
.tr-two-c p { margin: 0; color: rgba(226, 232, 255, .76); font-size: 16px; line-height: 1.65; }
.tr-two-c p a, .tr-two-f a { color: #F5D0FE; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 208, 254, .4); }
.tr-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.tr-ticks li { position: relative; padding-left: 26px; color: #fff; font-size: 15.5px; line-height: 1.5; }
.tr-ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid #F472B6; border-bottom: 2px solid #F472B6; transform: rotate(-45deg); }
.tr-two-f { margin: 26px 0 0; text-align: center; color: rgba(226, 232, 255, .7); font-size: 15.5px; }
@media (max-width: 760px) { .tr-two { grid-template-columns: 1fr; } .tr-two-c { padding: 24px 20px; } }

/* #weiter */
.tr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
.fx-track .fx-plan.is-pro { background: linear-gradient(160deg, rgba(124, 58, 237, .36), rgba(219, 39, 119, .14)); border-color: rgba(196, 181, 253, .4); }
.fx-track .fx-plan .fx-badge { background: linear-gradient(95deg, #E4DDFE, #F9A8D4); }
.fx-track .fx-plan li::before { border-color: #F472B6; }
.fx-track .fx-door { background: linear-gradient(120deg, rgba(124, 58, 237, .26), rgba(219, 39, 119, .1)); border-color: rgba(196, 181, 253, .28); max-width: 880px; margin-left: auto; margin-right: auto; }
.fx-door-art .tr-door-ava { position: absolute; right: 30px; top: 50%; width: 72px; height: 72px; margin-top: -36px; border-radius: 22px; box-shadow: 0 18px 40px -14px rgba(219, 39, 119, .6); }
@media (max-width: 900px) { .tr-plans { grid-template-columns: 1fr; } }
/* <<< fx-track */



/* >>> fx-betreuen, Athleten betreuen ================================================================= */
/* hero: the roster in orbit around the coach on a tilted floor, the Pulse rippling out from the middle, and
   the Pulse card naming one athlete at a time while that athlete's ring flares */
.ab-scene { perspective: 1100px; }
.ab-glow { position: absolute; left: 50%; top: 40%; width: 520px; height: 300px; margin: -150px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(99, 102, 241, .42), rgba(34, 211, 238, .08) 60%, transparent); filter: blur(8px); }
.ab-orbit { position: absolute; left: 50%; top: 40%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(62deg); }
.ab-ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(165, 180, 252, .24); translate: -50% -50%; }
.ab-ring.is-in { width: 280px; height: 280px; }
.ab-ring.is-out { width: 470px; height: 470px; border-style: dashed; border-color: rgba(165, 180, 252, .16); }
.ab-ripple { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(34, 211, 238, .55); box-shadow: 0 0 24px rgba(34, 211, 238, .35), inset 0 0 18px rgba(34, 211, 238, .2); opacity: 0; animation: ab-ripple 6s var(--fx-ease) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes ab-ripple { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(4.2); } }
.ab-spin { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: ab-spin 90s linear infinite; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-sat { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotate(var(--a)) translateX(var(--r)); }
.ab-bb { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotate(calc(-1 * var(--a))) rotateX(-62deg); animation: ab-counter 90s linear infinite; }
@keyframes ab-counter { from { transform: rotate(calc(-1 * var(--a))) rotate(0deg) rotateX(-62deg); } to { transform: rotate(calc(-1 * var(--a))) rotate(-360deg) rotateX(-62deg); } }
.ab-av { position: absolute; left: -24px; top: -48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 Inter, sans-serif; color: #fff; background: var(--g, linear-gradient(135deg, #6366F1, #06B6D4)); box-shadow: 0 0 0 3px rgba(11, 16, 34, .9), 0 0 0 5px var(--st, rgba(165, 180, 252, .35)), 0 14px 28px -10px rgba(0, 0, 0, .7); }
.ab-av.is-ok { --st: #34D399; } .ab-av.is-wt { --st: #FBBF24; } .ab-av.is-bad { --st: #FB7185; } .ab-av.is-new { --st: #22D3EE; }
.ab-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--st, #A5B4FC); box-shadow: 0 0 22px var(--st, #A5B4FC); opacity: 0; animation: ab-flare 15s var(--fx-ease) infinite paused; animation-delay: calc(var(--k) * 2.5s); }
@media (prefers-reduced-motion: no-preference) { [data-fx-run="1"] .ab-av::after { animation-play-state: running; } }
@keyframes ab-flare { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; transform: scale(1.18); } 14% { opacity: .8; transform: scale(1.1); } 18%, 100% { opacity: 0; transform: scale(1.3); } }
.ab-core-bb { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateX(-62deg); }
.ab-core { position: absolute; left: -43px; top: -92px; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #818CF8, #4F46E5 55%, #312E81); color: #fff; font: 600 22px/1 Outfit, Inter, sans-serif; box-shadow: 0 0 0 6px rgba(99, 102, 241, .22), 0 0 60px rgba(99, 102, 241, .7), 0 24px 40px -16px rgba(0, 0, 0, .8); }
.ab-pulse { position: absolute; left: 50%; bottom: 26px; width: 330px; margin-left: -165px; padding: 12px 14px 14px; border-radius: 18px; background: rgba(14, 19, 48, .78); border: 1px solid rgba(165, 180, 252, .24); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ab-pulse-h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 600 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-peri); }
.ab-pulse-h svg { width: 15px; height: 15px; }
.ab-feed { display: grid; }
.ab-sig { grid-area: 1 / 1; margin: 0; display: flex; align-items: center; gap: 10px; opacity: 0; animation: ab-sig 15s var(--fx-ease) infinite; animation-delay: calc(var(--k) * 2.5s); }
.ab-sig > span:last-child { display: grid; font: 500 13.5px/1.35 Inter, sans-serif; color: rgba(226, 232, 255, .8); min-width: 0; }
.ab-sig b { color: #fff; font-weight: 600; font-size: 14px; }
.ab-sig::after { content: ""; margin-left: auto; width: 9px; height: 9px; flex: none; border-radius: 50%; background: #34D399; box-shadow: 0 0 10px #34D399; }
.ab-sig.is-bad::after { background: #FB7185; box-shadow: 0 0 10px #FB7185; }
@keyframes ab-sig { 0% { opacity: 0; transform: translateY(8px); } 3%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ab-sig.is-still { opacity: 1; } }
.fx-anim .ab-orbit { animation: ab-tilt 1.4s var(--fx-ease) .2s backwards; }
@keyframes ab-tilt { from { transform: rotateX(84deg) scale(.6); } }
.fx-anim .ab-pulse { animation: ab-rise .8s var(--fx-ease) .9s backwards; }
@keyframes ab-rise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 1180px) { .ab-orbit, .ab-glow { scale: .86; } }
@media (max-width: 1023px) { .ab-scene { height: 380px; } .ab-orbit, .ab-glow { scale: .74; top: 38%; } .ab-pulse { bottom: 10px; } }
@media (max-width: 560px) { .ab-scene { height: 330px; } .ab-orbit, .ab-glow { scale: .58; top: 36%; } .ab-pulse { width: 300px; margin-left: -150px; bottom: 8px; } }

/* shared bits: the small avatar, the Pro badge, flags */
.ab-mini { display: grid; place-items: center; width: 2em; height: 2em; flex: none; border-radius: 50%; background: var(--g, linear-gradient(135deg, #6366F1, #06B6D4)); color: #fff; font: 600 .78em/1 Inter, sans-serif; }
.ab-pulse .ab-mini { width: 34px; height: 34px; font-size: 12.5px; }
.ab-pro { display: inline-flex; align-items: center; padding: .2em .6em; border-radius: 999px; font: 700 .72rem/1.2 Inter, sans-serif; letter-spacing: .04em; color: #fff; background: linear-gradient(95deg, #4F46E5, #0EA5E9); vertical-align: middle; white-space: nowrap; }
.ab-cv .ab-pro { font-size: .72em; }
.ab-flag { display: inline-flex; align-items: center; padding: .25em .65em; border-radius: 999px; font: 600 .78em/1.2 Inter, sans-serif; white-space: nowrap; color: #047857; background: #D1FAE5; }
.ab-flag.is-bad { color: #BE123C; background: #FFE4E6; } .ab-flag.is-wt { color: #92400E; background: #FEF3C7; } .ab-flag.is-mute { color: #475569; background: #EEF1F6; }

/* #woche: the film stage, a coach's app with the roster on the left */
.ab-film .fx-stage { height: 620px; }
.ab-cv { position: absolute; inset: 0; display: grid; grid-template-columns: 11.6em minmax(0, 1fr); gap: 1em; padding: 1.1em; font-size: clamp(10.5px, 2.3cqi, 17px); }
.ab-rail { display: flex; flex-direction: column; gap: .35em; padding: .8em .6em; border-radius: 1.1em; background: rgba(255, 255, 255, .03); border: 1px solid var(--fx-line); }
.ab-seatm { margin-top: auto; display: grid; gap: .35em; padding: .8em .6em .3em; border-top: 1px solid var(--fx-line); }
.ab-seatm > span { font: 600 .66em/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-peri); }
.ab-seatm > b { font: 600 1.25em/1.1 Outfit, Inter, sans-serif; color: #fff; }
.ab-seatm > i { height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ab-seatm em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366F1, #22D3EE); transform-origin: left; transform: scaleX(var(--v)); }
.ab-rail-h { margin: 0 0 .5em .3em; font: 600 .7em/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-peri); }
.ab-row { display: flex; align-items: center; gap: .6em; padding: .45em .5em; border-radius: .8em; border: 1px solid transparent; transition: background-color .4s var(--fx-ease), border-color .4s var(--fx-ease); }
.ab-row .ab-mini { box-shadow: 0 0 0 .14em #0B1022, 0 0 0 .3em var(--st, rgba(165, 180, 252, .4)); }
.ab-row.is-ok { --st: #34D399; } .ab-row.is-wt { --st: #FBBF24; } .ab-row.is-bad { --st: #FB7185; } .ab-row.is-new { --st: #22D3EE; }
.ab-row > span:last-child { display: grid; min-width: 0; }
.ab-row b { font: 600 .82em/1.2 Inter, sans-serif; color: #fff; white-space: nowrap; }
.ab-row small { font-size: .7em; color: rgba(199, 210, 254, .62); }
.fx-stage[data-ch="2"] .ab-row[data-who="nh"], .fx-stage[data-ch="3"] .ab-row[data-who="nh"], .fx-stage[data-ch="4"] .ab-row[data-who="lk"],
.fx-stage[data-ch="5"] .ab-row[data-who="jr"], .fx-stage[data-ch="6"] .ab-row[data-who="sk"], .fx-stage[data-ch="7"] .ab-row[data-who="tb"],
.fx-stage:not([data-ch]) .ab-row[data-who="tb"] { background: rgba(99, 102, 241, .18); border-color: rgba(165, 180, 252, .34); }
.ab-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; }
.ab-main > * { grid-area: 1 / 1; }
.ab-stackc { display: grid; gap: .8em; align-content: start; }
.ab-card { display: grid; gap: .55em; align-content: start; padding: 1em 1.1em 1.1em; border-radius: 1.1em; background: #fff; color: var(--fx-ink); font-size: .9em; box-shadow: 0 1.6em 3em -1.4em rgba(0, 0, 0, .7); }
.ab-k { display: flex; align-items: center; gap: .5em; margin: 0; font: 600 .78em/1.2 Inter, sans-serif; letter-spacing: .04em; color: #4338CA; }
.ab-k svg { width: 1.2em; height: 1.2em; flex: none; }
.ab-k .ab-pro { margin-left: auto; }
.ab-k2 { margin-top: .5em; }
.ab-t { font: 600 1.2em/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.ab-sub { font-size: .8em; line-height: 1.4; color: #64748B; }
.ab-rank { list-style: none; margin: .2em 0 0; padding: 0; display: grid; gap: .4em; counter-reset: rk; }
.ab-rank li { display: grid; grid-template-columns: 1.3em 2em minmax(0, 1fr); align-items: center; gap: .6em; padding: .5em .6em; border-radius: .8em; background: #F6F7FB; counter-increment: rk; }
.ab-rank li::before { content: counter(rk); font: 700 .8em/1 Inter, sans-serif; color: #94A3B8; text-align: center; }
.ab-rank li > span:last-child, .ab-pr > span:nth-child(2) { display: grid; min-width: 0; }
.ab-rank b, .ab-pr b { font-size: .88em; }
.ab-rank em, .ab-pr em { font-style: normal; font-size: .8em; line-height: 1.35; color: #475569; }
.ab-field { display: grid; gap: .25em; }
.ab-field > span { font: 600 .72em/1.2 Inter, sans-serif; color: #64748B; }
.ab-field > b, .ab-field > i { display: block; padding: .55em .75em; border-radius: .7em; background: #F6F7FB; border: 1px solid #E6E8F0; font: 500 .9em/1.3 Inter, sans-serif; }
.ab-field > i { color: #94A3B8; font-style: normal; }
.ab-type.fx-b { clip-path: inset(0 0 0 0); }
.fx-anim .fx-on .ab-type.fx-b { transition: clip-path .9s steps(8) var(--d, 0s), opacity .1s linear var(--d, 0s); }
.fx-on:not(.s2) .ab-type.fx-s2 { clip-path: inset(0 100% 0 0); }
.ab-btn { justify-self: start; padding: .6em 1em; border-radius: .7em; background: var(--fx-indigo); color: #fff; font: 600 .85em/1.2 Inter, sans-serif; }
.ab-btn.is-dark { background: #0B1022; }
.ab-ok { border: 1px solid #A7F3D0; background: linear-gradient(160deg, #ECFDF5, #fff 70%); }
.ab-ok .ab-k { color: #047857; }
.ab-link { padding: .5em .7em; border-radius: .6em; background: #F6F7FB; border: 1px dashed #CBD5E1; font: 500 .8em/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-acts, .ab-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.ab-acts span, .ab-chips span { padding: .35em .7em; border-radius: .6em; background: #EEF0FF; color: #3730A3; font: 600 .8em/1.2 Inter, sans-serif; }
.ab-acts span.is-go, .ab-chips span.is-on { background: var(--fx-indigo); color: #fff; }
.ab-phone { justify-self: end; width: 78%; display: grid; gap: .5em; padding: 1em 1.1em; border-radius: 1.4em; background: #121A3E; border: 1px solid rgba(165, 180, 252, .3); color: #E0E7FF; box-shadow: 0 1.6em 3em -1.2em rgba(0, 0, 0, .8); font-size: .9em; }
.ab-phone b { color: #fff; font: 600 1.05em/1.25 Outfit, Inter, sans-serif; }
.ab-phone small { font-size: .78em; line-height: 1.45; color: rgba(224, 231, 255, .74); }
.ab-phone .ab-btn { justify-self: stretch; text-align: center; background: #fff; color: var(--fx-ink); }
.ab-kv { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .15em .8em; padding: .7em .8em; border-radius: .8em; background: #F6F7FB; }
.ab-kv span { font: 600 .7em/1.2 Inter, sans-serif; color: #64748B; }
.ab-kv b { font: 600 .95em/1.2 Inter, sans-serif; }
.ab-weeks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3em; }
.ab-wd { text-align: center; font: 600 .66em/1.4 Inter, sans-serif; color: #94A3B8; }
.ab-weeks i { height: 1.25em; border-radius: .35em; background: #EEF0F6; }
.ab-weeks i.is-on { background: linear-gradient(135deg, #6366F1, #06B6D4); }
.fx-anim .fx-on.s3 .ab-weeks i.is-on { animation: ab-cell .5s var(--fx-spring) both; animation-delay: calc(1.8s + var(--r, 0) * .22s); }
.ab-weeks i:nth-child(n+15) { --r: 1; } .ab-weeks i:nth-child(n+22) { --r: 2; } .ab-weeks i:nth-child(n+29) { --r: 3; } .ab-weeks i:nth-child(n+36) { --r: 4; } .ab-weeks i:nth-child(n+43) { --r: 5; }
@keyframes ab-cell { from { transform: scale(0); opacity: 0; } }
.ab-toast { justify-self: start; display: inline-flex; align-items: center; gap: .5em; padding: .5em .8em; border-radius: .8em; background: #0B1022; color: #fff; font: 500 .8em/1.3 Inter, sans-serif; }
.ab-toast svg { width: 1.1em; height: 1.1em; color: var(--fx-money); flex: none; }
.ab-wo { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .55em .7em; border-radius: .8em; background: #F6F7FB; }
.ab-wo > span:first-child { display: grid; min-width: 0; }
.ab-wo b { font-size: .92em; }
.ab-wo small { font-size: .76em; color: #64748B; }
.ab-stars { color: #F59E0B; letter-spacing: .08em; font-size: .85em; white-space: nowrap; }
.ab-stars i { font-style: normal; color: #CBD5E1; }
.ab-mac { display: grid; grid-template-columns: 7.4em minmax(0, 1fr) auto; align-items: center; gap: .7em; font-size: .82em; }
.ab-mac span { color: #475569; font-weight: 500; }
.ab-mac i { position: relative; height: .55em; border-radius: 1em; background: #EEF0F6; overflow: hidden; }
.ab-mac i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #6366F1, #06B6D4); transform-origin: left; transform: scaleX(var(--v)); }
.ab-mac b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-meal { display: flex; align-items: center; gap: .7em; }
.ab-meal > span:last-child { display: grid; min-width: 0; }
.ab-meal b { font-size: .9em; }
.ab-meal small { font-size: .75em; color: #64748B; }
.ab-ph { display: grid; place-items: center; width: 2.9em; height: 2.9em; flex: none; border-radius: .7em; background: linear-gradient(135deg, #FDE68A, #F97316 60%, #BE185D); color: rgba(255, 255, 255, .9); }
.ab-ph.is-b { background: linear-gradient(135deg, #A7F3D0, #10B981 55%, #0E7490); }
.ab-ph.is-c { background: linear-gradient(135deg, #E0E7FF, #818CF8 55%, #4338CA); }
.ab-ph svg { width: 1.3em; height: 1.3em; }
.ab-grp { display: flex; align-items: center; gap: .5em; margin: .3em 0 0; font: 600 .74em/1.2 Inter, sans-serif; color: #047857; }
.ab-grp::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #10B981; }
.ab-grp.is-bad { color: #BE123C; } .ab-grp.is-bad::before { background: #F43F5E; }
.ab-pr { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .6em; }
.ab-msg { padding: .35em .7em; border-radius: .6em; background: #0B1022; color: #fff; font: 600 .76em/1.2 Inter, sans-serif; }
.ab-draft { justify-self: start; display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: .7em; border: 1px solid #C7D2FE; background: #EEF0FF; color: #3730A3; font: 600 .8em/1.2 Inter, sans-serif; }
.ab-draft svg { width: 1.1em; height: 1.1em; }
.ab-bub { justify-self: start; max-width: 88%; padding: .6em .85em; border-radius: 1em 1em 1em .3em; background: #F1F3F9; font-size: .85em; line-height: 1.45; }
.ab-bub.is-me { justify-self: end; border-radius: 1em 1em .3em 1em; background: var(--fx-indigo); color: #fff; }
.ab-bar { position: relative; height: .7em; border-radius: 1em; background: #EEF0F6; overflow: hidden; }
.ab-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #10B981, #06B6D4); transform-origin: left; transform: scaleX(var(--v)); }
.ab-num { margin: 0; font: 600 1.05em/1.2 Outfit, Inter, sans-serif; }
.ab-num .fx-stack { display: inline-grid; }
.ab-ci-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.ab-ci-h b { margin-right: auto; font-size: .95em; }
.ab-ci-h .fx-stack { display: inline-grid; }
.ab-ans { display: flex; justify-content: space-between; gap: .8em; padding: .45em .7em; border-radius: .7em; background: #F6F7FB; font-size: .85em; }
.ab-ans span { color: #475569; }
.ab-ans b.is-bad { color: #BE123C; }
.ab-sum { display: grid; gap: .35em; padding: .7em .8em; border-radius: .8em; background: #EEF0FF; color: #312E81; font-size: .82em; line-height: 1.5; }
.ab-sum b { display: flex; align-items: center; gap: .4em; font-size: .95em; }
.ab-sum svg { width: 1.1em; height: 1.1em; }
@media (max-width: 1023px) { .ab-film .fx-stage { height: 620px; } .ab-cv { font-size: clamp(10.5px, 2.4cqi, 15px); } }
@media (max-width: 640px) {
  .ab-film .fx-stage { height: 540px; }
  .ab-cv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .8em; padding: .8em; font-size: clamp(10.5px, 3.6cqi, 14px); }
  .ab-rail { flex-direction: row; align-items: start; padding: .6em .4em; gap: .2em; }
  .ab-rail > .ab-row { flex: 1 1 0; min-width: 0; }
  .ab-main { align-items: start; }
  .ab-rail-h, .ab-seatm { display: none; }
  .ab-row { flex-direction: column; gap: .35em; padding: .4em .1em; text-align: center; }
  .ab-row > span:last-child { justify-items: center; }
  .ab-row b { font-size: .72em; }
  .ab-row small { display: none; }
  .ab-phone { width: 92%; }
}

/* #athlet: the athlete's page with its nine tabs */
.ab-app { max-width: 1080px; margin: 0 auto; }
.ab-app .fx-bar .fx-demo { flex: none; font-size: 10.5px; padding: 3px 8px; }
.ab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 22px 24px 18px; }
.ab-big { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #06B6D4); color: #fff; font: 600 21px/1 Outfit, Inter, sans-serif; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #34D399; }
.ab-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; flex: 1 1 200px; }
.ab-who b { font: 600 22px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.ab-who small { flex: 1 0 100%; font-size: 14px; color: var(--fx-dim); }
.ab-hacts { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-hacts span { padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); font: 600 13.5px/1.2 Inter, sans-serif; color: var(--fx-ink); }
.ab-hacts span.is-go { background: var(--fx-indigo); border-color: var(--fx-indigo); color: #fff; }
.ab-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #E6E8F0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.ab-tabs::-webkit-scrollbar { display: none; }
.ab-tabs button { position: relative; flex: none; min-height: 46px; padding: 0 12px; border: 0; background: none; font: 600 14.5px/1 Inter, sans-serif; color: var(--fx-dim); cursor: pointer; scroll-snap-align: start; transition: color .25s; }
.ab-tabs button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--fx-indigo); transform: scaleX(0); transition: transform .35s var(--fx-ease); }
.ab-tabs button[aria-selected="true"] { color: var(--fx-ink); }
.ab-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.ab-tabs button:hover { color: var(--fx-ink); }
.ab-tabs button:focus-visible { outline: 2px solid var(--fx-indigo); outline-offset: -4px; border-radius: 10px; }
.ab-panels { padding: 20px 24px 24px; background: #F8F9FC; }
.ab-app.is-js .ab-panels { min-height: 372px; }
.ab-pn + .ab-pn { margin-top: 26px; }
.ab-app.is-js .ab-pn + .ab-pn { margin-top: 0; }
.ab-pn-h { margin: 0 0 12px; font-size: 18px; }
.ab-app.is-js .ab-pn-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-app.is-js .ab-pn:not([hidden]) { animation: ab-fade .45s var(--fx-ease); }
@keyframes ab-fade { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ab-app.is-js .ab-pn:not([hidden]) { animation: none; } }
.ab-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ab-col { display: grid; gap: 14px; }
.ab-box { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #E6E8F0; }
.ab-bh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.3 Inter, sans-serif; color: var(--fx-ink); }
.ab-bh2 { margin-top: 6px; }
.ab-bh .fx-pill { font-size: 11.5px; }
.ab-go { margin-left: auto; padding: 5px 10px; border-radius: 9px; background: #EEF0FF; color: #3730A3; font: 600 12.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.ab-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ab-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-kpis span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #F6F7FB; font-size: 12.5px; line-height: 1.3; color: var(--fx-dim); }
.ab-kpis b { font: 600 20px/1.1 Outfit, Inter, sans-serif; color: var(--fx-ink); letter-spacing: -.01em; }
.ab-well { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ab-well span { display: grid; gap: 2px; font-size: 12px; color: var(--fx-dim); }
.ab-well b { font-size: 14.5px; color: var(--fx-ink); }
.ab-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF7ED; border: 1px solid #FED7AA; font-size: 13.5px; line-height: 1.45; color: #7C2D12; }
.ab-note b { display: block; color: #431407; }
.ab-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; padding: 9px 0; border-top: 1px solid #EEF0F6; font-size: 14px; }
.ab-bh + .ab-line, .ab-line:first-child { border-top: 0; }
.ab-line small { color: var(--fx-dim); font-size: 13px; }
.ab-fl { display: inline-flex; gap: 6px; }
.ab-small { font-size: 12.5px; line-height: 1.45; color: var(--fx-dim); }
.ab-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-quick span { padding: 8px 12px; border-radius: 10px; background: #0B1022; color: #fff; font: 600 13px/1.2 Inter, sans-serif; }
.ab-quick span + span { background: #EEF0FF; color: #3730A3; }
.ab-more { justify-self: start; color: #3730A3; font-weight: 600; font-size: 14px; }
.ab-days { display: flex; gap: 4px; }
.ab-days span { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font: 600 12px/1 Inter, sans-serif; color: var(--fx-dim); background: #F6F7FB; }
.ab-days span.is-on { background: var(--fx-indigo); color: #fff; }
.ab-box .ab-mac { font-size: 13px; grid-template-columns: 104px minmax(0, 1fr) auto; }
.ab-box .ab-meal b { font-size: 14px; } .ab-box .ab-meal small { font-size: 12.5px; }
.ab-box .ab-ph { width: 44px; height: 44px; border-radius: 12px; }
.ab-box .ab-ph svg { width: 20px; height: 20px; }
.ab-box .ab-bar { height: 10px; }
.ab-box .ab-wo { font-size: 14.5px; }
.ab-box .ab-wo small { font-size: 12.5px; }
.ab-box .ab-flag { font-size: 11.5px; }
.ab-spark { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.ab-spark i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #818CF8, #C7D2FE); transform-origin: bottom; }
.ab-spark.is-12 i { background: linear-gradient(180deg, #06B6D4, #A5F3FC); }
.ab-app.is-js .ab-pn:not([hidden]) .ab-spark i { animation: ab-grow .6s var(--fx-ease) both; }
.ab-spark i:nth-child(2n) { animation-delay: .05s !important; } .ab-spark i:nth-child(3n) { animation-delay: .1s !important; }
@keyframes ab-grow { from { transform: scaleY(0); } }
.ab-line-c { width: 100%; height: 80px; }
.ab-line-c path { fill: none; stroke: #6366F1; stroke-width: 3; stroke-linecap: round; }
.ab-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-gal span { display: grid; gap: 6px; font-size: 11.5px; line-height: 1.3; color: var(--fx-dim); }
.ab-gal .ab-ph { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 12px; }
.ab-thread { max-width: 560px; }
.ab-thread .ab-bub { font-size: 14.5px; }
.ab-thread .ab-bub.is-img { width: 150px; height: 110px; padding: 0; display: grid; place-items: center; background: linear-gradient(135deg, #C7D2FE, #6366F1); color: #fff; }
.ab-thread .ab-bub.is-img svg { width: 26px; height: 26px; }
.ab-thread .ab-draft { font-size: 13.5px; }
.ab-cap { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--fx-dim); min-height: 3.1em; }
@media (max-width: 760px) {
  .ab-g2 { grid-template-columns: minmax(0, 1fr); }
  .ab-head { padding: 18px 16px 14px; }
  .ab-hacts { width: 100%; }
  .ab-hacts span { padding: 8px 11px; font-size: 13px; }
  .ab-tabs { padding: 0 8px; }
  .ab-panels { padding: 16px 12px 18px; }
  .ab-app.is-js .ab-panels { min-height: 0; }
  .ab-well { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-kpis.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-box { padding: 14px; }
}

/* #sehen: what the coach sees, what stays private */
.ab-see { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.ab-see-c { padding: 28px 28px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.ab-see-c.is-no { background: linear-gradient(165deg, #0F1533, #0B1022); border-color: #1E254A; color: rgba(226, 232, 255, .78); }
.ab-see-c h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 19px; line-height: 1.3; }
.ab-see-c.is-no h3 { color: #fff; }
.ab-see-c h3 svg { width: 22px; height: 22px; flex: none; color: var(--fx-indigo); }
.ab-see-c.is-no h3 svg { color: var(--fx-cyan); }
.ab-see-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-see-c li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.55; color: var(--fx-dim); }
.ab-see-c.is-no li { color: rgba(226, 232, 255, .72); }
.ab-see-c li b { display: block; color: var(--fx-ink); font-size: 15.5px; margin-bottom: 2px; }
.ab-see-c.is-no li b { color: #fff; }
.ab-see-c li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #D1FAE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ab-see-c.is-no li::before { background: rgba(34, 211, 238, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='10' x='5' y='11' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 860px) { .ab-see { grid-template-columns: minmax(0, 1fr); } .ab-see-c { padding: 22px 20px 20px; } }

/* #plaene: by hand or with AI, one switch */
.ab-mode-top { display: flex; justify-content: center; margin-bottom: 26px; }
.ab-modes { max-width: 1080px; margin: 0 auto; }
.ab-mode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ab-modes:not(.is-js) .ab-mode + .ab-mode { margin-top: 18px; }
.ab-modes.is-js { display: grid; }
.ab-modes.is-js > .ab-mode { grid-area: 1 / 1; transition: opacity .45s var(--fx-ease), transform .55s var(--fx-ease), visibility 0s; }
.ab-modes.is-js[data-mode="hand"] > .is-ai, .ab-modes.is-js[data-mode="ai"] > .is-hand { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .ab-modes.is-js > .ab-mode { transition: none !important; transform: none !important; } }
.ab-mcard { display: grid; gap: 12px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .35); }
.ab-mk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 600 17px/1.3 Outfit, Inter, sans-serif; color: var(--fx-ink); }
.ab-mk svg { width: 22px; height: 22px; flex: none; color: var(--fx-indigo); }
.ab-mk .fx-pill, .ab-mk .ab-pro { margin-left: auto; }
.ab-mk2 { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.ab-ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #F6F7FB; }
.ab-ex-t { grid-row: 1 / span 2; align-self: center; padding: 5px 9px; border-radius: 8px; background: #E0E7FF; color: #3730A3; font: 600 12px/1.2 Inter, sans-serif; }
.ab-ex-t.is-b { background: #FEF3C7; color: #92400E; } .ab-ex-t.is-c { background: #D1FAE5; color: #047857; }
.ab-ex b { font-size: 15px; }
.ab-ex-v { font-size: 13.5px; color: var(--fx-dim); }
.ab-mfoot { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fx-dim); }
.ab-mfoot.is-free { padding: 12px 14px; border-radius: 14px; background: #F0FDF4; color: #065F46; }
.ab-mfoot.is-free b { color: #064E3B; }
.ab-mcard .ab-kv { font-size: 16px; padding: 12px 14px; border-radius: 14px; }
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: st; }
.ab-steps li { position: relative; padding: 10px 0 10px 44px; font-size: 14.5px; line-height: 1.5; color: var(--fx-dim); counter-increment: st; }
.ab-steps li b { display: block; color: var(--fx-ink); font-size: 15px; }
.ab-steps li::before { content: counter(st); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4F46E5, #0EA5E9); color: #fff; font: 600 13px/30px Inter, sans-serif; text-align: center; }
.ab-steps li + li::after { content: ""; position: absolute; left: 14px; top: -14px; height: 22px; width: 2px; background: #C7D2FE; }
@media (max-width: 860px) { .ab-mode { grid-template-columns: minmax(0, 1fr); } .ab-mcard { padding: 20px 18px; } }
@media (max-width: 560px) { .ab-kv.is-4 { grid-template-rows: none; grid-template-columns: repeat(2, auto minmax(0, 1fr)); grid-auto-flow: row; align-items: baseline; gap: 8px 10px; } }

/* #checkins: the form builder and the answer at the coach's */
.ab-ci-tool { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; max-width: 1080px; margin: 0 auto; }
.ab-bld { display: grid; gap: 22px; padding: 26px; border-radius: 26px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); }
.ab-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-qs button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fx-line); background: rgba(255, 255, 255, .04); color: rgba(226, 232, 255, .82); font: 600 14px/1 Inter, sans-serif; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
#abQs button::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5B4FC' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--fx-ease); }
.ab-qs button[aria-pressed="true"] { background: #fff; color: var(--fx-ink); border-color: #fff; }
#abQs button[aria-pressed="true"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.ab-qs button:hover { border-color: rgba(165, 180, 252, .5); }
.ab-qs button:disabled { cursor: default; }
.ab-when { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(34, 211, 238, .08); color: #A5F3FC; font-size: 15px; line-height: 1.5; }
.ab-types { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(226, 232, 255, .6); }
.ab-ci-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ab-tphone { display: grid; gap: 10px; padding: 20px 18px 18px; border-radius: 30px; background: #fff; color: var(--fx-ink); box-shadow: 0 0 0 8px #0E1330, 0 0 0 9px rgba(165, 180, 252, .24), 0 40px 70px -30px rgba(0, 0, 0, .8); margin: 9px 9px 0; }
.ab-tp-h { margin: 0; font: 600 17px/1.2 Outfit, Inter, sans-serif; }
.ab-tp-c { margin: 0; font-size: 13px; color: var(--fx-dim); }
.ab-tp-bar { height: 6px; border-radius: 6px; background: #EEF0F6; overflow: hidden; }
.ab-tp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6366F1, #06B6D4); transform-origin: left; transform: scaleX(var(--v)); transition: transform .45s var(--fx-ease); }
.ab-tp-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 40px; }
.ab-tp-q li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #F6F7FB; font-size: 14px; }
.ab-tp-q li span { color: #334155; }
.ab-tp-q li b { white-space: nowrap; }
.ab-tp-q li b.is-bad { color: #BE123C; }
.ab-tp-q li.is-empty { justify-content: center; color: var(--fx-dim); background: none; border: 1px dashed #CBD5E1; }
.ab-tp-q li.is-new { animation: ab-fade .4s var(--fx-ease); }
@media (prefers-reduced-motion: reduce) { .ab-tp-q li.is-new { animation: none; } }
.ab-tp-btn { padding: 12px; border-radius: 14px; background: #0B1022; color: #fff; text-align: center; font: 600 14.5px/1.2 Inter, sans-serif; }
.ab-rev { display: grid; gap: 10px; padding: 20px; border-radius: 22px; background: #fff; color: var(--fx-ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ab-rev-k { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #4338CA; }
.ab-rev-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ab-rev-h b { font: 600 17px/1.2 Outfit, Inter, sans-serif; }
.ab-rev-h .ab-flag { font-size: 13px; transition: background-color .3s, color .3s; }
.ab-rev-p { font-size: 14.5px; line-height: 1.5; color: #475569; }
.ab-rev-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-rev-a > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: #EEF0FF; color: #3730A3; font: 600 13px/1.2 Inter, sans-serif; }
.ab-rev-a > span.is-go { background: #0B1022; color: #fff; }
.ab-rev-a svg { width: 15px; height: 15px; }
.ab-pulse-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 1080px; margin: 72px auto 0; padding-top: 56px; border-top: 1px solid var(--fx-line); }
.ab-pg-intro h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.ab-pg-intro p { color: rgba(226, 232, 255, .76); font-size: 16.5px; line-height: 1.65; margin: 0; }
.ab-pg-intro .fx-help { margin-top: 20px; }
.fx-help a.is-dark { background: rgba(255, 255, 255, .07); color: #E0E7FF; }
.fx-help a.is-dark:hover { background: rgba(255, 255, 255, .12); }
.ab-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ab-reasons li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); }
.ab-reasons li::before { content: ""; grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: #34D399; box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.ab-reasons li.is-bad::before { background: #FB7185; box-shadow: 0 0 10px rgba(251, 113, 133, .7); }
.ab-reasons b { color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ab-reasons small { grid-column: 2; font-size: 12.5px; line-height: 1.4; color: rgba(226, 232, 255, .6); }
@media (max-width: 960px) { .ab-ci-tool, .ab-pulse-grid { grid-template-columns: minmax(0, 1fr); } .ab-ci-tool { max-width: 640px; } .ab-pulse-grid { gap: 26px; margin-top: 56px; padding-top: 44px; } }
@media (max-width: 560px) { .ab-bld { padding: 20px 16px; } .ab-qs button { min-height: 38px; padding: 0 12px; font-size: 13.5px; } .ab-reasons { grid-template-columns: minmax(0, 1fr); } }

/* #chat: three ways to reach someone */
.ab-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-tc, .ab-gc { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.ab-tc-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, #EEF0FF, #E0F2FE); color: var(--fx-indigo); }
.ab-tc-ic svg { width: 22px; height: 22px; }
.ab-tc h3, .ab-gc h3 { margin: 4px 0 0; font-size: 20px; }
.ab-tc p, .ab-gc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fx-dim); }
.ab-tc-f { padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px !important; }
@media (max-width: 900px) { .ab-three { grid-template-columns: minmax(0, 1fr); } }

/* #ziele: sprints, challenges, bonus points */
.ab-goals { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ab-gc.is-big { grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.ab-gc .fx-demo { justify-self: start; margin-top: 4px; }
.ab-gc.is-big > div:last-child { display: grid; gap: 10px; }
.ab-ring-w { position: relative; width: 150px; aspect-ratio: 1; }
.ab-ring2 { width: 100%; height: 100%; transform: rotate(-90deg); }
.ab-ring2 circle { fill: none; stroke: #EEF0F6; stroke-width: 10; }
.ab-ring2 .ab-ring-v { stroke: #6366F1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 33; }
.fx-anim .ab-ring-w.is-in .ab-ring-v { animation: ab-ring 1.6s var(--fx-ease) both; }
@keyframes ab-ring { from { stroke-dashoffset: 100; } }
.ab-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ab-ring-c b { font: 600 30px/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.ab-ring-c small { margin-top: 4px; font-size: 12px; color: var(--fx-dim); }
@media (max-width: 1023px) { .ab-goals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ab-gc.is-big { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ab-goals { grid-template-columns: minmax(0, 1fr); } .ab-gc.is-big { grid-template-columns: minmax(0, 1fr); justify-items: start; } .ab-ring-w { width: 130px; } }

/* #ava */
.ab-ava-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 0 !important; }

/* #pro: seats and plans */
.ab-seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; max-width: 1080px; margin: 0 auto; }
.ab-seat-ctl { display: grid; gap: 20px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .35); }
.ab-seat-ctl .fx-val { font: 600 24px/1.1 Outfit, Inter, sans-serif; color: var(--fx-ink); }
.ab-seat-ctl .fx-ctl > span { display: grid; gap: 6px; }
.ab-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.ab-dots i { aspect-ratio: 1; border-radius: 50%; background: #EEF0F6; transition: background-color .3s var(--fx-ease), transform .3s var(--fx-spring); }
.ab-dots i.is-on { background: var(--c, #6366F1); transform: scale(1.06); }
.ab-dots i.is-lim { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #94A3B8; }
.ab-dots[data-plan="free"] { --c: #10B981; } .ab-dots[data-plan="pro"] { --c: #6366F1; } .ab-dots[data-plan="elite"] { --c: #0EA5E9; }
.ab-verdict { display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: #EEF0FF; color: #312E81; font-size: 15px; line-height: 1.55; }
.ab-verdict b { font: 600 22px/1.2 Outfit, Inter, sans-serif; color: var(--fx-ink); letter-spacing: -.01em; }
.ab-matrix { display: grid; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.ab-mr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 96px); align-items: center; border-top: 1px solid #EEF0F6; }
.ab-mr:first-child { border-top: 0; }
.ab-mr > span { padding: 13px 10px; font-size: 14.5px; line-height: 1.4; text-align: center; transition: background-color .35s var(--fx-ease); }
.ab-mr > span:first-child { text-align: left; padding-left: 18px; color: var(--fx-ink); }
.ab-mh > span { font: 600 14px/1.2 Inter, sans-serif; color: var(--fx-dim); padding-top: 16px; padding-bottom: 12px; }
.ab-matrix[data-plan="free"] [data-p="free"], .ab-matrix[data-plan="pro"] [data-p="pro"], .ab-matrix[data-plan="elite"] [data-p="elite"] { background: #EEF0FF; }
.ab-matrix[data-plan="free"] .ab-mh [data-p="free"], .ab-matrix[data-plan="pro"] .ab-mh [data-p="pro"], .ab-matrix[data-plan="elite"] .ab-mh [data-p="elite"] { color: #3730A3; }
.ab-mr .y, .ab-mr .n { font-size: 0; }
.ab-mr .y::before, .ab-mr .n::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; background: #D1FAE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ab-mr .n::before { background: #F1F5F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ab-mr > span:not(:first-child):not(.y):not(.n) { font: 600 15px/1.2 Inter, sans-serif; color: var(--fx-ink); }
.ab-seatrules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 1080px; margin: 22px auto 0; }
.ab-seatrules p { display: flex; gap: 12px; margin: 0; padding: 16px 18px; border-radius: 18px; background: #F6F7FB; font-size: 14.5px; line-height: 1.55; color: var(--fx-dim); }
.ab-seatrules svg { width: 20px; height: 20px; flex: none; color: var(--fx-indigo); margin-top: 2px; }
.ab-seatrules b { display: block; color: var(--fx-ink); }
.ab-ad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 1080px; margin: 14px auto 0; }
.ab-adc { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ab-adc .ab-mk { font-size: 16.5px; }
.ab-adc.is-del .ab-mk svg { color: #E11D48; }
.ab-adc p:not(.ab-mk) { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fx-dim); }
.t-feature #pro .fx-help { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 960px) { .ab-seats { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .ab-seatrules, .ab-ad { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
@media (max-width: 560px) {
  .ab-seat-ctl { padding: 20px 18px; }
  .ab-mr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-mr > span { padding: 4px 4px 12px; font-size: 13.5px; }
  .ab-mr > span:first-child { grid-column: 1 / -1; padding: 12px 14px 6px; font-weight: 600; }
  .ab-mh > span:first-child { display: none; }
  .ab-mh > span { padding: 14px 4px 10px; }
}

/* #ehrlich: what is not there, without a clock (nothing here is promised) */
.ab-lim b::before { background: #F1F5F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* #weiter door art: a roster */
.ab-door { position: absolute; inset: 0; display: grid; align-content: center; gap: 7px; }
.ab-door i { display: block; height: 11px; border-radius: 6px; background: rgba(165, 180, 252, .16); width: calc(100% - var(--i) * 18px); margin-left: calc(var(--i) * 9px); position: relative; }
.ab-door i::before { content: ""; position: absolute; left: -2px; top: -3px; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #22D3EE); }
.ab-door i:nth-child(2)::before { background: linear-gradient(135deg, #F59E0B, #F97316); } .ab-door i:nth-child(4)::before { background: linear-gradient(135deg, #10B981, #0EA5E9); }
/* <<< fx-betreuen */