/* TS Schritt-Challenge — app skin.
   One stylesheet, no build step. Order: tokens, shell, today, crew, collection,
   sheet, celebration, keyframes, breakpoints. */

:root{
  --bg:#120e0a; --surface:#1a1410; --card:#1f1812; --line:#372c1f;
  --gold:#c7a56f; --gold-light:#e3c48f; --gold-deep:#a5834f;
  --text:#ede2cc; --muted:#a0937c; --ink:#1a1304;
  --error:#d97a5f; --ok:#d3bd98;
  /* Geschafft und nicht geschafft in der Super-Challenge. Ein entsättigtes
     Moosgrün statt Signalgrün: es soll neben Gold stehen können, ohne die
     Seite in eine Ampel zu verwandeln. Rot ist das vorhandene warme --error. */
  --hit:#6d9e72; --hit-deep:#4d7853;
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:Inter,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --nav-h:calc(68px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html{background:var(--bg);scrollbar-gutter:stable}
body{
  margin:0;color:var(--text);font:14px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
  background:radial-gradient(ellipse at 50% 0,rgba(122,112,70,.09),transparent 60%) fixed;
  -webkit-user-select:none;user-select:none;
}
input,textarea,.selectable{-webkit-user-select:text;user-select:text}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a,input{outline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold)}
button{transition:transform .18s var(--ease),background .2s,opacity .2s,border-color .2s}
button:active{transform:scale(.96)}
button:disabled{opacity:.5;cursor:default}
a{color:inherit}
h1,h2,p{margin:0}
h1{font:700 clamp(30px,8vw,38px)/.96 var(--display);letter-spacing:-.6px}
h2{font-size:15px;letter-spacing:-.3px;font-weight:600}
strong,b{font-weight:600;font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}
.hidden{display:none!important}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--muted);text-transform:uppercase;display:block}
.micro{font-size:10px;color:var(--muted);line-height:1.6}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ------------------------------------------------------------- app shell -- */

.app-shell{max-width:480px;min-height:100dvh;margin:auto;position:relative}
.app-header{
  position:sticky;top:0;z-index:30;
  height:calc(74px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 22px 0;
  display:flex;align-items:center;justify-content:space-between;
  transition:height .3s var(--ease),background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.app-header.scrolled{
  height:calc(56px + env(safe-area-inset-top));
  background:#15110ed9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:#372c1f88;
}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;transition:opacity .3s}
/* Das echte Logo, dieselbe Datei wie im Coach-Menue. Es traegt Marke und
   Wortmarke in einem Bild, also wird beim Scrollen die Breite gekappt statt
   ein Textelement ausgeblendet: uebrig bleibt genau die TS-Marke, die im
   Bild bei 79 von 281 Pixeln endet. */
.brand-logo{display:block;overflow:hidden;max-width:141px;transition:max-width .3s var(--ease)}
.brand-logo img{display:block;height:26px;width:auto;max-width:none}
.app-header.scrolled .brand-logo{max-width:40px}
.header-actions{display:flex;align-items:center;gap:12px}
.season-pill{font-size:9px;font-weight:600;letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:6px}
.season-pill i{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px #c7a56f55;animation:pulse-dot 2.6s infinite}
.avatar{
  display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid #aa875955;background:linear-gradient(135deg,#624f3b,#2f2821);
  border-radius:50%;color:var(--gold-light);font-size:19px;font-weight:600;line-height:1;
}
.avatar.initials{font-size:12px}

/* TS Athlet: eingeladen aus dem Coach-Portal.
   Der Ring sitzt unten rechts, nicht oben: auf dem Podium sitzt dort schon die
   Krone. Die Groesse haengt an --ts, damit derselbe Baustein am 40er Avatar in
   der Liste und am 104er im Profil stimmt, statt in Prozent zu raten. */
.avatar{position:relative;--ts:16px}
.athlete-ring{
  position:absolute;right:-1px;bottom:-1px;
  width:var(--ts);height:var(--ts);
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light,#e0c489),var(--gold,#c9a86a));
  color:#1b140e;font-family:var(--display);font-weight:800;
  font-size:calc(var(--ts) * .46);letter-spacing:-.02em;line-height:1;
  border:1.5px solid var(--bg);box-shadow:0 1px 3px #00000066;
  pointer-events:none;
}
.avatar-champion{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  display:grid;place-items:center;color:#f4cf67;filter:drop-shadow(0 1px 2px #000b);
  pointer-events:none;z-index:3;
}
.avatar-champion .icon{width:calc(var(--ts) * .72);height:calc(var(--ts) * .72);fill:#f4cf67;stroke:#8b5d1e;stroke-width:1.5}
/* Nur wo der Ring wirklich haengt: sonst bliebe die Rundung des Fotos
   ungeschuetzt, und das betrifft alle anderen ohne Grund. */
.avatar.photo.has-ts{overflow:visible}
.avatar.photo.has-ts img{border-radius:50%}
/* TS Coach: der Chef der Plattform. Kein Abzeichen, sondern ein Leuchten, damit
   sich die Auszeichnung sichtbar von der des Athleten unterscheidet.
   Bewusst als box-shadow: den beschneidet ein overflow:hidden am Foto-Avatar
   nicht, ein Pseudoelement waere weg. */
@keyframes coachGlow{
  0%,100%{box-shadow:0 0 0 1.5px var(--gold),0 0 9px 1px #c9a86a55}
  50%    {box-shadow:0 0 0 1.5px var(--gold-light),0 0 20px 5px #e0c48999}
}
.avatar.is-coach,#profileBtn.is-coach{
  border-color:var(--gold);
  animation:coachGlow 2.8s ease-in-out infinite;
}
/* Fuer alle, die Bewegung ausgestellt haben: derselbe Schein, nur ohne Puls.
   Die Auszeichnung darf nicht davon abhaengen, ob jemand Animationen mag. */
@media (prefers-reduced-motion: reduce){
  .avatar.is-coach,#profileBtn.is-coach{
    animation:none;box-shadow:0 0 0 1.5px var(--gold),0 0 14px 3px #c9a86a77;
  }
}
.podium-person .avatar{--ts:20px}
.profile-hero-avatar .avatar,.other-profile-avatar .avatar{--ts:30px}

/* Die Auszeichnung im Profilkopf. */
.athlete-tag{
  display:inline-flex;align-items:center;gap:5px;margin:2px 0 6px;
  padding:3px 9px 3px 7px;border-radius:999px;
  background:#c9a86a1f;border:1px solid #c9a86a55;color:var(--gold-light);
  font-size:8.5px;font-weight:700;letter-spacing:1.6px;
}
.athlete-tag [data-icon]{width:11px;height:11px}
.athlete-tag .icon{width:11px;height:11px}

/* Die Begruessung auf der Startseite, wenn jemand mit einem Einladungslink kommt. */
.invite-welcome{
  margin:0 0 14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,#c9a86a1a,#c9a86a08);
  border:1px solid #c9a86a4d;
}
.invite-welcome b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.01em;margin-bottom:4px}
.invite-welcome p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.invite-welcome .invite-eyebrow{
  display:block;color:var(--gold-light);font-size:8px;font-weight:700;
  letter-spacing:2px;margin-bottom:6px;
}
.invite-welcome.stale{background:#2a211a;border-color:#3f3225}
.invite-welcome.stale .invite-eyebrow{color:var(--muted)}
#profileBtn{position:relative}
#profileBtn:after{content:'';position:absolute;inset:-2px;border-radius:50%}
.view{padding:8px 20px calc(24px + var(--nav-h))}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 16px}

/* pull to refresh */
.ptr{position:absolute;top:calc(66px + env(safe-area-inset-top));left:0;right:0;display:grid;place-items:center;height:0;opacity:0;pointer-events:none;z-index:5}
.ptr-ring{width:26px;height:26px;border-radius:50%;border:2px solid #453729;border-top-color:var(--gold);transform:rotate(0)}
.ptr.armed .ptr-ring{border-top-color:var(--gold-light);box-shadow:0 0 14px #c7a56f40}
.ptr.spinning .ptr-ring{animation:spin .8s linear infinite}

/* connection banner */
.connection{margin:0 20px 10px;padding:9px 12px;background:#523d29;border-radius:12px;font-size:11px;color:#f3d49d;display:flex;align-items:center;gap:8px}
.connection .icon{width:15px;height:15px}

/* ---------------------------------------------------------------- skeleton -- */

.loading{padding:14px 20px 40px}
.skeleton-rail,.skeleton-card,.skeleton-dial,.skeleton-line,.skeleton-btn,.skeleton-row i{
  background:linear-gradient(100deg,#201b18 30%,#2c251e 50%,#201b18 70%);background-size:220% 100%;
  animation:shimmer 1.5s infinite linear;border-radius:12px;
}
.skeleton-rail{height:8px;margin-bottom:22px}
.skeleton-card{background:none;animation:none;border:1px solid #312a24;border-radius:26px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px}
.skeleton-dial{width:210px;height:210px;border-radius:50%}
.skeleton-line{height:12px;width:60%}
.skeleton-btn{height:52px;width:100%;border-radius:14px}
.skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.skeleton-row i{height:64px;display:block}

/* -------------------------------------------------------------------- gate -- */

#gate{padding:0 22px calc(24px + env(safe-area-inset-bottom))}
.gate-hero{padding-top:10px;position:relative;overflow:hidden}
.gate-hero h1{font-size:clamp(40px,12vw,56px);line-height:.99;margin:12px 0;position:relative;z-index:1}
.gate-hero h1 span{color:var(--gold)}
.gate-orbit{position:relative;width:186px;height:186px;margin:10px auto 4px}
.gate-orbit .gauge{position:absolute;inset:0;width:100%;height:100%;transform:rotate(135deg)}
.go-rail,.go-arc{fill:none;stroke-width:7;stroke-dasharray:367.6 490.1}
.go-rail{stroke:#372d24}
.go-arc{stroke:var(--gold);stroke-linecap:round;stroke-dashoffset:290;filter:drop-shadow(0 0 8px #c7a56f40);animation:gate-breathe 5s var(--ease) infinite}
.orbit-icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);padding-bottom:18px}
.orbit-icon .icon{width:40px;height:40px}
.orbit-label{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:7px;letter-spacing:3px;color:var(--muted)}
.gate-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 18px}
.gate-stats>div{border:1px solid #3e3125;background:#231d18;border-radius:15px;padding:12px 6px;text-align:center}
.gate-stats b{display:block;font:600 26px/1 var(--display);color:var(--gold-light)}
.gate-stats small{display:block;font-size:9px;color:var(--muted);margin-top:5px;letter-spacing:.6px}
.auth-panel label{display:block;font-size:10px;color:var(--muted);margin:15px 0 8px}
.auth-panel input{background:#251d16;border:1px solid #4a3b2c;border-radius:12px;min-height:50px;padding:12px 14px;width:100%;font-size:16px}
.auth-panel input::placeholder{color:#948470}
.auth-panel .btn{margin-top:20px}
.auth-panel .micro{font-size:10px;margin-top:12px;line-height:1.6}
.pin-boxes{display:flex;gap:10px}
.pin-boxes input{
  flex:1;min-width:0;text-align:center;font:600 26px/1 var(--display);
  height:60px;padding:0;background:#1d1611;border:1px solid #4a3b2c;border-radius:14px;
  caret-color:var(--gold);transition:border-color .2s,box-shadow .2s,transform .2s var(--pop);
}
.pin-boxes input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #c7a56f22}
.pin-boxes input.filled{border-color:#82613c88;background:#2c2117;transform:scale(1.02)}
.gate-footer{font-size:7px;color:#9a8c79;letter-spacing:1.8px;text-align:center;margin:24px 0 0}

/* ------------------------------------------------------------------- today -- */

.season-rail{display:flex;gap:2px;height:7px;margin:6px 0 8px}
.season-rail i{flex:1;background:#2c251e;border-radius:2px;transition:background .5s var(--ease),box-shadow .5s}
.season-rail i.done{background:#68543e}
.season-rail i.goal{background:var(--gold)}
.season-rail i.today{outline:1px solid var(--gold);outline-offset:1px;box-shadow:0 0 8px #c7a56f55}
.season-rail i.miss{background:#33261f}
.rail-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.rail-time{color:var(--gold);display:flex;align-items:center;gap:5px}
.rail-time .icon{width:11px;height:11px}

.hero-card{
  position:relative;
  background:radial-gradient(ellipse at 50% 32%,#403429aa,transparent 64%),linear-gradient(140deg,#28221d,#1c1815);
  border:1px solid #4d403388;border-radius:26px;
  box-shadow:0 14px 34px #00000040,inset 0 1px #ffffff08;
  padding:16px 18px 18px;overflow:hidden;
}
.hero-card.celebrating{animation:card-pop .6s var(--pop)}
.hero-top{display:flex;justify-content:space-between;align-items:center}
.date-button{font-size:11px;display:flex;align-items:center;gap:5px;padding:5px;color:var(--muted)}
.date-button .icon{width:12px;height:12px}

.progress-dial{position:relative;display:block;width:min(240px,64vw);aspect-ratio:1;margin:8px auto 0;border-radius:50%;padding:0}
.dial-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#86735b42 0deg 1deg,transparent 1deg 6deg);
  mask:radial-gradient(transparent 66%,#000 66% 70%,transparent 70%);-webkit-mask:radial-gradient(transparent 66%,#000 66% 70%,transparent 70%)}
.dial-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(135deg);overflow:visible}
.dial-rail,.dial-arc{fill:none;stroke-width:9;stroke-linecap:round}
.dial-rail{stroke:#342c24;stroke-dasharray:405.3 540.4}
.dial-arc{stroke:url(#dialGrad);stroke-dasharray:405.3 540.4;stroke-dashoffset:405.3;filter:drop-shadow(0 0 5px #c7a56f40);transition:opacity .3s}
.progress-dial:not(.active) .dial-arc{opacity:0}
.dial-head{fill:var(--gold-light);stroke:none;filter:drop-shadow(0 0 7px #e3c48faa);opacity:0;transition:opacity .3s}
.progress-dial.active .dial-head{opacity:1}
.progress-dial.complete .dial-arc{stroke:var(--gold-light);filter:drop-shadow(0 0 12px #e3c48f66)}
.progress-dial.complete .dial-ticks{background:repeating-conic-gradient(from 0deg,#c7a56f40 0deg 1deg,transparent 1deg 6deg)}
.dial-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.dial-status{color:var(--gold);margin:0 0 4px;height:22px}
.dial-status .icon{width:21px;height:21px}
.progress-dial.complete .dial-status{color:var(--gold-light);animation:badge-pop .5s var(--pop)}
.dial-center strong{font:600 clamp(52px,15vw,66px)/1 var(--display);letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.dial-center>span:last-child{color:var(--muted);font-size:11px;margin-top:6px}
.dial-percent{position:absolute;bottom:6%;left:0;right:0;color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.5px}
.hero-caption{text-align:center;font-size:11px;color:var(--muted);margin:6px 0 14px;min-height:17px}
.hero-caption.complete{color:var(--gold-light)}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:11px 4px 12px;background:#ffffff06;border:1px solid #3f3429;border-radius:15px;overflow:hidden;
}
.stat .icon{width:15px;height:15px;color:var(--gold)}
.stat b{font:600 22px/1.1 var(--display);letter-spacing:-.3px}
.stat small{font-size:8px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.stat-meter{position:absolute;left:0;right:0;bottom:0;height:2px;background:#42362a}
.stat-meter i{display:block;height:100%;background:var(--gold);width:0;transition:width .8s var(--ease)}
.stat.bump{animation:stat-bump .5s var(--pop)}

.crew-strip{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px 14px;background:#211c17;border:1px solid #342c24;border-radius:16px;text-align:left}
.crew-dots{display:flex;gap:3px;flex-wrap:wrap;max-width:96px}
.crew-dots i{width:7px;height:7px;border-radius:50%;background:#44382d}
.crew-dots i.on{background:var(--gold);box-shadow:0 0 6px #c7a56f55}
.crew-copy{flex:1;min-width:0}
.crew-copy b{display:block;font-size:12px}
.crew-copy small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.crew-strip>.icon{width:14px;color:var(--muted)}

.section-heading{display:flex;justify-content:space-between;align-items:center;margin:22px 0 11px;gap:10px}
.section-heading>.icon{color:var(--gold)}
.tag{border:1px solid var(--line);background:var(--surface);border-radius:20px;font-size:10px;color:var(--muted);padding:3px 8px}

.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.week-day{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;font-size:9px;color:var(--muted);opacity:1!important}
.week-day .day-circle{width:34px;height:34px;border-radius:50%;display:flex;justify-content:center;align-items:center;background:#29231d;border:1px solid #3f3429;color:#887966;font-size:11px;transition:background .3s,color .3s,transform .3s var(--pop)}
.week-day .day-circle .icon{width:15px;height:15px}
.week-day.done .day-circle{background:#3d3126;color:var(--gold);border-color:#70583d44}
.week-day.reached .day-circle{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 3px 12px #c7a56f22}
.week-day.today .day-circle{outline:1px solid var(--gold);outline-offset:3px}
.week-day.future{opacity:.35!important}
.week-day.pending .day-circle{border-style:dashed;color:var(--gold)}

.mission-list{display:flex;flex-direction:column;gap:8px}
.mission{display:flex;align-items:center;gap:12px;background:#201b18;border:1px solid #332b24;border-radius:16px;padding:12px;text-align:left;width:100%}
.mission-ring{position:relative;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--p,0)*360deg),#3a3027 0);}
.mission-ring:before{content:'';position:absolute;inset:3px;border-radius:50%;background:#201b18}
.mission-ring .icon{position:relative;width:16px;height:16px;color:var(--gold)}
.mission-copy{flex:1;min-width:0}
.mission-copy b{display:block;font-size:12px}
.mission-copy small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.mission-reward{font-size:10px;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:6px}
.mission-reward .icon{width:16px}
.mission.done{background:#231c16;border-color:#4e3d2c}
.mission.done .mission-reward{color:var(--ok)}
.mission.done .mission-ring:before{background:#231c16}

.next-badge{display:flex;align-items:center;gap:13px;width:100%;padding:16px 14px;background:linear-gradient(110deg,#2b231c,#201b18);border:1px solid #4e3d2d55;border-radius:18px;margin-top:18px;text-align:left}
.next-badge .mini-medal{width:43px;height:48px}
.next-badge-copy{flex:1;min-width:0}
.next-badge-copy .eyebrow{font-size:8px;margin-bottom:3px;letter-spacing:1.5px}
.next-badge-copy b{font-size:12px}
.next-badge-copy small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.next-badge>.icon{width:14px;color:var(--muted)}

/* -------------------------------------------------------------------- nav -- */

.bottom-nav{
  position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:calc(100% - 36px);max-width:436px;height:68px;padding:6px;display:flex;
  background:#27221dee;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid #54443488;border-radius:22px;box-shadow:0 12px 35px #0009;z-index:20;
}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#a0937c;font-size:9px;position:relative;border-radius:16px;transition:color .25s}
.bottom-nav button[aria-current=page]{color:var(--gold-light)}
.bottom-nav button[aria-current=page]:before{content:'';position:absolute;inset:0;background:#45392d6b;border-radius:16px;animation:nav-in .3s var(--ease)}
.bottom-nav button>*{position:relative}
.bottom-nav .icon{width:21px;height:21px;stroke-width:1.7;transition:transform .3s var(--pop)}
.bottom-nav button[aria-current=page] .icon{transform:translateY(-1px) scale(1.08)}
/* ----------------------------------------------------------- Termine -- */
/* Was vorbereitet ist und noch nicht läuft. Der nächste Termin steht oben und
   trägt als einziger den Goldrand, damit die Reihenfolge ohne Lesen stimmt. */
.upcoming-intro{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 18px}
.upcoming-list{display:grid;gap:14px}
.upcoming-card{--ticket-hole:var(--card);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.upcoming-card:first-child{border-color:#6b573c}
.upcoming-card h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px;margin:2px 0 6px;font-size:22px}
.upcoming-card .eyebrow{display:block}
.upcoming-card .micro{margin:10px 0 14px;display:block}
.upcoming-card .btn{width:100%}
.upcoming-card .text-button{display:block;margin:10px auto 0}
.ts-button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:14px 0 0;padding:10px 14px;
  border:1px solid #80663f;border-radius:12px;background:linear-gradient(110deg,#c7a56f1c,#e3c48f0b);color:var(--gold-light);font-size:11px;font-weight:700;letter-spacing:.35px;overflow:hidden}
.ts-button:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 26%,#fff5 50%,transparent 74%);transform:translateX(-120%)}
.ts-button:hover{background:#c7a56f2b;border-color:var(--gold-light);transform:translateY(-1px)}
.ts-button:hover:before{animation:sweep 1.05s var(--ease)}
.ts-button>.icon:first-child{width:16px;height:16px;color:var(--gold-light)}
.ts-button>.icon:last-child{width:14px;height:14px;margin-left:auto;color:var(--gold)}
.avatar-upload .ts-button{margin:0;flex:1;min-width:150px}
.upcoming-card.joined{--ticket-hole:#1c211c;border-color:#3f6b4a;background:linear-gradient(#1c231d,var(--card))}
.upcoming-note{margin:0 0 4px;font-size:13px;line-height:1.6;color:#d9cdb8}
/* Banner des Termins: randlos über der Karte, gleiche Maße und gleiche
   Behandlung wie das Event-Banner (.prize-banner-image), damit die Terminseite
   und die Startseite nicht in zwei Gestaltungen zerfallen. Das Bild wird über
   die Polsterung hinausgezogen, die Karte kappt die Ecken. */
.upcoming-card.has-banner{padding-top:0;overflow:hidden}
.upcoming-banner{display:block;width:calc(100% + 40px);margin:0 -20px 16px;height:auto;aspect-ratio:2/1;object-fit:cover;background:#120e0a}
.summit-upcoming .upcoming-banner{object-position:center 48%}
.summit-upcoming.joined{--ticket-hole:#211a14;border-color:#8f7047;background:linear-gradient(#30251c,var(--card))}
.summit-journey{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0 16px}
/* Mehr als drei Gipfel (seit v0.100.0): eine Spalte je Gipfel, nur die Nummer. */
.summit-journey.many{grid-template-columns:repeat(var(--stages),minmax(0,1fr));gap:4px}
.summit-journey.many span{justify-content:center;padding-left:0;padding-right:0}
.summit-journey span{display:flex;align-items:center;justify-content:center;gap:3px;min-height:31px;border:1px solid #54422d;border-radius:9px;color:var(--muted);font-size:9px}
.summit-journey span.reached{border-color:#a9844a;color:var(--gold-light);background:#c7a56f12}
.summit-journey .icon{width:13px;height:13px}
/* Wer darf mitmachen. Steht nur da, wenn der Termin nicht für alle offen ist:
   sonst wäre die häufigste Regel die lauteste Zeile auf der Karte. */
.upcoming-access{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:var(--gold-light)}
.upcoming-access .icon{width:15px;height:15px}
.upcoming-locked{margin:12px 0 0;padding:12px 14px;border:1px dashed #54443a;border-radius:14px;
  font-size:12px;line-height:1.55;color:var(--muted)}

/* Die Zusage als kompaktes Eintrittsticket. 84 Pixel hoch bleibt sie auf dem
   kleinsten unterstützten Telefon gut lesbar und hat trotzdem eine klare
   Abrisskante statt wie ein weiterer Standardknopf auszusehen. */
.admission-ticket{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 78px;
  width:100%;min-height:84px;margin-top:4px;padding:0;overflow:hidden;text-align:left;color:#2b1c0e;
  border:1px solid #f2d8aa;border-radius:16px;background:
  radial-gradient(circle at 24% 0,#fff1cfaa,transparent 43%),
  linear-gradient(125deg,#e8c58c 0%,#c7a56f 60%,#ad8752 100%);
  box-shadow:inset 0 1px #fff7ddaa,0 10px 25px #0005;transform-origin:center}
.admission-ticket:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.24;mix-blend-mode:multiply;
  background-image:repeating-radial-gradient(circle at 30% 20%,#5a3520 0 1px,transparent 1px 4px);
  background-size:9px 9px;animation:ticket-grain 8s steps(8) infinite}
.admission-ticket:after{content:'';position:absolute;inset:-20%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,#fff9 49%,transparent 60%);transform:translateX(-100%)}
.admission-ticket:not(:disabled):hover:after{animation:ticket-sweep 1.05s var(--ease)}
.admission-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:13px 14px 12px 17px}
.admission-copy small{font:700 8px/1 var(--body);letter-spacing:1.8px}
.admission-copy strong{overflow:hidden;margin:5px 0 3px;font:700 24px/.95 var(--display);letter-spacing:.2px;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.admission-copy>span{font-size:9px;font-weight:600;letter-spacing:.7px}
.admission-stub{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border-left:1px dashed #6f512dbb;text-align:center}
.admission-stub:before,.admission-stub:after{content:'';position:absolute;left:-8px;width:15px;height:15px;border-radius:50%;background:var(--ticket-hole)}
.admission-stub:before{top:-8px}.admission-stub:after{bottom:-8px}
.admission-stub i{display:grid;place-items:center;width:28px;height:28px;border:1px solid #6f512d99;border-radius:50%}
.admission-stub .icon{width:14px;height:14px;stroke-width:2.2}
.admission-stub small{max-width:56px;font-size:7px;font-style:normal;font-weight:800;letter-spacing:1px;line-height:1.2}
.admission-ticket.is-issued{color:var(--gold-light);border-color:#79623d;background:
  radial-gradient(circle at 25% 0,#5a49328c,transparent 45%),linear-gradient(125deg,#34291f,#211a14 72%)}
.admission-ticket.is-issued:before{opacity:.16;filter:invert(1)}
.admission-ticket.is-issued .admission-stub{border-left-color:#8f754b99}
.admission-ticket.is-issued .admission-stub i{background:#c7a56f1a;border-color:#c7a56f88}
.admission-ticket.is-loading{cursor:wait}
.admission-ticket.is-loading .admission-stub i{animation:ticket-loading .8s ease-in-out infinite alternate}

/* Nur nach einer wirklich gespeicherten Zusage. Die Position wird aus dem
   angetippten Ticket gemessen, damit die große Karte sichtbar daraus entsteht. */
.ticket-reveal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;pointer-events:none;opacity:0}
.ticket-reveal:before{content:'';position:absolute;inset:0;background:#090705b8;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ticket-reveal.show{animation:ticket-backdrop 2.35s var(--ease) both}
.issued-ticket{--ticket-x:0px;--ticket-y:80px;--ticket-scale:.72;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 82px;width:min(420px,calc(100vw - 36px));aspect-ratio:741/425;
  filter:drop-shadow(0 24px 32px #000a);transform-origin:center;opacity:0}
.ticket-reveal.show .issued-ticket{animation:ticket-issue 2.3s var(--ease) both}
.issued-ticket-main,.issued-ticket-stub{position:relative;color:#38210f;background:
  radial-gradient(circle at 62% 27%,#f8dfb3 0,#dfb676 42%,#ae7843 100%)}
.issued-ticket-main{display:flex;justify-content:flex-end;flex-direction:column;padding:22px 22px 20px;border-radius:18px 0 0 18px;overflow:hidden}
.issued-ticket-main:after{content:'';position:absolute;inset:0;opacity:.2;mix-blend-mode:multiply;
  background-image:repeating-radial-gradient(circle,#4b2c14 0 1px,transparent 1px 4px);background-size:8px 8px}
.issued-kicker,.issued-event,.issued-date,.issued-ticket-main strong{position:relative;z-index:1}
.issued-kicker{position:absolute;top:20px;left:22px;font-size:8px;font-weight:800;letter-spacing:1.5px}
.issued-ticket-main strong{max-width:100%;font:700 clamp(30px,10vw,48px)/.9 var(--display);letter-spacing:-.5px;text-transform:uppercase;overflow-wrap:anywhere}
.issued-event{margin-top:11px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.issued-date{margin-top:4px;font-size:9px;font-weight:600;letter-spacing:.5px}
.issued-ticket-main>i{position:absolute;right:2px;top:35px;font:700 118px/.8 var(--display);font-style:normal;color:#ffe7bd;opacity:.22}
.issued-ticket-stub{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  border-left:1px dashed #70471f;border-radius:0 18px 18px 0;transform-origin:left center}
.issued-ticket-stub:before,.issued-ticket-stub:after{content:'';position:absolute;left:-9px;width:18px;height:18px;border-radius:50%;background:#0d0a08}
.issued-ticket-stub:before{top:-9px}.issued-ticket-stub:after{bottom:-9px}
.issued-ticket-stub>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #70471f;border-radius:50%}
.issued-ticket-stub .icon{width:18px;height:18px;stroke-width:2.3}
.issued-ticket-stub b{font:700 16px/1 var(--display);letter-spacing:1.2px;writing-mode:vertical-rl}
.issued-ticket-stub small{font-size:7px;font-weight:800;letter-spacing:.8px}
.ticket-reveal.show .issued-ticket-stub{animation:ticket-tear 1.45s .42s var(--pop) both}
.ticket-reveal>p{position:absolute;top:calc(50% + min(34vw,112px));z-index:2;color:var(--gold-light);font-size:12px;font-weight:600;letter-spacing:.3px;
  opacity:0;animation:ticket-caption 1.4s .55s var(--ease) both}

/* Der Gruppenknopf führt aus der App heraus, deshalb trägt er die Farbe von
   WhatsApp statt das Gold der Ansichten: schon vor dem Tippen sichtbar, dass
   es kein weiterer Reiter ist. */
.bottom-nav button[data-action=group]{color:#6fcf97}
.bottom-nav button[data-action=group] .icon{fill:currentColor;stroke:none}
.bottom-nav button[data-action=group]:active .icon{transform:scale(.9)}
.notification-dot{position:absolute;top:7px;left:calc(50% + 11px);width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse-dot 2s infinite}

/* --------------------------------------------------------------- controls -- */

.btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;width:100%;padding:13px 18px;
  background:linear-gradient(110deg,#e9cd9c,#cea76d);color:var(--ink);border-radius:14px;font-size:13px;font-weight:700;
  box-shadow:inset 0 1px #fff4,0 6px 18px #00000030;position:relative;overflow:hidden}
.btn:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff8 50%,transparent 70%);transform:translateX(-120%)}
.btn:not(:disabled):hover:after{animation:sweep 1.1s var(--ease)}
.btn .icon{width:18px;height:18px;stroke-width:2}
.btn.secondary{box-shadow:none;background:#ffffff06;border:1px solid var(--line);color:var(--text)}
.btn.danger{background:#4b2921;color:#ffd8ca}
/* WhatsApp is a platform action, so it wears its own colour rather than the
   brand gold. The glyph is a solid brand mark, not a line icon. */
.btn.whatsapp{background:#25d366;color:#08290f;box-shadow:inset 0 1px #ffffff55,0 6px 18px #25d3662e}
.btn.whatsapp:hover{filter:brightness(1.05)}
.icon.brand,.btn.whatsapp .icon{fill:currentColor;stroke:none}
/* On the celebration, continuing is the primary action and sharing is the
   offer, so it keeps the green glyph and loses the green slab. */
.cel .btn.whatsapp{margin-top:10px;background:none;color:#7fe0a0;border:1px solid #2f6b46;box-shadow:none}
.cel .btn.whatsapp:hover{background:#25d3661a;filter:none}
.btn.whatsapp.ghost{background:none;color:#7fe0a0;border:1px solid #2f6b46;box-shadow:none;margin-top:14px}
.btn.whatsapp.ghost:hover{background:#25d3661a;filter:none}
#shareHint{text-align:center;margin-top:10px}
.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#231d18;flex-shrink:0}
.icon-button .icon{width:17px;height:17px}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;font-size:11px;color:var(--gold);padding:5px 0}
.text-button.ts-button{display:flex;min-height:44px;padding:10px 14px;color:var(--gold-light)}
.upcoming-card .text-button.info-cta{display:flex;margin:14px 0 0;width:100%;padding:10px 14px}
.text-button .icon{width:13px;height:13px}
.segmented{display:flex;gap:4px;background:#1d1915;border:1px solid #382f27;padding:4px;border-radius:13px}
.segmented button{flex:1;padding:10px 6px;min-height:40px;color:var(--muted);font-size:11px;font-weight:500;border-radius:9px}
.segmented button[aria-pressed=true]{color:var(--text);background:#3c3228;box-shadow:0 2px 5px #0002}
.tracking-notice{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:15px;border:1px solid #6b5639;border-radius:14px;background:linear-gradient(135deg,#3b3022,#241c15);color:var(--gold-light)}
.tracking-notice .icon{margin-top:1px}
.tracking-notice b,.tracking-notice small{display:block}
.tracking-notice small{margin-top:3px;color:var(--text);font-size:11px;line-height:1.5}
.filter-row{display:flex;gap:7px;margin-bottom:14px}
.filter-row button{padding:8px 12px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:10px;min-height:35px}
.filter-row button[aria-pressed=true]{background:#e3ca9e;color:var(--ink);border-color:#e3ca9e}
.meter{height:4px;background:#4b3d2f;border-radius:4px;overflow:hidden;margin-top:9px;display:block}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#ae8550,var(--gold-light));width:0;transition:width .8s var(--ease);border-radius:4px}
.notice,.msg{padding:12px 14px;border-radius:12px;background:#3e302388;color:var(--text);font-size:12px;border:1px solid #604a3466;margin:12px 0}
.notice{font-size:11px}
.msg.error{background:#422b2280;border-color:#95614966;color:#f1b9a3}
.msg.ok{border-color:#9f825c55;color:var(--ok)}
.message-action{display:block;margin-top:9px;color:var(--gold);font-weight:600;text-decoration:underline;min-height:30px}
.empty{font-size:12px;color:var(--muted);padding:28px 12px;text-align:center;grid-column:1/-1}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--nav-h));width:max-content;max-width:calc(100% - 36px);
  background:#e7d0a6;color:#2e261e;padding:13px 18px;border-radius:14px;box-shadow:0 8px 30px #0006;z-index:100;font-size:12px;
  animation:toast-in .3s var(--ease);pointer-events:none;text-align:center}

/* --------------------------------------------------------------- the crew -- */

.board-caption{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:5px}
.spectator-podium-title{margin:22px 0 0}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:196px;padding-top:26px;margin:0 0 18px}
.podium-person{display:flex;align-items:center;flex-direction:column;flex:1;min-width:0;position:relative;animation:rise .5s var(--ease) backwards}
.podium-person[data-profile-id],.leaderboard li[data-profile-id],.result-list li[data-profile-id],.recognition-people li[data-profile-id]{cursor:pointer}
[data-profile-id]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.podium-person:nth-child(2){animation-delay:.08s}
.podium-person:nth-child(3){animation-delay:.16s}
.podium-person .avatar{width:56px;height:56px;font-size:26px;margin-bottom:7px}
.podium-person.first .avatar{width:76px;height:76px;font-size:34px;outline:1px solid var(--gold);outline-offset:5px;margin-bottom:10px;box-shadow:0 0 24px #c7a56f30}
/* Das Rennen statt des Podiums, nur bei „Schlag den Coach". Eine Zeile je
   Person, die Spur so lang wie ihre Schritte, der Avatar am Kopf der Spur, und
   dort, wo der Coach steht, eine gestrichelte Linie: darüber ist gewonnen. */
/* Rechts Platz für den Läufer: die längste Spur geht auf 100 %, der Avatar
   sitzt über ihrem Ende und würde sonst am Rand abgeschnitten. */
.podium.race{display:grid;align-items:stretch;justify-content:stretch;gap:8px;min-height:0;padding:2px 20px 0 0;margin:0 0 18px}
.race-row{position:relative;display:flex;align-items:center;min-height:30px;animation:rise .5s var(--ease) backwards}
.race-row:nth-child(2){animation-delay:.05s}
.race-row:nth-child(3){animation-delay:.1s}
.race-row:nth-child(4){animation-delay:.15s}
.race-row:nth-child(5){animation-delay:.2s}
.race-trail{position:relative;width:var(--share);min-width:22px;height:14px;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#c7a56f14,var(--gold-deep) 58%,var(--gold))}
.race-runner{position:absolute;right:-16px;top:50%;transform:translateY(-50%);z-index:2}
.race-runner .avatar{width:33px;height:33px;font-size:16px;--ts:13px}
.race-label{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;font-size:12px;line-height:1}
.race-label b{font-weight:600;color:var(--text)}
.race-label>span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
/* Auf der Spur steht die Beschriftung auf Gold, daneben auf Schwarz. Zwei
   Untergründe, zwei Textfarben, sonst verschwindet die Zahl im Balken. */
.race-row:not(.short) .race-label b,
.race-row:not(.short) .race-label>span:last-child{color:var(--ink)}
.race-row:not(.short) .race-label>span:last-child{font-weight:600;opacity:.72}
.race-label .you-label{margin-left:5px}
/* Lange Spur: die Beschriftung sitzt auf der Spur, kurz vor dem Läufer.
   Kurze Spur: sie steht rechts daneben, sonst liefe sie aus dem Bild. */
.race-row:not(.short) .race-label{position:absolute;right:38px;top:50%;transform:translateY(-50%)}
.race-row.short .race-label{margin-left:26px}
/* Nur neben der Spur, nicht auf ihr: auf Gold würde Hellgold verschwinden.
   Auf der Spur trägt das „DU"-Zeichen die Hervorhebung allein. */
.race-row.is-me.short .race-label b{color:var(--gold-light)}
/* Der Coach ist nicht der Sieger, sondern die Messlatte: gedämpfte Spur. */
.race-row.is-coach .race-trail{background:linear-gradient(90deg,#a0937c14,#95856a 58%,#bdae93)}
.race-cut{display:flex;align-items:center;gap:9px;margin:2px 0;font-size:9px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-light);white-space:nowrap}
.race-cut::before{content:'';flex:1;border-top:1px dashed #6b573c}
.race-gap{color:var(--muted);letter-spacing:3px;font-size:11px;line-height:1;padding-left:2px}
@media(max-width:400px){
  .race-label{font-size:11px}
  .race-runner .avatar{width:29px;height:29px}
  .race-row:not(.short) .race-label{right:34px}
}

.podium-crown{position:absolute;top:-28px;color:var(--gold);animation:float 3s ease-in-out infinite}
.podium-crown .icon{width:19px}
.podium-name{font-size:10px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.podium-steps{font-size:9px;color:var(--muted)}
.podium-block{background:linear-gradient(#392f26,#251f19);border:1px solid #56453355;border-bottom:0;border-radius:12px 12px 0 0;text-align:center;width:100%;margin-top:9px;padding:5px 0;font:600 28px var(--display);color:#9b8970;height:46px;position:relative;overflow:hidden}
.first .podium-block{height:64px;background:linear-gradient(#604a33,#2b231b);border-color:#916b3f55;color:var(--gold-light)}
.first .podium-block:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff3 50%,transparent 65%);transform:translateX(-120%);animation:sweep 3.4s var(--ease) 1s infinite}
.third .podium-block{height:34px}

.my-position{border:1px solid #81694c55;background:linear-gradient(120deg,#3b3026,#2b231c);border-radius:16px;padding:14px;display:flex;gap:13px;align-items:center}
.position-num{font:600 37px/1 var(--display);color:var(--gold)}
.position-copy{flex:1}
.position-copy b{display:block;font-size:12px}
.position-copy small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.my-position>.icon{color:var(--gold);width:20px}

.leaderboard{list-style:none;margin:0;padding:0}
.leaderboard li{position:relative;display:flex;align-items:center;gap:11px;padding:12px 10px;border-bottom:1px solid #322a23;overflow:hidden;animation:row-in .35s var(--ease) backwards}
.leaderboard li:before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--share,0%);background:linear-gradient(90deg,#52412f99,#52412f00);border-radius:0 12px 12px 0;transition:width .9s var(--ease)}
.leaderboard li>*{position:relative}
.leaderboard li.me{background:#352a2180;border-radius:12px;border-color:transparent}
.lb-rank{font-size:11px;color:var(--muted);width:23px;flex-shrink:0}
.leaderboard .avatar{width:40px;height:40px;font-size:19px}
.lb-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
.you-label{font-size:9px;color:var(--gold);margin-left:5px}
.lb-steps{font-size:12px;white-space:nowrap}
.delta{display:inline-flex;align-items:center;gap:2px;font-size:9px;margin-left:6px;padding:2px 5px;border-radius:20px;background:#3b2f23;color:var(--ok)}
.delta.down{background:#3a2a24;color:#e0a893}
.delta .icon{width:10px;height:10px}

/* "Schlag den Coach": zwei Zahlen gegeneinander statt einer wachsenden Summe.
   Gleiche Karte, gleiche Farben wie die Crew-Karte, damit die Startseite nicht
   in zwei Gestaltungen zerfaellt. */
.coach-card{background:radial-gradient(ellipse at top right,#4f3b2855,transparent 70%),#261f19;border:1px solid #4d3c2c66;border-radius:20px;padding:17px;margin-top:24px}
.coach-card.coach-won{border-color:var(--gold)}
.coach-card .section-heading{margin:0 0 16px}
.coach-duel{display:flex;justify-content:space-between;gap:12px}
.coach-side{display:flex;flex-direction:column;gap:2px;min-width:0}
.coach-side.coach-him{text-align:right}
.coach-who{font:600 11px/1 var(--display);letter-spacing:.12em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coach-side strong{font:600 28px/1 var(--display)}
.coach-side.coach-him strong{color:var(--muted)}
.coach-card.coach-won .coach-side:not(.coach-him) strong{color:var(--gold)}
.coach-track{position:relative;height:8px;border-radius:4px;background:#4d3d2e;margin:16px 0 12px;overflow:hidden}
.coach-track span{display:block;height:100%;width:0;border-radius:4px;background:var(--gold);box-shadow:0 0 10px #c7a56f55;transition:width 1s var(--ease)}
.coach-gap{margin:0;font-weight:600}
.coach-card .micro{margin:4px 0 0}
.coach-card .btn{margin-top:17px;min-height:42px}
.community-card{background:radial-gradient(ellipse at top right,#4f3b2855,transparent 70%),#261f19;border:1px solid #4d3c2c66;border-radius:20px;padding:17px;margin-top:24px}
.community-card .section-heading{margin:0 0 16px}
.community-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.community-total strong{font:600 34px/1 var(--display)}
.community-track{display:flex;align-items:center;justify-content:space-between;position:relative;margin:22px 6px 17px;height:22px;background:linear-gradient(#4d3d2e,#4d3d2e) center/100% 3px no-repeat}
.community-track:before{content:'';position:absolute;left:0;top:calc(50% - 1.5px);height:3px;width:var(--community-progress,0%);background:var(--gold);box-shadow:0 0 10px #c7a56f55;transition:width 1s var(--ease)}
.community-node{position:relative;background:#2d241c;border:1px solid #664f37;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:8px;color:var(--muted);transition:background .4s,color .4s}
.community-node.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.community-node .icon{width:12px;height:12px}
.community-card .btn{margin-top:17px;min-height:42px}

/* Gipfelrennen: the three fixed weeks are visible beside the overall podium. */
.summit-card{overflow:hidden;margin:18px 0 20px;border:1px solid #665038;border-radius:22px;background:#211b17}
.summit-hero{position:relative;min-height:218px;overflow:hidden;background:#241c17}
.summit-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.summit-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#17120ff2 0%,#17120f26 80%)}
.summit-hero-copy{position:absolute;z-index:1;left:20px;right:20px;bottom:20px}
.summit-hero h2{margin:6px 0;font:700 clamp(31px,9vw,43px)/.94 var(--display);letter-spacing:.3px}
.summit-hero p{max-width:290px;font-size:12px;color:#f1e6d2}
.summit-stage-nav{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:18px 15px 8px}
.summit-stage-nav:before{content:'';position:absolute;top:41px;left:20%;right:20%;height:2px;background:#67543f;pointer-events:none}
/* Mehr als drei Gipfel: feste Breite je Gipfel, seitlich wischen. Die Linie
   läuft von der Mitte des ersten bis zur Mitte des letzten Kreises. */
.summit-stage-nav.many{grid-template-columns:repeat(var(--stages),64px);justify-content:start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
.summit-stage-nav.many::-webkit-scrollbar{display:none}
.summit-stage-nav.many:before{left:47px;right:auto;width:calc((var(--stages) - 1) * 69px)}
.summit-stage-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:85px;padding:0 2px;
 border:0;background:none;color:#c8bca9;cursor:pointer;text-align:center}
.summit-stage-tab-circle{position:relative;display:grid;place-items:center;width:48px;height:48px;border:2px solid #74644e;border-radius:50%;
 background:#332a21;box-shadow:0 3px 12px #0007;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.summit-stage-tab .icon{width:22px;height:22px;opacity:.82}
.summit-stage-tab-circle b{position:absolute;right:-5px;bottom:-3px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
 border:1px solid #3d3023;background:#bda071;color:#211911;font:800 11px/1 var(--display)}
.summit-stage-tab-name{font-size:9px;font-weight:800;letter-spacing:1.1px}
.summit-stage-tab-status{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;letter-spacing:.4px;color:var(--muted)}
.summit-stage-tab.complete .summit-stage-tab-circle{border-color:#88966d;background:#394737;color:#dae8c7}
.summit-stage-tab.complete .summit-stage-tab-circle b{left:-5px;top:-5px;right:auto;bottom:auto}
.summit-stage-tab.complete .summit-stage-tab-status{color:#cfe2ba}
.summit-stage-winner{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:25px;height:25px;
 border:2px solid #d7e4ba;border-radius:50%;background:#2d362b;box-shadow:0 2px 7px #0009;pointer-events:none}
.summit-stage-winner .avatar{width:21px;height:21px;margin:0;border:0;font-size:11px;--ts:8px}
.summit-stage-winner .avatar.initials{font-size:7px}
.summit-stage-winner .avatar img{width:100%;height:100%}
.summit-stage-winner em{position:absolute;right:-10px;bottom:-3px;display:grid;place-items:center;min-width:14px;height:14px;
 padding:0 2px;border:1px solid #d7e4ba;border-radius:10px;background:#293726;color:#e8f1d9;font:700 8px/1 var(--display)}
.summit-stage-tab.current .summit-stage-tab-circle{border-color:#f3ce8f;box-shadow:0 0 0 3px #e9bd7240,0 0 18px #e9bd7266;color:#ffe2ae}
.summit-stage-tab.current .summit-stage-tab-status{color:#edc891}
.summit-stage-tab.selected .summit-stage-tab-circle{transform:scale(1.08);background:#5b412b}
.summit-stage-tab.complete.selected .summit-stage-tab-circle{background:#506447}
.summit-stage-tab:not(:disabled):hover .summit-stage-tab-circle{transform:scale(1.1)}
.summit-stage-tab:focus-visible{outline:2px solid #fff0bf;outline-offset:2px;border-radius:10px}
.summit-stage-tab:disabled{cursor:default;color:#879199}
.summit-stage-tab:disabled .summit-stage-tab-circle{border-color:#4d5961;background:#29333b;box-shadow:none}
.summit-stage-tab:disabled .summit-stage-tab-circle b{background:#69747a;color:#eef1ed}
.summit-stages{display:grid;gap:10px;padding:0 14px 14px}
/* Seit v0.100.1 steht der Berg oben und die Gipfel-Reiter darunter. */
/* Seit v0.100.2 ohne Titelbild: der Berg ist das Erste in der Karte. */
.summit-card>.summit-stages:first-child{padding-top:14px;padding-bottom:2px}
.summit-stages+.summit-stage-nav{padding-top:12px;padding-bottom:12px}
.summit-stage{padding:15px;border:1px solid #52402e;border-radius:16px;background:#2b221b}
.summit-stage.upcoming{border-color:#465058}
.summit-stage.complete{border-color:#797c52;background:linear-gradient(#303023,#26231b)}
.summit-stage.current{border-color:var(--gold);box-shadow:0 0 0 1px #c7a56f25}
.summit-stage-head{display:flex;align-items:center;gap:11px}
.summit-peak{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#604a30;color:#f9ddb0;font:700 18px var(--display)}
.summit-stage h3{margin:0;font:700 20px/1 var(--display)}
.summit-stage small{font-size:10px;color:var(--muted)}
.summit-status{margin-left:auto;color:var(--gold-light);font-size:8px;letter-spacing:1px;font-weight:700;text-align:right}
.summit-mountain-scene{--mountain-back:#343f49;--mountain-face:#56606a;--mountain-shade:#37434c;--mountain-snow:#a4afb7;
 position:relative;height:var(--peak-height);overflow:hidden;margin:15px -4px 0;border:1px solid #45515a;border-radius:15px;
 background:radial-gradient(circle at 52% 30%,#adbdc01c,transparent 45%),linear-gradient(#1b2731,#303844 70%,#22282d)}
.summit-stage.current .summit-mountain-scene{--mountain-back:#51473d;--mountain-face:#8d6750;--mountain-shade:#684938;--mountain-snow:#ead2b4;
 border-color:#876747;background:radial-gradient(circle at 50% 26%,#e1b77533,transparent 42%),linear-gradient(#2b262b,#544238 72%,#2a231d)}
.summit-stage.complete .summit-mountain-scene{--mountain-back:#445247;--mountain-face:#788569;--mountain-shade:#526652;--mountain-snow:#d7e5c2;
 border-color:#79895e;background:radial-gradient(circle at 53% 24%,#e4e3a633,transparent 44%),linear-gradient(#23322e,#53664a 74%,#293126)}
.summit-sky-orb{position:absolute;z-index:0;left:18%;top:20%;width:33px;height:33px;border-radius:50%;pointer-events:none;
 background:#e7cb8e;box-shadow:0 0 0 8px #e7cb8e13,0 0 35px 15px #e7cb8e38;opacity:.82;animation:summit-sky-glow 7s ease-in-out infinite alternate}
.summit-stage.current .summit-sky-orb{left:20%;top:17%;width:26px;height:26px;background:#dba975;box-shadow:0 0 0 8px #dba97518,0 0 38px 17px #dba9754d}
.summit-stage.upcoming .summit-sky-orb{left:23%;top:17%;width:23px;height:23px;background:#d9e4e7;box-shadow:0 0 0 7px #d9e4e714,0 0 34px 14px #bed5e547}
.summit-cloud{position:absolute;z-index:0;width:72px;height:12px;border-radius:50%;pointer-events:none;background:#eadfc633;
 filter:blur(6px);box-shadow:22px -3px 0 5px #eadfc622,-16px 3px 0 1px #eadfc622;animation:summit-cloud-drift 27s ease-in-out infinite alternate}
.summit-cloud-one{left:34%;top:27%}.summit-cloud-two{left:69%;top:43%;width:53px;opacity:.65;animation-duration:33s;animation-direction:alternate-reverse}
.summit-stage.upcoming .summit-cloud{background:#d9e9ef31;box-shadow:22px -3px 0 5px #d9e9ef1e,-16px 3px 0 1px #d9e9ef1e}
.summit-mountain-horizon{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--mountain-back);opacity:.55;
 animation:summit-horizon-drift 18s ease-in-out infinite alternate}
.summit-mountain-horizon path:first-child{opacity:.48}
.summit-mountain-art{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 -6px 20px #0005)}
.summit-mountain-face{fill:var(--mountain-face)}
.summit-mountain-shade{fill:var(--mountain-shade)}.summit-snowcap{fill:var(--mountain-snow)}
.summit-ridge-line{fill:none;stroke:#fff4;stroke-width:2}
.summit-treeline{fill:#202a22e6}
.summit-stage.current .summit-treeline{fill:#302722e6}.summit-stage.upcoming .summit-treeline{fill:#26333be6}
.summit-animal{filter:drop-shadow(0 2px 2px #0009)}
.summit-fox{fill:#bb7548;stroke:#6e3927;stroke-width:.65;stroke-linejoin:round}
.summit-fox-tail{fill:#d6905b;transform-box:fill-box;transform-origin:90% 80%;animation:summit-fox-wag 2.4s ease-in-out infinite}
.summit-fox-head{transform-box:fill-box;transform-origin:15% 75%;animation:summit-fox-sniff 4.2s ease-in-out infinite}
.summit-bear{fill:#392b22;stroke:#b89268;stroke-width:.7;stroke-linejoin:round}
.summit-bear-walk{animation:summit-bear-pace 4.2s ease-in-out infinite}
.summit-bear-head{transform-box:fill-box;transform-origin:10% 85%;animation:summit-bear-nod 4.2s ease-in-out infinite}
.summit-bear-leg-a,.summit-bear-leg-b{transform-box:fill-box;transform-origin:50% 15%;animation:summit-bear-step 4.2s ease-in-out infinite}
.summit-bear-leg-b{animation-delay:-2.1s}
.summit-ibex{fill:#d5c3a4;stroke:#40505a;stroke-width:.8;stroke-linejoin:round}
.summit-ibex-head{transform-box:fill-box;transform-origin:12% 80%;animation:summit-ibex-look 4.8s ease-in-out infinite}
.summit-ibex-horn{fill:none;stroke:#e6d2aa;stroke-width:2.3;stroke-linecap:round}
.summit-ibex-tail{animation:summit-ibex-tail 3.2s ease-in-out infinite}
.summit-animal-light{fill:#e8c79b;stroke:none}
.summit-animal-eye{fill:#ffedc2;stroke:none}
.summit-bird{position:absolute;z-index:3;left:-12%;top:18%;width:28px;height:18px;overflow:visible;pointer-events:none;
 fill:none;stroke:#f2e6cf;stroke-width:2.4;stroke-linecap:round;opacity:.8;filter:drop-shadow(0 1px 3px #0008);
 animation:summit-bird-flight 20s linear infinite}
.summit-stage.peak-2 .summit-bird{animation-delay:-7s}
.summit-stage.peak-3 .summit-bird{animation-delay:-13s}
.summit-air{position:absolute;z-index:3;inset:0;pointer-events:none}
.summit-air i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f0da92;box-shadow:0 0 7px 2px #f0da9266;
 animation:summit-air-drift 5.5s ease-in-out infinite alternate}
.summit-air i:nth-child(1){left:13%;top:59%;animation-delay:-1s}.summit-air i:nth-child(2){left:29%;top:46%;animation-delay:-3.5s}
.summit-air i:nth-child(3){left:43%;top:72%;animation-delay:-2s}.summit-air i:nth-child(4){left:61%;top:34%;animation-delay:-4s}
.summit-air i:nth-child(5){left:72%;top:70%;animation-delay:-.5s}.summit-air i:nth-child(6){left:87%;top:48%;animation-delay:-5s}
.summit-stage.current .summit-air i{background:#e5bd8c;box-shadow:0 0 6px 1px #e5bd8c55;opacity:.65}
.summit-stage.upcoming .summit-air i{width:2px;height:5px;border-radius:2px;background:#e9f3f5;box-shadow:0 0 4px #e9f3f577;
 animation:summit-snowfall 8s linear infinite}
@keyframes summit-horizon-drift{from{transform:translateX(-4%) scale(1.08)}to{transform:translateX(4%) scale(1.08)}}
@keyframes summit-bird-flight{0%{left:-12%;top:23%;opacity:0}8%{opacity:.8}48%{top:11%}90%{opacity:.8}100%{left:108%;top:20%;opacity:0}}
@keyframes summit-sky-glow{from{opacity:.6;transform:scale(.94)}to{opacity:.9;transform:scale(1.06)}}
@keyframes summit-cloud-drift{from{transform:translateX(-22px)}to{transform:translateX(24px)}}
@keyframes summit-air-drift{from{opacity:.15;transform:translateY(4px)}to{opacity:.68;transform:translateY(-5px)}}
@keyframes summit-snowfall{from{opacity:0;transform:translate(-5px,-18px)}20%{opacity:.8}80%{opacity:.8}to{opacity:0;transform:translate(12px,28px)}}
@keyframes summit-fox-wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}
@keyframes summit-fox-sniff{0%,38%,100%{transform:rotate(0)}53%,66%{transform:rotate(8deg)}}
@keyframes summit-bear-pace{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
@keyframes summit-bear-nod{0%,30%,100%{transform:rotate(-4deg)}48%,67%{transform:rotate(10deg)}}
@keyframes summit-bear-step{0%,24%,100%{transform:rotate(0)}42%{transform:rotate(16deg)}65%{transform:rotate(-6deg)}}
@keyframes summit-ibex-look{0%,28%,100%{transform:rotate(-5deg)}48%,72%{transform:rotate(11deg)}}
@keyframes summit-ibex-tail{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.summit-mountain-horizon,.summit-cloud,.summit-sky-orb,.summit-air i{animation:none;transform:none}
 .summit-bird{animation:none;left:12%;top:16%;opacity:.8}.summit-animal *, .summit-bear-walk{animation:none}}
.summit-mountain-ground{position:absolute;z-index:3;inset:auto 0 0;height:18px;pointer-events:none;background:linear-gradient(transparent,#151813bb)}
.summit-climber{position:absolute;z-index:4;display:grid;place-items:center;width:31px;height:31px;padding:0;transform:translate(-50%,50%);
 border:2px solid #ead4ad;border-radius:50%;background:#201a15;box-shadow:0 3px 9px #000b;scroll-margin-top:110px;transition:bottom .7s var(--ease),left .7s var(--ease)}
.summit-climber .avatar{width:27px;height:27px;margin:0;border:0;font-size:14px;--ts:11px}
.summit-climber:active{transform:translate(-50%,50%) scale(.94)}
.summit-climber .avatar img{width:100%;height:100%}
.summit-climber.on-route{width:35px;height:35px;border-color:#f2d49f;box-shadow:0 4px 12px #000c,0 0 0 2px #f2d49f33}
.summit-climber.on-route .avatar{width:31px;height:31px}
.summit-climber.at-base:not(.is-me){filter:saturate(.65)}
.summit-climber.is-me{border-color:#fff0ad;box-shadow:0 0 0 3px #ffe29c44,0 3px 9px #000b}
.summit-climber.is-leader{z-index:5;box-shadow:0 0 0 3px #f5d68a66,0 0 16px #eac67f88}
.summit-climber:focus-visible{outline:2px solid white;outline-offset:3px}
.summit-rank{position:absolute;top:-8px;right:-9px;min-width:17px;height:17px;padding:1px 3px;border-radius:50%;background:#ead4ad;color:#241810;
 font:700 10px/15px var(--display);box-shadow:0 2px 5px #0008}
.summit-mountain-caption{position:absolute;z-index:6;left:10px;top:10px;pointer-events:none;color:#fff9;font-size:8px;font-weight:800;letter-spacing:1.4px;text-shadow:0 1px 5px #000}
.summit-stage.upcoming .summit-climber{border-color:#aeb7b6;filter:saturate(.6)}
.summit-stage-chart{display:grid;gap:9px;margin-top:14px}
.summit-bar-row{display:grid;gap:4px}
.summit-bar-label{display:flex;justify-content:space-between;gap:8px;font-size:10px}
.summit-bar-label strong{color:var(--gold-light)}
.summit-bar-row.is-me .summit-bar-label{color:var(--gold-light)}
.summit-bar-track{display:block;overflow:hidden;height:6px;border-radius:10px;background:#4b3b2b}
.summit-bar-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#8f6a3d,#e3bd7a)}
.summit-bar-row.is-me .summit-bar-track i{background:linear-gradient(90deg,#b8975f,#ffe1a3)}

/* ------------------------------------------------------------- collection -- */

.profile-hero{display:flex;align-items:center;gap:18px;margin:0 0 16px;padding:18px;border:1px solid #4d3c2c66;border-radius:22px;background:radial-gradient(ellipse at top left,#6e583f2e,transparent 68%),#211b16}
.profile-hero-avatar{width:112px;flex-shrink:0;text-align:center}
.profile-hero-avatar .avatar{width:104px;height:104px;font-size:44px;margin:0 auto}
.profile-hero-avatar small{display:block;margin-top:8px;color:var(--muted);font-size:8px;line-height:1.35}
.profile-hero-copy{flex:1;min-width:0}
.profile-hero-copy h2{font:600 clamp(25px,8vw,34px)/1 var(--display);overflow-wrap:anywhere}
.profile-hero-copy p{font-size:11px;color:var(--gold);margin:6px 0 14px}
.profile-xp-label{display:flex;justify-content:flex-end;font-size:9px;color:var(--muted);margin-bottom:5px}
.profile-xp-label b{font-weight:500}

.level-card{display:flex;align-items:center;gap:20px;text-align:left;width:100%;padding:22px 20px;border:1px solid #654c3288;border-radius:22px;background:radial-gradient(ellipse at 10% 40%,#6e583f33,transparent 65%),#29221b}
.level-emblem{width:64px;height:80px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--gold);
  background:linear-gradient(135deg,#886944,#2f261d 60%,#624c34);clip-path:polygon(50% 0,100% 22%,100% 76%,50% 100%,0 76%,0 22%)}
.level-emblem:before{content:'';position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(145deg,#4f3e2d,#2d241c)}
.level-emblem>.icon,.level-emblem>b{position:relative}
.level-emblem .icon{width:21px;height:21px}
.level-emblem b{font:600 34px/1 var(--display)}
.level-copy{flex:1;min-width:0}
.level-copy>strong{font:600 30px var(--display);display:block;margin:1px 0 10px}
.level-copy .eyebrow{font-size:8px}
.level-xp{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);gap:4px}
.level-xp>b{color:var(--gold)}

.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.record{border:1px solid #392f26;border-radius:14px;background:#201b16;padding:14px 8px;text-align:center}
.record>.icon{width:17px;height:17px;color:var(--gold);margin-bottom:4px}
.record strong{display:block;font:600 clamp(18px,6vw,26px)/1.1 var(--display);white-space:nowrap}
.record small{display:block;color:var(--muted);font-size:9px;margin-top:5px}

.weight-card{margin:18px 0 22px;padding:17px;border:1px solid #493b2e;border-radius:18px;background:linear-gradient(145deg,#272018,#201a15)}
.weight-card .section-heading{margin:0 0 13px}
.weight-form{display:flex;gap:8px;align-items:stretch}
.weight-input{display:flex;align-items:center;flex:1;min-width:0;border:1px solid #51402f;border-radius:13px;background:#1d1611;overflow:hidden}
.weight-input input{width:100%;min-width:0;min-height:48px;padding:12px 4px 12px 14px;border:0;background:transparent;color:var(--text);font:600 18px var(--display)}
.weight-input input:focus{outline:0}
.weight-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px #c7a56f1f}
.weight-input b{padding:0 13px 0 8px;color:var(--muted);font-size:11px}
.weight-form .btn{width:auto;min-height:48px;margin:0;padding:10px 15px}
.weight-goal-form{margin-top:13px;padding-top:13px;border-top:1px solid #3b3026}
.weight-goal-form>label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 7px;font-size:11px;color:var(--text)}
.weight-goal-form label small{color:var(--muted);font-size:9px;font-weight:400}
.weight-goal-controls{display:flex;align-items:center;gap:12px}
.weight-goal-controls .weight-input{max-width:180px}
.weight-goal-controls .text-button{white-space:nowrap;color:var(--gold-light)}
.weight-chart{margin-top:13px;padding-top:13px;border-top:1px solid #3b3026}
.weight-summary{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}
.weight-summary strong{font:600 25px/1 var(--display);color:var(--gold-light)}
.weight-summary span,.weight-axis{color:var(--muted);font-size:9px}
.weight-chart svg{display:block;width:100%;height:auto;overflow:visible}
.weight-plot{position:relative}
.weight-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.weight-area{fill:url(#weightFill)}
.weight-target-line{stroke:#df695d;stroke-width:1.5;stroke-dasharray:5 4}
.weight-target-label{fill:#ef8a7f;font:700 7px Inter,sans-serif;text-anchor:end;letter-spacing:.5px}
.weight-chart circle{fill:var(--gold-light);stroke:#272018;stroke-width:2;cursor:pointer;outline:none}
.weight-chart circle:focus{stroke:#fff;stroke-width:2.5}
.weight-tooltip{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:72px;padding:7px 9px;border:1px solid #775f42;border-radius:9px;background:#15100dcc;box-shadow:0 5px 18px #0008;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;text-align:center}
.weight-tooltip b{font-size:11px;color:var(--gold-light)}
.weight-tooltip span{font-size:8px;color:var(--muted)}
.weight-axis{display:flex;justify-content:space-between;margin-top:-5px}
.weight-empty{padding:13px 4px 3px;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}
#weightMsg:not(:empty),#weightGoalMsg:not(:empty){margin-top:9px}
.weight-goal-progress{margin-top:16px;padding:14px;border:1px solid #44372b;border-radius:13px;background:#1c1713}
.weight-goal-head,.weight-goal-labels{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.weight-goal-head b{font:700 24px/1 var(--display);color:var(--gold-light)}
.weight-goal-head span{font-size:10px;color:var(--muted)}
.weight-goal-head small,.weight-goal-labels{font-size:8px;color:var(--muted)}
.weight-goal-track{position:relative;height:6px;margin:13px 3px 8px;border-radius:6px;background:#3d3025}
.weight-goal-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.weight-goal-track span{position:absolute;top:50%;width:13px;height:13px;border:2px solid #1c1713;border-radius:50%;background:var(--gold-light);transform:translate(-50%,-50%)}
.weight-goal-empty{color:var(--muted);font-size:10px;text-align:center}

.season-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.season-cell{aspect-ratio:1;border-radius:9px;background:#231d18;border:1px solid #312a23;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;color:#7c6e5d;padding:0;transition:transform .25s var(--pop)}
.season-cell span{font-size:7px;line-height:1;opacity:.75}
.season-cell b{font:600 10px/1 var(--display);letter-spacing:.1px}
.season-cell.l1{background:#362b21;color:#a89375}
.season-cell.l2{background:#4e3b28;color:#cfbea2}
.season-cell.l3{background:#6f5233;color:var(--gold-light);border-color:#916e44}
.season-cell.l4{background:linear-gradient(140deg,#c7a56f,#a5834f);color:var(--ink);border-color:var(--gold)}
.season-cell.today{outline:1px solid var(--gold);outline-offset:2px}
.season-cell.future{opacity:.35}
.season-cell.pending{border-style:dashed;border-color:var(--gold)}
.season-cell:active{transform:scale(.9)}

.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.badge-tile{display:flex;align-items:center;flex-direction:column;min-width:0;border:1px solid #3a3027;background:linear-gradient(150deg,#2d251e,#1e1a16);border-radius:17px;padding:16px 6px 13px;position:relative;overflow:hidden;animation:tile-in .4s var(--ease) backwards}
.badge-tile.earned{border-color:#82613c44;background:radial-gradient(ellipse at top,#62493022,transparent),#29221b}
.badge-tile.earned:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,#ffffff14 50%,transparent 62%);transform:translateX(-120%);animation:sweep 4.5s var(--ease) infinite}
.badge-tile b{font-size:9px;font-weight:500;text-align:center;margin-top:11px;line-height:1.3;min-height:24px;display:flex;align-items:center;justify-content:center;width:100%}
.badge-tile small{font-size:8px;color:var(--muted);margin-top:4px}
.badge-tile .meter{height:2px;width:70%;margin-top:9px}
.badge-tile.earned small{color:var(--gold)}
.badge-tile .earned-tick{position:absolute;right:8px;top:8px;color:var(--gold);width:10px;height:10px}
.mini-medal{position:relative;width:53px;height:60px;display:grid;place-items:center;flex-shrink:0;color:#9c8b74;
  background:linear-gradient(140deg,#72604b,#3c3024 50%,#6c5a46);clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
.mini-medal:before{content:'';position:absolute;inset:2px;background:linear-gradient(140deg,#3e3124,#2a2119);clip-path:inherit}
.mini-medal .icon{position:relative;width:25px;height:25px}
.medal-art{position:relative;z-index:1;width:68%;height:68%;object-fit:contain}
.mini-medal:not(.earned) .medal-art{filter:grayscale(1) opacity(.5)}
.earned .mini-medal,.mini-medal.earned{background:linear-gradient(140deg,#f6dfb4,#ae8753 40%,#473524 70%,#ddbf8b);color:var(--gold-light);filter:drop-shadow(0 4px 10px #0003)}
.earned .mini-medal:before,.mini-medal.earned:before{background:linear-gradient(140deg,#856642,#413326 80%)}
.collection-footer{text-align:center;color:#968875;letter-spacing:1.5px;font-size:7px;margin:28px 0 0}
.collection-footer>.icon{display:block;margin:0 auto 8px;width:17px}
.collection-footer .app-version{display:block;margin-top:10px;color:#6f6455;font-size:8px;letter-spacing:1px}

/* ------------------------------------------------------------------ sheet -- */

.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:480px;max-height:min(92dvh,880px);
  padding:9px 22px max(24px,env(safe-area-inset-bottom));border:1px solid #574736;border-bottom:0;border-radius:28px 28px 0 0;
  background:#272019;color:var(--text);box-shadow:0 -20px 80px #0006;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(var(--drag,0px));touch-action:pan-y}
.sheet[open]{animation:sheet-in .38s var(--ease)}
.sheet.dragging{transition:none;animation:none}
.sheet.settling{transition:transform .28s var(--ease)}
.sheet::backdrop{background:#070503c4;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body:has(.sheet[open]){overflow:hidden}
.sheet-grab{width:38px;height:4px;background:#76624c88;border-radius:4px;margin:2px auto 13px;cursor:grab}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sheet-heading h2{font-size:17px}
.sheet-heading .icon-button{width:33px;height:33px;background:none}
.sheet input{width:100%;background:#1d1611;border:1px solid #51402f;border-radius:13px;padding:14px 15px;font-size:16px;min-height:50px}
.sheet label{font-size:11px;color:var(--muted);display:block;margin:15px 0 7px}
.sheet .btn{margin-top:15px}
.detail-medal{display:flex;justify-content:center;margin:10px 0 20px}
.detail-medal .mini-medal{width:103px;height:116px;animation:badge-pop .6s var(--pop)}
.detail-medal .mini-medal .icon{width:48px;height:48px}
.detail-title{text-align:center;font:600 35px/1.1 var(--display);margin-bottom:10px}
.detail-hint{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:20px}
.detail-progress{font-size:12px;color:var(--gold);text-align:center;margin:12px 0}
.detail-tier{text-align:center;display:block;font-size:9px;letter-spacing:2px;color:var(--gold);margin:0 0 12px}
.badge-detail .btn{margin-top:24px}
.rule-list{padding-left:19px;font-size:12px;color:var(--muted);line-height:1.8}
.rule-list li{margin-bottom:10px}

/* ---------------------------------------------------------- welcome back -- */
.welcome-hero{text-align:center;padding:4px 8px 10px;animation:welcome-rise .55s var(--ease) both}
.welcome-orbit{display:grid;place-items:center;width:62px;height:62px;margin:2px auto 13px;border:1px solid #c7a56f88;border-radius:50%;color:var(--gold-light);background:radial-gradient(circle,#c7a56f33,#1d161100 68%);box-shadow:0 0 0 8px #c7a56f0d,0 0 30px #c7a56f22;animation:welcome-pulse 2.8s ease-in-out infinite}
.welcome-orbit .icon{width:27px;height:27px}
.welcome-hero h3{font:600 31px/1 var(--display);letter-spacing:.2px;margin:6px 0 8px}
.welcome-hero p{max-width:290px;margin:0 auto;color:var(--muted);font-size:12px;line-height:1.65}
.welcome-section{margin-top:15px;animation:welcome-rise .55s var(--ease) .12s both}
.welcome-changes{display:grid;gap:8px}
.welcome-change{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid #51402f;border-radius:15px;background:linear-gradient(110deg,#2b2118,#211914);animation:welcome-card .45s var(--ease) both}
.welcome-change:nth-child(2){animation-delay:70ms}.welcome-change:nth-child(3){animation-delay:140ms}.welcome-change:nth-child(4){animation-delay:210ms}
.welcome-change.positive{border-color:#ad956044}.welcome-change.muted{border-color:#594738}
.welcome-countdown{border-color:#c7a56f66;background:linear-gradient(105deg,#3a2b1d,#211914)}
.welcome-mission{border-color:#c7a56f44}.welcome-mission.complete{border-color:#91b87955}.welcome-mission>span:last-child{flex:1}.welcome-progress{display:block;height:4px;margin-top:8px;border-radius:4px;background:#493a2a;overflow:hidden}.welcome-progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .8s var(--ease)}
.welcome-entry{margin-top:15px}
.welcome-race-card{padding:11px 12px 9px;border:1px solid #c7a56f55;border-radius:15px;background:radial-gradient(circle at 50% 0,#4a3622,#211914 72%);animation:welcome-card .5s var(--ease) both}
.welcome-race-head,.welcome-race-labels{display:flex;align-items:center;justify-content:space-between;gap:8px}.welcome-race-head .info-heading{margin:0;font-size:8px}.welcome-gap{color:var(--gold-light);font:600 18px/1 var(--display)}
.welcome-track{position:relative;height:58px;margin:4px 17px 0;display:flex;align-items:center;justify-content:space-between}.welcome-track-line{position:absolute;left:17px;right:17px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-light),#6d5134);box-shadow:0 0 12px #c7a56f66}.welcome-track-line:after{content:'';position:absolute;inset:-3px 0;background:repeating-linear-gradient(90deg,transparent 0 8px,#f8e4bd 9px 11px);opacity:.35}
.welcome-track .avatar{position:relative;z-index:1;width:39px;height:39px;font-size:17px;border:2px solid var(--gold-light);box-shadow:0 4px 13px #0008}.welcome-track .welcome-target{position:relative;z-index:1}.welcome-track .welcome-target .avatar{border-color:#e6d6bb}.welcome-chaser{animation:chase-bob 1.8s ease-in-out infinite}.welcome-target{animation:target-pulse 2.2s ease-in-out infinite}
.welcome-race-labels{font-size:9px;color:var(--muted);letter-spacing:.4px}.welcome-race-labels b{color:var(--gold-light)}
.welcome-mission-card{display:flex;align-items:center;gap:13px;margin:4px 0 2px;padding:12px 13px;border:1px solid #c7a56f55;border-radius:16px;background:linear-gradient(115deg,#332519,#211914);animation:welcome-card .5s var(--ease) .08s both}.welcome-mission-card>div:last-child{min-width:0;flex:1}.welcome-mission-card .info-heading{display:block;margin:0 0 4px;font-size:8px}.welcome-mission-card b{display:block;font-size:13px;line-height:1.15}.welcome-mission-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.welcome-mission-ring{display:grid;place-items:center;width:57px;height:57px;flex:0 0 57px;border-radius:50%;background:conic-gradient(var(--gold-light) var(--mission-progress),#4a3827 0);position:relative;box-shadow:0 0 18px #c7a56f2b}.welcome-mission-ring:after{content:'';position:absolute;inset:5px;border-radius:50%;background:#211914}.welcome-mission-ring strong{position:relative;z-index:1;font:600 16px var(--display);color:var(--gold-light)}.welcome-copy-swap{animation:welcome-copy-swap .35s var(--ease)}
.welcome-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:11px;color:var(--ink);background:var(--gold-light);box-shadow:0 4px 13px #0005}
.welcome-icon .icon{width:17px;height:17px}
.welcome-change>span:last-child{min-width:0}.welcome-change b{display:block;font-size:12px}.welcome-change small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.welcome-people{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.welcome-person{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:13px;background:#1d1712;animation:welcome-card .45s var(--ease) both}
.welcome-person .avatar{width:31px;height:31px;font-size:14px;flex:0 0 31px}.welcome-person b{display:block;font-size:11px}.welcome-person small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
/* Mit .sheet davor: sonst gewinnen „.sheet label“ (block) und „.sheet input“ (Innenabstand, 50px) und das Kästchen steht riesig über dem Text. */
.sheet .welcome-optout{display:flex;align-items:flex-start;gap:9px;margin:19px 2px 4px;color:var(--muted);cursor:pointer}.sheet .welcome-optout input{width:18px;height:18px;min-height:18px;flex:0 0 18px;padding:0;border-radius:4px;accent-color:var(--gold);margin:1px 0 0}.welcome-optout b{display:block;color:var(--text);font-size:11px}.welcome-optout small{display:block;font-size:10px;line-height:1.45;margin-top:3px}
.welcome-hero+.welcome-section{margin-top:5px}
@keyframes welcome-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes welcome-card{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes welcome-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 8px #c7a56f0d,0 0 30px #c7a56f22}50%{transform:scale(1.05);box-shadow:0 0 0 12px #c7a56f0a,0 0 38px #c7a56f38}}
@keyframes chase-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes target-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes welcome-copy-swap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.welcome-hero,.welcome-section,.welcome-change,.welcome-person,.welcome-orbit,.welcome-race-card,.welcome-chaser,.welcome-target,.welcome-mission-card,.welcome-copy-swap{animation:none}}

/* „Alle Infos" zu einem Termin: Regeln, Erklärvideo, Preise. Video und Preise
   dürfen fehlen, dann steht dort ein Platzhalter in derselben Kastenform, damit
   die Seite nicht je nach Füllstand anders aussieht. */
.info-lead{margin:0 0 4px;font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;font-size:19px;color:var(--text)}
.info-heading{margin:22px 0 8px;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light)}
.info-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.info-link{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:#1d1814;color:var(--text);text-decoration:none;font-size:13px}
.info-link>span{flex:1;min-width:0}
.info-link>.icon{width:17px;height:17px;color:var(--gold);flex-shrink:0}
.info-link>.icon:last-child{width:14px;height:14px;color:var(--muted)}
.info-link:hover,.info-link:focus-visible{border-color:var(--gold)}
.info-placeholder{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px dashed #59442f;border-radius:14px;background:#170f0a80}
.info-placeholder>.icon{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:1px}
.info-placeholder b{display:block;font-size:12px;margin-bottom:3px;color:var(--text)}
.info-placeholder span{font-size:11.5px;line-height:1.6;color:var(--muted)}
.info-heading-first{margin-top:14px}
.info-video{margin:0 -4px}
.info-video-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:1px solid #59442f;border-radius:16px;background:#130e09;box-shadow:0 12px 28px #0005}
.info-video-poster img,.info-video-fallback{display:block;width:100%;height:100%;object-fit:cover}
.info-video-fallback{background:radial-gradient(circle at 65% 25%,#d4aa6f,#6c4728 44%,#19110c)}
.info-video-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff5 48%,transparent 63%);transform:translateX(-110%)}
.info-video-poster:hover:after{animation:sweep 1.2s var(--ease)}
.info-video-play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:58px;height:58px;transform:translate(-50%,-50%);border:1px solid #fff9;border-radius:50%;color:var(--ink);background:#f1d29dcc;box-shadow:0 5px 20px #0007;transition:transform .25s var(--pop),background .2s}
.info-video-poster:hover .info-video-play{transform:translate(-50%,-50%) scale(1.1);background:#f8e4bd}
.info-video-play .icon{width:23px;height:23px;fill:currentColor;stroke-width:1.5;margin-left:3px}
.info-video-label{position:absolute;z-index:1;left:0;right:0;bottom:12px;color:#fff8;font-size:10px;font-weight:700;letter-spacing:1.5px;text-align:center;text-transform:uppercase}
.info-video-player{display:block;width:100%;max-height:58dvh;border:1px solid #59442f;border-radius:16px;background:#080604;box-shadow:0 12px 28px #0007}
.planned-prizes{display:grid;gap:10px}
.planned-prize{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:13px;align-items:center;padding:10px;border:1px solid #5a452c;border-radius:16px;background:radial-gradient(circle at 0 0,#3a2c1c,transparent 70%),#1f1812;box-shadow:0 8px 22px #0004;overflow:hidden}
.planned-prize:before{content:'';position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 43%,#fff3 50%,transparent 57%);transform:translateX(-60%);pointer-events:none}
.planned-prize:hover:before{animation:sweep 1.1s var(--ease)}
.planned-prize-image{position:relative;display:grid;place-items:center;width:92px;height:92px;overflow:hidden;border:1px solid #80633d;border-radius:13px;background:#2a2016;color:var(--gold-light);text-decoration:none;box-shadow:0 5px 16px #0006}
.planned-prize-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--pop)}
.planned-prize:hover .planned-prize-image img{transform:scale(1.06)}
.planned-prize-image>.icon{position:absolute;right:5px;bottom:5px;width:21px;height:21px;padding:4px;border-radius:50%;color:var(--ink);background:var(--gold-light)}
.planned-prize-placeholder{background:linear-gradient(140deg,#6a5433,#2a2016)}
.planned-prize-placeholder>.icon{position:static;width:31px;height:31px;padding:0;background:none}
.planned-prize>div{min-width:0}.planned-prize .eyebrow{margin-bottom:5px;color:var(--gold);font-size:8px}
.planned-prize>div>b{display:block;font-size:13px;line-height:1.35}
.planned-prize .prize-cta{display:inline-flex;width:auto;min-height:31px;margin-top:9px;padding:5px 9px;font-size:9px}
.recovery-code{font:600 33px var(--display);letter-spacing:2px;color:var(--gold-light);text-align:center;padding:15px 0;-webkit-user-select:all;user-select:all}
.profile-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.profile-heading .avatar{width:64px;height:64px;font-size:30px}
.profile-heading b{display:block;font-size:17px}
.profile-heading small{font-size:11px;color:var(--gold)}
.settings-list{margin:15px 0}
.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;border-bottom:1px solid #473a2d;text-align:left;font-size:12px;gap:10px;min-height:48px}
.setting-row>span{display:flex;align-items:center;gap:11px}
.setting-row .icon{width:17px;height:17px;color:var(--muted)}
.setting-note{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.setting-row[aria-disabled=true]{opacity:.7}
.toggle{width:34px;height:20px;background:#4f3e2e;border-radius:20px;position:relative;flex-shrink:0;transition:background .2s}
.toggle:after{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#bbad98;border-radius:50%;transition:transform .25s var(--pop)}
.setting-row[aria-checked=true] .toggle{background:var(--gold)}
.setting-row[aria-checked=true] .toggle:after{background:#3e3328;transform:translateX(14px)}
.profile-footer{display:flex;justify-content:space-between;margin-top:23px;align-items:center}
.profile-footer .text-button{color:var(--muted);font-size:10px}
.profile-footer>span{font-size:9px;color:var(--muted)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.avatar-grid button{aspect-ratio:1;display:grid;place-items:center;font-size:19px;border-radius:12px;background:#211913;border:1px solid #3f3225;line-height:1}
.avatar-grid button[aria-pressed=true]{border-color:var(--gold);background:#3e3023;box-shadow:0 0 0 2px #c7a56f33}
.share-preview{display:block;width:100%;border-radius:16px;margin:4px 0 16px}
.week-detail{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:20px 0}
.week-detail span{text-align:center;background:#3c2d20;border-radius:10px;padding:10px 0;font-size:10px;color:var(--muted)}
.week-detail b{display:block;margin-top:6px;color:var(--gold)}
.loading-button .icon{animation:spin 1s linear infinite}

/* ------------------------------------------------------------ step entry -- */

.date-chips{display:flex;gap:8px;flex-wrap:wrap}
.date-chips button{border:1px solid #504132;border-radius:20px;font-size:11px;color:var(--muted);padding:9px 14px}
.date-chips button[aria-pressed=true]{border-color:var(--gold);color:var(--gold-light);background:#59432c44}
.entry-value{position:relative;margin:18px 0 4px}
.entry-value input{font:600 clamp(54px,17vw,68px)/1 var(--display);letter-spacing:1px;padding:14px 12px;text-align:center;height:96px;background:#1e1711;caret-color:var(--gold)}
.entry-value input::placeholder{color:#7d6b56}
.entry-value.shake{animation:shake .4s}
.entry-sub{text-align:center;font-size:10px;color:var(--muted);margin:6px 0 12px}
.entry-save-bar{position:sticky;bottom:0;padding:12px 0 max(8px,env(safe-area-inset-bottom));background:var(--bg,#201810);z-index:2}
.entry-save-bar .btn{width:100%}
.entry-preview{display:flex;justify-content:center;gap:15px;font-size:11px;color:var(--gold);min-height:18px;margin-bottom:6px}
.entry-preview .icon{width:14px;height:14px;margin-right:4px}
.entry-preview span{display:inline-flex;align-items:center}
/* Rechtliches: der kleine Verweis unter dem Anmeldeformular und der aus der
   Seite übernommene Text im Einstellungs-Blatt. Der Text kommt aus
   datenschutz.html, bringt also eigene h2/h3/dl mit, die hier auf die Größen
   des Blattes gebracht werden. */
.gate-legal{margin:14px 0 0;text-align:center;font-size:11px;color:var(--muted)}
.gate-legal a{color:var(--muted);text-decoration:underline}
.gate-legal a:hover{color:var(--gold)}
.legal-text{font-size:13.5px;line-height:1.6;color:var(--text)}
.legal-text .wrap{max-width:none;padding:0}
.legal-text h2{font:700 .95rem/1.3 var(--body);color:var(--gold-light);margin:20px 0 6px}
.legal-text h3{font:700 .86rem/1.35 var(--body);margin:14px 0 4px}
.legal-text p,.legal-text li{margin:0 0 9px}
.legal-text ul{padding-left:18px;margin:0 0 12px}
.legal-text dt{font-weight:700;margin-top:10px}
.legal-text dd{margin:2px 0 0}
.legal-text a{color:var(--gold-light)}
.legal-text code{font-size:.92em;background:#241b13;padding:1px 4px;border-radius:4px}
.legal-text .box{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:11px 13px;margin:0 0 13px}
.legal-text .review{border:1px solid var(--gold);border-left-width:3px;border-radius:8px;
  background:rgba(199,165,111,.08);padding:11px 13px;margin:0 0 16px;font-size:12.5px}
.legal-text .updated{font-size:11px;color:var(--muted);margin:0 0 14px}

/* ------------------------------------------------------------- Beweis ---
   Der Block im Eintragsblatt, wenn die Saison ein Bild verlangt. Er sitzt
   zwischen dem eingetippten Wert und den Schnellwahl-Knöpfen, also dort, wo
   der Blick nach der Zahl ohnehin hinwandert, und nicht unter der Tastatur,
   wo er auf einem kleinen Telefon nie gesehen würde. */
.proof-block{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:11px 12px;margin:2px 0 12px}
.proof-block.proof-missing{border-color:var(--gold-deep)}
/* Freiwillig: derselbe Block, aber zurückgenommen. Er soll angeboten aussehen,
   nicht verlangt, und im Blatt nicht mit der Zahl um Aufmerksamkeit streiten. */
.proof-block.proof-optional{background:transparent;border-style:dashed}
.proof-block.proof-optional .proof-head{color:var(--muted)}
.proof-tag{margin-left:2px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;
  font:700 9px/1.4 var(--body);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.proof-head{display:flex;align-items:center;gap:7px;font:700 12px/1 var(--body);color:var(--gold-light);letter-spacing:.04em;text-transform:uppercase}
.proof-head .icon{width:15px;height:15px}
.proof-why{margin:7px 0 9px;font-size:11px;line-height:1.45;color:var(--muted)}
/* Feste Höhe, damit das Blatt beim Aufnehmen nicht springt und der Knopf
   darunter nicht unter dem Daumen wegrutscht. */
.proof-shot{position:relative;display:grid;place-items:center;height:132px;border:1px dashed #59442f;border-radius:11px;background:#15100b;overflow:hidden;color:var(--muted);font-size:11px}
.proof-shot.has-shot{border-style:solid;border-color:var(--line)}
/* Absolut positioniert, nicht als zentriertes Grid-Kind mit Prozentmassen.
   Als Grid-Kind mit place-items:center loest Chrome sowohl height:100% als
   auch max-height:100% wie `auto` auf: ein hochkanter Screenshot (608x1080)
   kam dadurch 721px hoch heraus statt 132px und wurde von overflow:hidden auf
   einen schwarzen Streifen beschnitten. Beides nachgemessen, beides nicht
   geraten. Gegen einen absolut positionierten Kasten mit inset:0 in einem
   Elternteil mit fester Hoehe greifen die 100% zuverlaessig. */
.proof-shot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.proof-shot.shake{animation:shake .4s}
.proof-empty,.proof-held{display:inline-flex;align-items:center;gap:6px;text-align:center;padding:0 10px}
.proof-held{color:var(--ok)}
.proof-empty .icon,.proof-held .icon{width:15px;height:15px}
.proof-row{display:flex;gap:7px;margin-top:9px}
.proof-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 10px;
  border:1px solid #4c3d2e;border-radius:12px;background:#2a2017;color:var(--gold-light);font:600 11px/1 var(--body)}
.proof-btn .icon{width:15px;height:15px}
.proof-btn:active{background:#332719}
.proof-need{margin:8px 0 0;min-height:14px;font-size:10.5px;line-height:1.4;color:var(--gold)}

.quick-row{display:flex;gap:7px;margin:10px 0 12px}
.quick-row button{flex:1;border:1px solid #4c3d2e;border-radius:12px;min-height:38px;font-size:11px;color:var(--gold-light);background:#2a2017}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.keypad button{height:54px;border-radius:14px;background:#2c221a;border:1px solid #443629;font:600 24px/1 var(--display);color:var(--text);display:grid;place-items:center}
.keypad button:active{background:#473626}
.keypad button.wide{grid-column:span 1}
.keypad .icon{width:20px;height:20px;color:var(--gold)}
.keypad .btn{height:54px;min-height:0;padding:0;border-radius:14px;background:linear-gradient(110deg,#e9cd9c,#cea76d);border:0}
.keypad .btn .icon{color:var(--ink);width:22px;height:22px}

/* ------------------------------------------------------------ celebration -- */

.cel{position:fixed;inset:0;z-index:200;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:28px;
  background:radial-gradient(ellipse at 50% 40%,#3e2c1cdd,#08070699 60%),#080706e8;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade-in .3s ease}
.cel-rays{position:absolute;pointer-events:none;top:36%;left:50%;width:min(160vw,820px);aspect-ratio:1;
  background:repeating-conic-gradient(from 0deg,#c7a56f1f 0deg 1.8deg,transparent 1.8deg 16deg);
  mask:radial-gradient(circle,transparent 14%,#000 30%,transparent 74%);
  -webkit-mask:radial-gradient(circle,transparent 14%,#000 30%,transparent 74%);
  will-change:transform;animation:rays 30s linear infinite}
.cel-body{position:relative;text-align:center;max-width:340px;width:100%;animation:cel-in .55s var(--pop)}
.cel-emblem{display:grid;place-items:center;width:110px;height:110px;margin:0 auto 22px;border:1px solid #ac834e66;border-radius:50%;
  background:radial-gradient(circle,#815d3566,#3e2e20);box-shadow:0 0 70px #d3b07922;animation:emblem-in .7s var(--pop)}
.cel-emblem>.icon{width:48px;height:48px;color:var(--gold-light);stroke-width:1.3}
.cel-emblem .mini-medal{width:78px;height:88px}
.cel-emblem .mini-medal .icon{width:34px;height:34px}
.cel-emblem.level{border-radius:0;border:0;background:none;box-shadow:none}
.cel-body h2{font:600 clamp(38px,12vw,52px)/.98 var(--display);margin:10px 0 10px;letter-spacing:-.5px}
.cel-body>p{font-size:12px;color:#cac0b0;margin-bottom:4px}
.cel-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 4px;min-height:34px}
.cel-chips span{display:flex;gap:5px;align-items:center;border:1px solid #6c553c99;border-radius:30px;padding:7px 11px;font-size:11px;color:var(--gold-light);background:#48372788;animation:chip-in .45s var(--pop) backwards}
.cel-chips span:nth-child(2){animation-delay:.1s}
.cel-chips span:nth-child(3){animation-delay:.2s}
.cel-chips span:nth-child(4){animation-delay:.3s}
.cel-chips .icon{width:14px;height:14px}
.cel .btn{margin-top:22px}
.cel-dots{display:flex;justify-content:center;gap:5px;margin-top:16px;height:5px}
.cel-dots i{width:5px;height:5px;border-radius:50%;background:#645442}
.cel-dots i.on{background:var(--gold)}
.level-badge{position:relative;width:104px;height:120px;display:grid;place-items:center;color:var(--gold-light);
  background:linear-gradient(135deg,#f6dfb4,#ae8753 45%,#473524 72%,#ebce9b);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 6px 20px #00000055)}
.level-badge:before{content:'';position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(150deg,#60482f,#2c221a)}
.level-badge b{position:relative;font:600 46px/1 var(--display)}
.level-badge small{position:relative;font-size:8px;letter-spacing:2px;color:var(--gold)}

.particles{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}
.particle{position:absolute;left:50%;top:52%;width:6px;height:10px;border-radius:1px;background:var(--gold);animation:confetti 1.3s var(--ease) forwards}

/* ------------------------------------------------------------------ prize ---
 * The special event. Gold enough to be the reason someone joins, quiet enough
 * not to compete with the podium underneath it. */

.prize{
  display:grid;grid-template-columns:auto 1fr;gap:12px 13px;align-items:center;
  padding:14px;border-radius:18px;
  background:radial-gradient(ellipse at 0% 0%,#3a2c1c,transparent 70%),#1f1812;
  border:1px solid #5a452c;box-shadow:0 10px 30px #00000033;
}
.prize.on-board{margin:14px 0 4px}
.prize-thumb{position:relative;display:block;width:62px;height:62px;flex-shrink:0;text-decoration:none}
.prize-emblem{
  display:grid;place-items:center;width:62px;height:62px;border-radius:15px;
  background:linear-gradient(140deg,#6a5433,#2a2016);border:1px solid #7a613c;color:var(--gold-light);
}
.prize-emblem .icon{width:26px;height:26px}
.prize-image{
  width:62px;height:62px;border-radius:15px;object-fit:cover;display:block;
  border:1px solid #7a613c;background:#2a2016;box-shadow:0 4px 14px #00000055;
}
.prize-gift{
  position:absolute;right:-7px;bottom:-7px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  background:linear-gradient(140deg,var(--gold-light),var(--gold-deep));
  border:2px solid #1f1812;box-shadow:0 2px 8px #00000066;
}
.prize-gift .icon{width:13px;height:13px;stroke-width:2}
.prize-copy{min-width:0}
.prize-copy .eyebrow{display:flex;align-items:center;gap:5px;color:var(--gold);font-size:8px;margin-bottom:5px}
.prize-copy .eyebrow .icon{width:11px;height:11px}
.prize-copy b{display:block;font-size:13px;line-height:1.35}
.prize-copy small{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:4px}
.prize-cta{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;border-radius:11px;text-decoration:none;
  background:#ffffff08;border:1px solid #5a452c;color:var(--gold-light);
  font-size:11px;font-weight:600;letter-spacing:.4px;
}
.prize-cta .icon{width:13px;height:13px}
.prize-cta:hover{background:#ffffff12}
.prize.banner-event{display:block;padding:0;overflow:hidden}
.prize-banner-link{display:block;text-decoration:none}
.prize-banner-image{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#120e0a}
.prize-banner-body{padding:14px}
.prize-banner-body p{margin:0 0 12px;font-size:12px;line-height:1.55;color:#e5dccd}
.prize-banner-body .prize-cta{width:100%}

.history-heading{margin-top:30px}
.challenge-history{display:grid;gap:9px}
.challenge-history-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid #4d3c2c66;border-radius:16px;background:#1d1814}
.challenge-history-row .event-medal{width:43px;height:49px}
.challenge-history-copy,.challenge-history-result{display:flex;min-width:0;flex-direction:column}
.challenge-history-copy b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.challenge-history-copy small,.challenge-history-result small{font-size:9px;color:var(--muted);margin-top:3px}
.challenge-history-result{text-align:right}
.challenge-history-result b{font:600 18px/1 var(--display);color:var(--gold-light)}
.challenge-history-row em{position:absolute;right:12px;top:8px;font-size:7px;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);font-style:normal}

/* ----------------------------------------------------------------- finale ---
 * A finished season is a different screen, not the same screen with a dial
 * stuck at zero. */

.finale{
  padding:22px 20px 20px;border-radius:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,#4a3720,transparent 70%),linear-gradient(160deg,#241a12,#1a1410);
  border:1px solid #5a452c;box-shadow:0 16px 40px #00000055;
}
.finale-crown{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle,#6a5433,#2a2016);border:1px solid #8a7048;color:var(--gold-light)}
.finale-crown .icon{width:28px;height:28px}
.finale .eyebrow{color:var(--gold);margin-bottom:8px}
.finale h2{font:600 clamp(30px,9vw,40px)/1 var(--display);letter-spacing:-.3px;margin-bottom:6px;text-transform:uppercase}
.finale>p{font-size:12px;color:var(--muted);margin-bottom:16px}
.finale-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.finale-stats div{background:#ffffff08;border:1px solid #3a2e21;border-radius:14px;padding:11px 4px}
.finale-stats b{display:block;font:600 24px/1 var(--display)}
.finale-stats small{display:block;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.finale .btn{margin-bottom:8px}
.prize-winner{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 12px;
  font-size:11px;color:var(--gold);letter-spacing:.3px}
.prize-winner .icon{width:14px;height:14px}
.prize.on-finale{margin:0;text-align:left}
.result-list{list-style:none;margin:6px 0 0;padding:0}
.result-list li{display:flex;align-items:center;gap:11px;padding:11px 8px;border-bottom:1px solid #2a2016}
.result-list li:last-child{border-bottom:0}
.result-list li.me{background:#2c2317;border-radius:12px}
.result-list .avatar{width:36px;height:36px;font-size:17px}
.result-rank{width:26px;font:600 17px/1 var(--display);color:var(--gold);flex-shrink:0}
.result-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
.result-name small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.result-steps{font-size:12px;white-space:nowrap}

/* ------------------------------------------------------------------ tour ---
 * One element does both jobs: the hole is the spotlight, and its enormous
 * shadow is the scrim. Moving the hole animates the whole thing. */

.tour{position:fixed;inset:0;z-index:210}
.tour-hole{
  position:fixed;top:50%;left:50%;width:0;height:0;border-radius:20px;
  box-shadow:0 0 0 9999px #080604e6;
  transition:top .45s var(--ease),left .45s var(--ease),width .45s var(--ease),height .45s var(--ease),border-radius .45s var(--ease);
  pointer-events:none;
}
.tour-hole.on{box-shadow:0 0 0 9999px #080604e6, 0 0 0 2px #c7a56fcc, 0 0 30px #c7a56f4d;animation:tour-pulse 2.4s ease-in-out infinite}
.tour-card{
  position:fixed;left:16px;right:16px;max-width:400px;margin:0 auto;
  background:linear-gradient(150deg,#241a13,#1a1410);border:1px solid #4a3a28;border-radius:20px;
  padding:18px 18px 14px;box-shadow:0 18px 50px #00000066;animation:tour-in .35s var(--ease);
}
.tour-card h2{font:600 26px/1.05 var(--display);margin:6px 0 7px;letter-spacing:-.2px}
.tour-card p{font-size:12.5px;line-height:1.65;color:var(--muted)}
.tour-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.tour-actions .text-button{color:var(--muted);flex-shrink:0}
.tour-actions .btn{min-height:46px;width:auto;flex:1;padding:12px 22px}
.tour-dots{display:flex;justify-content:center;gap:5px;margin-top:12px;height:5px}
.tour-dots i{width:5px;height:5px;border-radius:50%;background:#4a3f31}
.tour-dots i.on{background:var(--gold);width:14px;border-radius:3px}

/* ------------------------------------------------------------- info boxes -- */

.info-box{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;margin:12px 0;
  background:#1f1812;border:1px solid #3a2e21;border-radius:14px}
.info-box>.icon{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:1px}
.info-box b{display:block;font-size:11.5px;margin-bottom:3px}
.info-box span{display:block;font-size:11px;line-height:1.6;color:var(--muted)}
.how-list{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px}
.how-row{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #2e2419}
.how-row:last-child{border-bottom:0}
.how-row .icon{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:1px}
.how-row b{display:block;font-size:12px;margin-bottom:3px}
.how-row small{display:block;font-size:11px;line-height:1.65;color:var(--muted)}

/* ------------------------------------------------------------- keyframes -- */

@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes view-left{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes view-right{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes sheet-in{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes cel-in{0%{opacity:0;transform:scale(.86) translateY(24px)}100%{opacity:1;transform:none}}
@keyframes emblem-in{0%{transform:scale(.4) rotate(-25deg);opacity:0}70%{transform:scale(1.09) rotate(4deg)}100%{transform:none;opacity:1}}
@keyframes badge-pop{0%{transform:scale(.5) rotate(-12deg)}70%{transform:scale(1.1) rotate(3deg)}100%{transform:none}}
@keyframes chip-in{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes card-pop{0%{transform:scale(1)}35%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes stat-bump{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes toast-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
@keyframes sweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@keyframes ticket-sweep{0%{transform:translateX(-100%)}65%,100%{transform:translateX(100%)}}
@keyframes ticket-grain{0%,100%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-1px,2px)}75%{transform:translate(1px,1px)}}
@keyframes ticket-loading{to{transform:scale(.78);opacity:.45}}
@keyframes ticket-backdrop{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@keyframes ticket-issue{0%{opacity:.2;transform:translate(var(--ticket-x),var(--ticket-y)) scale(var(--ticket-scale)) rotate(-2deg)}22%{opacity:1;transform:translate(0) scale(1.035) rotate(1deg)}34%,76%{opacity:1;transform:translate(0) scale(1) rotate(0)}100%{opacity:0;transform:translateY(-18px) scale(.96)}}
@keyframes ticket-tear{0%,18%{transform:none}42%{transform:translateX(17px) rotate(5deg)}58%{transform:translateX(12px) rotate(3deg)}76%,100%{transform:none}}
@keyframes ticket-caption{0%{opacity:0;transform:translateY(8px)}24%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
@keyframes rays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tile-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes nav-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes tour-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tour-pulse{0%,100%{box-shadow:0 0 0 9999px #080604e6,0 0 0 2px #c7a56f99,0 0 26px #c7a56f33}50%{box-shadow:0 0 0 9999px #080604e6,0 0 0 3px #c7a56fee,0 0 36px #c7a56f5c}}
@keyframes gate-breathe{0%,100%{stroke-dashoffset:300}50%{stroke-dashoffset:96}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

.view{animation:view-in .35s var(--ease)}
.view.from-right{animation:view-left .32s var(--ease)}
.view.from-left{animation:view-right .32s var(--ease)}

/* --------------------------------------------------------- crew engagement -- */
.engagement-card{padding:20px;margin:16px 0;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.engagement-card h2{font:600 27px/1.1 var(--display);margin:8px 0 10px;overflow-wrap:anywhere}
.engagement-card p{font-size:12px;color:var(--muted);line-height:1.65}
.engagement-card p.micro{font-size:10px}
.engagement-card .text-button{min-height:44px;white-space:normal;text-align:left}
.comeback-card{background:linear-gradient(135deg,#35271a,var(--card));border-color:#725936}
.comeback-progress{display:flex;gap:8px;margin:16px 0 4px}
.comeback-progress>span{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:12px 4px;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.comeback-progress>span.done{background:#c7a56f18;border-color:var(--gold-deep);color:var(--gold-light)}
.comeback-progress small{font-size:11px}
.comeback-progress .icon{width:16px;height:16px}
.activity-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.activity-row{display:flex;align-items:center;gap:10px;padding:14px 12px}
.activity-person{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;color:inherit}
.activity-row+.activity-row{border-top:1px solid var(--line)}
.activity-row .avatar{width:38px;height:38px;font-size:18px}
.activity-copy{flex:1;min-width:0;overflow-wrap:anywhere}
.activity-copy>b{font-size:12px}
.activity-copy p{font-size:11px;line-height:1.5;color:var(--text);margin:2px 0}
.activity-copy small{font-size:9px;color:var(--muted)}
.cheer-button,.own-cheers{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px;min-width:56px;min-height:44px;border-radius:22px;font-size:12px;font-variant-numeric:tabular-nums}
.cheer-button{border:1px solid var(--line);background:var(--card)}
.cheer-button[aria-pressed=true]{background:#c7a56f22;border-color:var(--gold);color:var(--gold-light)}
.cheer-button>span:first-child,.own-cheers>span{font-size:19px}
.own-cheers{color:var(--muted)}
.engagement-empty{font-size:12px;color:var(--muted);line-height:1.7;padding:18px}
#activityMore{min-height:44px;display:block;margin:0 auto}
.recognition-tabs{display:flex;gap:6px;margin:-4px 0 8px}
.recognition-tabs button{min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:22px;color:var(--muted);font-size:11px}
.recognition-tabs button[aria-pressed=true]{color:var(--gold-light);border-color:var(--gold-deep);background:#c7a56f12}
.recognition-list{display:grid;gap:7px;margin:10px 0 24px}
.recognition-card{display:flex;align-items:center;gap:11px;padding:13px 14px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0}
.recognition-card>.icon:first-child{color:var(--gold);width:23px;height:23px}
.recognition-card>span:first-of-type{flex:1;min-width:0}
.recognition-card b{display:block;font-size:12px}
.recognition-card small{display:block;font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.recognition-count{color:var(--gold-light);font:600 23px var(--display)}
.recognition-card>.icon:last-child{width:14px;height:14px;color:var(--muted)}
.recognition-people{list-style:none;padding:0;margin:16px 0}
.recognition-people li{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.recognition-people b{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
.recognition-people li>span:last-child{font-size:11px;color:var(--muted)}
.inline-profile{display:inline;color:inherit;font:inherit;text-transform:inherit;text-decoration:underline;text-decoration-color:#c7a56f66;text-underline-offset:3px}

.other-profile-head{display:flex;align-items:center;gap:18px;padding:5px 0 24px}
.other-profile-avatar .avatar{width:104px;height:104px;font-size:44px}
.other-profile-head h3{font:600 32px/1 var(--display);overflow-wrap:anywhere}
.other-profile-head p{font-size:11px;color:var(--gold);margin-top:7px}
.other-profile .section-heading{margin-top:22px}
.other-profile-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.other-profile-badge{display:flex;align-items:center;flex-direction:column;min-width:0;padding:13px 5px;border:1px solid #3a3027;border-radius:16px;background:#211b16}
.other-profile-badge b{font-size:9px;font-weight:500;line-height:1.3;text-align:center;margin-top:8px}
.other-profile-badges .empty{grid-column:1/-1}
/* Bleibt: die Datumszeile der Karten unter „Termine". Die uebrigen
   .next-season-Regeln gehoerten zur Karte auf der Startseite, die es seit
   v0.40.0 nicht mehr gibt. */
.next-season-date{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#nextSeasonCancel{display:block;margin:2px auto 0;color:var(--muted);text-align:center}

/* ------------------------------------------------------------ breakpoints -- */

@media(min-width:650px){
  body{padding:28px 0;background:radial-gradient(ellipse at 50% 20%,#32281f,#0a0807 65%);background-attachment:fixed}
  .app-shell{border:1px solid #45372966;border-radius:32px;background:#18130f;box-shadow:0 25px 100px #0007;min-height:calc(100dvh - 56px);overflow:clip}
  .app-header{height:84px}
  .app-header.scrolled{height:64px}
  .view{padding:10px 26px calc(24px + var(--nav-h))}
  .hero-card{padding:19px 23px 20px}
  .sheet{bottom:24px;border-bottom:1px solid #574736;border-radius:25px}
  .bottom-nav{bottom:24px}
  .gate-hero h1{font-size:56px}
  #gate{padding:0 28px 28px}
}
@media(max-width:360px){
  .brand-logo{max-width:119px}
  .brand-logo img{height:22px}
  .app-header.scrolled .brand-logo{max-width:34px}
  .app-header{padding-left:18px;padding-right:18px}
  .view{padding-left:15px;padding-right:15px}
  .hero-card{padding-left:14px;padding-right:14px}
  .badge-grid{gap:6px}
  .badge-tile b{font-size:8px}
  .profile-hero{gap:12px;padding:14px}
  .profile-hero-avatar{width:106px}
  .week-day .day-circle{width:30px;height:30px}
  .season-pill{font-size:8px}
  .mission{gap:9px}
  .mission-reward{font-size:9px}
  .keypad button{height:48px}
  .avatar-grid{grid-template-columns:repeat(6,1fr)}
  .admission-ticket{grid-template-columns:minmax(0,1fr) 70px}
  .admission-copy{padding-left:14px}
  .admission-copy strong{font-size:21px}
  .issued-ticket{grid-template-columns:minmax(0,1fr) 70px}
  .issued-ticket-main{padding:18px 17px 17px}
  .issued-kicker{top:17px;left:17px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .particles{display:none}
}

/* ------------------------------------------------------------- avatars ---- */
/* A photo fills the same circle the emoji sits in, so nothing reflows when
   somebody uploads one. object-fit keeps a non-square source from stretching. */
.avatar.photo{padding:0;overflow:hidden;background:var(--surface)}
.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
#profileBtn.has-photo{padding:0;overflow:hidden}
/* Wie beim Listen-Avatar: nur mit Ring darf der Kreis ueber seinen Rand malen. */
#profileBtn.has-photo.has-ts{overflow:visible}
#profileBtn.has-photo.has-ts img{border-radius:50%}
#profileBtn.has-ts{--ts:15px}
#profileBtn.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.avatar-upload{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.avatar-upload .text-button{min-height:44px}
#avatarRemove{color:var(--muted)}


/* ------------------------------------------------- Super-Challenge -- */
/* Die persönliche Challenge vom Coach. Sie steht oben im Profil, weil sie für
   die Dauer ihres Zeitraums das Wichtigste ist, was diese Person hier hat. */
.super-card{
  background:linear-gradient(160deg,#20301f,#1b1611 62%);
  border:1px solid #4d785340;border-radius:20px;padding:16px 16px 14px;margin:0 0 14px;
}
.super-card.is-done{background:linear-gradient(160deg,#2b2517,#1b1611 62%);border-color:#c7a56f4d}
.super-card.is-lost{background:linear-gradient(160deg,#2c1e19,#1b1611 62%);border-color:#d97a5f3d}
.super-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:2px}
.super-head .eyebrow{color:var(--hit)}
.super-card.is-done .super-head .eyebrow{color:var(--gold-light)}
.super-card.is-lost .super-head .eyebrow{color:var(--error)}
.super-title{font:700 19px/1.15 var(--display);letter-spacing:.4px;text-transform:uppercase;margin:0 0 8px}
.super-figures{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.super-percent{font:800 34px/1 var(--display);color:var(--text)}
.super-sub{color:var(--muted);font-size:12px;line-height:1.45}
.super-meter{height:6px;border-radius:99px;background:#0000004d;overflow:hidden;margin-bottom:14px}
.super-meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--hit-deep),var(--hit));transition:width .7s var(--ease)}
.super-card.is-done .super-meter i{background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.super-card.is-lost .super-meter i{background:linear-gradient(90deg,#8c4a3a,var(--error))}

/* Das Diagramm. Jede Säule ist ein Tag, die gestrichelte Linie das Tagesziel. */
.super-chart{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.super-cols{position:relative;display:flex;gap:3px;min-width:100%;width:max-content}
.super-col{flex:1 0 auto;min-width:13px;display:grid;grid-template-rows:var(--plot) auto;gap:5px;justify-items:center}
.super-track{width:100%;display:flex;align-items:flex-end}
.super-track i{display:block;width:100%;border-radius:4px 4px 2px 2px;height:var(--h);min-height:3px;
  animation:superGrow .6s var(--ease) both}
@keyframes superGrow{from{height:0}}
.super-col.hit    i{background:linear-gradient(180deg,var(--hit),var(--hit-deep))}
.super-col.miss   i{background:linear-gradient(180deg,var(--error),#8c4a3a)}
.super-col.open   i{background:#3a3126;border:1px dashed #6b5a44}
.super-col.future i{background:#2a231b}
.super-col small{font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.super-col.today small{color:var(--gold-light);font-weight:700}
/* Die Ziellinie liegt über den Säulen und scrollt mit ihnen. */
.super-goal-line{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--gold);
  opacity:.75;pointer-events:none}
.super-goal-label{display:flex;justify-content:space-between;align-items:baseline;
  margin:8px 0 4px;color:var(--muted);font-size:9px;letter-spacing:1.4px;text-transform:uppercase}
.super-goal-label b{color:var(--gold-light);font-size:11px;letter-spacing:.6px}
.super-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:10px}
.super-legend span{display:inline-flex;align-items:center;gap:5px}
.super-legend i{width:9px;height:9px;border-radius:3px;display:block}
@media (prefers-reduced-motion: reduce){
  .super-track i{animation:none}
  .super-meter i{transition:none}
}

/* Die Trophäe für bestandene persönliche Challenges. */
.super-trophy{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 15px;
  border-radius:18px;background:linear-gradient(160deg,#2b2517,#1b1611 70%);border:1px solid #c7a56f40}
.super-trophy .trophy-mark{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(145deg,var(--gold-light),var(--gold-deep));color:#1b1304}
.super-trophy .trophy-mark .icon{width:24px;height:24px}
.super-trophy b{display:block;font:700 15px/1.2 var(--display);letter-spacing:.5px;text-transform:uppercase}
.super-trophy span{color:var(--muted);font-size:11.5px}

/* ------------------------------------------------- Saison-Countdown --- */

.season-clock{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;margin-bottom:14px;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);
}
.season-clock .icon{width:14px;height:14px;flex:none}
/* Die letzten Tage einer Saison und das Korrekturfenster sind die beiden
   Momente, in denen die Zeile wirklich drängt. Dann Gold statt Grau. */
.season-clock.eng{color:var(--gold-light);border-color:var(--gold-deep)}
.season-clock:disabled{cursor:default}
.season-clock:not(:disabled){cursor:pointer}
.season-clock:not(:disabled):hover{border-color:var(--gold-deep);color:var(--gold-light)}

/* ------------------------------------- Countdown unter dem Podium --- */

.board-countdown{
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:8px;margin:2px 0 18px;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  text-align:center;
}
.board-countdown b{
  font-size:30px;font-weight:700;line-height:1;color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.board-countdown .bc-unit{
  font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);
}
/* Die Unterzeile bekommt die volle Breite, damit sie nicht neben der Zahl
   klebt und bei „Schlag den Coach startet in 2 Tagen" sauber umbricht. */
.board-countdown small{
  flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.5;
}
.board-countdown.eng{border-color:var(--gold-deep)}
.board-countdown.eng .bc-unit{color:var(--gold)}

/* Countdown auf den Terminkarten. Die erste Karte nutzt .board-countdown
   mit, damit „Tage bis zum Start" und „Tage bis zum Ende" gleich aussehen. */
.upcoming-when .board-countdown{margin:10px 0 0}
.upcoming-countdown{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);
}
.upcoming-countdown .icon{width:13px;height:13px;flex:none}

/* ------------------------------------------- Endstand einer Saison --- */

.board-final{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;padding:12px 14px;
  background:var(--card);border:1px solid var(--gold-deep);border-radius:12px;
}
.board-final .icon{width:16px;height:16px;color:var(--gold);flex:none}
.board-final span{display:flex;flex-direction:column;gap:2px;min-width:0}
.board-final b{
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-light);
}
.board-final small{font-size:11px;color:var(--muted);line-height:1.5}

/* Der Sieger einer abgeschlossenen Saison. Solange sie läuft, bleibt die
   Krone allein: ein „Sieger" über einem Zwischenstand wäre gelogen. */
.podium-champion{
  display:block;margin-top:4px;
  font-size:9px;font-weight:700;letter-spacing:2px;
  color:var(--ink);background:var(--gold);
  padding:2px 7px;border-radius:99px;
}
.podium.final .podium-person.champion .podium-block{
  background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
  color:var(--ink);
}

/* Im Korrekturfenster steht das Ergebnis noch nicht fest. Der Kasten ist
   deshalb da, aber zurückhaltend: kein Gold, das wäre ein Versprechen. */
.board-final.vorlaeufig{border-color:var(--line)}
.board-final.vorlaeufig b{color:var(--text)}
.board-final.vorlaeufig .icon{color:var(--muted)}

/* Einstieg im Profil */
.leitung-entry{display:flex;align-items:center;gap:12px;width:100%;margin:18px 0 6px;padding:14px 15px;border-radius:16px;text-align:left;
  border:1px solid var(--gold);background:linear-gradient(135deg,#c7a56f1f,#c7a56f08);color:var(--text)}
.leitung-entry>.icon:first-child{width:22px;height:22px;color:var(--gold-light)}
.leitung-entry span{flex:1}
.leitung-entry b{display:block;font:700 17px/1.1 var(--display);letter-spacing:.4px;text-transform:uppercase;color:var(--gold-light)}
.leitung-entry small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.leitung-entry>.icon:last-child{width:16px;height:16px;color:var(--gold)}

/* Nur in der nativen App: Schritte aus Health Connect / Apple Health übernehmen. */
.health-import{display:flex;align-items:center;gap:11px;flex:1;min-width:0;margin:0;padding:11px 14px;border-radius:14px;text-align:left;
  border:1px solid var(--line);background:#ffffff08;color:var(--text);transition:border-color .3s,background .3s}
.health-import>.icon:first-child{width:20px;height:20px;color:var(--muted);flex-shrink:0;transition:color .3s}
/* Grün erst, wenn die Verbindung steht (markHealthLinked in app.js). */
.health-import[data-linked=true]{border-color:#6d9e7277;background:#6d9e7214}
.health-import[data-linked=true]>.icon{color:var(--hit)!important}
.health-home{display:flex;align-items:center;gap:11px;width:100%;margin-top:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;text-align:left}
.health-home>.icon:first-child{width:20px;height:20px;color:#e0607e;flex-shrink:0}
.health-home>span:nth-child(2){flex:1;min-width:0}
.health-home b{display:block;font-size:13px;font-weight:600}
.health-home small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.health-home>.icon:last-child{width:16px;height:16px;color:var(--muted)}
.health-home:disabled{opacity:.6}
.store-update{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 16px;padding:14px;border-radius:16px;border:1px solid #c7a56f55;background:linear-gradient(135deg,#c7a56f1f,#ffffff06)}
.store-update>.icon{width:22px;height:22px;color:var(--gold-light);flex-shrink:0}
.store-update>div{flex:1;min-width:0}
.store-update b{display:block;font-size:14px;font-weight:600}
.store-update small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.store-update .btn{flex:1 1 100%;min-height:46px}
.store-update .store-update-links{display:flex;justify-content:space-between;gap:12px;flex:1 1 100%}
.health-row{display:flex;align-items:stretch;gap:8px;margin:12px 0 2px}
.health-info{flex:0 0 48px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#ffffff08;color:var(--muted)}
.health-info .icon{width:18px;height:18px}
.health-import span{flex:1;min-width:0}
.health-import b{display:block;font-size:13px;font-weight:600}
.health-import small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.health-import>.icon:last-child{width:16px;height:16px;color:var(--muted)}
.health-import:disabled{opacity:.6}

/* Nutzungsbedingungen beim Mitmachen und für bestehende Konten */
.terms-check{display:flex;align-items:flex-start;gap:9px;margin:12px 2px 2px;font-size:11px;line-height:1.5;color:var(--muted);cursor:pointer;
  border-radius:10px;transition:background .3s}
.terms-check input{width:18px;height:18px;min-height:18px;flex:0 0 18px;accent-color:var(--gold);margin:0}
.terms-check a{color:var(--gold-light)}
/* Gewinnt gegen `.auth-panel label{display:block}`, sonst fehlt der Abstand und
   das Kästchen liegt über dem ersten Buchstaben. */
.auth-panel .terms-check{display:flex}
.terms-check.attention{background:#d97a5f22;box-shadow:0 0 0 1px #d97a5f88}
.terms-ask p{font-size:13px;line-height:1.6;color:var(--text);margin-bottom:10px}
.terms-ask .btn,.terms-accept-bottom{margin-top:16px}

/* Melden im Profil einer anderen Person */
.report-link{display:flex;margin:22px auto 4px;color:var(--muted)}
.report-link .icon{color:var(--muted)}
.report-form .micro{margin-bottom:14px}
.report-kinds{display:grid;gap:8px;margin-bottom:14px}
.report-kinds label{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--text);cursor:pointer}
.report-kinds input{accent-color:var(--gold);width:18px;height:18px;margin:0}
.report-kinds label:has(input:checked){border-color:var(--gold);background:#c7a56f12}
.report-form textarea{width:100%;margin:6px 0 12px;padding:11px 13px;border-radius:12px;background:#ffffff08;border:1px solid var(--line);color:var(--text);font:inherit;font-size:13px;resize:vertical}
.report-thanks{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6}
.report-thanks .icon{width:22px;height:22px;color:var(--hit);flex-shrink:0}
a.setting-row{color:inherit;text-decoration:none}

/* Einwilligung vor der ersten Übernahme aus Health Connect (im Eintragsblatt). */
.health-consent{margin:12px 0;padding:14px;border:1px solid var(--gold);border-radius:16px;background:linear-gradient(135deg,#2a1f14,transparent 70%)}
.health-consent b{display:block;font-size:14px;margin-bottom:6px}
.health-consent p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.health-consent .btn{margin-top:12px;width:100%}

/* Ziehen zum Aktualisieren (nur in der App, public/app.js). */
.pull-refresh{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 8px);z-index:60;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface,#1f1812);border:1px solid var(--line,#372c1f);color:var(--gold);
  transform:translate(-50%,-60px);opacity:0;pointer-events:none;transition:opacity .15s}
.pull-refresh svg{width:18px;height:18px}
.pull-refresh.ready{border-color:var(--gold)}
.pull-refresh.spinning{opacity:1;transform:translate(-50%,24px);transition:transform .2s}
.pull-refresh.spinning svg{animation:pull-spin .8s linear infinite}
@keyframes pull-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pull-refresh.spinning svg{animation:none}}

/* Kleine Bewegungen (v0.95.0). Alle aus bei „Bewegung reduzieren“. */
/* Tastenfeld und Health Connect: die Zahl hüpft kurz mit jeder Ziffer. */
#stepsInput.bump{animation:entry-bump .22s var(--pop)}
@keyframes entry-bump{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
/* Reiter unten: das Symbol des gewählten Reiters federt einmal. */
.bottom-nav button[aria-current=page] .icon{animation:nav-spring .42s var(--pop)}
@keyframes nav-spring{0%{transform:scale(.82)}55%{transform:translateY(-2px) scale(1.16)}100%{transform:translateY(-1px) scale(1.08)}}
/* Serie ab drei Tagen: die Flamme flackert leise. */
#streakBtn.on-fire .icon{animation:flame-flicker 2.4s ease-in-out infinite;transform-origin:50% 90%;color:var(--gold-light)}
@keyframes flame-flicker{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.08,1.12) rotate(-3deg)}45%{transform:scale(.97,1.02) rotate(2deg)}70%{transform:scale(1.05,1.09) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){
  #stepsInput.bump,.bottom-nav button[aria-current=page] .icon,#streakBtn.on-fire .icon{animation:none}
}

/* Anleitung „So kommen deine Schritte in Health Connect“: eigenes Fenster
   (showHealthGuide in app.js) über dem Eintragsblatt. */
.info-pop{width:min(440px,calc(100vw - 32px));max-height:min(86dvh,760px);margin:auto;padding:18px 18px 16px;border:1px solid var(--line);
  border-radius:22px;background:var(--card);color:var(--text);overflow:auto;animation:info-pop-in .28s var(--pop)}
.info-pop::backdrop{background:#070503c4;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.info-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.info-pop-head h2{font-size:16px;line-height:1.3;font-weight:600}
.info-pop p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.info-pop .btn{width:100%;margin-top:4px}
@keyframes info-pop-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.info-pop{animation:none}}
.health-help-steps{list-style:none;counter-reset:hh;margin:12px 0;padding:0;display:grid;gap:10px}
.health-help-steps li{counter-increment:hh;position:relative;padding-left:32px;font-size:12.5px;line-height:1.5}
.health-help-steps li::before{content:counter(hh);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:700 12px var(--display);color:var(--ink);background:var(--gold)}
.health-help-steps b{display:block;color:var(--text)}
.health-help-steps span{color:var(--muted)}
.health-help-note{margin-top:10px;font-size:11.5px!important}

/* Anmelden mit Fingerabdruck (nur App): über dem Formular, deutlich, aber nicht golden. */
.bio-login{margin:4px 0 14px;background:#ffffff08;border:1px solid var(--gold);color:var(--text);box-shadow:none}
.bio-login .icon{width:20px;height:20px;color:var(--gold)}

/* Das quadratische Gewinnmotiv bleibt mit Titel und Preisen vollständig sichtbar. */
.upcoming-banner.gipfelrennen-prize-image,.prize-banner-image.gipfelrennen-prize-image{aspect-ratio:1/1;object-fit:contain}