/* =====================================================================
   SCOUTED Online · Design „Stadionheft“
   Helles Papier, weiße Karten ohne harte Konturen, Rasengrün als einzige
   Hauptfarbe, Gold nur für die wichtigste Aktion. Zahlen und Titel in
   Big Shoulders Display, Text in Barlow. Farbflächen (Rasen, Arena, Bälle)
   sind Inseln mit heller Schrift.
   ===================================================================== */
.ol {color-scheme: light;
  --paper: #F4EFE4; --paper2: #EAE2D2; --card: #FFFFFF; --line-c: rgba(22,32,26,.10);
  --ink: #16201A; --ink2: #3D4A42; --muted: #7B776C;
  --pitch: #1F7A47; --pitch2: #15603A; --pitch3: #2E9A5D; --pitchbg: #E3F1E7;
  --gold: #F2C14E; --gold2: #D29E1E; --goldbg: #FDF3D6;
  --red: #D2483F; --redbg: #FBE6E3; --blue: #2C7FD1; --bluebg: #E4EFFA; --violet: #6C4BD1; --violetbg: #ECE6FB;
  --night: var(--paper); --night2: var(--card); --night3: var(--paper2);
  --chalk: var(--ink); --dim: var(--muted); --turf: var(--pitch); --turf2: var(--pitch2);
  --flood: var(--gold2); --flood2: #A87A10; --flag: var(--red); --sky: var(--blue); --epic: var(--violet);
  --f-big: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: Barlow, "Helvetica Neue", system-ui, sans-serif;
  --r: 16px; --sh: 0 1px 2px rgba(22,32,26,.06), 0 6px 18px -10px rgba(22,32,26,.25);}
.ol {background: var(--paper); color: var(--ink); font: 600 15px/1.4 var(--f-body);}
.ol h1, .ol h2, .ol h3 {font-family: var(--f-big); font-weight: 800; letter-spacing: .01em; text-transform: none;}
.ol .hint, .ol small {color: var(--muted);}
.ol .eyebrow {font: 700 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);}

/* Inseln mit heller Schrift */
.ol .kickcard, .ol .prohead, .ol .pvphead, .ol .pvptile, .ol .bx-stage, .ol .pvplot, .ol .pvpreveal, .ol .pvpres, .ol .tile.arena, .ol .tile.kick, .ol .nextcard, .ol .bx-card, .ol .pvpbar, .ol .s-splash, .ol .pslot.ready {
  --chalk: #FFFBF2; --dim: rgba(255,251,242,.78); --muted: rgba(255,251,242,.78); color: #FFFBF2;}
.ol .kickcard small, .ol .prohead small, .ol .pvphead small, .ol .pvptile small, .ol .tile.arena small, .ol .tile.kick small, .ol .nextcard small, .ol .pvplot small, .ol .pvpreveal small, .ol .pvpres small, .ol .pvpbar small, .ol .kickcard .eyebrow, .ol .prohead .eyebrow, .ol .pvphead .eyebrow, .ol .tile.kick .eyebrow, .ol .tile.arena .eyebrow, .ol .nextcard .eyebrow, .ol .pvplot .eyebrow, .ol .pvpreveal .eyebrow, .ol .pvpres .eyebrow {color: rgba(255,251,242,.8);}
.ol .kickcard h1, .ol .kickcard h2, .ol .prohead h1, .ol .pvphead h1, .ol .pvphead h2, .ol .pvplot h2, .ol .pvpreveal h2, .ol .pvpreveal h3, .ol .pvpres h1, .ol .nextcard b {color: #FFFBF2;}

/* Karten: weiß, feiner Rand, weicher Schatten */
.ol .panel, .ol .tile, .ol .mtile, .ol .ccard, .ol .mrowx, .ol .passrow, .ol .lot, .ol .rw, .ol .statgrid div, .ol .energybox, .ol .drill, .ol .posb, .ol .prow, .ol .hofcard, .ol .lr, .ol .gitem, .ol .mgcard, .ol .weekbar, .ol .eve-row, .ol .rk, .ol .clubrow, .ol .clubrow2, .ol .ballrow, .ol .scoutrow, .ol .decrow, .ol .h2pos, .ol .nextcard.tick {
  background: var(--card); border: 1px solid var(--line-c); box-shadow: var(--sh); color: var(--ink); border-radius: var(--r);}
.ol .panel {padding: 16px; gap: 12px;}
.ol .panel h2 {font-size: 22px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;}
.ol .panel h2 small {font: 600 13px var(--f-body); color: var(--muted);}
/* Innen: keine Karten in Karten, nur leichte Flächen */
.ol .panel .mrowx, .ol .panel .ccard, .ol .panel .quest, .ol .panel .lot, .ol .tres div, .ol .pplan, .ol .pattr, .ol .ptab div, .ol .pslot, .ol .stab > div, .ol .quests .quest {background: #F7F3EA; border: 0; box-shadow: none;}
.ol .quests {background: none; border: 0; box-shadow: none; padding: 0;}

/* Buttons */
.ol .btn {border: 0; border-radius: 14px; background: var(--pitch); color: #FFFBF2; font: 800 17px/1.1 var(--f-big); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 3px 0 var(--pitch2); text-shadow: none;}
.ol .btn:active:not(:disabled) {transform: translateY(2px); box-shadow: 0 1px 0 var(--pitch2);}
.ol .btn small {font: 600 12px var(--f-body); text-transform: none; letter-spacing: 0; opacity: .85;}
.ol .btn.gold, .ol .btn.huge {background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--gold2);}
.ol .btn.gold:active:not(:disabled), .ol .btn.huge:active:not(:disabled) {box-shadow: 0 1px 0 var(--gold2);}
.ol .btn.huge {font-size: 26px; padding: 16px 20px; border-radius: 18px;}
.ol .btn.ghost {background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(22,32,26,.18), 0 2px 0 rgba(22,32,26,.12);}
.ol .btn.ghost:active:not(:disabled) {box-shadow: inset 0 0 0 1.5px rgba(22,32,26,.18);}
.ol .btn.gem {background: var(--violet); color: #fff; box-shadow: 0 3px 0 #4B32A0;}
.ol .btn.sm {font-size: 14px; padding: 9px 12px; border-radius: 12px;}
.ol .btn:disabled {filter: grayscale(.7); opacity: .5;}
.ol .linkbtn {color: var(--ink2); font: 700 14px var(--f-body);}
.ol .chip2 {background: var(--card); color: var(--ink2); border: 1px solid var(--line-c); font: 700 12px var(--f-body); box-shadow: none;}
.ol .chip2.season {background: var(--pitchbg); color: var(--pitch2); border-color: transparent;}
.ol .chip2.dim {border: 0; background: none; color: var(--muted);}
.ol .bigin {background: var(--card); color: var(--ink); border: 1.5px solid rgba(22,32,26,.15); border-radius: 14px; font-family: var(--f-body); font-weight: 700; box-shadow: none;}
.ol .bigin:focus {border-color: var(--pitch); outline: none;}

/* Kopfzeile */
.ol .topbar {background: rgba(244,239,228,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-c); box-shadow: none;}
.ol .res {background: var(--card); border: 1px solid var(--line-c); color: var(--ink); box-shadow: none; font: 800 16px var(--f-big); letter-spacing: .02em;}

/* Untere Leiste */
.ol .bottomnav {background: rgba(255,255,255,.96); border-top: 1px solid var(--line-c); box-shadow: 0 -8px 24px -16px rgba(22,32,26,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.ol .bottomnav button {color: var(--muted); background: none;}
.ol .bottomnav button b {font: 700 11px var(--f-body); letter-spacing: .02em;}
.ol .bottomnav button.on {color: var(--pitch); background: var(--pitchbg); border: 0;}
.ol .bottomnav button.mid {background: var(--pitch); color: #FFFBF2; border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(21,96,58,.6); border-radius: 20px;}
.ol .bottomnav button.mid.on {background: var(--pitch2); color: #FFFBF2;}
.ol .bottomnav .dot {background: var(--red); color: #fff; border: 2px solid #fff;}

/* Sheets, Toast */
.ol .sheet {background: rgba(22,32,26,.45);}
.ol .sheet-in {background: var(--paper); color: var(--ink); border: 0; box-shadow: 0 -10px 40px -10px rgba(22,32,26,.4);}
.ol .sheet-in h2 {font-size: 26px;}

/* Ladebildschirm */
.ol .s-splash {background: radial-gradient(120% 70% at 50% 0%, var(--pitch3), var(--pitch2) 60%, #0F4529); min-height: 100vh;}
.ol .s-splash::before {content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 44px, transparent 44px 88px); pointer-events: none;}
.ol .s-splash::after {content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -150px 0 0 -110px; border: 2px solid rgba(255,255,255,.18); border-radius: 50%; pointer-events: none;}
.ol .floods {display: none;}
.ol .logo span {font: 900 64px/.9 var(--f-big); letter-spacing: .04em; color: #FFFBF2; text-shadow: none;}
.ol .logo em {font: 800 15px var(--f-body); letter-spacing: .3em; color: var(--ink); background: var(--gold); padding: 5px 12px 5px 16px; border-radius: 8px; transform: none; margin-top: 10px; box-shadow: none; border: 0;}
.ol .s-splash .loading {color: rgba(255,251,242,.8); font: 600 14px var(--f-body); margin-top: 18px; position: relative;}
.ol .s-login {background: var(--paper);}
.ol .s-login .logo span {color: var(--pitch);}

/* Startseite */
.ol .hero2 h1 {font: 900 44px/1 var(--f-big); color: var(--ink); text-shadow: none;}
.ol .hero2 small.up {color: var(--pitch3);} .ol .hero2 small.down {color: var(--red);}
.ol .h2pos {background: var(--card);}
.ol .h2pos b {font-family: var(--f-big); color: var(--ink);}
.ol .tile {padding: 12px 12px 14px;}
.ol .tile b {font: 900 28px/1 var(--f-big); color: var(--ink);}
.ol .tile.kick, .ol .kickcard, .ol .prohead {background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 26px, transparent 26px 52px), linear-gradient(165deg, var(--pitch3), var(--pitch2)); border: 0; box-shadow: 0 8px 20px -12px rgba(21,96,58,.8);}
.ol .tile.kick b, .ol .tile.arena b {color: #FFFBF2;}
.ol .tile.arena {background: linear-gradient(160deg, #8064DE, var(--violet)); border: 0; box-shadow: 0 8px 20px -12px rgba(108,75,209,.8);}
.ol .tile .tbar {background: rgba(255,255,255,.2);} .ol .tile .tbar i {background: var(--gold);}
.ol .kc-cd {font: 900 64px/1 var(--f-big); color: #FFFBF2; text-shadow: none;}
.ol .kc-days i {background: rgba(255,255,255,.18);}
.ol .kc-days i.done {background: rgba(255,255,255,.7);}
.ol .scoutrow {background: var(--card);}
.ol .scoutrow em, .ol .ballrow em {background: var(--pitchbg); color: var(--pitch2); border: 0; font: 800 12px var(--f-body);}
.ol .scoutrow.open em, .ol .scoutrow.hot em {background: var(--gold); color: var(--ink);}
.ol .scoutrow small {color: var(--muted);}
.ol .pslot {border-radius: 14px;}
.ol .pslot.ready {background: linear-gradient(160deg, #8064DE, var(--violet)); border: 0; box-shadow: 0 6px 14px -8px rgba(108,75,209,.8);}
.ol .pslot small {font: 600 11px var(--f-body);}
.ol .quest b {font: 700 13px var(--f-body);}
.ol .quest > div > i {background: rgba(22,32,26,.08);}
.ol .quest > div > i > i {background: var(--pitch);}
.ol .quest.ready {background: var(--pitchbg); box-shadow: none;}
.ol .quest.ready em {color: var(--pitch);}
.ol .passbar {background: rgba(22,32,26,.08);}
.ol .passbar i {background: var(--gold);}
.ol .passrow em {background: var(--red); color: #fff;}
.ol .ccard .cc-mid b {font: 800 18px/1.05 var(--f-big); letter-spacing: .01em;}
.ol .cc-tags span {background: #F1ECE1; color: var(--ink2); font: 700 11px var(--f-body); border: 0;}
.ol .cc-tags .boost, .ol .cc-tags .tgt {background: var(--goldbg); color: #7A5A00;}
.ol .cc-r b {font: 900 30px/1 var(--f-big); color: var(--ink);}
.ol .cc-r em.up {color: var(--pitch3);} .ol .cc-r em.down {color: var(--red);}
.ol .ccard.ending {box-shadow: inset 0 0 0 2px var(--red), var(--sh);}
.ol .decrow {background: var(--goldbg); border-color: rgba(210,158,30,.35);}
.ol .decrow em {background: var(--red); color: #fff;}
.ol .nextcard {border: 0; box-shadow: 0 8px 20px -12px rgba(22,32,26,.5);}
.ol .nextcard.tick small {color: var(--muted);}
.ol .nextcard.proentry {background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 26px, transparent 26px 52px), linear-gradient(165deg, var(--pitch3), var(--pitch2));}
.ol .nextcard b {font: 900 24px/1.05 var(--f-big);}
.ol .ballrow {border-color: var(--line-c);}

/* Arena */
.ol .mtile {padding: 14px;}
.ol .mtile b {font: 800 20px/1.05 var(--f-big);}
.ol .mtile .mdots i {background: rgba(22,32,26,.12);}
.ol .mtile .mdots i.used {background: var(--pitch);}
.ol .mtile .mdots em {color: var(--muted); font: 700 11px var(--f-body);}
.ol .pvptile {background: linear-gradient(120deg, #D2483F, var(--violet) 70%); border: 0; box-shadow: 0 8px 20px -12px rgba(108,75,209,.8);}
.ol .pvptile b {font: 900 24px var(--f-big);}
.ol .pvptile em {background: #FFFBF2; color: var(--ink); border: 0; font: 800 13px var(--f-body);}
.ol .wheel {box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line-c), 0 18px 30px -14px rgba(22,32,26,.5);}
.ol .wheelpanel .wpeak {color: var(--muted);}
.ol .wheelpanel .wpeak b {color: var(--pitch);}

/* Online-Duell */
.ol .pvphead {background: radial-gradient(120% 90% at 50% 0%, #8064DE, #4A2FA6 75%); border: 0; box-shadow: 0 10px 24px -14px rgba(74,47,166,.9);}
.ol .pvphead h1 {font: 900 36px var(--f-big);}
.ol .pvphead p {color: rgba(255,251,242,.85); font-weight: 600;}
.ol .pvpme div {background: rgba(255,255,255,.14); border: 0;}
.ol .pvpme b {font: 900 28px var(--f-big);}
.ol .pvpbar {background: var(--ink); border: 0;}
.ol .pvpbar .me b {color: var(--gold);}
.ol .pvpbar em {font: 900 20px var(--f-big); color: var(--gold);}
.ol .pvplot, .ol .pvpreveal, .ol .pvpres {background: linear-gradient(165deg, #24435F, #13283A); border: 0; box-shadow: 0 10px 24px -14px rgba(19,40,58,.9);}
.ol .pvpreveal.w, .ol .pvpres.w {background: linear-gradient(165deg, var(--pitch3), var(--pitch2));}
.ol .pvpreveal.l, .ol .pvpres.l {background: linear-gradient(165deg, #D2483F, #8A231D);}
.ol .pl-cd, .ol .pl-amt b, .ol .pl-sent b {font-family: var(--f-big); font-weight: 900;}
.ol .pl-amt b {color: var(--gold);}
.ol .pvpcode {font: 900 54px var(--f-big); color: var(--pitch); letter-spacing: .2em;}
.ol .pvpradar i {border-color: var(--pitch);}
.ol .pvpdp.up {color: #A6F0C3;} .ol .pvpdp.down {color: #FFC2BD;}
.ol .ptab div {border-radius: 10px; font-weight: 600;}
.ol .ptab div.me {background: var(--goldbg); box-shadow: none;}
.ol .ptab div b {font-family: var(--f-big); font-weight: 800; font-size: 16px;}
.ol .ptab div.up i {color: var(--pitch);} .ol .ptab div.down i {color: var(--red);}

/* Mein Spieler */
.ol .prohead h1 {font: 900 28px var(--f-big);}
.ol .proR b {font: 900 44px/1 var(--f-big); color: var(--gold);}
.ol .role {background: rgba(255,255,255,.16); color: #FFFBF2; border: 0;}
.ol .pk-vs {font: 800 20px var(--f-big); color: #FFFBF2;}
.ol .pplan {border-radius: 14px;}
.ol .pplan b {font: 800 15px var(--f-big);}
.ol .pplan.on {background: var(--goldbg); box-shadow: inset 0 0 0 2px var(--gold2);}
.ol .pscene {background: var(--goldbg); border: 0; box-shadow: none;}
.ol .pscene b {font: 800 18px var(--f-big);}
.ol .pscene p {color: var(--ink2);}
.ol .pscore b {background: var(--ink); color: #FFFBF2; font: 900 40px var(--f-big);}
.ol .pscore.w b {color: #8EE6B0;} .ol .pscore.l b {color: #FFA59E;} .ol .pscore.d b {color: var(--gold);}
.ol .pticker p {color: var(--ink2); border-left-color: var(--gold);}
.ol .tres b {font-family: var(--f-big); font-weight: 900;}
.ol .tres .rate.top {color: var(--gold2);} .ol .tres .rate.good {color: var(--pitch);} .ol .tres .rate.bad {color: var(--red);} .ol .tres .rate.ok {color: var(--ink2);}
.ol .rate {font-family: var(--f-big); font-weight: 900; border: 0;}
.ol .rate.good {background: var(--pitch);} .ol .rate.ok {background: #7E8C82;} .ol .rate.bad {background: var(--red);} .ol .rate.top {background: var(--gold); color: var(--ink);}
.ol .pattr {color: var(--ink);}
.ol .pattr i {background: rgba(22,32,26,.08);}
.ol .pattr i i {background: var(--pitch);}
.ol .fcfeed {color: var(--ink2); border-left-color: var(--pitch);}
.ol .fcpitch2 {border-radius: 16px; overflow: hidden;}
.ol .proev {box-shadow: inset 0 0 0 2px var(--gold), var(--sh);}
.ol .sulk {background: var(--redbg) !important; color: var(--red) !important;}
.ol .hofdel {color: var(--red);}
.ol .hofdel.sure {background: var(--redbg); color: var(--red);}

/* Bälle */
.ol .bx-stage {border: 0; box-shadow: 0 10px 24px -14px rgba(22,32,26,.7);}
.ol .bx-tier {font-family: var(--f-big); font-weight: 900;}
.ol .bx-front b {font-family: var(--f-big); font-weight: 900;}
.ol .bx-hint {color: var(--muted);}

/* Abend, Bericht */
.ol .evehead h1 {color: var(--pitch); text-shadow: none; font-family: var(--f-big); font-weight: 900;}

/* Kleinkram */
.ol .wheelpanel .mrowx {background: #F7F3EA;}
.ol .stab .sh {background: none !important;}
.ol .stab div b {font-family: var(--f-big);}

/* ---------- Palette fest: Creme, Rasengrün, Nachtgrün, Gold (Rot nur für Negatives) ---------- */
.ol {--night-g: #18261E; --night-g2: #223529; --violet: var(--night-g2); --violetbg: #E8EEE9; --blue: var(--pitch); --bluebg: var(--pitchbg);}
.ol .tile.arena, .ol .pvptile, .ol .pvphead, .ol .pslot.ready, .ol .pvplot, .ol .pvpreveal, .ol .pvpres {background: radial-gradient(120% 90% at 50% 0%, #2C4535, var(--night-g) 70%); box-shadow: 0 10px 24px -14px rgba(24,38,30,.9);}
.ol .tile.arena b, .ol .pvptile b, .ol .pvphead h1 {color: #FFFBF2;}
.ol .tile.arena small, .ol .pvptile small {color: rgba(255,251,242,.7);}
.ol .pvptile em {background: var(--gold); color: var(--ink);}
.ol .pvpme div {background: rgba(255,255,255,.08);}
.ol .pvpme b, .ol .pvphead .eyebrow {color: var(--gold);}
.ol .pvpbar {background: var(--night-g);}
.ol .pvpreveal.w, .ol .pvpres.w {background: linear-gradient(165deg, var(--pitch3), var(--pitch2));}
.ol .pvpreveal.l, .ol .pvpres.l {background: radial-gradient(120% 90% at 50% 0%, #4A2B27, #24130F 75%);}
.ol .btn.gem {background: var(--night-g2); box-shadow: 0 3px 0 var(--night-g);}
.ol .scoutrow em {background: var(--pitchbg); color: var(--pitch2);}
.ol .pvpradar i {border-color: var(--pitch);}
/* Ladebildschirm: Mittelkreis exakt um das Logo, Text unten */
.ol .s-splash {justify-content: center; align-items: center;}
.ol .s-splash::before {background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 52px, transparent 52px 104px);}
.ol .s-splash::after {width: 250px; height: 250px; margin: -125px 0 0 -125px; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 0 0 0 transparent;}
.ol .s-splash .logo {z-index: 1;}
.ol .s-splash .loading {position: absolute; left: 0; right: 0; bottom: calc(48px + env(safe-area-inset-bottom, 0px)); text-align: center; margin: 0;}
.ol .s-splash .halfway {position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,.12);}

/* ---------- Durchgang 1: Fehler aus der Menü-Prüfung ---------- */
.ol [hidden] {display: none !important;}
/* Zahlen springen nicht */
.ol .kc-cd, .ol .tile b, .ol .res, .ol .cc-r b, .ol .rk strong, .ol .hero2 h1, .ol .scd, .ol [data-cd], .ol .pl-amt b {font-variant-numeric: tabular-nums;}
/* Gold nur für Aktionen: Werte und Timer in Tinte bzw. Grün */
.ol .scd, .ol .scoutp .kc-cd {color: var(--ink); font: 900 52px/1 var(--f-big);}
.ol .rk strong {color: var(--ink); font: 800 18px var(--f-big);}
.ol .lot .mv b, .ol .lot-mv b, .ol .lot [class*=mv] b {color: var(--pitch);}
/* Liga */
.ol .rk {background: #F7F3EA; border: 0; box-shadow: none; border-radius: 12px; grid-template-columns: 22px 30px minmax(0, 1fr) auto;}
.ol .rk.bot {grid-template-columns: 22px 30px minmax(0, 1fr) auto 10px;}
.ol .rk.bot::after {color: var(--muted);}
.ol .rk.me {background: var(--goldbg); box-shadow: inset 0 0 0 1.5px var(--gold2);}
.ol .rk.up {box-shadow: inset 3px 0 0 var(--pitch);} .ol .rk.down {box-shadow: inset 3px 0 0 var(--red);}
.ol .rk.me.up, .ol .rk.me.down {box-shadow: inset 0 0 0 1.5px var(--gold2), inset 4px 0 0 var(--gold2);}
.ol .rk b {font: 700 14px var(--f-body); color: var(--ink);}
.ol .rk i {font: 800 16px var(--f-big); color: var(--muted);}
.ol .rk.ghost {background: transparent; border: 1.5px dashed rgba(22,32,26,.25); box-shadow: none;}
.ol .divhead {background: var(--card); border: 1px solid var(--line-c); box-shadow: var(--sh); border-radius: var(--r);}
.ol .divhead h1 {font: 900 40px/1 var(--f-big); color: var(--ink);}
.ol .divhead .eyebrow {color: var(--muted);}
.ol .divs div {background: #F7F3EA; border-bottom: 3px solid var(--dc);}
.ol .divs div.on {background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink);}
.ol .divs b {font: 700 10px var(--f-body); color: var(--ink2); text-transform: uppercase; letter-spacing: .04em;}
.ol .seg, .ol .subtabs, .ol .tabs3 {background: #EBE4D5;}
/* Markt */
.ol .livebanner {background: radial-gradient(120% 90% at 50% 0%, #2C4535, var(--night-g) 70%); color: #FFFBF2; box-shadow: 0 10px 24px -14px rgba(24,38,30,.9); border-radius: var(--r);}
.ol .livebanner b {font: 900 24px var(--f-big);}
.ol .livebanner:disabled {filter: none; opacity: 1; background: #E9E3D6; color: var(--muted); box-shadow: none;}
.ol .lot .pot, .ol .lot [class*=pot] {background: var(--pitchbg); color: var(--pitch2);}
/* Arena-Kacheln */
.ol .mdots {gap: 4px; flex-wrap: wrap;}
.ol .mtile .mdots em {margin-left: 0;}
.ol .mtile u {opacity: .5;}
/* Freunde */
.ol .frow {grid-template-columns: auto minmax(0, 1fr) auto;}
.ol .frow .bigin {font-size: 15px; padding: 10px 12px;}
/* Leiste: Markt-Icon als Lupe */
.ol .n-market {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E");}
.ol .cc-tags .pot {background: var(--pitchbg); color: var(--pitch2);}
.ol .cc-tags .bad {background: var(--redbg); color: var(--red);}
.ol .lot-mv b {color: var(--ink); font: 900 20px var(--f-big);}
.ol .divs {gap: 4px;}
.ol .divs b {font-size: 9px; letter-spacing: 0;}
.ol .divs div {padding: 7px 1px; min-width: 0; overflow: hidden;}
.ol .hofcard {background: #F7F3EA; border: 0; box-shadow: none;}
.ol .hofcard.real {background: var(--goldbg);}
.ol .hofcard b {font: 800 16px var(--f-big);}
.ol .hofcard em {color: var(--pitch); font-style: normal; font-weight: 700;}
.ol .hofcard u {background: var(--card); color: var(--ink2);}
.ol .statgrid div b {font: 900 22px var(--f-big);}
.ol .hofcard.arena, .ol .hofcard.career, .ol .hofcard.real {border: 0; box-shadow: none;}
.ol .hofcard.arena, .ol .hofcard.career {background: #F7F3EA;}
.ol .hofcard.real {background: var(--goldbg);}
.ol .hofcard i {color: var(--muted) !important; font: 800 14px var(--f-big);}
.ol .hofcard u {background: var(--card) !important; color: var(--ink2) !important; border: 1px solid var(--line-c); font: 700 9px var(--f-body); letter-spacing: .06em; text-decoration: none;}
.ol .hofcard.career u {background: var(--pitchbg) !important; color: var(--pitch2) !important; border: 0;}
.ol .hofcard .hof-face {background: var(--card);}
/* Hervorhebung in Text: auf Papier Grün, auf dunklen/grünen Flächen Gold */
.ol {--hi: var(--pitch); --flood: var(--gold);}
.ol .kickcard, .ol .prohead, .ol .pvphead, .ol .pvptile, .ol .bx-stage, .ol .pvplot, .ol .pvpreveal, .ol .pvpres, .ol .tile.arena, .ol .tile.kick, .ol .nextcard, .ol .pvpbar, .ol .s-splash, .ol .livebanner, .ol .evehead.isle {--hi: var(--gold);}
.ol .hero2 h1 {color: var(--ink);}
.ol .tres b {color: var(--ink);}
.ol .tres div:first-child b {color: var(--pitch);}

/* ---------- Team-Duell ---------- */
.ol .pvpmodes {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 12px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 12px;}
.ol .pvpmodes button {border: 0; border-radius: 9px; padding: 9px 6px; background: none; color: rgba(255,251,242,.75); font: 800 15px var(--f-big); letter-spacing: .03em;}
.ol .pvpmodes button.on {background: var(--gold); color: var(--ink);}
.ol .pvpgo {width: 100%; margin-bottom: 10px;}
.ol .pvpdots i.tq {background: rgba(242,193,78,.35);}
.ol .tslots {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px;}
.ol .tslots span {background: var(--card); border: 1px dashed rgba(22,32,26,.2); border-radius: 10px; padding: 6px 4px; text-align: center; min-width: 0;}
.ol .tslots span.ok {border: 1px solid var(--pitch); background: var(--pitchbg);}
.ol .tslots small {display: block; font: 700 9px var(--f-body); letter-spacing: .1em; color: var(--muted);}
.ol .tslots b {display: block; font: 800 13px var(--f-big); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .tacs {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.ol .tac {border: 0; border-radius: 14px; padding: 12px 8px; background: rgba(255,255,255,.08); color: #FFFBF2; display: grid; justify-items: center; gap: 3px; text-align: center;}
.ol .tac:active {transform: scale(.97);}
.ol .tac span {font-size: 26px;}
.ol .tac b {font: 900 18px var(--f-big); letter-spacing: .02em;}
.ol .tac small {font: 600 11px var(--f-body); color: rgba(255,251,242,.7); line-height: 1.25;}
.ol .pvpmatch {display: grid; gap: 10px; margin-bottom: 12px;}
.ol .pm-board {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--night-g); color: #FFFBF2; border-radius: 18px; padding: 16px 12px; opacity: 0; animation: ol-cardin .6s var(--bounce) forwards;}
.ol .pm-board div {display: flex; align-items: center; gap: 10px; min-width: 0;}
.ol .pm-board div:last-child {justify-content: flex-end;}
.ol .pm-board b {font: 700 13px var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .pm-board span {font: 900 52px/1 var(--f-big); color: var(--gold);}
.ol .pm-board em {font: 900 34px var(--f-big); font-style: normal; color: rgba(255,251,242,.5);}
.ol .pm-pens {margin: 0; text-align: center; font: 800 16px var(--f-big); color: var(--pitch); opacity: 0; animation: ol-cardin .5s forwards;}
.ol .pm-tick {display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line-c); border-radius: 16px; padding: 10px 12px; box-shadow: var(--sh);}
.ol .pm-tick p {margin: 0; display: grid; grid-template-columns: 34px 1fr; gap: 6px; font: 600 14px var(--f-body); color: var(--ink2); opacity: 0; transform: translateY(6px); animation: ol-cardin .4s forwards;}
.ol .pm-tick p i {font: 800 15px var(--f-big); font-style: normal; color: var(--muted);}
.ol .pm-tick p.me {color: var(--pitch2); font-weight: 800;}
.ol .pm-tick p.ht {grid-template-columns: 1fr; text-align: center; font: 800 13px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); padding: 4px 0;}
.ol .pvpmatch .pvpres {opacity: 0; animation: ol-cardin .6s var(--bounce) forwards; margin: 0;}
.ol .pm-lineups {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ol .pm-lineups > div {display: grid; gap: 4px; min-width: 0;}
.ol .pm-lineups > div > b {font: 800 16px var(--f-big);}
.ol .pm-lineups span {display: grid; grid-template-columns: 30px 1fr auto; gap: 4px; align-items: center; font: 600 13px var(--f-body); background: #F7F3EA; border-radius: 8px; padding: 4px 6px; min-width: 0; white-space: nowrap; overflow: hidden;}
.ol .pm-lineups span small {font: 700 9px var(--f-body); letter-spacing: .08em; color: var(--muted);}
.ol .pm-lineups span em {font: 800 14px var(--f-big); font-style: normal;}
.ol .pm-lineups span.fill {color: var(--muted);}
.ol .pm-lineups span.tac {grid-template-columns: 1fr; white-space: normal; background: var(--goldbg); font-size: 12px;}
.ol .trainp .row2 .btn {font-size: 15px;}
.ol .pl-need {margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font: 700 13px var(--f-body); color: rgba(255,251,242,.85);}
.ol .pl-need.fill {background: rgba(242,193,78,.18); color: var(--gold);}
.ol .pl-budget {margin: 0 0 10px; font: 600 12px var(--f-body); color: rgba(255,251,242,.65);}
.ol .howto ol {margin: 0; padding-left: 18px; display: grid; gap: 8px; font: 500 14px/1.4 var(--f-body); color: var(--ink2);}
.ol .howto b {color: var(--ink);}
.ol .tslots {margin: 0 0 10px;}
.ol .pl-cd {color: #FFFBF2;}
.ol .pl-cd.soon {color: #FF8A80; animation: ol-pulse 1s infinite;}
/* Hall-of-Fame-Team */
.ol .htpitch {background: repeating-linear-gradient(0deg, #2E9A5D 0 9%, #258A50 9% 18%);}
.ol .htslot {border: 0; background: none; padding: 0; cursor: pointer; color: #FFFBF2;}
.ol .htslot .sf {background: rgba(0,0,0,.18);}
.ol .htslot.empty .sf {display: grid; place-items: center; font: 900 22px var(--f-big); color: rgba(255,255,255,.8); box-shadow: 0 0 0 2px rgba(255,255,255,.55) !important; border: 0; background: rgba(255,255,255,.08);}
.ol .htslot b {font: 800 12px/18px var(--f-big) !important; color: #16201A !important;}
.ol .htslot.empty b {background: rgba(255,255,255,.6) !important;}
.ol .htslot small {color: #FFFBF2;}
/* Team-Leiste fest unten im Team-Duell */
.ol .tslots.dock {position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 480px; margin: 0 auto; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line-c); box-shadow: 0 -8px 24px -14px rgba(22,32,26,.45); grid-template-columns: repeat(5, minmax(0, 1fr)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.ol .tslots.dock em {position: absolute; top: -22px; left: 12px; font: 700 10px var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--paper); padding: 2px 8px; border-radius: 6px 6px 0 0;}
.ol .s-pvp, .ol .screen:has(.tslots.dock) {padding-bottom: 120px;}
.ol .pvpdots.lab i {height: auto; padding: 3px 0; border-radius: 6px; font: 700 9px var(--f-body); letter-spacing: .04em; text-align: center; font-style: normal; color: var(--ink2); background: rgba(22,32,26,.08);}
.ol .pvpdots.lab i.cur {background: var(--gold); color: var(--ink);}
.ol .pvpdots.lab i.w {background: var(--pitch); color: #fff;}
.ol .pvpdots.lab i.l {background: #C9C2B3; color: var(--ink2);}
.ol .pvpdots.lab i.tq {background: var(--goldbg); color: #7A5A00;}
.ol .offerlist {display: grid; gap: 4px;}
.ol .offerlist div {display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) 30px auto; gap: 8px; align-items: center; background: #F7F3EA; border-radius: 10px; padding: 6px 10px; font: 600 13px var(--f-body);}
.ol .offerlist i {font: 800 13px var(--f-big); font-style: normal; color: var(--muted);}
.ol .offerlist span {font: 700 10px var(--f-body); letter-spacing: .08em; color: var(--pitch2); background: var(--pitchbg); border-radius: 6px; text-align: center; padding: 2px 0;}
.ol .offerlist b {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .offerlist em {font: 900 17px var(--f-big); font-style: normal; text-align: right;}
.ol .offerlist small {font-size: 11px; color: var(--muted);}
.ol .kvbox {background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px;}
.ol .kvh {display: flex; justify-content: space-between; font: 700 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,251,242,.6);}
.ol .kv {display: grid; grid-template-columns: 34px 1fr 34px; grid-template-rows: auto auto; column-gap: 8px; align-items: center;}
.ol .kv > span {grid-column: 1 / -1; font: 600 12px var(--f-body); color: rgba(255,251,242,.75); text-align: center;}
.ol .kv b {font: 900 20px var(--f-big); text-align: center;}
.ol .kv b.up {color: #8EE6B0;} .ol .kv b.down {color: #FFA59E;}
.ol .kv > i {display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden;}
.ol .kv > i > i {display: block; height: 100%; background: var(--gold);}
.ol .pm-tick p {grid-template-columns: 34px 1fr auto;}
.ol .pm-tick p em {font: 700 11px var(--f-body); font-style: normal; color: var(--muted); align-self: center;}
.ol .pm-tick p.goal span {font-weight: 800; color: var(--ink);}
.ol .pm-tick p.goal.me span {color: var(--pitch2);}
.ol .pm-tick p.goal:not(.me) span {color: var(--red);}
.ol .pm-stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; opacity: 0; animation: ol-cardin .5s forwards;}
.ol .pm-stats div {background: var(--card); border: 1px solid var(--line-c); border-radius: 12px; padding: 8px; text-align: center;}
.ol .pm-stats b {display: block; font: 900 20px var(--f-big);}
.ol .pm-stats small {font: 600 11px var(--f-body); color: var(--muted);}

/* ---------- Start-Intro im neuen Look (Rasen statt Nacht) ---------- */
.ol .olintro {background: radial-gradient(120% 70% at 50% 0%, var(--pitch3), var(--pitch2) 60%, #0F4529);}
.ol .olintro::before {content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 52px, transparent 52px 104px);}
.ol .olintro::after {content: ""; position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border: 2px solid rgba(255,255,255,.14); border-radius: 50%;}
.ol .oi-pitch {display: none;}
.ol .oi-beam {background: conic-gradient(from 180deg at 50% 0%, transparent 165deg, rgba(255,255,255,.18) 178deg, rgba(255,255,255,.28) 180deg, rgba(255,255,255,.18) 182deg, transparent 195deg);}
.ol .oi-word {z-index: 1; font: 900 66px/1 var(--f-big); letter-spacing: .04em; color: #FFFBF2; text-shadow: none;}
.ol .oi-stamp {z-index: 1; top: calc(50% + 46px); font: 800 15px var(--f-body); letter-spacing: .3em; color: var(--ink); background: var(--gold); padding: 5px 12px 5px 16px; border-radius: 8px; box-shadow: none;}
.ol .oi-flash {background: #FFFBF2;}

/* ---------- Hall-of-Fame-Blatt ---------- */
.ol .hofhead {display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; background: linear-gradient(165deg, var(--pitch3), var(--pitch2)); border-radius: 18px; padding: 14px; color: #FFFBF2;}
.ol .hofhead .cc-face {width: 84px !important; height: 84px !important; border-radius: 50%; box-shadow: 0 0 0 4px #FFFBF2; background: #EDE6D7;}
.ol .hofhead .eyebrow {color: var(--gold);}
.ol .hofhead h2 {font: 900 26px/1.05 var(--f-big); color: #FFFBF2; text-align: left; margin: 2px 0;}
.ol .hofhead p {margin: 0; font: 600 13px var(--f-body); color: rgba(255,251,242,.8);}
.ol .hofpk {display: grid; justify-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 900 30px/1 var(--f-big); align-content: center; box-shadow: 0 0 0 3px #FFFBF2;}
.ol .hofpk small {font: 800 8px var(--f-body) !important; letter-spacing: .08em; color: var(--ink) !important; text-transform: uppercase;}
.ol .hofstats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;}
.ol .hofstats div {background: var(--card); border: 1px solid var(--line-c); border-radius: 12px; padding: 8px 4px; text-align: center;}
.ol .hofstats b {display: block; font: 900 24px var(--f-big);}
.ol .hofstats div:nth-child(2) b {color: var(--pitch);}
.ol .hofstats small {font: 600 11px var(--f-body);}
.ol .hoftitles {display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;}
.ol .hoftitles span {background: var(--goldbg); color: #7A5A00; border-radius: 999px; padding: 5px 12px; font: 700 13px var(--f-body);}
.ol .hofsec {background: var(--card); border: 1px solid var(--line-c); border-radius: 14px; padding: 12px;}
.ol .hofsec h3 {margin: 0 0 8px; font: 800 18px var(--f-big); display: flex; gap: 8px; align-items: baseline;}
.ol .hofsec h3 small {font: 600 12px var(--f-body);}
.ol .hofcurve {width: 100%; height: 70px; display: block;}
.ol .hofcurve-x {display: flex; justify-content: space-between; font: 600 11px var(--f-body); color: var(--muted);}
.ol .hofclubs {display: grid; gap: 4px;}
.ol .hofclubs div {display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: #F7F3EA; border-radius: 10px; padding: 7px 10px; font: 600 13px var(--f-body);}
.ol .hofclubs .dot {width: 8px; height: 8px; border-radius: 50%; background: var(--pitch);}
.ol .hofclubs div:last-child .dot {background: var(--gold);}
.ol .hofclubs b {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700;}
.ol .hofclubs small {color: var(--muted);}
.ol .hofclubs em {font: 800 13px var(--f-big); font-style: normal; color: var(--ink2);}
.ol .hofclubs div {display: flex !important;}
.ol .hofclubs div b {flex: 1 1 auto; min-width: 0;}
.ol .hofclubs div small, .ol .hofclubs div em {flex: none;}
.ol .rosum {display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: center;}
.ol .rosum div {background: var(--card); border: 1px solid var(--line-c); border-radius: 12px; padding: 8px 4px; text-align: center;}
.ol .rosum div:last-child {background: var(--pitchbg); border-color: transparent;}
.ol .rosum b {display: block; font: 900 18px var(--f-big);}
.ol .rosum small {font: 600 10px var(--f-body);}
.ol .rosum em {font: 900 18px var(--f-big); font-style: normal; color: var(--muted);}
.ol .ro-r small {white-space: nowrap;}
.ol .proentry.locked {background: #E3DCCC !important; color: var(--ink2);}
.ol .proentry.locked b {color: var(--ink2) !important;}
.ol .proentry.locked small, .ol .proentry.locked .eyebrow {color: var(--muted) !important;}

/* ---------- Obere Leiste: kompakt, immer oben ---------- */
.ol .topbar.tb2 {position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; background: rgba(244,239,228,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-c);}
.ol .tb-ag {display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; color: var(--ink);}
.ol .tb-ag b {font: 900 20px var(--f-big); letter-spacing: .06em;}
.ol .tb-ag small {font: 700 11px var(--f-body); color: var(--muted); background: var(--card); border: 1px solid var(--line-c); border-radius: 999px; padding: 2px 7px;}
.ol .tb-ag.gold .crest2, .ol .tb-ag.gold svg {filter: drop-shadow(0 0 4px rgba(242,193,78,.8));}
.ol .tb-res {display: flex; align-items: center; background: var(--card); border: 1px solid var(--line-c); border-radius: 999px; padding: 3px 4px; box-shadow: 0 2px 8px -6px rgba(22,32,26,.35);}
.ol .tb-i {display: flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 9px; font-size: 14px; color: var(--ink);}
.ol .tb-i b {font: 800 16px var(--f-big); letter-spacing: .02em; font-variant-numeric: tabular-nums;}
.ol .tb-i.streak:not(.lit) {filter: grayscale(.8); opacity: .6;}
.ol .tb-sep {width: 1px; height: 18px; background: var(--line-c);}
.ol .tb-coin {width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE68A, #F2C14E 55%, #C99A10); box-shadow: inset 0 0 0 1.5px #D29E1E;}
/* overflow-x: clip statt hidden, sonst klebt die obere Leiste nicht */
.ol-app, .ol .ol-app {overflow: visible !important; overflow-x: clip !important;}

/* ---------- Arena-Start (Duell, Bieterrunde, Karriere): Flutlicht-Abend statt Lila ---------- */
.ol .chintro, .ol .chintro.arena {background: radial-gradient(90% 60% at 50% 30%, #2C4535, #0E1812 75%); --chalk: #FFFBF2; --dim: rgba(255,251,242,.75); color: #FFFBF2;}
.ol .chi-rays {background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 8deg, transparent 8deg 22deg);}
.ol .chi-tag {color: var(--ink); background: var(--gold); font: 800 11px var(--f-body); letter-spacing: .2em;}
.ol .chi-box h1 {font: 900 44px var(--f-big); color: #FFFBF2; text-shadow: none;}
.ol .chi-vs {color: #FFFBF2; background: rgba(255,255,255,.08); font: 600 15px var(--f-body); padding: 9px 14px; border-radius: 12px;}
.ol .chi-vs b {color: var(--gold);}
.ol .chi-box li {background: rgba(255,255,255,.08); color: #FFFBF2; font: 600 15px var(--f-body);}
.ol .chi-box li:first-child {background: rgba(242,193,78,.18); color: var(--gold);}
.ol .chi-box li b {color: var(--gold);}
.ol .chi-tries, .ol .chi-box small, .ol .chi-box p {color: rgba(255,251,242,.75);}
.ol .chi-back {color: rgba(255,251,242,.8);}
.ol .chi-count {font: 900 130px var(--f-big); color: #FFFBF2; text-shadow: 0 0 40px rgba(242,193,78,.6);}
/* Gebots-Schieberegler */
.ol .pl-amt {grid-template-columns: 1fr;}
.ol .pvslide {-webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: 2px 0 0;}
.ol .pvslide::-webkit-slider-runnable-track {height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(255,255,255,.18) var(--p, 50%));}
.ol .pvslide::-moz-range-track {height: 10px; border-radius: 5px; background: rgba(255,255,255,.18);}
.ol .pvslide::-moz-range-progress {height: 10px; border-radius: 5px; background: var(--gold);}
.ol .pvslide::-webkit-slider-thumb {-webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: #FFFBF2; border: 3px solid var(--gold); box-shadow: 0 3px 8px rgba(0,0,0,.4);}
.ol .pvslide::-moz-range-thumb {width: 26px; height: 26px; border-radius: 50%; background: #FFFBF2; border: 3px solid var(--gold);}
.ol .pvslide-x {display: flex; justify-content: space-between; font: 600 11px var(--f-body); color: rgba(255,251,242,.6); margin-bottom: 8px;}
.ol .pl-amt.old {grid-template-columns: auto 1fr auto;}
.ol .pvpreveal .kc-cd {color: #FFFBF2;}
.ol .mgrid.three {grid-template-columns: repeat(3, minmax(0, 1fr));}
.ol .mgrid.three .mtile {padding: 12px 10px;}
.ol .mgrid.three .mtile b {font-size: 17px;}
.ol .mgrid.duo {grid-template-columns: 1fr 1fr;}
.ol .mtile.duel {background: radial-gradient(120% 90% at 50% 0%, #2C4535, var(--night-g) 70%); color: #FFFBF2; border: 0;}
.ol .mtile.duel b {color: #FFFBF2;} .ol .mtile.duel .mt-s {color: rgba(255,251,242,.7);}
.ol .mtile.locked {background: #E3DCCC; border: 0; box-shadow: none; color: var(--muted);}
.ol .mtile.locked b {color: var(--ink2);}

/* ---------- Letzte Lila-Reste ins Farbschema ---------- */
.ol.chmode {--night: #0E1812; --night2: #1B2A21; --night3: #24382B; --turf: var(--pitch); --turf2: var(--pitch2); background: var(--paper);}
.ol .nextcard.arenacard {background: radial-gradient(120% 90% at 50% 0%, #2C4535, var(--night-g) 70%); box-shadow: 0 8px 20px -12px rgba(24,38,30,.8);}
.ol .nextcard.arenacard small {color: rgba(255,251,242,.75);}
.ol .sfly {background: var(--pitchbg);}
.ol .sf-card {background: linear-gradient(170deg, var(--pitch3), var(--pitch2));}
.ol .locktip {background: var(--card); border: 1px solid var(--line-c); box-shadow: var(--sh); color: var(--ink);}
.ol .pvpradar i {border-color: var(--pitch);}
/* Countdown 3, 2, 1, Los: große Ziffer in einem goldenen Ring, mittig */
.ol .chi-count {width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; border: 6px solid var(--gold); background: rgba(255,255,255,.04); font: 900 130px/1 var(--f-big); color: #FFFBF2; text-shadow: none; padding-top: 6px;}
.ol .chi-count.go {font-size: 70px; letter-spacing: .04em; background: var(--gold); color: var(--ink); border-color: var(--gold);}

/* ---------- Laden und Intro hell wie die App: Creme, Tinte, Goldband, Ladebalken ---------- */
.ol .s-splash, .ol .olintro {background: var(--paper) !important; color: var(--ink);}
.ol .s-splash::before, .ol .olintro::before {background: none !important;}
.ol .s-splash::after, .ol .olintro::after {border-color: rgba(22,32,26,.08) !important;}
.ol .s-splash .halfway {background: rgba(22,32,26,.06);}
.ol .s-splash .logo span, .ol .oi-word {color: var(--ink) !important;}
.ol .s-splash .loading {color: var(--muted) !important;}
.ol .s-splash .loading::before {content: ""; display: block; width: 120px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: linear-gradient(90deg, var(--pitch) 0 40%, rgba(22,32,26,.1) 40%); background-size: 200% 100%; animation: ol-loadbar 1.2s ease-in-out infinite;}
@keyframes ol-loadbar {0% {background-position: 100% 0;} 100% {background-position: -100% 0;}}
.ol .oi-beam {display: none;}
.ol .oi-flash {background: var(--paper);}
.ol .s-splash {--muted: #7B776C; --chalk: var(--ink); --dim: #7B776C; padding: 0 !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.ol .s-splash .loading {color: #7B776C !important;}
.ol .s-splash .halfway {display: none;}
.ol .s-splash .logo {transform: translateY(-14px);}

/* ---------- Laden mit springendem Ball ---------- */
.ol .s-splash .loading::before {display: none;}
.ol .s-splash::after, .ol .olintro::after {display: none;}
.ol .sp-stage {position: relative; width: 120px; height: 150px; margin-bottom: 6px;}
.ol .sp-ball {position: absolute; left: 50%; bottom: 18px; width: 72px; height: 72px; margin-left: -36px; animation: ol-bounce 1s cubic-bezier(.3,0,.7,1) infinite;}
.ol .sp-ball svg {width: 100%; height: 100%; display: block; animation: ol-roll 2s linear infinite;}
.ol .sp-shadow {position: absolute; left: 50%; bottom: 8px; width: 64px; height: 12px; margin-left: -32px; border-radius: 50%; background: rgba(22,32,26,.18); filter: blur(2px); animation: ol-shadow 1s cubic-bezier(.3,0,.7,1) infinite;}
@keyframes ol-bounce {0%, 100% {transform: translateY(0) scale(1.08, .9);} 12% {transform: translateY(-8px) scale(.96, 1.04);} 50% {transform: translateY(-74px) scale(1);} 88% {transform: translateY(-8px) scale(.97, 1.03);}}
@keyframes ol-shadow {0%, 100% {transform: scale(1); opacity: .9;} 50% {transform: scale(.55); opacity: .4;}}
@keyframes ol-roll {to {transform: rotate(360deg);}}
.ol .s-splash .logo {transform: none;}
.ol .s-splash .loading {bottom: calc(56px + env(safe-area-inset-bottom, 0px));}
/* Intro: Ball fällt rein und springt, dann der Schriftzug */
.ol .olintro {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.ol .oi-stage {position: relative; width: 120px; height: 150px; margin-bottom: 4px; z-index: 1;}
.ol .oi-ball {animation: ol-drop-in .7s cubic-bezier(.3,0,.5,1) both, ol-bounce 1s .7s cubic-bezier(.3,0,.7,1) infinite;}
@keyframes ol-drop-in {0% {transform: translateY(-420px);} 70% {transform: translateY(0) scale(1.12, .86);} 85% {transform: translateY(-26px);} 100% {transform: translateY(0);}}
.ol .oi-word {position: relative; top: auto;}
.ol .oi-stamp {position: relative; top: auto; margin-top: 10px;}
/* Mentor-Sprechblase und Logo außerhalb des Ladebildschirms */
.ol .bubble {background: var(--card); color: var(--ink); border: 1px solid var(--line-c); box-shadow: var(--sh);}
.ol .bubble small {font: 700 11px var(--f-body); letter-spacing: .12em; color: var(--pitch);}
.ol .bubble p {font: 600 15px/1.45 var(--f-body); color: var(--ink2);}
.ol .coach-face {background: #EDE6D7; box-shadow: 0 0 0 3px var(--gold);}
.ol .logo span {color: var(--ink);}
/* Level mit XP-Leiste */
.ol .tb-lv {display: grid; gap: 3px; border: 0; background: var(--card); border: 1px solid var(--line-c); border-radius: 10px; padding: 3px 8px 5px; margin-right: auto; margin-left: -4px;}
.ol .tb-lv small {font: 800 11px var(--f-body); color: var(--ink2); background: none; border: 0; padding: 0;}
.ol .tb-lv > i {display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(22,32,26,.1); overflow: hidden;}
.ol .tb-lv > i > i {display: block; height: 100%; background: var(--pitch);}
.ol .xpbar {height: 14px; border-radius: 7px; background: rgba(22,32,26,.1); overflow: hidden;}
.ol .xpbar i {display: block; height: 100%; background: linear-gradient(90deg, var(--pitch3), var(--pitch)); border-radius: 7px;}
.ol .xpnum {margin: 0; text-align: center; font: 600 14px var(--f-body); color: var(--muted);}
.ol .xpnum b {font: 900 20px var(--f-big); color: var(--ink);}
.ol .sp-ball {width: 80px; height: 80px; margin-left: -40px; filter: drop-shadow(0 6px 10px rgba(22,32,26,.18));}
.ol .sp-ball svg {animation-duration: 2.6s;}
/* Wartebank */
.ol .benchp {background: #EFE9DC; border-style: dashed;}
.ol .benchrow {display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.6); opacity: .85;}
.ol .benchrow .cc-face {filter: grayscale(.8);}
.ol .benchrow b {font: 800 16px var(--f-big); display: block; color: var(--ink2);}
.ol .benchrow small {display: block; font: 600 11px var(--f-body); color: var(--muted);}
.ol .benchrow .bt {color: var(--red); font-weight: 700;}
.ol .benchbtns {display: grid; gap: 2px; justify-items: end;}
/* 3D-Ball: echte Sprungkurve (hoch abbremsen, runter beschleunigen), Stauchung am Boden, weicher Schatten */
.ol .sp-ball {width: 84px; height: 84px; margin-left: -42px; bottom: 16px; filter: none; transform-origin: 50% 100%; animation: ol-hop 1.05s infinite;}
.ol .sp-ball .ball3d {width: 100%; height: 100%; display: block;}
.ol .oi-ball {animation: ol-drop-in .75s cubic-bezier(.45,0,.9,.55) both, ol-hop 1.05s .75s infinite;}
@keyframes ol-hop {
  0% {transform: translateY(0) scale(1.14, .84); animation-timing-function: cubic-bezier(.2,.75,.4,1);}
  7% {transform: translateY(-10px) scale(.93, 1.08); animation-timing-function: cubic-bezier(.25,.6,.45,1);}
  50% {transform: translateY(-86px) scale(1, 1); animation-timing-function: cubic-bezier(.6,0,.8,.35);}
  93% {transform: translateY(-8px) scale(.95, 1.06); animation-timing-function: linear;}
  100% {transform: translateY(0) scale(1.14, .84);}
}
@keyframes ol-drop-in {0% {transform: translateY(-460px) scale(.96, 1.06);} 100% {transform: translateY(0) scale(1.14, .84);}}
.ol .sp-shadow {width: 78px; height: 14px; margin-left: -39px; bottom: 9px; background: radial-gradient(closest-side, rgba(22,32,26,.34), rgba(22,32,26,.12) 60%, transparent); filter: none; animation: ol-hopsh 1.05s infinite;}
@keyframes ol-hopsh {
  0% {transform: scale(1.08); opacity: 1; animation-timing-function: cubic-bezier(.2,.75,.4,1);}
  50% {transform: scale(.5); opacity: .35; animation-timing-function: cubic-bezier(.6,0,.8,.35);}
  100% {transform: scale(1.08); opacity: 1;}
}
.ol .olintro .sp-shadow {animation: ol-shin .75s cubic-bezier(.45,0,.9,.55) both, ol-hopsh 1.05s .75s infinite;}
@keyframes ol-shin {0% {transform: scale(.3); opacity: 0;} 100% {transform: scale(1.08); opacity: 1;}}
/* Ball kicken: Ball liegt unten, jeder Tipp schießt ihn hoch, oben Aufstieg, unten Stauchung */
.ol .bx-shadow {position: absolute; z-index: 1; left: 50%; bottom: 30px; width: 110px; height: 18px; margin-left: -55px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); opacity: 0; transition: opacity .3s;}
.ol .bx.kick .bx-shadow {opacity: 1;}
.ol .bx.kick .bx-ball {width: 118px; height: 118px; margin-top: 118px; animation: none; transform-origin: 50% 100%;}
.ol .bx.kick .bx-tier {bottom: auto; top: 18px;}
.ol .bx.kick .bx-ball.fly {animation: ol-kick .9s both;}
.ol .bx.kick .bx-ball.fly svg {animation: ol-kspin .9s cubic-bezier(.2,.7,.4,1) both;}
.ol .bx.flying .bx-shadow {animation: ol-kshadow .9s both;}
.ol .bx.wait .bx-ball {animation: ol-kwait 1s ease-in-out infinite;}
.ol .bx.wait .bx-hint {color: var(--pitch); animation: ol-kpulse 1s ease-in-out infinite;}
.ol .bx.open .bx-ball {margin-top: -30px; width: 150px; height: 150px;}
.ol .bx.open .bx-shadow {opacity: 0;}
@keyframes ol-kick {
  0% {transform: translateY(0) scale(1.18, .8); animation-timing-function: cubic-bezier(.15,.7,.35,1);}
  9% {transform: translateY(-16px) scale(.88, 1.14); animation-timing-function: cubic-bezier(.2,.65,.4,1);}
  46% {transform: translateY(calc(-1 * var(--kh, 100px))) scale(1.04); animation-timing-function: linear;}
  52% {transform: translateY(calc(-1 * var(--kh, 100px) + 4px)) scale(1.04); animation-timing-function: cubic-bezier(.6,0,.85,.4);}
  92% {transform: translateY(-6px) scale(.94, 1.07); animation-timing-function: linear;}
  100% {transform: translateY(0) scale(1.14, .86);}
}
@keyframes ol-kspin {from {transform: rotate(0);} to {transform: rotate(540deg);}}
@keyframes ol-kshadow {0%, 100% {transform: scale(1.1); opacity: 1;} 48% {transform: scale(.45); opacity: .3;}}
@keyframes ol-kwait {0%, 100% {transform: translateY(0) scale(1.06, .94);} 50% {transform: translateY(-6px) scale(.98, 1.02);}}
@keyframes ol-kpulse {50% {opacity: .45;}}
/* Ehrenplatz */
.ol .ccard.honor {border: 1.5px solid var(--gold); background: linear-gradient(135deg, #FFF8E4, #FFFFFF 55%); box-shadow: 0 0 0 3px rgba(242,193,78,.18), var(--sh);}
.ol .cc-tags .honortag {background: var(--gold); color: var(--ink); font-weight: 800;}
.ol .honorhint {background: #FFF6DC; border-radius: 12px; padding: 10px 12px; color: var(--ink2);}
/* Hall of Fame: weitere Karriere */
.ol .hofnow {color: var(--pitch) !important; font-weight: 800;}
.ol .hofnow.off {color: var(--muted) !important;}
.ol .hofnowbox {display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #EAF4EE; margin: 8px 0;}
.ol .hofnowbox b {font: 900 16px var(--f-big); color: var(--pitch); letter-spacing: .04em;}
.ol .hofnowbox.off {background: #F1EDE4;}
.ol .hofnowbox.off b {color: var(--ink);}
.ol .hofnowbox small {color: var(--ink2); font-weight: 600;}
/* Karten einlösen */
.ol .cogrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; margin: 6px 0 14px; perspective: 900px;}
.ol .cocard {position: relative; aspect-ratio: 5 / 7.4; opacity: 0; transform: translateY(24px) scale(.9); animation: co-in .5s cubic-bezier(.2,.9,.3,1.15) forwards;}
.ol .cocard:nth-child(2) {animation-delay: .08s;} .ol .cocard:nth-child(3) {animation-delay: .16s;} .ol .cocard:nth-child(4) {animation-delay: .24s;} .ol .cocard:nth-child(5) {animation-delay: .32s;} .ol .cocard:nth-child(6) {animation-delay: .4s;}
@keyframes co-in {to {opacity: 1; transform: none;}}
.ol .co-in {position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.35,.5,1);}
.ol .cocard.turn .co-in {transform: rotateY(180deg);}
.ol .cocard.turn {animation: co-in .5s forwards, co-lift .8s ease-out;}
@keyframes co-lift {40% {transform: translateY(-14px) scale(1.06);} 100% {transform: none;}}
.ol .co-front, .ol .co-back {position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 4px; overflow: hidden; text-align: center;}
.ol .co-front {background: var(--card); border: 1px solid var(--line-c); box-shadow: var(--sh);}
.ol .co-back {transform: rotateY(180deg); background: linear-gradient(160deg, #2E9A5D, #15603A); color: #FFFBF2; box-shadow: 0 10px 22px -10px rgba(21,96,58,.8);}
.ol .cocard.hof .co-back {background: linear-gradient(160deg, #FFE08A, #F2C14E 45%, #C9972B); color: var(--ink); box-shadow: 0 0 0 2px #FFF3C4, 0 0 26px -2px rgba(242,193,78,.9);}
.ol .co-face {width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #EDE6D7; display: block;}
.ol .co-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .co-front b, .ol .co-back b {font: 800 12px/1.1 var(--f-body); margin-top: 4px;}
.ol .co-front small, .ol .co-back small {font: 700 10px var(--f-body); opacity: .75;}
.ol .co-back em {font: 900 30px/1 var(--f-big); font-style: normal;}
.ol .co-tag {position: absolute; top: 6px; left: 0; right: 0; font: 800 8.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase;}
.ol .co-back .co-face {margin-top: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.6);}
.ol .co-shine {position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none;}
.ol .cocard.turn .co-shine {animation: ol-shine 1.1s .5s ease-out;}
.ol .co-xp {position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font: 900 15px var(--f-big); color: var(--pitch); opacity: 0;}
.ol .cocard.turn .co-xp {animation: co-xp 1.4s .45s ease-out forwards;}
@keyframes co-xp {0% {opacity: 0; transform: translateY(0) scale(.6);} 25% {opacity: 1; transform: translateY(-8px) scale(1.15);} 100% {opacity: 0; transform: translateY(-60px) scale(1);}}
.ol .coxp {margin: 0 16px 10px;}
.ol .coxp-top {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font: 800 14px var(--f-body); color: var(--ink2);}
.ol .coxp-top b {font: 900 22px var(--f-big); color: var(--ink);}
.ol .coxp-top b.pop {animation: ol-tierpop .5s var(--bounce); color: var(--pitch);}
.ol .coxp .xpbar i {transition: width .12s linear;}
.ol .co-back small {color: inherit; opacity: .85;}
/* 3D-Ball beim Öffnen, Funken über der Bühne */
.ol .bx {position: relative;}
.ol .bx-ball .ball3d {width: 100%; height: 100%; display: block; border-radius: 50%;}
.ol .bx-fx {position: absolute; left: 0; top: 0; width: 100%; height: 290px; pointer-events: none; z-index: 5;}
/* Hall of Fame: wer schon im Team steht */
.ol .htbadge {justify-self: start; display: inline-block; margin: 2px 0; padding: 2px 8px; border-radius: 999px; background: var(--pitch); color: #FFFBF2; font: 800 10px var(--f-body); letter-spacing: .06em; text-transform: uppercase;}
.ol .mrowx.inteam, .ol .panel .mrowx.inteam {background: #E3F1E8 !important; box-shadow: inset 0 0 0 1.5px var(--pitch);}
.ol .mrowx.inteam .cc-face {opacity: .75;}
.ol .mrowx.htcur, .ol .panel .mrowx.htcur {background: #FFF6DC !important; box-shadow: inset 0 0 0 1.5px var(--gold);}
.ol .mrowx.htcur .htbadge {background: var(--gold); color: var(--ink);}
.ol .hofcard.inteam {background: #E3F1E8 !important; box-shadow: inset 0 0 0 1.5px var(--pitch) !important;}
.ol .hofcard .htbadge {justify-self: center; order: -1;}
/* Ball gewonnen */
.ol .bwin {position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(22,32,26,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: bw-fade .25s ease-out;}
.ol .bwin.out {animation: bw-fade .3s ease-in reverse forwards;}
@keyframes bw-fade {from {opacity: 0;}}
.ol .bw-card {position: relative; overflow: hidden; width: min(320px, 100%); display: grid; justify-items: center; gap: 4px; padding: 18px 18px 16px; border-radius: 24px; background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--bc) 30%, #1E3A2A), #18261E 75%); color: #FFFBF2; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); animation: bw-pop .45s cubic-bezier(.2,.9,.3,1.25);}
@keyframes bw-pop {from {transform: scale(.7); opacity: 0;}}
.ol .bw-rays {position: absolute; left: 50%; top: 38%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--bc) 50%, transparent) 0 8deg, transparent 8deg 22deg); opacity: .22; animation: ol-rays 14s linear infinite; mask: radial-gradient(circle, #000 15%, transparent 60%); -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%); pointer-events: none;}
.ol .bw-stage {position: relative; width: 140px; height: 170px;}
.ol .bw-ball {position: absolute; left: 50%; bottom: 14px; width: 110px; height: 110px; margin-left: -55px; transform-origin: 50% 100%; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--bc) 70%, transparent)); animation: bw-drop .8s cubic-bezier(.45,0,.9,.55) both, ol-hop 1.05s .8s infinite;}
.ol .bw-ball .ball3d {width: 100%; height: 100%; display: block;}
@keyframes bw-drop {0% {transform: translateY(-260px) scale(.95, 1.06);} 100% {transform: translateY(0) scale(1.16, .84);}}
.ol .bw-shadow {position: absolute; left: 50%; bottom: 6px; width: 96px; height: 16px; margin-left: -48px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent); animation: ol-shin .8s cubic-bezier(.45,0,.9,.55) both, ol-hopsh 1.05s .8s infinite;}
.ol .bw-card .eyebrow {color: var(--gold); position: relative;}
.ol .bw-card h2 {margin: 0; font: 900 40px/1 var(--f-big); color: #FFFBF2; position: relative; animation: ol-tierpop .5s .75s var(--bounce) both;}
.ol .bw-btns {display: grid; gap: 6px; width: 100%; margin-top: 10px; position: relative;}
.ol .bw-btns .linkbtn {color: rgba(255,251,242,.75);}
.ol .bw-stage {height: 232px;}
.ol .bw-rays {top: 46%;}
/* Förder-Ticket: ultra selten, goldene Karte */
.ol .bx-card.ultra .bx-front {background: linear-gradient(160deg, #FFE08A, #F2C14E 45%, #C9972B) !important; box-shadow: inset 0 0 0 3px #FFF3C4, 0 0 26px 2px rgba(242,193,78,.9), 0 12px 20px -8px rgba(0,0,0,.7) !important;}
.ol .bx-card.ultra .bx-front b, .ol .bx-card.ultra .bx-front small {color: #16201A !important; text-shadow: none;}
.ol .bx-card.ultra.done .bx-front {animation: ol-holo 2.4s linear infinite;}
/* ---------- Mein Spieler: Ausdauer, Bekanntheit, Ausrüstung, Training, Laden ---------- */
.ol .kbars {display: grid; gap: 8px; margin: 0 16px 12px;}
.ol .kbar {display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-c); border-radius: 14px; padding: 9px 12px; box-shadow: var(--sh);}
.ol .kbar span {font: 800 12px var(--f-body); color: var(--ink2);}
.ol .kbar > i {display: block; height: 10px; border-radius: 5px; background: rgba(22,32,26,.08); overflow: hidden;}
.ol .kbar > i > i {display: block; height: 100%; border-radius: 5px; transition: width .5s;}
.ol .kbar.sta > i > i {background: linear-gradient(90deg, #F2C14E, #E8A623);}
.ol .kbar.fame > i > i {background: linear-gradient(90deg, var(--pitch3), var(--pitch));}
.ol .kbar b {font: 900 16px var(--f-big); color: var(--ink); font-variant-numeric: tabular-nums;}
.ol .kgear {display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px;}
.ol .kslot {aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 14px; border: 1.5px dashed rgba(22,32,26,.2); background: #F7F3EA; cursor: pointer; padding: 0;}
.ol .kslot span {font-size: 26px; line-height: 1; filter: grayscale(1); opacity: .45;}
.ol .kslot small {font: 700 9px var(--f-body); color: var(--muted);}
.ol .kslot.on {border: 1.5px solid var(--pitch); background: #EAF4EE;}
.ol .kslot.gold {border: 1.5px solid #C9972B; background: linear-gradient(160deg, #FFF3C4, #F2C14E); box-shadow: 0 0 14px -2px rgba(242,193,78,.8);}
.ol .kslot.on span, .ol .kslot.gold span {filter: none; opacity: 1;}
.ol .kslot b {font: 900 15px var(--f-big); color: var(--pitch);}
.ol .kslot.gold b {color: var(--ink);}
.ol .kstyle {display: flex; flex-wrap: wrap; gap: 6px; align-items: center;}
.ol .kstyle > span {font: 800 12px var(--f-body); color: var(--ink2); margin-right: 4px;}
.ol .kjobs {display: grid; gap: 8px; margin-bottom: 10px;}
.ol .kjob {display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line-c); border-radius: 14px; background: #F7F3EA; cursor: pointer;}
.ol .kjob:disabled {opacity: .45;}
.ol .kj-ic {width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; border-radius: 12px; background: var(--card); box-shadow: var(--sh);}
.ol .kjob b {font: 800 14px/1.2 var(--f-body); color: var(--ink);}
.ol .kjob small {display: block; margin-top: 3px; font: 700 11.5px var(--f-body); color: var(--muted);}
.ol .kjob em {font-style: normal; display: grid; justify-items: end; gap: 2px;}
.ol .kjob em b {font: 900 16px var(--f-big);}
.ol .kjob em small {color: #B07D12; margin: 0;}
.ol .krun {margin: 0 16px 12px; padding: 18px 16px 14px; border-radius: 20px; text-align: center; color: #FFFBF2; background: radial-gradient(80% 60% at 50% 30%, #2E6B47, #18261E 75%); box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); display: grid; justify-items: center; gap: 6px; overflow: hidden; position: relative;}
.ol .krun .eyebrow {color: var(--gold);}
.ol .krun h2 {margin: 0; font: 900 24px/1.1 var(--f-big); color: #FFFBF2; max-width: 300px;}
.ol .kr-ic {font-size: 72px; line-height: 1; animation: kr-bob 1.1s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0,0,0,.4));}
.ol .krun.done .kr-ic {animation: ol-tierpop .6s var(--bounce);}
@keyframes kr-bob {50% {transform: translateY(-8px) rotate(-6deg);}}
.ol .kr-bar {width: 100%; height: 12px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 6px;}
.ol .kr-bar i {display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F2C14E, #FFE08A); animation: kr-fill linear forwards;}
@keyframes kr-fill {from {width: 0;} to {width: 100%;}}
.ol .kr-cd {font: 900 30px var(--f-big); font-variant-numeric: tabular-nums;}
.ol .krun .linkbtn {color: rgba(255,251,242,.7);}
.ol .kshop {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;}
.ol .kitem {display: grid; justify-items: center; text-align: center; gap: 3px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line-c); background: #F7F3EA; cursor: pointer;}
.ol .kitem span {font-size: 30px; line-height: 1;}
.ol .kitem b {font: 800 12.5px/1.15 var(--f-body); color: var(--ink);}
.ol .kitem small {font: 700 11px var(--f-body); color: var(--pitch);}
.ol .kitem em {font: 900 16px var(--f-big); font-style: normal; color: var(--ink); margin-top: 2px;}
.ol .kitem:disabled {opacity: .5;}
.ol .kitem.gold {background: linear-gradient(160deg, #FFF3C4, #F7E3A0); border-color: #C9972B; box-shadow: 0 0 16px -4px rgba(242,193,78,.9);}
.ol .kitem.sold {opacity: .4; cursor: default; align-content: center;}
.ol .kattrs {display: grid; gap: 8px;}
.ol .kattr {display: grid; grid-template-columns: 26px 70px 1fr 54px; align-items: center; gap: 8px;}
.ol .kattr span {font-size: 18px;}
.ol .kattr b {font: 800 13px var(--f-body);}
.ol .kattr > i {display: flex; height: 10px; border-radius: 5px; background: rgba(22,32,26,.08); overflow: hidden;}
.ol .kattr > i > i {display: block; height: 100%; background: var(--ink);}
.ol .kattr > i > i.kb {background: #3FCB7E;}
.ol .kattr em {font: 900 18px var(--f-big); font-style: normal; text-align: right;}
.ol .kattr em small {font: 800 12px var(--f-body); color: var(--pitch); margin-left: 2px;}
.ol .kitemrow {display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #F7F3EA; margin-bottom: 8px;}
.ol .kitemrow.gold {background: linear-gradient(160deg, #FFF3C4, #F7E3A0);}
.ol .kitemrow span {font-size: 26px;}
.ol .kitemrow div {display: grid;}
.ol .kitemrow small {color: var(--pitch); font-weight: 700;}
.ol .kacts {display: grid; justify-items: end; gap: 4px;}
.ol .kgear {grid-template-columns: repeat(5, minmax(0, 1fr));}
/* Sponsoren */
.ol .kspo {display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #F7F3EA; margin-bottom: 8px;}
.ol .kspo span {font-size: 28px; text-align: center;}
.ol .kspo div {display: grid; gap: 2px;}
.ol .kspo small {color: var(--muted); font-weight: 600; line-height: 1.3;}
.ol .kspon.on {background: linear-gradient(160deg, #FFF8E4, #FFFFFF 60%); border: 1.5px solid var(--gold);}
/* ---------- Spieler-Modus als eigenes Spiel ---------- */
.ol .s-pro {padding-top: 0; padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));}
.ol .ptop {position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: rgba(244,239,228,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-c); margin: 0 0 12px;}
.ol .pback {border: 0; background: var(--card); border: 1px solid var(--line-c); border-radius: 999px; padding: 7px 12px; font: 800 13px var(--f-body); color: var(--ink); cursor: pointer;}
.ol .pt-res {margin-left: auto; display: flex; gap: 10px; font: 700 12px var(--f-body); color: var(--ink2);}
.ol .pt-res b {font: 900 15px var(--f-big); color: var(--ink);}
.ol .pact {display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; width: calc(100% - 32px); margin: 0 16px 12px; padding: 9px 12px; border: 0; border-radius: 14px; background: #18261E; color: #FFFBF2; text-align: left; cursor: pointer; box-shadow: 0 10px 22px -14px rgba(0,0,0,.7);}
.ol .pact span {font-size: 20px;}
.ol .pact b {font: 800 13px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .pact em {font: 900 16px var(--f-big); font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums;}
.ol .pact.done {background: linear-gradient(90deg, #1F7A47, #2E9A5D); animation: ol-kpulse 1.2s ease-in-out infinite;}
.ol .pbody {display: block;}
.ol .pnav {position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: #18261E; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.5); max-width: 560px; margin: 0 auto;}
.ol .pnav button {position: relative; display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: rgba(255,251,242,.6); padding: 6px 0; border-radius: 14px; cursor: pointer;}
.ol .pnav button span {font-size: 22px; line-height: 1; filter: grayscale(.6);}
.ol .pnav button small {font: 800 10.5px var(--f-body); letter-spacing: .02em;}
.ol .pnav button.on {color: #FFFBF2; background: rgba(255,255,255,.08);}
.ol .pnav button.on span {filter: none; transform: translateY(-1px);}
.ol .pnav button i {position: absolute; top: 2px; right: 22%; min-width: 16px; height: 16px; border-radius: 8px; background: #D2483F; color: #fff; font: 900 10px/16px var(--f-body); font-style: normal; text-align: center; padding: 0 4px;}
/* Spielerkarte */
.ol .pcard {position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 6px 14px; margin: 0 16px 12px; padding: 16px; border-radius: 22px; color: #FFFBF2; background: linear-gradient(160deg, #2E9A5D, #15603A); box-shadow: 0 16px 30px -18px rgba(21,96,58,.9); overflow: hidden;}
.ol .pcard::before {content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 22px, transparent 22px 44px); pointer-events: none;}
.ol .pc-face {grid-row: span 2; width: 132px; height: 132px; border-radius: 20px; background: radial-gradient(circle at 50% 35%, #FFFBF2, #E9E1CF); overflow: hidden; box-shadow: 0 0 0 4px rgba(255,251,242,.35); position: relative;}
.ol .pc-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .pc-info {position: relative; display: grid; align-content: start; gap: 3px; min-width: 0;}
.ol .pc-info .eyebrow {color: var(--gold);}
.ol .pc-info h1 {margin: 0; font: 900 28px/1 var(--f-big); color: #FFFBF2;}
.ol .pc-info small {color: rgba(255,251,242,.8); font-weight: 600;}
.ol .pc-info .role {justify-self: start; margin-top: 4px;}
.ol .pc-r {position: absolute; top: 14px; right: 16px; display: grid; justify-items: center; z-index: 1;}
.ol .pc-r b {font: 900 46px/0.9 var(--f-big); color: var(--gold);}
.ol .pc-r small {font: 800 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,251,242,.75);}
.ol .pc-gear {grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; position: relative;}
.ol .pc-gear .kslot {background: rgba(255,251,242,.12); border-color: rgba(255,251,242,.3);}
.ol .pc-gear .kslot small {color: rgba(255,251,242,.7);}
.ol .pc-gear .kslot.on {background: #FFFBF2; border-color: #FFFBF2;}
.ol .kbuffs {display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 16px 12px;}
.ol .kbuffs span {background: #FFF6DC; border: 1px solid #F2C14E; border-radius: 999px; padding: 4px 10px; font: 700 12px var(--f-body);}
.ol .kbuffs em {font-style: normal; color: #B07D12; font-weight: 800;}
.ol .kjob.work .kj-ic {background: #FFF6DC;}
.ol .kjob.work em b {color: var(--pitch);}
.ol .kwell {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .kwellb {display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line-c); background: #F7F3EA; cursor: pointer;}
.ol .kwellb span {font-size: 30px;}
.ol .kwellb b {font: 800 12px/1.15 var(--f-body); text-align: center;}
.ol .kwellb small {font: 800 12px var(--f-body); color: #B07D12;}
.ol .kwellb em {font: 900 14px var(--f-big); font-style: normal;}
.ol .kwellb:disabled {opacity: .45;}
/* Kalle vom Kiosk */
.ol .kshopkeeper {display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin: 0 16px 12px; padding: 12px 14px; border-radius: 18px; background: #18261E; color: #FFFBF2;}
.ol .ksk-face {width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: radial-gradient(circle at 50% 35%, #FFE08A, #F2C14E); animation: kr-bob 2.4s ease-in-out infinite;}
.ol .kshopkeeper b {font: 900 18px var(--f-big); color: var(--gold);}
.ol .kshopkeeper p {margin: 2px 0 0; font: 600 13.5px/1.35 var(--f-body); color: rgba(255,251,242,.9); font-style: italic;}
.ol .kitem {position: relative;}
.ol .ksale {position: absolute; top: -6px; right: -6px; background: #D2483F; color: #fff; font: 900 11px var(--f-body); padding: 3px 7px; border-radius: 999px; text-decoration: none; transform: rotate(8deg);}
.ol .kitem.food small {color: var(--ink2); font-weight: 600;}
/* Vereinsgelände */
.ol .kfac-yard {position: relative; height: 110px; border-radius: 16px; display: grid; place-items: center; font-size: 56px; background: linear-gradient(180deg, #CFE8F5 0 45%, #2E9A5D 45%, #1F7A47); overflow: hidden; margin-bottom: 10px;}
.ol .kfac-yard span {position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 20px;}
.ol .kfac-cash {display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: #FFF6DC; margin-bottom: 10px;}
.ol .kfac-cash span {font: 800 12px var(--f-body); color: var(--ink2);}
.ol .kfac-cash b {font: 900 22px var(--f-big);}
.ol .kfac-cash .row2 {grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .kfacs {display: grid; gap: 8px;}
.ol .kfacb {display: grid; grid-template-columns: 36px 1fr auto; gap: 2px 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-c); background: #F7F3EA; cursor: pointer;}
.ol .kfacb span {grid-row: span 2; font-size: 26px;}
.ol .kfacb b {font: 800 13.5px var(--f-body);}
.ol .kfacb b i {font-style: normal; color: var(--pitch); font-weight: 800; margin-left: 4px;}
.ol .kfacb small {color: var(--muted); font-weight: 600; grid-column: 2;}
.ol .kfacb em {grid-row: 1 / span 2; grid-column: 3; font: 900 15px var(--f-big); font-style: normal;}
.ol .kfacb:disabled {opacity: .55;}
.ol .kfac-log {margin-top: 10px; display: grid; gap: 4px;}
.ol .kfac-log p {margin: 0; font: 600 12px var(--f-body); color: var(--muted);}
/* Postfach */
.ol .kmail {display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-c);}
.ol .kmail span {font-size: 20px;}
.ol .kmail p {margin: 0; font: 600 13.5px/1.4 var(--f-body); color: var(--ink2);}
.ol .kmail.new p {color: var(--ink); font-weight: 800;}
/* Spiel ansehen */
.ol .krep {display: grid; gap: 10px;}
.ol .kr-top {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; padding: 12px; border-radius: 16px; background: #18261E; color: #FFFBF2;}
.ol .kr-top b {font: 800 13px var(--f-body);}
.ol .kr-top em {font: 900 34px var(--f-big); font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums;}
.ol .kr-min {text-align: center; font: 900 22px var(--f-big); color: var(--pitch);}
.ol .kr-pitch {position: relative; height: 34px; border-radius: 10px; background: repeating-linear-gradient(90deg, #2E9A5D 0 30px, #27894F 30px 60px); overflow: hidden;}
.ol .kr-pitch::after {content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.5);}
.ol .kr-ball {position: absolute; top: 7px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ddd 60%, #999); box-shadow: 0 2px 4px rgba(0,0,0,.4); transition: left .1s linear;}
.ol .kr-scene {display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; min-height: 76px; padding: 8px 12px; border-radius: 16px; background: #F7F3EA;}
.ol .kr-scene.show {animation: ol-tierpop .35s var(--bounce);}
.ol .kr-scene.me {background: #FFF6DC;}
.ol .kr-scene.goal {background: linear-gradient(90deg, #EAF4EE, #FFF6DC);}
.ol .kr-scene.bad {background: #FBE3E0;}
.ol .kr-face {width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #EDE6D7;}
.ol .kr-face canvas {width: 100% !important; height: 100% !important;}
.ol .kr-scene p {margin: 0; font: 800 15px/1.3 var(--f-body);}
.ol .kr-log {max-height: 200px; overflow: auto; display: grid; gap: 4px;}
.ol .kr-log p {margin: 0; font: 600 13px var(--f-body); color: var(--ink2);}
.ol .kr-log i {font-style: normal; font-weight: 900; color: var(--pitch); margin-right: 6px;}
.ol .pc-info {padding-right: 58px;}
.ol .pc-info h1 {font-size: 26px; overflow-wrap: anywhere;}
/* Umschalter Agentur ⇄ Spieler */
.ol .tb-mode {border: 0; background: var(--pitch); color: #FFFBF2; border-radius: 999px; padding: 6px 11px; font: 800 12px var(--f-body); cursor: pointer; margin-right: 6px; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(21,96,58,.8);}
.ol .pback {background: var(--pitch); color: #FFFBF2; border-color: var(--pitch);}
/* Verein mit Freunden */
.ol .krc.on {border: 1.5px solid var(--pitch);}
.ol .krc-head {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px;}
.ol .krc-head h2 {margin: 2px 0 0;}
.ol .krc-code {border: 1px dashed var(--pitch); background: #EAF4EE; color: var(--ink); border-radius: 12px; padding: 8px 10px; font: 700 12px var(--f-body); cursor: pointer; white-space: nowrap;}
.ol .krc-code b {font: 900 17px var(--f-big); letter-spacing: .08em; color: var(--pitch);}
.ol .krc-row {display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; align-items: center;}
.ol .krc-row .bigin {margin: 0;}
.ol .krc-mem {display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;}
.ol .krc-mem > div {position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: #F7F3EA; text-align: center;}
.ol .krc-mem > div.me {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px var(--gold);}
.ol .krc-face {width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #EDE6D7; display: block;}
.ol .krc-face canvas {width: 100% !important; height: 100% !important;}
.ol .krc-mem b {font: 800 12px/1.15 var(--f-body);}
.ol .krc-mem small {font: 700 10.5px var(--f-body); color: var(--muted);}
.ol .krc-mem i {position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #CFC8B8;}
.ol .krc-mem i.on {background: #3FCB7E; box-shadow: 0 0 0 3px rgba(63,203,126,.25);}
.ol .krc-chat {max-height: 240px; overflow: auto; display: grid; gap: 6px; padding: 4px 2px;}
.ol .krc-chat p {margin: 0; justify-self: start; max-width: 85%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #F7F3EA; font: 600 13.5px/1.35 var(--f-body);}
.ol .krc-chat p b {display: block; font: 800 11px var(--f-body); color: var(--pitch);}
.ol .krc-chat p.me {justify-self: end; background: #EAF4EE; border-radius: 14px 14px 4px 14px;}
/* ---------- Eigene Symbole im Spieler-Modus ---------- */
.ol .ic {width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none;}
.ol .pt-res span {display: inline-flex; align-items: center; gap: 3px;}
.ol .pt-res span:nth-child(1) .ic, .ol .pt-res span:nth-child(2) .ic {color: #D9A21E;}
.ol .pt-res span:nth-child(3) .ic {color: var(--pitch);}
.ol .pt-res span:nth-child(4) .ic {color: var(--ink2);}
.ol .pnav button span {filter: none;}
.ol .pnav button span .ic {width: 23px; height: 23px; vertical-align: 0;}
.ol .pnav button.on span .ic {color: var(--gold);}
.ol .pact span .ic {width: 22px; height: 22px; color: var(--gold);}
.ol .kslot span {filter: none; opacity: 1;}
.ol .kslot span .ic {width: 26px; height: 26px; color: rgba(22,32,26,.35);}
.ol .pc-gear .kslot span .ic {color: rgba(255,251,242,.55);}
.ol .kslot.on span .ic, .ol .pc-gear .kslot.on span .ic {color: var(--pitch);}
.ol .kslot.gold span .ic {color: #7A5A00;}
.ol .kbar span .ic {color: #D9A21E;}
.ol .kbar.fame span .ic {color: var(--pitch);}
.ol .kbuffs .ic {color: #B07D12;}
.ol .kattr span .ic {width: 20px; height: 20px; color: var(--pitch);}
.ol .kj-ic .ic {width: 26px; height: 26px; color: var(--pitch);}
.ol .kjob.work .kj-ic .ic {color: #B07D12;}
.ol .kjob small .ic, .ol .kjob em .ic {width: 1em; height: 1em;}
.ol .kr-ic .ic {width: 78px; height: 78px; color: var(--gold); stroke-width: 1.5;}
.ol .kwellb span .ic {width: 30px; height: 30px; color: var(--pitch);}
.ol .kwellb small .ic {width: 1em; height: 1em;}
.ol .kitem span .ic {width: 30px; height: 30px; color: var(--pitch);}
.ol .kitem.gold span .ic {color: #7A5A00;}
.ol .kitem.food span .ic {color: #B07D12;}
.ol .kfacb span .ic {width: 26px; height: 26px; color: var(--pitch);}
.ol .kmail span .ic {width: 20px; height: 20px; color: var(--pitch);}
.ol .kmail.new span .ic {color: #D9A21E;}
.ol .kstyle .chip2 .ic {width: 15px; height: 15px; margin-right: 2px;}
.ol .panel h2 .ic {width: 22px; height: 22px; color: var(--pitch); vertical-align: -0.15em;}
.ol .krc-code .ic {width: 15px; height: 15px; color: var(--pitch);}
.ol .krc-mem .ic.own {width: 13px; height: 13px; color: #D9A21E; margin-left: 3px;}
.ol .spb {display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pitch); color: #FFFBF2; font: 900 18px var(--f-big); flex: none; vertical-align: middle;}
.ol .kspo .spb {width: 40px; height: 40px; font-size: 22px;}
.ol .panel h2 .spb {width: 28px; height: 28px; font-size: 16px; margin-right: 4px;}
.ol .ksk-face {font-size: 0; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFE08A, #F2C14E);}
.ol .ksk-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .kfac-yard {font-size: 0; color: #FFFBF2;}
.ol .kfac-yard .ic.big {width: 72px; height: 72px; stroke-width: 1.4; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));}
.ol .kfac-yard.lv0 .ic.big {opacity: .55; width: 54px; height: 54px;}
.ol .kfac-yard.lv1 .ic.big {width: 62px; height: 62px;}
.ol .kfac-yard.lv3 .ic.big, .ol .kfac-yard.lv4 .ic.big {width: 86px; height: 86px; color: #FFE08A;}
.ol .kfac-yard span {display: flex; justify-content: center; gap: 8px;}
.ol .kfac-yard span i {display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px; border-radius: 999px; background: rgba(255,251,242,.92); color: var(--pitch); font-style: normal;}
.ol .kfac-yard span i .ic {width: 14px; height: 14px;}
.ol .kfac-yard span i b {font: 900 13px var(--f-big);}
.ol .pcard {grid-template-columns: 104px 1fr;}
.ol .pc-face {width: 104px; height: 104px;}
.ol .pc-info {padding-right: 48px;}
.ol .pc-info h1 {font-size: 24px;}
.ol .pc-info small {font-size: 12px; line-height: 1.3;}
.ol .pc-r b {font-size: 38px;}
/* ---------- Vereinsgelände als Illustration ---------- */
.ol .kfac-head {display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px;}
.ol .kfac-crest svg {width: 46px; height: auto; display: block;}
.ol .kfac-head h2 {margin: 2px 0 0;}
.ol .kmotto {display: block; font: 600 12.5px var(--f-body); color: var(--muted); font-style: italic;}
.ol .yardbox {border-radius: 16px; overflow: hidden; box-shadow: 0 10px 22px -16px rgba(0,0,0,.6); margin-bottom: 6px;}
.ol .yard {display: block; width: 100%; height: auto;}
.ol .yard [data-yb] {cursor: pointer;}
.ol .yard .ylv {transition: transform .15s;}
.ol .yjoke {margin: 2px 2px 12px; font: 600 12.5px/1.35 var(--f-body); color: var(--muted); font-style: italic;}
.ol .ybs {display: grid; justify-items: center; text-align: center; gap: 6px;}
.ol .ybs-ic .ic {width: 54px; height: 54px; color: var(--pitch);}
.ol .ybs h2 {margin: 0; font: 900 24px/1.1 var(--f-big);}
.ol .ybs-stars {display: flex; gap: 4px;}
.ol .ybs-stars i .ic {width: 22px; height: 22px; color: #CFC8B8;}
.ol .ybs-stars i.on .ic {color: #D9A21E; fill: #F2C14E;}
.ol .ybs-next {width: 100%; padding: 10px 12px; border-radius: 14px; background: #FFF6DC; display: grid; gap: 2px;}
.ol .ybs-next small {font: 800 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #B07D12;}
.ol .ybs-next b {font: 800 15px var(--f-body);}
.ol .rcd {display: grid; gap: 8px;}
.ol .rcd-prev {display: grid; place-items: center; padding: 6px;}
.ol .rcd-prev svg {width: 96px; height: auto;}
.ol .rcd-kits {display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;}
.ol .rcd-kits button {aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(22,32,26,.12); background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); cursor: pointer;}
.ol .rcd-kits button.on {outline: 3px solid var(--gold); outline-offset: 2px;}
/* Gezeichnete Artikel-Bilder */
.ol .kimg {display: grid; place-items: center; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: #F4EFE4;}
.ol .kimg img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .kitem .kimg {margin-bottom: 2px; transition: transform .2s;}
.ol .kitem:not(:disabled):active .kimg {transform: scale(.94) rotate(-3deg);}
.ol .kitem.gold .kimg {box-shadow: 0 0 0 2px #F2C14E, 0 0 14px rgba(242,193,78,.7);}
.ol .kitemrow .kimg {width: 46px; height: 46px; border-radius: 12px;}
.ol .kslot.has {position: relative; padding: 0; overflow: hidden; border-style: solid;}
.ol .kslot.has img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ol .kslot.has b {position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 999px; background: #16201A; color: #F2C14E !important; font-size: 11px !important;}
.ol .pc-gear .kslot.has {background: #F4EFE4; border-color: #FFFBF2;}
/* Vereinsgelände: gezeichnete Szene je Ausbaustufe */
.ol .yardpic {position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 28px -18px rgba(0,0,0,.7); margin-bottom: 10px; aspect-ratio: 16 / 9; background: #CFE3C8;}
.ol .yardpic img {width: 100%; height: 100%; object-fit: cover; display: block; animation: yp-in .6s ease-out;}
@keyframes yp-in {from {transform: scale(1.06); opacity: .4;}}
.ol .yp-crest {position: absolute; top: 8px; left: 8px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));}
.ol .yp-crest svg {width: 40px; height: auto; display: block;}
.ol .yp-st {position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(22,32,26,.85); color: var(--gold); font: 900 13px var(--f-big); letter-spacing: .04em;}
.ol .ybgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;}
.ol .ybtile {display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid var(--line-c); background: #F7F3EA; cursor: pointer;}
.ol .ybtile span {grid-row: span 2;}
.ol .ybtile span .ic {width: 26px; height: 26px; color: var(--pitch);}
.ol .ybtile b {font: 800 13px var(--f-body);}
.ol .ybtile small {display: block; font: 600 11px/1.25 var(--f-body); color: var(--muted);}
.ol .ybtile em {grid-column: 1 / -1; font-style: normal; letter-spacing: 2px; color: #D9A21E; font-size: 12px;}
.ol .kfac .kfacs {display: none;}
/* Offene Werte: Farbstufen-Balken */
.ol .kattr.pts {grid-template-columns: 26px 66px 1fr 64px;}
.ol .ptbar {position: relative; display: block; height: 12px; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(22,32,26,.14); overflow: hidden;}
.ol .ptbar > i {position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .6s;}
.ol .ptlegend {display: flex; gap: 10px; margin: 10px 0 2px; font: 700 11px var(--f-body); color: var(--muted);}
.ol .ptlegend span {display: inline-flex; align-items: center; gap: 4px;}
.ol .ptlegend i {width: 10px; height: 10px; border-radius: 3px; display: inline-block;}
.ol .pc-r small {letter-spacing: .06em;}
/* Spielstärke in Sternen */
.ol .stars {display: inline-flex; gap: 1px; vertical-align: middle;}
.ol .stars i {position: relative; display: inline-block; line-height: 0;}
.ol .stars .ic {width: 14px; height: 14px; color: rgba(22,32,26,.25);}
.ol .stars i.f .ic {color: #D9A21E; fill: #F2C14E;}
.ol .stars i.h .ic {color: #D9A21E; fill: url(#halfstar);}
.ol .stars i.h::after {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: transparent;}
.ol .stars.big .ic {width: 22px; height: 22px; color: rgba(255,251,242,.35);}
.ol .stars.big i.f .ic {color: #F2C14E; fill: #F2C14E;}
.ol .stars.sm .ic {width: 12px; height: 12px; color: rgba(255,251,242,.35);}
.ol .stars.sm i.f .ic, .ol .stars.sm i.h .ic {color: #F2C14E; fill: #F2C14E;}
.ol .stars.xs .ic {width: 9px; height: 9px;}
.ol .pc-r {justify-items: end;}
.ol .pc-r .stars {flex-direction: column-reverse; gap: 2px;}
.ol .lgstars {display: inline-flex; align-items: center; gap: 4px;}
/* Spielstärke in Sternen */
.ol .stars {display: inline-flex; gap: 1px; vertical-align: middle;}
.ol .stars i {position: relative; display: inline-block; line-height: 0;}
.ol .stars .ic {width: 14px; height: 14px; color: rgba(22,32,26,.22);}
.ol .stars i.f .ic, .ol .stars i b .ic {color: #D9A21E; fill: #F2C14E;}
.ol .stars i b {position: absolute; left: 0; top: 0; bottom: 0; width: 50%; overflow: hidden;}
.ol .stars.big .ic {width: 20px; height: 20px; color: rgba(255,251,242,.3);}
.ol .stars.big i.f .ic, .ol .stars.big i b .ic {color: #F2C14E; fill: #F2C14E;}
.ol .stars.sm .ic {width: 12px; height: 12px; color: rgba(255,251,242,.3);}
.ol .stars.sm i.f .ic, .ol .stars.sm i b .ic {color: #F2C14E; fill: #F2C14E;}
.ol .stars.xs .ic {width: 9px; height: 9px;}
.ol .pc-r {justify-items: end;}
.ol .pc-r .stars {flex-direction: column-reverse; gap: 2px;}
.ol .lgstars {display: inline-flex; align-items: center; gap: 4px;}
/* Gezeichnete Szenen in Training und Jobs */
.ol .kj-ic {overflow: hidden;}
.ol .kj-ic img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .kjob {grid-template-columns: 60px 1fr auto;}
.ol .kjob .kj-ic {width: 60px; height: 60px; border-radius: 14px;}
.ol .kr-ic.pic {width: 150px; height: 150px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px rgba(242,193,78,.6), 0 12px 24px -8px rgba(0,0,0,.6);}
.ol .kr-ic.pic img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .ksk-face img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .ksk-face {animation: none;}
/* Aussehen-Editor und Training mit Szenen-Hintergrund */
.ol .plook {width: calc(100% - 32px); margin: -4px 16px 12px; display: flex; align-items: center; justify-content: center; gap: 6px;}
.ol .plook .ic {width: 18px; height: 18px;}
.ol .plooks {display: grid; gap: 10px;}
.ol .pl-prev {display: grid; place-items: center;}
.ol .pl-prev canvas {width: 140px !important; height: 140px !important; border-radius: 22px; background: radial-gradient(circle at 50% 35%, #FFFBF2, #E9E1CF);}
.ol .krun.hasbg {background: #18261E;}
.ol .krun.hasbg::before {content: ''; position: absolute; inset: 0; background: var(--bg) center / cover; opacity: .28; filter: saturate(.9);}
.ol .krun.hasbg::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,38,30,.2), rgba(24,38,30,.85) 70%);}
.ol .krun.hasbg > * {position: relative; z-index: 1;}
/* ---------- Neuer Spieler ---------- */
.ol .nwhero {position: relative; display: grid; justify-items: center; gap: 8px; margin: 0 16px 12px; padding: 18px 16px 16px; border-radius: 24px; color: #FFFBF2; background: linear-gradient(160deg, #2E9A5D, #15603A); box-shadow: 0 16px 30px -18px rgba(21,96,58,.9); overflow: hidden;}
.ol .nwhero::before {content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 22px, transparent 22px 44px); pointer-events: none;}
.ol .nw-face {position: relative; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFFBF2, #E9E1CF); box-shadow: 0 0 0 5px rgba(255,251,242,.35), 0 14px 26px -12px rgba(0,0,0,.6);}
.ol .nw-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .nw-btns {position: relative; display: flex; gap: 8px;}
.ol .nw-btns .btn {display: inline-flex; align-items: center; gap: 5px;}
.ol .nw-btns .ic {width: 16px; height: 16px;}
.ol .nw-name {position: relative; width: 100%; max-width: 300px; text-align: center; border: 0; border-bottom: 2px dashed rgba(255,251,242,.5); background: transparent; color: #FFFBF2; font: 900 30px var(--f-big); padding: 4px 0; outline: none;}
.ol .nwhero small {position: relative; color: var(--gold); font: 800 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase;}
.ol .nw-flags {display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;}
.ol .nw-flags button {aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line-c); background: #F7F3EA; font-size: 26px; cursor: pointer;}
.ol .nw-flags button.on {border-color: var(--pitch); background: #EAF4EE; box-shadow: 0 0 0 3px rgba(31,122,71,.2);}
.ol .nw-pitch {position: relative; aspect-ratio: 3 / 3.4; border-radius: 16px; background: repeating-linear-gradient(0deg, #2E9A5D 0 10%, #27894F 10% 20%); border: 3px solid #FFFBF2; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); overflow: hidden;}
.ol .nw-pitch::before {content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.55);}
.ol .nw-pitch::after {content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.55); border-radius: 50%;}
.ol .nw-pitch button {position: absolute; z-index: 1; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,251,242,.85); background: rgba(22,32,26,.45); color: #FFFBF2; cursor: pointer;}
.ol .nw-pitch button b {font: 900 14px var(--f-big);}
.ol .nw-pitch button.on {background: var(--gold); color: var(--ink); border-color: #FFFBF2; transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);}
.ol .nw-start {display: grid; gap: 10px;}
.ol .nw-opt {display: grid; grid-template-columns: 40px 1fr; gap: 2px 10px; align-items: center; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--line-c); background: #F7F3EA;}
.ol .nw-opt > span {grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card);}
.ol .nw-opt > span .ic {width: 24px; height: 24px; color: var(--pitch);}
.ol .nw-opt b {font: 900 17px var(--f-big);}
.ol .nw-opt small {color: var(--muted); font-weight: 600;}
.ol .nw-opt .krc-row, .ol .nw-opt .nw-need {grid-column: 1 / -1;}
.ol .nw-opt .nw-need {color: #B07D12;}
.ol .nw-opt.solo {cursor: pointer; font: inherit; color: inherit;}
.ol .plooks2 {margin: -4px 16px 12px; gap: 8px;}
.ol .plooks2 .plook {width: auto; margin: 0;}
/* Position: 4 Bereiche plus Spielweise */
.ol .pos4 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 16px; background: repeating-linear-gradient(90deg, #2E9A5D 0 25%, #27894F 25% 50%);}
.ol .pos4 button {padding: 14px 4px; border-radius: 12px; border: 2px solid rgba(255,251,242,.6); background: rgba(22,32,26,.35); color: #FFFBF2; cursor: pointer;}
.ol .pos4 button b {font: 900 15px var(--f-big); letter-spacing: .02em;}
.ol .pos4 button.on {background: var(--gold); color: var(--ink); border-color: #FFFBF2;}
.ol .posroles {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;}
.ol .posroles button {display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line-c); background: #F7F3EA; cursor: pointer;}
.ol .posroles button b {font: 800 14px var(--f-body);}
.ol .posroles button small {font: 600 11.5px/1.3 var(--f-body); color: var(--muted);}
.ol .posroles button.on {border-color: var(--pitch); background: #EAF4EE; box-shadow: 0 0 0 3px rgba(31,122,71,.15);}
.ol .posw {display: grid; gap: 5px; margin-top: 10px;}
.ol .posw > small {font: 800 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
.ol .posw span {display: grid; grid-template-columns: 110px 1fr; align-items: center; font: 700 12.5px var(--f-body);}
.ol .posw span .ic {width: 15px; height: 15px; color: var(--pitch); margin-right: 3px;}
.ol .posw span > i {height: 7px; border-radius: 4px; background: rgba(22,32,26,.08); overflow: hidden;}
.ol .posw span > i > i {display: block; height: 100%; background: var(--pitch); border-radius: 4px;}
.ol .pospick {display: grid; gap: 10px;}
.ol .forms {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;}
.ol .nwhero.vl {gap: 4px;} .ol .nwhero.vl h2 {position: relative; margin: 0; color: #FFFBF2; font: 900 26px var(--f-big);} .ol .nw-go {width: calc(100% - 32px); margin: 0 16px 8px;}
/* Editor zum Durchklicken */
.ol .fa {display: grid; gap: 6px;}
.ol .fa-row {display: grid; grid-template-columns: 92px 40px 1fr 40px; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 14px; background: #F7F3EA;}
.ol .fa-row > span {font: 800 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pitch);}
.ol .fa-row > b {text-align: center; font: 800 15px var(--f-body); display: flex; justify-content: center;}
.ol .fa-b {height: 36px; border-radius: 12px; border: 0; background: var(--card); box-shadow: var(--sh); font: 900 22px var(--f-big); color: var(--ink); cursor: pointer;}
.ol .fa-b:active {transform: scale(.94);}
.ol .fa-dot {display: inline-block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(22,32,26,.15);}
.ol .fa-rand {justify-self: center; margin-top: 4px; padding: 8px 18px; border-radius: 999px; border: 1.5px dashed var(--pitch); background: transparent; font: 800 13px var(--f-body); color: var(--pitch); cursor: pointer;}
.ol .plooks .pl-prev {position: sticky; top: -8px; z-index: 2; background: var(--bg, #F4EFE4); padding: 4px 0;}
/* Angebote für Gems */
.ol .kitem.gemitem {background: linear-gradient(160deg, #EEF6FF, #F7F3EA 60%); border-color: #8FB8E8;}
.ol .kitem.gemitem em {color: #2B5C9E; display: inline-flex; align-items: center; gap: 3px;}
.ol .kitem.gemitem em .ic {width: 15px; height: 15px;}
.ol .kitem.gemitem::after {content: 'Premium'; position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: #2B5C9E; color: #fff; font: 800 9px var(--f-body); letter-spacing: .06em; text-transform: uppercase;}
/* Mitglieder als saubere Liste */
.ol .krc-mem {display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important;}
.ol .krc-mem > button.mrow {display: grid !important; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; justify-items: stretch; text-align: left; padding: 8px 10px; border-radius: 14px; background: #F7F3EA; border: 0; font: inherit; color: inherit; cursor: pointer;}
.ol .krc-mem > button.mrow.me {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px var(--gold);}
.ol .mrow .krc-face {position: relative; width: 44px; height: 44px; overflow: visible;}
.ol .mrow .krc-face canvas {border-radius: 50%;}
.ol .mrow .krc-face > i {position: absolute; right: -1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #CFC8B8; border: 2px solid #F7F3EA; z-index: 1;}
.ol .mrow .krc-face > i.on {background: #3FCB7E;}
.ol .mr-mid {display: grid; gap: 1px; min-width: 0;}
.ol .mr-mid b {font: 800 14px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .mr-mid small {font: 600 11.5px var(--f-body); color: var(--muted);}
.ol .mr-r {display: grid; justify-items: end; gap: 4px;}
.ol .rolebadge {font-style: normal !important; font: 800 9.5px var(--f-body) !important; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #E9E4D6; color: var(--ink2);}
.ol .kitag {margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: #16201A; color: #F2C14E; font: 900 9px var(--f-body); text-decoration: none; vertical-align: 2px;}
/* Ersatzspieler und Ränge (nachgetragen) */
.ol .fslot.filler {opacity: .55; filter: grayscale(1);}
.ol .fslot.filler .sf {display: grid; place-items: center; background: #E4DFD3;}
.ol .fslot.filler .sf .ic {width: 18px; height: 18px; color: #9B958A;}
.ol .role-praesident {background: #F2C14E !important; color: #16201A !important;}
.ol .role-vize {background: #1F7A47 !important; color: #FFFBF2 !important;}
.ol .role-kapitaen {background: #16201A !important; color: #F2C14E !important;}
.ol .rcmem {display: grid; justify-items: center; text-align: center; gap: 6px;}
.ol .krc-face.big {width: 80px; height: 80px;}
.ol .rcroles {display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;}
.ol .linkbtn.danger {color: #D2483F;}
/* Gems-Kasse im Verein */
.kfac-cash .kgems{font-style:normal;font-size:.62em;background:var(--ink,#16201A);color:#F2C14E;border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.kfac-cash .btn:has(.ic){display:inline-flex;align-items:center;justify-content:center;gap:4px}
.kfac-cash .kgems .ic{vertical-align:-0.15em}
.kfac-cash .row2+.row2{margin-top:6px}
.ybs #ybupg{margin-top:8px;width:100%}
/* ---------- Profil-Sterne: Gold-Säule ---------- */
.ol .pc-r {top: 12px; right: 12px;}
.ol .sbadge {display: grid; justify-items: center; gap: 2px; padding: 6px 5px 5px; border-radius: 14px; background: linear-gradient(180deg, rgba(10,40,24,.55), rgba(10,40,24,.25)); box-shadow: inset 0 0 0 1.5px rgba(242,193,78,.45), 0 6px 14px -8px rgba(0,0,0,.6);}
.ol .sb-col {display: flex; flex-direction: column-reverse; gap: 1px;}
.ol .sb-s {width: 20px; height: 20px; display: block; overflow: visible;}
.ol .sb-s .bg {fill: rgba(255,251,242,.10); stroke: rgba(255,251,242,.32); stroke-width: 1.3; stroke-linejoin: round;}
.ol .sb-s .fg {fill: url(#sbg); stroke: #8A5A06; stroke-width: 1.3; stroke-linejoin: round;}
.ol .sb-s .hl {fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; stroke-linecap: round;}
.ol .sb-s.f, .ol .sb-s.h {filter: drop-shadow(0 0 4px rgba(242,193,78,.55)); animation: sbpop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d);}
@keyframes sbpop {0% {transform: scale(.2) rotate(-40deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
.ol .pc-r .sb-n {font: 900 20px/1 var(--f-big); color: #F2C14E; margin-top: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.25);}
.ol .pc-r .sbadge small {font: 800 8px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,251,242,.7);}
@media (prefers-reduced-motion: reduce) {.ol .sb-s.f, .ol .sb-s.h {animation: none;}}
/* ---------- Stärke als Zahl ---------- */
.ol .sbadge.num {padding: 8px 10px 6px; min-width: 62px;}
.ol .pc-r .sb-v {font: 900 40px/0.9 var(--f-big); color: transparent; background: linear-gradient(180deg, #FFF1B8, #F7C948 50%, #C8860F); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));}
.ol .pc-r .sbadge.num small {font: 800 9px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,251,242,.75); margin-top: 2px;}
.ol .fslot b {margin-top: -9px; min-width: 30px; font: 900 13px/18px var(--f-big); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35);}
.ol .fslot.meslot b {background: linear-gradient(180deg, #FFE27A, #F2C14E);}
.ol .fslot.filler b {background: #CFC9BC; color: #6E695F;}
.ol .fslot small {color: #fff;}
.ol .mr-str {font: 900 20px var(--f-big); color: var(--pitch); min-width: 34px; text-align: right;}
.ol .rcm-str {display: grid; justify-items: center; margin: 6px 0;}
.ol .rcm-str b {font: 900 44px/0.9 var(--f-big); color: var(--pitch);}
.ol .rcm-str small {font: 800 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6E695F);}
/* ---------- Bank ---------- */
.ol .pt-bank {display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer;}
.ol .pt-bank i {font-style: normal; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--pitch); color: #fff; font: 900 12px/1 var(--f-body); margin-left: 1px;}
.ol .bank h2 {margin: 2px 0 8px;}
.ol .bank .subh2 {display: flex; align-items: center; gap: 6px;}
.ol .bk-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px;}
.ol .bk-p {position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; border: 2px solid #E4DCC8; background: #FFFBF2; cursor: pointer; font: inherit; color: var(--ink, #16201A);}
.ol .bk-p span .ic {width: 34px; height: 34px;}
.ol .bk-p.coin span {color: #C8860F;}
.ol .bk-p.gem span {color: #2A8C9E;}
.ol .bk-p b {font: 900 26px/1 var(--f-big);}
.ol .bk-p em {font-style: normal; display: inline-flex; align-items: center; gap: 3px; padding: 4px 12px; border-radius: 999px; background: var(--pitch); color: #fff; font: 800 13px var(--f-body);}
.ol .bk-p em .ic {width: 13px; height: 13px;}
.ol .bk-p.gem em {background: #16201A;}
.ol .bk-p u {position: absolute; top: -9px; text-decoration: none; padding: 2px 8px; border-radius: 999px; background: #F2C14E; font: 800 10px var(--f-body); letter-spacing: .04em;}
.ol .bk-p:disabled {opacity: .45;}
.ol .bk-lim {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; border-radius: 12px; background: #FFF6DC; border: 1.5px dashed #F2C14E;}
.ol .bk-lim b {font: 900 18px var(--f-big);}
.ol .bk-lim span {font: 600 12px var(--f-body); color: #6E695F;}
.ol .bk-lim i {display: flex; gap: 4px;}
.ol .bk-lim em {width: 10px; height: 10px; border-radius: 50%; background: #E4DCC8;}
.ol .bk-lim em.on {background: var(--pitch);}
.ol .bk-lim.zero {background: #F6E3DE; border-color: #D9654B;}
/* ---------- Wappen-Editor mit Vorschau-Kacheln ---------- */
.ol .cr-tabs {display: flex; gap: 6px; margin: 4px 0 10px;}
.ol .cr-tabs button {flex: 1; border: 2px solid #E4DCC8; background: #FFFBF2; border-radius: 999px; padding: 7px 0; font: 800 13px var(--f-body); color: var(--ink, #16201A); cursor: pointer;}
.ol .cr-tabs button.on {background: var(--pitch); border-color: var(--pitch); color: #fff;}
.ol .cr-tabs .cr-dice {flex: 0 0 40px; font-size: 17px; padding: 4px 0;}
.ol .cr-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;}
.ol .cr-tile {display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; border: 2px solid #E4DCC8; background: #FFFBF2; cursor: pointer; font: inherit;}
.ol .cr-tile.on {border-color: var(--pitch); background: #E8F3EC; box-shadow: 0 0 0 2px rgba(31,122,71,.25);}
.ol .cr-tile svg {display: block; transition: transform .15s;}
.ol .cr-tile:active svg {transform: scale(.9);}
.ol .cr-tile small {font: 700 11px var(--f-body); color: #6E695F;}
.ol .cr-txt {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ol .cr-txt label {display: grid; gap: 4px;}
.ol .cr-txt label span, .ol .cr-scol span {font: 800 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #6E695F;}
.ol .cr-txt input {text-transform: uppercase; width: 100%; box-sizing: border-box;}
.ol .cr-scol {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;}
.ol .cr-scol span {width: 100%;}
.ol .cr-scol button {width: 34px; height: 34px; border-radius: 50%; border: 3px solid #E4DCC8; background: var(--c); cursor: pointer;}
.ol .cr-scol button.on {border-color: var(--pitch); box-shadow: 0 0 0 2px rgba(31,122,71,.3);}
.ol .cr-scol button.auto {width: auto; border-radius: 999px; padding: 0 12px; background: #FFFBF2; font: 800 12px var(--f-body);}
.ol .rcd-prev {display: grid; place-items: center; padding: 12px; margin: 6px 0 4px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #2E9A5D, #15603A);}
.ol .rcd-prev svg {filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); animation: crpop .35s cubic-bezier(.3,1.6,.5,1);}
@keyframes crpop {0% {transform: scale(.85);} 100% {transform: none;}}
/* ---------- Gebäude mit Bildern pro Stufe ---------- */
.ol .ybtile.pic {grid-template-columns: 54px 1fr; padding: 8px;}
.ol .ybimg {position: relative; grid-row: span 2; width: 54px; height: 54px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.18);}
.ol .ybimg img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .ybimg i {position: absolute; right: 2px; bottom: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--pitch); color: #fff; font: 900 11px/16px var(--f-big); font-style: normal; text-align: center;}
.ol .ybs-pic {width: 170px; height: 170px; border-radius: 22px; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 10px 22px -10px rgba(0,0,0,.5);}
.ol .ybs-next {grid-template-columns: 64px 1fr; align-items: center; gap: 10px; text-align: left;}
.ol .ybs-next img {width: 64px; height: 64px; border-radius: 12px; object-fit: cover; filter: grayscale(.5) brightness(.95); box-shadow: 0 0 0 2px #fff;}
.ol .ybs-next div {display: grid; gap: 2px;}
.ol .bparty {display: grid; justify-items: center; text-align: center; gap: 8px;}
.ol .bparty h2 {margin: 0; font: 900 34px/1 var(--f-big); color: var(--pitch);}
.ol .bp-pics {display: flex; align-items: center; gap: 10px;}
.ol .bp-pics img {border-radius: 18px; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(0,0,0,.5);}
.ol .bp-pics .old {width: 80px; height: 80px; filter: grayscale(.8); opacity: .7; animation: bpold .6s ease-out both;}
.ol .bp-pics .new {width: 170px; height: 170px; animation: bpnew .7s .25s cubic-bezier(.3,1.6,.5,1) both;}
.ol .bp-arr {font-size: 24px; color: #D9A21E;}
.ol .bp-txt {font: 800 16px var(--f-body);}
@keyframes bpold {0% {transform: none; opacity: 1;} 100% {transform: rotate(-8deg) scale(.95); opacity: .7;}}
@keyframes bpnew {0% {transform: scale(.2) rotate(12deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
.ol .kbar .sta-next {grid-column: 1 / -1; margin-top: -4px; font: 600 11px var(--f-body); color: var(--muted, #6E695F);}
.ol .kbar .sta-next span {font-weight: 800; color: var(--pitch);}
.ol .pscore span {color: var(--ink, #16201A); font: 800 14px var(--f-body); line-height: 1.2;}
/* ---------- Aufstellung: Wer spielt hier? ---------- */
.ol .lusheet {display: grid; gap: 10px;}
.ol .lu-head {display: flex; align-items: center; gap: 12px;}
.ol .lu-head h2 {margin: 0; font: 900 28px/1 var(--f-big);}
.ol .lu-pos {display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(160deg, #2E9A5D, #15603A); color: #fff; font: 900 13px var(--f-big); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 14px -8px rgba(21,96,58,.9);}
.ol .lu-list {display: grid; gap: 8px;}
.ol .lu-row {display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 16px; border: 2px solid #E4DCC8; background: #FFFBF2; text-align: left; font: inherit; color: var(--ink, #16201A); cursor: pointer;}
.ol .lu-row.here {border-color: #F2C14E; background: #FFF6DC;}
.ol .lu-row:active {transform: scale(.98);}
.ol .lu-face {width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2px #fff;}
.ol .lu-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .lu-mid {display: grid; gap: 2px; min-width: 0;}
.ol .lu-mid b {font: 800 16px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .lu-mid small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .lu-r {display: grid; justify-items: end; gap: 3px;}
.ol .lu-r b {font: 900 24px/1 var(--f-big); color: var(--pitch);}
.ol .lu-r em {font-style: normal; font: 800 10px var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #EDE6D7; color: #6E695F;}
.ol .lu-r em.on {background: #F2C14E; color: #16201A;}
.ol .lu-r em.fit {background: #DDF1E4; color: var(--pitch);}
/* ---------- Vereinsliga mit festen Anstoßzeiten ---------- */
.ol .kc-times {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; position: relative;}
.ol .kc-times span {padding: 3px 10px; border-radius: 999px; background: rgba(255,251,242,.16); font: 800 12px var(--f-body); color: #FFFBF2;}
.ol .kc-times .btn.ghost {background: rgba(255,251,242,.92); color: var(--pitch); border-color: transparent; padding: 4px 12px;}
.ol .lg-best {display: flex; align-items: center; gap: 6px; justify-content: center; margin: 0 0 10px; font: 600 13px var(--f-body);}
.ol .lg-best .ic {width: 16px; height: 16px; color: #D9A21E; fill: #F2C14E;}
.ol .lg-grades {display: grid; gap: 4px; margin-bottom: 10px;}
.ol .lg-grades div {display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #F7F3EA;}
.ol .lg-grades div.me {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px #F2C14E;}
.ol .lg-grades span {font: 700 14px var(--f-body);}
.ol .lg-grades em {font-style: normal; font-size: 12px;}
.ol .lg-grades em.as {font: 800 11px var(--f-body); color: var(--pitch);}
.ol .lgtab div {grid-template-columns: 26px 1fr auto 34px !important;}
.ol .lgtab small {font: 600 11px var(--f-body); color: #8A847A; white-space: nowrap;}
.ol .lgts h2 {margin: 2px 0 4px;}
.ol .lgts-list {display: grid; gap: 8px; margin: 10px 0 14px;}
.ol .lgts-row {display: flex; align-items: center; gap: 10px;}
.ol .lgts-row input {flex: 1; font: 900 28px var(--f-big); padding: 8px 12px; border-radius: 14px; border: 2px solid #E4DCC8; background: #FFFBF2; color: var(--ink, #16201A);}
/* ---------- Liga-Boost und Taktikregler ---------- */
.ol .fslot b.boost {background: linear-gradient(180deg, #9EE6BC, #3FCB7E); color: #0C3B22;}
.ol .fslot b i {font-style: normal; font-size: 8px; margin-left: 1px; vertical-align: 2px;}
.ol .tk-who {display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none;}
.ol .tk-who button {flex: 0 0 auto; border: 2px solid #E4DCC8; background: #FFFBF2; border-radius: 999px; padding: 5px 12px; font: 800 13px var(--f-body); color: var(--ink, #16201A); cursor: pointer;}
.ol .tk-who button.on {background: var(--pitch); border-color: var(--pitch); color: #fff;}
.ol .tk-sl {margin: 10px 0 14px;}
.ol .tk-lab {display: flex; justify-content: space-between; font: 800 12px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #6E695F; margin-bottom: 6px;}
.ol .tk-sl input[type=range] {-webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--pitch) var(--v), #E4DCC8 var(--v)); outline: none; margin: 0;}
.ol .tk-sl input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #F2C14E; border: 3px solid #16201A; box-shadow: 0 3px 8px rgba(0,0,0,.25); cursor: grab;}
.ol .tk-sl input[type=range]::-moz-range-thumb {width: 24px; height: 24px; border-radius: 50%; background: #F2C14E; border: 3px solid #16201A;}
.ol .tk-hint {display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 12px; background: #FFF6DC; font: 700 13px var(--f-body);}
.ol .tk-hint .ic {width: 16px; height: 16px; color: #D9A21E;}
.ol .kattr em small.gearb {display: inline-flex; align-items: center; gap: 1px;} .ol .kattr em small.gearb .ic {width: 11px; height: 11px;}
/* ---------- Agentur: Saison-Entwicklung, Verletzung, Druck ---------- */
.ol .ldev {font: 900 12px var(--f-body); margin-left: 3px; vertical-align: 8px;}
.ol .ldev.up {color: #1F9A57;} .ol .ldev.down {color: #D2483F;}
.ol .cs-inj {margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: #F6E3DE; color: #8E2E22; font: 800 13px var(--f-body);}
.ol .cs-press {display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: #FFF6DC; border: 1.5px dashed #F2C14E;}
.ol .cs-press b {display: block; font: 800 14px var(--f-body);}
.ol .cs-press small {font: 600 12px/1.3 var(--f-body); color: #6E695F;}
/* ---------- Mannschaftstaktik und Chemie ---------- */
.ol .tt-head {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.ol .tt-head h2 {margin: 0;}
.ol .chem {display: grid; justify-items: center; min-width: 62px; padding: 6px 10px; border-radius: 14px; color: #fff;}
.ol .chem b {font: 900 28px/1 var(--f-big);}
.ol .chem small {font: 800 9px var(--f-body); letter-spacing: .12em; text-transform: uppercase; opacity: .85;}
.ol .chem.good {background: linear-gradient(160deg, #2E9A5D, #15603A);} .ol .chem.ok {background: linear-gradient(160deg, #F2C14E, #C8860F); color: #16201A;} .ol .chem.bad {background: linear-gradient(160deg, #E0624F, #A8321F);}
.ol .tk-sl input[type=range]:disabled {opacity: .55;}
.ol .tk-sl input[type=range]:disabled::-webkit-slider-thumb {background: #CFC8B8;}
.ol .tt-fits {display: grid; gap: 6px; margin: 4px 0 8px;}
.ol .tt-fits div {display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #F7F3EA;}
.ol .tt-fits span {font: 800 14px var(--f-body); display: grid;}
.ol .tt-fits small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .tt-fits b, .ol .tk-fit b {font: 900 20px var(--f-big); padding: 2px 10px; border-radius: 10px;}
.ol b.good, .ol .tk-fit.good b {background: #DDF1E4; color: #15603A;} .ol b.ok, .ol .tk-fit.ok b {background: #FFF1C9; color: #8A5A06;} .ol b.bad, .ol .tk-fit.bad b {background: #F6E3DE; color: #A8321F;}
.ol .tk-fit {display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #F7F3EA;}
.ol .tk-fit span {font: 600 13px/1.3 var(--f-body);}
/* ---------- KI-Coach und Mannschaftsrat ---------- */
.ol .co-head {display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;}
.ol .co-head h2 {margin: 0;}
.ol .co-face {width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFFBF2, #E9E1CF); box-shadow: 0 0 0 3px #F2C14E;}
.ol .co-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .co-bubble {position: relative; margin: 14px 0 12px; padding: 12px 14px; border-radius: 16px; background: #16201A; color: #FFFBF2;}
.ol .co-bubble::before {content: ''; position: absolute; top: -8px; left: 22px; border: 8px solid transparent; border-top: 0; border-bottom-color: #16201A;}
.ol .co-bubble p {margin: 0; font: 600 15px/1.45 var(--f-body);}
.ol .co-bubble u {display: inline-block; margin-bottom: 6px; text-decoration: none; padding: 2px 8px; border-radius: 999px; background: #D2483F; font: 800 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase;}
.ol .co-wait {display: block; margin-top: 6px; font: 600 11px var(--f-body); color: rgba(255,251,242,.55);}
.ol .co-tac {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px;}
.ol .co-tac span {display: grid; gap: 3px; padding: 8px 6px; border-radius: 12px; background: #F7F3EA; text-align: center;}
.ol .co-tac small {font: 800 9px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #8A847A;}
.ol .co-tac b {font: 900 15px/1.1 var(--f-big);}
.ol .co-tac i {height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--pitch) var(--v), #E4DCC8 var(--v));}
.ol .co-why {margin: 0 0 10px; padding-left: 18px; font: 600 13px/1.45 var(--f-body); color: #4A4740;}
.ol .rat .btn {width: 100%; margin-top: 6px;}
.ol .lg-speech {margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: #F7F3EA; font: 600 13px/1.4 var(--f-body); display: flex; gap: 8px;}
.ol .lg-speech .ic {flex: 0 0 16px; width: 16px; height: 16px; color: var(--pitch); margin-top: 2px;}
/* ---------- Alter, Karriereende, Legenden ---------- */
.ol .pc-age {font: 700 12px var(--f-body); color: rgba(255,251,242,.85);}
.ol .retbox {background: #FFF6DC; border: 1.5px dashed #F2C14E;}
.ol .retbox .btn {width: 100%;}
.ol .retsheet {display: grid; gap: 10px; text-align: center;}
.ol .retsheet h2 {margin: 0; font: 900 28px/1.05 var(--f-big);}
.ol .retired {text-align: center; display: grid; justify-items: center; gap: 8px;}
.ol .ret-face {width: 120px; height: 120px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #F2C14E, 0 10px 24px -10px rgba(0,0,0,.5); filter: sepia(.35) saturate(1.2);}
.ol .lgd-row {display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;}
.ol .lgd {flex: 0 0 auto; display: grid; justify-items: center; gap: 3px; width: 84px; padding: 10px 4px 8px; border-radius: 16px; background: linear-gradient(180deg, #FFF6DC, #F2E2B0); border: 1.5px solid #E8C870;}
.ol .lgd-face {width: 52px; height: 52px; border-radius: 50%; overflow: hidden; filter: sepia(.6) saturate(1.3) brightness(1.05); box-shadow: 0 0 0 3px #C8860F;}
.ol .lgd-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .lgd b {font: 900 14px var(--f-big);}
.ol .lgd small {font: 700 10px var(--f-body); color: #8A5A06;}
/* ---------- Talentsuche ---------- */
.ol .scout h2 .ic {width: 20px; height: 20px; vertical-align: -3px; color: var(--pitch);}
.ol .scout.lock {opacity: .75;}
.ol .sc-list {display: grid; gap: 8px; margin: 8px 0;}
.ol .sc-card {display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; background: #F7F3EA; border: 1.5px solid #E4DCC8;}
.ol .sc-card.mine {background: #EEF7F1; border-color: #BFE3CC;}
.ol .sc-face {width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2px #fff;}
.ol .sc-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .sc-mid {display: grid; gap: 1px; min-width: 0;}
.ol .sc-mid b {font: 800 15px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .sc-mid small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .sc-pot i {font-style: normal; color: #D8D0BE; font-size: 13px;}
.ol .sc-pot i.on {color: #E0A82A;}
.ol .sc-r {display: grid; justify-items: end; gap: 4px;}
.ol .sc-r > b {font: 900 22px/1 var(--f-big); color: var(--pitch);}
.ol .sc-r .btn .ic {width: 13px; height: 13px; vertical-align: -2px;}
.ol .sc-to {font: 800 12px var(--f-body); color: #B07D12; font-style: normal; margin-left: 4px;}
/* ---------- Goldener Stollen als Premium-Währung ---------- */
.ol .ic-gem {stroke: #16201A;}
.ol .pt-res .ic-gem, .ol .bk-p.gem span .ic-gem {filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));}
/* ---------- Scout: Schützlinge-Leiste und Intro ---------- */
.ol .sstrip {display: flex; gap: 8px; overflow-x: auto; margin: 0 16px 12px; padding: 2px 0 4px; scrollbar-width: none;}
.ol .ss-b {position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; width: 78px; padding: 8px 4px 6px; border-radius: 16px; border: 2px solid #E4DCC8; background: #FFFBF2; font: inherit; color: var(--ink, #16201A); cursor: pointer;}
.ol .ss-b.on {border-color: #F2C14E; background: #FFF6DC; box-shadow: 0 6px 14px -10px rgba(0,0,0,.4);}
.ol .ss-b.add {border-style: dashed; opacity: .8;}
.ol .ss-face {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #EDE6D7; font: 900 22px var(--f-big); color: var(--pitch);}
.ol .ss-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .ss-b b {font: 800 12px var(--f-body); max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .ss-b small {font: 700 10px var(--f-body); color: #6E695F;}
.ol .ss-dot {position: absolute; top: 6px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #3FCB7E; box-shadow: 0 0 0 2px #fff;}
.ol .nwintro {margin: 0 16px 12px; padding: 18px; border-radius: 22px; color: #FFFBF2; background: linear-gradient(160deg, #2E9A5D, #15603A);}
.ol .nwintro .eyebrow {color: #F2C14E;}
.ol .nwintro h1 {margin: 4px 0 6px; font: 900 32px/1 var(--f-big);}
.ol .nwintro p {margin: 0; font: 600 14px/1.45 var(--f-body); color: rgba(255,251,242,.9);}
/* ---------- Mannschaftstraining ---------- */
.ol .ttrain {background: linear-gradient(160deg, #EAF6EE, #FFFBF2); border: 1.5px solid #BFE3CC;}
.ol .ttrain.done {opacity: .85;}
.ol .tt2-head {display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;}
.ol .tt2-head h2 {margin: 0;}
.ol .tt2-ic {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--pitch); color: #fff;}
.ol .tt2-ic .ic {width: 24px; height: 24px;}
.ol .tt2-bonus {display: grid; justify-items: end; font: 900 22px/1 var(--f-big); color: var(--pitch);}
.ol .tt2-bonus small {font: 700 10px var(--f-body); color: #6E695F;}
.ol .tt2-faces {display: flex; gap: 4px; margin: 10px 0;}
.ol .tt2-f {width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2px #fff;}
.ol .tt2-f canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .ttrain .btn {width: 100%;}
.ol .sc-full {margin: 6px 0; padding: 8px 12px; border-radius: 12px; background: #FFF6DC; font: 700 13px var(--f-body);}
.ol .rcoach {display: block;}
/* ---------- Einstellungen ---------- */
.ol .pset {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(31,122,71,.1); color: var(--pitch); cursor: pointer; flex: 0 0 auto;}
.ol .pset .ic {width: 22px; height: 22px;}
.ol .pset.dark {background: rgba(255,251,242,.14); color: #FFFBF2;}
.ol .setts {display: grid; gap: 10px;}
.ol .setts h2 {margin: 0 0 4px;}
.ol .st-row {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #F7F3EA;}
.ol .st-row.col {display: grid; justify-content: stretch;}
.ol .st-row span {display: grid;}
.ol .st-row b {font: 800 15px var(--f-body);}
.ol .st-row small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .st-row input[type=checkbox] {width: 24px; height: 24px; accent-color: #1F7A47;}
.ol .st-row input[type=range] {width: 100%; accent-color: #1F7A47;}
.ol .st-link {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 16px; background: #16201A; color: #FFFBF2; text-decoration: none;}
.ol .st-link span {display: grid;} .ol .st-link b {font: 800 15px var(--f-body);} .ol .st-link small {font: 600 12px var(--f-body); color: rgba(255,251,242,.7);}
.ol .st-link i {font-style: normal; font: 900 22px var(--f-big); color: #F2C14E;}
/* ---------- Scout-Reisen, Berichte, Skills ---------- */
.ol .sc-head {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 10px;}
.ol .sc-lv {display: grid; justify-items: center; width: 52px; height: 52px; align-content: center; border-radius: 16px; background: linear-gradient(160deg, #2E9A5D, #15603A); color: #fff;}
.ol .sc-lv small {font: 800 8px var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .8;}
.ol .sc-lv b {font: 900 26px/1 var(--f-big);}
.ol .sc-xp {display: grid; gap: 5px;}
.ol .sc-xp span {font: 700 12px var(--f-body); color: #6E695F;}
.ol .sc-xp > i {display: block; height: 10px; border-radius: 5px; background: #E4DCC8; overflow: hidden;}
.ol .sc-xp > i > i {display: block; height: 100%; background: linear-gradient(90deg, #3FCB7E, #1F7A47);}
.ol .sc-trip {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #16201A; color: #FFFBF2; margin-bottom: 10px;}
.ol .sc-trip .sc-flag {font-size: 30px;}
.ol .sc-trip b {display: block; font: 800 15px var(--f-body);} .ol .sc-trip small {font: 600 12px var(--f-body); color: rgba(255,251,242,.75);}
.ol .sc-lands {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px;}
.ol .sc-lands button {position: relative; aspect-ratio: 1; border-radius: 12px; border: 2px solid #E4DCC8; background: #FFFBF2; font-size: 22px; cursor: pointer;}
.ol .sc-lands button.on {border-color: var(--pitch); background: #E8F3EC; box-shadow: 0 0 0 2px rgba(31,122,71,.25);}
.ol .sc-lands button.lock {opacity: .35; cursor: default;}
.ol .sc-lands button i {position: absolute; right: 1px; bottom: -1px; font-size: 10px; font-style: normal;}
.ol .sc-poss {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;}
.ol .sc-poss button {padding: 6px 12px; border-radius: 999px; border: 2px solid #E4DCC8; background: #FFFBF2; font: 800 13px var(--f-body); color: var(--ink, #16201A); cursor: pointer;}
.ol .sc-poss button.on {background: var(--pitch); border-color: var(--pitch); color: #fff;}
.ol .scout .btn.big {width: 100%;}
.ol .potchip {justify-self: start; margin-top: 3px; padding: 2px 9px; border-radius: 999px; font: 800 11px var(--f-body);}
.ol .potchip.p0 {background: #EDE6D7; color: #6E695F;} .ol .potchip.p1 {background: #DDF1E4; color: #15603A;} .ol .potchip.p2 {background: #FFF1C9; color: #8A5A06;} .ol .potchip.p3 {background: #16201A; color: #F2C14E;}
.ol .sc-ok {font: 800 12px var(--f-body); color: var(--pitch); font-style: normal;}
.ol .skills {display: grid; gap: 10px;}
.ol .skills h2 {margin: 0;}
.ol .sk-row {display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #F7F3EA;}
.ol .sk-ic {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #16201A; color: #F2C14E;}
.ol .sk-ic .ic {width: 24px; height: 24px;}
.ol .sk-row b {display: block; font: 800 15px var(--f-body);} .ol .sk-row small {display: block; font: 600 12px/1.3 var(--f-body); color: #6E695F;}
.ol .sk-dots {display: flex; gap: 4px; margin-top: 6px;} .ol .sk-dots i {width: 14px; height: 6px; border-radius: 3px; background: #E4DCC8;} .ol .sk-dots i.on {background: var(--pitch);}
/* ---------- Unterpunkte (Segment-Leiste) ---------- */
.ol .psub {display: flex; gap: 6px; overflow-x: auto; margin: 0 16px 12px; padding: 4px; border-radius: 16px; background: #EDE6D7; scrollbar-width: none;}
.ol .psub::-webkit-scrollbar {display: none;}
.ol .psub button {position: relative; flex: 1 0 auto; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; font: 800 13px var(--f-body); color: #5B5852; cursor: pointer; white-space: nowrap;}
.ol .psub button.on {background: #FFFBF2; color: var(--ink, #16201A); box-shadow: 0 2px 6px rgba(0,0,0,.1);}
.ol .psub button i {position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D2483F; color: #fff; font: 800 10px/16px var(--f-body); font-style: normal;}
.ol .scout .sc-lv small, .ol .scout .sc-lv b {color: #FFFBF2;}
.ol .scout .sc-card {text-align: left;}
.ol .scout .sc-mid small {line-height: 1.35;}
.ol .scout h3.subh2 {text-align: left;}
/* ---------- Kabine als Chat ---------- */
.ol .kabine .krc-chat {max-height: 52vh; overflow-y: auto; display: grid; gap: 8px; padding: 4px 2px 8px;}
.ol .kabine .krc-chat p {margin: 0; max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #F7F3EA; font: 600 14px/1.4 var(--f-body);}
.ol .kabine .krc-chat p b {display: flex; gap: 8px; align-items: baseline; font: 800 12px var(--f-body); color: var(--pitch);}
.ol .kabine .krc-chat p time {font: 600 10px var(--f-body); color: #8A847A;}
.ol .kabine .krc-chat p.me {justify-self: end; border-radius: 16px 16px 4px 16px; background: #E3F2E8;}
.ol .kabine .krc-chat p.bot {justify-self: center; max-width: 94%; background: #16201A; color: #FFFBF2; border-radius: 14px;}
.ol .kabine .krc-chat p.bot b {color: #F2C14E;}
.ol .pnav button i {font-style: normal;}
.ol .psub button {flex: 1 1 0; min-width: 0; padding: 9px 6px;}
/* ---------- Abstimmung und Wechselgedanken ---------- */
.ol .vote, .ol .unrest {border: 2px solid #F2C14E; background: #FFFBEE;}
.ol .unrest {border-color: #E0624F; background: #FFF4F1;}
.ol .vt-top {display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; margin: 8px 0;}
.ol .vt-face {width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #EDE6D7;}
.ol .vt-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .vt-top b {display: block; font: 800 16px var(--f-body);} .ol .vt-top small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .vt-price {font: 900 20px var(--f-big) !important; color: #8A5A06; display: inline-flex !important; align-items: center; gap: 4px;}
.ol .vt-price .ic {width: 16px; height: 16px;}
.ol .vt-bar {height: 10px; border-radius: 5px; background: #F6E3DE; overflow: hidden;} .ol .vt-bar i {display: block; height: 100%; background: #3FCB7E;}
.ol .vt-count {margin: 6px 0 10px; font: 600 12px var(--f-body); color: #6E695F;}
.ol .vote .row2 .btn, .ol .unrest .btn {width: 100%;}
.ol .kitag.tr {background: #F2C14E; color: #16201A;} .ol .kitag.tal {background: #3FA7F5; color: #fff;}
/* ---------- Nationalmannschaft ---------- */
.ol .nat-head {display: flex; align-items: center; gap: 12px; margin-bottom: 8px;}
.ol .nat-head h2 {margin: 0;}
.ol .nat-flag {font-size: 40px; line-height: 1;}
.ol .nat-list {display: grid; gap: 5px; margin-top: 6px;}
.ol .nat-list > div {display: grid; grid-template-columns: 20px 36px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #F7F3EA;}
.ol .nat-list > div.mine {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px #F2C14E;}
.ol .nat-list i {font: 900 14px var(--f-big); font-style: normal; color: #8A847A;}
.ol .nat-f {width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #EDE6D7;}
.ol .nat-f canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .nat-mid {display: grid; min-width: 0;} .ol .nat-mid b {font: 800 14px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .ol .nat-mid small {font: 600 11px var(--f-body); color: #6E695F;}
.ol .nat-list > div > b {font: 900 20px var(--f-big); color: var(--pitch);}
.ol .rec-row {display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;}
.ol .rec-row button {flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; width: 78px; padding: 8px 4px; border-radius: 16px; border: 2px solid #E4DCC8; background: #FFFBF2; font: inherit; cursor: pointer;}
.ol .rec-row button.on {border-color: var(--pitch); background: #E8F3EC;}
.ol .rec-row b {font: 800 12px var(--f-body);}
.ol .ic-gem {stroke: none;}
.ol .nat-min {margin: 0 0 10px; font: 600 13px var(--f-body); color: #6E695F;} .ol .nat-min b {font: 900 18px var(--f-big); color: var(--ink, #16201A);}
.ol .shoprow {margin: 0 16px 12px; align-items: center;}
.ol .bankp .btn {width: 100%;}
/* Schützling mit fertigem Training hüpft und leuchtet */
.ol .ss-b.ready {border-color: #3FCB7E; box-shadow: 0 0 0 3px rgba(63,203,126,.35); animation: ssHop 1.4s ease-in-out infinite;}
@keyframes ssHop {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-5px);}}
.ol .ss-done {position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: #3FCB7E; color: #0C3B22; font: 800 10px var(--f-body); font-style: normal; white-space: nowrap;}
.ol .ss-busy {font: 700 10px var(--f-body); font-style: normal; color: #8A847A;}
@media (prefers-reduced-motion: reduce) {.ol .ss-b.ready {animation: none;}}
/* ---------- Minispiele ---------- */
.ol .mg-list {display: grid; gap: 10px;}
.ol .mg-card {display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; border: 2px solid #E4DCC8; background: #FFFBF2; text-align: left; font: inherit; color: var(--ink, #16201A); cursor: pointer;}
.ol .mg-ic {display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(160deg, #2E9A5D, #15603A); color: #fff;}
.ol .mg-ic .ic {width: 28px; height: 28px;}
.ol .mg-card b {display: block; font: 900 20px var(--f-big);} .ol .mg-card small {font: 600 12px/1.3 var(--f-body); color: #6E695F;}
.ol .mg-card em {font-style: normal; padding: 3px 10px; border-radius: 999px; background: #EDE6D7; font: 800 11px var(--f-body); white-space: nowrap;}
.ol .mg-card em.on {background: #F2C14E;}
.ol .mg {display: grid; gap: 12px;}
.ol .mg-top {display: flex; justify-content: space-between; align-items: baseline;} .ol .mg-top b {font: 900 26px var(--f-big);} .ol .mg-top span {font: 800 13px var(--f-body); color: #6E695F;}
.ol .mg-msg {margin: 0; min-height: 40px; text-align: center; font: 800 16px var(--f-body);}
.ol .mg-goal {position: relative; height: 210px; border-radius: 14px; background: linear-gradient(180deg, #2E9A5D 0 72%, #24804C 72%); overflow: hidden;}
.ol .mg-net {position: absolute; left: 6%; right: 6%; top: 12%; height: 52%; border: 5px solid #FFFBF2; border-bottom: 0; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 12px 12px;}
.ol .mg-keeper {position: absolute; top: 30%; width: 34px; height: 56px; margin-left: -17px; border-radius: 12px 12px 6px 6px; background: #F2C14E; border: 3px solid #16201A; transition: left .35s ease-out, transform .35s;}
.ol .mg-keeper.dive {transform: rotate(-20deg) scale(1.1);}
.ol .mg-aim {position: absolute; top: 34%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #D2483F, inset 0 0 0 3px #D2483F;}
.ol .mg-ball {position: absolute; left: 50%; bottom: 6%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ddd); border: 2px solid #16201A; transition: left .35s ease-out, bottom .35s ease-out, transform .35s;}
.ol .mg-ball.fly {bottom: 50%; transform: scale(.7);}
.ol .mg-jug {position: relative; height: 260px; border-radius: 14px; background: linear-gradient(180deg, #CDE9D6, #2E9A5D); overflow: hidden;}
.ol .mg-zone {position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: rgba(63,203,126,.45); border-top: 2px dashed #fff;}
.ol .mg-jball {position: absolute; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ccc); border: 3px solid #16201A;}
.ol .mg-foot {position: absolute; left: 50%; bottom: 0; width: 70px; height: 14px; margin-left: -35px; border-radius: 10px 10px 0 0; background: #16201A;}
.ol .kabine .krc-day {justify-self: center; padding: 2px 10px; border-radius: 999px; background: #EDE6D7; font: 800 10px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #6E695F;}
.ol .tt2-dots {display: flex; gap: 5px; margin-top: 8px;} .ol .tt2-dots i {flex: 1; height: 7px; border-radius: 4px; background: #D9E9DF;} .ol .tt2-dots i.on {background: var(--pitch);}
/* ---------- Vereinseinstellungen und Anfragen ---------- */
.ol .cs-modes {display: grid; gap: 8px;}
.ol .cs-modes button {display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 2px solid #E4DCC8; background: #FFFBF2; text-align: left; font: inherit; color: var(--ink, #16201A); cursor: pointer;}
.ol .cs-modes button.on {border-color: var(--pitch); background: #E8F3EC;}
.ol .cs-modes b {font: 800 15px var(--f-body);} .ol .cs-modes small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .reqs {border: 2px solid #F2C14E; background: #FFFBEE;}
.ol .rq-row {display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #EDE6D7;}
.ol .rq-row span {display: grid;} .ol .rq-row b {font: 800 14px var(--f-body);} .ol .rq-row small {font: 600 12px var(--f-body); color: #6E695F;}
/* ---------- Scout-Ausweis und Mitarbeiter ---------- */
.ol .scard {display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 10px; padding: 10px 12px; border-radius: 18px; border: 0; background: #16201A; color: #FFFBF2; text-align: left; font: inherit; cursor: pointer;}
.ol .scard .sc-lv small, .ol .scard .sc-lv b {color: #FFFBF2;}
.ol .scard-mid {display: grid; min-width: 0;} .ol .scard-mid b {font: 800 16px var(--f-body);} .ol .scard-mid small {font: 600 11px var(--f-body); color: rgba(255,251,242,.7);}
.ol .scard-sk {display: flex; gap: 6px;} .ol .scard-sk i {position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,251,242,.1); color: #F2C14E; font-style: normal;}
.ol .scard-sk .ic {width: 16px; height: 16px;} .ol .scard-sk em {position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 14px; border-radius: 7px; background: #F2C14E; color: #16201A; font: 900 9px/14px var(--f-body); font-style: normal; text-align: center;}
.ol .pc-pot {justify-self: start; margin: 2px 0; padding: 2px 9px; border-radius: 999px; font: 800 11px var(--f-body);}
.ol .pc-pot.p0 {background: rgba(255,251,242,.2); color: #FFFBF2;} .ol .pc-pot.p1 {background: #DDF1E4; color: #15603A;} .ol .pc-pot.p2 {background: #FFF1C9; color: #8A5A06;} .ol .pc-pot.p3 {background: #F2C14E; color: #16201A;}
.ol .staff {display: grid; gap: 6px; margin-bottom: 6px;}
.ol .st-row2 {display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #F7F3EA;}
.ol .st-row2.me {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px #F2C14E;}
.ol .st-row2 > span:nth-child(2) {display: grid; min-width: 0;} .ol .st-row2 b {font: 800 14px var(--f-body);} .ol .st-row2 small {font: 600 11px var(--f-body); color: #6E695F;}
.ol .st-row2 > i {width: 9px; height: 9px; border-radius: 50%; background: #CFC8B8;} .ol .st-row2 > i.on {background: #3FCB7E;}
.ol .sc-lv.sm {width: 44px; height: 44px; border-radius: 13px;} .ol .sc-lv.sm b {font-size: 20px; color: #FFFBF2;} .ol .sc-lv.sm small {color: #FFFBF2; font-size: 7px;}
/* ---------- Kapitän und Trainermarkt ---------- */
.ol .cap-note {margin: 8px 0; font: 800 14px var(--f-body); color: #8A5A06;}
.ol .hire {display: grid; gap: 10px;} .ol .hire h2 {margin: 0;}
.ol .hire-row {display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: #F7F3EA;}
.ol .hire-f {width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2px #F2C14E;}
.ol .hire-f canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .hire-row b {display: block; font: 800 15px var(--f-body);} .ol .hire-row small {display: block; font: 600 12px/1.3 var(--f-body); color: #6E695F;}
.ol .hire-q {color: #D9A21E; font-size: 13px; letter-spacing: 1px;}
.ol .hire-row .btn {display: grid; justify-items: center;} .ol .hire-row .btn small {font: 700 10px var(--f-body); color: inherit; opacity: .8;}
.ol #cohire {margin-top: 4px;}
/* Regler kompakter */
.ol .tk-sl {margin: 6px 0 10px;}
.ol .tk-lab {font-size: 11px; margin-bottom: 4px;}
.ol .tk-sl input[type=range] {height: 10px;}
.ol .tk-sl input[type=range]::-webkit-slider-thumb {width: 24px; height: 24px;}
.ol .tk-hint small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .tk-fit b {white-space: nowrap;}
/* ---------- Interaktives Vereinsgelände ---------- */
.ol .ymap {position: relative; aspect-ratio: 1 / 1.08; margin: 6px 0 10px; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #5FB37A, #2E8A52 70%); overflow: hidden; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25);}
.ol .ymap::before {content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 26px, transparent 26px 52px);}
.ol .ym-pitch {position: absolute; left: 28%; right: 28%; top: 26%; bottom: 30%; border: 3px solid rgba(255,255,255,.85); border-radius: 6px;}
.ol .ym-line {position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid rgba(255,255,255,.85);}
.ol .ym-circle {position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; transform: translate(-50%, -50%);}
.ol .ym-crest {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));}
.ol .ym-b {position: absolute; width: 27%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;}
.ol .ym-img {width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px #FFFBF2, 0 8px 16px -6px rgba(0,0,0,.5); transition: transform .2s;}
.ol .ym-img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .ym-b:active .ym-img {transform: scale(.94);}
.ol .ym-b b {padding: 1px 8px; border-radius: 999px; background: rgba(22,32,26,.82); color: #FFFBF2; font: 800 11px var(--f-body); white-space: nowrap;}
.ol .ym-lv {font-style: normal; font-size: 9px; letter-spacing: 1px; color: #FFE08A; text-shadow: 0 1px 2px rgba(0,0,0,.6);}
.ol .ym-up {position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #F2C14E; color: #16201A; font: 900 12px var(--f-body); font-style: normal; box-shadow: 0 0 0 2px #16201A; animation: ymUp 1.2s ease-in-out infinite;}
@keyframes ymUp {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-4px);}}
.ol .ym-b.fresh .ym-img {animation: ymFresh .8s cubic-bezier(.3,1.6,.5,1);}
@keyframes ymFresh {0% {transform: scale(.4) rotate(-10deg);} 100% {transform: none;}}
@media (prefers-reduced-motion: reduce) {.ol .ym-up, .ol .ym-b.fresh .ym-img {animation: none;}}
.ol .ymap {aspect-ratio: 1 / 1.12;}
.ol .ym-b {width: 25%;}
.ol .ym-up {top: 4px; right: 4px;}
.ol .ym-pitch {top: 30%; bottom: 34%;}
.ol .mgjump {margin: 8px auto 0; display: block;}
/* ---------- Scout fest in der Kopfzeile ---------- */
.ol .pscout {display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: #16201A; color: #FFFBF2; cursor: pointer; font: inherit; flex: 0 0 auto; max-width: 46%;}
.ol .ps-av {width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2px #F2C14E; flex: 0 0 auto;}
.ol .ps-av canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .ps-txt {display: grid; text-align: left; min-width: 0;} .ol .ps-txt b {font: 800 13px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .ol .ps-txt small {font: 700 10px var(--f-body); color: #F2C14E; white-space: nowrap;}
.ol .scs {display: grid; justify-items: center; gap: 10px; text-align: center;}
.ol .scs h2 {margin: 0;}
.ol .scs-av {width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #F2C14E, 0 10px 22px -10px rgba(0,0,0,.5);}
.ol .scs .sc-xp, .ol .scs .tres, .ol .scs .row2 {width: 100%;}
/* ---------- Profil auf einen Screen ---------- */
.ol .pc-mini {display: flex; gap: 6px; margin-top: 8px; justify-content: center;}
.ol .pc-ib {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,251,242,.18); color: #FFFBF2; cursor: pointer;}
.ol .pc-ib .ic {width: 18px; height: 18px;}
.ol .kbars {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 16px 10px;}
.ol .kbars .kbar {grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px; margin: 0;}
.ol .kbars .kbar > span {font-size: 11px;} .ol .kbars .kbar > b {font-size: 15px;}
.ol .kbars .kbar > i {grid-column: 1 / -1; height: 7px;}
.ol .kbars .kbar .sta-next {font-size: 10px;}
.ol .kwerte {padding-top: 12px; padding-bottom: 12px;}
.ol .kwerte h2 {display: none;}
.ol .kattr2 {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.ol .ka2 {display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 12px; background: #F7F3EA;}
.ol .ka2 > span {grid-row: span 2; color: var(--pitch);} .ol .ka2 > span .ic {width: 20px; height: 20px;}
.ol .ka2 b {font: 800 12px var(--f-body);}
.ol .ka2 em {grid-row: span 2; font-style: normal; font: 900 24px/1 var(--f-big); color: var(--ink, #16201A);}
.ol .ka2 em small {display: block; font: 800 9px var(--f-body); color: #1F9A57; text-align: right;}
.ol .ka2 > i {height: 5px; border-radius: 3px; background: #E4DCC8; overflow: hidden;} .ol .ka2 > i > i {display: block; height: 100%; background: linear-gradient(90deg, #3FCB7E, #1F7A47);}
/* Profil noch kompakter: Werte in 3 Spalten, Karte flacher */
.ol .pcard {grid-template-columns: 88px 1fr; padding: 12px 14px; gap: 4px 12px; margin-bottom: 10px;}
.ol .pc-face {width: 88px; height: 88px;}
.ol .pc-info h1 {font-size: 22px;}
.ol .pc-gear {gap: 6px; margin-top: 4px;}
.ol .pc-gear .kslot {aspect-ratio: 1.15;}
.ol .kattr2 {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;}
.ol .ka2 {grid-template-columns: 1fr auto; padding: 7px 8px; gap: 2px 4px;}
.ol .ka2 > span {grid-row: auto;} .ol .ka2 > span .ic {width: 16px; height: 16px;}
.ol .ka2 b {grid-column: 1 / -1; order: 3; font-size: 10px; color: #6E695F;}
.ol .ka2 em {grid-row: auto; font-size: 22px; text-align: right;}
.ol .ka2 em small {display: inline; margin-left: 2px;}
.ol .ka2 > i {grid-column: 1 / -1; order: 4;}
.ol .kwerte {padding: 10px 12px;}
.ol .ptop {gap: 6px; padding-left: 12px; padding-right: 12px;}
.ol .ptop .pset {width: 34px; height: 34px;}
.ol .pt-res {gap: 8px; min-width: 0; margin-left: auto;}
.ol .pt-res b {font-size: 15px;}
.ol .pt-res .ic {width: 14px; height: 14px;}
.ol .pt-bank i {width: 13px; height: 13px; font-size: 11px;}
.ol .ps-txt {max-width: 72px;}
/* ---------- Training: alle Schützlinge auf einen Blick ---------- */
.ol .tover {padding-bottom: 10px;}
.ol .tv-row {display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EDE6D7;}
.ol .tv-row:first-of-type {border-top: 0;}
.ol .tv-face {width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #EDE6D7;}
.ol .tv-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .tv-mid {display: grid; min-width: 0;} .ol .tv-mid b {font: 800 14px var(--f-body);}
.ol .tv-mid small {font: 600 12px var(--f-body); color: #6E695F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .tv-done {color: #1F9A57; font-weight: 800;}
.ol .tv-act {display: flex; gap: 6px;}
.ol .tv-act .btn {padding: 7px 10px; font-size: 12px;}
.ol .tv-all {width: 100%; margin-top: 8px;}
.ol .kbars:has(> .kbar:only-child) {grid-template-columns: 1fr;}
/* ---------- Eigene Spieler im Team immer gold markiert ---------- */
.ol .lg-grades > div.me, .ol .tt-fits > div.me {background: #FFF6DC; box-shadow: inset 3px 0 0 var(--gold); border-radius: 8px;}
.ol .tk-who button.own:not(.on) {box-shadow: inset 0 0 0 1.5px var(--gold);}
.ol .lu-row.own {background: #FFF6DC; box-shadow: inset 3px 0 0 var(--gold);}
.ol .fslot.meslot .sf {box-shadow: 0 0 0 2.5px #FFCC33;}
/* Profilkarte: lange Namen nicht unter das Stärke-Schild, Rollen-Schild lesbar */
.ol .pc-info h1 {margin-right: 28px;}
.ol .pc-info h1.lang {font-size: 19px; line-height: 1.05;}
.ol .pc-info .eyebrow .ic, .ol .pc-age .ic {width: 13px; height: 13px; vertical-align: -2px;}
.ol .pc-info .role {background: rgba(255,251,242,.92) !important; color: #15603A !important; box-shadow: none; border-radius: 999px; padding: 2px 9px;}
.ol .pc-info .role.stamm {background: #F2C14E !important; color: #16201A !important;}
.ol .pc-info .role.bank {background: rgba(255,251,242,.2) !important; color: #FFFBF2 !important;}
/* ---------- Trainingsplatz: Spieler wählen, Wert, Dauer, Start ---------- */
.ol .tdesk {padding: 12px;}
.ol .td-strip {display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 10px; border-bottom: 1px solid #EDE6D7; scrollbar-width: none;}
.ol .td-p, .ol .td-all {flex: 0 0 auto; width: 76px; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 14px; border: 1.5px solid transparent; background: #F7F3EA; cursor: pointer; position: relative;}
.ol .td-p.on {border-color: var(--gold); background: #FFF6DC;}
.ol .td-p b, .ol .td-all b {font: 800 12px var(--f-body); color: var(--ink); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .td-p small, .ol .td-all small {font: 700 11px var(--f-body); color: #6E695F; display: flex; align-items: center; gap: 2px;}
.ol .td-p small svg {width: 11px; height: 11px;}
.ol .td-f {width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 2.5px #CFC8B8;}
.ol .td-f canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .td-p.free .td-f {box-shadow: 0 0 0 2.5px var(--grass, #1F7A47);}
.ol .td-p.busy .td-f {box-shadow: 0 0 0 2.5px #CFC8B8; opacity: .8;}
.ol .td-p.done .td-f {box-shadow: 0 0 0 2.5px var(--gold); animation: tdhop 1.2s ease-in-out infinite;}
.ol .td-p.done small {color: #B07D12; font-weight: 800;}
@keyframes tdhop {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-3px);}}
.ol .td-all {background: var(--gold); color: var(--ink);}
.ol .td-all svg {width: 26px; height: 26px; margin: 9px 0 7px;}
.ol .td-sta {display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; margin-bottom: 10px;}
.ol .td-sta > span svg {width: 16px; height: 16px; color: #E0A526;}
.ol .td-sta > i {height: 8px; border-radius: 6px; background: #EDE6D7; overflow: hidden; display: block;}
.ol .td-sta > i > i {display: block; height: 100%; background: linear-gradient(90deg, #F2C14E, #E0A526); border-radius: 6px;}
.ol .td-sta b {font: 900 15px var(--f-big);}
.ol .td-attrs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px;}
.ol .td-a {display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 5px; padding: 9px 8px; border-radius: 12px; border: 1.5px solid transparent; background: #F7F3EA; cursor: pointer; position: relative; text-align: left;}
.ol .td-a svg {width: 16px; height: 16px; color: #1F7A47;}
.ol .td-a span {font: 700 12px var(--f-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .td-a b {font: 900 16px var(--f-big); color: var(--ink);}
.ol .td-a i {position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #D9534F;}
.ol .td-a.on {background: #1F7A47; border-color: #1F7A47;}
.ol .td-a.on span, .ol .td-a.on b, .ol .td-a.on svg {color: #FFFBF2;}
.ol .td-kinds {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px;}
.ol .td-k {display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid #E6DECD; background: #FFFBF2; cursor: pointer;}
.ol .td-k b {font: 900 17px var(--f-big); color: var(--ink);}
.ol .td-k span {font: 800 12px var(--f-body); color: #1F7A47;}
.ol .td-k small {font: 700 11px var(--f-body); color: #B07D12; display: flex; align-items: center; gap: 2px;}
.ol .td-k small svg {width: 11px; height: 11px;}
.ol .td-k.on {border-color: var(--gold); background: #FFF6DC; box-shadow: 0 0 0 1px var(--gold);}
.ol .td-k:disabled {opacity: .4;}
.ol .td-go {display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: #F7F3EA;}
.ol .td-go .btn {padding: 12px 22px;}
.ol .td-gt {font: 800 13px/1.25 var(--f-body); color: var(--ink);}
.ol .td-img {width: 120px; height: 120px; border-radius: 16px; overflow: hidden; background: #EDE6D7; display: grid; place-items: center; margin: 0 auto 6px;}
.ol .td-img.sm {width: 48px; height: 48px; border-radius: 10px; margin: 0;}
.ol .td-img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ol .td-run {display: grid; justify-items: center; text-align: center; gap: 4px; padding: 4px 0;}
.ol .td-run h3 {font: 800 17px var(--f-head, var(--f-big)); margin: 0;}
.ol .td-run .kr-bar {width: 100%; height: 8px; border-radius: 6px; background: #EDE6D7; overflow: hidden; margin-top: 6px;}
.ol .td-run .kr-bar i {display: block; height: 100%; background: #1F7A47;}
.ol .td-cd {font: 900 30px var(--f-big); color: var(--ink);}
.ol .td-btns {display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;}
.ol .td-run.fin .btn {width: 100%; margin-top: 6px;}
.ol .td-a {grid-template-columns: 18px 1fr; grid-template-rows: auto auto; row-gap: 1px; padding: 7px 8px;}
.ol .td-a b {grid-column: 2; grid-row: 1; justify-self: end; font-size: 18px; line-height: 1;}
.ol .td-a span {grid-column: 1 / 3; grid-row: 2; font-size: 11.5px;}
.ol .td-a i {top: 6px; left: 22px; right: auto;}
.ol .td-btns .btn {white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;}
.ol .td-btns .btn svg {width: 14px; height: 14px;}
.ol .td-all.go {background: #1F7A47; color: #FFFBF2;} .ol .td-all.go b, .ol .td-all.go small {color: #FFFBF2;}
.ol .lgts-prev {display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px;}
.ol .lgts-prev span {padding: 5px 9px; border-radius: 10px; background: #F7F3EA; font: 800 13px var(--f-body);}
.ol .lgts-row {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
/* ---------- Einstellungen: Konto ---------- */
.st-acc {display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 14px; background: #F7F3EA; text-align: left;}
.st-acc b {font: 800 14px var(--f-body);} .st-acc small {font: 600 12px var(--f-body); color: #6E695F;}
.st-in {width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid #E0D8C6; background: #FFFBF2; font: 600 15px var(--f-body); color: #16201A;}
/* Login: helle Felder mit dunkler Schrift, auch vor dem Spielstart (ohne .ol) */
.s-login .bigin {background: #FFFBF2 !important; color: #16201A !important; -webkit-text-fill-color: #16201A; border: 1.5px solid rgba(22,32,26,.2); border-radius: 14px; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 16px; text-align: left;}
.s-login .bigin::placeholder {color: #8A8476; -webkit-text-fill-color: #8A8476;}
.s-login .bigin:focus {border-color: #1F7A47; outline: none;}
/* ---------- Kopfleiste neu: Avatar mit Level, drei Kapseln, Zahnrad ---------- */
.ol .ptop {gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; border-bottom: 1px solid rgba(22,32,26,.08);}
.ol .ptop .pscout {position: relative; padding: 0; width: 42px; height: 42px; border-radius: 50%; background: none; max-width: none;}
.ol .ptop .ps-av {width: 42px; height: 42px; box-shadow: 0 0 0 2.5px #F2C14E, 0 4px 10px -4px rgba(0,0,0,.4);}
.ol .ps-lv {position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #16201A; color: #F2C14E; font: 900 11px/18px var(--f-big); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #F4EFE4;}
.ol .pt-res2 {flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 6px;}
.ol .tr {position: relative; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px 0 4px; border: 0; border-radius: 17px; background: #FFFBF2; box-shadow: 0 1px 0 rgba(22,32,26,.08), inset 0 0 0 1px rgba(22,32,26,.08); font: inherit; color: #16201A; cursor: pointer; min-width: 0;}
.ol .tr b {font: 900 16px/1 var(--f-big); letter-spacing: .2px; white-space: nowrap;}
.ol .tr-ic {display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;}
.ol .tr-ic svg, .ol .tr-ic .ic {width: 18px; height: 18px;}
.ol .tr.sta .tr-ic {background: #16201A; color: #F2C14E;}
.ol .tr.sta .tr-ic .ic {width: 15px; height: 15px; fill: #F2C14E; stroke: #F2C14E;}
.ol .tr-ic.coin svg {width: 24px; height: 24px;}
.ol .tr-ic.gem .ic {width: 22px; height: 22px;}
.ol .tr em {display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1F7A47; color: #FFFBF2; font: 900 14px/1 var(--f-body); font-style: normal; margin-left: 1px;}
.ol .tr.sta {padding-right: 10px; cursor: default;}
.ol .tr.sta > u {position: absolute; left: 32px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: #EDE6D7; overflow: hidden; text-decoration: none;}
.ol .tr.sta > u > u {display: block; height: 100%; background: #E0A526; text-decoration: none;}
.ol .tr.sta.low b {color: #C0392B;}
.ol .tr.sta b {margin-bottom: 4px;}
.ol .ptop .pset {width: 34px; height: 34px; background: transparent; color: #6E695F;}
.ol .ptop .pset .ic {width: 22px; height: 22px;}
@media (max-width: 360px) {.ol .tr b {font-size: 14px;} .ol .tr {padding-right: 6px;} .ol .tr em {width: 16px; height: 16px;}}
.ol .tr em {flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; padding: 0; line-height: 18px; text-align: center; transform: none; clip-path: none; border-radius: 50%;}
.ol .tr b {flex: 0 0 auto;}
/* ---------- Vereinssuche ---------- */
.ol .cl-list {display: grid; gap: 6px; margin: 4px 0 12px;}
.ol .cl-row {display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #F7F3EA;}
.ol .cl-crest svg {width: 40px; height: 40px; display: block;}
.ol .cl-mid {display: grid; min-width: 0;} .ol .cl-mid b {font: 800 15px var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .ol .cl-mid small {font: 600 12px var(--f-body); color: #6E695F;}
.ol .cl-more {margin-top: 6px; border-top: 1px solid #EDE6D7; padding-top: 8px;}
.ol .cl-more summary {font: 800 14px var(--f-body); color: #1F7A47; cursor: pointer; list-style: none; padding: 4px 0;}
.ol .cl-more summary::-webkit-details-marker {display: none;}
.ol .cl-more .krc-row {margin-top: 8px;}
.ol .cl-leave {display: block; margin: 4px 16px 18px; width: calc(100% - 32px); color: #C0392B; border-color: rgba(192,57,43,.35);}
/* Passwort zeigen */
.pwrow {position: relative;}
.pwrow input {padding-right: 84px !important;}
.pweye {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: #EDE6D7; color: #16201A; font: 800 12px 'Barlow', sans-serif; padding: 6px 10px; border-radius: 8px; cursor: pointer;}
/* ---------- Spielziel ---------- */
.goal {display: grid; gap: 10px; text-align: left;}
.goal h2 {margin: 0 0 4px;}
.gl-step {display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #F7F3EA;}
.gl-step > span {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1F7A47; color: #FFFBF2;}
.gl-step > span .ic {width: 20px; height: 20px;}
.gl-step b {font: 800 15px 'Barlow', sans-serif; color: #16201A; display: block;}
.gl-step small {font: 600 13px/1.35 'Barlow', sans-serif; color: #4A5249;}
.gl-step.gold {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px #F2C14E;}
.gl-step.gold > span {background: #F2C14E; color: #16201A;}
.goal .btn {margin-top: 6px;}
.ol .pt-brand {font: 900 22px var(--f-big); color: #1F7A47; letter-spacing: .5px;}
/* Aufstellung: wer darf umstellen */
.ol .lu-lock {display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px 12px; margin: 4px 0 10px; border-radius: 14px; background: #16201A; color: #FFFBF2;}
.ol .lu-lock > .ic {width: 22px; height: 22px; color: #F2C14E; justify-self: center;}
.ol .lu-lock b {display: block; font: 800 14px var(--f-body); color: #F2C14E;} .ol .lu-lock small {font: 600 12.5px var(--f-body); color: #E6DECD;}
.ol .lu-edit {display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font: 700 12.5px var(--f-body); color: #1F7A47;}
.ol .lu-edit .ic {width: 16px; height: 16px;}
.ol .nwintro .linkbtn {color: #F2C14E; text-decoration-color: rgba(242,193,78,.6);}
/* Coach kompakt */
.ol .co-more {display: inline; padding: 0; margin-left: 4px; font-size: 12px; color: #F2C14E;}
.ol .tt-fits2 {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;}
.ol .tt-fits2 span {display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 12px; background: #F7F3EA; font: 700 12.5px var(--f-body); color: #16201A;}
.ol .tt-fits2 span.me {background: #FFF6DC; box-shadow: inset 0 0 0 1.5px #F2C14E;}
.ol .tt-fits2 b {min-width: 24px; text-align: center; padding: 2px 5px; border-radius: 8px; background: #FFFBF2; font: 900 13px var(--f-big);}
/* Unterpunkt-Zähler nicht über dem Wort */
.ol .psub button {position: relative; overflow: visible;}
.ol .psub button i {position: absolute; top: -6px; right: -2px; margin: 0; transform: none;}
/* Trainingsplatz: drei Einheiten */
.ol .td-jobs {display: grid; gap: 8px;}
.ol .td-job {display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1.5px solid #E6DECD; background: #FFFBF2; text-align: left; cursor: pointer;}
.ol .td-job:active {transform: scale(.98);}
.ol .td-job .td-img.sm {width: 52px; height: 52px;}
.ol .tj-mid {display: grid; gap: 3px; min-width: 0;}
.ol .tj-mid b {font: 800 14px/1.2 var(--f-body); color: #16201A;}
.ol .tj-mid small {display: flex; align-items: center; gap: 4px; font: 700 12px var(--f-body); color: #1F7A47;}
.ol .tj-mid small .ic {width: 13px; height: 13px;}
.ol .td-job em {display: inline-flex; align-items: center; gap: 2px; font: 900 16px var(--f-big); font-style: normal; color: #B07D12;}
.ol .td-job em .ic {width: 14px; height: 14px;}
.ol .td-job:disabled {opacity: .45;}
.ol .td-w {width: 100%; margin-top: 8px;}
/* ---------- Berater-Spind ---------- */
.ol .sp-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .sp-it {display: grid; justify-items: center; gap: 3px; padding: 8px 6px; border-radius: 14px; border: 1.5px solid #E6DECD; background: #FFFBF2; cursor: pointer; text-align: center;}
.ol .sp-it.gold {border-color: #F2C14E; background: #FFF6DC;}
.ol .sp-it .kimg {width: 56px; height: 56px;} .ol .sp-it .kimg img {width: 100%; height: 100%; object-fit: contain;}
.ol .sp-it b {font: 800 11.5px/1.2 var(--f-body); color: #16201A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.ol .sp-it small {font: 700 10.5px var(--f-body); color: #1F7A47;}
.ol .sp-row {display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #EDE6D7;}
.ol .sp-row:first-of-type {border-top: 0;}
.ol .sp-name {font: 800 13px var(--f-body);}
.ol .sp-worn {display: flex; gap: 5px;}
.ol .sp-w {width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #E6DECD; background: #FFFBF2; padding: 2px; display: grid; place-items: center; cursor: pointer;}
.ol .sp-w img {width: 100%; height: 100%; object-fit: contain;}
.ol .sp-w.gold {border-color: #F2C14E;}
.ol .sp-w.empty {border-style: dashed; background: transparent; color: #CFC8B8; cursor: default;} .ol .sp-w.empty .ic {width: 18px; height: 18px;}
.sp-sheet {display: grid; gap: 8px; text-align: center;}
.sp-sheet .kimg.big {width: 110px; height: 110px; margin: 0 auto;} .sp-sheet .kimg.big img {width: 100%; height: 100%; object-fit: contain;}
.sp-who {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;}
.sp-who button {display: grid; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1.5px solid #E6DECD; background: #FFFBF2; cursor: pointer;}
.sp-who b {font: 800 13px 'Barlow', sans-serif; color: #16201A;} .sp-who small {font: 600 11px 'Barlow', sans-serif; color: #6E695F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .sp-w.empty {cursor: pointer; position: relative;}
.ol .sp-w.empty i {position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: #1F7A47; color: #fff; font: 900 12px/16px var(--f-body); font-style: normal; text-align: center;}
.ol .sp-shop {width: 100%; margin-top: 8px;}
.sp-sheet .kimg.big {width: 76px; height: 76px;} .sp-sheet h2 {margin: 0;} .sp-sheet .hint {margin: 0;}
/* Mannschaft: wer hat wen gescoutet */
.ol .sc-leg {display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px;}
.ol .sc-leg span {display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--f-body); color: #16201A;}
.ol .sc-leg i {width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #FFFBF2, 0 0 0 3px rgba(22,32,26,.15);}
.ol .sc-leg b {font: 900 13px var(--f-big); color: #6E695F;}
/* Duelle in den Minispielen */
.ol .duels {display: grid; gap: 8px;}
.ol .du-card {display: grid; grid-template-columns: 48px 1fr 18px; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 0; text-align: left; cursor: pointer; background: #16201A; color: #FFFBF2;}
.ol .du-card.team {background: linear-gradient(135deg, #1F7A47, #145A33);}
.ol .du-ic {display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(242,193,78,.18); color: #F2C14E;}
.ol .du-ic .ic {width: 26px; height: 26px;}
.ol .du-card b {font: 900 18px var(--f-big); letter-spacing: .3px; color: #FFFBF2;}
.ol .du-card small {display: block; margin-top: 2px; font: 600 12px/1.35 var(--f-body); color: #D9E5DC;}
.ol .du-card em {font: 900 22px var(--f-big); color: #F2C14E; font-style: normal;}
.ol .du-card em .ic {width: 18px; height: 18px;}
/* ---------- Erste Schritte ---------- */
.ol .guide {display: grid; gap: 6px; margin: 0 16px 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #16201A, #23382A); color: #FFFBF2; box-shadow: 0 12px 24px -16px rgba(0,0,0,.6);}
.ol .gd-top {display: grid; gap: 6px;}
.ol .guide .eyebrow {color: #F2C14E;}
.ol .gd-top > i {display: block; height: 6px; border-radius: 4px; background: rgba(255,251,242,.15); overflow: hidden;}
.ol .gd-top > i > i {display: block; height: 100%; background: #F2C14E; border-radius: 4px;}
.ol .guide > b {font: 900 21px/1.15 var(--f-big); letter-spacing: .2px; margin-top: 2px;}
.ol .guide > small {font: 600 13px/1.35 var(--f-body); color: #D9E5DC;}
.ol .guide .btn {margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
.ol .guide .btn .ic {width: 16px; height: 16px;}
.ol .guide.now {grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border: 0; text-align: left; cursor: pointer; width: calc(100% - 32px);}
.ol .guide.now > span {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F2C14E; color: #16201A;}
.ol .guide.now > span .ic {width: 18px; height: 18px;}
.ol .guide.now b {font: 800 15px var(--f-body); margin: 0;}
.ol .guide.now em {font: 800 13px var(--f-body); font-style: normal; color: #F2C14E; white-space: nowrap;}
/* ---------- Start: ersten Schützling wählen ---------- */
.ol .pk-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 14px;}
.ol .pk-card {position: relative; display: grid; justify-items: center; gap: 3px; padding: 12px 8px 10px; border-radius: 18px; border: 2px solid transparent; background: #FFFBF2; box-shadow: 0 6px 16px -10px rgba(22,32,26,.35); cursor: pointer;}
.ol .pk-card.on {border-color: #F2C14E; background: #FFF6DC; box-shadow: 0 0 0 3px rgba(242,193,78,.35), 0 10px 20px -12px rgba(22,32,26,.5);}
.ol .pk-face {width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 3px #1F7A47;}
.ol .pk-card.on .pk-face {box-shadow: 0 0 0 3px #F2C14E;}
.ol .pk-face canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .pk-card b {font: 800 14px/1.2 var(--f-body); color: #16201A; text-align: center; margin-top: 4px;}
.ol .pk-card small {font: 700 12px var(--f-body); color: #6E695F;}
.ol .pk-card em {position: absolute; top: 8px; right: 8px; display: grid; justify-items: center; font: 900 18px/1 var(--f-big); font-style: normal; color: #1F7A47;}
.ol .pk-card em i {font: 800 7.5px var(--f-body); font-style: normal; letter-spacing: .5px; text-transform: uppercase; color: #6E695F;}
.ol .pk-new {display: block; margin: 8px auto 20px;}
.ol .pk-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 16px 14px; box-sizing: border-box;}
.ol .pk-card {min-width: 0;} .ol .pk-card b, .ol .pk-card small {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .pk-grid .pk-card {width: 100%; height: auto; min-height: 0; box-sizing: border-box; align-content: start; margin: 0; padding: 14px 8px 12px;}
/* ---------- Trainingsergebnis ---------- */
.trres {display: grid; gap: 10px; text-align: center;}
.trres h2 {margin: 0; font-size: 28px;}
.tr-row {display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: #F7F3EA; text-align: left;}
.tr-row.up {background: linear-gradient(135deg, #E9F5EC, #FFFBF2); box-shadow: inset 0 0 0 1.5px rgba(31,122,71,.35);}
.tr-face {width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #EDE6D7; box-shadow: 0 0 0 3px #1F7A47;}
.tr-face canvas {width: 100% !important; height: 100% !important; display: block;}
.tr-mid {display: grid; gap: 4px; position: relative;}
.tr-mid small {display: flex; align-items: center; gap: 4px; font: 700 12.5px 'Barlow', sans-serif; color: #4A5249;}
.tr-mid small .ic {width: 14px; height: 14px;}
.tr-mid > b {font: 900 34px/1 'Big Shoulders Display', sans-serif; color: #16201A;}
.tr-mid > b i {font-style: normal; color: #9A958A; font-size: 24px;}
.tr-mid > b em {font-style: normal; color: #1F7A47;}
.tr-none {font-size: 22px !important; color: #6E695F !important;}
.tr-tag {position: absolute; right: 0; top: 18px; padding: 4px 9px; border-radius: 10px; background: #1F7A47; color: #FFFBF2; font: 900 16px 'Big Shoulders Display', sans-serif;}
.tr-tag.soft {background: #F2C14E; color: #16201A; font-size: 13px;}
.tr-bar {height: 8px; border-radius: 6px; background: #E0D8C6; overflow: hidden;}
.tr-bar i {display: block; height: 100%; background: linear-gradient(90deg, #1F7A47, #3BB36A); border-radius: 6px; transition: width 1.1s cubic-bezier(.2,.8,.2,1);}
.tr-str {display: flex; align-items: center; gap: 5px; font: 700 13px 'Barlow', sans-serif; color: #B07D12;}
.tr-str .ic {width: 14px; height: 14px;} .tr-str b {font-weight: 900;}
/* Goldener Stollen: größer und mit Glanz */
.ol .ic-gem, .ic-gem {overflow: visible; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)) drop-shadow(0 0 4px rgba(242,193,78,.45));}
.ol .tr-ic.gem {background: radial-gradient(circle at 50% 40%, #FFF3C4, #F7E3A0 55%, transparent 72%);}