/* Jungle-Pfad — Nachtblau, Hextech-Gold, Jungle-Türkis */
:root {
  --bg: #060b10; --bg2: #09121a; --s1: #0d1720; --s2: #122029; --s3: #1a2c38; --s4: #233a48;
  --line: rgba(190, 215, 225, .08); --line2: rgba(190, 215, 225, .15);
  --tx: #e9eff1; --mut: #97a9b3; --mut2: #667b89;
  --gold: #c8aa6e; --gold2: #f0d9a0; --golddim: rgba(200, 170, 110, .13);
  --teal: #2fd6c3; --tealdim: rgba(47, 214, 195, .12);
  --mumie: #8fd18b; --rot: #ef6b5e; --blau: #5ab0f2; --drache: #f2a65a; --baron: #b98cf2;
  --ok: #5fd38d; --warn: #f2c25a;
  --r: 14px; --r2: 20px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Marcellus', Georgia, serif;
  --nav-h: 66px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx); font: 15px/1.55 var(--font);
  background-image: radial-gradient(1100px 620px at 85% -10%, rgba(47, 214, 195, .07), transparent 60%),
                    radial-gradient(900px 600px at -10% 20%, rgba(200, 170, 110, .06), transparent 60%);
  background-attachment: fixed; min-height: 100vh; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--gold2); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: .02em; margin: 0; }
b, strong { font-weight: 750; color: #fff; }
.hidden { display: none !important; }
.muted { color: var(--mut); }
input, select, textarea { font: inherit; color: var(--tx); }

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 23, 32, .92), rgba(6, 11, 16, .92)); display: flex; flex-direction: column; gap: 3px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 20px; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.1; color: var(--gold2); }
.brand small { display: block; color: var(--mut); font-size: 11.5px; letter-spacing: .04em; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--mut); font-weight: 650; }
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: var(--s1); color: var(--tx); }
.nav a.on { background: var(--golddim); color: var(--gold2); }
.nav .sep { height: 1px; background: var(--line); margin: 10px 8px; }
.side .mini { margin-top: auto; padding: 13px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.side .mini .k { font-size: 11.5px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .08em; }
.side .mini .v { font-family: var(--serif); font-size: 22px; color: var(--gold2); margin: 2px 0 8px; }
.sync { font-size: 11.5px; color: var(--mut2); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.sync.off i { background: var(--warn); }

main { min-width: 0; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 16px 32px; background: rgba(6, 11, 16, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top h1 { font-size: 22px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s1); border: 1px solid var(--line); }
.view { padding: 28px 32px 60px; max-width: 1180px; }
.bnav { display: none; }

/* ── Bausteine ───────────────────────────────────────────────────────────── */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r2); padding: 20px; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .sec + .sec { margin-top: 18px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.h2 { font-family: var(--serif); font-size: 24px; margin: 4px 0 6px; }
.h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 10px; }
.sec-kopf { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.sec-kopf:first-child { margin-top: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 750; background: var(--gold); color: #1a1408; transition: transform .12s, filter .12s; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--s2); color: var(--tx); border: 1px solid var(--line2); }
.btn.teal { background: var(--teal); color: #04201c; }
.btn.klein { padding: 7px 12px; font-size: 13.5px; border-radius: 10px; }
.btn svg { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--mut); }
.chip.on { background: var(--golddim); border-color: rgba(200, 170, 110, .45); color: var(--gold2); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; background: var(--s3); color: var(--mut); }
.tag.gold { background: var(--golddim); color: var(--gold2); }
.tag.teal { background: var(--tealdim); color: var(--teal); }
.bar { height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .5s; }
.leer { text-align: center; padding: 36px 20px; color: var(--mut); }
a.gl { color: var(--gold2); border-bottom: 1px dotted rgba(240, 217, 160, .5); cursor: help; }
.icon { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line2); flex: none; background: var(--s3); }
.icon.rund { border-radius: 50%; }
.icon.k { width: 34px; height: 34px; border-radius: 8px; }

/* ── Start ───────────────────────────────────────────────────────────────── */
.hero { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; display: flex; align-items: end; border: 1px solid var(--line2); background: #0b1820; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 11, 16, .96) 0%, rgba(6, 11, 16, .78) 38%, rgba(6, 11, 16, .05) 72%), linear-gradient(0deg, rgba(6, 11, 16, .7), transparent 50%); }
.hero .inh { position: relative; z-index: 1; padding: 30px; max-width: 540px; }
.hero h2 { font-size: 36px; line-height: 1.12; margin: 6px 0 10px; }
.hero p { color: #c6d3d8; margin: 0 0 18px; }
.hero .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

.weiter { display: flex; gap: 16px; align-items: center; cursor: pointer; transition: border-color .15s; }
.weiter:hover { border-color: rgba(200, 170, 110, .4); }
.weiter .nr { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font-family: var(--serif); font-size: 22px; background: var(--golddim); color: var(--gold2); border: 1px solid rgba(200, 170, 110, .3); }
.weiter .t { flex: 1; min-width: 0; }
.weiter .t b { display: block; font-size: 16.5px; }
.pfeil { color: var(--mut2); flex: none; }

.fokus { background: linear-gradient(135deg, rgba(47, 214, 195, .12), rgba(47, 214, 195, .03)); border-color: rgba(47, 214, 195, .25); }
.fokus .ziel { font-family: var(--serif); font-size: 21px; line-height: 1.3; margin: 8px 0 14px; }
.zahl { font-family: var(--serif); font-size: 32px; line-height: 1.1; color: var(--tx); }
.zahl small { font-family: var(--font); font-size: 14px; color: var(--mut); margin-left: 4px; }
.kpi .k { font-size: 12.5px; color: var(--mut); font-weight: 700; }

/* Stufen-Leiste */
.stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stufe { position: relative; padding: 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); cursor: pointer; }
.stufe .n { font-family: var(--serif); font-size: 13px; color: var(--mut); }
.stufe b { display: block; font-size: 15.5px; margin: 2px 0 8px; }
.stufe.jetzt { border-color: rgba(47, 214, 195, .45); background: linear-gradient(180deg, rgba(47, 214, 195, .08), var(--s1)); }
.stufe.jetzt .n { color: var(--teal); }
.stufe.fertig .n { color: var(--ok); }

/* ── Lernpfad ────────────────────────────────────────────────────────────── */
.pfad-stufe { position: relative; padding-left: 58px; }
.pfad-stufe + .pfad-stufe { margin-top: 34px; }
.pfad-stufe::before { content: ''; position: absolute; left: 21px; top: 50px; bottom: -34px; width: 2px; background: var(--line2); }
.pfad-stufe:last-child::before { display: none; }
.pfad-stufe .marke { position: absolute; left: 0; top: 2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 19px; background: var(--s2); border: 2px solid var(--line2); color: var(--mut); }
.pfad-stufe.jetzt .marke { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 6px rgba(47, 214, 195, .1); }
.pfad-stufe.fertig .marke { border-color: var(--ok); background: rgba(95, 211, 141, .14); color: var(--ok); }
.pfad-stufe h2 { font-size: 23px; }
.pfad-stufe .sub { color: var(--mut); font-size: 13.5px; margin: 2px 0 4px; }
.pfad-stufe .ziel { font-size: 14px; color: #c3d0d6; margin-bottom: 14px; }
.lek { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.lek + .lek { margin-top: 8px; }
.lek:hover { border-color: var(--line2); background: var(--s2); }
.lek .t { flex: 1; min-width: 0; }
.lek .t b { display: block; font-size: 15px; }
.lek .t span { font-size: 13px; color: var(--mut); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: flex; gap: 5px; flex: none; }
.status i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--s3); color: var(--mut2); }
.status i svg { width: 15px; height: 15px; }
.status i.an { background: rgba(95, 211, 141, .16); color: var(--ok); }
.status i.an.ueb { background: var(--golddim); color: var(--gold2); }

/* Lektion */
.lektion { max-width: 760px; }
.merk { position: relative; padding: 18px 20px 18px 22px; border-radius: var(--r); background: linear-gradient(135deg, var(--golddim), rgba(200, 170, 110, .03)); border: 1px solid rgba(200, 170, 110, .28); font-size: 16.5px; line-height: 1.5; margin-bottom: 22px; }
.merk .eyebrow { color: var(--gold); display: block; margin-bottom: 4px; }
.lektion .inhalt > * + * { margin-top: 14px; }
.lektion .inhalt p { margin: 0; font-size: 15.5px; color: #d5dfe3; }
.lektion ul.l { margin: 0; padding: 0; list-style: none; }
.lektion ul.l li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); color: #d5dfe3; }
.lektion ul.l li:last-child { border-bottom: 0; }
.lektion ul.l li::before { content: ''; position: absolute; left: 4px; top: 18px; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--teal); }
ol.schritte { margin: 0; padding: 0; list-style: none; counter-reset: s; }
ol.schritte li { counter-increment: s; position: relative; padding: 10px 0 10px 44px; color: #d5dfe3; }
ol.schritte li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13.5px; background: var(--tealdim); color: var(--teal); border: 1px solid rgba(47, 214, 195, .3); }
.hinweis { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--tealdim); border: 1px solid rgba(47, 214, 195, .22); color: #d4f1ed; }
.hinweis.warn { background: rgba(239, 107, 94, .1); border-color: rgba(239, 107, 94, .28); color: #f6d6d2; }
.hinweis svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.uebung { margin-top: 26px; padding: 20px; border-radius: var(--r2); background: var(--s1); border: 1px dashed rgba(200, 170, 110, .4); }
.fehlerliste { margin: 8px 0 0; padding: 0; list-style: none; }
.fehlerliste li { padding: 6px 0 6px 26px; position: relative; color: #d5dfe3; }
.fehlerliste li::before { content: '✕'; position: absolute; left: 4px; top: 6px; color: var(--rot); font-weight: 800; }
.abhaken { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.check { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); font-weight: 700; }
.check .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--mut2); display: grid; place-items: center; transition: all .15s; }
.check .box svg { width: 14px; height: 14px; opacity: 0; color: #062016; }
.check.an { border-color: rgba(95, 211, 141, .5); background: rgba(95, 211, 141, .1); }
.check.an .box { background: var(--ok); border-color: var(--ok); }
.check.an .box svg { opacity: 1; }
.lek-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }

/* ── Champions ───────────────────────────────────────────────────────────── */
.empfehlung { position: relative; overflow: hidden; display: grid; grid-template-columns: 200px 1fr; gap: 0; padding: 0; }
.empfehlung > img { width: 100%; height: 100%; object-fit: cover; object-position: top; min-height: 280px; }
.empfehlung .inh { padding: 24px 26px; }
.champ-karte { display: flex; flex-direction: column; gap: 12px; }
.champ-karte .kopf { display: flex; gap: 12px; align-items: center; }
.champ-karte .kopf img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line2); }
.champ-karte .kopf b { font-size: 17px; display: block; }
.champ-karte.main { border-color: rgba(200, 170, 110, .45); }
.wertung { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; align-items: center; }
.punkte { display: flex; gap: 3px; }
.punkte i { width: 16px; height: 6px; border-radius: 3px; background: var(--s3); }
.punkte i.an { background: var(--gold); }
.proli { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.proli li { padding: 3px 0 3px 18px; position: relative; color: #ccd8dd; }
.proli li::before { position: absolute; left: 0; font-weight: 800; }
.proli.plus li::before { content: '+'; color: var(--ok); }
.proli.minus li::before { content: '−'; color: var(--rot); }

/* Amumu */
.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 9px 15px; border-radius: 10px; font-weight: 750; font-size: 14px; color: var(--mut); }
.tabs button.on { background: var(--s3); color: var(--gold2); }
.skill { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.skill:last-child { border-bottom: 0; }
.skill .bild { position: relative; flex: none; }
.skill .bild span { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--gold); color: #1a1408; }
.skill b { font-size: 15.5px; }
.skill .en { font-size: 12.5px; color: var(--mut2); margin-left: 6px; }
.skill p { margin: 3px 0 0; color: #ccd8dd; font-size: 14.5px; }
.skillreihe { display: grid; grid-template-columns: 32px repeat(18, minmax(0, 1fr)); gap: 3px; font-size: 12px; overflow-x: auto; }
.skillreihe div { height: 28px; display: grid; place-items: center; border-radius: 6px; }
.skillreihe .lv { color: var(--mut2); font-weight: 700; }
.skillreihe .k { font-weight: 900; color: var(--mut); }
.skillreihe .x { background: var(--s2); }
.skillreihe .x.an { background: var(--gold); color: #1a1408; font-weight: 900; }
.skillreihe .x.an.R { background: var(--teal); color: #04201c; }
.itemreihe { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.item .t b { display: block; font-size: 14.5px; }
.item .t span { font-size: 13px; color: var(--mut); }
.item .t .en { color: var(--mut2); font-size: 12px; }
.pfeilreihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfeilreihe .p { color: var(--mut2); }
.rune-baum { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 750; color: var(--gold2); }
.taste { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--s3); border: 1px solid var(--line2); border-bottom-width: 3px; font-weight: 850; font-size: 13px; }
.combo { padding: 14px 0; border-bottom: 1px solid var(--line); }
.combo:last-child { border-bottom: 0; }
.combo .tasten { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.combo .tasten .p { color: var(--mut2); }

/* ── Karte ───────────────────────────────────────────────────────────────── */
.karte-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.karte { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #0a1a14; border: 1px solid var(--line2); }
.karte svg { width: 100%; height: 100%; display: block; }
.karte .camp text { font: 700 2.2px var(--font); fill: #e9eff1; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: .5px; }
.karte .route-linie { fill: none; stroke: var(--gold2); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 1.6; animation: lauf 1.2s linear infinite; }
@keyframes lauf { to { stroke-dashoffset: -3.6; } }
.karte .gank-linie { fill: none; stroke: var(--rot); stroke-width: .8; stroke-linecap: round; marker-end: url(#pfeilspitze); }
.karte-legende { display: flex; flex-direction: column; gap: 10px; }
.route-wahl { padding: 14px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); cursor: pointer; }
.route-wahl.on { border-color: rgba(200, 170, 110, .5); background: linear-gradient(135deg, var(--golddim), var(--s1)); }
.route-wahl b { display: block; }
.route-wahl span { font-size: 13px; color: var(--mut); }
.mini-karte { max-width: 460px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); }
.seg button { padding: 7px 14px; border-radius: 9px; font-weight: 750; font-size: 13.5px; color: var(--mut); }
.seg button.on { background: var(--s4); color: var(--tx); }
.seg button.on.blau { background: rgba(90, 176, 242, .2); color: #bfe0fb; }
.seg button.on.rot { background: rgba(239, 107, 94, .2); color: #fbd0cb; }

/* ── Live ────────────────────────────────────────────────────────────────── */
.live-uhr { text-align: center; padding: 26px 20px 22px; position: relative; overflow: hidden; }
.live-uhr .zeit { font-family: var(--serif); font-size: 76px; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--gold2); }
.live-uhr .zeit.steht { color: var(--mut2); }
.live-uhr .ctrl { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.puls { position: absolute; inset: -40%; background: radial-gradient(circle, rgba(47, 214, 195, .12), transparent 55%); animation: puls 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes puls { 50% { transform: scale(1.12); opacity: .55; } }
.coach { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: linear-gradient(135deg, rgba(47, 214, 195, .14), rgba(47, 214, 195, .04)); border: 1px solid rgba(47, 214, 195, .3); font-size: 16px; font-weight: 650; min-height: 70px; }
.coach .ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(47, 214, 195, .2); color: var(--teal); }
.coach.neu { animation: blink .9s ease 2; }
@keyframes blink { 50% { background: rgba(47, 214, 195, .3); } }
.spawn { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spawn:last-child { border-bottom: 0; }
.spawn .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.spawn .dot svg { width: 20px; height: 20px; }
.spawn b { flex: 1; }
.spawn .rest { font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.spawn.da .rest { color: var(--ok); font-family: var(--font); font-size: 14px; font-weight: 800; }
.spawn.bald .rest { color: var(--warn); }
.respawns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.re { position: relative; overflow: hidden; padding: 14px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--line2); text-align: left; min-height: 78px; }
.re b { display: block; font-size: 14px; position: relative; }
.re .rest { position: relative; font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums; }
.re .rest.leer { font-family: var(--font); font-size: 12.5px; color: var(--mut); padding: 0; text-align: left; font-weight: 600; }
.re .fuell { position: absolute; left: 0; bottom: 0; top: 0; opacity: .18; transition: width 1s linear; }
.re.gegner { border-style: dashed; }
.re.fertig { animation: blink .9s ease 3; border-color: var(--ok); }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.toggle { width: 46px; height: 27px; border-radius: 99px; background: var(--s4); position: relative; flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.an { background: var(--teal); }
.toggle.an::after { transform: translateX(19px); }

/* ── Spiele ──────────────────────────────────────────────────────────────── */
.spiel { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); cursor: pointer; border-left: 4px solid var(--mut2); }
.spiel + .spiel { margin-top: 8px; }
.spiel.sieg { border-left-color: var(--ok); }
.spiel.niederlage { border-left-color: var(--rot); }
.spiel .t { flex: 1; min-width: 0; }
.spiel .t b { display: block; }
.spiel .t span { font-size: 13px; color: var(--mut); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiel .kda { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.spiel .kda small { display: block; font-weight: 600; color: var(--mut); font-size: 12px; }
.chart { position: relative; }
.chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.chart .ach { font: 600 11px var(--font); fill: var(--mut2); }
.chart .tip { position: absolute; pointer-events: none; padding: 7px 10px; border-radius: 9px; background: var(--s4); border: 1px solid var(--line2); font-size: 12.5px; white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .1s; }
.chart .tip.an { opacity: 1; }

/* Formular / Overlay */
.ov { position: fixed; inset: 0; z-index: 100; background: rgba(2, 5, 8, .72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ein .18s ease; }
@keyframes ein { from { opacity: 0; } }
.sheet { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--s1); border: 1px solid var(--line2); border-radius: 22px; padding: 22px; animation: hoch .22s ease; }
@keyframes hoch { from { transform: translateY(16px); } }
.sheet h2 { font-size: 22px; margin-bottom: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.feld label, .feld .lab { font-size: 12.5px; font-weight: 750; color: var(--mut); }
.feld input, .feld select, .feld textarea { width: 100%; padding: 11px 13px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line2); outline: none; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--teal); }
.feld textarea { min-height: 70px; resize: vertical; }
.reihe { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.wahl button { padding: 9px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line2); font-weight: 700; font-size: 14px; color: var(--mut); display: inline-flex; align-items: center; gap: 7px; }
.wahl button img { width: 22px; height: 22px; border-radius: 6px; }
.wahl button.on { background: var(--golddim); border-color: rgba(200, 170, 110, .55); color: var(--gold2); }
.wahl button.on.sieg { background: rgba(95, 211, 141, .14); border-color: var(--ok); color: var(--ok); }
.wahl button.on.niederlage { background: rgba(239, 107, 94, .14); border-color: var(--rot); color: var(--rot); }
.sheet .fuss { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }

.glos-pop { position: fixed; z-index: 120; max-width: 300px; padding: 12px 14px; border-radius: 12px; background: var(--s3); border: 1px solid var(--line2); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); font-size: 14px; animation: ein .12s; }
.glos-pop b { color: var(--gold2); display: block; margin-bottom: 2px; }
.glos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.glos > div { padding: 14px 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.glos b { color: var(--gold2); }
.glos .de { font-size: 12.5px; color: var(--teal); font-weight: 700; margin-left: 6px; }
.glos p { margin: 4px 0 0; color: #ccd8dd; font-size: 14px; }
.suche { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line2); margin-bottom: 16px; }
.suche input { flex: 1; background: none; border: 0; outline: none; }
.suche svg { width: 18px; height: 18px; color: var(--mut); }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 30px); opacity: 0; padding: 11px 18px; border-radius: 12px; background: var(--s4); border: 1px solid var(--line2); font-weight: 700; z-index: 200; transition: all .25s; pointer-events: none; }
.toast.an { opacity: 1; transform: translate(-50%, 0); }
.fuss-info { margin-top: 40px; font-size: 11.5px; color: var(--mut2); line-height: 1.5; }

/* ── Login / Laden ───────────────────────────────────────────────────────── */
.vollbild { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; overflow: hidden; z-index: 300; background: var(--bg); }
.vollbild .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: schweb 12s ease-in-out infinite; }
.vollbild .orb.a { width: 420px; height: 420px; background: rgba(47, 214, 195, .22); top: -120px; right: -80px; }
.vollbild .orb.b { width: 380px; height: 380px; background: rgba(200, 170, 110, .18); bottom: -140px; left: -60px; animation-delay: -6s; }
@keyframes schweb { 50% { transform: translate(30px, 40px) scale(1.1); } }
.vollbild .box { position: relative; width: 100%; max-width: 380px; text-align: center; }
.vollbild .logo { width: 88px; height: 88px; margin: 0 auto 18px; position: relative; display: grid; place-items: center; }
.vollbild .logo svg { width: 56px; height: 56px; position: relative; }
.vollbild .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(200, 170, 110, .5); animation: ring 2.4s ease-out infinite; }
.vollbild .ring.b { animation-delay: -1.2s; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.vollbild h1 { font-size: 32px; color: var(--gold2); }
.vollbild p { color: var(--mut); margin: 6px 0 22px; }
.vollbild input { width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line2); outline: none; text-align: center; font-size: 16px; }
.vollbild input:focus { border-color: var(--gold); }
.vollbild .btn { width: 100%; margin-top: 12px; padding: 14px; }
.vollbild .err { color: var(--rot); font-size: 14px; min-height: 22px; margin-top: 10px; }
.punkte-lade { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
.punkte-lade i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: hupf 1.2s ease-in-out infinite; }
.punkte-lade i:nth-child(2) { animation-delay: .15s; }
.punkte-lade i:nth-child(3) { animation-delay: .3s; }
@keyframes hupf { 40% { transform: translateY(-8px); opacity: .6; } }

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karte-wrap { grid-template-columns: 1fr; }
  .stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app { display: block; }
  .side { display: none; }
  .top { padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .top h1 { font-size: 20px; }
  .view { padding: 18px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
  .g2, .g3 { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 18px; }
  .hero { min-height: 380px; align-items: end; }
  .hero img { object-position: 78% 20%; }
  .hero::after { background: linear-gradient(0deg, rgba(6, 11, 16, .98) 30%, rgba(6, 11, 16, .55) 62%, rgba(6, 11, 16, .05) 100%); }
  .hero .inh { padding: 20px; }
  .hero h2 { font-size: 28px; }
  .empfehlung { grid-template-columns: 1fr; }
  .empfehlung > img { min-height: 0; height: 200px; object-position: center 22%; }
  .pfad-stufe { padding-left: 0; }
  .pfad-stufe::before { display: none; }
  .pfad-stufe .marke { position: static; display: inline-grid; width: 36px; height: 36px; font-size: 16px; margin-bottom: 8px; }
  .live-uhr .zeit { font-size: 64px; }
  .glos { grid-template-columns: 1fr; }
  .reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov { align-items: end; padding: 0; }
  .sheet { border-radius: 22px 22px 0 0; max-height: 92vh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(9, 18, 26, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line2); }
  .bnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 11px; font-weight: 750; color: var(--mut2); border-radius: 12px; }
  .bnav a svg { width: 22px; height: 22px; }
  .bnav a.on { color: var(--gold2); }
  .bnav a.live.on { color: var(--teal); }
  .skillreihe { grid-template-columns: 26px repeat(18, 22px); }
}

/* ── Korrekturen ─────────────────────────────────────────────────────────── */
.grid > .card { margin-top: 0 !important; }
svg.pfeil { width: 20px; height: 20px; }
.skill .bild { align-self: flex-start; }
.item .t span b { display: inline; }
.zahl, .live-uhr .zeit, .spawn .rest, .re .rest, .side .mini .v, .weiter .nr, .stufe .n, .pfad-stufe .marke { font-family: var(--font); font-weight: 800; font-variant-numeric: tabular-nums; }
.live-uhr .zeit { letter-spacing: -.01em; }
.chart svg { height: auto; }

/* Breite Bildschirme: Inhalt mittig, Titelzeile bündig dazu */
@media (min-width: 761px) {
  .view { margin: 0 auto; }
  .top { padding-left: max(32px, calc((100% - 1180px) / 2 + 32px)); padding-right: max(32px, calc((100% - 1180px) / 2 + 32px)); }
}
.nav a:focus:not(:focus-visible), .bnav a:focus:not(:focus-visible) { outline: none; }