/* Extraction Compass — discovery tool (index.php homepage): hero, release/deal
   strips, filter panel, chips, sliders, results, cards, detail modal, FAQ,
   home-about and A-Z titles. Extracted from the index.php inline <style>.
   Tokens/reset/fonts: /tokens.css + /base.css. Header: /header.css. */

  body{
    background:
      radial-gradient(ellipse at top left, #24211f 0%, var(--bg-void) 58%),
      var(--bg-void);
    line-height: 1.5;
  }
  /* Ambient field wash - a single faint warm ellipse, top-left, over the Void.
     A position:fixed pseudo-element instead of `background-attachment: fixed`:
     same "stays put while the page scrolls" look, but it composites once instead
     of repainting the whole viewport every scroll frame (costly on mobile).
     This is the ONLY gradient in the system (DESIGN.md → Signature Components). */
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 1000px 560px at 10% -10%, rgba(226,87,74,0.09) 0%, transparent 62%);
  }

  a{ color: inherit; }

  /* ---------- layout shell ---------- */
  .shell{
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 56px);
  }

  /* ---------- status bar / lang-dropdown / scroll-top: jetzt in /header.css
     (gemeinsam mit Blog- und Planer-Seiten, siehe header.php) ---------- */

  /* ---------- hero ---------- */
  .hero{
    padding: 72px 0 48px;
    border-bottom: 1px solid var(--line-soft);
  }
  .hero h1{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-hero);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
    text-wrap: balance;
    max-width: 22ch;
  }
  .hero h1 em{
    font-style: normal;
    color: var(--accent-red-bright);
  }
  .hero p{
    font-size: var(--fs-lg);
    color: var(--text-muted);
    max-width: 56ch;
    margin: 0;
  }

  /* ---------- release strip (neue/baldige Releases) ---------- */
  .spotlight-row{
    display: flex;
    align-items: stretch;
    gap: 28px;
  }
  .spotlight-row > .release-strip{
    flex: 1 1 0;
    min-width: 0;
  }
  .release-strip{
    padding: 28px 0 4px;
    border-bottom: 1px solid var(--line-soft);
  }
  .release-strip[hidden]{ display: none; }
  .strip-head{
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 16px;
  }
  .strip-heading{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-red-bright);
    background: var(--accent-red-dim);
    border-left: 3px solid var(--accent-red-bright);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: 9px 14px;
    margin: 0;
  }
  .strip-nav{
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
  }
  .strip-nav[hidden]{ display: none; }
  .strip-arrow{
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--accent-red-bright);
    background: var(--accent-red-dim);
    border: 1px solid var(--accent-red-bright);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .strip-arrow:hover:not(:disabled){
    color: #fff;
    background: var(--accent-red-bright);
    border-color: var(--accent-red-bright);
  }
  .strip-arrow:disabled{
    opacity: 0.3;
    cursor: default;
  }
  /* kleine Zaehlzeile unter dem Streifen ("2 neue Games" / "4 aktuelle Angebote") */
  .strip-count{
    margin: -14px 0 24px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .strip-count:empty{ display: none; }
  /* Karussell-Reihe: horizontal scrollbar mit Snap, Scrollleiste ausgeblendet -
     navigiert wird ueber die Pfeile in .strip-nav (Touch/Trackpad-Wischen geht
     weiterhin). */
  .spotlight-track{
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .spotlight-track::-webkit-scrollbar{ display: none; }
  .spotlight-track > .release-card{
    flex: 0 0 calc((100% - 18px) / 2);
    scroll-snap-align: start;
  }
  .release-card{ font-size: var(--fs-md); }
  .release-card .card-visual{ aspect-ratio: 16 / 9.5; }
  .release-card .card-body{ padding: 13px 14px 15px; gap: 7px; }
  .release-card .card-title{ font-size: var(--fs-lg); min-height: 0; }
  .release-card .card-dev{ font-size: var(--fs-sm); }
  .release-ribbon{
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 0;
  }
  .ribbon-new{ background: var(--banner-new); }
  .ribbon-soon{ background: var(--banner-soon); }
  .ribbon-deal{ background: var(--banner-deal); color: var(--on-gold); }
  /* Genre-Stamp im Release-/Angebote-Strip: rutscht unter das volle Banner
     (release-ribbon), statt sich mit ihm zu ueberlappen wie zuvor. */
  .release-card .card-visual .stamp{ top: 34px; }
  /* .tag-approx / -vr / -demo / -playtest / -early-access / -full-release:
     jetzt in /components.css (gemeinsam mit der Spiel-Detailseite). */

  /* ---------- main grid ---------- */
  .main{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    padding: 40px 0 80px;
    align-items: start;
  }

  /* ---------- filter panel ---------- */
  .panel{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 20px 40px -24px rgba(0,0,0,0.55);
    position: sticky;
    /* Folgt der echten Header-Hoehe (header.js schreibt --header-h). Zwischen ~881
       und ~1200px bricht die Nav auf 2 Zeilen um -> Header ~103px statt ~62px;
       fest verdrahtete 72px liessen die "Missionsparameter"-Ueberschrift beim
       Scrollen unter dem Header verschwinden. 72px-Fallback fuer JS-los. */
    top: calc(var(--header-h, 72px) + 8px);
  }
  .panel-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .panel-head h2{
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid var(--accent-red-bright);
    color: var(--text-primary);
  }
  .panel-head .idx{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color .15s;
  }
  .panel-head .idx.idx-active{ color: var(--accent-red-bright); font-weight: 700; }
  .panel-body{
    padding: 18px 16px 6px;
  }
  .field{
    margin-bottom: 24px;
  }
  .field-label{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .price-input-wrap{
    display: inline-flex;
    align-items: center;
    background: var(--bg-panel-raised);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-control);
    padding: 6px 14px;
    text-transform: none;
    transition: border-color .15s, box-shadow .15s;
    cursor: text;
  }
  .price-input-wrap:focus-within{
    border-color: var(--accent-red-bright);
    box-shadow: 0 0 0 3px var(--accent-red-dim);
  }
  .price-number{
    width: 38px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-lg);
    padding: 3px 0;
    text-align: right;
    -moz-appearance: textfield;
  }
  .price-number:focus{ outline: none; }
  .price-number::-webkit-inner-spin-button,
  .price-number::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  .price-currency{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--text-primary);
    margin-left: 5px;
  }
  .field-label b{ color: var(--text-primary); font-weight: 500; }

  .chipset{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .chip{
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 9px 13px;
    background: var(--bg-panel-raised);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color .15s, color .15s, background .15s;
  }
  .chip:hover{ border-color: var(--text-muted); }
  .chip[aria-pressed="true"]{
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
  }

  /* gauge sliders */
  .gauge-scale{
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
  }
  input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background:
      repeating-linear-gradient(90deg,
        var(--line) 0, var(--line) 1px,
        transparent 1px, transparent calc(25% - 1px));
    background-position: 0 center;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    position: relative;
  }
  input[type="range"]::-webkit-slider-runnable-track{
    height: 2px;
    background: var(--line);
  }
  input[type="range"]::-moz-range-track{
    height: 2px;
    background: var(--line);
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 12px; height: 12px;
    margin-top: -5px;
    background: var(--accent-red-bright);
    transform: rotate(45deg);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(226,87,74,0.6);
  }
  input[type="range"]::-moz-range-thumb{
    width: 12px; height: 12px;
    background: var(--accent-red-bright);
    transform: rotate(45deg);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(226,87,74,0.6);
  }

  .reset-btn{
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    padding: 12px;
    cursor: pointer;
    margin: 6px 0 18px;
    transition: border-color .15s, color .15s, background .15s;
  }
  .reset-btn:hover{ border-color: var(--accent-red-bright); color: var(--accent-red-bright); }

  /* ---------- results ---------- */
  .results-head{
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .results-head-top{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
  }
  .results-head h2{
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-primary);
  }
  .results-count{
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* loading / empty / error message inside the results area */
  .tool-note{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin: 0;
    padding: 4px 0;
  }
  .tool-note--error{ color: var(--accent-red-bright); }
  .view-toggle{
    display: flex;
    gap: 6px;
  }
  .view-btn{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
  }
  .view-btn:hover{ border-color: var(--text-dim); color: var(--text-primary); }
  .view-btn.active{
    background: var(--accent-red-dim);
    border-color: var(--accent-red-bright);
    color: var(--accent-red-bright);
  }
  .top-hit-wrap{
    max-width: 760px;
    margin: 0 auto 40px;
  }
  .top-hit-label, .alt-label{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }
  .top-hit-label{ color: var(--accent-red-bright); margin-bottom: 10px; }
  .alt-label{ color: var(--text-muted); margin: 4px 0 14px; }
  .card.top-hit{
    border-color: var(--accent-red-dim);
    box-shadow: 0 22px 46px -20px rgba(0,0,0,0.62);
  }
  .card.top-hit:hover{ border-color: var(--accent-red-bright); }
  .top-hit .card-title{ font-size: var(--fs-2xl); }
  .top-hit .card-blurb{ font-size: var(--fs-base); }
  .alt-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* .grid / .card / .card-visual / .stamp.* / .tag.setting-* / .status-stripe /
     .card-body / .card-title / .card-blurb / .card-rating* / .card-tags / .tag /
     .tag-mode-* / .tag-pm-* / .tag-price-* / .card-meta-line / "clickable card
     affordances": jetzt in /components.css (gemeinsam mit der Spiel-Detailseite,
     die ec_render_card() ebenfalls nutzt). tool.css behaelt nur die
     Startseiten-Varianten (.top-hit, .release-card, .alt-grid) und die
     @media-Bloecke weiter unten. */

  /* ---------- detail modal ---------- */
  .modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(8,9,10,0.86);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 5vh, 64px) 20px;
    overflow-y: auto;
    z-index: 100;
  }
  .modal-overlay.hidden{ display: none; }
  .modal-box{
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.02);
    max-width: 860px;
    width: 100%;
    padding: 0 0 32px;
  }
  .modal-close{
    position: absolute;
    top: -16px; right: -16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text-primary);
    width: 36px; height: 36px;
    cursor: pointer;
    font-size: var(--fs-lg);
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    z-index: 5;
    transition: border-color .15s, color .15s, transform .15s;
  }
  .modal-close:hover{ border-color: var(--accent-red-bright); color: var(--accent-red-bright); transform: scale(1.06); }
  .modal-visual{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--bg-panel-raised);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-visual img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .modal-visual .glyph{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-glyph); color: var(--line); }
  .modal-stamp{
    position: absolute; top: 10px; left: 10px;
    font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em;
    color: #fff; background: var(--accent-red); padding: 4px 8px; text-transform: uppercase; z-index: 2;
  }
  .modal-body{ padding: 0 clamp(24px, 4vw, 40px); }
  .modal-title{
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
  }
  .modal-facts{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 0 0 14px;
    padding: 0;
  }
  .modal-fact{
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--fs-md);
    font-family: var(--font-body);
  }
  .modal-fact dt{ margin: 0; color: var(--text-dim); font-weight: 500; }
  .modal-fact dd{ margin: 0; color: var(--text-primary); font-weight: 600; }
  .modal-blurb{
    font-size: var(--fs-lg);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 18px;
  }
  .modal-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .modal-description{
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 4px;
  }
  .modal-description p{ margin: 0 0 12px; }
  .modal-description p:last-child{ margin-bottom: 0; }
  .modal-description.is-collapsible.collapsed{
    max-height: 165px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .modal-desc-toggle{
    display: inline-block;
    background: none;
    border: none;
    color: var(--accent-red-bright);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    padding: 0;
    margin: 2px 0 20px;
    cursor: pointer;
  }
  .modal-desc-toggle:hover{ text-decoration: underline; }

  .modal-related-posts{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
  }
  .modal-related-post{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    transition: color .15s;
  }
  .modal-related-post:last-child{ border-bottom: none; }
  .modal-related-post:hover{ color: var(--accent-red-bright); }
  .modal-related-post-title{ font-weight: 600; }
  .modal-related-post-title::after{ content: ' →'; opacity: .6; font-weight: 400; }
  .modal-related-post-date{
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .modal-section-label{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-red-bright);
    background: var(--accent-red-dim);
    border-left: 3px solid var(--accent-red-bright);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: 9px 14px;
    margin: 26px 0 16px;
  }
  .modal-body > .modal-section-label:first-of-type{ margin-top: 20px; }
  .stat-row{
    display: grid;
    grid-template-columns: 150px 1fr 24px;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .stat-bar{
    height: 4px;
    background: var(--track);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
  }
  .stat-bar-fill{
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--accent-red-bright);
  }
  .stat-value{ text-align: right; color: var(--text-primary); font-weight: 700; }
  /* Preis-Zeile ("Preis: 39,99 €") + "keine offizielle Seite"-Hinweis im
     Detail-Modal - vorher als inline style="font-size:13.5px" gesetzt (nicht auf
     der 8-Stufen-Skala). Jetzt --fs-md wie die uebrige dichte Modal-Copy. */
  .modal-price-line{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .modal-no-page{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-muted);
  }
  .modal-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
  }
  .modal-link-btn{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    padding: 12px 20px 12px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--text-dim);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .modal-link-btn:hover{
    background: var(--bg-panel);
    transform: translateY(-1px);
  }
  .modal-link-btn .store-icon{
    display: flex;
    flex-shrink: 0;
  }
  .modal-link-btn .store-label::after{ content: ' ↗'; opacity: .65; font-weight: 400; }
  .modal-link-btn.store-steam{ border-left-color: var(--store-steam); }
  .modal-link-btn.store-steam .store-icon{ color: var(--store-steam); }
  .modal-link-btn.store-epic{ border-left-color: var(--accent-purple); }
  .modal-link-btn.store-epic .store-icon{ color: var(--accent-purple); }
  .modal-link-btn.store-site{ border-left-color: var(--accent-red-bright); }
  .modal-link-btn.store-site .store-icon{ color: var(--accent-red-bright); }
  .modal-link-btn.store-ps{ border-left-color: var(--accent-blue); }
  .modal-link-btn.store-ps .store-icon{ color: var(--accent-blue); }
  .modal-link-btn.store-xbox{ border-left-color: var(--accent-green); }
  .modal-link-btn.store-xbox .store-icon{ color: var(--accent-green); }
  .modal-deal-price{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
  }
  .modal-deal-price .deal-tag{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-gold);
    background: var(--accent-gold);
    border-radius: var(--radius-control);
    padding: 3px 8px;
  }
  .modal-deal-price .deal-original{
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text-dim);
    text-decoration: line-through;
  }
  .modal-deal-price strong{
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--accent-gold);
  }
  .modal-availability-banner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-green);
    padding: 12px 16px;
    margin: 0 0 14px;
  }
  .modal-availability-banner + .modal-availability-banner{ margin-top: -6px; }
  .modal-availability-text{
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-primary);
  }
  .modal-availability-tag{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #16261a;
    background: var(--accent-green);
    border-radius: var(--radius-control);
    padding: 3px 8px;
    flex-shrink: 0;
  }
  .modal-availability-cta{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--accent-green);
    text-decoration: none;
    white-space: nowrap;
  }
  .modal-availability-cta::after{ content: ' ↗'; opacity: .65; font-weight: 400; }
  .modal-availability-cta:hover{ text-decoration: underline; }

  .modal-note{
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin: 0 0 10px;
  }

  .modal-stat-chips{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 14px;
  }
  .stat-chip-group{
    display: flex;
    flex-direction: column;
    flex: 1 1 210px;
    min-width: 0;
    cursor: help;
  }
  .stat-chip-eyebrow{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-red-bright);
    margin: 0 0 5px 2px;
  }
  .stat-chip{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    background: var(--bg-panel-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    padding: 10px 14px;
  }
  .stat-chip-steam{ border-left-color: var(--accent-green); }
  .stat-chip-players{ border-left-color: var(--accent-amber); }
  .stat-chip-icon{
    font-size: var(--fs-xl);
    flex-shrink: 0;
    line-height: 1;
  }
  .stat-chip-steam .stat-chip-icon{ color: var(--accent-green); }
  .stat-chip-players .stat-chip-icon{ color: var(--accent-amber); }
  .stat-chip-players .stat-chip-value{ color: var(--accent-amber); }
  .stat-chip-body{ min-width: 0; }
  .stat-chip-value{
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
  }
  .stat-chip-peak{
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 3px;
  }
  .stat-chip-label{
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .modal-trailer{
    border: 1px dashed var(--line);
    background: var(--bg-panel-raised);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    padding: 20px;
  }
  .modal-trailer-embed{
    aspect-ratio: 16/9;
    background: #000;
  }
  .modal-trailer-embed iframe{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  .carousel-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: rgba(23,24,26,0.72);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    z-index: 4;
  }
  .carousel-arrow:hover{ border-color: var(--accent-red-bright); color: var(--accent-red-bright); }
  .carousel-arrow.prev{ left: 8px; }
  .carousel-arrow.next{ right: 8px; }

  .modal-thumbs{
    display: flex;
    gap: 8px;
    padding: 0 clamp(24px, 4vw, 40px) 20px;
    overflow-x: auto;
  }
  .modal-thumbs:empty{ padding: 0; }
  .modal-thumb{
    flex: 0 0 auto;
    width: 84px;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-panel-raised);
    cursor: pointer;
    overflow: hidden;
    opacity: 0.85;
    transition: border-color .15s, opacity .15s;
  }
  .modal-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .modal-thumb:hover{ opacity: 1; border-color: var(--text-dim); }
  .modal-thumb.active{ border-color: var(--accent-red-bright); opacity: 1; }

  /* ---------- FAQ ---------- */
  .faq-section{
    padding: 8px 0 12px;
    border-top: 1px solid var(--line-soft);
  }
  .faq-heading{
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 40px 0 24px;
    text-align: center;
  }
  .faq-layout{
    display: flex;
    justify-content: center;
  }
  .faq-list{ max-width: 760px; width: 100%; }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-question{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 600;
    text-align: left;
    padding: 18px 2px;
    cursor: pointer;
  }
  .faq-question:hover{ color: var(--accent-red-bright); }
  .faq-icon{
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--accent-red-bright);
    flex-shrink: 0;
    transition: transform .2s ease;
  }
  .faq-question[aria-expanded="true"] .faq-icon{ transform: rotate(45deg); }
  .faq-answer{
    padding: 0 2px 20px;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
  }
  .faq-answer[hidden]{ display: none; }
  .faq-answer p{ margin: 0; }
  .faq-answer a{ color: var(--text-primary); }
  .faq-answer a:hover{ color: var(--accent-red-bright); }

  /* ---------- Filter-Tool-Erklaerung (aufklappbar) ---------- */
  /* Bewusst an das FAQ-Akkordeon angelehnt: gleiche Plus-Glyphe, gleiche
     Mono-Caps-Frage, kein Radius (Design-System: alle Ecken eckig). */
  .tool-explainer{
    margin: 4px 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-panel);
  }
  .tool-explainer > summary{
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .tool-explainer > summary::-webkit-details-marker{ display: none; }
  .tool-explainer > summary::before{
    content: "+";
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--accent-red-bright);
    transition: transform .2s ease;
  }
  .tool-explainer[open] > summary::before{ transform: rotate(45deg); }
  .tool-explainer > summary:hover{ color: var(--text-primary); }
  .tool-explainer-body{
    padding: 2px 18px 16px;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.65;
    max-width: 78ch;
  }
  .tool-explainer-body p{ margin: 0 0 12px; }
  .tool-explainer-body p:last-child{ margin-bottom: 0; }
  .tool-explainer-body strong{ color: var(--text-primary); }

  /* ---------- Community / Discord ---------- */
  /* Auf System gehalten: eckig, flache Flaeche, Rot-Akzent wie die uebrigen
     CTAs (reset-btn, strip-arrow). Discord-Blurple nur als kleiner Glyph. */
  .community{
    margin: 8px 0 4px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--line-soft);
  }
  .community-inner{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg-panel);
  }
  .community-icon{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--text-dim);
  }
  .community-text{ flex: 1 1 auto; min-width: 0; }
  .community-text h2{
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
  }
  .community-text p{
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.55;
    max-width: 62ch;
  }
  .community-cta{
    flex-shrink: 0;
    align-self: center;
    display: inline-block;
    padding: 11px 20px;
    background: var(--accent-red);
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-control);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
  }
  .community-cta:hover{ background: var(--accent-red-bright); border-color: var(--accent-red-bright); }
  @media (max-width: 640px){
    .community-inner{ flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .community-cta{ align-self: stretch; text-align: center; }
  }

  /* ---------- footer ---------- */
  footer{
    border-top: 1px solid var(--line-soft);
    padding: 26px 0 40px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  footer a{ color: var(--text-dim); margin-left: 14px; text-decoration: none; }
  footer a:hover{ color: var(--accent-red-bright); }
  footer strong{ color: var(--text-muted); font-weight: 500; }

  /* scroll-top-btn: jetzt in /header.css */

  /* ---------- responsive ---------- */
  @media (max-width: 880px){
    .main{ grid-template-columns: 1fr; }
    .panel{ position: static; }
    .shell{ padding: 0 18px; }
    .alt-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* Spotlight-Reihe frueh stapeln: nebeneinander bleiben je zwei Kacheln pro
     Streifen nur bis hierher komfortabel breit - darunter kriegt jeder Streifen
     die volle Breite. */
  @media (max-width: 1024px){
    .spotlight-row{ flex-direction: column; gap: 0; }
    .deal-strip{ padding-top: 8px; }
  }

  @media (max-width: 640px){
    .alt-grid{ grid-template-columns: 1fr; }
    .top-hit .card-title{ font-size: var(--fs-xl); }
  }

  @media (max-width: 560px){
    .shell{ padding: 0 14px; }
    .hero{ padding: 40px 0 28px; }
    .hero p{ font-size: var(--fs-base); }
    .main{ padding: 28px 0 56px; gap: 24px; }
    .panel-body{ padding: 16px 12px 4px; }
    .results-head-top{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .view-toggle{ width: 100%; }
    .view-btn{ flex: 1; text-align: center; }
    .grid{ grid-template-columns: 1fr; }
    .spotlight-track > .release-card{ flex-basis: 100%; }
    .gauge-scale{ font-size: var(--fs-2xs); }
    footer{ flex-direction: column; }
    .modal-overlay{ padding: 14px 10px; }
    .modal-close{ top: 10px; right: 10px; }
    /* Editorial-Rating-Balken: 150px-Labelspalte quetscht den Balken bei 320px auf
       ~40px. Stattdessen: Label eigene Zeile, Balken + Wert darunter. */
    .stat-row{
      grid-template-columns: 1fr auto;
      grid-template-areas: "label label" "bar value";
      row-gap: 6px;
    }
    .stat-row > span:first-child{ grid-area: label; }
    .stat-row .stat-bar{ grid-area: bar; }
    .stat-row .stat-value{ grid-area: value; }
  }

  /* Touch-Geraete (primaerer Zeiger grob): Trefferflaechen auf >=44px anheben,
     ohne die dichte Maus-Variante aufzublasen. Optik (Rahmen, Schrift, Farbe)
     bleibt identisch - nur vertikale Polsterung / Hoehe waechst. */
  @media (pointer: coarse){
    .chip{ padding-top: 13px; padding-bottom: 13px; }
    .view-btn{ padding-top: 13px; padding-bottom: 13px; }
    .reset-btn{ padding: 15px 13px; }
    /* Grifffläche wächst, Bahn bleibt optisch an derselben Stelle (negative
       Ränder gleichen die Extra-Höhe im Feld-Rhythmus wieder aus). */
    input[type="range"]{ height: 40px; margin-block: -9px; }
    .price-input-wrap{ padding-top: 11px; padding-bottom: 11px; }
    .modal-close{ width: 44px; height: 44px; font-size: var(--fs-xl); }
    .carousel-arrow{ width: 44px; height: 44px; }
    .modal-desc-toggle{ padding: 8px 0; }
    .faq-question{ padding-top: 20px; padding-bottom: 20px; }
  }

  @media (min-width: 1800px){
    .shell{ max-width: 1760px; }
  }

  /* prefers-reduced-motion wird zentral in /base.css behandelt (Bewegung raus,
     Farb-/Deckkraft-/Rahmen-Feedback bleibt). Kein pauschales transition:none
     hier - das hat vorher auch die sinnvollen Zustandswechsel abgeschaltet. */

  /* ---------- SSR: serverseitig gerenderte Kacheln (erster Paint + Crawler) ---------- */
  /* Server-gerendertes, verlinktes HTML fuer den ersten Frame und Suchmaschinen.
     Das JS baut #resultsArea nur neu, wenn Filter/Sprache vom Default abweichen
     (sonst bleibt dieses Markup stehen). a.card-link (+ ::after-Overlay),
     .card-title-Transition und .grid-compact liegen jetzt in /components.css. */
  .ssr-empty{ color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-md); }
  /* Kompakter A-Z-Index aller Titel (Startseite, unter dem Raster) */
  .all-titles{ margin: 4px 0 56px; border-top: 1px solid var(--line-soft); padding-top: 26px; }
  .all-titles h2{
    font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-primary);
    margin: 0 0 16px; padding-left: 10px; border-left: 2px solid var(--accent-red-bright);
  }
  .all-titles ul{ list-style: none; margin: 0; padding: 0; columns: 240px 4; column-gap: 30px; }
  .all-titles li{ break-inside: avoid; margin: 0 0 9px; font-size: var(--fs-md); line-height: 1.4; }
  .all-titles a{ font-family: var(--font-body); color: var(--text-muted); text-decoration: none; }
  .all-titles a:hover{ color: var(--accent-red-bright); }
  .all-titles .at-off{ color: var(--text-dim); font-size: var(--fs-xs); }
  .all-titles li.is-off a{ color: var(--text-dim); }

  /* Kontext-/Erklaertext unter dem Tool (Genre-Definition + Funktionsweise) -
     drei Spalten nebeneinander, ab Tablet-Breite gestapelt. */
  .home-about{ margin: 8px 0 4px; padding: 8px 0 0; }
  .home-about-inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .home-about .ha-col{ min-width: 0; }
  .home-about h2{
    font-family: var(--font-body); font-weight: 700;
    font-size: var(--fs-md); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-red-bright);
    margin: 0 0 12px; padding-left: 10px;
    border-left: 3px solid var(--accent-red-bright);
  }
  .home-about p{
    font-size: var(--fs-base); line-height: 1.65; color: var(--text-muted);
    margin: 0 0 12px;
  }
  .home-about p:last-child{ margin-bottom: 0; }
  .home-about p strong{ color: var(--text-primary); }
  @media (max-width: 900px){
    .home-about-inner{ grid-template-columns: 1fr; gap: 8px; max-width: 68ch; }
    .home-about .ha-col{ margin-bottom: 22px; }
    .home-about h2{ font-size: var(--fs-sm); }
  }
  /* "Zur vollständigen Seite" im Detail-Modal */
  .modal-fullpage-link{
    display: inline-block;
    margin: 2px 0 12px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: color .15s ease, border-color .15s ease;
  }
  .modal-fullpage-link:hover{ color: var(--accent-red-bright); border-color: var(--accent-red-bright); }