/* ═══════════════════════════════════════════════════════════
   TOKENS — identisch zu den Farben aus der App
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#121212;
  --surface:#1E1E1E;
  --surface-2:#252525;
  --line:#2E2E2E;
  --teal:#1D9E75;
  --teal-deep:#00796B;
  --text:#FFFFFF;
  --muted:#AAAAAA;
  --gold:#FFD700;

  --bar:56px;

  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Roboto',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════ */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:0 16px;
  background:var(--teal-deep);
}
.iconbtn{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:20px;line-height:1;
  transition:background .15s ease;
}
.iconbtn:hover{background:rgba(255,255,255,.14)}
.brand{
  font-family:var(--display);
  font-size:23px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  margin-right:auto;
}
.brand span{color:#B9F0DA}

.langtoggle{display:flex;border:1px solid rgba(255,255,255,.35);border-radius:3px;overflow:hidden}
.langtoggle button{
  padding:3px 9px;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.65);transition:background .15s ease,color .15s ease;
}
.langtoggle button[aria-pressed="true"]{background:#fff;color:var(--teal-deep)}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT POPUP  (popup_menu_layout.xml)
   ═══════════════════════════════════════════════════════════ */
.popup{
  position:fixed;top:calc(var(--bar) + 6px);right:16px;z-index:60;
  width:210px;padding:8px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 12px 32px rgba(0,0,0,.6);
  display:none;
}
.popup.open{display:block}
.popup button{display:block;width:100%;text-align:left;padding:12px 16px;font-size:14.5px}
.popup button:hover{background:var(--surface-2)}
.popup hr{border:0;border-top:1px solid var(--line);margin:6px 16px}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.page{padding:var(--bar) 0 110px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* Hero */
.hero{padding:44px 0 32px}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(40px,9vw,72px);font-weight:700;
  line-height:.95;letter-spacing:.01em;text-transform:uppercase;
  margin:10px 0 12px;
}
.hero p{color:var(--muted);max-width:52ch;font-size:15.5px}

/* ═══════════════════════════════════════════════════════════
   ÜBUNG DES TAGES — zwei Karten (mit / ohne Stange)
   ═══════════════════════════════════════════════════════════ */
.dailygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:26px}

.daily{
  display:block;width:100%;text-align:left;
  padding:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  border-left:3px solid var(--teal);
  transition:border-color .16s ease,transform .16s ease;
}
.daily:hover{border-color:var(--teal);transform:translateY(-2px)}
.daily .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.daily .name{
  font-family:var(--display);font-size:30px;font-weight:600;
  text-transform:uppercase;line-height:1.1;margin:4px 0 8px;
}
.daily .meta{font-size:13px;color:var(--muted)}
.daily .live{
  display:none;font-family:var(--mono);font-size:12.5px;
  color:var(--gold);margin-top:10px;letter-spacing:.02em;
}
.daily .live.on{display:block}

.daily .go{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal);
}

/* Datumszeile */
.dateline{
  display:flex;align-items:center;gap:12px;margin-top:30px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.dateline .rule{flex:1;height:1px;background:var(--line)}

/* ═══════════════════════════════════════════════════════════
   MODI-RASTER — Navigation der Seite
   ═══════════════════════════════════════════════════════════ */
.sectionhead{display:flex;align-items:baseline;gap:14px;margin:48px 0 16px}
.sectionhead h2{
  font-family:var(--display);font-size:25px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;
}
.sectionhead .rule{flex:1;height:1px;background:var(--line)}
.sectionhead .count{font-family:var(--mono);font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mode{
  display:block;text-align:left;width:100%;
  padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  transition:border-color .16s ease,transform .16s ease;
}
.mode:hover{border-color:var(--teal);transform:translateY(-2px)}
.mode .idx{font-family:var(--mono);font-size:11px;color:var(--teal)}
.mode .t{
  font-family:var(--display);font-size:21px;font-weight:600;
  text-transform:uppercase;margin:6px 0 4px;line-height:1.15;
}
.mode .d{font-size:13px;color:var(--muted);line-height:1.45}

/* Statistik-Streifen */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  margin-top:48px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
}
.stat{background:var(--surface);padding:18px}
.stat .v{font-family:var(--mono);font-size:27px;line-height:1}
.stat .v.gold{color:var(--gold)}
.stat .v.teal{color:var(--teal)}
.stat .k{font-size:12px;color:var(--muted);margin-top:6px}

/* FAB */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:35;
  display:flex;align-items:center;gap:9px;
  padding:14px 20px;border-radius:28px;
  background:var(--gold);color:#1A1400;
  font-weight:700;font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .14s ease;
}
.fab:hover{transform:translateY(-2px)}

footer{
  margin-top:56px;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}

@media (min-width:1024px){
  .fab{right:32px;bottom:32px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}


/* ═══════════════════════════════════════════════════════════
   DETAILSEITE  (challenge.html)
   ═══════════════════════════════════════════════════════════ */
.back{
  display:inline-block;margin-top:26px;
  font-size:13.5px;color:var(--muted);
  transition:color .15s ease;
}
.back:hover{color:var(--teal)}

.exhead{padding:18px 0 8px}
.exhead h1{
  font-family:var(--display);
  font-size:clamp(34px,7vw,60px);font-weight:700;
  line-height:1;letter-spacing:.01em;text-transform:uppercase;
  margin:8px 0 10px;
}
.exintro{color:var(--muted);max-width:52ch;font-size:14.5px}
.exhead .dateline{margin-top:18px}

/* Reiter */
.tabs{display:flex;gap:0;margin:28px 0 0;border-bottom:1px solid var(--line)}
.tabs button{
  padding:12px 20px;font-size:14px;font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease,border-color .15s ease;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal)}

/* Rangliste */
.board{margin-top:4px}
.boardmsg{padding:44px 4px;color:var(--muted);font-size:14.5px;text-align:center}

.row{
  display:grid;grid-template-columns:52px 1fr auto;
  align-items:center;gap:14px;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
}
.row.top{background:rgba(29,158,117,.06)}
.row .rank{
  font-family:var(--mono);font-size:15px;color:var(--muted);
  text-align:center;
}
.row.top .rank{font-size:21px}
.row .dn{font-size:15px;font-weight:500}
.row .un{font-size:12.5px;color:var(--muted)}
.row .val{
  font-family:var(--mono);font-size:15.5px;color:var(--text);
  text-align:right;white-space:nowrap;
}
.row .val .sub{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Trainieren-Block */
.trainbox{
  margin-top:40px;padding:26px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  border-left:3px solid var(--gold);
}
.trainbox .t{
  font-family:var(--display);font-size:24px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;
}
.trainbox .s{color:var(--muted);font-size:14px;margin-top:4px}
.trainbox .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.trainbox .note{font-size:12.5px;color:var(--muted);margin-top:14px;max-width:56ch}

.btn{
  display:inline-block;
  padding:11px 22px;border-radius:3px;
  background:var(--teal);color:#00120B;
  font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:#27B686}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);
}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}


/* ═══════════════════════════════════════════════════════════
   COACH-SEITE  (coach.html)
   ═══════════════════════════════════════════════════════════ */
.wsub{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin-top:-2px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{
  padding:7px 15px;border-radius:3px;font-size:13px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--teal-deep);
  transition:background .15s ease;
}
.chip[aria-pressed="true"]{background:var(--teal-deep)}

.levels{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;margin-top:18px;
}
.wcard{
  padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  border-top:3px solid var(--teal);
  display:flex;flex-direction:column;
}
.whead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wlvl{
  font-family:var(--display);font-size:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}
.wtag{font-size:11.5px;color:var(--muted)}

.wfacts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.wfacts span{
  font-family:var(--mono);font-size:11px;
  padding:4px 9px;border-radius:3px;
  background:var(--surface-2);color:var(--muted);
}

.wex{list-style:none;margin:0 0 18px;flex:1}
.wex li{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line);
  font-size:14px;
}
.wex li:last-child{border-bottom:0}
.wex b{font-family:var(--mono);font-weight:500;color:var(--teal)}

.wstart{align-self:flex-start;cursor:pointer}

.trainbox{transition:border-color .2s ease}
.trainbox.on{border-left-color:var(--teal);box-shadow:0 0 0 1px var(--teal-deep)}

/* ═══════════════════════════════════════════════════════════
   LOGIN-DIALOG
   ═══════════════════════════════════════════════════════════ */
.authdialog{
  position:fixed;inset:0;z-index:80;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
}
.authdialog.on{display:flex}

.authcard{
  position:relative;
  width:100%;max-width:380px;
  padding:28px 26px 24px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.authclose{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;border-radius:50%;
  color:var(--muted);font-size:15px;
}
.authclose:hover{background:var(--surface-2);color:var(--text)}

.autht{
  font-family:var(--display);font-size:27px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
}
.auths{color:var(--muted);font-size:13.5px;margin:6px 0 20px}

.authlabel{
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:5px;
}
.authinput{
  width:100%;padding:11px 13px;margin-bottom:15px;
  background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:3px;
  font-family:var(--body);font-size:15px;
}
.authinput:focus{outline:none;border-color:var(--teal)}

.autherr{
  display:none;
  padding:10px 12px;margin-bottom:14px;
  background:rgba(255,82,82,.1);border-left:2px solid #FF5252;
  color:#FF8A80;font-size:13px;
}
.autherr.on{display:block}

.authsubmit{width:100%;text-align:center;cursor:pointer}
.authsubmit:disabled{opacity:.6;cursor:default}

.authlink{
  display:block;width:100%;margin-top:12px;
  color:var(--muted);font-size:13px;text-align:center;
}
.authlink:hover{color:var(--teal)}

.authnote{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   Footer & Rechtliches
   ═══════════════════════════════════════════════════════════════════════ */
.main-footer {
  text-align: center;
  padding: 30px 16px 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--teal);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #27B686;
  text-decoration: underline;
}

.footer-divider {
  color: var(--muted);
  font-size: 12px;
}

.footer-copy {
  color: var(--muted);
  font-size: 13px;
}