/* Sammlung und Hardware: schwarzer Grund, Materiallicht und klare Typografie. */
[hidden]{display:none!important}
#spCard.spotify{display:none;min-height:102px;padding:17px;gap:16px}
#spCard .sc-wrap{width:62px;height:62px;border-radius:11px}
#spCard .sl-t{font-size:9px;letter-spacing:.14em}
#spCard .sl{flex-wrap:wrap;gap:3px}
#spCard .st{white-space:normal;font:600 14px/1.4 'Rajdhani',"Segoe UI",system-ui,sans-serif}
#spCard .sa{font-size:11px;line-height:1.5}
#spCard:not([data-state="playing"]){--sp-accent-rgb:190,96,104;background:linear-gradient(115deg,#12080b,#040405)}
#spCard:not([data-state="playing"]) .sbar{display:none}
#spCard[data-state="playing"] .sc-wrap{box-shadow:0 0 25px rgba(var(--sp-accent-rgb),.15)}
.ortho-specialty{display:flex;gap:9px;align-items:center;margin:7px 0;color:#d8a9ad;font:500 12px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif}
.ortho-specialty i{font-style:normal}
.gallery-eyebrow{display:block;font:600 10px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.22em;color:rgba(var(--echo-rgb,210,65,74),.95)}
body.echo-kosmos #gamesCard.games-gallery{background:#030304;padding:38px 30px}
#gamesCard.games-gallery .about-title{font:650 clamp(32px,5vw,48px)/1.1 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.03em;text-align:left;justify-content:flex-start;color:#f0e7e9;text-shadow:none}
#gamesCard.games-gallery #gmLead{text-align:left;font:500 10px/1.6 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.21em;color:#a08e92;margin:14px 0 26px}
#gamesCard.games-gallery .game-focus{min-height:365px;border-radius:22px;scroll-margin-top:90px}
#gamesCard.games-gallery .gf-title{font:700 clamp(28px,4vw,46px)/1.05 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.03em;max-width:85%;text-wrap:balance}
#gamesCard.games-gallery .gf-stat b{font-family:'Rajdhani',"Segoe UI",system-ui,sans-serif;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#gamesCard.games-gallery .gf-gridlines,#gamesCard.games-gallery .gf-sweep{display:none}
#gamesCard.games-gallery .gf-shade{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.02)),linear-gradient(0deg,#030304,transparent 90%)}
#gamesCard.games-gallery .gf-media img{transition:opacity .5s,transform 1.1s;object-position:center}
#gamesCard.games-gallery .gf-ach{max-width:280px}
#gamesCard.games-gallery .gm-top{margin:24px 0 34px}
#gamesCard.games-gallery .gm-summary-icon{display:none}
#gamesCard.games-gallery .gm-summary b{font-family:'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.game-filters{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin:30px 0 20px}
.game-filters>.gallery-eyebrow{flex-basis:100%}
.game-filter-buttons{display:flex;flex-wrap:wrap;gap:6px}
.game-filter-buttons button{font:500 12px 'Rajdhani',"Segoe UI",system-ui,sans-serif;border:1px solid #ffffff13;border-radius:8px;background:#090809;color:#a79c9f;padding:11px 13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.game-filter-buttons button[aria-pressed="true"]{color:#fff;background:rgba(var(--echo-rgb),.17);border-color:rgba(var(--echo-rgb),.42)}
/* Beim Ueberfahren schon aufleuchten, schwaecher als die gewaehlte Ansicht.
   Nur mit echter Maus, sonst bleibt am Telefon ein Leuchten nach dem Tippen haengen. */
@media(hover:hover){
 .game-filter-buttons button:not([aria-pressed="true"]):hover{color:#f1e6e9;background:rgba(var(--echo-rgb),.09);border-color:rgba(var(--echo-rgb),.32);box-shadow:0 0 14px rgba(var(--echo-rgb),.16)}
 .game-filter-buttons button[aria-pressed="true"]:hover{border-color:rgba(var(--echo-rgb),.6);box-shadow:0 0 16px rgba(var(--echo-rgb),.22)}
}
#gameCount{font:11px 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#98888d;margin-left:auto}
#gamesCard.games-gallery .gm-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.game-poster{min-width:0;background:#080708;border:1px solid #ffffff17;border-radius:15px;overflow:hidden;transition:border-color .3s,transform .4s,box-shadow .4s;animation:posterEnter .55s both;animation-delay:calc(var(--order)*.04s)}
.game-poster:hover,.game-poster:focus-within{border-color:rgba(var(--echo-rgb),.6);transform:translateY(-4px);box-shadow:0 16px 28px #0008}
.game-poster.is-selected{border-color:rgba(var(--echo-rgb),.7)}
.poster-select{position:relative;display:block;width:100%;height:310px;padding:0;text-align:left;border:0;background:#0b080b;color:#fff;cursor:pointer;overflow:hidden}
.poster-art{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 70% 20%,#52242c,#0c0a0e 70%)}
.poster-art>span{position:absolute;inset:25% 0 auto;text-align:center;font:600 70px 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#ffffff20}
.poster-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .8s;z-index:1}
.poster-art img.loaded{opacity:.84}
.poster-select:hover img{transform:scale(1.055)}
.poster-select:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#050405 2%,rgba(4,3,5,.88) 20%,transparent 76%);pointer-events:none}
.poster-index,.poster-live{position:absolute;z-index:2;top:14px;font:600 10px 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.12em;padding:6px 8px;background:#050405a6;border:1px solid #ffffff24;border-radius:5px}
.poster-index{left:12px;color:#eee1e2}.poster-live{right:10px;color:#ffc3c5}
.poster-copy{position:absolute;bottom:18px;left:16px;right:14px;z-index:2}
.poster-copy>strong{display:block;font:650 17px/1.2 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.poster-copy>span{display:block;margin-top:12px;font:11px 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#b0a2a7}
.poster-copy b{font:600 22px 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-right:4px}
.poster-copy small{display:block;font:10px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#c6b5ba;margin-top:5px}
.poster-details{border:0;border-top:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;width:100%;background:#080708;color:#b6a7aa;cursor:pointer;padding:12px 15px;font:500 11px 'Rajdhani',"Segoe UI",system-ui,sans-serif}
.poster-details:hover{color:#fff;background:rgba(var(--echo-rgb),.12)}
.poster-details span{font-size:17px;color:rgb(var(--echo-rgb))}
.gallery-empty{color:#bcadb0;font:13px 'Rajdhani',"Segoe UI",system-ui,sans-serif;grid-column:1/-1;padding:20px}
#careerHighlights{margin-top:45px;border-top:1px solid #ffffff12;padding-top:30px}
.gallery-section-heading h3,.activity-breakdown h3{font:600 25px/1.2 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.025em;margin:10px 0}
.gallery-section-heading p,.activity-breakdown p{font:12px/1.6 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#a4959a}
.career-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.career-grid button{position:relative;min-width:0;overflow:hidden;padding:23px 16px;text-align:left;color:#eee6e8;background:linear-gradient(145deg,rgba(var(--echo-rgb),.07),transparent 65%),#070607;border:1px solid #ffffff16;border-radius:13px;cursor:pointer}
.career-grid button:hover{border-color:rgba(var(--echo-rgb),.5)}
.career-seal{display:block;font-size:24px;color:rgb(var(--echo-rgb));margin-bottom:18px}
.career-grid small{display:block;font:10px/1.6 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#b4a0a6}
.career-grid strong{display:block;font:600 29px 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;margin:8px 0}
.career-grid button>span:last-child{font:12px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#d1c3c7}
.activity-breakdown{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;margin-top:35px;padding:26px 0;border-top:1px solid #ffffff12}
.activity-line{position:relative;display:flex;justify-content:space-between;gap:14px;font:11px/1.4 'Rajdhani',"Segoe UI",system-ui,sans-serif;padding-bottom:12px;margin-bottom:15px;color:#bdafb4}
.activity-line b{white-space:nowrap;color:#e7dfe2;font-weight:500}
.activity-line i{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#171116}
.activity-line i:after{content:"";display:block;height:100%;width:var(--fill);background:linear-gradient(90deg,rgba(var(--echo-rgb),.32),rgb(var(--echo-rgb)));border-radius:4px}
.detail-overlay{position:fixed;inset:0;z-index:94;background:#000d;display:grid;place-items:center;padding:22px;overscroll-behavior:contain;backdrop-filter:blur(12px)}
#extLink{z-index:96}
.poster-details,.game-filter-buttons button,.hardware-tabs button{min-height:44px}
.detail-window{position:relative;width:min(900px,100%);max-height:88dvh;overflow:auto;overscroll-behavior:contain;border:1px solid #643039;border-radius:24px;background:radial-gradient(ellipse at 100% 0%,#201013,transparent 55%),#060506;padding:34px;box-shadow:0 35px 100px #000;color:#eee6e8;scrollbar-width:thin}
.detail-close{position:sticky;top:0;float:right;z-index:5;width:42px;height:42px;border:1px solid #ffffff25;border-radius:50%;background:#120d10;color:#eee;cursor:pointer}
.detail-window{scrollbar-color:#613440 #0b080b}
.detail-heading{margin:0 40px 26px 0}
.detail-heading h2{font:650 clamp(24px,4vw,37px)/1.15 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.03em;margin:10px 0;text-wrap:balance}
.game-detail-layout{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:30px}
.game-detail-art{width:100%;max-height:410px;object-fit:cover;border-radius:13px;background:#10090d}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 15px}
.detail-stats small,.achievement-detail>span{display:block;font:11px/1.4 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#ae959e}
.detail-stats strong{display:block;font:500 24px/1.3 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.045em;margin-top:5px;overflow-wrap:anywhere}
.achievement-detail{margin-top:26px;padding-top:20px;border-top:1px solid #ffffff18}
.achievement-detail b{font:600 24px 'Rajdhani',"Segoe UI",system-ui,sans-serif;display:block;margin:10px 0}
.achievement-detail progress{width:100%;height:5px;accent-color:#dc5768;display:block}
.achievement-detail small,.detail-source{display:block;font:11px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#9b858d;margin-top:12px}
.detail-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.detail-links a{padding:11px 16px;border:1px solid #69323e;border-radius:9px;color:#f0dde2;text-decoration:none;font:12px 'Rajdhani',"Segoe UI",system-ui,sans-serif;background:#30141d}
:is(.game-filters,.game-poster,.career-grid,.detail-overlay,.hardware-panel) :is(button,a):focus-visible{outline:2px solid #f1b7c0;outline-offset:-3px}
/* Die Hardwaregrafiken bleiben Illustrationen und imitieren keine Sensordaten. */
body.echo-kosmos #setupCard .setup-support{grid-template-columns:1fr 1fr}
body.echo-kosmos #setupCard .setup-support .setup-cooling{grid-column:1/-1}
body.echo-kosmos #setupCard .hardware-panel{position:relative;background:radial-gradient(ellipse at 50% 30%,rgba(var(--echo-rgb),.06),transparent 62%),#040405;border:1px solid #ffffff17;overflow:hidden;padding:23px;border-radius:19px}
.hardware-visual{position:relative;display:block;padding:0;border:0;width:100%;height:245px;cursor:zoom-in;background:transparent;color:#dd4256}
.hardware-visual svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 13px #000b)}
.hardware-visual:after{content:"EXPLORE COMPONENT  ↗";position:absolute;bottom:0;right:0;color:#a7878e;font:9px 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.17em;padding:8px 0}
.hardware-visual:hover{color:#ff6b79}
.hardware-visual .hw-model{transform-origin:50% 50%;transition:transform .8s}
.hardware-visual:hover .hw-model{transform:translateY(-3px)}
body.echo-kosmos #setupCard .hardware-caption{font:9px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.12em;color:#9a838c;margin:3px 0 13px}
body.echo-kosmos #setupCard .setup-memory-art,body.echo-kosmos #setupCard .setup-support-art,body.echo-kosmos #setupCard .setup-drive-art{display:none}
body.echo-kosmos #setupCard .setup-storage{padding:23px}
body.echo-kosmos #setupCard .setup-storage-drive{display:grid;grid-template-columns:1fr auto;padding:18px 0}
.setup-storage-drive .hardware-visual{grid-column:1/-1;height:135px}
.setup-storage-drive .hardware-caption{grid-column:1/-1}
body.echo-kosmos #setupCard .setup-drive-copy{grid-column:1}
.setup-memory .hardware-visual{height:210px}
.setup-cooling .hardware-visual{height:285px}
.hw-spin{transform-box:fill-box;transform-origin:center;animation:hardwareSpin 11s linear infinite}
.hw-trace{stroke-dasharray:12 70;animation:hardwareTrace 6s linear infinite}
.hw-breathe{animation:hardwareBreathe 5s ease-in-out infinite alternate}
.hw-head{transform-origin:265px 172px;animation:hardwareHead 7s ease-in-out infinite alternate}
.hardware-panel .hw-motion{animation-play-state:paused}
.hardware-panel.hardware-visible .hw-motion{animation-play-state:running}
body.hardware-paused .hw-motion{animation-play-state:paused!important}
.hardware-panel.hardware-visible:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 15%,#ffffff07 45%,transparent 70%);animation:hardwareReveal 1.7s both}
.hardware-detail-art{height:330px;background:radial-gradient(ellipse at 50% 60%,#2e172280,transparent 65%);color:#ed5265}
.hardware-detail-art svg{height:100%;width:100%;filter:drop-shadow(0 20px 15px #000)}
.hardware-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.hardware-tabs button{background:#130d10;border:1px solid #4c2c34;color:#c7adb5;border-radius:8px;padding:10px 13px;cursor:pointer;font:12px 'Rajdhani',"Segoe UI",system-ui,sans-serif}
.hardware-tabs button[aria-pressed="true"]{background:#45202b;color:#fff;border-color:#b65c71}
.hardware-description{font:13px/1.8 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#bfabb2;max-width:650px}
.hardware-detail-art[data-zone="0"] .hw-zone-0,.hardware-detail-art[data-zone="1"] .hw-zone-1,.hardware-detail-art[data-zone="2"] .hw-zone-2{filter:drop-shadow(0 0 6px #ff536f);opacity:1}
@keyframes posterEnter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes hardwareSpin{to{transform:rotate(360deg)}}
@keyframes hardwareTrace{to{stroke-dashoffset:-164}}
@keyframes hardwareBreathe{from{opacity:.35}to{opacity:1}}
@keyframes hardwareHead{from{transform:rotate(-8deg)}to{transform:rotate(13deg)}}
@keyframes hardwareReveal{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-width:700px){
 body.echo-kosmos #gamesCard.games-gallery{padding:28px 20px}
 #gamesCard.games-gallery .gm-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .poster-select{height:290px}.career-grid{gap:8px}.career-grid button{padding:17px 12px}.career-grid strong{font-size:24px}
 .activity-breakdown{grid-template-columns:1fr;gap:20px}
 .detail-window{padding:24px}.hardware-detail-art{height:260px}
 .hardware-visual{height:210px}
}
@media(max-width:440px){
 body.echo-kosmos #gamesCard.games-gallery{padding:24px 14px}
 #gamesCard.games-gallery .game-focus{min-height:370px}
 .poster-select{height:245px}.poster-copy{left:11px;right:10px;bottom:13px}.poster-copy>strong{font-size:14px}.poster-copy b{font-size:20px}
 .game-filter-buttons{gap:5px}.game-filter-buttons button{padding:11px 9px;font-size:10px}.game-filters{gap:10px}#gameCount{margin-left:0}
 .career-grid{grid-template-columns:1fr}.career-grid button{padding:18px 20px;display:grid;grid-template-columns:40px 1fr;gap:5px 12px}.career-seal{grid-row:1/4;margin:0;align-self:center}.career-grid strong{margin:0}
 .detail-overlay{padding:10px}.detail-window{padding:22px 17px;border-radius:18px;max-height:92dvh}
 .game-detail-layout{grid-template-columns:1fr}.game-detail-art{height:180px;object-position:center 30%}
 .detail-stats strong{font-size:22px}.hardware-detail-art{height:220px}
 body.echo-kosmos #setupCard .setup-support{grid-template-columns:1fr}
 body.echo-kosmos #setupCard .hardware-panel{padding:20px}
 .setup-cooling .hardware-visual{height:210px}
}
@media(prefers-reduced-motion:reduce){
 .game-poster,.hw-motion,.hardware-panel.hardware-visible:before{animation:none!important}
 .poster-art img,.hardware-visual .hw-model{transition:none}
 .game-poster:hover,.game-poster:focus-within,.hardware-visual:hover .hw-model,.poster-select:hover img{transform:none}
}

/* Live-Praesenz ohne leeren Platz; Medal schliesst das Linkraster ab. */
#spCard.spotify.on[data-state="playing"]{display:flex}
/* Medal im Stil der anderen Profilkacheln (v41). Eigen sind nur die Farben:
   Hausfarbe Limette, Zeichen weiss wie im offiziellen Logo. Das Zeichen ist
   breiter als hoch (514x304) und bekommt deshalb mehr Breite als die
   quadratischen Marken - in 32x32 waere es nur 19 px hoch. */
.ptile.medal{grid-column:1/-1;--marke:190,248,55;--brand:rgba(190,248,55,.30);color:#fff}
.ptile.medal .tn{color:#f5f0e8}
.ptile.medal .ts{color:#d6f58c}
.ptile.medal:focus-visible{outline:2px solid #bef837;outline-offset:3px}
.ptile.medal .brandimg.md-logo{width:44px;height:32px}
.ptile.medal .brandgross.md-logo{width:176px;height:104px;right:-28px}
@media(max-width:600px){
 .ptile.medal{grid-template-columns:36px minmax(0,1fr)}
 .ptile.medal .brandimg.md-logo{width:36px;height:26px}
 .ptile.medal .brandgross.md-logo{width:118px;height:70px;right:-30px}
}
/* v113: Instagram schliesst das Raster zusammen mit Medal ab - beide stehen
   in der letzten Reihe nebeneinander (breit je anderthalb Spalten, schmal je
   eine). Die Glyphe traegt den offiziellen Verlauf, Rand und Schein sind
   Instagram-Pink (#FF0069). */
.ptile.insta{--marke:255,0,105;--brand:rgba(255,0,105,.30);color:#fff}
.ptile.insta .tn{color:#f5f0e8}
.ptile.insta .ts{color:#ff86b6}
.ptile.insta:focus-visible{outline:2px solid #ff0069;outline-offset:3px}
.ptile.insta:hover .brandimg{filter:drop-shadow(0 0 8px rgba(255,0,105,.7))}
/* v118: Marcelo "warum sind die unterschiedlich gross?" - die Kacheln sind
   gleich breit, aber Medal hat einen 44 px breiten Zeichenplatz und ein
   176x104 grosses Wasserzeichen. Instagram bekommt denselben Platz (die
   Glyphe 32 px mittig darin), damit die Schrift an derselben Stelle beginnt,
   und ein Wasserzeichen in vergleichbarer Groesse. */
.ptile.insta .brandimg.ig-logo{width:44px;height:32px}
.ptile.insta .brandgross.ig-logo{width:132px;height:132px;right:-8px}
@media(max-width:600px){
 .ptile.insta .brandimg.ig-logo{width:36px;height:28px}
 .ptile.insta .brandgross.ig-logo{width:92px;height:92px;right:-26px}
}
body.echo-kosmos #card .ptiles>.ptile.medal{grid-column:auto}
@media(min-width:900px){
 body.echo-kosmos #card .ptiles{grid-template-columns:repeat(6,minmax(0,1fr))}
 body.echo-kosmos #card .ptiles>.ptile{grid-column:span 2}
 body.echo-kosmos #card .ptiles>.ptile:is(.medal,.insta){grid-column:span 3}
}

/* Klare Innenabstaende: alte Zeilen- und Kachelregeln nicht vermischen. */
body.echo-kosmos #setupCard .setup-memory-storage .hardware-panel,
body.echo-kosmos #setupCard .setup-support .hardware-panel,
body.echo-kosmos #setupCard .setup-storage .setup-storage-drive{padding:24px;min-width:0}
body.echo-kosmos #setupCard .setup-memory-storage .setup-storage{padding:0;border:0;background:none;box-shadow:none}
body.echo-kosmos #setupCard .setup-storage>h3{margin:0 0 14px;padding:0 6px;font:600 11px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.13em;color:#ac979d}
body.echo-kosmos #setupCard .setup-storage-drive{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;margin:0}
body.echo-kosmos #setupCard .setup-storage-drive+.setup-storage-drive{margin-top:14px}
body.echo-kosmos #setupCard .setup-storage-drive .setup-drive-top{grid-column:1/-1;grid-row:auto;width:100%;margin:0}
body.echo-kosmos #setupCard .setup-storage-drive .hardware-visual{grid-column:1/-1;grid-row:auto;height:168px;margin:0}
body.echo-kosmos #setupCard .setup-storage-drive .hardware-caption{grid-column:1/-1;grid-row:auto;margin:0 0 6px}
body.echo-kosmos #setupCard .setup-storage-drive .setup-drive-copy{grid-column:1;grid-row:auto;min-width:0}
body.echo-kosmos #setupCard .setup-storage-drive .setup-drive-size{grid-column:2;grid-row:auto;position:static;align-self:center;white-space:nowrap;font:500 30px/1.15 'Rajdhani',"Segoe UI",system-ui,sans-serif;margin:0}
body.echo-kosmos #setupCard .hardware-panel :is(p,strong,span){overflow-wrap:break-word}
body.echo-kosmos #setupCard .hardware-panel .setup-label{font:600 11px/1.5 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.1em;margin-bottom:12px}
body.echo-kosmos #setupCard .hardware-panel .hardware-caption{font:500 10px/1.65 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.1em;margin:12px 0 16px;color:#a9949b}
body.echo-kosmos #setupCard .setup-support .hardware-panel>p:not(.hardware-caption){font:400 12px/1.7 'Rajdhani',"Segoe UI",system-ui,sans-serif;color:#c1b6bc;margin:0}
body.echo-kosmos #setupCard .setup-support .hardware-panel>p strong{font:600 clamp(26px,3vw,36px)/1.2 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:-.045em;margin:8px 0 10px}
.hardware-visual{padding-bottom:25px;box-sizing:border-box}
.hardware-visual:after{bottom:0;right:4px;padding:5px 0;line-height:1.6}
.hardware-board-preview{height:300px;isolation:isolate}
.hardware-board-preview>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 12px #0009);transition:transform .65s ease}
.hardware-board-preview:hover>img{transform:translateY(-3px) rotate(-1deg)}
.hardware-preview-badge{position:absolute;top:7px;right:0;border:1px solid #c65b684d;border-radius:5px;padding:5px 7px;color:#deb1b8;background:#100a0dd9;font:600 9px/1.4 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.12em}
.hardware-board-preview:after{content:"OPEN 3D EXPLORER  ↗"}
@media(max-width:700px){
 body.echo-kosmos #setupCard .setup-memory-storage .hardware-panel,
 body.echo-kosmos #setupCard .setup-support .hardware-panel,
 body.echo-kosmos #setupCard .setup-storage .setup-storage-drive{padding:20px}
 .hardware-board-preview{height:270px}
}
@media(max-width:440px){
 body.echo-kosmos #setupCard .setup-storage-drive .hardware-visual{height:180px}
 body.echo-kosmos #setupCard .setup-storage-drive .setup-drive-copy strong{font-size:15px}
 body.echo-kosmos #setupCard .setup-storage-drive .setup-drive-copy span{font-size:11px;line-height:1.5}
 .hardware-board-preview{height:285px}
 .detail-overlay{backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){.hardware-board-preview>img{transition:none}.hardware-board-preview:hover>img{transform:none}}

/* Memory und Library auf eine Linie: Die Ueberschrift der rechten Spalte stand im Fluss
   und schob die SSD-Karte 32 px unter die Oberkante der Memory-Karte.
   Nebeneinander sitzt sie jetzt im vorhandenen Abstand ueber der Spalte.
   Die Spalte selbst hatte overflow:hidden und haette die Ueberschrift dort
   abgeschnitten; Hintergrund und Rahmen tragen ohnehin nur die Karten darin.
   Einspaltig (bis 560 px) bleibt sie normal ueber der SSD-Karte stehen. */
@media(min-width:561px){
 body.echo-kosmos #setupCard .setup-memory-storage .setup-storage{position:relative;overflow:visible}
 body.echo-kosmos #setupCard .setup-memory-storage .setup-storage>.setup-label{position:absolute;left:0;bottom:100%;margin:0 0 6px}
}

/* ================= Kanten-System (v39) =================
   Vorher: alle Karten 1 px, aber rund 15 verschiedene Randfarben - Weiss
   mit 7 bis 11 Prozent, Themenrot mit 14 bis 42 Prozent, ein aelteres Rot,
   dazu Marken. Memory war rot, SSD und HDD grau, obwohl sie nebeneinander
   stehen.
   Jetzt: eine Breite (2 px) und drei Stufen in der Themenfarbe:
   Ruhe -> Zeigen -> Ausgewaehlt. Grosse Karten eine Stufe
   kraeftiger als die Kacheln darin.
   Markenfarben bleiben, wo sie etwas bedeuten: beim Zeigen einer
   Profilkachel sowie auf Discord-, Server-, Spotify- und GTA-Karte und am
   Player, dessen Rand aus dem Albumcover kommt. Dort aendert sich nur die
   Breite.
   Warum !important: Die alten Regeln stehen in index.html, echo-kosmos.css,
   design-upgrade.css und discord.css, teils mit ID-Selektoren. Hier gilt
   eine einzige Stelle - deshalb stehen auch alle Zeige-Zustaende hier. */
body.echo-kosmos{--kante:2px;--kante-karte:rgba(var(--echo-rgb),.30);--kante-kachel:rgba(var(--echo-rgb),.20);
  --kante-zeigen:rgba(var(--echo-rgb),.55);--kante-aktiv:rgba(var(--echo-rgb),.80)}

/* Grosse Karten */
body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard){
  border-width:var(--kante)!important;border-style:solid!important;border-color:var(--kante-karte)!important}

/* Kacheln in der Themenfarbe */
/* Ausgenommen: PC-Bild, CPU- und GPU-Feld im Setup-Kopf. Sie tragen zwar
   .setup-panel, waren aber nie Kacheln - ohne Rahmen, nur eine Trennlinie
   ueber der GPU. Mit Rahmen wurden daraus eckige Kaesten (v39, sofort behoben).
   :not() mit Liste statt dreier :not(), damit die Gewichtung gleich bleibt -
   sonst schluegen diese Regeln Auswahl, Markenfarben und seltene Achievements. */
body.echo-kosmos :is(.music-studio,.counter,
  #aboutCard .dat,#aboutCard .dos-zitat,#aboutCard .achievement,#aboutCard .bro,
  #gamesCard .game-focus,#gamesCard .gf-stat,#gamesCard .game-poster,#gamesCard .gm-summary:not(.live),
  #setupCard .setup-hero,#setupCard .setup-panel:not(.setup-storage,.setup-rig,.setup-spec),#setupCard .setup-support-card,
  #setupCard .setup-storage-drive,#setupCard .hardware-panel){
  border-width:var(--kante)!important;border-style:solid!important;border-color:var(--kante-kachel)!important}
/* Der Spielfokus ist das Hauptmotiv der Games-Karte und steht eine Stufe hoeher.
   Ueber seine eigene ID verankert: mit #gamesCard .game-focus allein war die Regel
   schwaecher als die Kachelgruppe darueber und griff nie (gemessen 0,20 statt 0,30). */
body.echo-kosmos #gamesCard #gameFocus.game-focus{border-color:var(--kante-karte)!important}
body.echo-kosmos #aboutCard .achievement.rare{border-color:rgba(var(--echo-rgb),.45)!important}

/* Profilkacheln tragen ihre Markenfarbe als Rand (Marcelos Wunsch, v39):
   Steam hellblau, PlayStation blau, Spotify gruen, Twitch lila, TikTok pink,
   OnlyFans blau, Medal limettengruen (Hausfarbe #BEF837). In Ruhe gedaempft, beim Zeigen kraeftig (weiter unten).
   --marke setzt jede Kachel selbst; TikTok hatte keine und bekommt sie hier. */
body.echo-kosmos #card .ptile{border-width:var(--kante)!important;border-style:solid!important;border-color:rgba(var(--marke),.38)!important}

/* Markenkarten: nur die Breite, die Farbe bleibt ihre eigene */
body.echo-kosmos :is(#serverCard,#steamLive,#spCard,#player,#card .gta,#card .gta-feld,#gamesCard .gm-summary.live,
  .time-weather,.time-weather .tw-visual,.time-weather .tw-detail){
  border-width:var(--kante)!important;border-style:solid!important}

/* Kein Anheben beim Zeigen auf der Profilkarte. Die Kacheln sprangen um 3 px,
   Server-, Spotify- und Steam-Karte um 2 px nach oben. Stand der Zeiger am
   unteren Rand, lag er danach ausserhalb, die Kachel sank zurueck, lag wieder
   darunter - ein Dauerflackern, solange die Maus stillhielt. Aufleuchten, Logo
   und Markenkante bleiben; nur die Flaeche bewegt sich nicht mehr. */
body.echo-kosmos #card .ptile:hover,
body.echo-kosmos #serverCard:hover,
body.echo-kosmos #spCard:hover,
body.echo-kosmos #steamLive:hover{transform:none}

/* Zeigen. Tastaturfokus zaehlt nur, wenn der Browser ihn auch zeigt:
   :focus-within blieb nach einem Mausklick stehen, bis man woanders
   hinklickte - der Rand leuchtete dann ohne Grund weiter (v41). */
body.echo-kosmos :is(#aboutCard .achievement,#aboutCard .bro,#gamesCard .game-poster,
  #setupCard .setup-panel:not(.setup-storage,.setup-rig,.setup-spec),#setupCard .setup-support-card,
  #setupCard .setup-storage-drive,#setupCard .hardware-panel):is(:hover,:focus-visible,:has(:focus-visible:not([data-fokus-still]))){
  border-color:var(--kante-zeigen)!important}
/* Profilkacheln leuchten beim Zeigen in ihrer Marke (--marke je Kachel). */
body.echo-kosmos #card .ptile.tiktok{--marke:254,44,85}
body.echo-kosmos #card .ptile:is(:hover,:focus-visible){border-color:rgba(var(--marke),.72)!important}
/* Zeigt man auf den TikTok-Knopf eines Squad-Mitglieds, tritt die Karte zurueck. */
body.echo-kosmos #aboutCard .bro:has(.bro-tt:hover){border-color:var(--kante-kachel)!important}

/* Ausgewaehlt: steht nach dem Zeigen, damit es auch beim Ueberfahren gewinnt */
/* Die Zeige-Regel erbt ueber :is() die Gewichtung ihres staerksten Selektors
   (#setupCard ...) und schlug dadurch ein ausgewaehltes Poster beim Ueberfahren.
   Die zweite Zeile ist genauso stark und steht spaeter - so gewinnt die Auswahl. */
body.echo-kosmos #gamesCard .game-poster.is-selected,
body.echo-kosmos #gamesCard .game-poster.is-selected:is(:hover,:focus-visible,:has(:focus-visible:not([data-fokus-still]))){border-color:var(--kante-aktiv)!important}

/* Der wandernde Lichtrand liegt genau auf der Kante und waechst mit. */
body.echo-kosmos .lit::before,body.echo-kosmos .lit>.lauf{inset:calc(var(--kante) * -1);padding:var(--kante)}

/* Wetter: Randfarbe folgt dem Himmel statt einem festen Weiss. */
body.echo-kosmos .time-weather{border-color:rgba(var(--tw-accent-rgb),.28)}
body.echo-kosmos .time-weather.is-expanded{border-color:rgba(var(--tw-accent-rgb),.40)}
body.echo-kosmos .time-weather:focus-visible{border-color:rgba(var(--tw-accent-rgb),.75)}
body.echo-kosmos .time-weather .tw-visual{border-color:rgba(255,255,255,.12)!important}
body.echo-kosmos .time-weather .tw-detail{border-color:rgba(var(--tw-accent-rgb),.22)!important}

/* ================= Steam-Live-Karte (v40) =================
   Steam-Blau statt Themenrot; im Spiel leuchten Status und Punkt in Steams
   Spielgruen. Das Spielbild liegt rechts und laeuft zum Text hin aus. */
body.echo-kosmos #steamLive{--st-blau:102,192,244;--st-gruen:164,208,7;--st-akzent:var(--st-blau);
  position:relative;overflow:hidden;isolation:isolate;min-height:84px;padding:14px 16px;gap:14px;
  background:linear-gradient(100deg,rgba(23,26,33,.95),rgba(27,40,56,.9) 55%,rgba(42,71,94,.6));
  border-color:rgba(var(--st-blau),.38)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
body.echo-kosmos #steamLive[data-zustand="ingame"]{--st-akzent:var(--st-gruen)}
body.echo-kosmos #steamLive:hover{border-color:rgba(var(--st-blau),.72)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 26px rgba(var(--st-blau),.22)}
#steamLive .st-kulisse{position:absolute;top:0;right:0;bottom:0;left:34%;z-index:-1;opacity:0;pointer-events:none;
  transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
#steamLive .st-kulisse img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.7) saturate(1.05)}
#steamLive .st-kulisse::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,21,30,.55),rgba(16,21,30,.05) 45%,rgba(16,21,30,.6))}
#steamLive.hat-kulisse .st-kulisse{opacity:1}
#steamLive .ico{width:56px;height:56px;border-radius:12px;overflow:visible;background:#1b2838;
  border:2px solid rgba(var(--st-akzent),.55);box-shadow:0 0 16px rgba(var(--st-akzent),.25)}
#steamLive .ico img{border-radius:10px}
#steamLive .avdot{border-color:#171a21}
#steamLive[data-zustand="online"] .avdot{background:#57cbde;box-shadow:0 0 8px #57cbde}
#steamLive[data-zustand="ingame"] .avdot{background:#a4d007;box-shadow:0 0 8px #a4d007}
#steamLive .meta{position:relative;z-index:1}
#steamLive .title{font-size:16px;gap:8px;flex-wrap:wrap;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#steamLive .st-logo{width:16px;height:16px;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(var(--st-blau),.55))}
#steamLive .st-status{padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;
  color:rgb(var(--st-akzent));background:rgba(var(--st-akzent),.12);border:1px solid rgba(var(--st-akzent),.38)}
#steamLive .st-spielzeile{margin-top:6px;gap:7px;flex-wrap:nowrap;min-width:0}
#steamLive .pulse-live{flex:0 0 auto;margin-right:0;background:#a4d007;box-shadow:0 0 8px #a4d007}
#steamLive .game-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f1f7ff;font-size:15px;font-weight:700;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
#steamLive .st-werte{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#steamLive .st-werte:empty{display:none}
#steamLive .st-wert{display:inline-flex;align-items:baseline;gap:5px;padding:4px 9px;border-radius:8px;
  background:rgba(8,12,18,.62);border:1px solid rgba(var(--st-blau),.24);font-variant-numeric:tabular-nums}
#steamLive .st-wert b{color:#fff;font-size:12.5px;font-weight:700}
#steamLive .st-wert small{color:#a9bccf;font-size:10.5px;letter-spacing:.04em}
#steamLive .st-sitzung{border-color:rgba(var(--st-gruen),.45)}
#steamLive .st-sitzung b{color:#d4f07c}
#steamLive .st-aktionen{position:relative;z-index:1;flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;gap:6px}
#steamLive .st-aktionen .join{margin-left:0;text-align:center;padding:7px 12px;font-size:12px}
@media(max-width:600px){
 body.echo-kosmos #steamLive{flex-wrap:wrap;padding:12px;gap:10px 12px}
 #steamLive .ico{width:48px;height:48px}
 #steamLive .st-kulisse{left:22%}
 #steamLive .st-aktionen{flex:1 1 100%;flex-direction:row;margin-left:0}
 #steamLive .st-aktionen .join{flex:1}
}
@media(prefers-reduced-motion:reduce){#steamLive .st-kulisse{transition:none}}

/* ================= Fokus und Anheben (v41) =================
   Squad-Karten hoben sich beim Zeigen um 6 px, Spielposter um 4 px - dieselbe
   Flackerschleife wie frueher bei den Profilkacheln. Die Vergroesserung bleibt:
   sie waechst nach aussen und kann den Zeiger nicht verlieren. Die mittlere
   Squad-Karte behaelt ihren festen Versatz. */
body.echo-kosmos #aboutCard .squad .bro:hover{transform:scale(1.02)}
body.echo-kosmos #aboutCard .squad .bro:nth-child(2):hover{transform:translateY(-8px) scale(1.02)}
body.echo-kosmos #gamesCard .game-poster:is(:hover,:focus-within){transform:none}
@media(max-width:520px){
 body.echo-kosmos #aboutCard .squad .bro:nth-child(2):hover{transform:scale(1.02)}
}
/* Tastaturrahmen der unsichtbaren Discord-Flaeche in den Squad-Karten. Der
   Standardrahmen des Browsers (outline:auto) umschliesst auch den unsichtbaren
   Tooltip darueber - das war der leere Kasten ueber der Karte. Ein normaler
   Rahmen folgt nur der Karte. */
body.echo-kosmos #aboutCard .bro .bro-link:focus-visible{outline:2px solid rgba(var(--echo-rgb),.85);outline-offset:-2px}
/* Nach Mausbedienung zurueckgegebener Fokus (ui-access.js) zeichnet keinen Rahmen. */
[data-fokus-still]:focus-visible{outline:none!important}

/* ================= Wetterleiste als Himmel (v43) =================
   Marcelos Wunsch: zugeklappt keine eigene Kachel mehr um den Himmel. Die
   Leiste IST die Wetterszene, Uhrzeit links und Temperatur rechts liegen
   darauf. Farbe und Rand kommen allein aus den Himmelsfarben (nicht aus
   dem Akzent - der ist abends rot); die dunkle,
   halbdurchsichtige Glasflaeche liess vorher die rote Seite durchscheinen.
   Die Szene wird nur anders platziert, nie versteckt - die Sonnen- und
   Mondbahn misst ihre Groesse (siehe Hinweis in index.html).
   Aufgeklappt bleibt alles wie bisher. */
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded){
  width:172px;height:50px;padding:0;border-radius:16px;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.22);
  border-color:color-mix(in srgb,var(--tw-himmel-3) 60%,transparent);
  box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 18px color-mix(in srgb,var(--tw-himmel-2) 30%,transparent)}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded):hover{border-color:color-mix(in srgb,var(--tw-himmel-3) 90%,transparent)}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded):focus-visible{border-color:#fff}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded)::before,body.echo-kosmos .time-weather.tw-klein:not(.is-expanded)::after,body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-wink{display:none}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-main{position:static;display:block;height:100%}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-visual{position:absolute;left:0;top:0;margin:0;
  /* Feste Masse statt 100 %: sonst startet der Aufklapp-Uebergang der Hoehe bei
     einem unaufloesbaren Prozentwert und die Szene springt kurz auf 4 px. */
  width:calc(172px - 2 * var(--kante,2px));height:calc(50px - 2 * var(--kante,2px));
  border-radius:inherit;border-color:transparent!important;z-index:0;
  box-shadow:inset 78px 0 34px -34px rgba(0,0,0,.34),inset 0 -18px 24px rgba(0,0,0,var(--tw-boden-schatten,.3))}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-visual::after{display:none}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-timeblock{position:relative;z-index:3;height:100%;padding:0 0 0 14px;pointer-events:none}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-clock{font-size:24px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-weather{top:50%;right:12px;transform:translateY(-50%)}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-temp{font-size:16px;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* v74: Die Wetterleiste oeffnet und schliesst als eine zusammenhaengende
   Flaeche. Vorher sprang die Hoehe zwischen 50 px und auto, die Breite hatte
   gar keinen Uebergang, und einzelne Inhalte reagierten frueher als der
   Rahmen. Die gemessene Zielhoehe kommt aus index.html. Dadurch kann auch
   ein schneller Richtungswechsel aus der aktuellen Zwischenposition weich
   weiterlaufen. */
body.echo-kosmos .time-weather{
  /* v97: Ruhiger Start statt fast voller Ausdehnung im ersten Augenblick. */
  --tw-motion:850ms;--tw-ease:cubic-bezier(.3,0,.2,1);
  box-sizing:border-box;height:50px;overflow:hidden;transform-origin:left bottom;
  transition:width var(--tw-motion) var(--tw-ease),
    height var(--tw-motion) var(--tw-ease),
    padding var(--tw-motion) var(--tw-ease),
    border-radius .75s ease,background .75s ease,border-color .6s ease,
    box-shadow .75s ease}
body.echo-kosmos .time-weather.is-expanded{
  --tw-motion:1050ms;
  width:min(337px,calc(100vw - 40px));height:var(--tw-offen-hoehe,446px)}
body.echo-kosmos .time-weather.is-animating{will-change:width,height}
body.echo-kosmos .time-weather.tw-messen{height:auto!important;transition:none!important}
body.echo-kosmos .time-weather.tw-messen *{transition:none!important;animation-play-state:paused!important}

/* Die Elemente bleiben waehrend des Zuklappens im Layout. display:none liess
   sie vorher sofort verschwinden, bevor der Rahmen seine Rueckfahrt begann. */
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-date{display:block}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-details{display:grid}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-scene-info,
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-condition{display:block}

body.echo-kosmos .time-weather .tw-date{
  max-height:18px;opacity:1;overflow:hidden;transform:none;
  transition:max-height var(--tw-motion) var(--tw-ease),opacity .65s ease,
    transform var(--tw-motion) var(--tw-ease),margin var(--tw-motion) var(--tw-ease)}
body.echo-kosmos .time-weather.tw-klein:not(.is-expanded) .tw-date{
  max-height:0;opacity:0;margin-top:0;transform:translateY(-4px)}
body.echo-kosmos .time-weather .tw-visual{
  transition:width var(--tw-motion) var(--tw-ease),
    height var(--tw-motion) var(--tw-ease),margin var(--tw-motion) var(--tw-ease)}
body.echo-kosmos .time-weather .tw-details{
  transition:max-height .8s var(--tw-ease),opacity .65s ease,
    margin .8s var(--tw-ease),padding .8s var(--tw-ease),border-color .65s ease}
body.echo-kosmos .time-weather.is-expanded .tw-details{transition-delay:.04s}
body.echo-kosmos .time-weather .tw-erde{
  transition:max-height .8s var(--tw-ease),opacity .65s ease,
    margin .8s var(--tw-ease)}
body.echo-kosmos .time-weather.is-expanded .tw-erde{transition-delay:.08s}
body.echo-kosmos .time-weather .tw-solar{
  transition:max-height .8s var(--tw-ease),opacity .65s ease,
    margin .8s var(--tw-ease)}
body.echo-kosmos .time-weather.is-expanded .tw-solar{transition-delay:.12s}
body.echo-kosmos .time-weather.is-expanded .tw-daycycle{transition-delay:.16s}
body.echo-kosmos .time-weather .tw-daycycle{
  transition:max-height .8s var(--tw-ease),opacity .65s ease,
    margin .8s var(--tw-ease),padding .8s var(--tw-ease),
    transform .8s var(--tw-ease),border-color .65s ease}
body.echo-kosmos .time-weather .tw-source{
  transition:max-height .7s var(--tw-ease),opacity .65s ease,
    margin .7s var(--tw-ease)}
body.echo-kosmos .time-weather.is-expanded .tw-source{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
  body.echo-kosmos .time-weather{transition:none}
  body.echo-kosmos .time-weather *{transition:none!important}
}

/* ================= Einheitliche Bedienung (v44) =================
   Ergebnis der Gesamtpruefung vom 18.09.2026. Vorher fielen auf: die
   3D-Knoepfe im Setup gaben beim Zeigen nur Textfarbe zurueck, die
   Setup-Unterkarten hoben sich noch an (auf dem Profil abgeschafft, weil
   es flackerte), drei Regler hatten weder Zeige- noch Tastaturrueckmeldung,
   und die Profilkarte war eine Spur runder als die anderen drei Karten. */
body.echo-kosmos #card{border-radius:24px}
/* Zeigen: gleiche Sprache wie bei allen anderen Kacheln - Rand und Schatten. */
@media(hover:hover){
 body.echo-kosmos #setupCard .hardware-visual:hover{border-color:rgba(var(--echo-rgb),.55);
   box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 18px rgba(var(--echo-rgb),.16)}
}
body.echo-kosmos #setupCard .hardware-visual{border:var(--kante) solid transparent;border-radius:14px;
  transition:border-color .25s,box-shadow .25s,color .25s}
/* Kein Anheben mehr - wie auf der Profilkarte seit v39. */
body.echo-kosmos #setupCard .setup-support-card:hover{transform:none}
/* Regler: sichtbar beim Zeigen und mit Tastatur. */
body.echo-kosmos :is(#player .seek-input,#player .vol,.studio-strength input){transition:filter .2s,box-shadow .2s}
@media(hover:hover){
 body.echo-kosmos :is(#player .seek-input,#player .vol,.studio-strength input):hover{filter:brightness(1.25)}
}
body.echo-kosmos :is(#player .seek-input,#player .vol,.studio-strength input):focus-visible{outline:2px solid rgba(var(--echo-rgb),.85);outline-offset:3px}
/* Kleine Knoepfe im Player und der Fussnoten-Link hatten keinen Rahmen. */
body.echo-kosmos :is(#player .pskip,#player .pico,#aboutCard .fuss-link):focus-visible{outline:2px solid rgba(var(--echo-rgb),.85);outline-offset:3px;border-radius:9px}

/* v50: Spieldetails als dunkles Glas mit klar abgesetzten Datenfeldern. */
body.echo-kosmos #detailGallery{background:rgba(2,3,6,.48);backdrop-filter:blur(16px) saturate(1.15)}
body.echo-kosmos #detailGallery .detail-window{background:linear-gradient(135deg,rgba(var(--echo-rgb),.12),transparent 38%),rgba(8,10,14,.78);border:1px solid rgba(var(--echo-rgb),.28);box-shadow:inset 0 1px rgba(255,255,255,.16),0 35px 100px #0009;color:var(--text);animation:detailGlasEin .5s cubic-bezier(.2,.8,.2,1)}
body.echo-kosmos #detailGallery .game-detail-layout{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);align-items:start;gap:24px}
body.echo-kosmos #detailGallery .game-detail-art{border:1px solid #ffffff26;box-shadow:0 16px 40px #0007;max-height:360px}
body.echo-kosmos #detailGallery .detail-stats{gap:10px}
body.echo-kosmos #detailGallery .detail-stats>div{padding:16px;border:1px solid rgba(var(--echo-rgb),.14);border-radius:14px;background:linear-gradient(145deg,#ffffff09,#ffffff02);box-shadow:inset 0 1px #ffffff08}
body.echo-kosmos #detailGallery .detail-stats strong{font-size:clamp(23px,3vw,32px);color:var(--text);font-variant-numeric:tabular-nums}
body.echo-kosmos #detailGallery .achievement-detail progress{accent-color:rgb(var(--echo-rgb))}
body.echo-kosmos #detailGallery :is(.detail-stats small,.detail-source,.achievement-detail>span,.achievement-detail small){font-size:12px;line-height:1.5;color:var(--muted)}
body.echo-kosmos #detailGallery .detail-links a{background:rgba(var(--echo-rgb),.09);border-color:rgba(var(--echo-rgb),.25);color:var(--text);transition:background .25s,box-shadow .25s}
@media(hover:hover){
 body.echo-kosmos #detailGallery .detail-links a:hover{background:rgba(var(--echo-rgb),.18);box-shadow:0 0 22px rgba(var(--echo-rgb),.12)}
}
@keyframes detailGlasEin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:620px){
 body.echo-kosmos #detailGallery{backdrop-filter:none;background:#030407c9}
 body.echo-kosmos #detailGallery .detail-window{background:linear-gradient(135deg,rgba(var(--echo-rgb),.07),transparent 55%),#0a0c10;padding:20px}
 body.echo-kosmos #detailGallery .game-detail-layout{grid-template-columns:1fr;gap:18px}
 body.echo-kosmos #detailGallery .game-detail-art{height:180px}
 body.echo-kosmos #detailGallery .detail-stats>div{padding:12px}
}
@media(prefers-reduced-motion:reduce){body.echo-kosmos #detailGallery .detail-window{animation:none}}

/* Gemeinsame Datenzustaende: keine Null als Ersatz fuer einen Ausfall. */
.data-retry{min-height:44px;margin:12px 0 0;padding:10px 18px;display:block;border:1px solid rgba(var(--echo-rgb),.3);border-radius:12px;color:var(--text);background:rgba(var(--echo-rgb),.09);font:600 13px 'Rajdhani',sans-serif;cursor:pointer}
.data-retry:focus-visible{outline:2px solid rgb(var(--echo-rgb));outline-offset:3px}
.counter-status{position:fixed;right:22px;bottom:66px;z-index:80;max-width:min(290px,calc(100vw - 44px));padding:12px 15px;background:#080b10f5;border:1px solid rgba(var(--echo-rgb),.25);border-radius:12px;color:var(--text);font:13px/1.5 'Rajdhani',sans-serif;opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .2s,transform .2s}
.counter-status[data-visible="true"],body:has(#likeBtn:focus-visible) .counter-status{opacity:1;transform:none}
#likeBtn[aria-busy="true"]{opacity:.55;cursor:progress}
#likeBtn[data-state="unknown"] .zahl{opacity:.7}

/* ================= Klarer Profilkopf (v92) =================
   Ein ruhiger Porträtrahmen und präzise Abstände tragen die Identität.
   Keine zusätzliche Faktenbox und keine dauerhafte Effektanimation. */
/* v102: Der Musikimpuls liegt absichtlich ausserhalb der Kartenkontur.
   Nur Innenlagen (Profilkopf, Eintrittslicht) schneiden ihren Inhalt ab;
   overflow:hidden an der gesamten Karte verschluckt alle Bassringe. */
body.echo-kosmos #card{overflow:visible;isolation:isolate}
body.echo-kosmos #card .profile-dossier{position:relative;isolation:isolate;margin:-5px 0 0;
  padding:0 0 14px;border:0;overflow:hidden}

body.echo-kosmos #card .profile-hero{display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;padding:22px 7px 0}
body.echo-kosmos #card .profile-identity{min-width:0;text-align:center}
body.echo-kosmos #card .profile-identity .av-wrap{width:140px;height:140px;margin:0 auto 18px}
body.echo-kosmos #card .profile-identity .avatar{width:140px;height:140px}
body.echo-kosmos #card .profile-identity .av-deco{width:175px;height:175px}
body.echo-kosmos #card .profile-identity .av-wrap::before{content:"";position:absolute;inset:-12px;
  border:1px solid rgba(var(--echo-rgb),.12);border-top-color:rgba(var(--echo-rgb),.55);
  border-bottom-color:rgba(var(--echo-rgb),.32);border-radius:50%;transform:rotate(-32deg);
  pointer-events:none}
body.echo-kosmos #card .profile-identity .name{display:flex;align-items:center;justify-content:center;
  gap:17px;font-size:58px;line-height:1.12;margin-top:0}
body.echo-kosmos #card .profile-identity .name-emote{width:34px;height:34px;margin:0;flex:0 0 auto}
body.echo-kosmos #card .profile-identity .handle{display:flex;justify-content:center;align-items:center;
  gap:8px;margin-top:10px;line-height:1.2;letter-spacing:.015em}
body.echo-kosmos #card .profile-identity .cross-emote{width:21px;height:24px;margin:0 3px;flex:0 0 auto}
body.echo-kosmos #card .profile-identity .handle-copy{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:36px;padding:7px 12px;border:1px solid rgba(var(--echo-rgb),.2);border-radius:999px;
  background:rgba(var(--echo-rgb),.035);color:var(--text);transition:background .2s,border-color .2s}
body.echo-kosmos #card .profile-identity .handle-copy svg{width:13px;height:13px;opacity:.65;flex-shrink:0}
body.echo-kosmos #card .profile-identity .tag{margin:0;min-height:36px;padding:7px 11px;border-radius:999px;
  background:transparent;border-color:rgba(var(--echo-rgb),.26);letter-spacing:.08em;font-size:11px}
body.echo-kosmos #card .profile-identity .bio-line{font-size:13px;margin-top:13px;letter-spacing:.055em}
body.echo-kosmos #card .profile-identity .status-line{margin-top:7px;font-size:13px;letter-spacing:.025em}
@media(hover:hover) and (pointer:fine){
  body.echo-kosmos #card .profile-identity .handle-copy:hover{background:rgba(var(--echo-rgb),.09);
    border-color:rgba(var(--echo-rgb),.5)}
}


@media(max-width:520px){
  body.echo-kosmos #card .profile-hero{padding:17px 0 0}
  body.echo-kosmos #card .profile-identity .av-wrap,
  body.echo-kosmos #card .profile-identity .avatar{width:128px;height:128px}
  body.echo-kosmos #card .profile-identity .av-deco{width:160px;height:160px}
  body.echo-kosmos #card .profile-identity .av-wrap{margin-bottom:15px}
  body.echo-kosmos #card .profile-identity .av-wrap::before{inset:-9px}
  body.echo-kosmos #card .profile-identity .name{font-size:48px}
  body.echo-kosmos #card .profile-identity .handle{gap:5px;font-size:14px}
  body.echo-kosmos #card .profile-identity .handle-copy,
  body.echo-kosmos #card .profile-identity .tag{min-height:44px}
  body.echo-kosmos #card .profile-identity .cross-emote{width:17px;height:21px;margin:0 1px}
  body.echo-kosmos #card .profile-identity .handle-copy{padding:7px 9px;gap:6px}
  body.echo-kosmos #card .profile-identity .tag{padding:7px 9px}
}

/* ================= Gemeinsames Karten-Designsystem (v79) =================
   Profile, About, Games und Setup gehoeren sichtbar zu derselben Seite.
   Das System vereinheitlicht Material, Kopfzeilen, Kapitelmarken und
   Innenkarten. Die vier Bereiche behalten trotzdem ihre eigene Aufgabe:
   Identitaet, Akte, Sammlung und Hardware-Labor. */
body.echo-kosmos #card,
body.echo-kosmos #aboutCard,
body.echo-kosmos #gamesCard.games-gallery,
body.echo-kosmos #setupCard{
  --akten-kante:rgba(207,218,232,.22);
  --akten-flaeche:rgba(3,5,8,.82);
  --akten-innen:rgba(2,4,7,.67);
  padding:30px;border:1px solid var(--akten-kante);border-radius:22px;
  background:
    radial-gradient(ellipse 58% 34% at 92% 0%,rgba(var(--echo-rgb),.075),transparent 72%),
    radial-gradient(ellipse 36% 28% at 4% 96%,rgba(204,220,239,.035),transparent 76%),
    linear-gradient(152deg,rgba(13,16,21,.88),rgba(2,3,5,.91) 44%,rgba(0,1,2,.92));
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:
    0 34px 94px rgba(0,0,0,.72),
    0 0 0 1px rgba(0,0,0,.72),
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -45px 90px rgba(0,0,0,.18);
}
body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard)::before{
  content:"";position:absolute;z-index:2;left:24px;right:24px;top:0;height:1px;
  pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(236,244,255,.7) 20%,rgba(var(--echo-rgb),.68) 48%,transparent 82%);
  opacity:.72
}
/* v87: Nur Inhalte anheben. Rand- und Musiklagen muessen absolut die ganze
   Karte belegen; als relative Inline-Spans wurden sie zur Linie ueber dem Avatar. */
body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard)>:not(.lauf,.beatwave,.entersheen,.glowlayer,.beatglow,.beatglow2){position:relative;z-index:3}

/* v91: Inhaltliche Ueberschriften bleiben, dekorative Aktennummern entfallen. */
body.echo-kosmos :is(#aboutCard .dos-marker,#gamesCard .area-marker,#setupCard .setup-chapter){
  display:flex;align-items:center;gap:9px;margin:23px 0 12px;color:rgba(211,221,234,.65);
  font:850 10px/1.2 'Rajdhani',"Segoe UI",system-ui,sans-serif;letter-spacing:.17em;
  text-align:left;text-transform:uppercase}
body.echo-kosmos :is(#gamesCard .area-marker,#setupCard .setup-chapter)>i{height:1px;flex:1 1 auto;
  background:linear-gradient(90deg,rgba(var(--echo-rgb),.36),rgba(255,255,255,.06) 58%,transparent)}
body.echo-kosmos #gamesCard .area-marker>em,
body.echo-kosmos #setupCard .setup-chapter>span:last-child{color:rgba(211,221,234,.42);font-size:8px;font-style:normal;white-space:nowrap}
body.echo-kosmos #setupCard .setup-subchapter{margin-top:24px}

/* Games: Kopf als Sammlungsdeckel mit eigenem Datensiegel. */
body.echo-kosmos #gamesCard .collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 4px;padding:2px 0 16px;border-bottom:1px solid rgba(255,255,255,.075);text-align:left}
body.echo-kosmos #gamesCard .collection-heading-copy{min-width:0}
body.echo-kosmos #gamesCard.games-gallery .collection-heading .about-title{margin:0;font-size:clamp(34px,5vw,50px)}
body.echo-kosmos #gamesCard.games-gallery .collection-heading #gmLead{margin:9px 0 0}
body.echo-kosmos #gamesCard .area-marker+.game-focus{margin-top:0}
body.echo-kosmos #gamesCard .game-filters>.gallery-eyebrow{display:flex;align-items:center;gap:9px}
body.echo-kosmos #gamesCard .game-filters>.gallery-eyebrow::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(var(--echo-rgb),.36),transparent)}

/* Setup: Header und Kapitel wirken wie ein technisches Datenblatt. */
body.echo-kosmos #setupCard .setup-heading{margin:0;padding:2px 0 20px;border-bottom:1px solid rgba(255,255,255,.075)}
body.echo-kosmos #setupCard .setup-build-link{width:auto;min-width:162px;margin:0;padding:12px 14px;
  background:linear-gradient(145deg,rgba(var(--echo-rgb),.10),rgba(255,255,255,.025));
  border-color:rgba(205,219,236,.16);box-shadow:inset 0 1px rgba(255,255,255,.07)}
body.echo-kosmos #setupCard .setup-title{letter-spacing:-.045em}
body.echo-kosmos #setupCard .setup-chapter:first-of-type{margin-top:24px}

/* Einheitliches schwarzes Glas fuer alle Innenkarten. Markenfarben und
   Spielbilder bleiben erhalten, damit Funktion und Bedeutung sichtbar sind. */
body.echo-kosmos #gamesCard :is(.game-focus,.gm-summary,.game-poster,.career-grid button),
body.echo-kosmos #setupCard :is(.setup-panel,.setup-support-card,.hardware-panel){
  border-color:rgba(202,215,232,.14);
  background-color:var(--akten-innen);
  box-shadow:inset 0 1px rgba(255,255,255,.065),0 14px 34px rgba(0,0,0,.18)}
body.echo-kosmos #gamesCard .gm-summary,
body.echo-kosmos #gamesCard .career-grid button{
  background-image:linear-gradient(145deg,rgba(var(--echo-rgb),.065),transparent 58%)}
body.echo-kosmos #setupCard :is(.setup-panel,.setup-support-card,.hardware-panel){
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
    radial-gradient(ellipse at 80% 0%,rgba(var(--echo-rgb),.055),transparent 55%);
  background-size:28px 28px,28px 28px,auto}
body.echo-kosmos #setupCard .setup-storage-drive+.setup-storage-drive,
body.echo-kosmos #setupCard .setup-device+.setup-device{border-top-color:rgba(210,222,238,.09)}

/* Die Glasflaechen reagieren nur, wenn sie auch bedienbar sind. */
@media(hover:hover){
  body.echo-kosmos #aboutCard :is(button.dat,.dos-zitat):hover,
  body.echo-kosmos #gamesCard :is(.game-poster,.career-grid button):hover,
  body.echo-kosmos #setupCard :is(a.setup-build-link,button.hardware-visual):hover{
    border-color:rgba(var(--echo-rgb),.5);box-shadow:inset 0 1px rgba(255,255,255,.10),0 16px 34px rgba(0,0,0,.3),0 0 20px rgba(var(--echo-rgb),.10)}
}

@media(max-width:700px){
  body.echo-kosmos #card,
  body.echo-kosmos #aboutCard,
  body.echo-kosmos #gamesCard.games-gallery,
  body.echo-kosmos #setupCard{padding:24px 20px}
}
@media(max-width:520px){
  body.echo-kosmos #card,
  body.echo-kosmos #aboutCard,
  body.echo-kosmos #gamesCard.games-gallery,
  body.echo-kosmos #setupCard{padding:20px 14px;border-radius:19px;
    -webkit-backdrop-filter:none;backdrop-filter:none;background:
      radial-gradient(ellipse 70% 28% at 92% 0%,rgba(var(--echo-rgb),.065),transparent 75%),#030507}
  body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard)::before{left:14px;right:14px}
  body.echo-kosmos #gamesCard .collection-heading{align-items:center;gap:10px;padding-bottom:14px}
  body.echo-kosmos #setupCard .setup-heading{gap:13px}
  body.echo-kosmos #setupCard .setup-build-link{min-width:0}
  body.echo-kosmos :is(#aboutCard .dos-marker,#gamesCard .area-marker,#setupCard .setup-chapter){margin-top:19px}
  body.echo-kosmos #gamesCard .area-marker>em,
  body.echo-kosmos #setupCard .setup-chapter>span:last-child{display:none}
}
@media(max-width:380px){
  body.echo-kosmos #setupCard .setup-heading{display:grid;grid-template-columns:1fr}
  body.echo-kosmos #setupCard .setup-build-link{width:100%}
}