/* ==========================================================================
   Pfotenheft – nachgebaute App-Screens & Animationszustände
   Alle Maße in em: 1em = 1/20 der Handybreite (bei 300px = 15px).
   Zustände setzt scenes.js als Klassen "s-…" auf die .stage.
   ========================================================================== */

/* ---------- Gerät ---------- */
.device {
  --e: calc(var(--pw, 300px) / 20);
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--pw, 300px);
  height: calc(var(--pw, 300px) * 2.08);
  padding: .52em;
  border-radius: 3.05em;
  background: #0B0C0E;
  font-size: var(--e);
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  box-shadow:
    0 0 0 .2em #2A2F36,
    0 0 0 .27em #3B414A,
    0 2.6em 5em -1.6em rgba(0, 0, 0, .75),
    0 1.2em 2.4em -1.2em rgba(0, 0, 0, .5);
  -webkit-user-select: none;
  user-select: none;
}
.device::before, .device::after {
  content: "";
  position: absolute;
  width: .24em;
  background: #2A2F36;
}
.device::before { left: -.46em; top: 7.4em; height: 2.2em; border-radius: .2em 0 0 .2em; box-shadow: 0 3.3em 0 #2A2F36, 0 6.4em 0 #2A2F36; }
.device::after { right: -.46em; top: 11em; height: 3.8em; border-radius: 0 .2em .2em 0; }

.screen {
  --screen-bg: var(--soft);
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: 2.55em;
  background: var(--screen-bg);
  color: var(--ink);
  clip-path: inset(0 round 2.55em);
}
/* Schleier für den Übergang am Ende einer Schleife */
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 78;
  background: var(--screen-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s;
}
.is-outro .screen::before { opacity: 1; }
/* Glanz */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 90;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 34%);
  pointer-events: none;
}

.island {
  position: absolute;
  z-index: 80;
  top: .6em;
  left: 50%;
  width: 5.5em;
  height: 1.6em;
  margin-left: -2.75em;
  border-radius: 1em;
  background: #000;
}
.sbar {
  position: absolute;
  z-index: 79;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.85em;
  padding: .15em 1.5em 0 2.05em;
  color: var(--ink);
  pointer-events: none;
  transition: color .4s;
}
.sbar__time { font-size: .74em; font-weight: 600; }
.sbar__icons { display: flex; align-items: center; gap: .3em; }
.sbar__icons svg { height: .62em; }
.sbar__sig { width: .93em; }
.sbar__wifi { width: .83em; }
.sbar__bat { width: 1.4em; }
[data-sbar="light"] .sbar { color: #fff; }

.home-ind {
  position: absolute;
  z-index: 81;
  bottom: .42em;
  left: 50%;
  width: 6.4em;
  height: .27em;
  margin-left: -3.2em;
  border-radius: .2em;
  background: rgba(18, 20, 23, .85);
  pointer-events: none;
  transition: background-color .4s;
}
[data-sbar="light"] .home-ind { background: rgba(255, 255, 255, .92); }

/* Inhaltsbereich unter der Statusleiste */
.app {
  position: absolute;
  inset: 2.85em 0 0;
  display: flex;
  flex-direction: column;
  padding: .45em 1.1em 1.6em;
}

/* ---------- Bausteine ---------- */
.ui-title { font-size: 1.08em; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.ui-sub { color: var(--gray); font-size: .64em; line-height: 1.35; }
.ui-eyebrow { display: block; font-size: .52em; font-weight: 600; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.ui-h { margin-top: .95em; font-size: .72em; font-weight: 700; }
.c-coral { color: var(--coral); }
.c-violet { color: var(--violet); }

.card { border-radius: .95em; background: #fff; box-shadow: 0 .06em .2em rgba(18, 20, 23, .05); }

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: 2.15em;
  padding: 0 .95em;
  border: 1px solid var(--line);
  border-radius: 1.1em;
  background: #fff;
  color: var(--gray);
  font-size: .56em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s, opacity .35s, transform .45s var(--ease-spring);
}

.ui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  height: 3.3em;
  border-radius: 1.65em;
  font-size: .7em;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .35s, color .35s, box-shadow .35s, opacity .35s, scale .15s;
}
.ui-btn .i { width: 1.2em; height: 1.2em; transition: transform .6s var(--ease-spring); }
.ui-btn--lime { background: var(--lime); color: var(--ink); }
.ui-btn--ink { background: var(--ink); color: var(--lime); }
.ui-btn--outline { border: 1px solid var(--line); background: #fff; color: var(--ink); }

.chip-row { display: flex; gap: .3em; margin-top: .55em; }

/* Zwei Texte an derselben Stelle, per Zustand getauscht */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .45em; transition: opacity .3s, transform .45s var(--ease-out); }
.swap__b { opacity: 0; transform: translateY(.7em); }
.swap .i { width: 1.2em; height: 1.2em; }

/* Getippt wird … */
.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -.18em;
  background: var(--violet);
  animation: caret .8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.is-pressed { scale: .93; }
.ui-chip, .ui-btn, .rv, .team, .tstep, .composer, .aic, .push, .lang, .tcheck { transition-property: background-color, border-color, color, box-shadow, opacity, transform, scale; }

/* Videos (Farbverlauf wie im Flyer) */
.vid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: .8em;
  background: linear-gradient(135deg, var(--v1), var(--v2));
}
.vid--vc { --v1: var(--violet); --v2: var(--coral); }
.vid--bv { --v1: var(--blue); --v2: var(--violet); }
.vid--co { --v1: var(--coral); --v2: #FFB36B; }
.vid--thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1em;
  height: 2.2em;
  border-radius: .55em;
}
.wm {
  position: absolute;
  z-index: -1;
  color: #fff;
  pointer-events: none;
}
.wm--1 { right: 6%; bottom: 10%; width: 32%; aspect-ratio: 1; opacity: .14; transform: rotate(-14deg); }
.wm--2 { left: 10%; top: 12%; width: 18%; aspect-ratio: 1; opacity: .1; transform: rotate(16deg); }

.play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 2.6em; height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  color: var(--ink);
  box-shadow: 0 .3em 1em rgba(18, 20, 23, .2);
  transition: opacity .3s, transform .45s var(--ease-spring);
}
.play .i { width: 1.05em; height: 1.05em; margin-left: .14em; }
.play--sm {
  position: static;
  width: 1.3em; height: 1.3em;
  margin: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}
.play--sm .i { width: .95em; height: .95em; margin-left: .08em; }

.vid__dog {
  position: absolute;
  left: 50%;
  bottom: 1.2em;
  z-index: 0;
  width: 5em;
  margin-left: -2.5em;
}
.vid__dog svg { width: 100%; height: auto; aspect-ratio: 140 / 170; }
.vid__dog::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%; right: 18%; bottom: -.15em;
  height: .6em;
  border-radius: 50%;
  background: rgba(18, 20, 23, .22);
}

.cc {
  position: absolute;
  top: calc(var(--e) * 3.2);
  right: calc(var(--e) * .9);
  padding: .2em .5em;
  border-radius: .35em;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: .5em;
  font-weight: 700;
}

.caption {
  position: absolute;
  left: .8em; right: .8em;
  bottom: 3.2em;
  z-index: 2;
  display: grid;
  justify-items: center;
}
.caption > span {
  grid-area: 1 / 1;
  padding: .4em .75em;
  border-radius: .45em;
  background: rgba(18, 20, 23, .62);
  color: #fff;
  font-size: .56em;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.s-cap1 .caption__a { opacity: 1; transform: none; }
.s-cap2 .caption__a { opacity: 0; transform: translateY(-.5em); }
.s-cap2 .caption__b { opacity: 1; transform: none; }

/* Push-Nachricht */
.push {
  position: absolute;
  z-index: 75;
  left: .55em; right: .55em;
  display: flex;
  gap: .6em;
  padding: .7em .75em;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--ink);
  box-shadow: 0 .9em 2em -.6em rgba(18, 20, 23, .4);
  opacity: 0;
  transition: transform .75s var(--ease-spring), opacity .4s, scale .15s;
}
.push__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3em; height: 2.3em;
  border-radius: .62em;
  background: linear-gradient(160deg, #FF8E6E, #FF6A45);
  color: #fff;
}
.push__icon .i { width: 1.35em; height: 1.35em; }
.push__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.push__top { display: flex; justify-content: space-between; color: var(--gray); font-size: .52em; letter-spacing: .03em; text-transform: uppercase; }
.push__top b { font-weight: 600; }
.push__title { margin-top: .25em; font-size: .66em; font-weight: 700; line-height: 1.25; }
.push__text { font-size: .62em; line-height: 1.3; color: #3E4348; }

/* Toast */
.toast {
  position: absolute;
  z-index: 76;
  top: calc(var(--e) * 3.1);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: max-content;
  max-width: 88%;
  padding: .8em 1.15em;
  border-radius: 1.3em;
  background: var(--ink);
  color: #fff;
  font-size: .62em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 .8em 2em -.6em rgba(18, 20, 23, .55);
  opacity: 0;
  transform: translate(-50%, -1.6em) scale(.9);
  transition: opacity .35s, transform .55s var(--ease-spring);
  pointer-events: none;
}
.toast .i { width: 1.3em; height: 1.3em; color: var(--lime); }
.toast--star .i { color: #FFC857; }
.s-toast .toast { opacity: 1; transform: translate(-50%, 0); }

/* KI-Label */
.ai-label {
  display: flex;
  align-items: center;
  gap: .45em;
  color: var(--violet);
  font-size: .58em;
  font-weight: 600;
  letter-spacing: .01em;
}
.ai-label .i { width: 1.25em; height: 1.25em; animation: twinkle 2.4s ease-in-out infinite; }

/* ---------- Tipp-Finger & Konfetti ---------- */
.finger {
  position: absolute;
  left: 0; top: 0;
  z-index: 85;
  width: 2.5em; height: 2.5em;
  margin: -1.25em 0 0 -1.25em;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--x, 9em), var(--y, 44em));
  transition: transform .62s cubic-bezier(.45, .05, .2, 1), opacity .3s;
}
.finger.is-visible { opacity: 1; }
.finger i {
  position: absolute;
  inset: 0;
  border: .13em solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: rgba(120, 126, 132, .35);
  box-shadow: 0 .35em .9em rgba(18, 20, 23, .35), inset 0 0 0 1px rgba(18, 20, 23, .06);
  transition: transform .14s ease-out;
}
.finger::after {
  content: "";
  position: absolute;
  inset: 0;
  border: .14em solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  opacity: 0;
}
.finger.is-press i { transform: scale(.78); }
.finger.is-press::after { animation: tap-ring .6s ease-out; }
@keyframes tap-ring {
  0% { opacity: .95; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2); }
}

.confetti {
  position: absolute;
  z-index: 84;
  width: .5em; height: .85em;
  margin: -.42em 0 0 -.25em;
  border-radius: .1em;
  pointer-events: none;
  animation: confetti var(--t, 1000ms) cubic-bezier(.2, .7, .3, 1) forwards;
}
.confetti--lime { background: var(--lime); color: var(--lime); }
.confetti--coral { background: var(--coral); color: var(--coral); }
.confetti--violet { background: var(--violet); color: var(--violet); }
.confetti--ink { background: var(--ink); color: var(--ink); }
.confetti--paw { width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; background: none; }
.confetti--paw svg { width: 100%; height: 100%; }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0) scale(.3); opacity: 1; }
  55% { transform: translate(calc(var(--dx) * .8), var(--dy)) rotate(calc(var(--r) * .6)) scale(1); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 2.6em)) rotate(var(--r)) scale(.9); opacity: 0; }
}

/* ---------- Steuerung der Animationen ---------- */
.is-instant *, .is-instant *::before, .is-instant *::after {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
.stage:not(.is-running) .screen *,
.stage:not(.is-running) .screen *::before,
.stage:not(.is-running) .screen *::after { animation-play-state: paused !important; }
.is-static .screen *, .is-static .screen *::before, .is-static .screen *::after { animation: none !important; transition: none !important; }
.is-outro .callout, .is-outro .arrow-group { opacity: 0 !important; transition: opacity .35s !important; }
.is-outro .hotspot { transform: translate(var(--hx, 0), var(--hy, 0)) scale(0) !important; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(.8) rotate(45deg); }
}
@keyframes blink { 50% { opacity: .15; } }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes ping-ring {
  0% { box-shadow: 0 0 0 0 var(--ring, rgba(123, 97, 255, .5)); }
  100% { box-shadow: 0 0 0 .7em rgba(123, 97, 255, 0); }
}

/* ==========================================================================
   Szene: Hero – Wochenübersicht (Kund:in)
   ========================================================================== */
.home .app { gap: .7em; }
.home__head { display: flex; align-items: center; justify-content: space-between; padding-top: .35em; }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6em; height: 2.6em;
  overflow: hidden;
  border: .14em solid #fff;
  border-radius: 50%;
  background: #F4E8D8;
  box-shadow: 0 .2em .6em rgba(18, 20, 23, .14);
}
.avatar svg { width: 120%; height: 120%; margin-top: .35em; }

.week {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: .9em 1em;
  border-radius: 1em;
  background: var(--ink);
  color: #fff;
}
.week__info { display: flex; flex-direction: column; gap: .35em; }
.week__label { color: var(--on-dark-2); font-size: .54em; }
.week__count { font-size: 1.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.week__count b { display: inline-block; font-weight: 700; }
.s-done .week__count b { animation: pop .6s var(--ease-spring); }
.week__bars { display: flex; align-items: flex-end; gap: .3em; height: 3.1em; }
.week__bars i {
  width: .5em;
  height: 0;
  border-radius: .25em;
  background: var(--lime);
  transition: height .75s var(--ease-spring) calc(var(--i) * 70ms), background-color .4s;
}
.s-in .week__bars i { height: calc(var(--h) * 100%); }
.week__bars .is-today, .week__bars .is-rest { background: #3A3F46; }
.s-done .week__bars .is-today { height: 100%; background: var(--lime); transition-delay: 0s; }

.hw-card { padding: .5em; }
.hw-card__vid { height: 8.2em; border-radius: .7em; }
.vid__dur {
  position: absolute;
  right: calc(var(--e) * .5);
  bottom: calc(var(--e) * .45);
  padding: .2em .5em;
  border-radius: .45em;
  background: rgba(18, 20, 23, .45);
  color: #fff;
  font-size: .5em;
  font-weight: 600;
}
.hw-card__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: .5em; padding: .6em .3em .25em; }
.hw-card__title { margin-top: .2em; font-size: .84em; font-weight: 700; }

.row-card { display: flex; align-items: center; gap: .7em; padding: .6em .7em; transition: box-shadow .4s; }
.row-card__text { display: flex; flex: 1; flex-direction: column; gap: .1em; min-width: 0; }
.row-card__text b { font-size: .74em; font-weight: 700; }
.new-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--violet); }
.mile-row__ic { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .7em; background: rgba(123, 97, 255, .12); color: var(--violet); }
.mile-row__ic .i { width: 1.1em; height: 1.1em; }
.mile-row__bar { display: block; height: .28em; margin-top: .35em; overflow: hidden; border-radius: .2em; background: var(--line); }
.mile-row__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--violet); transition: width 1.2s var(--ease-out) .7s; }
.s-in .mile-row__bar i { width: 60%; }
.mile-row__pct { color: var(--violet); font-size: .62em; font-weight: 700; }
.s-pushed .newvid { box-shadow: 0 0 0 .14em var(--violet), 0 .8em 1.6em -.8em rgba(123, 97, 255, .7); }
.s-pushed .new-dot { animation: ping-ring 1.4s ease-out infinite; }

.done-btn { flex: none; margin-top: auto; }
.s-done .done-btn { background: var(--ink); color: var(--lime); }
.s-done .done-btn .i { transform: rotate(360deg) scale(1.15); }
.s-done .done-btn .swap__a { opacity: 0; transform: translateY(-.7em); }
.s-done .done-btn .swap__b { opacity: 1; transform: none; }

.push--home { top: 2.5em; transform: translateY(-9em); }
.s-push .push--home { opacity: 1; transform: none; }

/* ==========================================================================
   Szene 01: Filmen & zuweisen (Trainer:in)
   ========================================================================== */
.cam { --screen-bg: #0B0C0E; }
.cam__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2.55em;
  transform-origin: 50% 0;
  transition: transform .85s cubic-bezier(.65, 0, .25, 1), border-radius .85s;
}
.cam__scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background: linear-gradient(180deg, #3A5BFF 0%, #5B5CF9 34%, #7B61FF 52%, #8E6BF0 100%);
}
.cam__ground {
  position: absolute;
  z-index: -1;
  left: -20%; right: -20%;
  top: 41%; bottom: 0;
  border-radius: 50% 50% 0 0 / 3em 3em 0 0;
  background: linear-gradient(180deg, #9A8CFF 0%, #7F6BF7 40%, #6853E4 100%);
  box-shadow: inset 0 .16em 0 rgba(255, 255, 255, .28);
}
.cam__trail svg {
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  color: rgba(30, 16, 100, .55);
  opacity: 0;
  transform: rotate(180deg) scale(.4);
  transition: opacity .3s, transform .4s var(--ease-spring);
}
.cam__trail svg:nth-child(1) { --s: .8em; left: 45.5%; top: 45%; }
.cam__trail svg:nth-child(2) { --s: 1em; left: 51.5%; top: 49.5%; }
.cam__trail svg:nth-child(3) { --s: 1.2em; left: 43%; top: 54.5%; }
.cam__trail svg:nth-child(4) { --s: 1.45em; left: 53%; top: 60%; }
.cam__trail svg:nth-child(5) { --s: 1.7em; left: 40%; top: 66%; }
.cam__trail svg:nth-child(6) { --s: 2em; left: 55%; top: 72.5%; }
.s-rec .cam__trail svg { opacity: 1; transform: rotate(180deg); }
.s-rec .cam__trail svg:nth-child(1) { transition-delay: .35s; }
.s-rec .cam__trail svg:nth-child(2) { transition-delay: .8s; }
.s-rec .cam__trail svg:nth-child(3) { transition-delay: 1.25s; }
.s-rec .cam__trail svg:nth-child(4) { transition-delay: 1.7s; }
.s-rec .cam__trail svg:nth-child(5) { transition-delay: 2.15s; }
.s-rec .cam__trail svg:nth-child(6) { transition-delay: 2.6s; }

.cam__dog {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 9.4em;
  margin-left: -4.7em;
  transform: translateY(-11.6em) scale(.3);
  transform-origin: 50% 100%;
  transition: transform 3.1s cubic-bezier(.4, .15, .35, 1);
}
.cam__dog svg { width: 100%; height: auto; aspect-ratio: 140 / 170; }
.cam__dog::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 16%; right: 16%; bottom: -.3em;
  height: 1em;
  border-radius: 50%;
  background: rgba(18, 20, 23, .22);
}
.s-rec .cam__dog { transform: none; }
.cam__bob { display: block; }
.s-rec:not(.s-shot) .cam__bob { animation: dog-run .3s ease-in-out infinite alternate; }
@keyframes dog-run {
  from { transform: translateY(0) rotate(-2.5deg); }
  to { transform: translateY(-.55em) rotate(2.5deg); }
}

.cam__whistle { position: absolute; left: 50%; bottom: 8.4em; width: 0; height: 0; }
.cam__whistle i {
  position: absolute;
  left: 0; top: 0;
  width: 2.4em; height: 2.4em;
  margin: -1.2em 0 0 -1.2em;
  border: .18em solid transparent;
  border-top-color: rgba(255, 255, 255, .9);
  border-radius: 50%;
  opacity: 0;
}
.s-rec .cam__whistle i { animation: whistle 1s ease-out 2; }
.s-rec .cam__whistle i:nth-child(2) { animation-delay: .16s; }
.s-rec .cam__whistle i:nth-child(3) { animation-delay: .32s; }
@keyframes whistle {
  0% { opacity: .95; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.6); }
}
.cam__corners { position: absolute; inset: 5.6em 1.5em 10.6em; transition: transform .6s var(--ease-out); }
.cam__corners i { position: absolute; width: 1.4em; height: 1.4em; border: 0 solid rgba(255, 255, 255, .8); }
.cam__corners i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: .35em; }
.cam__corners i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: .35em; }
.cam__corners i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: .35em; }
.cam__corners i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: .35em; }
.s-rec .cam__corners { animation: focus-in .7s var(--ease-out); }
@keyframes focus-in {
  0% { transform: scale(1.08); opacity: .4; }
  100% { transform: none; opacity: 1; }
}

.cam__rec {
  position: absolute;
  top: calc(var(--e) * 3.3);
  left: 50%;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .4em .8em;
  border-radius: 1em;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: .6em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  transform: translateX(-50%);
}
.cam__rec i { width: .7em; height: .7em; border-radius: 50%; background: #FF4D4D; opacity: .35; }
.s-rec:not(.s-shot) .cam__rec i { opacity: 1; animation: blink 1s steps(1) infinite; }

.cam__len {
  position: absolute;
  top: calc(var(--e) * 3.3);
  left: calc(var(--e) * 1.2);
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .35em .7em;
  border-radius: 1em;
  background: var(--lime);
  color: var(--ink);
  font-size: .9em;
  font-weight: 700;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s .4s, transform .5s var(--ease-spring) .4s;
}
.cam__len .i { width: 1em; height: 1em; }
.s-shot .cam__len { opacity: 1; transform: none; }
.s-shot .cam__rec { opacity: 0; transition: opacity .3s; }

.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.s-shot .cam__flash { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

.cam__controls {
  position: absolute;
  left: 0; right: 0; bottom: 1.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  transition: opacity .4s, transform .5s var(--ease-out);
}
.cam__modes { display: flex; gap: 1.2em; color: rgba(255, 255, 255, .6); font-size: .52em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cam__modes .is-on { color: var(--lime); }
.cam__shutter {
  display: grid;
  place-items: center;
  width: 3.6em; height: 3.6em;
  border: .22em solid #fff;
  border-radius: 50%;
  transition: scale .15s;
}
.cam__shutter i {
  width: 2.7em; height: 2.7em;
  border-radius: 50%;
  background: #FF4D4D;
  transition: width .35s var(--ease-spring), height .35s var(--ease-spring), border-radius .35s;
}
.s-rec:not(.s-shot) .cam__shutter i { width: 1.35em; height: 1.35em; border-radius: .3em; }

.s-sheet .cam__view { transform: translateY(3.2em) scale(.42); border-radius: 5.4em; }
.s-sheet .cam__controls { opacity: 0; transform: translateY(2em); }

.sheet {
  position: absolute;
  z-index: 20;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: .65em 1.1em 1.7em;
  border-radius: 1.6em 1.6em 0 0;
  background: var(--soft);
  box-shadow: 0 -1em 2.4em -1em rgba(0, 0, 0, .6);
  transform: translateY(103%);
  transition: transform .75s cubic-bezier(.3, 1.15, .4, 1);
}
.s-sheet .sheet { transform: none; }
.sheet__handle { align-self: center; width: 2.4em; height: .28em; margin-bottom: .1em; border-radius: .2em; background: var(--mute); }

.memo {
  display: flex;
  align-items: center;
  gap: .55em;
  height: 2.5em;
  padding: 0 .45em 0 .3em;
  border: 1px solid var(--line);
  border-radius: 1.25em;
  background: #fff;
}
.memo__mic {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
}
.memo__mic .i { width: 1em; height: 1em; }
.memo__wave { display: flex; flex: 1; align-items: center; gap: .16em; height: 1.4em; }
.memo__wave i { flex: 1; height: 22%; border-radius: .2em; background: var(--mute); transition: height .35s, background-color .3s; }
.s-memo .memo__wave i { background: var(--violet); animation: wave .75s ease-in-out infinite alternate; }
.memo__wave i:nth-child(2n) { animation-duration: .6s; animation-delay: -.2s; }
.memo__wave i:nth-child(3n) { animation-duration: .95s; animation-delay: -.45s; }
.memo__wave i:nth-child(5n) { animation-duration: .7s; animation-delay: -.3s; }
.s-memodone .memo__wave i { height: 45%; background: var(--violet); animation: none; }
.s-memodone .memo__wave i:nth-child(3n) { height: 80%; }
.s-memodone .memo__wave i:nth-child(4n+1) { height: 30%; }
.s-memodone .memo__wave i:nth-child(5n) { height: 100%; }
@keyframes wave { 0% { height: 18%; } 100% { height: 100%; } }
.memo__time { color: var(--gray); font-size: .58em; font-weight: 600; font-variant-numeric: tabular-nums; }
.memo__ok {
  display: grid;
  place-items: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.memo__ok .i { width: .85em; height: .85em; }
.s-memodone .memo__ok { transform: none; }

.sheet .ai-label { opacity: 0; transform: translateY(.5em); transition: opacity .4s, transform .5s var(--ease-out); }
.s-ai .sheet .ai-label { opacity: 1; transform: none; }

.field {
  display: flex;
  align-items: center;
  height: 2.4em;
  padding: 0 .8em;
  border: 1px solid var(--line);
  border-radius: .75em;
  background: #fff;
  transition: border-color .3s, box-shadow .3s;
}
.field span { font-size: .72em; font-weight: 600; }
.s-ai .field { border-color: rgba(123, 97, 255, .55); box-shadow: 0 0 0 .2em rgba(123, 97, 255, .12); }
.s-sugg .field { border-color: var(--line); box-shadow: none; }

.sugg { display: flex; gap: .3em; }
.sugg .ui-chip { border-color: rgba(123, 97, 255, .25); background: rgba(123, 97, 255, .08); color: var(--violet); opacity: 0; transform: scale(.5); }
.s-sugg .sugg .ui-chip { opacity: 1; transform: none; }
.s-sugg .sugg .ui-chip:nth-child(2) { transition-delay: .1s; }
.s-sugg .sugg .ui-chip:nth-child(3) { transition-delay: .2s; }

.sheet__label { margin-top: .15em; color: var(--gray); font-size: .54em; }
.assign { display: flex; flex-wrap: wrap; gap: .35em; }
.pick .i { display: none; width: 1.15em; height: 1.15em; margin-left: -.25em; }
.pick em {
  margin-left: .1em;
  padding: .15em .5em;
  border-radius: .8em;
  background: var(--soft);
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}
.s-bruno .pick--bruno, .s-group .pick--group { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.s-bruno .pick--bruno .i, .s-group .pick--group .i { display: block; }
.s-group .pick--group em { background: rgba(18, 20, 23, .1); }

.send { margin-top: .3em; opacity: .4; }
.s-bruno .send { opacity: 1; }
.s-sent .send { background: var(--lime); color: var(--ink); }
.send__ok, .s-sent .send__go { display: none; }
.s-sent .send__ok { display: block; }

/* ==========================================================================
   Szene 02: Anschauen & üben (Kund:in)
   ========================================================================== */
.hw2 { --screen-bg: #1E1A3F; }
.lock {
  position: absolute;
  inset: 0;
  color: #fff;
  background:
    radial-gradient(120% 70% at 15% 5%, rgba(123, 97, 255, .95) 0%, transparent 60%),
    radial-gradient(100% 60% at 95% 95%, rgba(255, 122, 89, .85) 0%, transparent 62%),
    linear-gradient(180deg, #2B2465, #121417);
  transition: opacity .5s, transform .6s var(--ease-out);
}
.lock__paw { position: absolute; right: -2.8em; bottom: 6em; width: 12em; height: 12em; color: #fff; opacity: .07; transform: rotate(-18deg); }
.lock__clock { position: absolute; top: 3.5em; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.lock__icon { width: .95em; height: .95em; opacity: .9; }
.lock__date { margin-top: .45em; font-size: .78em; font-weight: 500; opacity: .92; }
.lock__time { margin-top: .02em; font-size: 4.4em; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.lock__bottom { position: absolute; left: 1.8em; right: 1.8em; bottom: 2.1em; display: flex; justify-content: space-between; }
.lock__bottom span {
  display: grid;
  place-items: center;
  width: 2.9em; height: 2.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lock__bottom .i { width: 1.2em; height: 1.2em; }

.push--lock { top: 16.6em; transform: translateY(2em) scale(.92); }
.s-push .push--lock { opacity: 1; transform: none; }
.s-app .lock { opacity: 0; transform: scale(1.08); }

.player-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--soft);
  opacity: 0;
  transform: translateY(8em) scale(.86);
  transform-origin: 50% 30%;
  transition: opacity .4s, transform .7s var(--ease-out);
}
.s-app .player-app { opacity: 1; transform: none; }
.s-app .hw2 .home-ind { background: rgba(18, 20, 23, .85); }

.player { flex: none; height: 15em; border-radius: 0 0 1.5em 1.5em; }
.player .vid__dog { left: 70%; bottom: 3.3em; width: 5.2em; margin-left: -2.6em; }
.s-play .player .vid__dog { animation: hop 2.2s ease-in-out infinite; }
.s-stop .player .vid__dog { animation: none; }
@keyframes hop {
  0%, 55%, 100% { transform: translateY(0); }
  66% { transform: translateY(-.7em); }
  77% { transform: translateY(0); }
  85% { transform: translateY(-.25em); }
}
.player .play { top: 46%; }
.s-play .player .play { opacity: 0; transform: scale(.5); }
.s-stop .player .play { opacity: 1; transform: none; }
.player__bar { position: absolute; left: 1em; right: 1em; bottom: .9em; display: flex; flex-direction: column; gap: .3em; }
.player__times { display: flex; justify-content: space-between; color: #fff; font-size: .5em; font-weight: 600; font-variant-numeric: tabular-nums; }
.player__track { position: relative; height: .22em; border-radius: .2em; background: rgba(255, 255, 255, .35); }
.player__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--prog, 0) * 100%); border-radius: inherit; background: #fff; }
.player__track b {
  position: absolute;
  top: 50%;
  left: calc(var(--prog, 0) * 100%);
  width: .7em; height: .7em;
  margin: -.35em 0 0 -.35em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .1em .3em rgba(0, 0, 0, .25);
}

.player-app__body { display: flex; flex: 1; flex-direction: column; padding: .9em 1.1em 1.6em; }
.player-app__body .done-btn { margin-top: .6em; }
.today { display: flex; align-items: center; gap: .6em; margin-top: auto; padding: .65em .8em; border-radius: .8em; background: #fff; }
.today__label { font-size: .6em; font-weight: 700; }
.today__dots { display: flex; flex: 1; gap: .3em; }
.today__dots i { flex: 1; height: .42em; border-radius: .21em; background: var(--line); transition: background-color .4s .15s; }
.today__dots i.f, .s-done .today__dots i:nth-child(2) { background: var(--lime); }
.today__txt { color: var(--gray); font-size: .56em; white-space: nowrap; }
.today__txt b { color: var(--ink); font-weight: 700; }
.tsteps { display: grid; gap: .4em; margin: .8em 0 0; padding: 0; list-style: none; }
.tstep {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .55em .6em;
  border: 1px solid transparent;
  border-radius: .8em;
  background: #fff;
  transition-duration: .35s;
}
.tcheck {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35em; height: 1.35em;
  border: 1.5px solid var(--mute);
  border-radius: 50%;
  color: var(--ink);
  transition-duration: .3s;
}
.tcheck .i { width: .82em; height: .82em; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .4s .1s; }
.tstep__txt { font-size: .62em; }
.tstep__txt b { margin-right: .55em; color: var(--violet); font-weight: 700; font-variant-numeric: tabular-nums; }
.s-act1 .tstep--1, .s-act2 .tstep--2 { border-color: rgba(123, 97, 255, .45); box-shadow: 0 0 0 .18em rgba(123, 97, 255, .1); }
.s-t1 .tstep--1, .s-t2 .tstep--2 { border-color: transparent; box-shadow: none; }
.s-t1 .tstep--1 .tcheck, .s-t2 .tstep--2 .tcheck { border-color: var(--lime); background: var(--lime); }
.s-t1 .tstep--1 .tcheck .i, .s-t2 .tstep--2 .tcheck .i { stroke-dashoffset: 0; }
.s-t1 .tstep--1 .tstep__txt, .s-t2 .tstep--2 .tstep__txt { color: var(--gray); }

/* ==========================================================================
   Szene 03: Video-Feedback
   ========================================================================== */
.fb .app { gap: .6em; }
.fb__head { padding-top: .35em; }
.fb__vid { flex: none; height: 10.4em; }
.fb__vid .vid__dog { left: 70%; bottom: 1.1em; width: 5em; margin-left: -2.5em; }
.s-review .fb__vid .vid__dog { animation: hop 2.2s ease-in-out infinite; }
.fb__vid .play { transition: opacity .3s, transform .45s var(--ease-spring); }
.s-review .fb__vid .play { opacity: 0; transform: scale(.5); }
.s-jump .fb__vid .play { opacity: 1; transform: none; }
.vid-tag {
  position: absolute;
  left: calc(var(--e) * .6);
  bottom: calc(var(--e) * .6);
  padding: .35em .75em;
  border-radius: 1em;
  background: rgba(18, 20, 23, .35);
  color: #fff;
  font-size: .5em;
  font-weight: 600;
}
.upload {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55em;
  background: rgba(18, 20, 23, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff;
  opacity: 0;
  transition: opacity .4s;
}
.upload__icon { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.upload__icon .i { width: 1.15em; height: 1.15em; animation: up-bob 1s ease-in-out infinite; }
@keyframes up-bob { 50% { transform: translateY(-.2em); } }
.upload__txt { font-size: .58em; font-weight: 600; font-variant-numeric: tabular-nums; }
.upload__bar { width: 58%; height: .25em; overflow: hidden; border-radius: .2em; background: rgba(255, 255, 255, .25); }
.upload__bar i { display: block; width: calc(var(--up, 0) * 100%); height: 100%; border-radius: inherit; background: var(--lime); }
.s-uploading .upload { opacity: 1; }
.s-uploaded .upload { opacity: 0; }

.tl { position: relative; flex: none; height: 1.2em; margin: 0 .35em; }
.tl__track { position: absolute; left: 0; right: 0; top: 50%; height: .24em; margin-top: -.12em; overflow: hidden; border-radius: .2em; background: var(--line); }
.tl__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ph, 0) * 100%); background: var(--mute); }
.tl__mark {
  position: absolute;
  top: 50%;
  width: .85em; height: .85em;
  margin: -.425em 0 0 -.425em;
  border: .14em solid var(--soft);
  border-radius: 50%;
  background: var(--violet);
  transform: scale(0);
  transition: transform .5s var(--ease-spring);
}
.tl__mark--1 { left: 25%; }
.tl__mark--2 { left: 62%; }
.s-m1 .tl__mark--1, .s-m2 .tl__mark--2 { transform: none; }
.s-m1 .tl__mark--1 { animation: ping-ring 1.2s ease-out 2; }
.s-m2 .tl__mark--2 { animation: ping-ring 1.2s ease-out 2; }
.tl__head {
  position: absolute;
  top: 50%;
  left: calc(var(--ph, 0) * 100%);
  width: .3em; height: 1.25em;
  margin: -.625em 0 0 -.15em;
  border-radius: .2em;
  background: var(--ink);
  opacity: 0;
  transition: opacity .3s;
}
.s-review .tl__head { opacity: 1; }
.s-jump .tl__head { transition: opacity .3s, left .6s var(--ease-out); }
.s-jump .tl__track i { transition: width .6s var(--ease-out); }
.s-jump .tl__mark--2 { animation: pop .6s var(--ease-spring) .5s, ping-ring 1.2s ease-out .5s 2; }

.fb__head .swap__b { justify-content: flex-start; color: var(--violet); font-weight: 600; }
.s-typing .fb__head .swap__a { opacity: 0; transform: translateY(-.7em); }
.s-typing .fb__head .swap__b { opacity: 1; transform: none; }
.dots3 i { font-style: normal; animation: dots3 1.2s infinite; }
.dots3 i:nth-child(2) { animation-delay: .2s; }
.dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes dots3 { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

.thread { display: flex; flex: 1; flex-direction: column; gap: .5em; min-height: 0; padding-top: .2em; }

.bubble {
  display: flex;
  flex-direction: column;
  gap: .2em;
  max-width: 86%;
  padding: .55em .8em;
  border-radius: .95em;
  opacity: 0;
  transform: translateY(.7em) scale(.94);
  transform-origin: 0 100%;
  transition: opacity .35s, transform .55s var(--ease-spring), box-shadow .4s;
}
.bubble--t { align-self: flex-start; border-bottom-left-radius: .3em; background: #fff; }
.bubble--me { align-self: flex-end; border-bottom-right-radius: .3em; background: var(--lime); transform-origin: 100% 100%; }
.bubble__who { color: var(--violet); font-size: .52em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.bubble--me .bubble__who { color: var(--ink); }
.bubble__txt { font-size: .66em; line-height: 1.38; }
.ts { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.s-b0 .b0, .s-b1 .b1, .s-b2 .b2, .s-b3 .b3 { opacity: 1; transform: none; }
.s-jump .b2 { box-shadow: 0 0 0 .14em var(--violet); }

.composer {
  display: flex;
  flex: none;
  align-items: center;
  gap: .5em;
  height: 2.7em;
  padding: 0 .35em 0 .4em;
  border: 1px solid var(--line);
  border-radius: 1.35em;
  background: #fff;
  transition-duration: .3s;
}
.composer__cam, .composer__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.95em; height: 1.95em;
  border-radius: 50%;
}
.composer__cam { background: var(--soft); color: var(--ink); }
.composer__send { background: var(--ink); color: var(--lime); transition: scale .15s; }
.composer__cam .i, .composer__send .i { width: 1em; height: 1em; }
.composer__text { display: grid; flex: 1; min-width: 0; overflow: hidden; font-size: .6em; white-space: nowrap; }
.composer__text > * { grid-area: 1 / 1; }
.composer__ph { color: var(--mute); transition: opacity .2s; }
.s-compose .composer__ph { opacity: 0; }
.s-compose .composer { border-color: var(--violet); box-shadow: 0 0 0 .2em rgba(123, 97, 255, .12); }

/* ==========================================================================
   Szene 04: Sprachnotiz → Hausaufgabe (KI)
   ========================================================================== */
.vm .app { gap: .65em; }
.vm__head { padding-top: .35em; }
.rec { flex: none; padding: .8em .9em .75em; border-radius: 1em; background: var(--ink); color: #fff; }
.rec__top { display: flex; align-items: center; gap: .7em; }
.rec__wave { display: flex; flex: 1; align-items: center; gap: .2em; height: 2.4em; }
.rec__wave i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: .2em;
  background: #3A3F46;
  transform: scaleY(.28);
  transition: transform .35s var(--ease-out), background-color .3s;
}
.s-vrec .rec__wave i { background: var(--lime); animation: vwave .7s ease-in-out infinite alternate; }
.rec__wave i:nth-child(2n) { animation-duration: .55s; animation-delay: -.25s; }
.rec__wave i:nth-child(3n) { animation-duration: .9s; animation-delay: -.5s; }
.rec__wave i:nth-child(5n) { animation-duration: .65s; animation-delay: -.1s; }
.s-vdone .rec__wave i { background: var(--lime); transform: none; animation: none; }
.s-vdone .rec__wave i:nth-child(n+14) { background: #3A3F46; }
@keyframes vwave { 0% { transform: scaleY(.22); } 100% { transform: scaleY(1); } }

.rec__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6em; height: 2.6em;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  transition: background-color .3s, scale .15s;
}
.rec__btn > * { grid-area: 1 / 1; transition: opacity .25s, transform .4s var(--ease-spring); }
.rec__mic { width: 1.3em; height: 1.3em; }
.rec__stop { width: .85em; height: .85em; border-radius: .2em; background: #fff; opacity: 0; transform: scale(.3); }
.rec__ok { width: 1.25em; height: 1.25em; opacity: 0; transform: scale(.3); }
.s-vrec .rec__btn { background: #FF4D4D; }
.s-vrec .rec__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; --ring: rgba(255, 77, 77, .55); animation: ping-ring 1.2s ease-out infinite; }
.s-vrec .rec__mic { opacity: 0; transform: scale(.3); }
.s-vrec .rec__stop { opacity: 1; transform: none; }
.s-vdone .rec__btn { background: var(--lime); }
.s-vdone .rec__btn::after { display: none; }
.s-vdone .rec__stop { opacity: 0; }
.s-vdone .rec__ok { opacity: 1; transform: none; }

.rec__meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: .45em; }
.rec__time { font-size: .6em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec__hint { color: var(--on-dark-2); font-size: .54em; transition: opacity .3s; }
.s-vrec .rec__hint { opacity: 0; }
.rec__transcript { min-height: 2.9em; margin-top: .45em; color: var(--on-dark); font-size: .56em; line-height: 1.45; }

.draft {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: .8em .9em;
  border: 1.5px dashed #D6D6CC;
  border-radius: 1em;
  background: rgba(255, 255, 255, .5);
  transition: border-color .4s, box-shadow .4s, background-color .4s;
}
.s-think .draft {
  border-style: solid;
  border-color: #D9D2FF;
  background: #fff;
  box-shadow: 0 .8em 1.8em -1em rgba(123, 97, 255, .55);
}
.draft__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: .6em; font-weight: 500; transition: opacity .3s; }
.s-think .draft__empty { opacity: 0; }
.draft .ai-label { opacity: 0; transition: opacity .4s; }
.s-think .draft .ai-label { opacity: 1; }
.draft__skel { position: absolute; left: .9em; right: .9em; top: 2.2em; display: grid; gap: .5em; opacity: 0; transition: opacity .3s; }
.s-think .draft__skel { opacity: 1; }
.s-draft .draft__skel { opacity: 0; }
.draft__skel i {
  height: .7em;
  border-radius: .35em;
  background: linear-gradient(90deg, #EEEAFD 0%, #D9D0FF 45%, #EEEAFD 90%);
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}
.draft__skel i:nth-child(1) { width: 72%; height: .9em; }
.draft__skel i:nth-child(2) { width: 46%; }
.draft__skel i:nth-child(3) { width: 92%; }
.draft__skel i:nth-child(4) { width: 80%; }
.draft__skel i:nth-child(5) { width: 62%; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.draft__body { margin-top: .55em; }
.draft__title { min-height: 2.6em; font-size: .78em; font-weight: 700; line-height: 1.3; }
.draft .chip-row .ui-chip, .draft__steps li, .draft__note { opacity: 0; transform: translateY(.5em); transition: opacity .35s, transform .45s var(--ease-out), border-color .35s, color .35s, box-shadow .35s, scale .15s; }
.s-draft .draft .chip-row .ui-chip, .s-draft .draft__steps li, .s-draft .draft__note { opacity: 1; transform: none; }
.s-draft .draft .chip-row .ui-chip:nth-child(1) { transition-delay: .7s; }
.s-draft .draft .chip-row .ui-chip:nth-child(2) { transition-delay: .8s; }
.s-draft .draft__steps li:nth-child(1) { transition-delay: 1s; }
.s-draft .draft__steps li:nth-child(2) { transition-delay: 1.15s; }
.s-draft .draft__steps li:nth-child(3) { transition-delay: 1.3s; }
.s-draft .draft__note { transition-delay: 1.5s; }
.draft__steps { display: grid; gap: .3em; margin: .7em 0 0; padding: 0 0 0 1.15em; font-size: .6em; }
.draft__steps li::marker { color: var(--violet); font-weight: 700; }
.draft__note { display: flex; flex-direction: column; gap: .2em; margin-top: .75em; padding: .55em .7em; border-radius: .7em; background: var(--soft); }
.draft__note .ui-eyebrow { color: var(--gray); }
.draft__note > span:last-child { font-size: .58em; }
.s-edit .freq { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 0 .22em rgba(123, 97, 255, .14); }

.vm__actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: .45em; flex: none; }
.approve .swap__b::before {
  content: "";
  width: .9em; height: .9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.3 4.3L19 7.2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.3 4.3L19 7.2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s-approved .approve { background: var(--lime); color: var(--ink); }
.s-approved .approve .swap__a { opacity: 0; transform: translateY(-.7em); }
.s-approved .approve .swap__b { opacity: 1; transform: none; }

/* ==========================================================================
   Szene 05: Video automatisch aufbereitet (KI)
   ========================================================================== */
.proc .app { gap: .6em; }
.proc__head { padding-top: .35em; }
.proc__vid { flex: none; height: 10.2em; }
.proc__vid .vid__dog { bottom: .8em; width: 4.6em; margin-left: -2.3em; }
.proc__vid .caption { bottom: .8em; }
.scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s; }
.scan::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: .16em;
  background: var(--lime);
  box-shadow: 0 0 .9em .35em rgba(205, 245, 100, .55);
}
.scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 1.2em 1.2em;
}
.s-scan .scan { opacity: 1; }
.s-scan .scan::before { animation: sweep 1.5s ease-in-out infinite alternate; }
.s-procdone .scan { opacity: 0; }
@keyframes sweep { from { left: 0; } to { left: calc(100% - .16em); } }

.proc__status .swap > * { justify-content: flex-start; }
.s-procdone .proc__status .swap__a { opacity: 0; transform: translateY(-.7em); }
.s-procdone .proc__status .swap__b { opacity: 1; transform: none; }

.jobs { display: grid; gap: .4em; margin: 0; padding: 0; list-style: none; }
.job {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .6em;
  padding: .5em .6em;
  border-radius: .8em;
  background: #fff;
  opacity: .45;
  transition: opacity .4s, box-shadow .4s;
}
.job__ic {
  display: grid;
  place-items: center;
  width: 1.8em; height: 1.8em;
  border-radius: .55em;
  background: var(--soft);
  color: var(--ink);
}
.job__ic .i { width: 1em; height: 1em; }
.job__ic--cc { font-size: .5em; font-weight: 800; width: 3.6em; height: 3.6em; border-radius: 1.1em; }
.job__name { font-size: .64em; font-weight: 600; }
.job__st { display: grid; place-items: center; width: 1.35em; height: 1.35em; }
.job__st > * { grid-area: 1 / 1; }
.spin {
  width: 1.1em; height: 1.1em;
  border: .16em solid rgba(123, 97, 255, .2);
  border-top-color: var(--violet);
  border-radius: 50%;
  opacity: 0;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.job__st .i {
  width: 1.35em; height: 1.35em;
  padding: .24em;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.job__extra {
  grid-column: 2 / 4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s var(--ease-out), opacity .35s .1s, margin-top .5s var(--ease-out);
}
.s-j1run .job--1, .s-j2run .job--2, .s-j3run .job--3, .s-j4run .job--4 { opacity: 1; box-shadow: 0 0 0 .14em rgba(123, 97, 255, .35); }
.s-j1run .job--1 .spin, .s-j2run .job--2 .spin, .s-j3run .job--3 .spin, .s-j4run .job--4 .spin { opacity: 1; }
.s-j1 .job--1, .s-j2 .job--2, .s-j3 .job--3, .s-j4 .job--4 { opacity: 1; box-shadow: none; }
.s-j1 .job--1 .spin, .s-j2 .job--2 .spin, .s-j3 .job--3 .spin, .s-j4 .job--4 .spin { opacity: 0; }
.s-j1 .job--1 .job__st .i, .s-j2 .job--2 .job__st .i, .s-j3 .job--3 .job__st .i, .s-j4 .job--4 .job__st .i { transform: none; }
.s-j2 .job--2 .job__extra, .s-j3 .job--3 .job__extra, .s-j4 .job--4 .job__extra { max-height: 3em; margin-top: .45em; opacity: 1; }

.stamps { display: flex; gap: .3em; }
.stamps span {
  padding: .25em .6em;
  border-radius: .7em;
  background: rgba(123, 97, 255, .1);
  color: var(--violet);
  font-size: .54em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.summary { font-size: .58em; line-height: 1.4; color: #3E4348; min-height: 2.8em; }
.langs { display: flex; gap: .3em; }
.lang {
  padding: .25em .65em;
  border: 1px solid var(--line);
  border-radius: .7em;
  background: #fff;
  color: var(--gray);
  font-size: .54em;
  font-weight: 700;
  transition-duration: .3s;
}
.lang--de { border-color: var(--ink); background: var(--ink); color: #fff; }
.s-en .lang--de { border-color: var(--line); background: #fff; color: var(--gray); }
.s-en .lang--en { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.proc .ui-btn { flex: none; margin-top: auto; }

/* ==========================================================================
   Szene 06: Kurs-Überblick (Trainer:in)
   ========================================================================== */
.course__head { display: flex; align-items: center; justify-content: space-between; padding-top: .35em; }
.course__bell { position: relative; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; }
.course__bell .i { width: 1.1em; height: 1.1em; }
.course__bell i {
  position: absolute;
  top: .42em; right: .5em;
  width: .5em; height: .5em;
  border: .1em solid #fff;
  border-radius: 50%;
  background: var(--coral);
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.s-rv3 .course__bell i { transform: none; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; margin-top: .75em; }
.stat {
  display: flex;
  flex-direction: column;
  gap: .15em;
  padding: .6em .65em .55em;
  border-radius: .85em;
  background: #fff;
  opacity: 0;
  transform: translateY(.6em) scale(.94);
  transition: opacity .4s, transform .55s var(--ease-spring);
}
.stat b { font-size: 1.15em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat > span { color: var(--gray); font-size: .5em; }
.stat--lime { background: var(--lime); }
.stat--lime > span { color: var(--ink); }
.s-stats .stat { opacity: 1; transform: none; }
.s-stats .stat:nth-child(2) { transition-delay: .1s; }
.s-stats .stat:nth-child(3) { transition-delay: .2s; }
.s-rv3 .stat--vids b { display: inline-block; animation: pop .55s var(--ease-spring); }

.review { display: grid; gap: .38em; margin-top: .45em; }
.rv {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .45em .6em;
  border-radius: .85em;
  background: #fff;
  opacity: 0;
  transform: translateX(1.6em);
  transition-duration: .5s;
  transition-timing-function: var(--ease-out);
}
.rv__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rv__txt b { display: flex; align-items: center; gap: .45em; font-size: .64em; font-weight: 700; }
.rv__txt b em { padding: .1em .5em; border-radius: .6em; background: var(--coral); color: #fff; font-size: .78em; font-style: normal; }
.rv__txt > span { color: var(--gray); font-size: .54em; }
.rv__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--violet); }
.s-rv .rv--1, .s-rv .rv--2 { opacity: 1; transform: none; }
.s-rv .rv--2 { transition-delay: .15s; }
.s-rv3 .rv--3 { opacity: 1; transform: none; box-shadow: 0 0 0 .14em rgba(255, 122, 89, .55); }

.teams { margin-top: .45em; padding: .35em .8em .45em; }
.team { display: flex; align-items: center; justify-content: space-between; height: 2em; border-radius: .6em; }
.team + .team { border-top: 1px solid var(--soft); }
.team__name { display: flex; align-items: center; gap: .5em; font-size: .62em; font-weight: 600; transition: color .4s; }
.flag {
  padding: .12em .5em;
  border-radius: .6em;
  background: rgba(255, 122, 89, .15);
  color: var(--coral);
  font-size: .85em;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s, transform .45s var(--ease-spring);
}
.dots { display: flex; gap: .28em; }
.dots i {
  width: .62em; height: .62em;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .3s, transform .45s var(--ease-spring);
  transition-delay: calc(var(--row, 0s) + var(--col, 0s));
}
.team:nth-child(2) { --row: .25s; }
.team:nth-child(3) { --row: .5s; }
.team:nth-child(4) { --row: .75s; }
.dots i:nth-child(2) { --col: .06s; }
.dots i:nth-child(3) { --col: .12s; }
.dots i:nth-child(4) { --col: .18s; }
.dots i:nth-child(5) { --col: .24s; }
.dots i:nth-child(6) { --col: .3s; }
.dots i:nth-child(7) { --col: .36s; }
.s-dots .dots i.f { background: var(--lime); }
.s-low .team--low .team__name { color: var(--coral); }
.s-low .team--low .flag { opacity: 1; transform: none; }
.s-low .team--low .dots i.f { background: var(--coral); transition-delay: 0s; }
.nudge { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .35s, margin-top .5s var(--ease-out); }
.nudge .swap { display: grid; width: 100%; height: 2.35em; border-radius: 1.2em; background: var(--ink); color: var(--lime); transition: background-color .35s, color .35s, scale .15s; }
.nudge .swap > * { font-size: .6em; font-weight: 700; }
.nudge .swap .i { width: 1.2em; height: 1.2em; }
.s-nudge .nudge { max-height: 3em; margin-top: .35em; opacity: 1; }
.s-nudged .nudge .swap { background: var(--lime); color: var(--ink); }
.s-nudged .nudge .swap__a { opacity: 0; transform: translateY(-.7em); }
.s-nudged .nudge .swap__b { opacity: 1; transform: none; }

/* ==========================================================================
   Szene 07: Hundeprofil
   ========================================================================== */
.profile__cover {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10.4em;
  overflow: hidden;
  background: linear-gradient(135deg, var(--violet), var(--coral));
}
.profile__avatar {
  position: absolute;
  z-index: 5;
  top: 6.5em;
  left: 50%;
  display: grid;
  place-items: center;
  width: 6.4em; height: 6.4em;
  margin-left: -3.2em;
  overflow: hidden;
  border: .3em solid #fff;
  border-radius: 50%;
  background: #F4E8D8;
  box-shadow: 0 .7em 1.5em -.5em rgba(18, 20, 23, .4);
  transform: scale(0) rotate(-20deg);
  transition: transform .8s var(--ease-spring);
}
.profile__avatar svg { width: 118%; height: 118%; margin-top: .7em; }
.s-in .profile__avatar { transform: none; }
.profile .app { top: 13.3em; align-items: center; padding-top: 0; text-align: center; }
.profile__name, .profile__info { opacity: 0; transform: translateY(.5em); transition: opacity .4s .25s, transform .5s var(--ease-out) .25s; }
.s-in .profile__name, .s-in .profile__info { opacity: 1; transform: none; }
.profile__name { font-size: 1.22em; font-weight: 700; letter-spacing: -.015em; }
.traits { display: flex; justify-content: center; gap: .3em; margin-top: .6em; }
.traits .ui-chip { opacity: 0; transform: scale(.4) rotate(-10deg); }
.s-traits .traits .ui-chip { opacity: 1; transform: none; }
.s-traits .traits .ui-chip:nth-child(2) { transition-delay: .15s; }
.s-traits .traits .ui-chip:nth-child(3) { transition-delay: .3s; }
.note {
  align-self: stretch;
  margin-top: .75em;
  padding: .65em .8em;
  text-align: left;
  opacity: 0;
  transform: translateY(1em);
  transition: opacity .45s, transform .6s var(--ease-out);
}
.s-note .note { opacity: 1; transform: none; }
.note__txt { min-height: 2.8em; margin-top: .3em; font-size: .6em; line-height: 1.4; }
.miles__head { align-self: flex-start; opacity: 0; transition: opacity .4s; }
.s-miles .miles__head { opacity: 1; }
.miles { display: grid; gap: .5em; width: 100%; margin: .45em 0 0; padding: 0; list-style: none; text-align: left; }
.mile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .6em;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .4s, transform .5s var(--ease-out);
}
.s-miles .mile { opacity: 1; transform: none; }
.s-miles .mile:nth-child(2) { transition-delay: .1s; }
.s-miles .mile:nth-child(3) { transition-delay: .2s; }
.s-miles .mile:nth-child(4) { transition-delay: .3s; }
.mile__ic {
  display: grid;
  place-items: center;
  width: 1.35em; height: 1.35em;
  border: 1.5px solid var(--mute);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .35s, border-color .35s;
}
.mile__ic .i { width: .8em; height: .8em; opacity: 0; transition: opacity .3s; }
.mile__t { font-size: .64em; transition: color .35s; }
.mile--done .mile__ic { border-color: var(--lime); background: var(--lime); }
.mile--done .mile__ic .i { opacity: 1; }
.mile--done .mile__t { color: var(--gray); }
.mile--cur .mile__ic { border: .13em solid var(--violet); }
.mile--cur .mile__t { font-weight: 700; }
.mile__bar { grid-column: 2; height: .28em; margin-top: .4em; overflow: hidden; border-radius: .2em; background: var(--line); }
.mile__bar i { display: block; width: calc(var(--mp, .6) * 100%); height: 100%; border-radius: inherit; background: var(--violet); transition: background-color .4s; }
.mile--next .mile__t { color: var(--mute); }
.s-mdone .mile--cur .mile__ic { border-color: var(--lime); background: var(--lime); animation: pop .6s var(--ease-spring); }
.s-mdone .mile--cur .mile__ic .i { opacity: 1; }
.s-mdone .mile--cur .mile__bar i { background: var(--lime); }
.s-mnext .mile--next .mile__ic { border: .13em solid var(--violet); }
.s-mnext .mile--next .mile__t { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   Szene 08: Deine Marke (White-Label)
   ========================================================================== */
.wl { --screen-bg: #1B1840; }
.springboard {
  position: absolute;
  inset: 0;
  padding: 3.5em 1.15em 0;
  background:
    radial-gradient(90% 55% at 12% 18%, rgba(123, 97, 255, .95), transparent 65%),
    radial-gradient(85% 55% at 90% 80%, rgba(255, 122, 89, .8), transparent 65%),
    linear-gradient(165deg, #3A5BFF, #1B1840 72%);
  transition: transform .6s var(--ease-out), opacity .5s;
}
.s-open .springboard { transform: scale(.92); opacity: .4; }
.sb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85em .35em; }
.sb-widget { display: flex; flex-direction: column; grid-column: 1 / 3; grid-row: 1 / 3; gap: .3em; }
.sb-widget__img {
  display: grid;
  flex: 1;
  place-items: end center;
  overflow: hidden;
  border-radius: 1.15em;
  background: linear-gradient(160deg, #FFE9DC, #FFC9B6);
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .18);
}
.sb-widget__img svg { width: 62%; height: auto; aspect-ratio: 140 / 170; margin-bottom: -.4em; }
.sb-widget em, .aic em {
  color: #fff;
  font-size: .48em;
  font-style: normal;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.aic { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.aic i {
  display: grid;
  place-items: center;
  width: 3.2em; height: 3.2em;
  border-radius: .85em;
  background: linear-gradient(160deg, var(--a1, #fff), var(--a2, #E8E8E8));
  color: var(--ac, #121417);
  font-style: normal;
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .2);
}
.aic i .i { width: 1.5em; height: 1.5em; }
.aic--cal i { --a1: #fff; --a2: #F2F2F2; display: flex; flex-direction: column; justify-content: center; gap: .05em; }
.aic--cal small { order: -1; color: var(--coral); font-size: .5em; font-weight: 700; text-transform: uppercase; }
.aic--cal b { font-size: 1.2em; font-weight: 600; line-height: 1; }
.aic--photo i { --a1: #fff; --a2: #F1F1F1; --ac: var(--coral); }
.aic--cam i { --a1: #DADCDF; --a2: #9DA2A8; --ac: #1D2126; }
.aic--weather i { --a1: #5AA9FF; --a2: #2D6BFF; --ac: #FFD66B; }
.aic--clock i { --a1: #2A2F36; --a2: #000; --ac: #fff; }
.aic--maps i { --a1: #D5F5DB; --a2: #8FD9A8; --ac: #1D7A45; }
.aic--notes i { --a1: #FFF3B0; --a2: #FFE066; --ac: #7A5B00; }
.aic--music i { --a1: #FF6B8B; --a2: #F2385E; --ac: #fff; }
.aic--set i { --a1: #C9CDD3; --a2: #8A9097; --ac: #fff; }
.aic--vid i { --a1: #3A3F46; --a2: #1D2126; --ac: var(--lime); }
.aic--phone i { --a1: #6BE38A; --a2: #2DBE5A; --ac: #fff; }
.aic--chat i { --a1: #7CE895; --a2: #25B44B; --ac: #fff; }
.aic--mail i { --a1: #5AB7FF; --a2: #1F7BFF; --ac: #fff; }
.aic--web i { --a1: #fff; --a2: #E9ECF1; --ac: #1F7BFF; }
.aic--school i { --a1: #FF8E6E; --a2: #FF6A45; --ac: #fff; }
.aic--school { transform: scale(0); transition: transform .7s var(--ease-spring), scale .15s; }
.s-install .aic--school { transform: none; }
.s-install .aic--school i { animation: wiggle .5s ease-in-out .7s 2; }
@keyframes wiggle {
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.aic__badge {
  position: absolute;
  top: -.3em; right: -.05em;
  display: grid;
  place-items: center;
  min-width: 1.15em; height: 1.15em;
  padding: 0 .3em;
  border-radius: .6em;
  background: #FF3B30;
  color: #fff;
  font-size: .62em;
  font-weight: 700;
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.s-badge .aic__badge { transform: none; }
.sb-dots { display: flex; justify-content: center; gap: .35em; margin-top: 1.4em; }
.sb-dots i { width: .38em; height: .38em; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.sb-dots i:first-child { background: #fff; }
.sb-dock {
  position: absolute;
  left: .55em; right: .55em; bottom: .55em;
  display: flex;
  justify-content: space-around;
  padding: .75em .4em 1.1em;
  border-radius: 2em;
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.bapp {
  --b: #FF7A59;
  --bi: #fff;
  --bs: #FFE9E2;
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  border-radius: 2.55em;
  background: var(--soft);
  opacity: 0;
  transform: scale(.18);
  transform-origin: 83% 38%;
  transition: transform .65s cubic-bezier(.3, .9, .3, 1), opacity .3s;
}
.s-open .bapp { opacity: 1; transform: none; }
.s-theme2 .bapp { --b: #7B61FF; --bi: #fff; --bs: #ECE8FF; }
.s-theme3 .bapp { --b: #121417; --bi: #CDF564; --bs: #EEF6D6; }
.s-open .wl .home-ind { background: rgba(18, 20, 23, .85); }

.bapp__splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9em;
  background: var(--b);
  color: var(--bi);
  transition: opacity .45s, background-color .8s, color .8s;
}
.bapp__splash b { font-size: 1em; font-weight: 700; }
.s-home .bapp__splash { opacity: 0; }
.blogo {
  display: grid;
  place-items: center;
  width: 4.6em; height: 4.6em;
  border-radius: 1.4em;
  background: var(--bi);
  color: var(--b);
  transition: background-color .8s, color .8s, border-radius .8s;
}
.blogo .i { grid-area: 1 / 1; width: 58%; height: 58%; transition: opacity .35s, transform .6s var(--ease-spring); }
.blogo .g2, .blogo .g3 { opacity: 0; transform: scale(.3) rotate(-40deg); }
.s-theme2 .blogo { border-radius: 50%; }
.s-theme2 .blogo .g1, .s-theme3 .blogo .g1 { opacity: 0; transform: scale(.3) rotate(40deg); }
.s-theme2 .blogo .g2 { opacity: 1; transform: none; }
.s-theme3 .blogo .g2 { opacity: 0; transform: scale(.3) rotate(40deg); }
.s-theme3 .blogo .g3 { opacity: 1; transform: none; }
.s-theme3 .blogo { border-radius: .9em; }

.bapp__home { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bapp__bar {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 3.1em 1.1em 1em;
  border-radius: 0 0 1.4em 1.4em;
  background: var(--b);
  color: var(--bi);
  transition: background-color .8s, color .8s;
}
.blogo--sm { width: 2.4em; height: 2.4em; border-radius: .75em; }
.s-theme2 .blogo--sm { border-radius: 50%; }
.s-theme3 .blogo--sm { border-radius: .5em; }
.bapp__name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.bapp__name b { font-size: .8em; font-weight: 700; }
.bapp__name span { font-size: .56em; opacity: .85; }
.bapp__bell { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.bapp__bell .i { width: 1em; height: 1em; }
.bapp__hero {
  display: flex;
  flex-direction: column;
  gap: .2em;
  margin: .8em 1.1em 0;
  padding: .8em .9em;
  border-radius: 1em;
  background: var(--bs);
  transition: background-color .8s;
}
.bapp__hero .ui-eyebrow { color: var(--gray); }
.bapp__hero b { font-size: .8em; font-weight: 700; }
.bapp__dots { display: flex; gap: .3em; margin-top: .35em; }
.bapp__dots i { flex: 1; height: .45em; border-radius: .25em; background: var(--b); transition: background-color .8s; }
.bapp__dots i:nth-child(n+6) { background: rgba(18, 20, 23, .12); }
.bapp__feed { display: grid; gap: .45em; margin: .8em 1.1em 0; }
.bfeed { display: flex; align-items: center; gap: .6em; padding: .55em .6em; transition: box-shadow .4s; }
.bfeed .ui-eyebrow { color: var(--b); transition: color .8s; }
.bfeed__txt { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.bfeed__txt b { font-size: .68em; font-weight: 700; }
.bfeed__ic { display: grid; place-items: center; flex: none; width: 3.1em; height: 2.2em; border-radius: .55em; background: var(--bs); color: var(--b); transition: background-color .8s, color .8s; }
.bfeed__ic .i { width: 1.05em; height: 1.05em; }
.vid--brand { background: var(--b) linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35)); transition: background-color .8s; }
.s-theme3 .vid--brand .play--sm { color: var(--lime); }
.s-only .bfeed { box-shadow: 0 0 0 .14em var(--b); }
.s-only .bfeed--2 { transition-delay: .15s; }
.s-only .bfeed--3 { transition-delay: .3s; }
.s-only .bfeed--4 { transition-delay: .45s; }
.s-only .bfeed .ui-eyebrow { animation: pop .5s var(--ease-spring); }
.tabbar {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  padding: .75em 1em 1.7em;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--mute);
}
.tabbar .i { width: 1.35em; height: 1.35em; }
.tabbar .is-on { color: var(--b); transition: color .8s; }