/*
 * Kampagnen-Landingpages unter /start/training/, /start/uebungen/,
 * /start/anwesenheit/.
 *
 * Design folgt den oeffentlichen Landingpages (/ und /landing/club/): dunkler
 * Video-Hero mit Marker-Headline und Shimmer-CTA, darunter weisse Sektionen.
 * Die tt-Klassen sind aus templates/landing/_hero.html portiert, weil
 * public_base.html weder die Akzent-Variablen noch diese Effekte mitbringt.
 * Genau derselbe Weg wie bei templates/exercises/public/drawing_tool.html.
 *
 * Der cmp-Namensraum darunter ist neu und haelt sich an die Optik der
 * #system-Demo auf der Landingpage: breite zweispaltige Formulare, Felder mit
 * hellgrauem Grund, segmentierte Auswahl, keine schweren Kartenrahmen.
 *
 * Tailwind laeuft als gepurgter Build, seltene Utilities fehlen darin. Was hier
 * gebraucht wird, steht deshalb als echtes CSS und nicht als Utility-Kette.
 */

/* =========================================================================
   Aus dem Landing-Hero portiert
   ========================================================================= */

.tt-scope {
  /* public_base setzt am body bg-slate-50. Die Landingpages sind darunter aber
     weiss, und der Weiss-Fade am Hero-Ende trifft sonst auf Grau, was eine
     sichtbare Kante gibt. */
  background: #ffffff;

  --tt-accent: #10b981;
  --tt-accent-2: #059669;
  --tt-accent-light: #34d399;
  --tt-accent-shadow: rgba(16, 185, 129, .35);
}

/* Die Navbar-Aufhellung fuer den dunklen Hero steht bewusst NICHT hier,
   sondern in marketing/templates/marketing/partials/_campaign_darknav.html.
   Sie ist nicht scopebar (der <header> liegt ausserhalb von .tt-scope), und
   global wuerde sie die Navigation auf jeder hellen Kampagnenseite
   unsichtbar machen. Nur Seiten mit dunklem Hero binden sie ein. */

/* Marker in der Headline, laeuft beim Laden von links ein.
   Die Schrift ist von Anfang an dunkel: vorher stand sie eine halbe Sekunde
   lang hellgruen auf Weiss da, bevor der Strich kam, und genau dieser Moment
   sah aus wie ein Fehler. Der Strich startet frueher und laeuft kuerzer. */
.tt-mark {
  position: relative; white-space: nowrap;
  color: #052e16;
}
.tt-mark::before {
  content: ""; position: absolute; z-index: -1;
  inset: .14em -.22em -.02em;
  background: var(--tt-accent-light);
  border-radius: .5em .3em .6em .25em / .4em .6em .3em .5em;
  transform: scaleX(0) rotate(-1.2deg); transform-origin: left center;
  animation: tt-mark-sweep .42s cubic-bezier(.65, .05, .35, .95) .12s forwards;
}
@keyframes tt-mark-sweep { to { transform: scaleX(1) rotate(-1.2deg); } }

/* Shimmer-CTA wie "Kostenlos starten" auf der Landingpage. */
.tt-shimmer-btn {
  position: relative; z-index: 0; overflow: hidden;
  border-radius: .75rem; transition: transform .15s ease;
}
.tt-shimmer-btn:active { transform: translateY(1px); }
.tt-shimmer-btn::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 640px; height: 640px; margin: -320px 0 0 -320px; filter: blur(2px);
  background: conic-gradient(from 0deg,
    var(--tt-shimmer-base, rgba(255, 255, 255, .16)) 0deg 270deg,
    var(--tt-shimmer, rgba(255, 255, 255, .95)) 315deg,
    var(--tt-shimmer-base, rgba(255, 255, 255, .16)) 360deg);
  animation: tt-shimmer-spin 3s linear infinite; will-change: transform;
}
.tt-shimmer-btn::after {
  content: ""; position: absolute; z-index: -1; inset: 1.5px;
  border-radius: calc(.75rem - 1.5px);
  background: var(--tt-btn-bg, #020617);
  box-shadow: inset 0 -8px 12px rgba(255, 255, 255, .10);
  transition: box-shadow .3s ease;
}
.tt-shimmer-btn:hover::after { box-shadow: inset 0 -6px 14px rgba(255, 255, 255, .22); }
.tt-shimmer-btn:active::after { box-shadow: inset 0 -10px 14px rgba(255, 255, 255, .28); }
@keyframes tt-shimmer-spin { to { transform: rotate(360deg); } }
.tt-shimmer-primary {
  --tt-btn-bg: linear-gradient(135deg, var(--tt-accent), var(--tt-accent-2));
  --tt-shimmer: rgba(255, 255, 255, .95);
  color: #fff; box-shadow: 0 12px 30px -8px var(--tt-accent-shadow);
}
.tt-shimmer-dark {
  --tt-btn-bg: #0f172a;
  --tt-shimmer: rgba(255, 255, 255, .75);
  color: #fff; box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .55);
}

/* Avatar-Circles der Social-Proof-Zeile. */
.tt-avatar {
  position: relative; z-index: 0; flex-shrink: 0;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, .9);
  object-fit: cover; background: #cbd5e1; transition: transform .2s ease;
}
.tt-avatar:hover { transform: translateY(-.5rem); z-index: 10; }
.tt-avatar + .tt-avatar { margin-left: -1rem; }
/* Der Zaehler waechst mit der Trainerzahl: "+401" passt nicht mehr in einen
   Kreis von fester Breite, "+1234" erst recht nicht. Deshalb eine Pille, die
   sich am Text ausrichtet und nur die Hoehe vom Avatar erbt. */
.tt-avatar-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0f172a; color: #fff; font-size: .8125rem; font-weight: 700;
  width: auto; min-width: 3.5rem; padding: 0 .5rem; white-space: nowrap;
}
.tt-social-text { text-shadow: 0 1px 3px rgba(2, 6, 23, .55); }

/* FAQ im Landing-Layout: links Chip und Headline, rechts die Fragen.
   Eigene Klasse statt lg:grid-cols-12 + lg:col-span-5/7: die drei fehlen im
   gepurgten Tailwind-Build und das Layout waere still einspaltig geblieben. */
.cmp-faq-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) {
  .cmp-faq-layout { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
}

/* FAQ im Landing-Layout: Chip, Marker-Headline, Zeilen mit Plus-Toggle. */
.tt-faq-chip {
  display: inline-block; background: var(--tt-accent-light, #34d399);
  color: #0f172a; font-weight: 800; font-size: .7rem; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .6rem; border-radius: .4rem;
}
.tt-faq-item { border-top: 1px solid #e2e8f0; }
.tt-faq-item:last-child { border-bottom: 1px solid #e2e8f0; }
.tt-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.35rem 0; text-align: left; background: none;
  border: none; cursor: pointer;
}
.tt-faq-qt { font-size: 1.05rem; font-weight: 700; color: #0f172a; transition: color .2s ease; }
@media (min-width: 768px) { .tt-faq-qt { font-size: 1.15rem; } }
.tt-faq-q:hover .tt-faq-qt { color: var(--tt-accent, #10b981); }
.tt-faq-plus {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: #94a3b8;
  transition: transform .3s ease, color .3s ease;
}
.tt-faq-q[aria-expanded="true"] .tt-faq-plus { transform: rotate(45deg); color: var(--tt-accent, #10b981); }
.tt-faq-q[aria-expanded="true"] .tt-faq-qt { color: var(--tt-accent, #10b981); }
.tt-faq-panel { padding-bottom: 1.35rem; }
.tt-faq-panel p { color: #475569; line-height: 1.7; max-width: 62ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tt-mark::before { animation: none; transform: scaleX(1) rotate(-1.2deg); }
  /* Shimmer bleibt an: Windows meldet prefers-reduced-motion schon bei
     abgeschalteten Fenstereffekten, die CTAs wuerden sonst einfrieren. */
}

/* =========================================================================
   Kampagnen-Werkzeuge (weisse Sektionen unter dem Hero)
   ========================================================================= */

.cmp-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .cmp-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .cmp-wrap { padding: 0 2rem; } }

.cmp-section { padding: 3.5rem 0; }
@media (min-width: 1024px) { .cmp-section { padding: 5rem 0; } }
.cmp-section--tight { padding-top: 0; }
.cmp-section--dark { background: #020617; color: #fff; }

.cmp-h2 {
  font-size: 1.75rem; font-weight: 800; color: #0f172a;
  letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .6rem;
  /* Eigener Stacking-Context: .tt-mark::before liegt auf z-index:-1 und wuerde
     sonst hinter dem weissen Hintergrund von .tt-scope landen. Im Hero klappt
     es nur, weil dort ein Wrapper mit z-index:10 darueber liegt. */
  position: relative; z-index: 0;
}
@media (min-width: 768px) { .cmp-h2 { font-size: 2.25rem; } }
.cmp-section--dark .cmp-h2 { color: #fff; }
.cmp-sub { font-size: 1rem; color: #64748b; margin: 0 0 2rem; max-width: 44rem; line-height: 1.65; }
.cmp-section--dark .cmp-sub { color: #94a3b8; }

.cmp-eyebrow {
  display: inline-block; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: #0f172a; background: var(--tt-accent-light, #34d399);
  padding: .4rem .6rem; border-radius: .4rem; margin-bottom: 1rem;
}

/* ---------- Werkzeug-Umschalter (wie der Algorithmus/Baukasten-Tab) ---------- */
.cmp-toolbar {
  display: inline-flex; gap: .25rem; padding: .3rem;
  background: #f1f5f9; border-radius: 9999px; margin-bottom: 1.75rem;
}
.cmp-toolbar a, .cmp-toolbar span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.15rem; border-radius: 9999px;
  font-size: .9rem; font-weight: 700; color: #64748b; text-decoration: none;
}
.cmp-toolbar .is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.cmp-toolbar svg { width: 1rem; height: 1rem; }

/* ---------- Formular ---------- */
.cmp-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem 2rem; }
@media (min-width: 900px) { .cmp-grid { grid-template-columns: 1fr 1fr; } }

.cmp-field { min-width: 0; }
.cmp-label { display: block; font-size: .875rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.cmp-req { color: var(--tt-accent, #10b981); }
.cmp-hint { margin: .45rem 0 0; font-size: .8rem; color: #94a3b8; }

.cmp-select, .cmp-input {
  width: 100%; padding: .85rem 1rem; font-size: 1rem;
  border: 1px solid #e2e8f0; border-radius: .75rem;
  background: #fff; color: #0f172a; min-height: 52px;
  appearance: none; -webkit-appearance: none;
}
.cmp-select:focus, .cmp-input:focus {
  outline: none; border-color: var(--tt-accent, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}
.cmp-select-wrap { position: relative; }
.cmp-select-wrap > svg {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem; pointer-events: none;
  fill: none; stroke: #94a3b8; stroke-width: 2;
}

/* Segmentierte Auswahl (Staerkeklasse, Dauer) */
.cmp-seg {
  display: flex; gap: 0; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: .75rem; padding: .25rem;
}
.cmp-seg button {
  flex: 1 1 0; min-height: 44px; padding: .55rem .4rem;
  border: none; background: transparent; border-radius: .55rem;
  font-size: .92rem; font-weight: 600; color: #64748b; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cmp-seg button.is-active {
  background: #fff; color: #0f172a; font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}
.cmp-seg--stack { flex-wrap: wrap; }
.cmp-seg--stack button { flex: 1 1 45%; }
@media (min-width: 640px) { .cmp-seg--stack button { flex: 1 1 0; } }

/* Stepper: Zahl gross in der Mitte, Knoepfe aussen (wie in der #system-Demo).
   Die Zahl ist ein Eingabefeld, kein Text: tippen geht schneller als achtmal
   Plus. Minus und Plus sind volle 44px, damit der Daumen sie sicher trifft;
   das Feld nimmt sich den Platz dazwischen, damit die halbe Spalte auf dem
   Handy nicht ueberlaeuft. */
.cmp-stepper {
  display: flex; align-items: center; gap: .25rem;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: .75rem; padding: .25rem; min-height: 54px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cmp-stepper:focus-within {
  border-color: var(--tt-accent, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}
.cmp-stepper button {
  width: 44px; height: 44px; flex: none; border: 1px solid #e2e8f0;
  background: #fff; border-radius: .5rem; font-size: 1.25rem; font-weight: 700;
  color: #334155; cursor: pointer; line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cmp-stepper button:hover { border-color: #cbd5e1; background: #f8fafc; }
.cmp-stepper button:active { transform: scale(.94); }
.cmp-stepper__val {
  flex: 1 1 0; min-width: 0; width: 2.5rem; height: 44px;
  padding: 0; border: none; background: none;
  font: inherit; font-size: 1.15rem; font-weight: 700; color: #0f172a;
  text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.cmp-stepper__val:focus { outline: none; }
.cmp-stepper__val::-webkit-outer-spin-button,
.cmp-stepper__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Picker-Button (Schwerpunkt), sieht aus wie ein Select */
.cmp-picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .85rem 1rem; min-height: 52px;
  border: 1px solid #e2e8f0; border-radius: .75rem;
  background: #fff; font-size: 1rem; color: #94a3b8;
  text-align: left; cursor: pointer;
}
.cmp-picker-btn.is-set { color: #0f172a; font-weight: 600; }
.cmp-picker-btn svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: #94a3b8; stroke-width: 2; }

/* ---------- Buttons ---------- */
.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .9rem 1.6rem; border-radius: .75rem;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.cmp-btn--primary {
  background: linear-gradient(135deg, var(--tt-accent), var(--tt-accent-2));
  color: #fff; box-shadow: 0 12px 30px -12px var(--tt-accent-shadow);
}
.cmp-btn--primary:hover { filter: brightness(1.05); }
.cmp-btn--primary[disabled] { opacity: .55; cursor: default; filter: none; }
.cmp-btn--ghost { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.cmp-btn--ghost:hover { border-color: #cbd5e1; background: #f8fafc; }
.cmp-btn--dark { background: #0f172a; color: #fff; }
.cmp-btn--dark:hover { background: #1e293b; }
.cmp-btn--onDark { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
.cmp-btn--onDark:hover { background: rgba(255, 255, 255, .12); }
.cmp-btn--block { width: 100%; }
.cmp-btn--lg { min-height: 58px; font-size: 1.05rem; }
.cmp-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }

.cmp-spin {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: cmpSpin .7s linear infinite;
}
@keyframes cmpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cmp-spin { animation: none; } }

.cmp-err {
  margin: 1rem 0 0; font-size: .92rem; color: #b91c1c;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: .6rem; padding: .75rem .9rem;
}
.cmp-note {
  margin: 1rem 0 0; font-size: .92rem; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: .6rem; padding: .75rem .9rem;
}

/* ---------- Ergebnis ---------- */
.cmp-resultbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.cmp-back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer; padding: .4rem 0;
  font-size: .95rem; font-weight: 600; color: #64748b;
}
.cmp-back:hover { color: #0f172a; }
.cmp-back svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Bottom-Sheet (Schwerpunkt-Picker) ---------- */
.cmp-sheet-back {
  position: fixed; inset: 0; background: rgba(2, 6, 23, .6);
  backdrop-filter: blur(2px);
  z-index: 60; display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 768px) { .cmp-sheet-back { align-items: center; padding: 2rem; } }
.cmp-sheet {
  background: #fff; width: 100%; max-width: 36rem;
  border-radius: 1.25rem 1.25rem 0 0; max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .5);
}
@media (min-width: 768px) { .cmp-sheet { border-radius: 1.25rem; max-height: 76vh; } }
.cmp-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.cmp-sheet-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.cmp-sheet-body { overflow-y: auto; padding: .5rem 1.25rem 1.5rem; -webkit-overflow-scrolling: touch; }
.cmp-sheet-group { margin-top: 1.1rem; }
.cmp-sheet-group > h4 {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3b8; margin: 0 0 .6rem;
}
.cmp-sheet-sub { font-size: .82rem; font-weight: 700; color: #475569; margin: .9rem 0 .45rem; }
.cmp-sheet-opt {
  display: block; width: 100%; text-align: left; min-height: 46px;
  padding: .7rem .9rem; margin-bottom: .4rem;
  border: 1px solid #e2e8f0; border-radius: .6rem;
  background: #fff; font-size: .95rem; color: #334155; cursor: pointer;
}
.cmp-sheet-opt:hover { border-color: var(--tt-accent, #10b981); background: #f0fdf4; }
.cmp-sheet-opt.is-active {
  border-color: var(--tt-accent, #10b981); background: #ecfdf5;
  font-weight: 700; color: #047857;
}
.cmp-x { background: none; border: none; cursor: pointer; padding: .4rem; line-height: 0; }
.cmp-x svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #64748b; stroke-width: 2; }

/* ---------- Registrierungs-Gate ---------- */
.cmp-gate-back {
  position: fixed; inset: 0; z-index: 70; background: rgba(2, 6, 23, .75);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  overflow-y: auto;
}
.cmp-gate {
  background: #fff; border-radius: 1.25rem; width: 100%; max-width: 28rem;
  padding: 1.75rem; box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .6);
}
.cmp-gate h3 { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.cmp-gate-lead { margin: 0 0 1.25rem; font-size: .95rem; color: #64748b; line-height: 1.6; }
.cmp-gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.cmp-gate-or {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0; font-size: .72rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .1em;
}
.cmp-gate-or::before, .cmp-gate-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.cmp-gate-google {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 52px; border: 1px solid #e2e8f0; border-radius: .75rem;
  font-weight: 700; color: #0f172a; text-decoration: none; background: #fff;
}
.cmp-gate-google:hover { background: #f8fafc; border-color: #cbd5e1; }
.cmp-gate-google svg { width: 1.2rem; height: 1.2rem; flex: none; }
/* Abstand zwischen dem E-Mail-Feld und dem Knopf. Als Klasse, weil die
   :style-Bindung des Knopfs (deaktivierter Zustand) ein style-Attribut
   ersetzen wuerde. */
.cmp-gate .cmp-gate-submit { margin-top: 1.25rem; }
/* Hinweis unter dem Google-Knopf im In-App-Browser (Instagram, Facebook). */
.cmp-gate-hint { margin: .6rem 0 0; font-size: .78rem; color: #94a3b8; text-align: center; line-height: 1.5; }
.cmp-gate-fine { margin: 1rem 0 0; font-size: .78rem; color: #94a3b8; text-align: center; line-height: 1.55; }
.cmp-gate-fine a { color: var(--tt-accent-2, #059669); }

/* ---------- Feature-Karten ---------- */
.cmp-features { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .cmp-features { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.cmp-feature {
  border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem;
  background: #fff; transition: border-color .2s ease, transform .2s ease;
}
.cmp-feature:hover { border-color: #cbd5e1; transform: translateY(-2px); }
.cmp-feature-ico {
  width: 2.5rem; height: 2.5rem; border-radius: .7rem;
  background: #ecfdf5; color: var(--tt-accent-2, #059669);
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}
.cmp-feature-ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.cmp-feature h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.cmp-feature p { margin: 0; font-size: .95rem; color: #64748b; line-height: 1.6; }

/* =========================================================================
   Schlanke Variante: /start/training/
   =========================================================================
   Erstes Ziel einer Instagram-Anzeige und der Brevo-Mail. Kein Hero, kein
   Video, keine Sektionen darunter: Social Proof, Fortschrittsbalken, vier
   Felder, Knopf. Aufbau nach templates/teams/onboarding.html, damit sich das
   Formular anfuehlt wie der erste Schritt in der App und nicht wie Werbung.
   Der Balken startet gefuellt, weil der Besucher mit dem Klick auf die Anzeige
   schon einen Schritt gemacht hat. */

.cmp-lean { background: #fff; min-height: 70vh; }
.cmp-lean-wrap { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
@media (min-width: 640px) { .cmp-lean-wrap { padding: 2.5rem 1.5rem 4rem; } }

/* Social Proof ganz oben, auf hellem Grund */
.cmp-proof-row { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.75rem; }
.cmp-proof-row .tt-avatar { width: 2.5rem; height: 2.5rem; border-color: #fff; }
.cmp-proof-row .tt-avatar + .tt-avatar { margin-left: -.7rem; }
.cmp-proof-row .tt-avatar-more { min-width: 2.5rem; font-size: .75rem; padding: 0 .4rem; }
/* min-width:0 erlaubt dem Text zu schrumpfen und umzubrechen. Ohne das
   behaelt das Flex-Kind seine Inhaltsbreite und die Zeile laeuft rechts aus
   dem Bild, statt auf die zweite Zeile zu gehen. */
.cmp-proof-row p { margin: 0; min-width: 0; font-size: .9rem; color: #64748b; line-height: 1.4; }
.cmp-proof-row strong { color: #0f172a; font-weight: 700; }

/* Kopfzeile: nur der Titel, darunter der Balken. Die Prozentzahl daneben war
   eine zweite Anzeige derselben Sache. */
.cmp-lean-head { margin-bottom: .75rem; }
.cmp-lean-h1 {
  font-size: 1.5rem; font-weight: 800; color: #0f172a;
  letter-spacing: -.02em; line-height: 1.2; margin: 0; min-width: 0;
  position: relative; z-index: 0;
}
@media (min-width: 640px) { .cmp-lean-h1 { font-size: 1.875rem; } }

.cmp-bar { height: 6px; width: 100%; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.cmp-bar > div {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--tt-accent), var(--tt-accent-2));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.cmp-lean-sub { font-size: .9rem; color: #64748b; margin: .85rem 0 0; line-height: 1.5; }

/* Felder untereinander, ein Feld pro Zeile: auf dem Handy ist jede Spalte
   eine Spalte zu viel. */
.cmp-lean-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.35rem; }

/* ---------- Dialog-Ansicht: Sprechblase, Kacheln, Ladesequenz ----------
   Eine Frage pro Bildschirm. Die Blase geht auf die letzte Antwort ein
   (cmp-bubble__react) und stellt die naechste Frage (cmp-bubble__q). Die
   Kacheln sind grosse Tippflaechen, der Vorschlag aus dem Link steht zuerst
   und ueber die ganze Breite. */
/* Solange das Gespraech laeuft, bleibt der PWA-Install-Knopf aus
   public_base.html weg: er sass sonst auf den Kacheln. Die Seiten setzen
   die Klasse per x-effect. */
body.cmp-hide-install .tt-install-fab,
body.cmp-hide-install .tt-install-pill { display: none !important; }

/* Der Chat-Verlauf: Bot links, Antworten rechts in Gruen. */
.cmp-dialog__bar { margin-top: .25rem; }
.cmp-chat { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.cmp-msg--user { display: flex; justify-content: flex-end; }
.cmp-msg__user {
  max-width: 82%; padding: .6rem .95rem;
  border-radius: 1rem; border-top-right-radius: .35rem;
  background: var(--tt-accent-2, #059669); color: #fff;
  font-size: .93rem; font-weight: 600; line-height: 1.4;
  animation: cmp-pop .3s cubic-bezier(.34, 1.4, .5, 1) both;
}
.cmp-chat__end { height: 1px; }
.cmp-bubble { display: flex; align-items: flex-start; gap: .85rem; cursor: default; }
/* Spotlight im Baukasten (Schritt 2): das Loch liegt ueber "Uebung
   hinzufuegen", sein Schatten dunkelt den Rest ab. Bot und Satz stehen fix
   darueber, die Lage rechnet coachStyle() aus dem Knopf. Ueber Kopfzeile
   (50), Install-Knopf (56) und Picker (60), unter dem Detail (70). */
.cmp-coach { position: fixed; inset: 0; z-index: 65; }
.cmp-coach__hole {
  position: fixed; border-radius: 1rem; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .62);
}
.cmp-coach__bot { position: fixed; width: 64px; height: 68px; pointer-events: none; }
.cmp-coach__bot .cmp-bot-wrap { width: 64px; height: 68px; }
.cmp-coach__text {
  position: fixed; pointer-events: none;
  background: #fff; color: #0f172a; border-radius: 1rem; border-bottom-right-radius: .3rem;
  padding: .8rem .95rem; font-size: .95rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .55);
  animation: cmp-pop .35s cubic-bezier(.34, 1.4, .5, 1) both;
}

/* Der Bot im Spotlight: drei Spruenge zur Begruessung, danach der ruhige
   Rhythmus. Zwei Animationen nacheinander, die zweite startet, wenn die
   erste (3 x 1.1s) durch ist. */
.cmp-bot-wrap.is-cheer .cmp-bot {
  animation: cmp-bot-work 1.1s cubic-bezier(.4, 0, .2, 1) 3, cmp-bot-idle 7s ease-in-out 3.3s infinite;
}
.cmp-bot-wrap.is-cheer .cmp-bot__ground {
  animation: cmp-bot-ground-work 1.1s cubic-bezier(.4, 0, .2, 1) 3, cmp-bot-ground 7s ease-in-out 3.3s infinite;
}
/* Nur das Gesicht der neuesten Nachricht bewegt sich. */
.cmp-bot-wrap.is-still .cmp-bot, .cmp-bot-wrap.is-still .cmp-bot__svg,
.cmp-bot-wrap.is-still .cmp-bot__ground, .cmp-bot-wrap.is-still .cmp-bot__eyes,
.cmp-bot-wrap.is-still .cmp-bot__eye, .cmp-bot-wrap.is-still .cmp-bot__paper,
.cmp-bot-wrap.is-still .cmp-bot__pen { animation: none; }
.cmp-bot-wrap.is-still .cmp-bot__paper { opacity: 1; }
.cmp-bot-wrap.is-still .cmp-bot__pen { opacity: 0; }

/* Der Bot: ein glaenzender Plastik-Koerper (Verlaeufe im SVG, siehe
   landing_training.html) mit zwei Augen. Ruhig: leichtes Wippen, Blinzeln,
   Blick zur Seite, alle paar Sekunden ein Sprung mit Stauchen und Strecken,
   der Bodenschatten zieht sich dabei zusammen. Sprechend (is-talking):
   kleine schnelle Huepfer. Arbeitend (is-working): Sprung um Sprung, alle
   drei Spruenge eine Drehung. Alles CSS; transform-box: fill-box, damit die
   Augen um sich selbst skalieren. */
.cmp-bot-wrap { position: relative; flex: none; width: 3.1rem; height: 3.35rem; }
.cmp-bot__ground {
  position: absolute; left: 12%; right: 12%; bottom: 0; height: .45rem;
  border-radius: 50%; background: rgba(15, 23, 42, .22); filter: blur(2px);
  transform-origin: 50% 50%;
  animation: cmp-bot-ground 7s ease-in-out infinite;
}
.cmp-bot {
  position: absolute; left: 0; right: 0; top: 0; bottom: .3rem;
  transform-origin: 50% 100%; perspective: 160px;
  animation: cmp-bot-idle 7s ease-in-out infinite;
}
.cmp-bot__svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  animation: cmp-bot-bob 3.4s ease-in-out infinite;
}
.cmp-bot__eyes { animation: cmp-bot-glance 7s ease-in-out infinite; }
.cmp-bot__eye { fill: #0b1220; transform-box: fill-box; transform-origin: center; animation: cmp-bot-blink 4.6s infinite; }
.cmp-bot__eye + .cmp-bot__eye { animation-delay: .05s; }
.cmp-bot-wrap.is-talking .cmp-bot { animation: cmp-bot-chat .55s ease-in-out infinite; }
.cmp-bot-wrap.is-talking .cmp-bot__ground { animation: cmp-bot-ground-chat .55s ease-in-out infinite; }
.cmp-bot-wrap.is-working .cmp-bot { animation: cmp-bot-work 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.cmp-bot-wrap.is-working .cmp-bot__svg { animation: cmp-bot-spin 3.3s linear infinite; }
.cmp-bot-wrap.is-working .cmp-bot__ground { animation: cmp-bot-ground-work 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.cmp-bot-wrap.is-working .cmp-bot__eyes { animation: cmp-bot-scan 1.1s ease-in-out infinite; }
@keyframes cmp-bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes cmp-bot-blink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes cmp-bot-glance {
  0%, 34%, 100% { transform: translateX(0); }
  42%, 58% { transform: translateX(1.7px); }
  68%, 84% { transform: translateX(-1.5px); }
}
@keyframes cmp-bot-idle {
  0%, 82%, 100% { transform: translateY(0) scale(1, 1); }
  85% { transform: translateY(2px) scale(1.1, .88); }
  90% { transform: translateY(-16px) scale(.94, 1.08); }
  95% { transform: translateY(0) scale(1.12, .88); }
  97.5% { transform: translateY(-3px) scale(.98, 1.03); }
}
@keyframes cmp-bot-ground {
  0%, 82%, 100% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1.08); opacity: 1; }
  90% { transform: scale(.55); opacity: .4; }
  95% { transform: scale(1.12); opacity: 1; }
}
@keyframes cmp-bot-chat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes cmp-bot-ground-chat { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); opacity: .8; } }
@keyframes cmp-bot-work {
  0%, 80%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(2px) scale(1.1, .88); }
  40% { transform: translateY(-18px) scale(.94, 1.08); }
  62% { transform: translateY(0) scale(1.12, .88); }
  72% { transform: translateY(-3px) scale(.98, 1.03); }
}
@keyframes cmp-bot-ground-work {
  0%, 80%, 100% { transform: scale(1); opacity: 1; }
  40% { transform: scale(.5); opacity: .35; }
  62% { transform: scale(1.12); opacity: 1; }
}
@keyframes cmp-bot-spin { 0%, 58% { transform: rotateY(0); } 78% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }
@keyframes cmp-bot-scan { 0%, 100% { transform: translateX(-1.8px); } 50% { transform: translateX(1.8px); } }

/* Zettel und Stift in der Hand: im Ruhezustand wechseln sie sich ab (der
   Zettel die meiste Zeit, der Stift kurz), beim Sprechen bleibt der Zettel,
   beim Arbeiten schreibt der Stift. */
.cmp-bot__paper, .cmp-bot__pen { transform-box: fill-box; transform-origin: 30% 100%; }
.cmp-bot__paper { animation: cmp-prop-paper 9s ease-in-out infinite; }
.cmp-bot__pen { opacity: 0; animation: cmp-prop-pen 9s ease-in-out infinite; }
.cmp-bot-wrap.is-talking .cmp-bot__paper { animation: none; opacity: 1; }
.cmp-bot-wrap.is-talking .cmp-bot__pen { animation: none; opacity: 0; }
.cmp-bot-wrap.is-working .cmp-bot__paper { animation: none; opacity: 0; }
.cmp-bot-wrap.is-working .cmp-bot__pen { opacity: 1; animation: cmp-pen-write .45s ease-in-out infinite; }
@keyframes cmp-prop-paper {
  0%, 60% { opacity: 1; transform: scale(1); }
  64%, 94% { opacity: 0; transform: scale(.5); }
  98%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cmp-prop-pen {
  0%, 62% { opacity: 0; transform: scale(.5) rotate(0); }
  66% { opacity: 1; transform: scale(1) rotate(0); }
  70%, 80%, 90% { transform: scale(1) rotate(-7deg); }
  75%, 85% { transform: scale(1) rotate(7deg); }
  93% { opacity: 1; transform: scale(1) rotate(0); }
  97%, 100% { opacity: 0; transform: scale(.5) rotate(0); }
}
@keyframes cmp-pen-write { 0%, 100% { transform: rotate(-8deg) translateX(-.6px); } 50% { transform: rotate(8deg) translateX(.6px); } }

/* Schreibmarke waehrend des Tippens. */
.cmp-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em;
  background: #0f172a; animation: cmp-caret 1s steps(2, start) infinite;
}
@keyframes cmp-caret { to { visibility: hidden; } }

/* Die Auswahl poppt nach dem Tippen auf, Kachel fuer Kachel (--i aus dem
   Markup), der Spieler-Schritt als Ganzes. */
@keyframes cmp-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.cmp-tiles.is-in .cmp-tile {
  animation: cmp-pop .32s cubic-bezier(.34, 1.4, .5, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.cmp-pop-group { animation: cmp-pop .36s cubic-bezier(.34, 1.4, .5, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .cmp-bot, .cmp-bot__svg, .cmp-bot__ground, .cmp-bot__eyes, .cmp-bot__eye,
  .cmp-bot__paper, .cmp-bot__pen,
  .cmp-tiles.is-in .cmp-tile, .cmp-pop-group, .cmp-caret { animation: none !important; }
  .cmp-bot__paper { opacity: 1 !important; }
  .cmp-bot__pen { opacity: 0 !important; }
}

.cmp-bubble__body {
  flex: 1; min-width: 0; padding: .75rem .9rem;
  background: #f4f6f8; border-radius: 1rem; border-top-left-radius: .35rem;
}
.cmp-bubble__react { margin: 0 0 .25rem; font-size: .86rem; color: #64748b; line-height: 1.4; }
.cmp-bubble__q { margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a; line-height: 1.35; }
.cmp-bubble__sub { margin: .3rem 0 0; font-size: .82rem; color: #64748b; line-height: 1.4; }
/* Auf dem Handy mehr Platz fuer den Text: kleinerer Ball, engerer Abstand. */
@media (max-width: 639px) {
  .cmp-bubble { gap: .6rem; }
  .cmp-bot-wrap { width: 2.6rem; height: 2.8rem; }
}

.cmp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .cmp-tiles { grid-template-columns: repeat(3, 1fr); } }
.cmp-tiles--3 { grid-template-columns: repeat(3, 1fr); margin-top: .5rem; }
/* Die vier Schwerpunkte ab Tablet in einer Reihe (auf dem Handy zwei mal zwei). */
@media (min-width: 640px) { .cmp-tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.cmp-tile {
  position: relative; min-height: 52px; padding: .7rem .85rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid #e2e8f0; border-radius: .8rem; background: #fff;
  font: inherit; font-size: .95rem; font-weight: 600; color: #0f172a;
  text-align: left; cursor: pointer;
}
.cmp-tile:hover { border-color: #cbd5e1; background: #f8fafc; }
.cmp-tile.is-active { border-color: var(--tt-accent-2, #059669); background: #ecfdf5; color: #047857; }
.cmp-tile.is-suggested { grid-column: 1 / -1; border-color: var(--tt-accent-2, #059669); }
.cmp-tile__badge {
  flex: none; padding: .15rem .45rem; border-radius: 999px;
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #047857; background: #d1fae5;
}
.cmp-tile--more { grid-column: 1 / -1; justify-content: center; color: #475569; background: #f8fafc; }
.cmp-tile--sm { min-height: 44px; justify-content: center; text-align: center; }
.cmp-dialog-counts { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cmp-dialog-nav { margin: 1.25rem 0 0; }

/* Ladesequenz: Titel mit wanderndem Glanz (Text als Verlauf), darunter die
   Zeilen, die nacheinander erscheinen. Der Glanz laeuft ueber
   background-position, nicht ueber Filter, damit er auf dem Handy fluessig
   bleibt. */
/* Laden: Orb, Titel und Zeilen mittig im Sichtfeld, ohne Rahmen. */
.cmp-think {
  min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; padding: 1rem 0;
}
.cmp-think__title { margin: 0 0 .85rem; text-align: center; }
.cmp-think__lines { width: 100%; max-width: 24rem; }

/* Der Orb: leuchtende Kugel statt Spinner. Ein Kugelverlauf als Koerper,
   darueber zwei weichgezeichnete Lichtschichten, die gegeneinander drehen,
   dahinter ein atmender Schein. */
.cmp-orb-wrap { position: relative; width: 88px; height: 88px; margin: 0 auto 1.25rem; }
.cmp-orb-wrap::before {
  content: ""; position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .45), rgba(16, 185, 129, 0) 70%);
  filter: blur(6px); animation: cmp-orb-glow 2.6s ease-in-out infinite;
}
.cmp-orb {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #d1fae5 0%, #34d399 28%, #059669 60%, #064e3b 100%);
  box-shadow: 0 12px 28px -12px rgba(5, 150, 105, .7), inset 0 -8px 16px rgba(2, 44, 34, .35), inset 0 6px 10px rgba(255, 255, 255, .25);
  animation: cmp-orb-pulse 2.6s ease-in-out infinite;
}
.cmp-orb::before, .cmp-orb::after {
  content: ""; position: absolute; inset: -35%; border-radius: 50%;
  filter: blur(7px); mix-blend-mode: screen;
}
.cmp-orb::before {
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 22%,
    rgba(110, 231, 183, 0) 48%, rgba(255, 255, 255, .5) 72%, rgba(255, 255, 255, 0) 100%);
  animation: cmp-orb-spin 3.4s linear infinite;
}
.cmp-orb::after {
  background: radial-gradient(circle at 72% 68%, rgba(52, 211, 153, .95), transparent 42%),
    radial-gradient(circle at 26% 66%, rgba(255, 255, 255, .6), transparent 38%);
  animation: cmp-orb-spin 5.2s linear infinite reverse;
}
@keyframes cmp-orb-spin { to { transform: rotate(360deg); } }
@keyframes cmp-orb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cmp-orb-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .cmp-orb, .cmp-orb::before, .cmp-orb::after, .cmp-orb-wrap::before { animation: none !important; }
}
.cmp-shimmer {
  display: inline-block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(90deg, #0f172a 0%, #94a3b8 50%, #0f172a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cmp-shimmer 2.5s linear infinite;
}
@keyframes cmp-shimmer { from { background-position: 200% center; } to { background-position: -200% center; } }
.cmp-think__lines { list-style: none; margin: 0; padding: 0; counter-reset: think; }
.cmp-think__line {
  counter-increment: think; display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem 0; font-size: .9rem; color: #334155; line-height: 1.45;
  animation: cmp-line-in .35s ease-out both;
}
.cmp-think__line::before {
  content: counter(think); flex: none; width: 1.4rem; text-align: right;
  font-size: .75rem; color: #94a3b8; font-variant-numeric: tabular-nums;
}
@keyframes cmp-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cmp-shimmer { animation: none; color: #0f172a; background: none; -webkit-background-clip: initial; }
  .cmp-think__line { animation: none; }
}

/* Ergebnis */
.cmp-result-wrap { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem 0; }
@media (min-width: 640px) { .cmp-result-wrap { padding: 2rem 1.5rem 0; } }

/* Zeitersparnis als Zitat ueber dem Training. Eine nackte Zahl ist eine
   Behauptung, dieselbe Zahl aus dem Mund eines Trainers ist ein Beleg.

   Dunkle Karte mit grossem Radius, Bild rundlinks, Text rechts, darunter der
   Name mit vorangestelltem Strich. Das Dunkel hebt das Zitat aus der hellen
   Seite heraus, ohne dass es einen Rahmen oder eine Farbe dafuer braucht. */
.cmp-quote {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 0 0 1.75rem; padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 1.5rem;
  background: #2b3242;
}
@media (min-width: 640px) { .cmp-quote { gap: 1.5rem; padding: 1.5rem 1.75rem; } }
.cmp-quote > img {
  flex: none; width: 3.5rem; height: 3.5rem;
  border-radius: 9999px; object-fit: cover;
  /* Ohne das faerbt die globale Lazy-Regel den Rand grau ein. */
  background: transparent;
}
@media (min-width: 640px) { .cmp-quote > img { width: 4.5rem; height: 4.5rem; } }
.cmp-quote-body { min-width: 0; }
.cmp-quote blockquote {
  margin: 0; font-size: .9375rem; line-height: 1.6; color: #e2e8f0;
}
@media (min-width: 640px) { .cmp-quote blockquote { font-size: 1rem; } }
/* Der zweite Teil des Zitats erst ab Tablet: auf dem Handy bleibt neben dem
   Bild eine Zeile Platz, alles darueber macht aus dem Zitat einen Block. */
.cmp-quote-more { display: none; }
@media (min-width: 640px) { .cmp-quote-more { display: inline; } }
.cmp-quote-num {
  /* Auf dunklem Grund braucht die Zahl ein helles Gruen, das dunkle
     Akzentgruen der hellen Seiten waere hier kaum lesbar. */
  font-size: 1.6rem; font-weight: 800; color: var(--tt-accent-light, #34d399);
  line-height: 1;
  /* tabular-nums haelt die Breite stabil, sonst zappelt der Satz beim
     Hochzaehlen. */
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .cmp-quote-num { font-size: 1.9rem; } }
.cmp-quote figcaption { margin-top: .6rem; font-size: .8125rem; color: #94a3b8; }
.cmp-quote figcaption strong { color: #e2e8f0; font-weight: 600; }

/* Schwebende Aktionsleiste unter dem Ergebnis.
   pointer-events-auto, pb-16 und z-[60] fehlen im gepurgten Tailwind-Build,
   deshalb echtes CSS. env(safe-area-inset-bottom) haelt die Leiste ueber der
   Bedienleiste des iPhones. */
.cmp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e2e8f0;
}
.cmp-dock-inner {
  max-width: 40rem; margin: 0 auto;
  /* auto 1fr statt 1fr 1fr: "Uebung aendern" nimmt sich, was der Text
     braucht, der Rest gehoert dem PDF-Knopf. Sonst passt die volle
     Beschriftung auf dem Handy nicht in die halbe Zeile. */
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
}
.cmp-dock .cmp-btn { min-height: 50px; padding: .75rem 1rem; font-size: .95rem; }
/* "Training speichern & kostenlos anmelden" ist lang: darf umbrechen,
   auf dem Handy etwas kleiner, damit es zwei Zeilen bleiben. */
.cmp-dock .cmp-dock__save { line-height: 1.2; text-align: center; white-space: normal; }
/* Google-Logo vor dem Knopftext: auf einer weissen Scheibe, damit das
   farbige G auf dem gruenen Verlauf lesbar bleibt. */
.cmp-dock .cmp-dock__save svg {
  width: 1.5rem; height: 1.5rem; padding: .24rem; box-sizing: border-box;
  background: #fff; border-radius: 50%;
}
/* Handy: die zwei Knoepfe untereinander, der Hauptknopf zuoberst ueber die
   ganze Breite, damit "Training speichern & kostenlos anmelden" mit dem
   Google-Logo in eine Zeile passt (Andreas, 30.9.2026: nebeneinander sah es
   "scheisse" aus). Nebeneinander (auto 1fr) blieb dem Hauptknopf nur gut die
   halbe Breite, der Text brach zweizeilig um. Muss er auf sehr schmalen
   Handys doch umbrechen, teilt text-wrap: balance die Zeilen gleich lang. */
@media (max-width: 639px) {
  .cmp-dock-inner { grid-template-columns: 1fr; gap: .5rem; }
  .cmp-dock .cmp-btn--ghost { order: 2; min-height: 46px; font-size: .9rem; }
  /* Schrift mit der Bildbreite: 3.6vw haelt Logo und die 39 Zeichen auf
     einer Zeile von 320px (11.5px) bis 430px (15.2px, gedeckelt). Gemessen:
     der Text braucht rund das 20-Fache der Schriftgroesse in Pixeln. */
  .cmp-dock .cmp-dock__save { font-size: clamp(.72rem, 3.6vw, .95rem); padding: .7rem .5rem; text-wrap: balance; }
}




/* =========================================================================
   /start/training/: breitere Ansicht und Auswahlfelder im App-Stil
   =========================================================================
   Eine Spalte auf jeder Breite, nur weiter. Der Titel steht in einer Zeile,
   der Fortschrittsbalken laeuft ueber die volle Breite, darunter liegen die
   Felder ab 768px zu zweit nebeneinander: Stufe und Trainingsfokus, dann
   Dauer ueber die ganze Zeile, dann Feldspieler und Torhueter. Kein Rahmen,
   keine Karte: das Formular IST die Seite.

   Die Auswahlfelder folgen der App statt eigener Erfindungen:
   - Stufe wie das Dropdown im Trainer-Onboarding (partials/picker_select.html)
   - Trainingsfokus wie der Bottom-Sheet in trainings/training_create_algorithm.html
   - Dauer wie die Intensitaets-Leiste dort, nur durchgehend gruen

   Die Klassen sind portiert und nicht eingebunden: public_base.html laedt
   weder app.css noch app.js, und beide global nachzuziehen wuerde die
   oeffentlichen Seiten mit dem kompletten App-Stil ueberschreiben.
   ========================================================================= */

@media (min-width: 768px) {
  .cmp-lean-wrap { max-width: 52rem; padding: 2.5rem 2rem 4rem; }
  .cmp-lean-h1 { font-size: 2.25rem; }
  .cmp-lean-sub { font-size: .95rem; }

  /* Zwei Felder pro Zeile. Was ueber die ganze Breite gehoert, bekommt
     .cmp-span2: Dauer, das Stepper-Paar und der Knopf. */
  .cmp-lean-form {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.75rem; align-items: start; margin-top: 2.25rem;
  }
  .cmp-span2 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .cmp-lean-wrap { max-width: 58rem; padding: 3rem 2rem 5rem; }
  .cmp-lean-h1 { font-size: 2.5rem; }
}

/* Zwei Felder nebeneinander (Feldspieler und Torhueter). Die Stepper sind
   schmal genug, dass das auch auf dem Handy passt. */
.cmp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 768px) { .cmp-duo { gap: 1.75rem; } }

/* ---------- Dropdown wie im Trainer-Onboarding ---------- */
.cmp-pick { position: relative; }
.cmp-picker-btn[aria-expanded="true"] {
  border-color: var(--tt-accent, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}
.cmp-chev { transition: transform .2s ease; }
.cmp-chev.is-open { transform: rotate(180deg); }
.cmp-pick-panel {
  position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0; right: 0;
  padding: .3rem; background: #fff;
  border: 1px solid #e2e8f0; border-radius: .75rem;
  box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .45);
  max-height: 20rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cmp-pick-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; min-height: 44px; padding: .6rem .75rem;
  border: none; border-radius: .55rem; background: none;
  font-size: .95rem; color: #334155; text-align: left; cursor: pointer;
}
.cmp-pick-opt:hover { background: #f8fafc; }
.cmp-pick-opt.is-active { background: #ecfdf5; color: #047857; font-weight: 700; }
.cmp-pick-opt svg { flex: none; width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- Segmentleiste mit gleitender Pille (Dauer) ----------
   Portiert aus static/css/app.css. Die Pille selbst setzt das kleine Skript
   in landing_training.html, weil sie die Breite des aktiven Knopfs kennt. */
.tt-seg {
  position: relative; display: flex; padding: .25rem;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: .75rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.tt-seg::-webkit-scrollbar { display: none; }
.tt-seg__pill {
  position: absolute; top: .25rem; bottom: .25rem; left: 0; width: 0;
  border-radius: .55rem; background: var(--tt-accent-2, #059669);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12); pointer-events: none;
}
.tt-seg__pill--anim {
  transition: transform .38s cubic-bezier(.34, 1.4, .5, 1),
              width .38s cubic-bezier(.34, 1.4, .5, 1);
}
.tt-seg__btn {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem .75rem; border: none; background: none;
  border-radius: .55rem; font-size: .92rem; font-weight: 600; line-height: 1.25rem;
  white-space: nowrap; color: #64748b; cursor: pointer; transition: color .2s ease;
}
.tt-seg__btn:hover { color: #0f172a; }
.tt-seg__btn[data-seg-active] { font-weight: 700; }
/* Die weisse Schrift wandert mit der Pille, damit nie helle Schrift auf
   hellem Grund stehen bleibt. */
.tt-seg__btn[data-seg-lit],
.tt-seg__btn[data-seg-lit]:hover { color: #fff; transition: color .15s ease .22s; }
.tt-seg:not([data-seg-ready]) .tt-seg__btn[data-seg-lit] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tt-seg__pill--anim { transition: none; }
  .tt-seg__btn[data-seg-lit], .tt-seg__btn[data-seg-lit]:hover { transition: none; }
}

/* ---------- Fokus-Sheet mit aufklappbaren Gruppen ----------
   Aufbau wie der Fokus-Picker in trainings/training_create_algorithm.html:
   Hauptgruppe als Zeile zum Aufklappen, Untergruppe als graues Band, Fokus
   als volle Zeile mit Haken. Eigene Klassen statt der cmp-sheet-Varianten,
   weil /start/uebungen/ dieselben Sheet-Klassen flach weiterverwendet. */
.cmp-acc { border-bottom: 1px solid #eef2f7; }
.cmp-acc:last-child { border-bottom: none; }
.cmp-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 52px; padding: .9rem .25rem;
  border: none; background: none; text-align: left; cursor: pointer;
  font-size: .98rem; font-weight: 700; color: #0f172a;
}
.cmp-acc-head:hover { color: var(--tt-accent-2, #059669); }
.cmp-acc-head svg {
  flex: none; width: 1.15rem; height: 1.15rem;
  fill: none; stroke: #94a3b8; stroke-width: 2; transition: transform .2s ease;
}
.cmp-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.cmp-acc-body { padding-bottom: .6rem; }
.cmp-acc-sub {
  margin: .35rem 0; padding: .35rem .75rem; background: #f8fafc; border-radius: .4rem;
  font-size: .78rem; font-weight: 700; color: #64748b;
}
.cmp-acc-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; min-height: 46px; padding: .65rem .75rem;
  border: none; border-radius: .55rem; background: none;
  font-size: .95rem; color: #334155; text-align: left; cursor: pointer;
}
.cmp-acc-opt:hover { background: #f0fdf4; color: #047857; }
.cmp-acc-opt.is-active { background: var(--tt-accent-2, #059669); color: #fff; font-weight: 700; }
.cmp-acc-opt svg { flex: none; width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- Ergebnis ----------
   Die schwebende Leiste bleibt auf jeder Breite: sie ist der einzige Weg zum
   PDF, der immer sichtbar ist, egal wie weit unten die letzte Uebung steht.
   Oben in der Kopfzeile stehen dieselben zwei Knoepfe erst ab Tablet, dort
   ist Platz dafuer. */
@media (min-width: 1024px) { .cmp-result-wrap { max-width: 68rem; } }

/* Keine Leiste, nur zwei schwebende Knoepfe.
   ------------------------------------------
   position:sticky statt fixed: solange Training darunter liegt, kleben die
   Knoepfe am unteren Bildschirmrand und der Inhalt zieht darunter durch. Am
   Ende von .cmp-result-wrap - also kurz vor dem Footer - bleiben sie stehen,
   statt sich ueber den dunklen Footer zu legen. Scrollt man zurueck, loesen
   sie sich von selbst wieder. Das braucht kein Skript und keinen Scroll-
   Listener, nur einen Container, der vor dem Footer endet.

   Der weisse Balken faellt damit weg. Die Knoepfe tragen ihren eigenen
   Schatten, sonst stehen sie ohne Kante auf dem Text darunter. */
.cmp-dock {
  position: sticky;
  bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  background: none;
  /* Muss mit: die alte Leiste hatte blur(10px). Ohne Hintergrund bleibt davon
     ein unsichtbares Band ueber die ganze Breite, das den Text darunter
     verwischt. */
  backdrop-filter: none;
  border-top: none;
  box-shadow: none;
  /* Kein eigenes Innenmass: .cmp-result-wrap gibt die Breite vor, damit die
     Knoepfe genau so breit sind wie das Training darueber. */
  padding: 0;
  /* Der Abstand nach unten ist die Parkluecke zum Footer: sticky begrenzt am
     Rand-Kasten, die Knoepfe bleiben also margin-bottom ueber dem Ende von
     .cmp-result-wrap stehen. */
  margin: 1.5rem 0 2rem;
}
.cmp-dock-inner { max-width: none; }
/* Ab Tablet ist in beiden Haelften genug Platz fuer die volle Beschriftung,
   und zwei gleich breite Knoepfe stehen ruhiger als ein sehr langer. */
@media (min-width: 768px) {
  .cmp-dock-inner { grid-template-columns: 1fr 1fr; }
}
/* Nur die Knoepfe fangen Klicks ab. Der Rest der Zeile ist Luft und darf den
   Text darunter nicht blockieren. */
.cmp-dock, .cmp-dock-inner { pointer-events: none; }
.cmp-dock .cmp-btn {
  pointer-events: auto;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .45);
}
.cmp-dock .cmp-btn--ghost { background: #ffffff; }
.cmp-dock .cmp-btn--primary {
  box-shadow: 0 12px 28px -8px var(--tt-accent-shadow), 0 4px 10px -4px rgba(15, 23, 42, .3);
}


/* =========================================================================
   Registrierungs-Gate: auf dem Handy ganze Seite, ab Tablet Dialog
   =========================================================================
   Ein kleiner Kasten mitten auf dem Bildschirm ist auf dem Handy die
   schlechteste aller Formen: das Formular ist laenger als der Kasten, der
   Hintergrund scrollt mit, und die Tastatur schiebt alles weg. Deshalb
   uebernimmt das Gate dort die ganze Flaeche. */
.cmp-gate-back {
  align-items: stretch; padding: 0;
  /* Auf dem Handy ist die Flaeche selbst weiss statt abgedunkelt. Sonst
     schimmert der dunkle Grund ueberall dort durch, wo das Weiss nicht ganz
     bis an den Rand reicht: Adressleiste ein- und ausfahrend, Tastatur,
     Safe-Area. 100dvh deckt die eingefahrene Adressleiste mit ab. */
  background: #ffffff;
  backdrop-filter: none;
  min-height: 100dvh;
  overscroll-behavior: contain;
}
.cmp-gate {
  /* KEIN Flex-Container: die Kinder haben feste Hoehen (das Icon 2.5rem) und
     wuerden zusammengedrueckt, sobald der Inhalt hoeher wird als der
     Bildschirm. Genau das hat das Icon oben verzogen. */
  max-width: none; border-radius: 0; box-shadow: none;
  min-height: 100%;
  padding: 1.25rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .cmp-gate-back {
    align-items: center; padding: 2rem 1rem;
    background: rgba(2, 6, 23, .75);
    backdrop-filter: blur(3px);
    min-height: 0;
  }
  .cmp-gate {
    max-width: 28rem; min-height: 0; border-radius: 1.25rem; padding: 1.75rem;
    box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .6);
  }
}

/* Das Icon behaelt seine Groesse in jedem Kontext. */
.cmp-feature-ico { flex: none; }

/* Schliessen-Kreuz oben rechts. Auf dem Handy ist es der einzige Ausweg,
   der Klick neben den Kasten faellt dort weg. */
.cmp-gate-top { display: flex; justify-content: flex-end; margin: -.5rem -.25rem .25rem 0; }
@media (min-width: 768px) { .cmp-gate-top { display: none; } }

.cmp-gate-pw { position: relative; }
.cmp-gate-pw .cmp-input { padding-right: 3.25rem; }
.cmp-gate-pweye {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: none; background: none;
  color: #94a3b8; cursor: pointer; border-radius: .5rem;
}
.cmp-gate-pweye:hover { color: #0f172a; background: #f8fafc; }
.cmp-gate-pweye svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* Passwortregeln: stehen da, bevor der Server sie erzwingt. Wer sie erst
   nach dem Absenden erfaehrt, ist weg. */
.cmp-gate-rules {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
  margin: .55rem 0 0; padding: 0; list-style: none;
}
.cmp-gate-rules li {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: #94a3b8;
}
.cmp-gate-rules li.is-ok { color: #047857; }
.cmp-gate-rules svg { width: .85rem; height: .85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }


/* =========================================================================
   Uebungsbild gross (partials/_campaign_zoom.html)
   =========================================================================
   Ueber allem (Gate 70, Spotlight 65). Das Bild fuellt den Bildschirm bis
   auf einen Rand, der Titel steht darunter, ein Tipp irgendwohin schliesst.
   pinch-zoom bleibt dem System ueberlassen, damit der Trainer im Bild noch
   naeher ran kann. */
.cmp-zoom {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(2, 6, 23, .92);
  opacity: 0; transition: opacity .18s ease; cursor: zoom-out;
  /* Die Gesten (Pinch, Doppeltipp, Schieben) deutet das Partial selbst. */
  touch-action: none; overscroll-behavior: contain;
}
.cmp-zoom[hidden] { display: none; }
.cmp-zoom.is-open { opacity: 1; }
.cmp-zoom__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.cmp-zoom__img {
  max-width: 100%; max-height: calc(100vh - 7.5rem); max-height: calc(100dvh - 7.5rem);
  object-fit: contain; border-radius: .75rem; background: #fff;
  transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none;
  cursor: zoom-in;
}
.cmp-zoom.is-zoomed .cmp-zoom__img { cursor: grab; }
.cmp-zoom__cap { color: #fff; font-size: .92rem; font-weight: 600; text-align: center; line-height: 1.35; transition: opacity .15s; }
.cmp-zoom__hint { margin: 0; color: rgba(255, 255, 255, .55); font-size: .78rem; text-align: center; transition: opacity .15s; }
.cmp-zoom__hint--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cmp-zoom__hint--touch { display: none; }
  .cmp-zoom__hint--mouse { display: block; }
}
/* Vergroessert: Titel und Hinweis weg, das Bild darf darueberliegen. */
.cmp-zoom.is-zoomed .cmp-zoom__cap, .cmp-zoom.is-zoomed .cmp-zoom__hint { opacity: 0; }
.cmp-zoom__close {
  position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: .75rem;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cmp-zoom__close:hover { background: rgba(255, 255, 255, .24); }
.cmp-zoom__close svg { width: 1.4rem; height: 1.4rem; }
body.cmp-zoom-open { overflow: hidden; }