/* =============================================================================
 *  app.css  -  Stylesheet des WM-2026-Tippspiels (MultiKulti Shisha Lounge)
 *
 *  Neuer Look: Dark Sportsbook (bet365 / Tipico / Sofascore-Feeling),
 *  MOBIL-FIRST mit fixierter Bottom-Tab-Bar. Gold als Markenakzent,
 *  warmes Rot/Orange nur fuer Live. Nutzt die Tokens aus tokens.css.
 *
 *  Aufbau:
 *    1.  Reset & Basis
 *    2.  Layout-Helfer (Container, Section, App-Spalte)
 *    3.  Typografie
 *    4.  Header (kompakt mobil / Top-Nav Desktop)
 *    5.  Bottom-Tab-Bar (mobil)
 *    6.  Footer
 *    7.  Buttons
 *    8.  Cards
 *    9.  Formulare & Inputs
 *   10.  Flash-Meldungen & Fehler
 *   11.  Chips / Badges / Pills
 *   12.  Hero & Startseite
 *   13.  Match-Karten (Tippen)
 *   14.  Champion-Box
 *   15.  Live-Karten & Grid
 *   16.  Tabellen / Bestenliste
 *   17.  Admin
 *   18.  Responsive Breakpoints
 * ========================================================================== */

/* ------------------------------------------------------------------ 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.55;
  font-weight:400;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* Platz fuer fixierten Header oben + Bottom-Tab-Bar unten (mobil) */
  padding-top:56px;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:rgba(201,169,98,.15);
  overflow-x:hidden;
}
a{color:var(--gold-primary);text-decoration:none;transition:color var(--transition-base)}
a:hover{color:var(--gold-light)}
img{max-width:100%;display:block}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold-primary);outline-offset:2px}
::selection{background:rgba(201,169,98,.3);color:#fff}

/* --------------------------------------------------------- 2. Layout-Helfer */
/* schmale "App-Spalte" fuer den Wett-Slip-Charakter */
.container{max-width:820px;margin:0 auto;padding:0 14px;width:100%}
main{flex:1 0 auto;width:100%}
.section{padding:22px 0}
.section + .section{padding-top:4px}
.section-title{
  font-family:var(--font-heading);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:16px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  line-height:1.2;
}
.section-title::before{
  content:"";flex:0 0 auto;
  width:4px;height:1.05em;border-radius:3px;
  background:var(--gold-primary);
}
.text-muted{color:var(--text-muted)}
.text-center{text-align:center}
.gold{color:var(--gold-primary)}
.accent-script{font-family:var(--font-accent)}
.empty-hint{
  color:var(--text-muted);
  padding:24px 18px;
  text-align:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--bg-card);
  font-size:.92rem;
}

/* ----------------------------------------------------------- 3. Typografie */
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;letter-spacing:.02em;line-height:1.2}
h1{font-size:1.7rem}
h2{font-size:1.3rem}
h3{font-size:1.1rem;font-weight:500}
p{margin-bottom:.85rem}
p:last-child{margin-bottom:0}
/* alle Zahlen/Scores/Tabellen mit gleichbreiten Ziffern */
.tip-score,.final-score,.live-score,.rule-points,.points-pill,
.total-cell,.when,.countdown,table.board td.num,table.board th.num,
.rank-badge,.code-badge,.score-big{font-variant-numeric:tabular-nums}

/* -------------------------------------------- 4. Header (kompakt / Top-Nav) */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:56px;
  background:var(--bg-overlay);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-subtle);
}
.site-header .container{
  height:100%;max-width:1100px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--text-primary);white-space:nowrap;min-width:0;
}
.brand:hover{color:var(--text-primary)}
.brand .brand-logo{height:34px;width:auto;display:block;transition:opacity var(--transition-base)}
.brand:hover .brand-logo{opacity:.85}
.brand .brand-claim{
  font-family:var(--font-heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;color:var(--text-muted);
  padding-left:12px;border-left:1px solid var(--border-gold);line-height:1.1;
}

/* Desktop-Navigation (mobil ausgeblendet) */
.main-nav{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  position:relative;display:inline-block;padding:8px 13px;
  color:var(--text-secondary);
  font-family:var(--font-heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;
  border-radius:var(--radius-sm);
  transition:color var(--transition-base),background var(--transition-base);
}
.nav-links a:hover{color:var(--text-primary);background:var(--border-subtle)}
.nav-links a.is-active{color:var(--gold-primary)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--gold-primary);border-radius:2px;
}
.nav-user{display:flex;align-items:center;gap:8px}
.nav-user .nick{color:var(--gold-light);font-weight:500;font-size:.82rem}
.linklike-btn{
  background:none;border:none;cursor:pointer;color:var(--text-secondary);
  font-family:var(--font-heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;
  padding:8px 13px;border-radius:var(--radius-sm);
  transition:color var(--transition-base),background var(--transition-base);
}
.linklike-btn:hover{color:var(--text-primary);background:var(--border-subtle)}

/* mobiler Kopf-Slot rechts (Nickname / Anmelden) */
.header-mobile-user{display:none;align-items:center}
.nick-chip{
  display:inline-flex;align-items:center;max-width:42vw;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(201,169,98,.1);border:1px solid var(--border-gold);
  color:var(--gold-light);font-weight:500;font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-login{
  display:inline-flex;align-items:center;min-height:36px;padding:0 16px;
  border-radius:var(--radius-pill);background:var(--gold-primary);
  color:var(--bg-primary);font-family:var(--font-heading);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;
}
.header-login:hover{background:var(--gold-light);color:var(--bg-primary)}

/* ------------------------------------------------- 5. Bottom-Tab-Bar (mobil) */
.tabbar{display:none}
@media (max-width:768px){
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--bg-overlay);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid var(--border-light);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 24px rgba(0,0,0,.45);
  }
  .tab-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:60px;padding:7px 2px 6px;
    color:var(--text-muted);
    font-family:var(--font-heading);font-weight:500;
    text-transform:uppercase;letter-spacing:.03em;
    transition:color var(--transition-base);
  }
  .tab-item:hover{color:var(--text-secondary)}
  .tab-item.is-active{color:var(--gold-primary)}
  .tab-ico{display:block;width:23px;height:23px}
  .tab-ico-wrap{position:relative;display:inline-flex}
  .tab-label{font-size:.62rem;line-height:1}
  /* aktiver Tab: feine Gold-Kappe oben */
  .tab-item.is-active{position:relative}
  .tab-item.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--gold-primary);
  }
  /* Live-Punkt am Live-Tab */
  .tab-live-dot{position:absolute;top:-2px;right:-5px;width:8px;height:8px}
}

/* ------------------------------------------------------------- 6. Footer */
.site-footer{
  flex-shrink:0;background:var(--bg-primary);
  border-top:1px solid var(--border-subtle);
  padding:24px 0;margin-top:24px;
  color:var(--text-muted);font-size:.82rem;
}
.site-footer .container{
  max-width:1100px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-note{width:100%;color:var(--text-subtle);font-size:.78rem;margin-top:6px}

/* ------------------------------------------------------------- 7. Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  background:var(--gold-primary);color:var(--bg-primary);
  font-family:var(--font-heading);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  border:1px solid var(--gold-primary);border-radius:var(--radius-sm);
  cursor:pointer;text-align:center;
  transition:transform var(--transition-base),box-shadow var(--transition-base),background var(--transition-base),border-color var(--transition-base);
}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--bg-primary);box-shadow:var(--shadow-gold)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-outline{background:transparent;color:var(--gold-primary);border:1px solid var(--border-gold);box-shadow:none}
.btn-outline:hover{background:rgba(201,169,98,.1);border-color:var(--gold-primary);color:var(--gold-light);box-shadow:none}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:42px;padding:0 18px;font-size:.78rem;letter-spacing:.05em}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------- 8. Cards */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.card + .card{margin-top:14px}
.card-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card h2{font-size:1.1rem;letter-spacing:.02em}

/* --------------------------------------------------- 9. Formulare & Inputs */
.form{max-width:480px}
.form-wide{max-width:640px}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-secondary);font-size:.88rem}
.field .hint{display:block;margin-top:5px;color:var(--text-muted);font-size:.78rem}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
select{
  width:100%;min-height:48px;padding:0 14px;
  background:var(--bg-elevated);
  border:1px solid var(--border-light);border-radius:var(--radius-sm);
  color:var(--text-primary);font-family:var(--font-body);font-size:1rem;
  transition:border-color var(--transition-base),box-shadow var(--transition-base),background var(--transition-base);
}
select{
  cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-primary) 50%),linear-gradient(135deg,var(--gold-primary) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 12px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px;
}
input:focus,select:focus{
  outline:none;border-color:var(--gold-primary);
  box-shadow:0 0 0 3px rgba(201,169,98,.2);background:var(--bg-card);
}
input:disabled,select:disabled{opacity:.6;cursor:not-allowed}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text-secondary)}
.check input[type=checkbox]{
  width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:1px;
  accent-color:var(--gold-primary);cursor:pointer;
}
.check label{margin:0;cursor:pointer}
.notebox{
  background:rgba(201,169,98,.06);border:1px solid var(--border-gold);
  border-radius:var(--radius-md);padding:14px 16px;
  font-size:.86rem;color:var(--text-secondary);
}
.notebox strong{color:var(--gold-light)}

/* ----------------------------------------------- 10. Flash-Meldungen & Fehler */
.flashes{margin:14px 0 6px}
.flash{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;border-radius:var(--radius-sm);margin-bottom:10px;
  font-size:.9rem;border:1px solid var(--border-light);background:var(--bg-elevated);
}
.flash::before{font-weight:700}
.flash-success{border-color:rgba(108,193,124,.4);background:rgba(108,193,124,.1);color:#cdebd3}
.flash-success::before{content:"\2713";color:#6cc17c}
.flash-error{border-color:rgba(229,83,60,.45);background:rgba(229,83,60,.12);color:#f6ccc4}
.flash-error::before{content:"\26A0";color:var(--live-primary)}
.flash-info{border-color:var(--border-gold);background:rgba(201,169,98,.08);color:var(--gold-light)}
.flash-info::before{content:"\2139";color:var(--gold-primary)}
.errors{
  list-style:none;margin:14px 0 16px;padding:13px 15px;
  border:1px solid rgba(229,83,60,.45);background:rgba(229,83,60,.12);
  border-radius:var(--radius-sm);color:#f6ccc4;font-size:.9rem;
}
.errors li{padding:2px 0}

/* ----------------------------------------------- 11. Chips / Badges / Pills */
.badge{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--font-heading);font-weight:600;letter-spacing:.04em;
  font-size:.68rem;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-pill);
  border:1px solid var(--border-light);color:var(--text-secondary);white-space:nowrap;
}
.badge-gold{border-color:var(--border-gold);color:var(--gold-light);background:rgba(201,169,98,.1)}
.badge-locked{border-color:rgba(255,255,255,.12);color:var(--text-muted);background:var(--bg-elevated)}
.badge-live{
  border-color:rgba(229,83,60,.5);color:#f6ccc4;background:rgba(229,83,60,.14);
}
.badge-live::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--live-primary);box-shadow:0 0 0 0 rgba(229,83,60,.6);
  animation:livePulse 1.5s infinite;
}
.ico-lock{flex:0 0 auto;vertical-align:-1px;opacity:.85}
/* Team-Code-Badge (Fallback ohne Flagge) */
.code-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:22px;border-radius:5px;
  background:var(--bg-elevated);border:1px solid var(--border-gold);
  font-family:var(--font-heading);font-weight:600;font-size:.6rem;letter-spacing:.02em;
  color:var(--gold-light);flex:0 0 auto;
}
/* Flaggen-Bild aus flag_img() */
.flag{
  width:28px;height:21px;border-radius:4px;flex:0 0 auto;
  object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.points-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border-radius:var(--radius-pill);
  background:rgba(201,169,98,.14);border:1px solid var(--border-gold);
  color:var(--gold-light);font-family:var(--font-heading);font-weight:600;font-size:.76rem;
}

/* ----------------------------------------------- 12. Hero & Startseite */
.hero{text-align:center;padding:32px 0 28px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(201,169,98,.12),transparent 70%);
}
.hero-logo{height:56px;width:auto;margin:0 auto 16px;display:block}
.hero-eyebrow{
  display:block;font-family:var(--font-heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--gold-primary);margin-bottom:10px;
}
.hero h1{font-size:2rem;margin-bottom:12px;letter-spacing:.02em;line-height:1.12}
.hero .hero-accent{color:var(--gold-primary)}
.hero .hero-sub{color:var(--text-secondary);max-width:480px;margin:0 auto 22px;font-size:1rem;line-height:1.6}
.hero .hero-sub strong{color:var(--gold-light);font-weight:500}
.hero .btn-row{justify-content:center}

/* "So funktioniert's" Punktesystem */
.rules-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.rule{
  text-align:center;background:var(--bg-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:16px 8px;
  transition:border-color var(--transition-base),transform var(--transition-base);
}
.rule:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.rule .rule-points{
  font-family:var(--font-heading);font-weight:600;font-size:2rem;
  color:var(--gold-primary);line-height:1;
}
.rule .rule-label{display:block;margin-top:8px;color:var(--text-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.2}

/* Kompakte Spielzeile (Vorschau auf der Startseite) */
.match-line{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--border-subtle);
}
.match-line:last-child{border-bottom:none}
.match-line .teams{font-weight:500;font-size:.98rem;display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.match-line .teams .flag{width:24px;height:18px}
.match-line .when{color:var(--text-muted);font-size:.8rem;white-space:nowrap}

/* --------------------------------------------- 13. Match-Karten (Tippen) */
.group-section{margin-bottom:26px}
.group-heading{
  font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;font-weight:600;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;color:var(--text-primary);
}
.group-heading::before{content:"";width:4px;height:18px;background:var(--gold-primary);border-radius:2px}

.match-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:14px 16px;margin-bottom:12px;
  transition:border-color var(--transition-base);
}
.match-card:focus-within{border-color:var(--border-gold)}
.match-card.is-locked{background:var(--bg-secondary)}
.match-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);
}
.match-meta{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.76rem;flex-wrap:wrap}
.lock-note{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.78rem}

/* Eingabezeile: Team1 [tor] : [tor] Team2 */
.tip-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.tip-team{display:flex;align-items:center;gap:10px;min-width:0}
.tip-team.t2{flex-direction:row-reverse;text-align:right}
.tip-team .team-name{font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.tip-inputs{display:flex;align-items:center;gap:8px}
.tip-inputs .sep{color:var(--gold-muted);font-family:var(--font-heading);font-weight:300;font-size:1.4rem}
.tip-score{
  width:56px;min-width:56px;height:56px;
  text-align:center;font-family:var(--font-heading);font-size:1.5rem;font-weight:600;
  padding:0;background:var(--bg-elevated);border:1px solid var(--border-light);
  -moz-appearance:textfield;
}
.tip-score:focus{background:var(--bg-card)}
.tip-score::-webkit-outer-spin-button,
.tip-score::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* gesperrte Felder zeigen den grossen Score */
.final-score{
  font-family:var(--font-heading);font-weight:700;font-size:1.6rem;color:var(--gold-primary);
  display:flex;align-items:center;gap:8px;
}
.final-score .sep{color:var(--text-muted)}

.match-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;flex-wrap:wrap;
}
.save-status{font-size:.8rem;color:var(--text-muted);min-height:1.2em;transition:color var(--transition-base)}
.save-status.is-ok{color:#6cc17c}
.save-status.is-err{color:var(--live-primary)}
.countdown{font-size:.76rem;color:var(--text-subtle)}

/* ------------------------------------------------------ 14. Champion-Box */
.champion-box{
  position:relative;background:var(--bg-card);
  border:1px solid var(--border-gold);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:18px;margin-bottom:24px;overflow:hidden;
}
.champion-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-primary);opacity:.8;
}
.champion-box h2{color:var(--gold-light);margin-bottom:8px}
.champion-box .champion-desc{color:var(--text-secondary);margin-bottom:16px;font-size:.9rem}
.champion-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.champion-form .field{flex:1 1 240px;margin-bottom:0}

/* ------------------------------------------------- 15. Live-Karten & Grid */
.live-grid{display:grid;grid-template-columns:1fr;gap:10px}
.live-card{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  padding:13px 16px;display:flex;flex-direction:column;gap:10px;
  transition:border-color var(--transition-base);
}
.live-card.is-live{border-color:rgba(229,83,60,.45);box-shadow:0 0 0 1px rgba(229,83,60,.2),var(--shadow-sm)}
.live-card.is-done{opacity:.78}
.live-status{display:flex;align-items:center;gap:9px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
.live-tag{color:var(--text-muted);font-weight:600;font-family:var(--font-heading)}
.live-tag.soon{color:var(--gold-light)}
.live-tag.done{color:var(--text-muted)}
.live-card.is-live .live-tag{color:var(--live-primary)}
.live-group{margin-left:auto;color:var(--text-subtle);font-weight:500;letter-spacing:.04em}

/* Pulsierender Live-Punkt (warmes Rot/Orange) */
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--live-primary);box-shadow:0 0 0 0 rgba(229,83,60,.6);
  animation:livePulse 1.5s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(229,83,60,.6)}
  70%{box-shadow:0 0 0 8px rgba(229,83,60,0)}
  100%{box-shadow:0 0 0 0 rgba(229,83,60,0)}
}

.live-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.live-team{display:flex;align-items:center;gap:8px;min-width:0}
.live-team.team-away{flex-direction:row-reverse;text-align:right}
.live-team .team-name{
  font-family:var(--font-heading);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.live-score{
  font-family:var(--font-heading);font-weight:700;font-size:1.5rem;
  min-width:54px;text-align:center;color:var(--text-primary);
}
.live-card.is-live .live-score{color:var(--live-primary)}
.live-score .sep{opacity:.55;margin:0 2px}

/* Live-Pill in Ueberschriften (warmes Rot) */
.live-pill{
  display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  padding:4px 11px;border-radius:var(--radius-pill);
  background:rgba(229,83,60,.14);border:1px solid rgba(229,83,60,.4);
  color:var(--live-primary);font-family:var(--font-heading);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}

/* Live-Indikator im Desktop-Nav-Link + Bottom-Tab (warmes Rot) */
.nav-live{position:relative}
.nav-live-dot{
  display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;
  background:var(--live-primary);vertical-align:middle;animation:livePulse 1.5s infinite;
}

/* --------------------------------------- 16. Tabellen / Bestenliste */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--border-light);background:var(--bg-card);
  color:var(--text-secondary);font-family:var(--font-heading);
  text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-weight:500;
  cursor:pointer;transition:all var(--transition-base);
}
.tab:hover{color:var(--text-primary);border-color:var(--border-gold)}
.tab.is-active{background:var(--gold-primary);color:var(--bg-primary);border-color:var(--gold-primary)}

.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border-subtle);-webkit-overflow-scrolling:touch}
table.board{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--bg-card);min-width:440px}
table.board th,table.board td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border-subtle)}
table.board th{
  font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;color:var(--text-muted);font-weight:600;background:var(--bg-elevated);
}
table.board td.num,table.board th.num{text-align:center}
table.board tbody tr:last-child td{border-bottom:none}
table.board tbody tr{transition:background var(--transition-base)}
table.board tbody tr:hover{background:var(--bg-elevated)}
.rank-cell{font-family:var(--font-heading);font-weight:600;width:60px;text-align:center}
.total-cell{font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--gold-primary)}
tr.top-1 td{background:rgba(201,169,98,.1)}
tr.top-2 td{background:rgba(201,205,210,.06)}
tr.top-3 td{background:rgba(198,139,90,.07)}
.rank-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--radius-full);
  font-family:var(--font-heading);font-weight:700;font-size:.88rem;line-height:1;
  border:1px solid transparent;color:var(--bg-primary);
}
.rank-badge.rank-1{background:var(--gold-primary);box-shadow:0 0 0 1px rgba(201,169,98,.4),0 2px 8px rgba(201,169,98,.3)}
.rank-badge.rank-2{background:var(--silver);box-shadow:0 0 0 1px rgba(201,205,210,.35)}
.rank-badge.rank-3{background:var(--bronze);box-shadow:0 0 0 1px rgba(198,139,90,.35)}

.matchday-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.matchday-picker a{
  padding:8px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--border-light);background:var(--bg-card);
  color:var(--text-secondary);font-size:.8rem;
}
.matchday-picker a.is-active{background:rgba(201,169,98,.12);border-color:var(--border-gold);color:var(--gold-light)}
.matchday-picker a{transition:color var(--transition-base),border-color var(--transition-base),background var(--transition-base)}
.matchday-picker a:hover{color:var(--text-primary);border-color:var(--border-gold)}

/* ----- 16b. Premium-Bestenliste: Tab-Pills, Podium, Rang-Liste ----- */
.board-tabs{
  display:inline-flex;gap:4px;margin-bottom:20px;padding:4px;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
}
.board-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 20px;border-radius:var(--radius-pill);
  color:var(--text-secondary);font-family:var(--font-heading);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;
  transition:color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base);
  white-space:nowrap;
}
.board-tab:hover{color:var(--text-primary)}
.board-tab.is-active{
  color:var(--bg-primary);background:var(--gradient-gold);
  box-shadow:0 2px 10px rgba(201,169,98,.3);
}
.board-tab.is-active:hover{color:var(--bg-primary)}

/* --- Podium (Top 3) --- */
.podium{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:10px;
  margin:6px 0 22px;
}
.podium-place{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:18px 8px 14px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(180deg,var(--bg-elevated),var(--bg-card));
  border:1px solid var(--border-subtle);border-bottom:none;min-width:0;width:100%;
}
.podium-place.place-1{
  padding-top:26px;
  background:linear-gradient(180deg,rgba(201,169,98,.16),var(--bg-card) 70%);
  border-color:var(--border-gold);
  box-shadow:0 -2px 0 0 var(--gold-primary) inset,var(--shadow-md);
  z-index:2;
}
.podium-place.place-2{background:linear-gradient(180deg,rgba(201,205,210,.12),var(--bg-card) 70%);border-color:rgba(201,205,210,.25)}
.podium-place.place-3{background:linear-gradient(180deg,rgba(198,139,90,.12),var(--bg-card) 70%);border-color:rgba(198,139,90,.25)}
.podium-place.is-me{box-shadow:0 0 0 1px var(--gold-primary),0 0 18px rgba(201,169,98,.25)}
.podium-place.place-1.is-me{box-shadow:0 -2px 0 0 var(--gold-primary) inset,0 0 0 1px var(--gold-primary),0 0 22px rgba(201,169,98,.3)}
.podium-badge{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--radius-full);margin-bottom:10px;
  font-family:var(--font-heading);font-weight:700;font-size:1.15rem;line-height:1;
  color:var(--bg-primary);
}
.podium-place.place-1 .podium-badge{width:54px;height:54px;font-size:1.3rem}
.podium-badge.rank-1{background:var(--gradient-gold);box-shadow:0 0 0 3px rgba(201,169,98,.25),0 4px 14px rgba(201,169,98,.4)}
.podium-badge.rank-2{background:linear-gradient(135deg,var(--silver),#fff);box-shadow:0 0 0 3px rgba(201,205,210,.2)}
.podium-badge.rank-3{background:linear-gradient(135deg,var(--bronze),#E0A878);box-shadow:0 0 0 3px rgba(198,139,90,.2)}
.podium-crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%);color:var(--gold-light);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.podium-rank{display:block}
.podium-name{
  font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:var(--text-primary);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.podium-place.place-1 .podium-name{font-size:1.05rem;color:var(--gold-light)}
.podium-points{
  font-family:var(--font-heading);font-weight:700;font-size:1.7rem;line-height:1.1;margin-top:8px;
  color:var(--gold-primary);font-variant-numeric:tabular-nums;
}
.podium-place.place-1 .podium-points{font-size:2.1rem}
.podium-place.place-2 .podium-points{color:var(--silver)}
.podium-place.place-3 .podium-points{color:var(--bronze)}
.podium-points-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:1px}
.podium-meta{font-size:.7rem;color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.podium-meta strong{color:var(--text-secondary);font-weight:600}
.podium-bar{
  width:100%;margin-top:12px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--border-light),transparent);
}
.podium-place.place-1 .podium-bar{height:30px;background:linear-gradient(180deg,var(--gold-muted),transparent)}
.podium-place.place-2 .podium-bar{height:20px}
.podium-place.place-3 .podium-bar{height:12px}

/* --- Voll-Ranking als Zeilenliste --- */
.rank-list{display:flex;flex-direction:column;gap:6px;counter-reset:rank}
.rank-row{
  display:grid;
  grid-template-columns:44px 1fr auto auto;
  align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--radius-md);
  background:var(--bg-card);border:1px solid var(--border-subtle);
  transition:border-color var(--transition-base),background var(--transition-base),transform var(--transition-base);
}
.rank-list.has-champ .rank-row{grid-template-columns:44px 1fr auto auto auto}
.rank-row:hover{background:var(--bg-elevated);border-color:var(--border-light)}
.rank-row.top-1{border-color:var(--border-gold);background:linear-gradient(90deg,rgba(201,169,98,.08),var(--bg-card) 60%)}
.rank-row.top-2{border-color:rgba(201,205,210,.22)}
.rank-row.top-3{border-color:rgba(198,139,90,.22)}
.rank-row.is-me{
  border-color:var(--gold-primary);
  background:linear-gradient(90deg,rgba(201,169,98,.14),var(--bg-card) 70%);
  box-shadow:0 0 0 1px var(--gold-primary),0 0 16px rgba(201,169,98,.18);
}
.rank-pos{display:flex;align-items:center;justify-content:center}
.rank-num{
  font-family:var(--font-heading);font-weight:700;font-size:1rem;
  color:var(--text-muted);font-variant-numeric:tabular-nums;
}
.rank-name{
  font-weight:600;font-size:.98rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.me-tag{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--gold-primary);color:var(--bg-primary);
  font-family:var(--font-heading);font-weight:700;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.4;
}
.rank-stat{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;
  min-width:42px;
}
.rank-stat-val{font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.rank-stat::after{content:attr(data-label);font-size:.56rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);margin-top:1px}
.rank-total{
  min-width:54px;text-align:right;
  font-family:var(--font-heading);font-weight:700;font-size:1.2rem;
  color:var(--gold-primary);font-variant-numeric:tabular-nums;
}

@media (max-width:520px){
  .podium{gap:6px}
  .podium-place{padding:14px 5px 12px}
  .podium-place.place-1{padding-top:22px}
  .podium-name{font-size:.85rem}
  .podium-place.place-1 .podium-name{font-size:.92rem}
  .podium-points{font-size:1.4rem}
  .podium-place.place-1 .podium-points{font-size:1.75rem}
  /* Champion-Spalte mobil ausblenden, Exakt behalten */
  .rank-row,
  .rank-list.has-champ .rank-row{grid-template-columns:38px 1fr auto auto;gap:8px;padding:10px 11px}
  .rank-stat-champ{display:none}
  .rank-name{font-size:.92rem}
  .rank-total{font-size:1.1rem;min-width:44px}
}
@media (max-width:360px){
  .podium-points-label,.podium-meta{display:none}
  .rank-stat{min-width:34px}
}

/* ---------------------------------------------------------- 17. Admin */
.admin-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.admin-stat{font-family:var(--font-heading);font-weight:600;color:var(--gold-light)}
table.admin{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
table.admin th,table.admin td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:middle}
table.admin th{font-family:var(--font-heading);text-transform:uppercase;font-size:.7rem;color:var(--text-muted);background:var(--bg-elevated)}
table.admin input[type=number]{width:60px;min-height:40px;text-align:center;padding:0 6px}
table.admin select{min-height:40px;width:auto;padding:0 28px 0 10px}
.inline-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ----------------------------------------- 18. Responsive Breakpoints */
/* Mobil (default = bis 768px): Bottom-Bar an, Desktop-Nav aus */
@media (max-width:768px){
  .main-nav{display:none}
  .header-mobile-user{display:flex}
  .container{padding:0 12px}
}

/* Desktop (ab 769px): Top-Nav an, Bottom-Bar aus, mehr Platz */
@media (min-width:769px){
  body{padding-top:64px;padding-bottom:0}
  .site-header{height:64px}
  .brand .brand-logo{height:42px}
  .container{max-width:820px;padding:0 20px}
  .site-header .container,.site-footer .container{max-width:1100px}
  .section{padding:30px 0}
  .section-title{font-size:1.45rem}
  .hero{padding:56px 0 40px}
  .hero-logo{height:68px}
  .hero h1{font-size:2.6rem}
  .hero .hero-sub{font-size:1.05rem;max-width:540px}
  /* Live-Grid darf auf grossen Screens 2-spaltig werden */
  .live-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .rules-grid{gap:14px}
  .rule{padding:24px 14px}
  .rule .rule-points{font-size:2.5rem}
  .match-card{padding:16px 20px}
}

/* sehr schmale Phones */
@media (max-width:380px){
  .tip-score{width:50px;min-width:50px;height:50px;font-size:1.35rem}
  .tip-team .team-name{font-size:.92rem}
  .rule .rule-points{font-size:1.7rem}
  .rule .rule-label{font-size:.62rem}
  .hero h1{font-size:1.7rem}
}

/* Bewegung reduzieren (Barrierefreiheit) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}