/* GAMPEON Portal – Stil nach dem Vikinger-Template (ThemeForest, Lizenz beim Nutzer).
   Übernommen: Aufbau (Kopfleiste, Icon-Leiste links, Seitenbanner mit Illustration), Karten, Buttons, Formulare,
   Sechseck-Avatare, Schrift Rajdhani, Banner-Illustrationen (img/vk/).
   Nicht übernommen: Demo-Fotos, Avatare, Logos und das Banner-Muster mit Gesichtern (nicht lizenziert bzw. fremde Figuren).
   Farben aus der GAMPEON-Marke statt Lila/Grün. Diese Datei wird zuletzt geladen und überschreibt nur Darstellung. */

@font-face { font-family:"Rajdhani"; font-weight:500; font-display:swap; src:url(fonts/rajdhani-latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Rajdhani"; font-weight:500; font-display:swap; src:url(fonts/rajdhani-latin-ext-500-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Rajdhani"; font-weight:600; font-display:swap; src:url(fonts/rajdhani-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Rajdhani"; font-weight:600; font-display:swap; src:url(fonts/rajdhani-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Rajdhani"; font-weight:700; font-display:swap; src:url(fonts/rajdhani-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Rajdhani"; font-weight:700; font-display:swap; src:url(fonts/rajdhani-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg:#151624; --side:#1c1e2e; --surface:#1d1f30; --card:#1d1f30; --card-2:#272a40; --line:#2e3149;
  --muted:#9aa3ba; --muted-2:#656c86; --head:#2B2D42;
  --btn:#2c2f47; --btn-h:#383c5a; --input:#191b2a; --input-line:#363a55; --prose:#cfd5df;
  --radius:12px; --page:1280px; --rail-w:80px; --top-h:80px;
  --shadow:0 0 40px 0 rgba(0,0,0,.18);
  --glow:0 0 0 1px rgba(239,35,60,.5), 0 14px 30px -12px rgba(239,35,60,.55);
  --text:"Rajdhani", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Wabenmuster für Banner (eigene Grafik, als data-URI wegen CSP img-src data:) */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 1L55 16.5V47.5L28 63L1 47.5V16.5Z M28 63V96' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.6'/%3E%3C/svg%3E");
  /* Sechseck-Masken wie im Template, erzeugt mit tools/hex-masks.mjs aus hex.js: Ring, Spalt und Bild sind parallel. */
  --av-mask-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M55.76 7.32L89.76 25.46A12.25 12.25 0 0 1 96.25 36.27L96.25 73.73A12.25 12.25 0 0 1 89.76 84.54L55.76 102.68A12.25 12.25 0 0 1 44.24 102.68L10.24 84.54A12.25 12.25 0 0 1 3.75 73.73L3.75 36.27A12.25 12.25 0 0 1 10.24 25.46L44.24 7.32A12.25 12.25 0 0 1 55.76 7.32Z' fill='none' stroke='black' stroke-width='7.5'/%3E%3Cpath d='M51.65 15.05L85.65 33.18A3.5 3.5 0 0 1 87.5 36.27L87.5 73.73A3.5 3.5 0 0 1 85.65 76.82L51.65 94.95A3.5 3.5 0 0 1 48.35 94.95L14.35 76.82A3.5 3.5 0 0 1 12.5 73.73L12.5 36.27A3.5 3.5 0 0 1 14.35 33.18L48.35 15.05A3.5 3.5 0 0 1 51.65 15.05Z'/%3E%3C/svg%3E");
  --av-ring-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M55.76 7.32L89.76 25.46A12.25 12.25 0 0 1 96.25 36.27L96.25 73.73A12.25 12.25 0 0 1 89.76 84.54L55.76 102.68A12.25 12.25 0 0 1 44.24 102.68L10.24 84.54A12.25 12.25 0 0 1 3.75 73.73L3.75 36.27A12.25 12.25 0 0 1 10.24 25.46L44.24 7.32A12.25 12.25 0 0 1 55.76 7.32Z' fill='none' stroke='black' stroke-width='7.5'/%3E%3C/svg%3E");
  --av-ix-a:12.5%; --av-iy-a:12.879%;
  --av-mask-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M55.06 6.38L91.06 25.58A10.75 10.75 0 0 1 96.75 35.07L96.75 74.93A10.75 10.75 0 0 1 91.06 84.42L55.06 103.62A10.75 10.75 0 0 1 44.94 103.62L8.94 84.42A10.75 10.75 0 0 1 3.25 74.93L3.25 35.07A10.75 10.75 0 0 1 8.94 25.58L44.94 6.38A10.75 10.75 0 0 1 55.06 6.38Z' fill='none' stroke='black' stroke-width='6.5'/%3E%3Cpath d='M51.88 12.34L87.88 31.54A4 4 0 0 1 90 35.07L90 74.93A4 4 0 0 1 87.88 78.46L51.88 97.66A4 4 0 0 1 48.12 97.66L12.12 78.46A4 4 0 0 1 10 74.93L10 35.07A4 4 0 0 1 12.12 31.54L48.12 12.34A4 4 0 0 1 51.88 12.34Z'/%3E%3C/svg%3E");
  --av-ring-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M55.06 6.38L91.06 25.58A10.75 10.75 0 0 1 96.75 35.07L96.75 74.93A10.75 10.75 0 0 1 91.06 84.42L55.06 103.62A10.75 10.75 0 0 1 44.94 103.62L8.94 84.42A10.75 10.75 0 0 1 3.25 74.93L3.25 35.07A10.75 10.75 0 0 1 8.94 25.58L44.94 6.38A10.75 10.75 0 0 1 55.06 6.38Z' fill='none' stroke='black' stroke-width='6.5'/%3E%3C/svg%3E");
  --av-ix-b:10%; --av-iy-b:10.303%;
  --hexav-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 109.45' preserveAspectRatio='none'%3E%3Cpath d='M51.9 1.03L97.9 25.86A4 4 0 0 1 100 29.38L100 80.07A4 4 0 0 1 97.9 83.59L51.9 108.43A4 4 0 0 1 48.1 108.43L2.1 83.59A4 4 0 0 1 0 80.07L0 29.38A4 4 0 0 1 2.1 25.86L48.1 1.03A4 4 0 0 1 51.9 1.03Z'/%3E%3C/svg%3E");
  --hex-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M52.82 1.51L96.82 24.97A6 6 0 0 1 100 30.27L100 79.73A6 6 0 0 1 96.82 85.03L52.82 108.49A6 6 0 0 1 47.18 108.49L3.18 85.03A6 6 0 0 1 0 79.73L0 30.27A6 6 0 0 1 3.18 24.97L47.18 1.51A6 6 0 0 1 52.82 1.51Z'/%3E%3C/svg%3E");
}
body { font:500 16px/1.6 var(--text); background:var(--bg); }
/* Rajdhani wirkt kleiner als Inter: sehr kleine Texte etwas größer. */
.foot { font-size:.85rem; }
.opt .n, .tag { font-size:.76rem; }
.small, small { font-size:max(.8rem, 1em * .85); }

/* ---------------------------------------------------------------- Typo: Rajdhani statt Bebas.
   Bebas bleibt nur für Wortmarken-artige Titel (Claim, Collections). */
h1, h2, .display { font-family:var(--text); font-weight:700; text-transform:none; letter-spacing:0; line-height:1.15; }
h1 { font-size:clamp(1.8rem, 3vw, 2.3rem); }
h2 { font-size:1.5rem; }
h3 { font-family:var(--text); font-weight:700; font-size:1rem; }
.o { color:inherit; -webkit-text-stroke:0; }
h2 .o { -webkit-text-stroke:0; }
.feature h1.claim { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.9; }
.rule { display:none; }
h1 .dot, h2 .dot { display:none; }
b, strong { font-weight:700; }

/* ---------------------------------------------------------------- Kopfleiste */
.topbar { height:var(--top-h); background:var(--head); border-bottom:0; box-shadow:0 4px 30px rgba(0,0,0,.25); backdrop-filter:none; gap:20px; padding:0 28px; }
.topbar > .brand .word { height:18px; }
.tn { height:40px; padding:0 14px; border-radius:10px; color:rgba(237,242,244,.72); font:700 .95rem/1 var(--text); }
.tn:hover { color:#fff; }
.tn.active, .tn[aria-expanded="true"] { color:#fff; background:rgba(0,0,0,.18); border-color:transparent; box-shadow:none; }
.tn.active { box-shadow:inset 0 -3px 0 var(--accent); }
.search { height:48px; max-width:520px; border-radius:12px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.06); padding:0 18px; }
.search input { font-weight:600; font-size:.95rem; }
.search input::placeholder { color:rgba(237,242,244,.5); }
.search:focus-within { border-color:rgba(239,35,60,.6); box-shadow:0 0 0 3px rgba(239,35,60,.15); }
.icon-btn { width:44px; height:44px; border-radius:12px; background:rgba(0,0,0,.18); border:0; color:rgba(237,242,244,.75); }
.icon-btn:hover { color:#fff; background:rgba(0,0,0,.3); }
.icon-btn .badge-n { box-shadow:0 0 0 3px var(--head); }
.who { border-radius:12px; background:rgba(0,0,0,.18); border:0; padding:5px 12px 5px 6px; }
.who b { font-size:.9rem; } .who small { font-size:.75rem; }
.pop { border-radius:12px; border-color:var(--line); }
.pop-h b { font:700 1.05rem/1 var(--text); letter-spacing:0; }
.mega-ico { border-radius:10px; }
.menu-pop a, .menu-pop button { font:700 .92rem/1.2 var(--text); border-radius:8px; }
.preview-bar { font-weight:700; }

/* ---------------------------------------------------------------- Icon-Leiste links (Desktop) */
.nav-sm { display:none; }
@media (min-width:1101px) {
  body { padding-left:var(--rail-w); }
  .topbar { margin-left:calc(-1 * var(--rail-w)); }
  .nav-sm { position:fixed; z-index:25; left:0; top:var(--top-h); bottom:0; width:var(--rail-w); display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:18px 0; background:var(--side); box-shadow:4px 0 30px rgba(0,0,0,.18); overflow-y:auto; scrollbar-width:none; }
  .nav-sm::-webkit-scrollbar { display:none; }
  .nav-sm .me { margin-bottom:12px; }
  .nav-sm a { position:relative; display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:12px; color:var(--muted-2); transition:background .15s, color .15s; }
  .nav-sm a svg.i { width:20px; height:20px; }
  .nav-sm a:hover { color:#fff; background:rgba(237,242,244,.05); }
  .nav-sm a.active { color:#fff; background:var(--accent); box-shadow:4px 7px 12px 0 rgba(239,35,60,.25); }
  .nav-sm hr { width:32px; border:0; border-top:1px solid var(--line); margin:6px 0; }
  /* Beschriftung als Tooltip rechts neben dem Symbol */
  .nav-sm a::after { content:attr(aria-label); position:fixed; left:calc(var(--rail-w) + 4px); margin-top:0; padding:6px 12px; border-radius:8px; background:var(--accent); color:#fff;
    font:700 .82rem/1.2 var(--text); white-space:nowrap; pointer-events:none; opacity:0; transform:translateX(-6px); transition:opacity .15s, transform .15s; }
  .nav-sm a:hover::after, .nav-sm a:focus-visible::after { opacity:1; transform:none; }
  .foot { margin-left:0; }
}

/* ---------------------------------------------------------------- Inhalt */
main { max-width:var(--page); padding:32px 32px 72px; }
.foot { border-top:1px solid var(--line); font-weight:600; }

/* Seitenbanner wie „Newsfeed“ / „Marketplace“ im Template: Illustration links, Titel und Text, Wabenmuster.
   Gilt für alle Seitenköpfe (.hero-c in Listen, .page-head aus pageHead()), die Illustration hängt an der Route (body[data-route]). */
.hero-c, .page-head { position:relative; isolation:isolate; overflow:hidden; text-align:left; min-height:160px; display:grid; align-content:center;
  padding:28px 36px 28px 232px; margin:0 0 32px; border:0; border-radius:var(--radius);
  background:linear-gradient(90deg, rgba(150,0,34,.95) 0%, rgba(184,0,43,.55) 40%, transparent 70%), var(--hex) 0 0/56px 96px, linear-gradient(100deg, #b4002a 0%, var(--imperial-red) 60%, #ff5a6c 100%);
  box-shadow:var(--shadow); }
.hero-c::before, .page-head::before { content:""; position:absolute; z-index:0; left:28px; top:10px; bottom:0; width:184px; background:var(--ill) center bottom/contain no-repeat; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
.page-head > .art, .page-head::after { display:none; }
.hero-c > *, .page-head > * { position:relative; z-index:1; }
.hero-c h1, .page-head h1 { font-size:clamp(1.9rem, 3vw, 2.5rem); color:#fff; margin:0; line-height:1.05; }
.hero-c p, .page-head p { color:rgba(255,255,255,.88); margin:6px 0 0; max-width:64ch; font-size:1rem; font-weight:600; }
.page-head a:not(.btn) { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.page-head .stat-row { margin-top:16px; }
.page-head .stat-t { background:rgba(0,0,0,.2); box-shadow:none; }
.page-head .stat-t span { color:rgba(255,255,255,.75); }
.hero-c .facts { justify-content:flex-start; color:#fff; margin-top:12px; font-weight:700; gap:10px; }
.hero-c .facts span { background:rgba(0,0,0,.18); padding:4px 12px; border-radius:999px; }
.hero-c .facts svg { color:#fff; }
.page-head + .notice, .hero-c + .notice { margin-top:-12px; margin-bottom:20px; }
body { --ill:url(img/vk/overview.webp); }
body[data-route="games"] { --ill:url(img/vk/forums.webp); }
body[data-route="marketplace"] { --ill:url(img/vk/marketplace.webp); }
body[data-route="achievements"] { --ill:url(img/vk/badges.webp); }
body[data-route="studios"] { --ill:url(img/vk/groups.webp); }
body[data-route="projects"] { --ill:url(img/vk/overview.webp); }
body[data-route="feed"], body[data-route="post"] { --ill:url(img/vk/newsfeed.webp); }
body[data-route="friends"], body[data-route="search"], body[data-route="jobs"] { --ill:url(img/vk/members.webp); }
body[data-route="me"], body[data-route="settings"], body[data-route="register"], body[data-route="login"] { --ill:url(img/vk/accounthub.webp); }
body[data-route="wallet"] { --ill:url(img/vk/quests.webp); }
body[data-route="upload"] { --ill:url(img/vk/streams.webp); }
body[data-route="report"] { --ill:url(img/vk/forums.webp); }
body[data-route="moderation"] { --ill:url(img/vk/events.webp); }
body[data-route="blog"], body[data-route="changelog"] { --ill:url(img/vk/newsfeed.webp); }
body[data-route="docs"] { --ill:url(img/vk/streams.webp); }
body[data-route="status"] { --ill:url(img/vk/quests.webp); }

/* Abschnittsköpfe */
.sec { margin:44px 0 18px; }
.sec h2 { font-size:1.6rem; }
.link-more { font-weight:700; font-size:.88rem; }
.arrow { border-radius:10px; border:0; background:var(--card-2); }

/* ---------------------------------------------------------------- Karten und Kästen */
.box, .card-form, .bar, .hello, .tok, .strip a { background:var(--surface); border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
.box h3.box-t { font:700 1.05rem/1.2 var(--text); letter-spacing:0; text-transform:none; }
.box h3.box-t a { font:700 .82rem/1 var(--text); }
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .body { padding:16px 20px 18px; }
.card .by h3 { font-size:1.05rem; }
.card .meta { font-weight:600; font-size:.82rem; }
.thumb { border-radius:var(--radius) var(--radius) 0 0; }
.tile .thumb { border-radius:var(--radius); }
.tile h3 { font-size:1.05rem; text-transform:none; letter-spacing:0; }
.tile .meta { font-weight:600; font-size:.85rem; }
.creator { border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 16px 20px; }
.creator b { font-size:1rem; } .creator small { font-size:.82rem; }
.stat-t { border-radius:var(--radius); }
.stat-t b { font:700 1.8rem/1 var(--text); letter-spacing:0; }
.stat-t b.o { -webkit-text-stroke:0; }
.stat-t span { font-weight:700; letter-spacing:.06em; font-size:.7rem; }
/* Zahlen und kleine Titel aus den Modulen (Abzeichen, Profil, Wallet, Studios) ebenfalls in Rajdhani statt Bebas. */
.rar b, .lvl b, .sc-t b, .sc-p b, .soc-stat b, .pack-c b, .panel .big { font-family:var(--text); font-weight:700; letter-spacing:0; }
.slogo, .side-card b, .pop-h b { font-family:var(--text); font-weight:700; letter-spacing:0; }
.panel h3.box-t { font:700 1.05rem/1.2 var(--text); letter-spacing:0; text-transform:none; }
.genre span { font:700 1.35rem/1.05 var(--text); letter-spacing:0; text-transform:none; }
.genre:first-child span { font-size:2rem; }
.feature, .build { border-radius:var(--radius); }
.build h2 { font-size:clamp(1.9rem, 3vw, 2.6rem); }
.profile-cover { border-radius:var(--radius); }

/* ---------------------------------------------------------------- Buttons und Formulare */
.btn { height:44px; padding:0 22px; border-radius:10px; font:700 .92rem/1 var(--text); letter-spacing:0; text-transform:none; background:var(--btn); box-shadow:3px 5px 10px 0 rgba(0,0,0,.2); }
.btn:hover { background:var(--btn-h); }
.btn.primary { background:var(--accent); box-shadow:4px 7px 12px 0 rgba(239,35,60,.25); }
.btn.primary:hover { background:var(--accent-strong); }
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 2px var(--input-line); }
.btn.ghost:hover { box-shadow:inset 0 0 0 2px var(--muted); background:transparent; }
.play-btn { padding:0 22px 0 18px; gap:8px; }
.play-btn svg.i { width:15px; height:15px; fill:currentColor; stroke-width:1.4; }
.btn.play-big { height:56px; padding:0 34px 0 28px; font-size:1.15rem; gap:12px; border-radius:12px; }
.btn.play-big svg.i { width:20px; height:20px; fill:currentColor; stroke-width:1.2; }
.panel .btn.play-big { width:100%; margin-top:6px; }
.play-note { color:var(--fg); font-weight:600; }
.btn.sm { height:36px; padding:0 14px; font-size:.85rem; }
.btn.block { height:52px; font-size:1rem; }
input, select, textarea { background:var(--input); border:1px solid var(--input-line); border-radius:12px; padding:12px 16px; font:600 1rem/1.3 var(--text); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(239,35,60,.15); }
.search input:focus { box-shadow:none; }
label { font:700 .85rem/1.3 var(--text); text-transform:none; letter-spacing:0; color:var(--muted); }
label > input, label > select, label > textarea { font-weight:600; font-size:1rem; }
.check { font-size:.95rem; font-weight:600; }
.statement { border-radius:10px; }
.chips a { border-radius:10px; font:700 .88rem/1 var(--text); letter-spacing:0; text-transform:none; }
.active-f a, .opt .n { font-weight:700; }
.opt { font-weight:600; font-size:.95rem; border-radius:8px; }
.fbox summary h3.box-t svg { color:var(--accent); }
.tag { font-weight:700; font-size:.78rem; border-radius:8px; }
.pill { font-family:var(--text); letter-spacing:.06em; border-radius:6px; }
.tabs a { height:40px; padding:0 18px; border-radius:10px; font:700 .92rem/1 var(--text); letter-spacing:0; text-transform:none; border:0; box-shadow:var(--shadow); }
.tabs a.active { box-shadow:4px 7px 12px 0 rgba(239,35,60,.25); }

/* ---------------------------------------------------------------- Sechseck-Avatare wie im Template:
   außen ein Ring im Verlauf, dann ein schmaler Spalt, darin Bild oder Initialen in der Farbe pro Konto. Eine Maske aus
   Ring und Bildfläche (Spalt durchsichtig), der Ring darüber noch einmal in Rot. Variante a für kleine, b für große Avatare. */
.av { --mask:var(--av-mask-a); --ring:var(--av-ring-a); --ix:var(--av-ix-a); --iy:var(--av-iy-a); position:relative; border-radius:0; box-shadow:none; width:36px; height:40px;
  font:700 .95rem/1 var(--text); letter-spacing:.02em;
  -webkit-mask:var(--mask) 0 0/100% 100% no-repeat; mask:var(--mask) 0 0/100% 100% no-repeat; }
.av::after { content:""; position:absolute; inset:0; background:linear-gradient(45deg, #ff6b3d, var(--imperial-red) 55%, var(--crimson)); pointer-events:none;
  -webkit-mask:var(--ring) 0 0/100% 100% no-repeat; mask:var(--ring) 0 0/100% 100% no-repeat; }
span.av > img { left:var(--ix); top:var(--iy); width:calc(100% - 2 * var(--ix)); height:calc(100% - 2 * var(--iy)); }
.av.s { width:28px; height:31px; font-size:.75rem; box-shadow:none; }
.av.l, .av.xl { --mask:var(--av-mask-b); --ring:var(--av-ring-b); --ix:var(--av-ix-b); --iy:var(--av-iy-b); }
.av.l { width:80px; height:88px; font-size:1.9rem; box-shadow:none; }
.av.xl { width:124px; height:136px; font-size:3rem; box-shadow:none; }
.av.sq { -webkit-mask:none; mask:none; border-radius:12px; }
.av.sq::after { display:none; }
.av.sq > img { inset:0; width:100%; height:100%; }

/* ---------------------------------------------------------------- Profil wie im Template (profile-timeline):
   Kopf mit Cover, Avatar mittig mit Level-Ring, links Zahlen, rechts Knöpfe; darunter Reiterleiste, dann drei Spalten. */
.ph { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.ph-cover { position:relative; height:220px; isolation:isolate; background:var(--card-2); }
.ph-cover > .art, .ph-cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.ph-bar { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"stats user own"; align-items:center;
  column-gap:24px; row-gap:10px; padding:16px 28px; }
/* Oben und unten gleicher Innenabstand, damit Zahlen und Kacheln genau in der Mitte der Leiste unter dem Cover sitzen. */
.ph-user { grid-area:user; display:grid; justify-items:center; text-align:center; margin-top:-112px; position:relative; }
.ph-user h1 { display:flex; align-items:center; justify-content:center; gap:8px; font-size:1.65rem; margin:4px 0 0; line-height:1.1; }
/* Team-Abzeichen wie ein Verifiziert-Haken; Hinweis bei Hover und Fokus statt eigener Zeile. */
.vbadge { position:relative; display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:6px; cursor:help; }
.vbadge img { display:block; width:22px; height:22px; }
.vbadge::after { content:attr(data-tip); position:absolute; z-index:6; left:50%; bottom:calc(100% + 8px); transform:translate(-50%, 4px); padding:7px 10px;
  border-radius:8px; background:#14152a; color:#EDF2F4; box-shadow:0 6px 18px rgba(0,0,0,.35); font:700 .78rem/1 var(--text); letter-spacing:.04em;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s, transform .12s; }
.vbadge:hover::after, .vbadge:focus-visible::after { opacity:1; transform:translate(-50%, 0); }
.vbadge:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ph-sub { margin:4px 0 0; display:flex; gap:8px; align-items:center; justify-content:center; color:var(--muted); font-weight:600; font-size:.92rem; }
.ph-bar .social-acts { display:contents; }
/* Wie im Template: Zahlen und Land bündig links, Kacheln bündig rechts, beide vertikal mittig. */
.ph-left { grid-area:stats; justify-self:start; align-self:center; display:flex; align-items:center; min-width:0; }
.ph-bar .soc-stats { align-self:center; gap:0; }
.ph-bar .soc-stat.posts { display:none; } /* nur ein Link ohne Zahl; die Beiträge stehen in der Timeline darunter */
.ph-bar .soc-stat { padding:6px 18px; min-width:0; border-radius:0; }
.ph-bar .soc-stat + .soc-stat { border-left:1px solid var(--line); }
.ph-bar .soc-stat:first-child { padding-left:0; }
.ph-bar .soc-stat b { font-size:1.4rem; height:26px; }
.ph-bar .soc-stat span { font-size:.7rem; letter-spacing:.06em; }
.ph-bar .ph-country { border-left:1px solid var(--line); padding-right:0; }
.ph-bar .ph-country:hover { background:none; }
.ph-bar .ph-country span { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flag { display:inline-block; flex:none; width:28px; height:21px; border-radius:4px; object-fit:cover; box-shadow:0 0 0 1px rgba(127,127,127,.25); }
.country-t { display:inline-flex; align-items:center; gap:8px; }
.country-t .flag { width:20px; height:15px; border-radius:3px; }
.ph-own { grid-area:own; justify-self:end; align-self:center; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; max-width:100%;
  margin:22px 0; } /* Abstand oben hält eine zweite Kachelreihe unter den Knöpfen am Cover-Rand */
.ph-own .conn-tiles { gap:8px; justify-content:flex-end; }
.ph-own .conn-tile { width:40px; height:40px; }
.ph-own .conn-tile svg.brand { width:20px; height:20px; }
.ph-bar .ph-user { align-self:start; }
.ph-own:empty { display:none; }
/* Knöpfe (Folgen, Freund, Profil bearbeiten) oben rechts, halb über dem Cover, massiv statt Umriss. */
.ph-acts { position:absolute; z-index:4; top:0; right:28px; transform:translateY(-50%); display:flex; gap:10px; align-items:center; }
.ph-acts:empty { display:none; }
.ph-acts .soc-btns { display:flex; gap:10px; flex-wrap:nowrap; }
.ph-acts form { margin:0; }
.ph-acts .btn { height:44px; padding:0 20px; font-size:.92rem; }
.ph-acts .btn:not(.primary), .ph-acts .btn.ghost { background:var(--card-2); box-shadow:3px 5px 10px 0 rgba(0,0,0,.2); color:var(--fg); }
.ph-acts .btn:not(.primary):hover, .ph-acts .btn.ghost:hover { background:var(--btn-h); }
.ph-acts .icon-btn { width:44px; height:44px; background:var(--card-2); color:var(--fg); box-shadow:3px 5px 10px 0 rgba(0,0,0,.2); }
.ph-acts .pill.free { height:44px; padding:0 16px; border-radius:10px; }
.conn-tiles { display:flex; gap:10px; flex-wrap:wrap; }
.conn-tile { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; color:#fff; background:var(--tile, var(--card-2));
  box-shadow:3px 5px 10px 0 rgba(0,0,0,.2); transition:transform .15s, filter .15s; }
.conn-tile:hover { color:#fff; transform:translateY(-2px); filter:brightness(1.12); }
.conn-tile svg.brand { width:21px; height:21px; }
.conn-tile.is-discord { --tile:#5865F2; }
.conn-tile.is-steam { --tile:linear-gradient(135deg, #1b2838, #2a475e); }
/* Selbst eingetragene Profile in den Farben der Dienste; schwarze Kacheln mit feinem Rand, Kick mit dunklem Logo. */
.is-twitch { --tile:#9146FF; } .is-youtube { --tile:#FF0000; } .is-facebook { --tile:#0866FF; } .is-reddit { --tile:#FF4500; } .is-bluesky { --tile:#1185FE; }
.is-instagram { --tile:linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }
.is-kick { --tile:#53FC19; --tile-fg:#0b0e0f; }
.is-tiktok, .is-x, .is-github { --tile:#0f1014; --tile-ring:inset 0 0 0 1px rgba(255,255,255,.16); }
.conn-tile { color:var(--tile-fg, #fff); box-shadow:var(--tile-ring, 0 0 0 transparent), 3px 5px 10px 0 rgba(0,0,0,.2); }
.conn-tile:hover { color:var(--tile-fg, #fff); }
svg.i.brand { fill:currentColor; stroke:none; }
.conn-chip svg.brand { width:14px; height:14px; }

/* Sechseck-Avatar mit Level-Ring wie im Template (148 × 164): Platte in Kastenfarbe, Spur, Fortschritt im Verlauf,
   Spalt, Bild; Level unten rechts auf eigener Platte über dem Bild. Alles in Prozent, damit es mit der Breite skaliert. */
.hexav { position:relative; display:block; width:148px; aspect-ratio:148/164; flex:none; }
.hexav-ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hexav .plate { fill:var(--surface); }
.hexav-ring .track, .hexav-ring .fill { fill:none; stroke-width:8; }
.hexav-ring .track { stroke:var(--card-2); }
.hexav-ring .fill { stroke:url(#hexav-g); }
.hexav-ring stop:nth-child(1) { stop-color:#ff8a3d; }
.hexav-ring stop:nth-child(2) { stop-color:var(--imperial-red); }
.hexav .av.xl { position:absolute; left:16.216%; top:16.631%; width:67.568%; height:66.739%; font-size:2.4rem;
  -webkit-mask:var(--hexav-img) 0 0/100% 100% no-repeat; mask:var(--hexav-img) 0 0/100% 100% no-repeat; }
.hexav .av::after { display:none; }
.hexav .av > img { inset:0; width:100%; height:100%; }
.hexav-lvl { position:absolute; left:67.568%; top:62.195%; width:27.027%; height:26.829%; display:grid; place-items:center; }
.hexav-lvl svg { position:absolute; inset:0; width:100%; height:100%; }
.hexav-lvl .lvl { fill:var(--imperial-red); }
.hexav-lvl b { position:relative; color:#fff; font:700 1rem/1 var(--text); }

.ph-nav { display:flex; margin-top:16px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; scrollbar-width:none; }
.ph-nav::-webkit-scrollbar { display:none; }
.ph-nav a { position:relative; flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:10px; height:66px; padding:0 22px; color:var(--muted);
  font:700 .95rem/1 var(--text); border-right:1px solid var(--line); }
.ph-nav a:last-child { border-right:0; }
.ph-nav a svg.i { width:20px; height:20px; }
.ph-nav a small { font-size:.72rem; font-weight:700; padding:3px 7px; border-radius:6px; background:var(--card-2); color:var(--muted); }
.ph-nav a:hover { color:var(--fg); }
.ph-nav a.active { color:var(--fg); }
.ph-nav a.active svg.i { color:var(--accent); }
.ph-nav a.active::after { content:""; position:absolute; left:22px; right:22px; bottom:0; height:4px; border-radius:4px 4px 0 0; background:var(--accent); }

.ph-grid { display:grid; grid-template-columns:284px minmax(0,1fr) 284px; gap:16px; margin-top:16px; align-items:start; }
.ph-side { display:grid; gap:16px; min-width:0; }
.ph-main { min-width:0; }
.ph-main .grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.ph-main .grid.tiles, .ph-main .grid.wide { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.ph-main .ach-list { margin-top:12px; }
.ph-facts { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:18px 0 0; font-size:.92rem; }
.ph-facts dt { color:var(--muted); font-weight:600; }
.ph-facts dd { margin:0; font-weight:700; }
.ph-side .stat-row { gap:6px; }
.ph-side .stat-t { padding:10px 6px; }
.ph-side .stat-t b { font-size:1.45rem; }
.ph-side .stat-t span { letter-spacing:.02em; font-size:.66rem; }
.ph-side .mini-badges { display:grid; grid-template-columns:repeat(auto-fill, 36px); gap:10px; }
.ph-side .mini-badges .achb.s { --size:36px; }

/* Studio im Profilkopf: Logo statt Hexagon, mit Rahmen in Flächenfarbe wie das Avatar-Sechseck */
.ph-user.is-studio { margin-top:-82px; }
.ph-user .slogo.xl { box-shadow:0 0 0 6px var(--surface), 0 0 0 9px var(--accent), 0 0 34px rgba(239,35,60,.4); }
.ph-facts dd.ell { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-facts a, .about-facts a { color:var(--fg); }
.ph-facts a:hover, .about-facts a:hover { color:var(--accent); }

/* „About“ wie bei Facebook: Kästen untereinander, Fakten mit Symbol in zwei Spalten */
.about { display:grid; gap:16px; }
.about-box .prose { margin:0; }
.about-lead { margin:0 0 8px; font-weight:700; font-size:1.05rem; }
.about-facts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px 20px; }
.about-facts li { display:flex; gap:12px; align-items:center; min-width:0; }
.about-facts .af-i { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:var(--card-2); color:var(--accent); }
.about-facts .af-i svg.i { width:20px; height:20px; }
.about-facts li > span:last-child { display:grid; min-width:0; }
.about-facts small { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.about-facts b { font-weight:700; overflow-wrap:anywhere; }
.box-t a svg.i { width:14px; height:14px; vertical-align:-2px; }

/* Projektseite: Reiter unter dem Banner, Play now oben im Seitenkasten */
.feature + .ph-nav { margin-top:18px; }
.ph-nav + .detail { margin-top:18px; }
.panel .play-big + #play-msg { margin:-6px 0 4px; }

/* ---------------------------------------------------------------- Einstellungen wie „Account Hub“ im Template */
.hub { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; }
.hub-menu { display:grid; gap:16px; position:sticky; top:calc(var(--top-h) + 16px); }
.hub-g { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 20px 14px; }
.hub-gh { display:flex; gap:14px; align-items:flex-start; padding-bottom:12px; }
.hub-gi { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; background:var(--card-2); color:var(--accent); }
.hub-gh b { display:block; font-size:1.02rem; line-height:1.2; }
.hub-gh small { display:block; color:var(--muted); font-size:.82rem; line-height:1.35; margin-top:2px; }
.hub-gl { display:grid; gap:2px; border-top:1px solid var(--line); padding-top:8px; }
.hub-gl a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; color:var(--muted); font-weight:700; font-size:.92rem; }
.hub-gl a svg.i { width:15px; height:15px; opacity:.6; }
.hub-gl a:hover { color:var(--fg); background:var(--card-2); }
.hub-gl a.active { color:var(--accent); background:var(--card-2); }
.hub-main { display:grid; gap:16px; min-width:0; }
.hub-h small { display:block; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hub-h h2 { font-size:1.6rem; margin:2px 0 0; }
.hub-h p { color:var(--muted); margin:6px 0 0; max-width:70ch; }
.hub-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.hub-links { border:0; padding:0; margin:0; min-width:0; display:grid; gap:12px; }
.hub-links legend { padding:0; margin-bottom:2px; font:700 1rem/1.3 var(--text); color:var(--fg); }
.hub-links > .hint { margin:0; color:var(--muted); font-size:.85rem; line-height:1.45; }
.link-l { display:inline-flex; align-items:center; gap:8px; }
.link-ico { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:6px; background:var(--tile, var(--card-2)); color:var(--tile-fg, #fff); box-shadow:var(--tile-ring, none); }
.link-ico svg.brand { width:13px; height:13px; }
/* Eingebettete Seiten: eigener Kopf wird zum schlichten Abschnittstitel, Reiterleiste der Freunde-Seite entfällt. */
.hub-main > .page-head { min-height:0; padding:0; margin:0; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.hub-main > .page-head::before { display:none; }
.hub-main > .page-head h1 { color:var(--fg); font-size:1.6rem; }
.hub-main > .page-head p { color:var(--muted); font-weight:500; }
.hub-main > .page-head a:not(.btn) { color:var(--accent); }
.hub-main .fr-bar { display:none; }
.hub-main .friends { max-width:none; margin:0; }

/* Darstellung: drei Karten mit kleiner Vorschau */
.theme-opts { border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.theme-opt { position:relative; display:grid; gap:12px; padding:14px; border-radius:12px; border:2px solid var(--line); cursor:pointer; color:var(--fg); }
.theme-opt:hover { border-color:var(--muted); }
.theme-opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px rgba(239,35,60,.15); }
.theme-opt input { position:absolute; opacity:0; pointer-events:none; }
.theme-opt:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.theme-l { display:flex; align-items:center; gap:8px; font-size:.98rem; }
.theme-l svg.i { color:var(--accent); }
.theme-prev { display:grid; grid-template-columns:22% 1fr; grid-template-rows:22% 1fr; gap:6px; height:96px; padding:8px; border-radius:8px; background:#151624; }
.theme-prev i { border-radius:4px; background:#1d1f30; }
.theme-prev i:first-child { grid-column:1 / -1; background:#2B2D42; }
.theme-prev i:last-child { background:#1d1f30; box-shadow:inset 0 -10px 0 rgba(239,35,60,.8); }
.t-light .theme-prev { background:#eef0f5; }
.t-light .theme-prev i { background:#fff; }
.t-light .theme-prev i:first-child { background:#2B2D42; }
.t-system .theme-prev { background:linear-gradient(135deg, #eef0f5 50%, #151624 50%); }
.t-system .theme-prev i { background:rgba(127,135,160,.35); }
.t-system .theme-prev i:first-child { background:#2B2D42; }

/* Kleiner Umschalter (Konto-Menü, Fußzeile) */
.theme-seg { display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--card-2); vertical-align:middle; }
.theme-seg button { display:grid; place-items:center; width:30px; height:28px; padding:0; border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer; }
.theme-seg button svg.i { width:16px; height:16px; }
.theme-seg button:hover { color:var(--fg); }
.theme-seg button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.menu-theme { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px 6px 14px; font:700 .92rem/1.2 var(--text); color:var(--muted); }

/* ---------------------------------------------------------------- Kleinere Bildschirme */
@media (max-width:1380px) {
  .ph-grid { grid-template-columns:260px minmax(0,1fr); }
  .ph-main { grid-column:2; grid-row:1 / span 2; }
  .ph-side + .ph-main + .ph-side { grid-column:1; }
}
@media (max-width:1100px) {
  .hero-c, .page-head { padding:24px 24px 24px 180px; min-height:140px; }
  .hero-c::before, .page-head::before { left:18px; width:140px; }
}
@media (max-width:900px) {
  .hub { grid-template-columns:minmax(0,1fr); }
  .hub-menu { position:static; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
  .hub-g { padding:14px 14px 8px; }
  .hub-gh { padding-bottom:8px; align-items:center; }
  .hub-gh small { display:none; }
  .hub-gi { width:32px; height:32px; }
  .hub-gl { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .hub-main { scroll-margin-top:calc(var(--top-h) + 12px); }
  .hub-2 { grid-template-columns:1fr; }
  .ph-cover { height:160px; }
  .ph-bar { grid-template-columns:minmax(0,1fr); grid-template-areas:"user" "stats" "own" "acts"; justify-items:center; padding:0 16px 16px; row-gap:12px; }
  .ph-left, .ph-own { justify-self:center; justify-content:center; flex-wrap:wrap; }
  .ph-own { margin:0; }
  .ph-own .conn-tiles { justify-content:center; }
  .ph-acts { position:static; transform:none; grid-area:acts; justify-content:center; flex-wrap:wrap; }
  .ph-acts .soc-btns { flex-wrap:wrap; justify-content:center; }
  .ph-user { margin-top:-80px; }
  .ph-user.is-studio { margin-top:-56px; }
  .ph-grid { grid-template-columns:minmax(0,1fr); }
  .ph-main, .ph-side + .ph-main + .ph-side { grid-column:auto; grid-row:auto; }
  .ph-main { order:-1; }
  .ph-nav a { flex:0 0 auto; height:56px; padding:0 16px; }
  .topbar { height:64px; padding:0 16px; }
  :root { --top-h:64px; }
  main { padding:20px 16px 48px; }
}
@media (max-width:640px) {
  .theme-opts { grid-template-columns:1fr; }
  .theme-prev { height:64px; }
  .hexav { width:120px; }
  .hexav .av.xl { font-size:2rem; }
  .hexav-lvl b { font-size:.85rem; }
  .ph-user { margin-top:-66px; }
  .ph-user h1 { font-size:1.4rem; }
  .ph-bar .soc-stat { padding:4px 12px; }
  .ph-nav a span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* nur für Screenreader */
  .ph-nav a { padding:0 18px; }
  .ph-nav a.active::after { left:10px; right:10px; }
  /* Am Handy ohne Illustration, sonst drängt sie sich zwischen Text und Zahlen. */
  .hero-c, .page-head { padding:22px 20px; min-height:0; margin-bottom:22px; }
  .hero-c::before, .page-head::before { display:none; }
  .hero-c h1, .page-head h1 { font-size:1.6rem; }
  .hero-c p, .page-head p { font-size:.92rem; }
  .hero-c .facts { gap:6px; }
  .hero-c .facts span { padding:3px 10px; font-size:.8rem; }
  .filters { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .search { height:40px; padding:0; border-radius:10px; }
  .search:focus-within { padding:0 14px; }
  .icon-btn { width:40px; height:40px; border-radius:10px; }
  .account .play-btn { padding:0 12px; }
  .account .play-btn span { display:none; }
  .btn { height:40px; padding:0 16px; }
}