/* Standard: HELL. Dark Mode via . */
:root{
--bg:#f4f6f8; --card:#ffffff; --ink:#1b2433; --muted:#5b6676;
--gold:#b8902e; --accent:#0ea371; --line:#e5e9ef; --soft:#eef1f5;
--radius:14px; --shadow:0 1px 3px rgba(20,30,50,.08),0 1px 2px rgba(20,30,50,.04);
}
html[data-theme="dark"]{
--bg:#0f172a; --card:#1e293b; --ink:#e2e8f0; --muted:#94a3b8;
--gold:#c9a84c; --accent:#10b981; --line:#334155; --soft:#172033;
--shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:1.25rem}
/* Navigation / Header */
.nav{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.nav-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.6rem 1.1rem;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.15rem;white-space:nowrap}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:.25rem;flex:1;flex-wrap:wrap}
.nav-links a{color:var(--muted);padding:.4rem .6rem;border-radius:8px;font-weight:600;font-size:.95rem}
.nav-links a:hover{background:var(--soft);color:var(--ink)}
.nav-links a.active{background:var(--soft);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:.5rem}
.balance{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-weight:700;white-space:nowrap}
.balance .coin{color:var(--gold)}
.icon-btn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.35rem .55rem;cursor:pointer;color:var(--ink);font-size:1rem}
/* Nutzer-Menü (Dropdown hinter Symbol) */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);
border-radius:12px;box-shadow:var(--shadow);min-width:200px;padding:.5rem;display:flex;flex-direction:column;gap:.35rem;z-index:20}
.menu-pop[hidden]{display:none}
.menu-pop a,.menu-item{display:block;text-align:left;background:transparent;border:none;color:var(--ink);
padding:.5rem .6rem;border-radius:8px;cursor:pointer;font:inherit;text-decoration:none}
.menu-pop a:hover,.menu-item:hover{background:var(--soft)}
.menu-name{font-weight:700;padding:.3rem .6rem;color:var(--muted);font-size:.85rem}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem .6rem}
.menu-row select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.25rem;color:var(--ink)}
/* Bausteine */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);display:block;color:inherit}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted);margin:0}
.btn{display:inline-block;background:var(--gold);color:#fff;font-weight:700;border:none;border-radius:10px;padding:.6rem 1.1rem;cursor:pointer;font-size:1rem}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.small{padding:.4rem .7rem;font-size:.9rem}
.muted{color:var(--muted)}
h2{margin:.2rem 0 1rem}
form{display:flex;flex-direction:column;gap:.7rem;max-width:400px}
input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem;color:var(--ink);font-size:1rem}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem;max-width:400px}
.tabs button{flex:1}
.msg{min-height:1.2rem;color:#dc2626;font-size:.9rem}
.ok{color:var(--accent)}
table{width:100%;border-collapse:collapse;margin-top:.5rem;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
td,th{border-bottom:1px solid var(--line);padding:.55rem .6rem;text-align:left;font-size:.92rem}
th{background:var(--soft)}
.pos{color:var(--accent);font-weight:700}.neg{color:#dc2626;font-weight:700}
/* Tipp-Liste */
.match{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin-bottom:.6rem;box-shadow:var(--shadow);flex-wrap:wrap}
.match .day{flex-basis:100%;font-size:.78rem;color:var(--muted)}
.match .team{display:flex;align-items:center;gap:.4rem;min-width:0}
.match .team img{width:22px;height:22px;object-fit:contain}
.match .team.home{flex:1;justify-content:flex-end;text-align:right}
.match .team.away{flex:1}
.match .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match .mid{display:flex;align-items:center;gap:.35rem}
.match .mid input{width:60px;text-align:center;padding:.5rem .3rem;font-size:1.1rem;font-weight:700}
.match .res{font-weight:800;min-width:78px;text-align:center;font-size:1.2rem}
.match .meta{flex-basis:100%;font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:.2rem}
.badge{font-size:.75rem;padding:.1rem .45rem;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
/* kompakter Inline-Balken (Fallback) */
.pbar{display:inline-flex;height:8px;border-radius:999px;overflow:hidden;min-width:120px;vertical-align:middle;background:var(--line)}
.pbar span{display:block;transition:width .6s ease}
.pbar .ph{background:#34d399}.pbar .pd{background:#94a3b8}.pbar .pa{background:#38bdf8}
.pbar-wrap{display:flex;align-items:center;gap:.4rem;margin-top:.25rem;font-size:.74rem;color:var(--muted);flex-wrap:wrap}
/* voller Prognose-Block (tipp.sundwerke.net-Stil): Kopfzeile · dünner Balken · Legende */
.pbar-block{margin-top:.5rem}
.pbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:.22rem}
.pbar-head .pb-extra{font-weight:700;color:var(--ink)}
.pbar2{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--line)}
.pbar2>span{display:block;transition:width .6s ease}
.pbar2 .ph{background:#34d399}.pbar2 .pd{background:#94a3b8}.pbar2 .pa{background:#38bdf8}
.pbar-legend{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);margin-top:.18rem}
.pbar-legend .lh{color:#0d9488}.pbar-legend .la{color:#0284c7}
.foot{margin-top:2rem;color:var(--muted);font-size:.8rem}
.brand .ver{font-size:.6rem;color:var(--muted);margin-left:.45rem;font-weight:700;letter-spacing:.02em;background:var(--soft);padding:.1rem .35rem;border-radius:999px;vertical-align:middle}
.brand a{display:inline-flex;align-items:center;gap:.5rem}
.brand-logo{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
/* Statistik-Zentrale */
.quicklinks{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center;box-shadow:var(--shadow)}
.kpi-n{font-size:1.5rem;font-weight:800;color:var(--ink)}
.kpi-l{font-size:.72rem;color:var(--muted)}
table.stats{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.4rem}
table.stats th{text-align:left;color:var(--muted);font-weight:600;font-size:.72rem;padding:.25rem .4rem;border-bottom:1px solid var(--line)}
table.stats td{padding:.4rem .4rem;border-bottom:1px solid var(--line);vertical-align:middle}
.statbar{display:inline-block;width:70px;height:7px;border-radius:999px;background:var(--line);overflow:hidden;vertical-align:middle;margin-right:.35rem}
.statbar>span{display:block;height:100%;transition:width .6s ease}
.sb-ai{background:#8b5cf6}.sb-mk{background:#0ea5e9}.sb-pl{background:#10b981}.sb-rd{background:#f59e0b}
.scorerow{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}
.scorerow .sc{font-weight:700;min-width:38px}
.scorerow .statbar{flex:1;width:auto}