/* Neue Kosmetik: echte transparente Vektorringe und illustrierte Karten.
   Bewegung nur auf aktiven Desktopseiten; alle Inhalte bleiben unabhängig. */
.kosmetik-avatar { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan) { position:relative; isolation:isolate; overflow:visible; border-radius:50%; outline:0; box-shadow:none; border:0; }
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::before, :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after { content:""; position:absolute; inset:-18%; pointer-events:none; border-radius:0; z-index:2; background:var(--rahmen-grafik) center/contain no-repeat; transform-origin:center; }
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after { content:none; }
.rahmen-aurora { --rahmen-grafik:url("/kosmetik/rahmen-aurora.svg"); }
.rahmen-orbit { --rahmen-grafik:url("/kosmetik/rahmen-orbit.svg"); }
.rahmen-komet { --rahmen-grafik:url("/kosmetik/rahmen-komet.svg"); }
.rahmen-prisma { --rahmen-grafik:url("/kosmetik/rahmen-prisma.svg"); }
.rahmen-holo { --rahmen-grafik:url("/kosmetik/rahmen-holo.svg"); }
.rahmen-eclipse { --rahmen-grafik:url("/kosmetik/rahmen-eclipse.svg?v=3"); }
.rahmen-nova { --rahmen-grafik:url("/kosmetik/rahmen-nova.svg?v=3"); }
.rahmen-glitch { --rahmen-grafik:url("/kosmetik/rahmen-glitch.svg?v=3"); }
.rahmen-plasma { --rahmen-grafik:url("/kosmetik/rahmen-plasma.svg?v=3"); }
.rahmen-titan { --rahmen-grafik:url("/kosmetik/rahmen-titan.svg?v=3"); }

.profil-bild-stift { z-index:3; }
.kosmetik-beschreibung { font-size:11px; line-height:1.5; color:var(--muted); }
.profil-rahmen-wahl .profil-rahmen-muster { display:block; }
.profil-rahmen-wahl strong { font-size:13px; }
.kosmetik-bisher { margin-top:18px; border-top:1px solid var(--stroke); padding-top:14px; }
.kosmetik-bisher summary { color:var(--muted); cursor:pointer; margin-bottom:14px; }
html[data-design=weltraum] .profil-karte { width:min(1440px,calc(100vw - 48px)); max-width:1440px; }
html[data-design=weltraum] .welt-profil-layout { grid-template-columns:minmax(0,1fr) 290px; }
html[data-design=weltraum] .profil-karte .profil-rahmen-reihe { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
html[data-design=weltraum] .profil-karte .profil-rahmen-wahl { padding:24px 10px 14px; min-height:190px; gap:12px; }
html[data-design=weltraum] .profil-karte .profil-rahmen-muster { width:76px; height:76px; margin:8px auto 12px; }
html[data-design=weltraum] .profil-karte .profil-rahmen-wahl.gewaehlt { border-color:var(--pink); box-shadow:0 0 0 1px var(--pink); }
html[data-design=weltraum] .profil-karte .profil-rahmen-wahl.gesperrt { opacity:.8; }
html[data-design=weltraum] .profil-karte .profil-rahmen-wahl small { margin-top:auto; color:var(--gold); }
html[data-design=weltraum] .profil-karte .profil-rahmen-wahl.gewaehlt small { color:var(--pink); }
html[data-design=weltraum] .profil-karte .profil-kartenstil-liste { grid-template-columns:repeat(4,minmax(0,1fr)); }
html[data-design=weltraum] .profil-kartenstil-wahl { padding:0 0 14px; overflow:hidden; }
html[data-design=weltraum] .profil-kartenstil-wahl > :is(strong,span:not(.kartenstil-vorschau),small) { margin-inline:12px; }
html[data-design=weltraum] .profil-kartenstil-wahl > .kartenstil-vorschau { min-height:190px; border:0; border-radius:0; }
html[data-design=weltraum] .profil-kartenstil-wahl .spieler-bild { width:70px!important; height:70px!important; }
html[data-design=weltraum] .profil-kartenstil-wahl .kartenstil-vorschau-name { margin-top:7px; }
:is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"]) { --karten-hintergrund:#0b0816; --kosmetik-bewegung:none; --kosmetik-effekt:none; }
[data-kartenstil="galaxiewelle"] { --karten-bild:url("/kosmetik/galaxiewelle.webp"); }
[data-kartenstil="neonsturm"] { --karten-bild:url("/kosmetik/neonsturm.webp"); }
[data-kartenstil="mondlicht"] { --karten-bild:url("/kosmetik/mondlicht.webp"); }
[data-kartenstil="kristallfluss"] { --karten-bild:url("/kosmetik/kristallfluss.webp"); }
[data-kartenstil="warpfeld"] { --karten-bild:url("/kosmetik/warpfeld.webp"); }
[data-kartenstil="sternenpfad"] { --karten-bild:url("/kosmetik/sternenpfad.webp"); }
[data-kartenstil="aurora-x"] { --karten-bild:url("/kosmetik/aurora-x.webp"); }
[data-kartenstil="retro-pulse"] { --karten-bild:url("/kosmetik/retro-pulse.webp"); }
:is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"]) { position:relative; isolation:isolate; overflow:hidden; background:#0b0816!important; }
:is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:var(--karten-bild) center/cover no-repeat; animation:var(--kosmetik-bewegung); }
:is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(transparent 20%,#06040c33 55%,#06040caa); animation:var(--kosmetik-effekt); }
:is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"]) :is(.pname,.studio-status,.kartenstil-vorschau-name,h3) { position:relative; width:fit-content; max-width:100%; background:#080610e8; padding:4px 10px; border-radius:18px; color:#fff; text-shadow:0 1px 3px #000; }
.welt-spieler-hero:is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"]) .profil-identitaet { background:#080610cf; padding:14px; border-radius:12px; }

@keyframes kosmetik-puls { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes kosmetik-orbit { to { transform:rotate(360deg); } }
@keyframes kosmetik-komet { 0%,100%,45%,70% { opacity:.25; } 30%,60%,85% { opacity:.8; } }
@keyframes kosmetik-prisma { 0%,100% { filter:brightness(1); } 45% { filter:brightness(1.4); } }
@keyframes kosmetik-holo { to { filter:hue-rotate(360deg); } }
@keyframes kosmetik-glitch { 0%,88%,93%,100% { transform:translate(0); } 89%,91% { transform:translate(2px,-1px); } 90%,92% { transform:translate(-2px,1px); } }
@keyframes kosmetik-plasma { 0%,17%,23%,48%,54%,78%,84%,100% { opacity:.08; } 18%,21%,49%,52%,79%,82% { opacity:1; } 19%,50%,80% { opacity:.35; } }
@keyframes karte-galaxie { from { transform:rotate(0deg) scale(1.8); } to { transform:rotate(360deg) scale(1.8); } }
@keyframes karte-neon { 0%,100% { transform:scale(1.12) translate(-3%,3%); } 50% { transform:scale(1.12) translate(3%,-3%); } }
@keyframes karte-kristall { 0%,100% { opacity:.1; } 45% { opacity:.7; } 60% { opacity:.3; } }
@keyframes karte-warp { from { transform:scale(1); opacity:.15; } 40% { opacity:.5; } to { transform:scale(1.5); opacity:0; } }
@keyframes karte-aurora { 0%,100% { transform:scale(1.12) skewX(-3deg) translateX(-2%); } 50% { transform:scale(1.12) skewX(3deg) translateX(2%); } }
@keyframes karte-retro { 0%,95%,100% { opacity:.15; } 97% { opacity:.35; } }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-aurora::before { animation:kosmetik-puls 3s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-orbit::before { animation:kosmetik-orbit 12s linear infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-prisma::before { animation:kosmetik-prisma 6s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-holo::before { animation:kosmetik-holo 18s linear infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-eclipse::before { animation:kosmetik-puls 6s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-glitch::before { animation:kosmetik-glitch 8s steps(1,end) infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-titan::before { animation:kosmetik-prisma 8s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-komet::after { content:""; background:radial-gradient(ellipse at 81% 19%,#e8b8ffcc,transparent 17%); animation:kosmetik-komet 3s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-nova::after { content:""; filter:brightness(2); clip-path:polygon(0 0,80% 0,100% 100%,60% 100%); animation:kosmetik-puls 3.8s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-plasma::after { content:""; background-image:var(--plasma-blitze,url("/kosmetik/rahmen-plasma-blitze.svg?v=3")); filter:brightness(1.2); animation:kosmetik-plasma 6.7s steps(1,end) infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) [data-kartenstil="galaxiewelle"] { --kosmetik-bewegung:karte-galaxie 150s linear infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) [data-kartenstil="neonsturm"] { --kosmetik-bewegung:karte-neon 14s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) [data-kartenstil="sternenpfad"] { --kosmetik-bewegung:karte-neon 40s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) [data-kartenstil="aurora-x"] { --kosmetik-bewegung:karte-aurora 16s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero)[data-kartenstil="kristallfluss"]::after { background:radial-gradient(circle at 25% 30%,#ffffff 0 1px,transparent 3px),radial-gradient(circle at 80% 12%,#edc7ff 0 1px,transparent 3px),radial-gradient(circle at 65% 70%,#ffffff 0 1px,transparent 3px); animation:karte-kristall 5s ease-in-out infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero)[data-kartenstil="warpfeld"]::after { background:var(--karten-bild) center/cover; animation:karte-warp 2.5s linear infinite; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero)[data-kartenstil="retro-pulse"]::after { background:repeating-linear-gradient(0deg,transparent 0 3px,#d540a8 4px 5px); animation:karte-retro 7s steps(1,end) infinite; }
html.mobil-sparsam :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::before, html.mobil-sparsam :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after, html.kosmetik-pause :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::before, html.kosmetik-pause :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after { animation:none!important; }
html.kosmetik-pause :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::before, html.kosmetik-pause :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::after, html.mobil-sparsam :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::before, html.mobil-sparsam :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::after { animation:none!important; }
@media(prefers-reduced-motion:reduce) { :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::before, :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-aurora,.rahmen-orbit,.rahmen-komet,.rahmen-prisma,.rahmen-holo,.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after, :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::before, :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero):is([data-kartenstil="galaxiewelle"],[data-kartenstil="neonsturm"],[data-kartenstil="mondlicht"],[data-kartenstil="kristallfluss"],[data-kartenstil="warpfeld"],[data-kartenstil="sternenpfad"],[data-kartenstil="aurora-x"],[data-kartenstil="retro-pulse"])::after { animation:none!important; } }

@media(max-width:1200px) {
 html[data-design=weltraum] .profil-karte .profil-rahmen-reihe { grid-template-columns:repeat(3,minmax(0,1fr)); }
 html[data-design=weltraum] .profil-karte .profil-kartenstil-liste { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
 html[data-design=weltraum] .welt-profil-layout { grid-template-columns:minmax(0,1fr); }
 html[data-design=weltraum] .profil-karte { width:calc(100vw - 24px); }
}
@media(max-width:520px) {
 html[data-design=weltraum] .profil-karte .profil-rahmen-reihe { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html[data-design=weltraum] .profil-karte .profil-rahmen-muster { width:62px; height:62px; }
 html[data-design=weltraum] .profil-karte .profil-kartenstil-liste { grid-template-columns:minmax(0,1fr); }
}

/* Echte Rollen bleiben lesbarer Text; die Facetten und Symbole sind Dekoration. */
.studio-marken { gap:6px; justify-content:center; }
html :is(#lobby-players,#players) .studio-marken .rollen-abzeichen { display:inline-flex; align-items:center; justify-content:center; gap:4px; position:relative; border:0; border-radius:0; background:var(--abzeichen-grafik) center/100% 100% no-repeat; color:var(--abzeichen-text); padding:7px 8px; min-height:30px; font-size:9px; font-weight:800; line-height:1.2; letter-spacing:.25px; text-transform:uppercase; white-space:nowrap; box-shadow:none; filter:drop-shadow(0 0 3px var(--abzeichen-glanz)); }
html :is(#lobby-players,#players) .studio-marken .rollen-abzeichen::before { content:""; flex:none; width:12px; height:12px; background:var(--abzeichen-symbol) center/contain no-repeat; }
.abzeichen-admin { --abzeichen-grafik:url('/kosmetik/abzeichen-admin.svg'); --abzeichen-symbol:url('/kosmetik/symbol-admin.svg'); --abzeichen-text:#ffe69a; --abzeichen-glanz:#ffb82c60; }
.abzeichen-pro { --abzeichen-grafik:url('/kosmetik/abzeichen-pro.svg'); --abzeichen-symbol:url('/kosmetik/symbol-pro.svg'); --abzeichen-text:#e5b9ff; --abzeichen-glanz:#b944ff70; }
.abzeichen-host { --abzeichen-grafik:url('/kosmetik/abzeichen-host.svg'); --abzeichen-symbol:url('/kosmetik/symbol-host.svg'); --abzeichen-text:#caddff; --abzeichen-glanz:#69c6ff60; }
/* Das Bild ist 88 px breit. Der frühere 90-px-Rahmen enthielt zusätzlich
   Innenabstand und Rand, sodass das Bild die Aura rechts/unten überragte. */
html :is(#lobby-players,#players) .studio-avatar { box-sizing:content-box; width:88px; height:88px; flex:none; align-items:center; justify-content:center; }
html :is(#lobby-players,#players) .studio-avatar > .spieler-bild { flex:none; }
html.kosmetik-pause .studio-avatar::before { animation:none!important; }
.profil-rahmen-wahl { min-width:0; overflow-wrap:anywhere; }
.profil-rahmen-wahl small { max-width:100%; white-space:normal; }
html[data-design=weltraum] .welt-profil-karte { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 16px 18px; gap:12px; }
html[data-design=weltraum] .welt-profil-karte h3 { font-size:20px; max-width:100%; margin:5px 0 0; }
html[data-design=weltraum] .welt-profil-karte .welt-profil-status { margin:0; }
html[data-design=weltraum] .profil-karte .profil-rahmen-muster { width:96px; height:96px; }
@media(max-width:520px) { html[data-design=weltraum] .profil-karte .profil-rahmen-muster { width:62px; height:62px; } }
/* Rotierende transparente SVG-Ecken dürfen in Safari keine Scrollbreite erzeugen. */
.profil-rahmen-wahl { overflow:hidden; }
/* Warpfeld: beide Bildebenen teilen sich denselben Fluchtpunkt am Avatar. */
:is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero)[data-kartenstil="warpfeld"]::before,
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.studio-person,.kartenstil-vorschau,.welt-profil-karte,.welt-spieler-hero)[data-kartenstil="warpfeld"]::after {
  inset:auto; width:var(--warp-breite,200%); height:var(--warp-hoehe,200%);
  left:calc(var(--warp-x,50%) - var(--warp-breite,200%) / 2);
  top:calc(var(--warp-y,76px) - var(--warp-hoehe,200%) / 2);
  background-size:100% 100%; transform-origin:center;
}

/* Die Profilauswahl bestimmt Bild UND Rahmen; einzelne Spielphasen überschreiben sie nicht. */
html [data-avatarform="rund"] { border-radius:50%!important; }
html [data-avatarform="eckig"] { border-radius:14%!important; }
html [data-avatarform] > :is(img,.kosmetik-avatar,#profil-bild-buchstabe,#profil-knopf-buchstabe) { border-radius:inherit!important; }
html .studio-avatar:has(> [data-avatarform="eckig"]),
html .studio-avatar:has(> [data-avatarform="eckig"])::before { border-radius:14%; }
.profil-form-wahl { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-block:12px; }
.profil-form-wahl select { width:auto; min-width:150px; }
html [data-avatarform="eckig"].rahmen-aurora { --rahmen-grafik:url("/kosmetik/rahmen-aurora-eckig.svg"); }
html [data-avatarform="eckig"].rahmen-orbit { --rahmen-grafik:url("/kosmetik/rahmen-orbit-eckig.svg"); }
html [data-avatarform="eckig"].rahmen-komet { --rahmen-grafik:url("/kosmetik/rahmen-komet-eckig.svg"); }
html [data-avatarform="eckig"].rahmen-prisma { --rahmen-grafik:url("/kosmetik/rahmen-prisma-eckig.svg"); }
html [data-avatarform="eckig"].rahmen-holo { --rahmen-grafik:url("/kosmetik/rahmen-holo-eckig.svg"); }
html [data-avatarform="eckig"].rahmen-eclipse { --rahmen-grafik:url("/kosmetik/rahmen-eclipse-eckig.svg?v=3"); }
html [data-avatarform="eckig"].rahmen-nova { --rahmen-grafik:url("/kosmetik/rahmen-nova-eckig.svg?v=3"); }
html [data-avatarform="eckig"].rahmen-glitch { --rahmen-grafik:url("/kosmetik/rahmen-glitch-eckig.svg?v=3"); }
html [data-avatarform="eckig"].rahmen-plasma { --rahmen-grafik:url("/kosmetik/rahmen-plasma-eckig.svg?v=3"); }
html [data-avatarform="eckig"].rahmen-titan { --rahmen-grafik:url("/kosmetik/rahmen-titan-eckig.svg?v=3"); }
html [data-avatarform="eckig"].rahmen-plasma { --plasma-blitze:url("/kosmetik/rahmen-plasma-blitze-eckig.svg?v=3"); }
/* Beim eckigen Orbit bleibt der Rahmen fest, das Licht folgt seinen Kanten. */
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen)[data-avatarform="eckig"].rahmen-orbit::before { animation:none; }
html:not(.mobil-sparsam):not(.kosmetik-pause) :is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen)[data-avatarform="eckig"].rahmen-orbit::after {
 content:""; inset:auto; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#c9ffff;
 box-shadow:0 0 5px 2px #30dfff; offset-path:inset(-8% round 18%); offset-rotate:0deg;
 animation:kosmetik-eckig-orbit 12s linear infinite;
}
@keyframes kosmetik-eckig-orbit { to { offset-distance:100%; } }
/* Zusätzlicher transparenter Rand lässt Schweife und Verästelungen auslaufen. */
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-plasma::before,
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen).rahmen-plasma::after { inset:-28%; }
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen)[data-avatarform="eckig"]::before,
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen)[data-avatarform="eckig"]::after { inset:-35%; }

/* Unterstützerrahmen: identische Avataröffnung (150/300) für beide Formen.
   Der breite transparente Rand gehört zur Grafik, nicht zum Layout. */
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::before,
:is(.kosmetik-avatarrahmen,.profil-rahmen-muster,#profil-bild-rahmen,#btn-profil-oeffnen):is(.rahmen-eclipse,.rahmen-nova,.rahmen-glitch,.rahmen-plasma,.rahmen-titan)::after { inset:-50%; }

.kosmetik-ausserhalb,.kosmetik-ausserhalb::before,.kosmetik-ausserhalb::after,.kosmetik-ausserhalb *,.kosmetik-ausserhalb *::before,.kosmetik-ausserhalb *::after { animation-play-state:paused!important; }