:root { color-scheme:dark; --bg:#0e1722; --panel:#162536; --panel2:#1d3043; --line:#314459; --text:#f4efe6; --muted:#a8b7c8; --accent:#eab87e; --accent2:#c6ddc4; --shadow:0 18px 50px rgba(0,0,0,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at 14% 7%,#1c3145 0,transparent 30rem),var(--bg); }
a { color:inherit; } button,input,select { font:inherit; } button { cursor:pointer; } .container { width:min(1120px,calc(100% - 38px)); margin:auto; }
.skip { position:absolute;left:-10000px; } .skip:focus { left:12px;top:12px;z-index:99;padding:8px 12px;background:#fff;color:#111; }
.sitehead { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0; } .brand { display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;letter-spacing:.01em; } .logo { width:42px;height:42px;border:1px solid #64748b;border-radius:12px;display:grid;place-items:center;color:var(--accent);font-size:24px;background:#18293a; } .navlink {font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:40px;padding:8px 14px;} .navlink:hover,.navlink:focus-visible{color:var(--text);border-color:var(--accent)}
.hero { position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(112deg,rgba(23,43,60,.98),rgba(18,32,46,.94));padding:clamp(30px,6vw,64px);margin:18px 0 24px;box-shadow:var(--shadow); } .hero:after { content:"◇";position:absolute;right:2%;top:-47%;font-size:430px;opacity:.055;color:var(--accent);pointer-events:none; } .eyebrow { color:var(--accent);text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:800; } h1,h2,h3,p { margin-top:0; } h1,h2,.serif { font-family:Georgia,"Times New Roman",serif; } h1 { font-size:clamp(36px,5.6vw,66px);line-height:1.08;letter-spacing:-.035em;margin:12px 0 17px;max-width:700px; } h2 {font-size:27px;line-height:1.2;} .hero p {max-width:660px;color:#c4d2df;font-size:17px;} .hero-bottom {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:25px;} .stat {padding:9px 15px;border:1px solid #536374;border-radius:12px;background:#ffffff0a;color:#e5ebf2;} .stat b {font-size:21px;color:var(--accent);margin-right:7px;} .status { font-size:12px;color:#f8d59c;background:#533e2547;border:1px solid #96704b;border-radius:40px;padding:7px 12px; }
.controls { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:19px;margin-bottom:20px; } .field-search {grid-column:span 2;} .filter-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:4px;} .filter-note{font-size:12px;color:var(--muted);} .reset-filters{color:var(--text);background:var(--panel2);border:1px solid #526175;border-radius:10px;padding:9px 14px;font-size:13px;} .reset-filters:not(:disabled):hover,.reset-filters:not(:disabled):focus-visible{border-color:var(--accent);} .reset-filters:disabled{opacity:.5;cursor:default;} .field { display:flex; flex-direction:column; gap:5px; } .field label {font-size:11px;font-weight:750;color:#aebed0;letter-spacing:.09em;text-transform:uppercase;} .field input,.field select {width:100%;min-width:0;border:1px solid #526175;background:#101d2a;color:var(--text);border-radius:10px;padding:11px 12px;outline-offset:3px;} .field input::placeholder { color:#8498ad; } .field input:focus,.field select:focus{border-color:var(--accent);outline:1px solid var(--accent)} .sectionrow {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;} .sectionrow h2 {margin:0;} .small {color:var(--muted);font-size:13px;} .cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:28px;} .card {display:flex;flex-direction:column;min-height:295px;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:18px;transition:transform .2s,border-color .2s;} .card:hover{border-color:#8d7a69;transform:translateY(-3px);} .card-main {display:flex;flex:1;flex-direction:column;text-align:left;padding:22px;background:none;color:inherit;border:0;outline-offset:-3px;} .card-symbol{width:43px;height:43px;display:grid;place-items:center;background:#273d4e;border:1px solid #536173;color:var(--accent);border-radius:13px;font-size:20px;margin-bottom:15px;} .card-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;} .chip {font-size:11px;font-weight:750;border-radius:6px;padding:3px 8px;background:#354d5f;color:#d9e8f5;}.chip.soft {background:#34483d;color:#d8efd7;} .card h3 {font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.2;margin:0 0 11px;} .card p {font-size:13px;color:#b3c0cf;margin:0 0 15px;flex:1;} .meta {display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:#b9c5d0;} .cardfoot {display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);} .arrow {color:var(--accent);font-size:18px;} .info-banner {border-left:3px solid var(--accent);background:#eab87e12;padding:13px 17px;border-radius:8px;color:#ebd7bf;font-size:14px;margin:0 0 22px;} .empty {padding:35px;border:1px dashed #526174;border-radius:16px;text-align:center;color:var(--muted);margin-bottom:20px;} .linkcards {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .shelf-card {display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;transition:border-color .2s;} .shelf-card:hover,.shelf-card:focus-visible{border-color:var(--accent)} .shelf-card strong{display:block;font-size:22px;font-family:Georgia,serif;margin:9px 0;} .shelf-card p{color:var(--muted);font-size:14px;} .footer {display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:24px 0 35px;margin-top:35px;color:var(--muted);font-size:12px;} .footer a {color:var(--accent);} .back {display:inline-flex;gap:8px;align-items:center;color:var(--accent);text-decoration:none;font-size:14px;margin-bottom:8px;} .error {padding:35px;border:1px solid #7b554b;border-radius:15px;color:#f1c1b5;}
.dialog {padding:0;border:1px solid #637187;border-radius:22px;background:#162638;color:var(--text);box-shadow:0 40px 100px #0008;width:min(680px,calc(100% - 30px));max-height:min(85vh,870px);}.dialog::backdrop {background:#000b;backdrop-filter:blur(3px);} .dialog-content{padding:clamp(20px,5vw,39px);overflow:auto;max-height:85vh;} .dialog-title{font-size:clamp(28px,5vw,38px);margin:10px 45px 16px 0;line-height:1.15;} .close {position:absolute;right:18px;top:18px;display:grid;place-items:center;border:1px solid #5c6e82;background:#1f3347;color:#fff;width:37px;height:37px;border-radius:10px;font-size:23px;} .d-meta{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 25px;} .d-meta span{background:#2a4053;border-radius:8px;padding:7px 10px;color:#cfdee8;font-size:13px;} .d-section{border-top:1px solid var(--line);padding-top:20px;margin-top:23px;} .d-section h3{font-size:15px;margin-bottom:8px;} .d-section p{color:#c5d0dc;font-size:14px;} .action-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;} .action-links a {text-decoration:none;padding:10px 13px;background:#34475b;border:1px solid #607184;border-radius:10px;font-size:13px;} .action-links a:hover{border-color:var(--accent)} .load-screen{max-width:800px;margin:28vh auto;text-align:center;color:var(--muted)}
@media(max-width:800px) { .controls{grid-template-columns:repeat(2,minmax(0,1fr));}.field-search{grid-column:1/-1;}.cards{grid-template-columns:repeat(2,minmax(0,1fr));}.linkcards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:540px) { .filter-actions{align-items:flex-start;flex-direction:column;} .container{width:min(100% - 24px,1120px);} .hero{padding:29px 23px;border-radius:19px;} .hero:after{font-size:240px;top:-17%;right:-17%;}.hero p{font-size:15px}.controls{grid-template-columns:1fr 1fr;padding:12px;gap:9px;} .field:first-child{grid-column:1 / -1;}.cards,.linkcards{grid-template-columns:1fr;}.card{min-height:260px;}.sitehead{padding:12px 0;} .brand{font-size:14px;}.sectionrow h2{font-size:23px;} }

[hidden] { display:none !important; }
/* Lokal gespeicherte Spieleschachtel-Fotos, keine fremden Bildserver. */
.game-cover-frame {
  display:grid;place-items:center;
  height:172px;width:100%;margin-bottom:16px;
  background:#10202f;border:1px solid #344b61;border-radius:13px;
  overflow:hidden;
}
.game-cover {
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
}
.cover-placeholder {
  display:grid;place-items:center;width:100%;height:100%;
  color:var(--accent);font-size:36px;opacity:.7;
}
.game-photo-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:17px 0 21px;
}
.game-photo{
  margin:0;padding:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  gap:8px;border-radius:14px;border:1px solid var(--line);
  background:#0f1e2e;
}
.game-detail-photo{
  width:100%;max-height:270px;height:clamp(160px,24vw,270px);
  object-fit:contain;object-position:center;
}
.game-photo figcaption {
  font-size:12px;color:var(--muted);text-align:center;
}
.photo-missing{display:grid;place-items:center;min-height:120px;font-size:12px;color:var(--muted)}
.photo-credit{font-size:11px;color:var(--muted);margin-top:-7px}
@media(max-width:540px){
  .game-cover-frame{height:200px}
  .game-photo-grid{grid-template-columns:1fr}
  .game-detail-photo{height:240px;max-height:240px}
}

/* Hero-Banner mit bereits im Bild integrierter Typografie. Keine externen Bildquellen. */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.banner-hero{
  overflow:hidden;
  position:relative;
  margin:18px 0 24px;
  background:#0f1e2c;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.banner-hero-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 1;
  object-fit:contain;
}
.banner-summary{
  background:linear-gradient(110deg,rgba(20,37,54,.98),rgba(23,43,58,.98));
  padding:15px clamp(20px,4vw,38px) 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 22px;
  flex-wrap:wrap;
}
.banner-description{font-size:14px;line-height:1.5;color:#c4d3de;margin:0;max-width:620px}
.banner-stats{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.banner-stat{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:7px 11px;border-radius:9px;
  border:1px solid #4e667a;
  background:#ffffff09;
  color:#dbe5ee;font-size:12px;
}
.banner-stat strong{font-size:19px;color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .banner-hero{border-radius:14px;margin:12px 0 17px}
  .banner-summary{padding:12px 15px 14px;gap:12px}
  .banner-description{font-size:12px}
  .banner-stat{font-size:11px}
  .banner-stat strong{font-size:16px}
}