/* ============================================================
   decoded.training — mobile-first web prototype
   Layout + components. Tokens come from styles/tokens.css.
   Age themes live at the bottom as .app[data-age] overrides.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--n-200);
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* Stage frames the mobile column on larger screens */
.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.app {
  position: relative;
  width: min(100vw, 440px);
  height: 100dvh;
  background: var(--bg-page);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 480px) {
  .stage { padding: 28px; }
  .app {
    height: min(100dvh - 56px, 924px);
    border-radius: 30px;
    box-shadow: 0 50px 90px -30px rgba(20,20,18,.45), 0 0 0 1px rgba(20,20,18,.06);
  }
}

/* Scroll surface (the "page") */
.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* screen enter animation */
@keyframes scr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scr { animation: scr-in var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .scr { animation: none; } }

/* ============================================================
   Floating controls
   ============================================================ */
.fab {
  position: absolute;
  z-index: 40;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fab:active { transform: translateY(1px) scale(.97); }
.fab:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-md); }
.fab--back { top: 16px; left: 16px; }
.fab--nav  { bottom: 20px; right: 16px; width: 54px; height: 54px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg); border: 1.5px solid rgba(255,255,255,.18); }
.fab--nav:hover { background: var(--ink-soft); }
.fab--onlight { background: var(--paper); color: var(--ink); }
.fab--ondark  { background: rgba(20,20,18,.5); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.3); }

/* discipline scroll progress (instrumentation) */
.prog {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 45;
  background: transparent;
  pointer-events: none;
}
.prog__bar { height: 100%; width: 0%; background: var(--volt); box-shadow: 0 0 10px -1px var(--volt-deep); transition: width 90ms linear; }

/* ============================================================
   SCREEN 1 — Startseite (discipline grid)
   ============================================================ */
.home { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
.home__top {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -16px;                 /* break out of .home padding → full app width */
  padding: 16px 16px 12px;
  background: var(--bg-page);       /* solid app bar, no see-through tiles */
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.home__top--scrolled { box-shadow: 0 10px 22px -16px rgba(20,20,18,.55); }
.home__top--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .home__top--hidden { transform: none; } }
.wm { display: flex; align-items: baseline; gap: 0; font-weight: 900; font-size: 22px; letter-spacing: -.03em; color: var(--ink); }
.wm .t { color: var(--track); font-weight: 700; }
.home__alter {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}
.home__lead {
  margin: 2px 2px 18px;
  font-size: 15px; line-height: 1.45; color: var(--fg-2); max-width: 32ch;
}
.home__lead b { color: var(--ink); font-weight: 800; }

.tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: none; padding: 0;
  cursor: pointer;
  color: #fff;
  text-align: left;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tile:nth-child(1), .tile:nth-child(8) { grid-column: span 2; aspect-ratio: 16 / 9; } /* rhythm: featured wide tiles */
.tile:active { transform: scale(.985); }
@media (hover: hover) { .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .tile:hover .tile__fill { transform: scale(1.05); } }
.tile__fill {
  position: absolute; inset: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,0) 32%, rgba(20,20,18,.66) 100%); }
.tile__fam {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.9);
}
.tile__fam::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--volt); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.tile__name {
  position: absolute; left: 12px; right: 12px; bottom: 11px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 26px; line-height: .94; letter-spacing: -.01em;
  margin: 0;
}
.tile:nth-child(1) .tile__name, .tile:nth-child(8) .tile__name { font-size: 40px; }
.app[data-labels="off"] .tile__name,
.app[data-labels="off"] .tile__fam { opacity: 0; transform: translateY(6px); }
.app[data-labels="off"] .tile:hover .tile__name,
.app[data-labels="off"] .tile:hover .tile__fam { opacity: 1; transform: none; }

/* ============================================================
   SCREEN 2 — Disziplin-Einstieg (full-bleed hero)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 22px calc(86px + env(safe-area-inset-bottom)); /* room for the bottom tab bar */
  color: #fff;
  overflow: hidden;
}
.hero__fill { position: absolute; inset: 0; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,20,18,.34) 0%, rgba(20,20,18,.18) 38%, rgba(20,20,18,.82) 100%); }
.hero__in { position: relative; z-index: 2; }
.hero__fam {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: #fff;
}
.hero__fam::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--volt); }
.hero__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(52px, 17vw, 76px); line-height: .9; letter-spacing: -.015em;
  margin: 0 0 20px;
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.hero__q {
  font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em;
  margin: 0; max-width: 22ch;
}
.hero__q .v { color: var(--volt); }
.callout-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  color: #fff; background: rgba(20,20,18,.42); backdrop-filter: blur(5px);
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(200,242,58,.55);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
  animation: scr-in var(--dur-slow) var(--ease-out);
}
.callout-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--volt); flex: none; }

.hero__hint {
  position: relative; z-index: 2;
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.95);
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hero__hint i { animation: bob 1.6s var(--ease-out) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__hint i { animation: none; } }

/* ============================================================
   SCREEN 3 — Inhaltskapitel (repeating Q · text · video · answer)
   ============================================================ */
.chapters { padding: 40px 22px 8px; }
.chapter { padding: 0 0 44px; }
.chapter + .chapter { border-top: 1px solid var(--border-1); padding-top: 40px; }
.chapter__no {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--track-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.chapter__no .line { flex: 1; height: 1px; background: var(--border-2); }
.chapter__q {
  font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 12px; color: var(--ink); text-wrap: pretty;
}
.chapter__text { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 18px; }

/* video placeholder */
.video {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--r-md); overflow: hidden;
  display: grid; place-items: center;
  cursor: pointer; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.video--img { background-size: cover; background-position: center; }
.video--still { cursor: default; }
.video__motif { position: absolute; inset: 0; }
.video__play {
  position: relative; z-index: 2;
  width: 64px; height: 64px; border-radius: var(--r-pill);
  background: var(--volt); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
  transition: transform var(--dur-base) var(--ease-spring);
}
.video:hover .video__play { transform: scale(1.08); }
.video:active .video__play { transform: scale(.96); }
.video__dur {
  position: absolute; z-index: 2; left: 12px; bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: rgba(20,20,18,.62); color: #fff; padding: 4px 8px; border-radius: var(--r-pill);
  letter-spacing: .03em; backdrop-filter: blur(4px);
}
.video__tag {
  position: absolute; z-index: 2; right: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #fff; background: rgba(20,20,18,.5); padding: 4px 9px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}

/* answer reveal */
.answer { }
.answer__btns { display: flex; gap: 10px; }
.answer__reveal {
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), margin var(--dur-slow) var(--ease-out);
}
.answer__card {
  background: var(--ink); color: var(--fg-on-inverse);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop-volt);
  padding: 18px 18px 18px;
}
.answer__lab {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--volt); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.answer__txt { font-size: 15.5px; line-height: 1.55; margin: 0; }
.answer__txt strong { color: #fff; }
.answer__txt .v { color: var(--volt); }

.btn2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1;
  padding: 13px 18px; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn2:active { transform: translateY(1px); }
.btn2:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn2--ink { background: var(--ink); color: var(--fg-on-inverse); }
.btn2--ink:hover { background: var(--ink-soft); }
.btn2--ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn2--ghost:hover { border-color: var(--ink); background: var(--n-100); }

/* ============================================================
   SCREEN 4 — Abschluss
   ============================================================ */
.finish {
  background: var(--ink); color: var(--fg-on-inverse);
  padding: 48px 22px calc(120px + env(safe-area-inset-bottom));
  position: relative; overflow: hidden;
}
.finish__motif { position: absolute; right: -40px; top: -10px; opacity: .5; z-index: 0; }
.finish__in { position: relative; z-index: 1; }
.finish__lab {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--volt); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
}
.finish__q { font-size: 14px; color: var(--fg-on-inverse-2); margin: 0 0 10px; line-height: 1.4; }
.finish__a {
  font-size: 22px; font-weight: 700; line-height: 1.34; letter-spacing: -.01em;
  margin: 0 0 30px; color: #fff; text-wrap: pretty;
}
.finish__a .v { color: var(--volt); }
.nextcard {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; padding: 0; overflow: hidden;
  border-radius: var(--r-lg); position: relative; color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}
.nextcard:active { transform: scale(.99); }
.nextcard__fill { position: absolute; inset: 0; }
.nextcard__scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(20,20,18,.74), rgba(20,20,18,.18)); }
.nextcard__in { position: relative; z-index: 1; padding: 20px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; }
.nextcard__lab { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.85); display:flex; align-items:center; gap:7px; }
.nextcard__name { font-family: var(--font-display); text-transform: uppercase; font-size: 34px; line-height: .92; margin: 22px 0 0; }
.nextcard__go { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-top: 8px; color: var(--volt); }

/* ============================================================
   SCREEN 5 — Navigation overlay
   ============================================================ */
.navsheet { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; }
.navsheet__scrim { position: absolute; inset: 0; background: rgba(20,20,18,.5); backdrop-filter: blur(3px); animation: fadein var(--dur-base) var(--ease-out); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.navsheet__panel {
  position: relative; margin-top: auto;
  background: var(--bg-page);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
  max-height: 88%; overflow-y: auto; scrollbar-width: none;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.4);
  animation: sheet-up var(--dur-slow) var(--ease-out);
}
.navsheet__panel::-webkit-scrollbar { display: none; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.navsheet__grab { width: 40px; height: 4px; border-radius: 999px; background: var(--border-2); margin: 2px auto 14px; }
.navsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.navsheet__title { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.navsheet__close { width: 36px; height: 36px; border-radius: var(--r-pill); border: none; background: var(--n-100); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.navsheet__close:hover { background: var(--n-200); }
.navgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.navtile {
  position: relative; aspect-ratio: 5 / 3; border-radius: var(--r-md); overflow: hidden;
  border: none; padding: 0; cursor: pointer; color: #fff; text-align: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.navtile:active { transform: scale(.97); }
.navtile__fill { position: absolute; inset: 0; }
.navtile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,0) 40%, rgba(20,20,18,.7)); }
.navtile__name { position: absolute; left: 10px; right: 10px; bottom: 8px; font-family: var(--font-display); text-transform: uppercase; font-size: 16px; line-height: .96; margin: 0; z-index: 1; }
.navtile.is-active { box-shadow: inset 0 0 0 3px var(--volt), 0 0 0 3px var(--volt-deep); }
.navtile.is-active::after { content: "AKTIV"; position: absolute; z-index: 2; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; background: var(--volt); color: var(--ink); padding: 3px 7px; border-radius: 999px; }
.navtile__fam { position: absolute; top: 8px; right: 8px; z-index: 1; width: 8px; height: 8px; border-radius: 999px; }

/* ============================================================
   AGE THEMES — .app[data-age] reskins (kids · teen · pro)
   ============================================================ */
/* teen = default (:root tokens), no overrides */

/* KIDS 10–12 — brightest, roundest, friendliest, sentence-case names */
.app[data-age="kids"] {
  --r-xs: 10px; --r-sm: 18px; --r-md: 24px; --r-lg: 32px; --r-xl: 44px;
  --ease-spring: cubic-bezier(.28,1.85,.4,1);
  --dur-base: 240ms;
}
/* friendly round names, sentence case */
.app[data-age="kids"] .tile__name,
.app[data-age="kids"] .hero__name,
.app[data-age="kids"] .nextcard__name,
.app[data-age="kids"] .navtile__name,
.app[data-age="kids"] .navsheet__title,
.app[data-age="kids"] .chapter__q {
  font-family: var(--font-sans); font-weight: 900; text-transform: none; letter-spacing: -.035em; line-height: .98;
}
.app[data-age="kids"] .wm { font-size: 24px; }

/* bigger, friendlier copy */
.app[data-age="kids"] .home__lead { font-size: 18px; line-height: 1.6; }
.app[data-age="kids"] .hero__name { font-size: clamp(50px, 16vw, 70px); }
.app[data-age="kids"] .hero__q { font-size: 23px; line-height: 1.32; }
.app[data-age="kids"] .chapter__text { font-size: 18px; line-height: 1.72; }
.app[data-age="kids"] .chapter__q { font-size: 27px; }
.app[data-age="kids"] .answer__txt { font-size: 17px; line-height: 1.6; }

/* chunkier grid + playful resting tilt + sticker pop shadow */
.app[data-age="kids"] .tilegrid { gap: 15px; }
.app[data-age="kids"] .tile { box-shadow: var(--shadow-md); }
.app[data-age="kids"] .tile:nth-child(odd) { transform: rotate(-1.2deg); }
.app[data-age="kids"] .tile:nth-child(even) { transform: rotate(1.2deg); }
.app[data-age="kids"] .tile:nth-child(1),
.app[data-age="kids"] .tile:nth-child(8) { transform: rotate(0deg); }
@media (hover: hover) {
  .app[data-age="kids"] .tile:hover { transform: translateY(-7px) rotate(-2.5deg) scale(1.015); box-shadow: var(--shadow-lg); }
}
.app[data-age="kids"] .tile:active { transform: scale(.96) rotate(-1deg); }

/* loud family pill — volt sticker, tilted */
.app[data-age="kids"] .tile__fam {
  background: var(--volt); color: var(--ink); padding: 4px 9px; border-radius: var(--r-pill);
  transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(20,20,18,.25);
}
.app[data-age="kids"] .tile__fam::before { background: var(--ink); box-shadow: none; }

/* hero: friendly word sticker + bouncy hint */
.app[data-age="kids"] .hero__fam {
  background: var(--volt); color: var(--ink); padding: 6px 12px; border-radius: var(--r-pill);
  transform: rotate(-2.5deg); box-shadow: var(--shadow-pop-volt); margin-bottom: 16px;
}
.app[data-age="kids"] .hero__fam::before { background: var(--ink); }
.app[data-age="kids"] .hero__hint { font-size: 12px; }
.app[data-age="kids"] .hero__hint i { animation-duration: 1.1s; }
.app[data-age="kids"] .callout-chip { border-width: 2px; transform: rotate(-2deg); }

/* chapter number → fat rotated sticker badge */
.app[data-age="kids"] .chapter + .chapter { border-top: 3px dashed var(--border-2); padding-top: 38px; }
.app[data-age="kids"] .chapter__no {
  background: var(--ink); color: var(--volt); align-self: flex-start;
  width: fit-content; padding: 7px 13px; border-radius: var(--r-pill);
  transform: rotate(-2deg); box-shadow: var(--shadow-pop-volt); margin-bottom: 16px;
}
.app[data-age="kids"] .chapter__no .line { display: none; }

/* bigger, bouncier play button + rounder video */
.app[data-age="kids"] .video__play { width: 78px; height: 78px; box-shadow: 0 12px 0 -2px var(--volt-deep), 0 14px 30px -8px rgba(0,0,0,.5); }
.app[data-age="kids"] .video:hover .video__play { transform: scale(1.12) rotate(-4deg); }

/* answer card pops harder, button is a big round pill */
.app[data-age="kids"] .answer__card { box-shadow: 7px 7px 0 var(--volt-deep); }
.app[data-age="kids"] .btn2 { font-size: 15px; padding: 15px 22px; }
.app[data-age="kids"] .btn2--ink { box-shadow: 0 4px 0 rgba(20,20,18,.3); }
.app[data-age="kids"] .btn2--ink:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,20,18,.3); }

/* next card name even bigger + go pill */
.app[data-age="kids"] .nextcard { box-shadow: var(--shadow-pop); }
.app[data-age="kids"] .nextcard__name { font-size: 38px; }
.app[data-age="kids"] .nextcard__go { background: var(--volt); color: var(--ink); padding: 8px 14px; border-radius: var(--r-pill); width: fit-content; }

/* nav tiles get the tilt too */
.app[data-age="kids"] .navtile:nth-child(odd) { transform: rotate(-1.5deg); }
.app[data-age="kids"] .navtile:nth-child(even) { transform: rotate(1.5deg); }
.app[data-age="kids"] .navtile:active { transform: scale(.95); }

/* big friendly FABs */
.app[data-age="kids"] .fab { box-shadow: var(--shadow-md), 0 4px 0 rgba(20,20,18,.15); }
.app[data-age="kids"] .fab--nav { width: 58px; height: 58px; }

@media (prefers-reduced-motion: reduce) {
  .app[data-age="kids"] .tile:nth-child(odd),
  .app[data-age="kids"] .tile:nth-child(even),
  .app[data-age="kids"] .navtile:nth-child(odd),
  .app[data-age="kids"] .navtile:nth-child(even) { transform: none; }
}

/* PRO 16+ — sleek dark elite mode */
.app[data-age="pro"] {
  --bg-page: #100D09;
  --ink: #100D09;
  --fg-1: #F4EFE4; --fg-2: #C2B7A2; --fg-3: #A99D85;
  --n-100: rgba(255,255,255,.06); --n-200: rgba(255,255,255,.1);
  --border-1: rgba(255,255,255,.1); --border-2: rgba(255,255,255,.2);
  --track-deep: #FF7A4D;
  --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px;
  --ease-spring: cubic-bezier(.2,.7,.2,1);
}
.app[data-age="pro"] { background: #100D09; }
.app[data-age="pro"] .wm { color: #F4EFE4; }
.app[data-age="pro"] .home__top { background: #100D09; }
.app[data-age="pro"] .home__top--scrolled { box-shadow: 0 10px 22px -14px rgba(0,0,0,.85); }
.app[data-age="pro"] .tile { background: #1C1812; box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.app[data-age="pro"] .video { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.app[data-age="pro"] .answer__card { box-shadow: 0 0 50px -16px rgba(200,242,58,.5), 0 0 0 1px rgba(200,242,58,.25); }
.app[data-age="pro"] .chapter__q,
.app[data-age="pro"] .navsheet__title { color: #F4EFE4; }
.app[data-age="pro"] .finish { background: #0B0907; }
.app[data-age="pro"] .navsheet__panel { background: #15110C; }
.app[data-age="pro"] .navsheet__close { background: rgba(255,255,255,.08); color: #F4EFE4; }
.app[data-age="pro"] .btn2--ghost { color: #F4EFE4; border-color: rgba(255,255,255,.25); }
.app[data-age="pro"] .btn2--ghost:hover { border-color: #F4EFE4; background: rgba(255,255,255,.06); }
.app[data-age="pro"] .btn2--ink { background: var(--volt); color: var(--ink); }
.app[data-age="pro"] .fab--onlight { background: #1C1812; color: #F4EFE4; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.app[data-age="pro"] .fab--nav { background: var(--volt); color: #100D09; }

/* ============================================================
   ADDITIONS (production build) — age switcher, fun fact,
   real video embeds, video hint, loader. Tokens-driven so the
   three age themes restyle them for free.
   ============================================================ */

/* Age switcher in the Startseite header (replaces the static label) */
.agesw {
  position: relative; display: flex;
  background: var(--n-100); border: 1px solid var(--border-1);
  border-radius: var(--r-pill); padding: 3px;
}
/* sliding active pill (morphs between the three bands) */
.agesw__ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px; z-index: 0;
  width: calc((100% - 6px) / 3); border-radius: var(--r-pill);
  background: var(--ink);
  transform: translateX(calc(var(--i, 1) * 100%));
  transition: transform .34s var(--ease-spring);
}
.agesw__opt {
  position: relative; z-index: 1; flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--fg-3);
  border: none; background: transparent; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-pill); line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}
.agesw__opt:hover { color: var(--fg-1); }
.agesw__opt.is-on, .agesw__opt.is-on:hover { color: var(--volt); }
.agesw__opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.app[data-age="pro"] .agesw { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.app[data-age="pro"] .agesw__ind { background: var(--volt); }
.app[data-age="pro"] .agesw__opt.is-on { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .agesw__ind { transition: none; } }

/* Real video embed (loaded on tap) keeps the placeholder's frame */
.video.is-playing { display: block; padding: 0; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video__embed { position: absolute; inset: 0; }
/* "Open on YouTube" escape hatch (for videos that block embedding) */
.video__yt { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(26, 26, 25, .82); color: #fff; text-decoration: none; font-size: 11px; font-weight: 700;
  padding: 5px 9px; border-radius: var(--r-pill); line-height: 1; backdrop-filter: blur(4px); }
.video__yt:hover { background: var(--track-deep); }
.video__yt i { width: 13px; height: 13px; }

/* Observation hint under a video — the "watch for…" note */
.video__hint {
  display: flex; align-items: flex-start; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45;
  color: var(--fg-3); margin: -8px 0 18px; max-width: none;
}
.video__hint i { color: var(--track-deep); margin-top: 2px; flex: none; }

/* Fun Fact card — sits between the chapters and the Abschluss */
.funfact {
  margin: 4px 22px 0; padding: 20px 20px 22px;
  background: var(--volt-soft); border-radius: var(--r-lg);
  border: 1px solid var(--volt-deep);
  position: relative;
}
.funfact__lab {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--track-deep); display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
}
.funfact__txt { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0; font-weight: 600; }
.app[data-age="kids"] .funfact { transform: rotate(-1deg); box-shadow: var(--shadow-pop-volt); border-width: 2px; }
.app[data-age="kids"] .funfact__txt { font-size: 18px; }
.app[data-age="pro"] .funfact { background: rgba(200,242,58,.08); border-color: rgba(200,242,58,.3); }
.app[data-age="pro"] .funfact__txt { color: var(--fg-1); }

/* Loader / error states */
.loadwrap { display: grid; place-items: center; }
.loader {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--fg-3); font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.loader i { animation: spin 1s linear infinite; color: var(--track); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader i { animation: none; } }

/* ============================================================
   "EURE FRAGEN" — account control, home promo, Q&A cards,
   modals, "Meine Fragen", toast. Tokens-driven (theme-aware).
   ============================================================ */

/* Account control in the home header */
.acct { display: inline-flex; align-items: center; gap: 8px; }
.acct__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  color: var(--ink); background: var(--n-100); border: 1px solid var(--border-1);
  padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; line-height: 1;
}
.acct__btn--cta { background: var(--ink); color: var(--volt); border-color: transparent; }
.acct__btn:hover { background: var(--n-200); }
.acct__btn--cta:hover { background: var(--ink-soft); }
.acct__link { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.acct__link:hover { color: var(--fg-1); }
.app[data-age="pro"] .acct__btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--fg-1); }

/* Home controls row (age switcher) */
.home__controls { display: flex; align-items: center; gap: 10px; margin: 4px 2px 14px; }
.home__controls .agesw { flex: 1; min-width: 0; }
.home__controls .agesw__opt { padding: 7px 6px; }
.home__ctllab { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-3); }

/* Startseite promo "Frisch beantwortet" */
.promo { margin: 0 0 18px; }
.promo__head { margin: 0 2px 10px; }
.promo__lab { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--track-deep); display: inline-flex; align-items: center; gap: 7px; }
.promo__row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.promo__row::-webkit-scrollbar { display: none; }
.promocard {
  flex: 0 0 78%; max-width: 320px; scroll-snap-align: start;
  text-align: left; cursor: pointer; border: 1px solid var(--border-1);
  background: var(--ink); color: var(--fg-on-inverse); border-radius: var(--r-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-pop-volt);
}
.promocard:active { transform: translateY(1px); }
.promocard__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--volt); }
.promocard__q { font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff; }
.promocard__go { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--volt); margin-top: auto; }

/* "Eure Fragen" section on a discipline page */
.qnasec { padding: 8px 22px 4px; }
.qnasec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.qnasec__title { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.qnasec__ask { white-space: nowrap; }
.qnasec__empty { color: var(--fg-3); font-size: 15px; }
.qnalist { display: flex; flex-direction: column; gap: 16px; }

/* Q&A card (anonymous) */
.qna { border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 16px 16px 18px; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.qna__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.qna__who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); }
.qna__date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.qna__q { font-size: 17px; font-weight: 700; line-height: 1.32; color: var(--ink); margin: 0 0 10px; }
.qna__tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--track-deep); background: var(--track-soft); padding: 3px 8px; border-radius: var(--r-pill); margin-bottom: 10px; }
.qna__answer { background: var(--ink); color: var(--fg-on-inverse); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-pop-volt); }
.qna__atext { font-size: 15px; line-height: 1.55; margin: 0; }
.qna__atext strong { color: #fff; }
.qna__media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qna__photo { width: 100%; border-radius: var(--r-md); display: block; }
.qna__vid { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--ink); display: grid; place-items: center; cursor: pointer; }
.qna__vid.is-playing { display: block; }
.qna__vid .video__frame, .qna__vid iframe, .qna__vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.qna__vidplay { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--volt); color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.app[data-age="pro"] .qna { background: #1C1812; border-color: rgba(255,255,255,.07); }

/* Modal / sheet */
.modal { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; }
.modal__scrim { position: absolute; inset: 0; background: rgba(20,20,18,.55); backdrop-filter: blur(3px); animation: fadein var(--dur-base) var(--ease-out); }
.modal__panel { position: relative; margin-top: auto; background: var(--bg-page); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 18px calc(26px + env(safe-area-inset-bottom)); max-height: 92%; overflow-y: auto; scrollbar-width: none; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.45); animation: sheet-up var(--dur-slow) var(--ease-out); }
.modal__panel::-webkit-scrollbar { display: none; }
.modal__panel--wide { }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal__title { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.modal__close { width: 36px; height: 36px; border-radius: var(--r-pill); border: none; background: var(--n-100); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.modal__tabs { display: flex; gap: 4px; background: var(--n-100); border-radius: var(--r-pill); padding: 3px; margin-bottom: 16px; }
.modal__tab { flex: 1; border: none; background: transparent; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--fg-3); padding: 9px; border-radius: var(--r-pill); }
.modal__tab.is-on { background: var(--ink); color: var(--volt); }

/* Modal forms */
.mform label { display: block; font-size: 13px; font-weight: 700; color: var(--fg-2); margin-bottom: 14px; }
.mform input, .mform select, .mform textarea { width: 100%; margin-top: 6px; font-family: var(--font-sans); font-size: 16px; padding: 11px 13px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--paper); color: var(--fg-1); }
.mform input:focus, .mform select:focus, .mform textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring-focus); }
.mform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mform__check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.mform__check input { width: auto; margin: 2px 0 0; flex: none; }
.mform__submit { width: 100%; justify-content: center; margin-top: 4px; }
.mform__fine { font-size: 12px; color: var(--fg-3); margin: 10px 0 0; line-height: 1.4; }
.formerr { background: #FDE7E3; border: 1px solid var(--danger); color: #8A2A1E; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.asktext { width: 100%; font-size: 16px; padding: 12px; border: 1px solid var(--border-2); border-radius: var(--r-md); resize: vertical; }
.asktext:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring-focus); }
.askfor { font-size: 14px; color: var(--fg-2); margin: 0 0 10px; }

/* Meine Fragen */
.minelist { display: flex; flex-direction: column; gap: 12px; }
.mineitem { border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 14px; }
.mineitem__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mineitem__status { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-pill); }
.mineitem__status--ok { background: var(--volt); color: var(--ink); }
.mineitem__status--muted { background: var(--n-100); color: var(--fg-3); }
.mineitem__q { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.mineitem__a { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.qnamodal__go { margin-top: 14px; width: 100%; justify-content: center; }

/* Toast */
.toast { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); animation: toast-in var(--dur-base) var(--ease-out); max-width: 90%; text-align: center; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 420px) { .mform__row { grid-template-columns: 1fr; } }

/* ============================================================
   PRO (16+) dark-theme readability fixes for the home lead,
   community cards, modals and form fields. (var(--ink) text
   would otherwise be dark-on-dark / invisible.)
   ============================================================ */
.app[data-age="pro"] .home__lead b { color: var(--fg-1); }

.app[data-age="pro"] .modal__title,
.app[data-age="pro"] .qnasec__title,
.app[data-age="pro"] .qna__q,
.app[data-age="pro"] .mineitem__q { color: var(--fg-1); }

.app[data-age="pro"] .modal__panel { background: #15110C; }
.app[data-age="pro"] .modal__close { background: rgba(255,255,255,.08); color: var(--fg-1); }
.app[data-age="pro"] .modal__tabs { background: rgba(255,255,255,.06); }
.app[data-age="pro"] .modal__tab { color: var(--fg-2); }
.app[data-age="pro"] .mineitem { border-color: rgba(255,255,255,.1); }
.app[data-age="pro"] .mineitem__status--muted { background: rgba(255,255,255,.08); color: var(--fg-2); }

/* Form fields: dark surface + light text so typing stays readable */
.app[data-age="pro"] .mform input,
.app[data-age="pro"] .mform select,
.app[data-age="pro"] .mform textarea,
.app[data-age="pro"] .asktext {
  background: #1C1812; color: var(--fg-1); border-color: rgba(255,255,255,.18);
}
.app[data-age="pro"] .mform input::placeholder,
.app[data-age="pro"] .asktext::placeholder { color: var(--fg-3); }
.app[data-age="pro"] .mform__check { color: var(--fg-2); }

/* Site footer (Startseite) — legal/info links */
.sitefooter { margin: 28px 2px calc(20px + env(safe-area-inset-bottom)); padding-top: 20px; border-top: 1px solid var(--border-1); }
.sitefooter__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.sitefooter__links a { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); text-decoration: none; }
.sitefooter__links a:hover { color: var(--track-deep); }
.sitefooter__copy { font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.4; }
.app[data-age="pro"] .sitefooter { border-color: rgba(255,255,255,.1); }

/* ============================================================
   Scroll-reveal — touch-friendly entrance (opacity + focus blur,
   transform-free so it never fights hover / kids-tilt / :active).
   JS adds .is-in via IntersectionObserver; --reveal-i staggers.
   ============================================================ */
.reveal {
  opacity: 0;
  filter: blur(7px);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 45ms);
  will-change: opacity, filter;
}
.reveal.is-in { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; filter: none; transition: none; }
}

/* ============================================================
   Coaches & Articles — bylines, article cards (SPA)
   ============================================================ */
.cbyl { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg-2); font-weight: 700; font-size: 13px; }
.cbyl:hover .cbyl__txt { color: var(--ink); text-decoration: underline; }
.cbyl__av { width: 26px; height: 26px; border-radius: 999px; flex: none; background: var(--ink); background-size: cover; background-position: center; color: var(--volt); display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.qna__byline { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-1); }
.app[data-age="pro"] .cbyl { color: var(--fg-2); }
.app[data-age="pro"] .cbyl:hover .cbyl__txt { color: var(--fg-1); }
.app[data-age="pro"] .qna__byline { border-color: rgba(255,255,255,.1); }

.promo__lab--link { text-decoration: none; }
.promo__lab--link:hover { text-decoration: underline; }

.artlist { display: flex; flex-direction: column; gap: 12px; }
.artcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); color: var(--fg-1); }
.artcard:active { transform: translateY(1px); }
.artcard__title { font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
.artcard__lead { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.app[data-age="pro"] .artcard { background: #1C1812; border-color: rgba(255,255,255,.07); }
.app[data-age="pro"] .artcard__title { color: var(--fg-1); }

/* ============================================================
   Polish: grid cross-fade on age switch + "squishy" touch feedback
   (transform-free reveal stays separate, so these don't conflict).
   ============================================================ */
.tilegrid { transition: opacity var(--dur-base) var(--ease-out); }
.tilegrid.grid--out { opacity: 0; }

/* Springy press feedback — feels "app-like" on touch (no hover needed). */
.tile, .promocard, .navtile, .artcard, .nextcard,
.btn2, .acct__btn, .qnasec__ask, .fab, .agesw__opt, .video {
  transition: transform 200ms var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.tile:active { transform: scale(.96); }
.promocard:active, .artcard:active, .navtile:active { transform: scale(.955); }
.btn2:active, .acct__btn:active, .qnasec__ask:active, .agesw__opt:active { transform: scale(.93); }
.fab:active { transform: scale(.9); }
.nextcard:active { transform: scale(.98); }
/* keep the kids resting tilt on press */
.app[data-age="kids"] .tile:active { transform: scale(.95) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) {
  .tile, .promocard, .navtile, .artcard, .nextcard, .btn2, .acct__btn, .qnasec__ask, .fab, .agesw__opt, .video { transition: box-shadow var(--dur-base) var(--ease-out); }
  .tile:active, .promocard:active, .navtile:active, .artcard:active, .nextcard:active,
  .btn2:active, .acct__btn:active, .qnasec__ask:active, .agesw__opt:active, .fab:active { transform: none; }
}

/* ============================================================
   Bottom tab bar — persistent primary navigation (native feel).
   Frosted bar with a Material-style volt "pill" on the active tab.
   ============================================================ */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--border-1);
}
.tabbar__btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; cursor: pointer; color: var(--fg-3);
  padding: 5px 4px; min-height: 52px; border-radius: var(--r-md);
  font-family: var(--font-sans);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.tabbar__btn:active { transform: scale(.9); }
.tabbar__btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tabbar__ic {
  display: grid; place-items: center; width: 46px; height: 28px; border-radius: var(--r-pill);
  transition: background var(--dur-base) var(--ease-spring), color var(--dur-base) var(--ease-out);
}
.tabbar__lab { font-size: 10px; font-weight: 700; letter-spacing: .01em; }
.tabbar__btn.is-on { color: var(--fg-1); }
.tabbar__btn.is-on .tabbar__ic { background: var(--volt); color: var(--ink); }
.app[data-age="pro"] .tabbar { background: rgba(16,13,9,.82); border-color: rgba(255,255,255,.1); }
.app[data-age="pro"] .tabbar__btn.is-on { color: var(--fg-1); }
.app[data-age="kids"] .tabbar__lab { font-size: 11px; }
.app[data-age="kids"] .tabbar__btn.is-on .tabbar__ic { box-shadow: 0 3px 0 var(--volt-deep); }

/* Share button on the discipline hero (replaces the old nav FAB up there) */
.disc-share {
  position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 42px; height: 42px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(20,20,18,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.disc-share:hover { background: rgba(20,20,18,.6); }
.disc-share:active { transform: scale(.9); }
.disc-share:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Pull-to-refresh indicator (Startseite) */
.ptr {
  position: absolute; top: 8px; left: 50%; z-index: 25; transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--paper); color: var(--track);
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ptr.is-spin i { animation: spin 1s linear infinite; }
.app[data-age="pro"] .ptr { background: #1C1812; color: var(--track-deep); }

/* "Selber raten" prompt + the answer reward pop */
.answer__think {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--fg-2);
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; max-width: none;
}
.answer__think i { color: var(--track-deep); margin-top: 2px; flex: none; }
.answer__reveallink {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--track-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.app[data-age="pro"] .answer__think { color: var(--fg-2); }
@keyframes ans-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } }
.answer__card.pop { animation: ans-pop .42s var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .answer__card.pop { animation: none; } }

/* Skeleton loaders — shimmer placeholders instead of a blank spinner */
.skel { position: relative; overflow: hidden; background: var(--n-100); border-radius: var(--r-md); }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.app[data-age="pro"] .skel { background: rgba(255,255,255,.06); }
.app[data-age="pro"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-bar { height: 40px; width: 62%; margin: 14px 0 18px; border-radius: var(--r-pill); }
.skel-line { height: 14px; margin: 0 0 10px; border-radius: var(--r-sm); }
.skel-line--lg { height: 22px; width: 82%; }
.skel-line--sm { height: 10px; width: 42%; }
.skelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.skel-tile { aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
.skel-tile--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.skel-hero { height: 58vh; min-height: 340px; border-radius: 0; }
.skelchapters { padding: 30px 22px; }
.skelchapter { margin-bottom: 30px; }
.skel-video { height: 180px; border-radius: var(--r-md); margin-top: 14px; }

/* Bigger tap targets (>=44px feel) for small controls */
.agesw__opt { min-height: 44px; }
.acct__link { padding: 8px 6px; }
.sitefooter__links a { padding: 8px 0; display: inline-block; }

/* ============================================================
   NEW (feature pass): anonymous ask, age onboarding, progress,
   favourites, nav search, install nudge, back button, rewards.
   ============================================================ */

/* Honeypot — visually hidden, kept in the a11y tree off-screen */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Ask sheet: anonymous extras */
.askband { display: block; font-size: 13px; font-weight: 700; color: var(--fg-2); margin: 14px 0 4px; }
.askband select { width: 100%; margin-top: 6px; font-family: var(--font-sans); font-size: 16px; padding: 11px 13px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--paper); color: var(--fg-1); }
.app[data-age="pro"] .askband select { background: #1C1812; color: var(--fg-1); border-color: rgba(255,255,255,.18); }
.asklink { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--track-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Discipline hero: back (top-left) + favourite/share actions (top-right) */
.disc-back {
  position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top)); left: 16px;
  width: 42px; height: 42px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(20,20,18,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.disc-back:hover { background: rgba(20,20,18,.6); }
.disc-back:active { transform: scale(.9); }
.disc-back:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.disc-actions { position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; }
.disc-actions .disc-share { position: static; }
.disc-fav {
  width: 42px; height: 42px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(20,20,18,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.disc-fav:active { transform: scale(.9); }
.disc-fav:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.disc-fav.is-on { background: var(--volt); color: var(--ink); }
.disc-fav.is-on i { fill: var(--ink); }

/* Home progress meter — "X von Y entdeckt" */
.prgm { margin: 0 2px 18px; }
.prgm__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.prgm__lab { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--track-deep); }
.prgm__num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-2); }
.prgm__track { height: 8px; border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; }
.prgm__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--track), var(--volt-deep)); transition: width var(--dur-slow) var(--ease-out); }
.app[data-age="pro"] .prgm__track { background: rgba(255,255,255,.08); }
.app[data-age="kids"] .prgm__track { height: 12px; }

/* "Seen" badge on tiles */
.tile__seen { position: absolute; z-index: 2; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 999px; background: var(--volt); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tile.is-seen .tile__fill { opacity: .9; }
.tile:nth-child(1) .tile__seen, .tile:nth-child(8) .tile__seen { top: 12px; right: 12px; }

/* Finish progress chip */
.finprog { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 9px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--fg-on-inverse); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.finprog i { color: var(--volt); }
.finprog--all { background: var(--volt); color: var(--ink); }
.finprog--all i { color: var(--ink); }

/* Nav sheet: search + favourites filter + badges */
.navsearch { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.navsearch__ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; display: inline-flex; }
.navsearch__in { flex: 1; font-family: var(--font-sans); font-size: 16px; padding: 11px 14px 11px 38px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--bg-page); color: var(--fg-1); }
.navsearch__in:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring-focus); }
.navsearch__fav { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--bg-page); color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
.navsearch__fav.is-on { background: var(--ink); color: var(--volt); border-color: transparent; }
.navsearch__fav:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.navsheet__empty { color: var(--fg-3); font-size: 14px; padding: 18px 4px; margin: 0; }
.app[data-age="pro"] .navsearch__in, .app[data-age="pro"] .navsearch__fav { background: #1C1812; color: var(--fg-1); border-color: rgba(255,255,255,.18); }
.navtile__seen { position: absolute; z-index: 2; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 999px; background: var(--volt); color: var(--ink); display: grid; place-items: center; }
.navtile__fav { position: absolute; z-index: 2; bottom: 7px; right: 7px; color: var(--volt); display: inline-flex; }
.navtile__fav i { fill: var(--volt); }

/* First-run age onboarding */
.onb { position: absolute; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 20px; }
.onb__scrim { position: absolute; inset: 0; background: rgba(20,20,18,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadein var(--dur-base) var(--ease-out); }
.onb__panel { position: relative; width: 100%; max-width: 360px; background: var(--bg-page); border-radius: var(--r-xl); padding: 26px 22px 24px; box-shadow: var(--shadow-lg); animation: onb-in var(--dur-slow) var(--ease-spring); }
@keyframes onb-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.onb__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--track-deep); }
.onb__title { font-family: var(--font-display); text-transform: uppercase; font-size: 38px; line-height: .96; letter-spacing: -.01em; margin: 8px 0 8px; color: var(--ink); }
.onb__lead { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0 0 20px; }
.onb__opts { display: flex; flex-direction: column; gap: 10px; }
.onb__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--border-2); background: var(--bg-surface); color: var(--fg-1); border-radius: var(--r-lg); padding: 14px 16px; transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.onb__opt:hover { border-color: var(--ink); }
.onb__opt:active { transform: scale(.97); }
.onb__opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.onb__short { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1; color: var(--ink); }
.onb__band { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); }
.onb__opt--kids:hover { border-color: var(--mehrkampf); }
.onb__opt--teen:hover { border-color: var(--track); }
.onb__opt--pro:hover { border-color: var(--wurf); }
.app[data-age="pro"] .onb__panel { background: #15110C; }
.app[data-age="pro"] .onb__title, .app[data-age="pro"] .onb__short { color: var(--fg-1); }
.app[data-age="pro"] .onb__opt { background: #1C1812; border-color: rgba(255,255,255,.18); }

/* Install ("add to home screen") nudge */
.a2hs { position: absolute; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--ink); color: var(--fg-on-inverse); box-shadow: var(--shadow-lg);
  animation: toast-in var(--dur-slow) var(--ease-out); }
.a2hs__ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--volt); color: var(--ink); display: grid; place-items: center; }
.a2hs__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a2hs__txt strong { font-size: 14px; font-weight: 800; }
.a2hs__txt span { font-size: 12px; color: var(--fg-on-inverse-2); }
.a2hs__hint { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 700; color: var(--volt); }
.a2hs__add { flex: none; border: 0; cursor: pointer; background: var(--volt); color: var(--ink); font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: var(--r-pill); }
.a2hs__add:active { transform: translateY(1px); }
.a2hs__x { flex: none; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 30px; height: 30px; border-radius: var(--r-pill); cursor: pointer; display: grid; place-items: center; }

/* Reward chip on answer reveal — delight, loudest for kids */
.answer__reward { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--volt); color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  animation: reward-in .4s var(--ease-spring); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.answer__reward.is-gone { opacity: 0; transform: translateY(-6px); }
@keyframes reward-in { from { opacity: 0; transform: scale(.8) translateY(6px); } to { opacity: 1; transform: none; } }
.app[data-age="kids"] .answer__reward { font-size: 14px; transform: rotate(-2deg); box-shadow: var(--shadow-pop-volt); }
.app[data-age="kids"] .answer__reward.is-gone { opacity: 0; transform: rotate(-2deg) translateY(-8px); }
@media (prefers-reduced-motion: reduce) { .answer__reward { animation: none; } }

/* Home header: search button + account cluster */
.home__topr { display: inline-flex; align-items: center; gap: 8px; }
.home__search { width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--border-1); background: var(--n-100); color: var(--fg-1); cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out); }
.home__search:hover { background: var(--n-200); }
.home__search:active { transform: scale(.9); }
.home__search:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.app[data-age="pro"] .home__search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--fg-1); }

/* Full "Eure Fragen" page (browsable + searchable Q&A archive) */
.qpage { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }
.qpage__top { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.qpage__back { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--n-100); color: var(--ink); border: 0; cursor: pointer; }
.qpage__back:hover { background: var(--n-200); }
.qpage__title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 28px; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.qpage__ask { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 800; padding: 9px 14px; border-radius: var(--r-pill); background: var(--volt); color: var(--ink); }
.qpage__ask:active { transform: scale(.95); }
.qpage__lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.qpage__bar { display: flex; align-items: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-pill); padding: 10px 16px; box-shadow: var(--shadow-xs); }
.qpage__baric { flex: none; color: var(--fg-3); display: grid; place-items: center; }
.qpage__search { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--fg-1); }
.qpage__chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.qpage__chips::-webkit-scrollbar { display: none; }
.qchip { flex: 0 0 auto; border: 1px solid var(--border-1); background: var(--bg-surface); color: var(--fg-2); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.qchip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qchip--topic { border-color: var(--volt-deep); }
.qchip--topic.is-on { background: var(--volt-deep); color: var(--ink); border-color: var(--volt-deep); }
.qna__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qna__tag--link { border: 0; cursor: pointer; font: inherit; }
.qna__tag--link:hover { text-decoration: underline; }
.qna__tag--topic { background: var(--volt-soft); color: var(--track-deep); border: 1px solid var(--volt-deep); }

/* "Frage stellen" home CTA — recurring prompt for the platform's USP */
.askcta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 18px 20px; }
.askcta__txt { flex: 1 1 220px; min-width: 0; }
.askcta__lab { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--volt); }
.askcta__title { margin: 6px 0 2px; font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--paper); }
.askcta__sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--n-300); }
.askcta__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.askcta__btn { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 800; padding: 12px 18px; border-radius: var(--r-pill); background: var(--volt); color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-spring); }
.askcta__btn:active { transform: scale(.95); }
.askcta__mine { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--volt);
  display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 380px) { .askcta__actions { width: 100%; } .askcta__btn { flex: 1; justify-content: center; } }

/* "Meine Fragen" — answered status + coach byline */
.mineitem--done { border-color: var(--volt-deep); background: var(--volt-soft); }
.mineitem__status { display: inline-flex; align-items: center; gap: 3px; }
.mineitem__status--ok { color: var(--track-deep); font-weight: 800; }
.mineitem__by { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
.mineitem__check { font-size: 13px; }
.minelist__ask { width: 100%; justify-content: center; margin-top: 14px; }

/* "Für Eltern" home card — calm, distinct entry point (trust) */
.parentcard { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--volt-soft); border: 1px solid var(--volt-deep); border-radius: var(--r-lg);
  padding: 16px 18px; color: var(--ink); transition: transform var(--dur-fast) var(--ease-spring); }
.parentcard:active { transform: scale(.985); }
.parentcard__ic { flex: none; width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--ink); color: var(--volt); }
.parentcard__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.parentcard__lab { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.parentcard__sub { font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.parentcard__go { flex: none; color: var(--track-deep); }
.app[data-age="pro"] .parentcard { background: #20251A; border-color: var(--volt-deep); }
.app[data-age="pro"] .parentcard__sub { color: var(--n-300); }

/* "Deine Coaches" home block — slim avatar row (sits below the grid) */
.promo--coaches { margin-top: 6px; }
.coachminirow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.coachminirow::-webkit-scrollbar { display: none; }
.coachmini { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; max-width: 78%;
  text-decoration: none; color: var(--fg-1); background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-pill); padding: 7px 14px 7px 7px; box-shadow: var(--shadow-xs); transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease-out); }
.coachmini:hover { border-color: var(--ink); }
.coachmini:active { transform: scale(.96); }
.coachmini__av { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--ink); background-size: cover; background-position: center; color: var(--volt); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; text-transform: uppercase; }
.coachmini__txt { display: flex; flex-direction: column; min-width: 0; }
.coachmini__name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.coachmini__tag { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app[data-age="pro"] .coachmini { background: #1C1812; border-color: rgba(255,255,255,.1); }
.app[data-age="pro"] .coachmini__name { color: var(--fg-1); }

/* App-wide search overlay */
.srch { display: flex; flex-direction: column; min-height: 50vh; }
.srch__bar { position: relative; display: flex; align-items: center; margin-bottom: 6px; }
.srch__baric { position: absolute; left: 14px; color: var(--fg-3); display: inline-flex; pointer-events: none; }
.srch__in { width: 100%; font-family: var(--font-sans); font-size: 17px; padding: 13px 14px 13px 42px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--bg-page); color: var(--fg-1); }
.srch__in:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring-focus); }
.app[data-age="pro"] .srch__in { background: #1C1812; color: var(--fg-1); border-color: rgba(255,255,255,.18); }
.srch__results { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 4px; }
.srch__hint, .srch__empty { color: var(--fg-3); font-size: 14px; line-height: 1.5; margin: 12px 2px; }
.srch__loading { color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; padding: 14px 2px; }
.srch__group { display: flex; flex-direction: column; gap: 6px; }
.srch__glab { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--track-deep); margin: 0 2px 2px; }
.srch__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; text-decoration: none;
  border: 1px solid var(--border-1); background: var(--bg-surface); color: var(--fg-1); cursor: pointer;
  border-radius: var(--r-md); padding: 12px 14px; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.srch__row:hover { border-color: var(--ink); }
.srch__row:active { transform: scale(.99); }
.srch__rowic { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--n-100); color: var(--track-deep); display: grid; place-items: center; }
.srch__rowtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.srch__rowt { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__rowsub { font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__row > i { color: var(--fg-3); flex: none; }
.app[data-age="pro"] .srch__row { background: #1C1812; border-color: rgba(255,255,255,.07); }
.app[data-age="pro"] .srch__rowt { color: var(--fg-1); }
.app[data-age="pro"] .srch__rowic { background: rgba(255,255,255,.06); }

/* ============================================================
   Decode-Challenge — binary "Tipp ab: A oder B?" prediction game
   ============================================================ */
.predict__lab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--track-deep); margin-bottom: 12px; }
.predict__opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.predict__opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-surface); border: 2px solid var(--border-2); color: var(--fg-1);
  border-radius: var(--r-md); padding: 13px 15px; font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.predict__opt:hover:not(:disabled) { border-color: var(--ink); }
.predict__opt:active:not(:disabled) { transform: scale(.98); }
.predict__opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.predict__opt:disabled { cursor: default; }
.predict__key { flex: none; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--n-100); color: var(--fg-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.predict__txt { flex: 1; line-height: 1.3; }
.predict__mark { width: 18px; height: 18px; flex: none; opacity: 0; color: var(--ink); transition: opacity var(--dur-base) var(--ease-out); }
/* correct / wrong states */
.predict__opt.is-correct { background: var(--volt); border-color: var(--volt-deep); color: var(--ink); }
.predict__opt.is-correct .predict__key { background: var(--ink); color: var(--volt); }
.predict__opt.is-correct .predict__mark { opacity: 1; }
.predict__opt.is-wrong { background: #FDE7E3; border-color: var(--danger); color: #8A2A1E; animation: predict-shake .4s var(--ease-out); }
.predict__opt.is-wrong .predict__key { background: var(--danger); color: #fff; }
@keyframes predict-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .predict__opt.is-wrong { animation: none; } }
.predict__fb { min-height: 0; }
.predict__fb:not(:empty) { margin: 2px 0 12px; }
.predict__fbok, .predict__fbno { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); animation: reward-in .4s var(--ease-spring); }
.predict__fbok { background: var(--volt); color: var(--ink); }
.predict__fbno { background: var(--n-100); color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .predict__fbok, .predict__fbno { animation: none; } }
.app[data-age="pro"] .predict__opt { background: #1C1812; border-color: rgba(255,255,255,.18); }
.app[data-age="pro"] .predict__key { background: rgba(255,255,255,.08); color: var(--fg-2); }
.app[data-age="pro"] .predict__opt.is-correct { background: var(--volt); color: var(--ink); }
.app[data-age="pro"] .predict__fbno { background: rgba(255,255,255,.08); color: var(--fg-1); }
/* kids: chunkier, bouncier options */
.app[data-age="kids"] .predict__opt { border-width: 3px; font-size: 16px; box-shadow: 0 3px 0 rgba(20,20,18,.12); }
.app[data-age="kids"] .predict__opt.is-correct { box-shadow: var(--shadow-pop-volt); }

/* Home progress meter: score chip */
.prgm__right { display: inline-flex; align-items: center; gap: 10px; }
.prgm__scorewrap { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--track-deep); }
.prgm__scorewrap i { color: var(--volt-deep); }
.app[data-age="pro"] .prgm__scorewrap { color: var(--volt); }

/* Finish: checker-score chip variant reuses .finprog */
.finprog--checker { margin-bottom: 12px; }

/* Kids theme: lighter, more playful community + promo cards (less "adult dark") */
.app[data-age="kids"] .promocard { background: var(--volt-soft); color: var(--ink); border: 2px solid var(--volt-deep); box-shadow: var(--shadow-pop-volt); }
.app[data-age="kids"] .promocard:nth-child(even) { transform: rotate(1.2deg); }
.app[data-age="kids"] .promocard:nth-child(odd) { transform: rotate(-1.2deg); }
.app[data-age="kids"] .promocard__q { color: var(--ink); }
.app[data-age="kids"] .promocard__tag { color: var(--track-deep); }
.app[data-age="kids"] .promocard__go { color: var(--track-deep); }
.app[data-age="kids"] .prgm__lab, .app[data-age="kids"] .prgm__num { font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .app[data-age="kids"] .promocard:nth-child(even), .app[data-age="kids"] .promocard:nth-child(odd) { transform: none; }
}