@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#132b6b;--blue:#ef4136;--cyan:#00a1de;--bg:#f5f7fb;--line:#e2e6f0;--text:#101a30;--muted:#6b7488;--card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex}.sidebar{width:250px;background:var(--navy);min-height:100vh;color:#fff;padding:28px 18px;position:fixed;left:0;top:0}.brand{display:flex;gap:11px;align-items:center;padding:0 10px 35px}.brand .ball{width:44px;height:44px;border-radius:50%;object-fit:contain;flex-shrink:0}.brand strong{display:block;letter-spacing:1.5px;font-size:18px}.brand span{display:block;font-size:10px;letter-spacing:2.4px;opacity:.65;margin-top:2px}nav a{display:block;color:#b9c9dc;text-decoration:none;padding:13px 14px;border-radius:9px;margin:4px 0;font-size:14px}nav a:hover,nav a.active{background:#22397a;color:#fff}.sidefoot{position:absolute;bottom:25px;left:28px;font-size:11px;color:#6e88a6}main{margin-left:250px;width:calc(100% - 250px);padding:30px 42px;max-width:1750px}.topbar{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--blue);font-weight:800}.topbar h1{margin:5px 0 0;font-size:30px}.search{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:340px}.search input{border:0;outline:0;padding:12px 14px;flex:1}.search button{border:0;background:white;padding:0 16px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 20px rgba(20,35,56,.035)}.card{padding:20px;position:relative;overflow:hidden}.card span,.card small{display:block;color:var(--muted);font-size:12px}.card b{display:block;font-size:30px;margin:8px 0}.card i{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:10px;opacity:.16;font-style:normal;font-size:18px;display:grid;place-items:center}.blue{background:var(--blue)}.violet{background:#7656d6}.orange{background:#e99a3d}.green{background:#25a66f}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.panel{padding:22px;margin-bottom:20px}.panel h2{font-size:17px;margin:0 0 18px}.panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panelhead h2{margin:0}.panelhead a,.panelhead span{font-size:12px;color:var(--blue);text-decoration:none}.group{padding:12px 0;border-bottom:1px solid var(--line)}.group:last-child{border-bottom:0}.row{display:flex;justify-content:space-between;gap:20px;align-items:center}.row span{font-weight:700;color:var(--blue);font-size:13px}.progress{height:7px;background:#eaf0f6;border-radius:20px;margin:9px 0 7px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:20px}.group small,.event span,.profilehero p{font-size:11px;color:var(--muted)}.event{display:flex;gap:13px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.event:last-child{border:0}.date{width:42px;height:42px;background:#eef6ff;color:var(--blue);border-radius:9px;display:grid;place-items:center;font-weight:800}.date small{font-size:8px;margin-top:-12px}.event strong,.event span{display:block}.event strong{font-size:13px;margin-bottom:4px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:12px}th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.playerlink{color:var(--text);font-weight:700;text-decoration:none}.playerlink:hover{color:var(--blue)}.level{background:#e8f5ff;color:#0874bd;padding:5px 8px;border-radius:6px;font-weight:700}.profilehero{background:linear-gradient(115deg,#0d1f52,#1a3f9e);color:#fff;border-radius:16px;padding:28px;display:flex;align-items:center;gap:18px;margin-bottom:20px}.avatar{width:65px;height:65px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;font-weight:800}.profilehero h2{margin:3px 0;font-size:26px}.profilehero p{color:#c3d3ec}.score{margin-left:auto;text-align:right}.score small,.score span{display:block;font-size:10px;opacity:.7}.score strong{font-size:34px;display:block}.result,.metric{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.result:last-child{border-bottom:0}.result span{color:var(--muted);width:30px}.result strong{flex:1;display:flex;align-items:center;gap:8px;font-size:13px}.notice{background:#f5f9fd;border:1px solid #dbe8f5;padding:16px;border-radius:10px;font-size:12px;line-height:1.6}.metric{font-size:12px}.metric b{font-size:16px}.uploadgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.upload{text-align:center;padding:45px}.uploadicon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#eaf5ff;color:var(--blue);margin:0 auto 15px;font-size:24px}.upload p{font-size:12px;color:var(--muted)}label{display:inline-block;margin-top:18px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1px;border:1px solid #cfe2f4;padding:10px 14px;border-radius:8px}label input{display:none}.primary{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:10px 14px;font-size:11px;font-weight:700}.big{padding:20px 0}.big h3{margin:0 0 5px;font-size:15px}.calendarlist .event{padding:16px}.alert{background:#fff4df;border:1px solid #f3d49a;color:#785313;padding:14px;border-radius:10px;margin-bottom:20px;font-size:12px}.back{font-size:12px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:6px}footer{color:#91a0b1;font-size:10px;padding:10px 0 30px}@media(max-width:900px){.sidebar{width:70px;padding:20px 8px}.brand div:not(.ball),nav a{font-size:0}.brand{padding:0 7px 30px}.brand .ball{margin:auto}main{margin-left:70px;width:calc(100% - 70px);padding:20px}.cards{grid-template-columns:1fr 1fr}.grid2,.uploadgrid{grid-template-columns:1fr}.topbar{align-items:start;gap:15px;flex-direction:column}.search{width:100%}}

.pagination{display:flex;gap:6px;justify-content:center;margin-top:18px}.pagination a{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--text);text-decoration:none;font-size:12px;background:#fff}.pagination a.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}

/* Auf-/Abstieg: Fortschritt & Status-Badges */
.promo{min-width:130px}.promo-bar{height:6px;background:#eaf0f6;border-radius:20px;overflow:hidden}.promo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:20px}.promo small{color:var(--muted);font-size:10px}
.promo-safe{color:#1c8a4a;background:#e8f5ec;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;display:inline-block}.promo-safe small{font-weight:600;opacity:.8}
.promo-risk{color:#b23b1f;background:#fdeee9;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;display:inline-block}
.promo-assim{color:var(--muted);background:#f1f2f5;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600;display:inline-block}

/* Spielerprofil: Ergebnis-Tags im 12-Monats-Fenster */
.tag-counted{font-size:9px;font-weight:700;background:#e8f5ec;color:#1c8a4a;padding:3px 7px;border-radius:5px;letter-spacing:.3px}
.tag-rollingoff{font-size:9px;font-weight:700;background:#fdeee9;color:#b23b1f;padding:3px 7px;border-radius:5px;letter-spacing:.3px}
.tag-not{font-size:9px;font-weight:700;background:#f1f2f5;color:var(--muted);padding:3px 7px;border-radius:5px;letter-spacing:.3px}
.tag-notplayed{font-size:9px;font-weight:700;background:#fff;color:var(--muted);border:1px dashed #c9cfdb;padding:2px 6px;border-radius:5px;letter-spacing:.3px}
.result.notplayed{opacity:.5}

.safebox{background:#e8f5ec;border:1px solid #bfe3cb;color:#1c6b3a;padding:16px;border-radius:10px;font-size:12px;line-height:1.6;margin-top:14px}.safebox b{display:block;font-size:20px;margin-bottom:2px}
.riskbox{background:#fdeee9;border:1px solid #f3c3b3;color:#8a2c14;padding:16px;border-radius:10px;font-size:12px;line-height:1.6;margin-top:14px}.riskbox b{display:block;font-size:20px;margin-bottom:2px}
.promobox{margin-top:14px}

/* Level-Änderung gegenüber Vormonat */
.level.level-up{background:#e8f5ec;color:#1c8a4a}
.level.level-down{background:#fdeee9;color:#b23b1f}
.hero-up{background:#1c8a4a;color:#fff;padding:2px 7px;border-radius:5px;font-weight:700}
.hero-down{background:#b23b1f;color:#fff;padding:2px 7px;border-radius:5px;font-weight:700}
/* Ranking: Filterleiste, Schnellfilter-Chips, sortierbare Spalten */
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:14px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.filterbar label{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;border:0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.filterbar label input,.filterbar select{display:block;font:inherit;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:150px}
.filterbar label input{min-width:200px}
.filterbar input:focus,.filterbar select:focus{outline:2px solid #bfe0f5;border-color:#0874bd}
.filterbar .primary{background:#0874bd;padding:11px 16px;cursor:pointer}
.filterbar .reset{font-size:12px;color:var(--muted);text-decoration:none;padding:10px 4px}
.filterbar .reset:hover{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);font-size:12px;text-decoration:none}
.chip em{font-style:normal;font-weight:700;color:var(--muted);font-size:11px}
.chip:hover{border-color:#9cc9ea}
.chip.on{background:#0874bd;border-color:#0874bd;color:#fff}.chip.on em{color:#d6ecfb}
.chip.c-up:not(.on){color:#1c8a4a}.chip.c-down:not(.on),.chip.c-risk:not(.on){color:#b23b1f}.chip.c-safe:not(.on){color:#1c8a4a}
th.sortable a{color:inherit;text-decoration:none;white-space:nowrap}
th.sortable a:hover,th.sorted a{color:#0874bd}
@media(max-width:900px){.filterbar label,.filterbar label input,.filterbar select{width:100%;min-width:0}}
/* Profil: Etiketten einzeilig, Hinweisboxen ruhiger, Kennzahlen rechtsbündig */
.result strong{flex-wrap:wrap;row-gap:4px}
.result strong [class^="tag-"]{white-space:nowrap;flex-shrink:0}
.riskbox b,.safebox b{font-size:15px;line-height:1.35;margin-bottom:6px}
.metric{gap:10px;align-items:baseline}.metric>span:first-child{margin-right:auto}
/* =====================================================================
   Handy & Tablet (≤ 900 px): Kopfleiste statt Seitenleiste,
   Ranking als Karten, kompakte Filter, Profil gestapelt
   ===================================================================== */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-only{display:none!important}
@media(max-width:900px){
 body{display:block}
 .sidebar{position:static;width:auto;min-height:0;padding:14px 16px 10px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
 .brand{padding:0 0 10px;gap:10px}
 .brand .ball{width:36px;height:36px;margin:0}
 .brand div:not(.ball){font-size:inherit}
 .brand strong{font-size:16px}
 .brand span{font-size:9px}
 .sidebar nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
 .sidebar nav::-webkit-scrollbar{display:none}
 .sidebar nav a{font-size:13px;white-space:nowrap;margin:0;padding:9px 13px;border-radius:20px;background:rgba(255,255,255,.06)}
 .sidebar nav a.active{background:#fff;color:var(--navy);font-weight:600}
 .sidefoot{display:none}
 main{margin-left:0;width:100%;padding:18px 16px 24px}
 .topbar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
 .topbar h1{font-size:24px}
 .search{width:100%}
 .search input{font-size:16px}
 .panel{padding:16px;border-radius:12px}
 .panelhead{flex-wrap:wrap;gap:6px 12px}
 .cards{grid-template-columns:1fr 1fr;gap:10px}
 .card{padding:14px}.card b{font-size:24px;margin:4px 0}.card i{width:30px;height:30px;font-size:14px;right:10px;bottom:10px}
 .grid2,.uploadgrid{grid-template-columns:1fr;gap:0}
 .back{display:inline-block;padding:4px 0 10px;font-size:13px;font-weight:600;color:#0874bd}

 /* Filter: Suche volle Breite, Auswahlfelder zweispaltig */
 .mobile-only{display:flex!important}
 .filterbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
 .filterbar label{min-width:0}
 .filterbar label:first-of-type{grid-column:1/-1}
 .filterbar label input,.filterbar select{width:100%;min-width:0;font-size:16px;padding:10px}
 .filterbar .primary{grid-column:1/-1;padding:12px}
 .filterbar .reset{grid-column:1/-1;text-align:center;padding:4px}

 /* Schnellfilter: eine wischbare Zeile */
 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px 2px}
 .chips::-webkit-scrollbar{display:none}
 .chip{white-space:nowrap;flex-shrink:0;padding:8px 12px}

 /* Ranking-Tabelle wird zu Karten */
 table.rankcards thead{display:none}
 table.rankcards,table.rankcards tbody{display:block}
 table.rankcards tr{display:grid;grid-template-columns:36px 1fr auto;grid-template-areas:"rank name lvl" "rank lic pts" "status status status";gap:4px 10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
 table.rankcards td{display:block;padding:0;border:0;min-width:0}
 table.rankcards .c-rank{grid-area:rank;align-self:start;font-weight:800;font-size:15px;color:var(--navy);padding-top:2px}
 table.rankcards .c-name{grid-area:name;font-size:14px}
 table.rankcards .c-lvl{grid-area:lvl;justify-self:end}
 table.rankcards .c-lic{grid-area:lic;font-size:11px;color:var(--muted)}
 table.rankcards .c-lic:not(:empty)::before{content:"Lizenz "}
 table.rankcards .c-pts{grid-area:pts;justify-self:end;font-size:13px}
 table.rankcards .c-pts::after{content:" Pkt.";font-size:11px;color:var(--muted)}
 table.rankcards .c-status{grid-area:status;padding-top:4px}
 table.rankcards .promo{min-width:0}
 table.rankcards .promo-risk,table.rankcards .promo-safe,table.rankcards .promo-assim{white-space:normal;line-height:1.4}

 /* Seitenzahlen: größere Tippflächen */
 .pagination{flex-wrap:wrap}
 .pagination a,.pagination button{min-width:40px;height:40px}

 /* Spielerprofil */
 .profilehero{flex-wrap:wrap;padding:20px;gap:14px;border-radius:14px}
 .profilehero .avatar{width:52px;height:52px}
 .profilehero>div:nth-child(2){flex:1;min-width:0}
 .profilehero h2{font-size:22px;overflow-wrap:anywhere}
 .profilehero p{line-height:1.6}
 .score{margin-left:0;text-align:left;width:100%;display:flex;align-items:baseline;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}
 .score small{order:3;margin-left:auto}
 .score strong{font-size:28px}
 .result{gap:8px}
 .result span{width:24px;flex-shrink:0}
 .notice,.riskbox,.safebox{padding:14px}
}
@media(max-width:360px){.cards{grid-template-columns:1fr}.filterbar{grid-template-columns:1fr}}
.result strong span{width:auto}