/* Großes Seitenmenü links und Freundesleiste rechts wie im Vikinger-Template (Maße und Aufbau, keine Template-Dateien).
   Seitenmenü: Profilkopf (Banner, Sechseck-Avatar mit Level, Name, Abzeichen, Zahlen), darunter die Bereiche mit Icons,
   der aktive Bereich als rote Fläche. Ab 1366 px fest links (Umschalten auf die Icon-Leiste mit dem Menü-Knopf),
   1101 bis 1365 px als Schublade unter der Kopfleiste, darunter als Schublade über die ganze Höhe.
   Freundesleiste ab 1101 px: Freunde mit Level und Online-Punkt, unten der Launcher-Download. Nur mit Konto. */

.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ---------------------------------------------------------------- Seitenmenü: Grundform (alle Breiten) */
.side { width:300px; padding:0 0 24px; gap:0; border-right:0; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.side > .brand { padding:18px 24px 12px; }
body:not(.guest) .side > .brand { display:none; }
.side-me { display:grid; justify-items:center; text-align:center; padding:0 0 28px; }
.side-me:empty { display:none; }
.sp-cover { position:relative; width:100%; height:76px; overflow:hidden; background:var(--card-2); }
.sp-cover > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-av { position:relative; display:block; margin-top:-50px; border-radius:20px; }
.sp-av .hexav { width:100px; }
.side .hexav .plate { fill:var(--side); }
.sp-av .hexav .av.xl { font-size:1.7rem; }
.sp-av .hexav-lvl b { font-size:.72rem; }
.sp-name { margin-top:12px; padding:0 20px; font:700 1.05rem/1.2 var(--text); color:var(--fg); overflow-wrap:anywhere; }
.sp-name:hover { color:var(--accent); }
.sp-handle { margin-top:5px; font:700 .72rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sp-badges { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:22px; min-height:37px; }
.sp-badges .achb.s { --size:32px; }
.sp-more { position:relative; display:grid; place-items:center; width:32px; height:37px; color:var(--fg); font:700 .72rem/1 var(--text);
  background:var(--card-2); -webkit-mask:var(--hex-fill) 0 0/100% 100% no-repeat; mask:var(--hex-fill) 0 0/100% 100% no-repeat; }
.sp-none { display:inline-flex; align-items:center; gap:8px; font:700 .82rem/1 var(--text); color:var(--muted); }
.sp-none svg.i { width:18px; height:18px; color:var(--accent); }
.sp-badges:hover .sp-none { color:var(--fg); }
.sp-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; margin-top:24px; padding:0 24px; }
.sp-stats a { position:relative; display:grid; gap:7px; justify-items:center; padding:2px 0; }
.sp-stats a + a::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--line); }
.sp-stats b { font:700 1rem/1 var(--text); color:var(--fg); }
.sp-stats small { font:700 .68rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sp-stats a:hover small { color:var(--fg); }

/* Bereiche: 48 px hohe Zeilen, Icon links, aktiver Bereich als rote Fläche mit Schatten wie im Template. */
.side-nav { gap:4px; padding:0 16px; }
.side-label { padding:18px 22px 6px; font:700 .68rem/1 var(--text); letter-spacing:.14em; color:var(--muted-2); }
.side-nav a { height:48px; padding:0 16px 0 22px; gap:22px; border-radius:12px; color:var(--fg); font:700 .95rem/1 var(--text); transition:background .15s, color .15s; }
.side-nav a svg.i { width:20px; height:20px; flex:none; color:var(--muted-2); transition:color .15s; }
.side-nav a:hover { background:none; color:var(--fg); }
.side-nav a:hover svg.i { color:var(--accent); }
.side-nav a.active { color:#fff; background:var(--accent); box-shadow:4px 7px 12px 0 rgba(239,35,60,.25); }
.side-nav a.active::before { display:none; }
.side-nav a.active svg.i, .side-nav a.active .dotg { color:#fff; background:none; }
.side-nav a .dotg { margin:0 6px; }
.side-nav a.active .dotg { background:#fff; }
.side-foot { padding:20px 16px 0; }

/* Menü-Knopf direkt nach dem Logo, ohne eigene Fläche (wie im Template). */
.topbar > .menu.icon-btn { width:40px; height:40px; margin-left:-6px; border:0; border-radius:10px; background:none; box-shadow:none; color:rgba(237,242,244,.72); }
.topbar > .menu.icon-btn:hover, .topbar > .menu.icon-btn[aria-expanded="true"] { color:#fff; background:none; }
.topbar > .menu.icon-btn svg.i { width:22px; height:22px; }
.topbar > .menu.icon-btn:focus-visible { outline:2px solid #fff; outline-offset:-4px; }

/* ---------------------------------------------------------------- Ab 1101 px: unter der Kopfleiste */
@media (min-width:1101px) {
  body:not(.guest) .menu { display:grid; }
  .side { top:var(--top-h); box-shadow:4px 0 30px rgba(0,0,0,.18); }
  .side.open { box-shadow:24px 0 60px rgba(0,0,0,.45); }
  .side .only-drawer, .side-foot { display:none !important; }
}
/* Ab 1366 px fest links, solange niemand auf die schmale Leiste umgeschaltet hat. */
@media (min-width:1366px) {
  body.side-wide:not(.guest) { padding-left:300px; }
  body.side-wide:not(.guest) .topbar { margin-left:-300px; }
  body.side-wide:not(.guest) .nav-sm { display:none; }
  body.side-wide:not(.guest) .side { transform:none; visibility:visible; z-index:24; transition:none; }
  body.side-wide:not(.guest) .scrim { display:none; }
}

/* ---------------------------------------------------------------- Freundesleiste rechts */
.rail-r { display:none; }
@media (min-width:1101px) {
  body:not(.guest) { padding-right:var(--rail-w); }
  body:not(.guest) .topbar { margin-right:calc(-1 * var(--rail-w)); }
  body:not(.guest) .rail-r { position:fixed; z-index:25; right:0; top:var(--top-h); bottom:0; width:var(--rail-w); display:flex; flex-direction:column; align-items:center;
    background:var(--side); box-shadow:-4px 0 30px rgba(0,0,0,.18); }
}
.rr-h { position:relative; flex:none; display:grid; place-items:center; width:48px; height:48px; margin-top:16px; border-radius:12px; color:var(--muted-2); }
.rr-h svg.i { width:22px; height:22px; }
.rr-h:hover { color:var(--fg); background:rgba(237,242,244,.05); }
.rr-h b { position:absolute; right:2px; top:4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center;
  background:var(--ok); color:#fff; font:700 .68rem/1 var(--text); box-shadow:0 0 0 3px var(--side); }
.rr-list { flex:1; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:22px; padding:16px 0 22px; overflow-y:auto; scrollbar-width:none; }
.rr-list::-webkit-scrollbar { display:none; }
.rr-list hr { flex:none; width:32px; margin:0; border:0; border-top:1px solid var(--line); }
.rr-f { position:relative; flex:none; display:block; width:40px; height:44px; transition:opacity .15s, transform .15s; }
/* Kein transform/filter am Link: sonst hängt der Tooltip (position:fixed) am Link und die Liste schneidet ihn ab. */
.rr-f.off .hexmini, .rr-f.off .st { opacity:.5; }
.rr-f:hover .hexmini, .rr-f:hover .st { opacity:1; }
.rr-f .st { position:absolute; left:-3px; top:3px; width:10px; height:10px; border-radius:50%; background:#7d849c; box-shadow:0 0 0 2px var(--side); }
.rr-f.on .st { background:var(--ok); }
.rr-add { flex:none; display:grid; place-items:center; width:40px; height:44px; color:var(--muted); background:var(--card-2);
  -webkit-mask:var(--hex-fill) 0 0/100% 100% no-repeat; mask:var(--hex-fill) 0 0/100% 100% no-repeat; }
.rr-add:hover { color:#fff; background:var(--accent); }
.rr-add svg.i { width:18px; height:18px; }
/* Launcher-Download: volle Breite unten, wie der Knopf unten in der Leiste des Templates. */
.rr-dl { flex:none; width:100%; height:80px; display:grid; place-content:center; justify-items:center; gap:6px; background:var(--accent); color:#fff;
  font:700 .66rem/1 var(--text); letter-spacing:.1em; text-transform:uppercase; transition:background .15s; }
.rr-dl:hover { background:var(--accent-strong); color:#fff; }
.rr-dl svg.i { width:22px; height:22px; }
.rr-dl:focus-visible { outline:2px solid #fff; outline-offset:-6px; }
/* Name als Tooltip links neben dem Eintrag (wie die Icon-Leiste links). */
.rail-r a::after { content:attr(aria-label); position:fixed; right:calc(var(--rail-w) + 4px); padding:6px 12px; border-radius:8px; background:var(--head); color:#fff;
  font:700 .82rem/1.2 var(--text); letter-spacing:0; text-transform:none; white-space:nowrap; pointer-events:none; opacity:0; transform:translateX(6px);
  transition:opacity .15s, transform .15s; box-shadow:0 8px 20px rgba(0,0,0,.3); }
.rail-r a:hover::after, .rail-r a:focus-visible::after { opacity:1; transform:none; }
.rail-r .rr-f::after { margin-top:8px; }
.rail-r .rr-h::after { margin-top:10px; }
.rail-r .rr-dl::after { margin-top:24px; background:var(--accent); }

/* Kleiner Level-Avatar (40 × 44): Ring 3 mit Fortschritt, Bild eingerückt um 5, Level 18 × 20 unten rechts. */
.hexmini { position:absolute; inset:0; display:block; }
.hexmini-ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hexmini-ring .track, .hexmini-ring .fill { fill:none; stroke-width:3; }
.hexmini-ring .track { stroke:var(--card-2); }
.hexmini-ring .fill { stroke:url(#hex-g); }
.hexmini .av.s { position:absolute; left:12.5%; top:12.879%; width:75%; height:74.242%; font-size:.62rem;
  -webkit-mask:var(--hexmini-img) 0 0/100% 100% no-repeat; mask:var(--hexmini-img) 0 0/100% 100% no-repeat; }
.hexmini .av::after { display:none; }
.hexmini .av > img { inset:0; width:100%; height:100%; }
.hexmini-lvl { position:absolute; left:25px; top:26px; width:18px; height:20px; display:grid; place-items:center; }
.hexmini-lvl svg { position:absolute; inset:0; width:100%; height:100%; }
.hexmini-lvl .plate { fill:var(--side); }
.hexmini-lvl .lvl { fill:var(--imperial-red); }
.hexmini-lvl b { position:relative; color:#fff; font:700 .58rem/1 var(--text); }