/* v52: Gestaltung sagt, was bedienbar ist. Nach den Themenstilen laden.
   Informationsflächen behalten ihr Material; nur echte Öffner antworten
   auf Zeigen und Tastaturfokus. Markenfarben bleiben erhalten. */
body.echo-kosmos :is(#aboutCard .dat:not(button),#aboutCard .achievement:not(.egg-trigger),
  #aboutCard .dos-zitat:not(.egg-trigger),#setupCard .setup-panel,
  #setupCard .setup-support-card,#setupCard .hardware-panel,#serverCard,#steamLive){cursor:inherit!important}

/* Datenfelder: der Eintritt bleibt animiert, die fertige Information ruht. */
body.echo-kosmos #aboutCard .dos-daten .dat:not(button):hover{
  transform:none;border-color:var(--kante-kachel)!important}
body.echo-kosmos #aboutCard .dat:not(button):hover::before{transform:scaleX(0)}
body.echo-kosmos #aboutCard .ach .achievement:not(.egg-trigger):hover{
  transform:none;background:rgba(0,0,0,.34);border-color:var(--kante-kachel)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body.echo-kosmos #aboutCard .ach .achievement.rare:not(.egg-trigger):hover{
  border-color:rgba(var(--echo-rgb),.45)!important}
body.echo-kosmos #aboutCard .achievement:not(.egg-trigger):not(.rare)::before{content:none}
body.echo-kosmos #aboutCard .achievement.rare:not(.egg-trigger):hover::before{left:0}
/* „Unlocked“ ist Information und braucht keinen versteckten Hoverzustand. */
body.echo-kosmos #aboutCard .achievement:not(.egg-trigger) .ach-status{
  opacity:1;transform:none;font-size:10px;letter-spacing:.05em}

/* Das Gehäuse ist kein Knopf. Der abgegrenzte 3D-Öffner bleibt bedienbar. */
body.echo-kosmos #setupCard :is(.setup-panel:not(.setup-storage,.setup-rig,.setup-spec),
  .setup-support-card,.setup-storage-drive,.hardware-panel):is(:hover,:focus-visible,:has(:focus-visible:not([data-fokus-still]))){
  transform:none;border-color:var(--kante-kachel)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
body.echo-kosmos #setupCard .setup-panel:hover::after{opacity:.35}
body.echo-kosmos #setupCard .setup-displays:hover .setup-screen>i::after{transform:none}
body.echo-kosmos #setupCard .hardware-visual::after{content:"EXPLORE COMPONENT  +";font-size:11px;letter-spacing:.08em}
body.echo-kosmos #setupCard .hardware-board-preview::after{content:"OPEN 3D EXPLORER  +"}
/* Die alte Zweispalten-Illustration darf die neue 3D-Vorschau nicht
   auf eine halbe Spalte verengen. Gleiche Familie wie Board und Netzteil. */
body.echo-kosmos #setupCard .setup-support .setup-cooling.hardware-panel{display:block}

/* Server- und Steam-Karte: Informationen außen, Linkaktionen innen. */
body.echo-kosmos #serverCard:hover{border-color:rgba(120,130,250,.4);box-shadow:none;transform:none}
body.echo-kosmos #steamLive:hover{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);transform:none}
body.echo-kosmos #steamLive:hover .join:not(:hover){filter:none}

/* Enthüllte Easter Eggs und Komponentenöffner sprechen dieselbe Sprache. */
body.echo-kosmos :is(.egg-trigger,.hardware-visual){cursor:pointer!important}
body.echo-kosmos :is(.egg-trigger,.hardware-visual):focus-visible{
  outline:2px solid var(--echo-light);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  body.echo-kosmos #aboutCard .egg-trigger:is(:hover,:focus-visible){
    border-color:var(--kante-zeigen)!important;box-shadow:0 0 18px rgba(var(--echo-rgb),.12)}
  body.echo-kosmos #setupCard .hardware-visual:is(:hover,:focus-visible){
    border-color:var(--kante-zeigen);box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 18px rgba(var(--echo-rgb),.14)}
}

/* Kleine Geräte behalten Farben, Symbole und Hierarchie. Der ruhigere
   Hintergrund stammt weiterhin aus mobile-budget.css und dem jeweiligen
   Theme. Hier wachsen nur Lesbarkeit und die tatsächlichen Trefferflächen. */
@media(max-width:620px),(pointer:coarse){
  body.echo-kosmos .game-filter-buttons button{font-size:12px;min-height:44px;padding:11px 12px}
  body.echo-kosmos :is(.poster-details,.hardware-tabs button,.studio-modes button){min-height:44px;font-size:12px}
  body.echo-kosmos :is(.detail-close,.ext-close){width:44px;height:44px;min-width:44px;min-height:44px}
  body.echo-kosmos #player :is(.pico,.pskip,.mute,.pp){width:44px;height:44px;min-width:44px;min-height:44px}
  body.echo-kosmos #player .mute{flex-basis:44px}
  body.echo-kosmos #player .seek-input{height:44px;top:50%;bottom:auto;transform:translateY(-50%)}
  body.echo-kosmos #gamesCard .gm-summary-copy small{font-size:11px;letter-spacing:.06em}
  body.echo-kosmos #gamesCard .gm-summary-copy em{font-size:11px}
  body.echo-kosmos :is(.poster-copy small,.career-grid small,.studio-strength,.studio-fade,
    .studio-motion-note,#aboutCard .ach-txt small,#aboutCard .dat-k){font-size:11px;line-height:1.5}
  body.echo-kosmos #setupCard :is(.setup-device div>span,.setup-maker,.setup-chapter>span:last-child,
    .hardware-caption,.hardware-preview-badge){font-size:11px;letter-spacing:.07em;line-height:1.5}
  /* Keine nach dem Tippen stehenbleibenden Vergrößerungen. */
  body.echo-kosmos #aboutCard :is(.achievement,.dat):hover,
  body.echo-kosmos #setupCard .hardware-visual:hover .hw-model,
  body.echo-kosmos #setupCard .hardware-board-preview:hover>img,
  body.echo-kosmos .poster-select:hover img{transform:none}
}

/* Native Bedienelemente behalten die vorhandene Gestaltung. */
body.echo-kosmos button.av-wrap{display:block;padding:0;border:0;background:transparent;font:inherit;color:inherit}
/* Profilkopf ohne weißen Hof. Die dunklen Zierbilder bekommen nur eine
   scharfe Außenkontur; ihre Originalfarben und Gengar-Augen bleiben erhalten. */
body.echo-kosmos #card .profile-identity :is(.avatar,.avatar:hover,.name){
  box-shadow:none!important;text-shadow:none!important;filter:none!important;
}
body.echo-kosmos #card .profile-identity :is(.cross-emote,.name-emote){
  box-shadow:none!important;text-shadow:none!important;
  filter:drop-shadow(.65px 0 0 rgba(var(--echo-rgb),.6))
    drop-shadow(-.65px 0 0 rgba(var(--echo-rgb),.6))
    drop-shadow(0 .65px 0 rgba(var(--echo-rgb),.6))
    drop-shadow(0 -.65px 0 rgba(var(--echo-rgb),.6))!important;
}
body.echo-kosmos #card .profile-identity .avatar{border:2px solid rgba(var(--echo-rgb),.38)}
body.echo-kosmos #card .profile-identity .statusdot{box-shadow:none!important}
body.echo-kosmos button.tag{font-family:inherit;min-width:44px;min-height:32px}
body.echo-kosmos .navhome,body.echo-kosmos .back-btn{text-decoration:none}
body.echo-kosmos #aboutCard button.achievement{width:100%;text-align:left;font-family:inherit;color:inherit}
body.echo-kosmos #aboutCard .achievement.egg-trigger .ach-status{opacity:1;transform:none;font-size:12px;letter-spacing:.03em}
/* Freigestellte Originalzeichen ohne Trägerfläche. Nichts färbt Marke oder
   Abzeichen um; die Originalfarben stehen direkt auf Schwarz. */
body.echo-kosmos #aboutCard .ach-icon.ach-original{width:40px;height:40px;overflow:visible;
  border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
body.echo-kosmos #aboutCard .ach-original img{display:block;width:100%;height:100%;object-fit:contain;
  filter:none!important;opacity:1;mix-blend-mode:normal;transform:none}
/* Die Flagge behält ihr Originalformat; das Adlerwappen braucht etwas Breite. */
body.echo-kosmos #aboutCard .ach-original[data-mark="polska"]{width:46px}
@media(max-width:620px){
  body.echo-kosmos #aboutCard .ach-icon.ach-original{width:36px;height:36px}
}
body.echo-kosmos #aboutCard .dos-zitat{padding-right:60px}
.motto-secret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:1px solid var(--kante-kachel);border-radius:12px;background:rgba(0,0,0,.35);color:var(--text);font-size:24px;cursor:pointer}
.motto-secret:focus-visible{outline:2px solid var(--echo-light);outline-offset:2px}
body.echo-kosmos .career-grid .career-action{display:block;margin-top:15px;font:600 12px/1.5 'Rajdhani',sans-serif;color:var(--acc-pale)}
body.echo-kosmos .hardware-preview-badge i{font-style:normal;font-size:15px;margin-right:4px}

/* Leseflächen bleiben Glas. Die dunkle Grundierung schützt die Schrift
   auch vor einer hellen Stelle im bewegten Wallpaper. */
body.echo-kosmos{--ui-ink:#090d14;--ui-copy:#edf1f7;--ui-secondary:#bdc7d5;--ui-glass:rgba(9,11,15,.84)}
body.echo-kosmos #card{background:var(--ui-glass)}
body.echo-kosmos :is(.handle,.bio-line,.status-line){color:var(--ui-secondary)}
body.echo-kosmos #aboutCard :is(.dat-k,.dat-sub,.ach-txt small,.zit-kick){color:var(--ui-secondary)}
body.echo-kosmos #gamesCard .gf-stat{background:rgba(3,5,9,.88)}
body.echo-kosmos #gamesCard .gf-stat small{color:var(--ui-secondary)}
body.echo-kosmos #gamesCard .gf-stat small{font-size:11px}
body.echo-kosmos #detailGallery .detail-window{background:linear-gradient(135deg,rgba(var(--echo-rgb),.08),transparent 38%),var(--ui-glass)}
body.echo-kosmos #detailGallery :is(.detail-stats small,.achievement-detail>span,.achievement-detail small,.detail-source){color:var(--ui-secondary)}
body.echo-kosmos #extGo{color:var(--ui-ink);background:linear-gradient(135deg,#edf2fa,#9dabbe);text-shadow:none}
body.echo-kosmos #extGo:hover{filter:none}
body.echo-kosmos #extGo:focus-visible{outline:2px solid var(--echo-light);outline-offset:4px}

/* Auch Tablets mit grobem Zeiger erhalten die leichte Version derselben
   Materialfamilie. Kein zusätzlicher Blur, keine neue Daueranimation. */
@media(max-width:620px),(pointer:coarse){
  body.echo-kosmos{--ui-glass:rgba(9,11,15,.95)}
  body.echo-kosmos #detailGallery .detail-window{background:linear-gradient(135deg,rgba(var(--echo-rgb),.05),transparent 38%),var(--ui-glass)}
  body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard,.nav,.back-btn,.counter,.gf-stat,.gf-nav,.gf-open,#extLink,.ext-box,#egg,.egg-close){
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.echo-kosmos button.tag{min-height:44px}
  body.echo-kosmos #aboutCard .achievement .ach-status{display:none}
  body.echo-kosmos #aboutCard .achievement.egg-trigger .ach-status{display:block}
}

/* v75: Profil und Dossier sind jetzt echte dunkle Glasscheiben. Die bisherige
   fast deckende Grundierung wirkte auf dem Kosmos wie eine graue Platte.
   Mehrere ruhige Lichtlagen geben Tiefe, ohne eine neue Daueranimation. */
body.echo-kosmos :is(#card,#aboutCard){
  background:
    linear-gradient(152deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 18%,transparent 38%),
    radial-gradient(ellipse at 86% 4%,rgba(var(--echo-rgb),.055),transparent 36%),
    linear-gradient(165deg,rgba(2,5,10,.27),rgba(0,2,5,.17) 54%,rgba(0,0,0,.3));
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-color:rgba(202,215,232,.34)!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(var(--echo-rgb),.08),
    0 0 0 1px rgba(0,0,0,.28);
}

/* Die vorhandenen Konturlagen werden zur Fensterspiegelung: oben links klar,
   an der Unterkante nur ein Hauch der Themenfarbe. */
body.echo-kosmos #card::before{
  background:linear-gradient(142deg,
    rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 17%,transparent 36%,
    transparent 70%,rgba(var(--echo-rgb),.24) 100%);
  opacity:.72;
}
body.echo-kosmos #aboutCard::after{
  opacity:.11;
  background:
    linear-gradient(138deg,rgba(255,255,255,.18),transparent 15% 78%,rgba(var(--echo-rgb),.12)),
    radial-gradient(ellipse 300px 190px at 108% 5%,transparent 64%,rgba(var(--echo-rgb),.72) 64.4% 64.7%,transparent 65%),
    radial-gradient(ellipse 310px 210px at -12% 96%,transparent 64%,rgba(var(--echo-rgb),.65) 64.4% 64.7%,transparent 65%);
}

/* Mobil bleibt dieselbe Materialfamilie sichtbar, aber ohne den teuren Blur.
   Die etwas dichtere Tönung hält Schrift vor dem bewegten Kosmos lesbar. */
@media(max-width:620px),(pointer:coarse){
  body.echo-kosmos :is(#card,#aboutCard){
    background:
      linear-gradient(150deg,rgba(255,255,255,.045),transparent 28%),
      linear-gradient(165deg,rgba(5,8,13,.72),rgba(1,2,5,.65));
    border-color:rgba(202,215,232,.3)!important;
    box-shadow:0 22px 58px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(var(--echo-rgb),.07);
  }
}

/* v76: Das Dossier-Material der About-Seite wird zum Designsystem der
   gesamten Website. Jede Hauptseite liegt nun hinter derselben dunklen
   Fensterscheibe; Unterschiede entstehen nur noch durch Inhalt und Akzent. */
body.echo-kosmos{
  --ds-flaeche:rgba(1,3,7,.43);
  --ds-flaeche-stark:rgba(1,2,5,.62);
  --ds-linie:rgba(202,215,232,.2);
  --ds-linie-stark:rgba(202,215,232,.34);
  --ds-licht:rgba(255,255,255,.12);
  --ds-radius:14px;
  --ds-schatten:inset 0 1px 0 var(--ds-licht),0 12px 32px rgba(0,0,0,.2);
}

/* Games und Setup erhalten dieselbe klare Scheibe wie Profil und About.
   Die genaueren Selektoren schlagen die alten vollschwarzen Sonderregeln. */
body.echo-kosmos #gamesCard.games-gallery,
body.echo-kosmos #setupCard.setup-showcase{
  background:
    linear-gradient(152deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 18%,transparent 38%),
    radial-gradient(ellipse at 86% 4%,rgba(var(--echo-rgb),.055),transparent 36%),
    linear-gradient(165deg,rgba(2,5,10,.27),rgba(0,2,5,.17) 54%,rgba(0,0,0,.3));
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-color:var(--ds-linie-stark)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(var(--echo-rgb),.08),
    0 0 0 1px rgba(0,0,0,.28);
}

/* Gemeinsame Innenflaechen: identische Tiefe, Radien und Linien wie die
   Karten im Dossier. Bilder und Markenlogos bleiben dabei unveraendert. */
body.echo-kosmos :is(
  #card .ptile,#card #serverCard,#card #player,
  #aboutCard .dos-zitat,#aboutCard .achievement,#aboutCard .dat,#aboutCard .bro,
  #gamesCard .gf-stat,#gamesCard .gm-summary,#gamesCard .game-poster,#gamesCard .career-grid button,
  #setupCard .setup-panel:not(.setup-rig,.setup-spec),#setupCard .hardware-panel,#setupCard .setup-storage-drive,#setupCard .setup-build-link){
  border-radius:var(--ds-radius);
}

/* v91: Die Markenfarben behalten den Kontrast der veroeffentlichten Seite. */
body.echo-kosmos #card .ptile{
  background:linear-gradient(100deg,rgba(var(--marke),.07),rgba(0,0,0,.34) 55%,rgba(var(--marke),.11));
  border-color:rgba(var(--marke),.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.echo-kosmos #card .ptile.tiktok{
  background:linear-gradient(100deg,rgba(37,244,238,.10),rgba(0,0,0,.30) 42%,rgba(254,44,85,.14));
}
body.echo-kosmos #card .ptile::before{opacity:.5}
@media(hover:hover) and (pointer:fine){
  body.echo-kosmos #card .ptile:hover{
    background:linear-gradient(100deg,rgba(var(--marke),.10),rgba(0,0,0,.28) 55%,rgba(var(--marke),.15));
    border-color:rgba(var(--marke),.72)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 26px rgba(var(--marke),.3);
  }
  body.echo-kosmos #card .ptile:hover::before{opacity:.9}
}
body.echo-kosmos #card .ptile:focus-visible{
  border-color:rgba(var(--marke),.72)!important;
  box-shadow:0 0 18px rgba(var(--marke),.22);
  outline:2px solid rgb(var(--marke));outline-offset:3px;
}
body.echo-kosmos #card #serverCard{
  background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 35%),rgba(4,6,13,.48);
}
/* v89: Farbwirkung direkt von der Hauptseite uebernommen. Das Originalcover
   liefert mehrere Toene und ihre raeumliche Verteilung; eine einzelne
   analysierte Farbe kann dieses Ambiente nicht ersetzen. */
body.echo-kosmos #card #player{
  /* Das vergroesserte Cover darf beim Fokussieren der Titelliste keinen
     unsichtbaren Scrollbereich erzeugen und dadurch den Kopf verschieben. */
  overflow:clip;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(0,0,0,.42));
  border-color:rgba(var(--sp-accent-rgb,183,185,193),.32)!important;
  box-shadow:var(--ds-schatten);
  transition:border-color 1s ease;
}
body.echo-kosmos #card #player::before{
  background:linear-gradient(160deg,rgba(var(--glow-rgb),.14),rgba(0,0,0,.62) 62%);
}
/* v84: Cover und Titel bilden eine ruhige Einheit. Der Akzent bleibt an
   der kleinen Kontur; klare Oberflaeche ohne Nebel oder helle Aussenränder. */
body.echo-kosmos #player .phead{gap:16px;min-height:78px;padding:4px 2px 12px;border-bottom:1px solid rgba(220,228,238,.09)}
body.echo-kosmos #player .pcov-wrap{width:70px;height:70px;border-radius:18px;isolation:isolate}
body.echo-kosmos #player .pcover{width:100%;height:100%;border-radius:inherit;
  border:1px solid rgba(var(--sp-accent-rgb,180,185,194),.5);
  box-shadow:0 5px 12px rgba(0,0,0,.35);transform:none;transition:none}
body.echo-kosmos #player .pcov-ring{inset:-3px;border-radius:21px;border:1px solid rgb(var(--sp-accent-rgb,180,185,194));
  opacity:0;transition:opacity .12s linear;box-shadow:none;animation:none;z-index:3}
body.echo-kosmos #player .pcov-ring::after{content:none;animation:none}
body.echo-kosmos #player .pmeta{flex:0 1 auto;min-width:0;max-width:36%;display:flex;flex-direction:column;gap:7px}
body.echo-kosmos #player .pstate{display:flex;align-items:center;gap:7px;min-height:12px;
  color:#a7aeb9;font:600 9px/1.3 system-ui,sans-serif;letter-spacing:.17em;white-space:nowrap}
body.echo-kosmos #player .pstate-dot{width:4px;height:4px;flex:none;border-radius:50%;background:currentColor;opacity:.55}
body.echo-kosmos #player .pstate[data-state="playing"]{color:#d4d9df}
body.echo-kosmos #player .pstate[data-state="playing"] .pstate-dot{opacity:1;background:rgb(var(--sp-accent-rgb,180,185,194))}
body.echo-kosmos #player .ptitle-stage{position:relative;min-width:0;overflow:hidden}
body.echo-kosmos #player .ptitle-wrap{min-width:0;mask-image:none;-webkit-mask-image:none}
body.echo-kosmos #player .ptitle-wrap.is-overflow{mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 12px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 12px),transparent)}
body.echo-kosmos #player .ptitle{font:650 15px/1.4 system-ui,sans-serif;letter-spacing:.015em;color:#f5f6f8}
body.echo-kosmos #player .ptitle.roll{animation:none;max-width:none}
body.echo-kosmos #player .is-static-title .ptitle{white-space:normal;overflow-wrap:anywhere;width:auto;max-width:100%}
body.echo-kosmos #player .studio-title-ghost{max-width:none;white-space:nowrap}
/* v88: Wie im urspruenglichen Player gehoert der freie Platz dem Pegel.
   Kurze Titel verschwenden keine leere Spalte; lange behalten ihren Lauf. */
body.echo-kosmos #player :is(.viz,.eq){flex:1 1 0;max-width:none;min-width:70px;height:40px;margin-left:2px}
@media(max-width:620px){
  body.echo-kosmos #player .phead{gap:12px;min-height:60px;padding:2px 0 12px}
  body.echo-kosmos #player .pcov-wrap{width:56px;height:56px;border-radius:14px}
  body.echo-kosmos #player .pcov-ring{display:none}
  body.echo-kosmos #player .pmeta{flex:1 1 0;max-width:none;gap:5px}
  body.echo-kosmos #player .pstate{font-size:8px;letter-spacing:.12em;gap:5px}
  body.echo-kosmos #player .ptitle{font-size:14px}
  body.echo-kosmos #player :is(.viz,.eq){display:none}
}
@media(prefers-reduced-motion:reduce){
  body.echo-kosmos #player .ptitle{white-space:normal;overflow-wrap:anywhere;width:auto;max-width:100%}
  body.echo-kosmos #player .ptitle-wrap.is-overflow{mask-image:none;-webkit-mask-image:none}
  body.echo-kosmos #player .pcov-ring{display:none}
}

/* Games: Bildbuehne bleibt gross, ihre Bedienelemente folgen dem Dossier. */
body.echo-kosmos #gamesCard.games-gallery{padding:34px 30px 30px}
body.echo-kosmos #gamesCard.games-gallery .about-title{
  font-size:clamp(34px,4.4vw,43px);font-weight:700;letter-spacing:-.025em;
  color:var(--ui-copy);margin:0;
}
body.echo-kosmos #gamesCard.games-gallery #gmLead{
  color:var(--ui-secondary);margin:10px 0 24px;letter-spacing:.18em;
}
body.echo-kosmos #gamesCard .game-focus{
  border-radius:18px;border-color:var(--ds-linie-stark)!important;
  box-shadow:inset 0 1px 0 var(--ds-licht),0 18px 42px rgba(0,0,0,.32);
}
body.echo-kosmos #gamesCard :is(.gf-stat,.gm-summary,.game-poster,.career-grid button){
  background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%),var(--ds-flaeche)!important;
}
body.echo-kosmos #gamesCard :is(.game-filter-buttons button,.poster-details){
  border-radius:9px;background:rgba(1,3,7,.5);border-color:var(--ds-linie);color:var(--ui-secondary);
}
body.echo-kosmos #gamesCard :is(#careerHighlights,.activity-breakdown){border-color:var(--ds-linie)}
body.echo-kosmos #gamesCard :is(.gallery-section-heading h3,.activity-breakdown h3){
  color:var(--ui-copy);font-weight:650;
}

/* Setup: dieselben technischen Karten wie im Dossier statt einzelner
   schwarzer Bloecke. Die Produktbilder und 3D-Oeffner bleiben Hauptdarsteller. */
body.echo-kosmos #setupCard.setup-showcase{padding:34px 30px 30px}
body.echo-kosmos #setupCard .setup-heading{
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--ds-linie);
}
body.echo-kosmos #setupCard .setup-title{
  font-size:clamp(34px,4.4vw,43px);font-weight:700;letter-spacing:-.025em;color:var(--ui-copy);
}
body.echo-kosmos #setupCard :is(.setup-eyebrow,.setup-chapter){color:var(--ui-secondary)}
body.echo-kosmos #setupCard{
  --setup-flaeche:rgba(1,3,6,.56);
}
body.echo-kosmos #setupCard :is(.setup-hero-render,.setup-panel:not(.setup-rig,.setup-spec,.setup-storage),.setup-support-card,.hardware-panel,.setup-storage-drive){
  background:var(--setup-flaeche)!important;
}
body.echo-kosmos #setupCard .setup-storage{background:transparent!important}
body.echo-kosmos #setupCard .setup-build-link{
  background:linear-gradient(145deg,rgba(255,255,255,.04),transparent),rgba(var(--echo-rgb),.045)!important;
}
body.echo-kosmos #setupCard .setup-chapter>i{
  background:linear-gradient(90deg,var(--ds-linie),rgba(var(--echo-rgb),.045));
}

/* Navigation und Randwerk sprechen dieselbe Fenstersprache, ohne das
   Himmelsbild der Wetteranzeige zu uebermalen. */
body.echo-kosmos :is(.nav,.back-btn,.counter){
  border-color:var(--ds-linie-stark)!important;
  box-shadow:inset 0 1px 0 var(--ds-licht),0 14px 34px rgba(0,0,0,.3);
}
/* v176: fast deckend - vorher schienen Texte durch die Leiste und kollidierten mit den Woertern */
body.echo-kosmos .nav{background:rgba(1,3,7,.9)}
/* v83: Die aktive Fläche bewegt sich als Ganzes, statt pro Link aufzuflackern. */
body.echo-kosmos .nav .nav-current{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  width:0;height:0;border-radius:999px;opacity:0;
  background:rgba(var(--echo-rgb),.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(var(--echo-rgb),.5);
}
body.echo-kosmos .nav.nav-has-marker .nav-current{opacity:1}
body.echo-kosmos .nav .nav-current.is-ready{
  transition:transform .48s cubic-bezier(.22,.8,.25,1),width .48s cubic-bezier(.22,.8,.25,1),
    height .3s ease,background .3s ease;
}
body.echo-kosmos .nav>a,body.echo-kosmos .nav>button{position:relative;z-index:1}
body.echo-kosmos .nav.nav-has-marker a[data-page].active{background:transparent;box-shadow:none}
body.echo-kosmos .nav a[data-page]{transition:color .28s ease,text-shadow .28s ease}
@media(prefers-reduced-motion:reduce){
  body.echo-kosmos .nav .nav-current.is-ready,body.echo-kosmos .nav a[data-page]{transition:none}
}
body.echo-kosmos .back-btn{background:rgba(1,3,7,.88)}

/* Telefon: gleiche Familie, dichter und ohne Hintergrundfilter. */
@media(max-width:620px),(pointer:coarse){
  body.echo-kosmos :is(#gamesCard.games-gallery,#setupCard.setup-showcase){
    background:
      linear-gradient(150deg,rgba(255,255,255,.045),transparent 28%),
      linear-gradient(165deg,rgba(5,8,13,.72),rgba(1,2,5,.65));
    border-color:rgba(202,215,232,.3)!important;
    box-shadow:0 22px 58px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -1px 0 rgba(var(--echo-rgb),.07);
  }
  body.echo-kosmos #gamesCard.games-gallery,
  body.echo-kosmos #setupCard.setup-showcase{padding:25px 18px 24px}
  body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard) :is(.ptile,.achievement,.dat,.game-poster,.setup-panel,.hardware-panel){
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* v80: Klare Scheiben statt Milchglas. Die Regel gilt bewusst auch fuer
   Navigation, aufgeklappte Wetterkarte und Dialoge sowie den Theme-Wechsel.
   Kein Zustand darf den Hintergrund wieder weichzeichnen. Die szenischen
   Lichtquellen und der Musikimpuls sind davon unabhaengig. */
body.echo-kosmos,
body.echo-kosmos *,
body.echo-kosmos *::before,
body.echo-kosmos *::after{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.echo-kosmos{
  --klare-scheibe:rgba(0,0,0,.94);
}
body.echo-kosmos[data-theme] #card,
body.echo-kosmos[data-theme] #aboutCard,
body.echo-kosmos[data-theme] #gamesCard.games-gallery,
body.echo-kosmos[data-theme] #setupCard.setup-showcase{
  background:var(--klare-scheibe);
  border:2px solid rgba(var(--echo-rgb),.3)!important;
  border-radius:24px;
  box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(237,239,242,.035),
    0 0 38px rgba(var(--echo-rgb),calc(.025 + .06*var(--musik-rand,0))),
    0 0 0 1px rgba(var(--echo-rgb),calc(.14*var(--musik-rand,0)));
  filter:none!important;
}
/* Die originale About-Grundierung gilt auf allen vier Hauptkarten.
   Der Kontrast entsteht aus Schwarz, klaren Konturen und gezielten Akzenten. */
body.echo-kosmos :is(#card,#aboutCard,#gamesCard,#setupCard)::before{content:none}
body.echo-kosmos #aboutCard::after{
  opacity:.065;
  background:
    radial-gradient(ellipse 300px 190px at 108% 5%,transparent 64%,rgba(var(--echo-rgb),.7) 64.4% 64.7%,transparent 65%),
    radial-gradient(ellipse 310px 210px at -12% 96%,transparent 64%,rgba(var(--echo-rgb),.7) 64.4% 64.7%,transparent 65%);
}
body.echo-kosmos #aboutCard .dos-zitat{
  background:linear-gradient(140deg,rgba(var(--glow-rgb),.10),rgba(0,0,0,.34));
  border-color:var(--kante-kachel)!important;box-shadow:none;
}
body.echo-kosmos #aboutCard .dat{
  background:rgba(0,0,0,.32);border-color:var(--kante-kachel)!important;box-shadow:none;
}
body.echo-kosmos #aboutCard .achievement{
  background:rgba(0,0,0,.34);border-color:var(--kante-kachel)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.echo-kosmos #aboutCard .achievement.rare{
  border-color:rgba(var(--echo-rgb),.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 13px rgba(var(--echo-rgb),.08);
}
@media(hover:hover) and (pointer:fine){
  body.echo-kosmos #aboutCard .egg-trigger:hover{
    border-color:var(--kante-zeigen)!important;box-shadow:0 0 18px rgba(var(--echo-rgb),.12);
  }
  body.echo-kosmos #aboutCard .bro:hover{
    border-color:var(--kante-zeigen)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 18px rgba(var(--echo-rgb),.075);
  }
}
body.echo-kosmos #aboutCard :is(.egg-trigger,.bro):focus-visible{
  border-color:var(--kante-zeigen)!important;box-shadow:0 0 18px rgba(var(--echo-rgb),.12);
}
/* Das Cover-Ambiente der Musik bleibt wie auf der Hauptseite sichtbar.
   Es faerbt nur den Hintergrund der Musikkachel; Texte, Controls und die
   Glasscheiben der Seite behalten ihre klare Darstellung ohne Backdrop-Blur. */
body.echo-kosmos #player .pglow{display:block}
body.echo-kosmos #serverCard .sv-amb{display:none}
/* Dialoge brauchen ohne Blur weiterhin einen ruhigen, lesbaren Hintergrund. */
body.echo-kosmos #detailGallery{background:rgba(2,3,6,.82)}
body.echo-kosmos .ext-box{background:var(--ui-glass)}

/* v81: Tower und Daten stehen nebeneinander im selben dunklen Raum.
   Der freigestellte Tower benötigt weder Schwarzmaske noch eigene Kachel. */
body.echo-kosmos #setupCard .setup-hero-render{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  gap:22px 36px;
  padding:24px;
  min-height:0;
  border-color:var(--ds-linie)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.echo-kosmos #setupCard .setup-hero-render :is(.setup-rig,.setup-spec){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  min-height:0;
  margin:0;
  padding:0;
}
body.echo-kosmos #setupCard .setup-hero-render :is(.setup-rig,.setup-spec)::before,
body.echo-kosmos #setupCard .setup-hero-render :is(.setup-rig,.setup-spec)::after{content:none}
body.echo-kosmos #setupCard .setup-hero-render .setup-rig{
  grid-column:1;
  grid-row:1 / 3;
  gap:18px;
  justify-content:flex-start;
}
body.echo-kosmos #setupCard .setup-hero-render .setup-rig-label,
body.echo-kosmos #setupCard .setup-hero-render .setup-rig figcaption{
  position:static;
  width:100%;
  padding:0;
}
body.echo-kosmos #setupCard .setup-hero-render .setup-render-image{
  position:static;
  width:100%;
  height:auto;
  aspect-ratio:1402 / 1122;
  object-fit:contain;
  object-position:center;
  filter:none;
  mix-blend-mode:normal;
}
body.echo-kosmos #setupCard .setup-hero-render .setup-rig figcaption>strong{
  max-width:none;
  font-size:14px;
  line-height:1.5;
}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec{
  grid-column:2;
  justify-content:center;
  align-self:stretch;
}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec-cpu{grid-row:1}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec-gpu{grid-row:2}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec-top{gap:14px}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec-make{margin-top:18px}
body.echo-kosmos #setupCard .setup-hero-render .setup-spec h3{
  font-size:clamp(28px,3.2vw,38px);
  letter-spacing:-.025em;
  line-height:1.18;
  margin:6px 0 12px;
  white-space:nowrap;
}
@media(max-width:700px){
  body.echo-kosmos #setupCard .setup-hero-render{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:30px 24px;
    padding:22px 18px;
  }
  body.echo-kosmos #setupCard .setup-hero-render .setup-rig{grid-column:1 / -1;grid-row:1}
  body.echo-kosmos #setupCard .setup-hero-render .setup-render-image{max-width:360px;margin:0 auto}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-cpu{grid-column:1;grid-row:2}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-gpu{grid-column:2;grid-row:2}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-top>.brandlogo{width:30px;height:22px}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-make{margin-top:14px;font-size:11px}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec h3{font-size:clamp(22px,5.6vw,30px)}
}
@media(max-width:380px){
  body.echo-kosmos #setupCard .setup-hero-render{grid-template-columns:minmax(0,1fr);gap:30px;padding:20px 16px}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-cpu{grid-column:1;grid-row:2}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec-gpu{grid-column:1;grid-row:3}
  body.echo-kosmos #setupCard .setup-hero-render .setup-spec h3{font-size:32px}
}
@media(max-width:620px),(pointer:coarse){
  body.echo-kosmos{--klare-scheibe:rgba(0,0,0,.94)}
}
/* v99: Geräte als gemeinsame Produktfamilie. Nur der Bildöffner ist eine
   Aktion; Kenndaten bleiben lesbare Information. Keine laufenden Effekte. */
body.echo-kosmos #setupCard :is(.setup-memory-storage,.setup-support) .hardware-product{
  display:flex!important;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:20px!important;
  border-radius:22px;overflow:hidden;background:#030405!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.echo-kosmos #setupCard .hardware-product::before,
body.echo-kosmos #setupCard .hardware-product::after{content:none!important;animation:none!important}
body.echo-kosmos #setupCard .hardware-product .hardware-product-head{
  display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;
  min-height:28px;margin:0 0 12px;padding:0;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-category{
  display:block;margin:0;font:700 10px/1.4 'Rajdhani',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ui-secondary,#bfc5cd);
}
body.echo-kosmos #setupCard .hardware-product .brandlogo{
  position:static;width:25px;height:25px;max-width:70px;opacity:.9;object-fit:contain;filter:none;
}
body.echo-kosmos #setupCard .hardware-product .brandlogo.setup-wordmark{width:65px}
body.echo-kosmos #setupCard .hardware-product .hardware-visual{
  flex:1 0 auto;display:block;position:relative;isolation:isolate;min-height:200px;height:260px;
  margin:0 0 18px;padding:0 0 42px;border-radius:16px;border:1px solid rgba(var(--echo-rgb),.08);
  color:var(--ui-copy,#f0f1f4);background:linear-gradient(155deg,rgba(var(--echo-rgb),.035),transparent 58%);
  box-shadow:none!important;overflow:hidden;
}
body.echo-kosmos #setupCard .hardware-product .hardware-visual::after{content:none!important}
body.echo-kosmos #setupCard .hardware-product .hardware-visual>img{
  position:absolute;inset:8px 0 42px;width:100%;height:calc(100% - 50px);object-fit:contain;
  padding:0 6px;filter:none;transform:none;transition:transform .65s cubic-bezier(.2,.65,.2,1);
}
/* Das breite SSD-Motiv nutzt die Fläche ohne die transparenten Ränder
   des quadratischen Posters; die vollständige Platine bleibt sichtbar. */
body.echo-kosmos #setupCard .hardware-product[data-hardware-kind="ssd"] .hardware-visual>img{object-fit:cover}
body.echo-kosmos #setupCard .hardware-product :is(.hw-spin,.hw-trace,.hw-breathe){animation:none!important}
body.echo-kosmos #setupCard .hardware-product .hardware-product-action{
  position:absolute;inset:auto 12px 10px;display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin:0;padding-top:8px;border-top:1px solid rgba(var(--echo-rgb),.10);
  color:var(--ui-secondary,#bfc5cd);font:600 11px/1.3 'Rajdhani',sans-serif;letter-spacing:.035em;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-action>span{margin:0;color:inherit;font:inherit}
body.echo-kosmos #setupCard .hardware-product .hardware-product-action>.hardware-product-arrow{
  display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(var(--echo-rgb),.24);
  border-radius:50%;font-size:15px;line-height:1;color:var(--ui-copy,#f0f1f4);
  transition:background .3s,border-color .3s;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-foot{
  display:grid;flex:0 0 auto;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:end;min-width:0;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-maker{
  display:block;margin:0 0 3px;color:var(--ui-secondary,#bfc5cd);
  font:500 11px/1.3 'Rajdhani',sans-serif;letter-spacing:.035em;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-name{
  margin:0;padding:0;color:var(--ui-copy,#f0f1f4);font:700 clamp(19px,2.4vw,25px)/1.08 'Rajdhani',sans-serif;
  letter-spacing:-.025em;overflow-wrap:anywhere;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-value{
  display:flex;align-items:baseline;justify-content:flex-end;gap:4px;white-space:nowrap;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-value>strong{
  margin:0;font:600 clamp(27px,3vw,36px)/1 'Rajdhani',sans-serif;
  letter-spacing:-.04em;color:var(--ui-copy,#f0f1f4);font-variant-numeric:tabular-nums;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-value>span{
  margin:0;font:600 11px/1.2 'Rajdhani',sans-serif;color:var(--ui-secondary,#bfc5cd);
}
body.echo-kosmos #setupCard .hardware-product :is(.hardware-product-spec,.hardware-product-extra){
  grid-column:1/-1;margin:0;min-width:0;font:500 12px/1.6 'Rajdhani',sans-serif;
  color:var(--ui-secondary,#bfc5cd);overflow-wrap:anywhere;
}
body.echo-kosmos #setupCard .hardware-product .hardware-product-extra{
  padding-top:11px;margin-top:5px;border-top:1px solid rgba(var(--echo-rgb),.12);font-size:11px;
}
body.echo-kosmos #setupCard .setup-storage-drive.hardware-product{margin:0!important}
body.echo-kosmos #setupCard .setup-storage-drive.hardware-product+.hardware-product{margin-top:14px!important}
body.echo-kosmos #setupCard .setup-storage-drive.hardware-product .hardware-visual{height:185px;min-height:185px;flex-grow:0}
body.echo-kosmos #setupCard .setup-memory.hardware-product .hardware-visual{min-height:320px}
body.echo-kosmos #setupCard .setup-memory.hardware-product .hardware-visual>img{max-height:440px;top:50%;transform:translateY(-55%)}
body.echo-kosmos #setupCard .setup-cooling.hardware-product .hardware-visual{height:310px}
@media(hover:hover) and (pointer:fine){
  body.echo-kosmos #setupCard .hardware-product .hardware-visual:is(:hover,:focus-visible){
    border-color:rgba(var(--echo-rgb),.30);background:linear-gradient(155deg,rgba(var(--echo-rgb),.07),transparent 62%);
  }
  body.echo-kosmos #setupCard .hardware-product .hardware-visual:is(:hover,:focus-visible)>img{transform:scale(1.035)}
  body.echo-kosmos #setupCard .setup-memory.hardware-product .hardware-visual:is(:hover,:focus-visible)>img{transform:translateY(-55%) scale(1.035)}
  body.echo-kosmos #setupCard .hardware-product .hardware-visual:is(:hover,:focus-visible) .hardware-product-arrow{
    background:rgba(var(--echo-rgb),.12);border-color:rgba(var(--echo-rgb),.48);
  }
}
@media(max-width:560px){
  body.echo-kosmos #setupCard :is(.setup-memory-storage,.setup-support) .hardware-product{padding:17px!important;border-radius:19px}
  body.echo-kosmos #setupCard .hardware-product .hardware-visual,
  body.echo-kosmos #setupCard .setup-memory.hardware-product .hardware-visual,
  body.echo-kosmos #setupCard .setup-storage-drive.hardware-product .hardware-visual,
  body.echo-kosmos #setupCard .setup-cooling.hardware-product .hardware-visual{height:240px;min-height:0;flex:0 0 auto}
  body.echo-kosmos #setupCard .setup-memory.hardware-product .hardware-visual>img{top:8px;max-height:none;transform:none}
  body.echo-kosmos #setupCard .hardware-product .hardware-product-name{font-size:21px}
  body.echo-kosmos #setupCard .hardware-product .hardware-product-value>strong{font-size:31px}
}
@media(max-width:360px){
  body.echo-kosmos #setupCard .hardware-product .hardware-product-foot{grid-template-columns:minmax(0,1fr);gap:8px}
  body.echo-kosmos #setupCard .hardware-product .hardware-product-value{justify-content:flex-start}
  body.echo-kosmos #setupCard .hardware-product .hardware-product-name{font-size:22px}
}
@media(prefers-reduced-motion:reduce),(pointer:coarse){
  body.echo-kosmos #setupCard .hardware-product .hardware-visual>img{transition:none}
}
/* ================= Gemeinsame Bewegung (v105) =================
   Marcelo am 30.09.2026: "Uebergaenge vereinheitlichen: Wetter, Navigation
   und Dialoge sollen aehnlich weich oeffnen und schliessen."
   Gemessen vorher (Chrome, 1440 px): Titelliste 211/174 ms, Linkhinweis
   193/187 ms, Navigation 394 ms, Wetter 828/674 ms - und Hardware-Detail
   sowie Geheimnis-Sammlung sprangen beim Schliessen hart weg (die
   Sammlung auch beim Oeffnen).
   Jetzt eine Familie: dieselben zwei Kurven fuer alles, kleine Flaechen
   (Dialoge, Listen, Navigation) gleich schnell, das Wetter als grosse
   Flaeche proportional laenger. Der ruhige Start des Wetters (v97) bleibt:
   die Oeffnen-Kurve beginnt sanft und bremst lang aus.
   Die Dauern liest auch index.html (twSetzen) - dort nichts doppelt
   eintragen. */
:root{
  --weich-auf:280ms;--weich-zu:220ms;
  --weich-gross-auf:640ms;--weich-gross-zu:500ms;
  --weich-kurve-auf:cubic-bezier(.3,0,.2,1);
  --weich-kurve-zu:cubic-bezier(.4,0,.6,1)}
@media (prefers-reduced-motion:no-preference){
  /* Navigation: erscheint mit der Profilseite, verschwindet ueber dem MK. */
  body.show .nav{transition:opacity var(--weich-auf) var(--weich-kurve-auf),visibility 0s}
  body.show.mk-covering .nav{transition:opacity var(--weich-zu) var(--weich-kurve-zu),visibility 0s linear var(--weich-zu)}

  /* Linkhinweis: Schleier blendet, die Scheibe hebt sich leicht an. */
  #extLink{transition:opacity var(--weich-zu) var(--weich-kurve-zu),visibility 0s linear var(--weich-zu)}
  #extLink.on{transition:opacity var(--weich-auf) var(--weich-kurve-auf),visibility 0s}
  #extLink .ext-box{transform:translateY(10px) scale(.985);
    transition:transform var(--weich-zu) var(--weich-kurve-zu)}
  #extLink.on .ext-box{transform:none;transition:transform var(--weich-auf) var(--weich-kurve-auf)}

  /* Titelliste im Player. */
  .plist{transition:max-height var(--weich-zu) var(--weich-kurve-zu),opacity var(--weich-zu) var(--weich-kurve-zu),
    margin-top var(--weich-zu) var(--weich-kurve-zu)}
  .plist.open{transition:max-height var(--weich-auf) var(--weich-kurve-auf),opacity var(--weich-auf) var(--weich-kurve-auf),
    margin-top var(--weich-auf) var(--weich-kurve-auf)}

  /* Hardware- und Spieldetail: sprang beim Schliessen hart weg. [hidden]
     schaltet display um - allow-discrete haelt die Flaeche, bis sie
     ausgeblendet ist; @starting-style gibt dem Oeffnen einen Anfang.
     Browser ohne diese Technik springen wie bisher, ohne Fehler. */
  .detail-overlay{opacity:1;transition:opacity var(--weich-auf) var(--weich-kurve-auf),display var(--weich-auf) allow-discrete}
  .detail-overlay[hidden]{opacity:0;pointer-events:none;
    transition:opacity var(--weich-zu) var(--weich-kurve-zu),display var(--weich-zu) allow-discrete}
  @starting-style{.detail-overlay:not([hidden]){opacity:0}}
  body.echo-kosmos .detail-window{animation:detailGlasEin var(--weich-auf) var(--weich-kurve-auf)}
  .detail-overlay[hidden] .detail-window{opacity:0;transform:translateY(10px) scale(.985);
    transition:opacity var(--weich-zu) var(--weich-kurve-zu),transform var(--weich-zu) var(--weich-kurve-zu)}

  /* Geheimnis-Sammlung: sprang auf und zu. */
  .eggfund{transition:opacity var(--weich-auf) var(--weich-kurve-auf),transform var(--weich-auf) var(--weich-kurve-auf),
    display var(--weich-auf) allow-discrete}
  .eggfund[hidden]{opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity var(--weich-zu) var(--weich-kurve-zu),transform var(--weich-zu) var(--weich-kurve-zu),
      display var(--weich-zu) allow-discrete}
  @starting-style{.eggfund:not([hidden]){opacity:0;transform:translateY(8px)}}

  /* Wetter: dieselben Kurven, als grosse Flaeche laenger (vorher 1050/850 ms). */
  body.echo-kosmos .time-weather{--tw-motion:var(--weich-gross-zu);--tw-ease:var(--weich-kurve-zu);
    transition:width var(--tw-motion) var(--tw-ease),height var(--tw-motion) var(--tw-ease),
      padding var(--tw-motion) var(--tw-ease),border-radius var(--tw-motion) ease,
      background var(--tw-motion) ease,border-color var(--tw-motion) ease,box-shadow var(--tw-motion) ease}
  body.echo-kosmos .time-weather.is-expanded{--tw-motion:var(--weich-gross-auf);--tw-ease:var(--weich-kurve-auf)}
}
/* v106 hatte hier die Rueckmeldung des Kopierknopfs - der Knopf ist mit v107 weg.
   Pfeil-Stups und Hardware-Druck stehen im Skript (index.html, hardware-gallery.js). */

/* ================= Profilkopf: Banner statt Profilbild (v122) =================
   Marcelo: "Profilbild vom Berserker kommt weg, der Name Marcelo mit den
   Icons kommt weg, dafuer der animierte Banner mittig mit dem Charakter
   mittig." Der Banner ist der Kopf der Karte: randlos ueber die volle
   Breite (negative Raender = Innenabstand der Karte), im Format des Videos
   16:9, Figur und Schriftzug mittig, nach unten ins Schwarz auslaufend.
   PL-01, Herkunft und Statuszeile liegen auf dem Auslauf. Die Akte schneidet
   ab (overflow:hidden), deshalb steht der Banner davor als eigenes Kind.
   Standbild als Hintergrund, bis das Video laeuft.
   v124: Marcelo "das Schwarz vom Banner ist ein anderes als das vom
   Hintergrund" - die alte Umwandlung hatte im Schwarz einen Violettstich
   (2,0,2 statt 0,0,0). Neu aus dem Original kodiert, Schwarz exakt 0;
   ?k=2 holt die neue Datei trotz Zwischenspeicher. */
body.echo-kosmos #card>.kopf-banner{display:block;position:relative;z-index:0;pointer-events:none;
  margin:-30px -30px 0;aspect-ratio:16/9;overflow:hidden;border-radius:21px 21px 0 0;
  background:#000 url('/assets/banner-kopf.jpg?k=2') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.55) 85%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.55) 85%,transparent 100%)}
body.echo-kosmos #card>.kopf-banner>video{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;opacity:0;transition:opacity var(--weich-gross-auf) var(--weich-kurve-auf)}
body.echo-kosmos #card>.kopf-banner.laeuft>video{opacity:1}
body.echo-kosmos #card>.kopf-banner+.profile-dossier{margin-top:-40px}
@media(max-width:700px){
  body.echo-kosmos #card>.kopf-banner{margin:-24px -20px 0}
  body.echo-kosmos #card>.kopf-banner+.profile-dossier{margin-top:-30px}
}
@media(max-width:520px){
  body.echo-kosmos #card>.kopf-banner{margin:-20px -14px 0;border-radius:18px 18px 0 0}
  body.echo-kosmos #card>.kopf-banner+.profile-dossier{margin-top:-24px}
}
/* v176 (Rundum-Pruefung): keine Beschriftung mehr unter 8,5 px; "Open details" bricht nicht um. */
body.echo-kosmos #player .pstate{font-size:9.5px}
body.echo-kosmos #gamesCard .area-marker>em,
body.echo-kosmos #setupCard .setup-chapter>span:last-child{font-size:9px}
body.echo-kosmos #setupCard .setup-screen-readout small{font-size:8.5px}
body.echo-kosmos .career-action{white-space:nowrap}