/*
Theme Name: Dr33d Guides
Theme URI: https://github.com/dr33d/dr33d-guides
Author: Dr33d Gaming
Description: Schlankes Classic-Theme für deutschsprachige Gaming-Guides. Custom Post Type "Guide", Spiel-Hubs, Schema.org (Article, VideoObject, FAQPage, BreadcrumbList), YouTube-Facade, selbst gehostete Schriften. Kein Page-Builder, kein Framework, kein Client-JavaScript außer Inhaltsverzeichnis und Video-Facade.
Version: 1.34.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: dr33d
*/

/* ==========================================================================
   Schriften — lokal, nie von Googles CDN (Abmahnrisiko in DE)
   ========================================================================== */
@font-face{font-family:'Rajdhani';src:url('assets/fonts/rajdhani-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Rajdhani';src:url('assets/fonts/rajdhani-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

/* ==========================================================================
   Tokens — übernommen aus global.css, Textfarben auf Kontrast korrigiert
   ========================================================================== */
:root{
  --bg:#08080e;
  --bg-elevated:#0f0f18;
  --bg-card:#141420;
  --bg-input:#12121e;
  --border:#1e1e30;
  --border-hover:#2a2a40;

  --text:#e4e4ef;
  --text-2:#a9aec1;      /* war #8888a0 — zu schwach für Fließtext */
  --text-3:#7d8397;

  --red:#ff3a3a;
  --red-soft:rgba(255,58,58,.10);
  --red-line:rgba(255,58,58,.32);
  --yellow:#ffd234;
  --yellow-soft:rgba(255,210,52,.10);
  --neon:#b4ff39;
  --neon-soft:rgba(180,255,57,.10);
  --purple:#9146ff;

  --font-display:'Rajdhani','Trebuchet MS',sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --radius:8px;
  --radius-lg:14px;
  --max-w:1200px;
  --measure:68ch;
  --t:.2s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:#ff6b6b;}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;}

/* Überschriften: Rajdhani, aber KEINE Versalien im Textbereich */
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;text-wrap:balance;letter-spacing:.01em;}
h1{font-weight:700;font-size:clamp(2rem,5vw,3rem);}
h2{font-weight:700;font-size:clamp(1.45rem,3.2vw,1.95rem);}
h3{font-weight:600;font-size:1.25rem;}
h4{font-weight:600;font-size:1.05rem;}

.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.measure{max-width:var(--measure);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:16px;top:16px;z-index:999;background:var(--bg-card);color:var(--text);padding:10px 16px;border-radius:var(--radius);}

/* ==========================================================================
   Kopf & Fuß
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,8,14,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.site-header .container{display:flex;align-items:center;gap:24px;height:64px;}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none;}
.brand span{color:var(--red);}
.nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;}
.nav a{font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);text-decoration:none;transition:color var(--t);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red);}

.site-footer{margin-top:80px;border-top:1px solid var(--border);background:var(--bg-elevated);}
.site-footer{font-size:.9rem;color:var(--text-2);}
.site-footer a{color:var(--text-2);}
.site-footer a:hover{color:var(--red);}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}

/* ==========================================================================
   Guide-Seite
   ========================================================================== */
.guide{padding-top:32px;}
.breadcrumb{font-family:var(--font-mono);font-size:.75rem;color:var(--text-3);margin-bottom:14px;}
.breadcrumb a{color:var(--text-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb span{margin:0 6px;}

.guide-head{max-width:var(--measure);}
.guide h1{margin-bottom:14px;}

/* Statuszeile */
.statusbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
.stat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;padding:5px 10px;border-radius:4px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-2);}
.stat--patch{background:var(--yellow-soft);border-color:rgba(255,210,52,.3);color:var(--yellow);}
.stat b{font-weight:500;color:var(--text);}

/* Kurzantwort — das einzige Element, das laut sein darf */
.answer{
  max-width:var(--measure);margin:0 0 34px;padding:22px 24px;
  background:var(--red-soft);border:1px solid var(--red-line);border-left:4px solid var(--red);
  border-radius:var(--radius);
}
.answer h2{font-size:.78rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:10px;}
.answer p{margin:0 0 .6em;font-size:1.06rem;}
.answer p:last-child{margin-bottom:0;}

/* Inhaltsverzeichnis */
.toc{max-width:var(--measure);margin:0 0 34px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.toc>summary{cursor:pointer;list-style:none;padding:14px 20px;font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);}
.toc>summary::-webkit-details-marker{display:none;}
.toc>summary::after{content:"▾";float:right;transition:transform var(--t);}
.toc[open]>summary::after{transform:rotate(180deg);}
.toc ol{margin:0;padding:0 20px 18px 38px;}
.toc li{margin:5px 0;font-size:.95rem;}
.toc li.lvl-3{margin-left:16px;font-size:.9rem;}
.toc a{color:var(--text-2);text-decoration:none;}
.toc a:hover{color:var(--red);text-decoration:underline;}
.toc a.is-hier{color:var(--red);font-weight:600;}
.toc li{position:relative;}
.toc li:has(a.is-hier)::before{content:"";position:absolute;left:-20px;top:.35em;bottom:.35em;width:2px;
  border-radius:2px;background:var(--red);}

/* Guide-Körper: Text und mitlaufendes Verzeichnis.
   Ein Verzeichnis, das nach dem ersten Bildschirm oben aus dem Bild scrollt,
   nützt bei zehn Abschnitten niemandem. Breit: eigene Spalte, die mitläuft.
   Schmal: eine Leiste oben, die zeigt, wo man gerade ist. */
.toc-spalte{display:block;}
.toc-titel{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.toc-jetzt{display:none;}

@media (min-width:1080px){
  .guide-koerper{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(200px,250px);
    gap:0 44px;align-items:start;}
  .guide-koerper .entry{grid-column:1;grid-row:1;}
  .toc-spalte{grid-column:2;grid-row:1;position:sticky;top:84px;
    max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;}
  .toc-spalte::-webkit-scrollbar{width:7px;}
  .toc-spalte::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px;}
  .toc-spalte::-webkit-scrollbar-track{background:transparent;}
  .toc{margin:0;max-width:none;}
  .toc>summary{cursor:default;padding:14px 18px 10px;font-size:.72rem;letter-spacing:.16em;
    font-family:var(--font-mono);color:var(--text-3);}
  .toc>summary::after{display:none;}
  .toc ol{padding:0 16px 16px 34px;}
  .toc li{margin:7px 0;font-size:.87rem;line-height:1.35;}
  .toc li.lvl-3{margin-left:10px;font-size:.82rem;}
}

@media (max-width:1079px){
  .toc-spalte{position:sticky;top:64px;z-index:15;margin:0 0 34px;}
  .toc{margin:0;background:rgba(14,14,22,.97);backdrop-filter:blur(10px);}
  .toc>summary{display:flex;align-items:baseline;gap:10px;padding-right:44px;position:relative;}
  .toc>summary::after{position:absolute;right:20px;top:14px;float:none;}
  .toc-jetzt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--font-body);font-weight:400;font-size:.85rem;letter-spacing:0;text-transform:none;
    color:var(--red);}
  .toc[open] .toc-jetzt{display:none;}
  .toc[open] ol{max-height:min(58vh,420px);overflow-y:auto;overscroll-behavior:contain;}
}

/* Fließtext */
.entry{max-width:var(--measure);}
.entry h2{margin:44px 0 14px;padding-top:10px;border-top:1px solid var(--border);}
.entry h3{margin:30px 0 10px;color:var(--text);}
.entry p{margin:0 0 1.1em;}
.entry ul,.entry ol{margin:0 0 1.2em;padding-left:1.4em;}
.entry li{margin-bottom:.45em;}
.entry img{border-radius:var(--radius);border:1px solid var(--border);display:block;margin:24px 0;}
.entry figure{margin:24px 0;}
.entry figcaption{font-family:var(--font-mono);font-size:.75rem;color:var(--text-3);margin-top:8px;}
.entry blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--neon);background:var(--neon-soft);border-radius:0 var(--radius) var(--radius) 0;color:var(--text-2);}
.entry code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-input);padding:2px 6px;border-radius:4px;}
/* Code- und Formelblöcke. Rechenwege stehen in mehreren Guides als Block —
   ohne eigene Regel erbt <pre> den Browser-Standard und wird auf Dunkel
   unlesbar. */
.entry pre,.entry .wp-block-code,.entry .wp-block-preformatted{
  font-family:var(--font-mono);font-size:.86rem;line-height:1.75;
  background:var(--bg-input);border:1px solid var(--border);border-left:3px solid var(--red-line);
  border-radius:var(--radius);padding:16px 18px;margin:24px 0;
  color:var(--text-2);overflow-x:auto;white-space:pre;tab-size:2;}
.entry pre code,.entry .wp-block-code code{background:none;padding:0;border-radius:0;font-size:1em;color:inherit;}
.entry pre b,.entry .wp-block-code b{color:var(--text);font-weight:600;}
.entry strong{font-weight:600;color:#fff;}

/* Tabellen — das Arbeitsformat für Skills, Stats, Gear */
.table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.entry table{border-collapse:collapse;width:100%;min-width:480px;font-size:.94rem;}
.entry th,.entry td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
.entry thead th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);background:var(--bg-input);white-space:nowrap;}
.entry tbody tr:last-child td{border-bottom:none;}

/* Affiliate-Box im Kontext */
.deal{
  max-width:var(--measure);margin:34px 0;padding:20px 22px;
  background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--yellow);border-radius:var(--radius);
}
.deal-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px;}
.deal h3{font-size:1.1rem;margin-bottom:8px;}
.deal p{margin:0 0 14px;color:var(--text-2);font-size:.95rem;}
.deal-links{display:flex;flex-wrap:wrap;gap:10px;}
.deal-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 18px;border-radius:var(--radius);text-decoration:none;
  background:var(--red);color:#fff;border:1px solid var(--red);transition:filter var(--t);
}
.deal-btn:hover{filter:brightness(1.12);color:#fff;}
.deal-btn--ghost{background:transparent;color:var(--text);border-color:var(--border-hover);}
.deal-btn--ghost:hover{border-color:var(--red);color:var(--red);}
.deal-note{margin-top:12px;font-size:.82rem;color:var(--text-3);}

/* Video-Facade — kein iframe, bis geklickt wird */
.video{max-width:var(--measure);margin:40px 0;}
.video h2{margin-bottom:14px;}
.facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;border-radius:var(--radius);overflow:hidden;background:var(--bg-card);}
.facade img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0;}
.facade::after{
  content:"";position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);
  background:var(--red);border-radius:12px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.facade::before{
  content:"";position:absolute;left:50%;top:50%;z-index:2;transform:translate(-38%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;
}
.facade:hover::after{filter:brightness(1.15);}
.facade-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font-family:var(--font-display);font-weight:600;letter-spacing:.04em;color:#fff;}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block;}

/* FAQ */
.faq{max-width:var(--measure);margin:46px 0;}
.faq h2{margin-bottom:16px;}
.faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);margin-bottom:10px;}
.faq summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--red);font-family:var(--font-mono);}
.faq details[open] summary::after{content:"–";}
.faq .faq-a{padding:0 20px 16px;color:var(--text-2);font-size:.97rem;}

/* Autorenbox */
.author{max-width:var(--measure);margin:46px 0;padding:20px 22px;display:flex;gap:18px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.author img{width:64px;height:64px;border-radius:50%;flex:0 0 auto;margin:0;border:2px solid var(--red);}
.author h3{font-size:1.05rem;margin-bottom:4px;}
.author p{margin:0;font-size:.92rem;color:var(--text-2);}

/* Karten-Raster für Guide-Listen */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:28px 0;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t),transform var(--t);display:flex;flex-direction:column;}
.card:hover{border-color:var(--red-line);transform:translateY(-2px);}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-input);}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0;}
.card-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-body h3{font-size:1.06rem;line-height:1.3;}
.card-body h3 a{color:var(--text);text-decoration:none;}
.card-body h3 a:hover{color:var(--red);}
.card-meta{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);letter-spacing:.04em;}
.tag{display:inline-block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--red-soft);color:var(--red);border:1px solid var(--red-line);align-self:flex-start;}

/* Seiten-Kopf für Archive & Hubs */
.page-head{padding:44px 0 8px;}
.page-head h1{margin-bottom:10px;}
.page-head p{max-width:var(--measure);color:var(--text-2);margin:0;}

/* Statische Seiten */
.page-entry{max-width:var(--measure);padding:32px 0 0;}
.page-entry h2{margin:36px 0 12px;}

/* Paginierung */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0;}
.pagination .page-numbers{font-family:var(--font-mono);font-size:.85rem;padding:8px 13px;border-radius:var(--radius);border:1px solid var(--border);color:var(--text-2);text-decoration:none;}
.pagination .current{background:var(--red);border-color:var(--red);color:#fff;}

@media (max-width:640px){
  body{font-size:17px;}
  .site-header .container{gap:12px;}
  .nav{gap:12px;}
  .nav a{font-size:.85rem;}
  .author{flex-direction:column;}
}

/* ==========================================================================
   Startseite & Bibliothek — Konzept aus dem alten Astro-Projekt
   ========================================================================== */

/* Navigation */
.nav-cta{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 18px;border-radius:var(--radius);background:var(--red);color:#fff;text-decoration:none;
  transition:filter var(--t);white-space:nowrap;
}
.nav-cta:hover{filter:brightness(1.12);color:#fff;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 24px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;
  transition:filter var(--t),border-color var(--t),color var(--t);cursor:pointer;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);}
.btn-primary:hover{filter:brightness(1.12);color:#fff;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-hover);}
.btn-ghost:hover{border-color:var(--red);color:var(--red);}
.btn-block{display:flex;justify-content:center;width:100%;}

/* Sektionen */
.section{padding:56px 0;}
.section-head{margin-bottom:28px;max-width:var(--measure);}
.section-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px;display:block;}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:.02em;}
.section-title em{font-style:normal;color:var(--red);}
.section-desc{color:var(--text-2);margin-top:8px;}

/* Hero */
.hero{padding:80px 0 64px;border-bottom:1px solid var(--border);
  background:radial-gradient(1200px 400px at 20% -10%, rgba(255,58,58,.14), transparent 70%);}
.hero-inner{max-width:var(--measure);}
.hero-badge{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red-line);background:var(--red-soft);padding:5px 12px;border-radius:4px;margin-bottom:18px;}
.hero h1{font-size:clamp(2.6rem,8vw,4.6rem);line-height:1;margin-bottom:16px;}
.hero h1 em{font-style:normal;color:var(--red);}
.hero-sub{font-size:1.1rem;color:var(--text-2);margin-bottom:26px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* Hero-Slider
   Alle Slides liegen in derselben Grid-Zelle übereinander, damit die Höhe
   vom längsten Text bestimmt wird und beim Wechsel nichts springt.
   Die Banner sind links fast schwarz — der Text sitzt genau dort. */
.hslider{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--border);}
.hslider-track{display:grid;}
.hslide{grid-area:1/1;position:relative;display:flex;align-items:center;
  min-height:clamp(440px,42vw,600px);padding:64px 0 92px;}
/* Auch ohne JavaScript ist nur der erste Slide sichtbar. */
.hslide{opacity:0;visibility:hidden;}
.hslide.is-active{opacity:1;visibility:visible;}
.hslider--js .hslide{transition:opacity .7s ease,visibility 0s linear .7s;}
.hslider--js .hslide.is-active{transition:opacity .7s ease,visibility 0s;}

.hslide-bg{position:absolute;inset:0;display:block;}
.hslide-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block;}
/* Links abdunkeln für den Text, oben/unten leicht vignettieren fürs Layout. */
.hslide::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,14,.97) 0%,rgba(8,8,14,.94) 30%,rgba(8,8,14,.74) 48%,rgba(8,8,14,.34) 68%,rgba(8,8,14,.04) 88%,rgba(8,8,14,0) 100%);}
.hslide::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,14,.7) 0%,rgba(8,8,14,0) 20%,rgba(8,8,14,0) 86%,rgba(8,8,14,.35) 100%);}
.hslide>.container{position:relative;z-index:2;width:100%;}
.hslide-inner{max-width:min(560px,54vw);}
.hslide-titel{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:.01em;
  font-size:clamp(2.1rem,5.2vw,4rem);margin:0 0 14px;text-shadow:0 2px 26px rgba(0,0,0,.65);}
.hslide-titel em{font-style:normal;color:var(--red);}
/* Lange Guide-Titel dürfen den Slide nicht sprengen. */
.hslide-titel--lang{font-size:clamp(1.55rem,2.8vw,2.3rem);line-height:1.12;}
/* Das Schlachtfeld-Motiv lebt vom Horizont — den nach oben holen. */
.hslide-bg[data-motiv="schlachtfeld"] img{object-position:70% 62%;}
.hslide-text{color:var(--text-2);font-size:1.05rem;line-height:1.6;margin-bottom:24px;max-width:46ch;
  text-shadow:0 1px 14px rgba(0,0,0,.8);}

.hslider-ui{position:absolute;left:0;right:0;bottom:24px;z-index:3;}
.hslider-ui .container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.hslider-dots{display:flex;gap:8px;}
.hslider-dot{width:26px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(228,228,239,.28);transition:var(--t);}
.hslider-dot:hover{background:rgba(228,228,239,.55);}
.hslider-dot[aria-selected="true"]{background:var(--red);width:44px;}
.hslider-arrows{display:flex;gap:8px;}
.hslider-nav{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(8,8,14,.6);border:1px solid var(--border-hover);color:var(--text);transition:var(--t);}
.hslider-nav:hover{background:var(--red-soft);border-color:var(--red-line);color:var(--red);}
.hslider-dot:focus-visible,.hslider-nav:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* Auf dem Handy ist das Banner ein Bildstreifen oben, der Text steht darunter
   auf ruhigem Grund. Ein 1920×700-Motiv hinter Text zu quetschen kostet nur
   Lesbarkeit — die Leute kommen wegen der Guides, nicht wegen der Deko. */
@media (max-width:860px){
  .hslide{display:block;min-height:0;padding:0 0 78px;}
  .hslide-inner{max-width:none;}
  .hslide-bg{position:relative;inset:auto;height:180px;}
  .hslide-bg img{height:180px;object-position:66% 50%;}
  .hslide::after{inset:0 0 auto;height:180px;
    background:linear-gradient(180deg,rgba(8,8,14,0) 45%,rgba(8,8,14,.55) 78%,var(--bg) 100%);}
  .hslide::before{display:none;}
  .hslide>.container{padding-top:26px;}
  .hslide-titel,.hslide-text{text-shadow:none;}
  .hslide-text{font-size:1rem;}
  .hslider-arrows{display:none;}
  .hslider-ui{bottom:22px;}
}

@media (prefers-reduced-motion:reduce){
  .hslider--js .hslide{transition:none;}
}

/* ==========================================================================
   Spiel-Hub — der Einstieg läuft über das Spiel, nicht über die Bibliothek
   ========================================================================== */
.hub-head{padding:32px 0 8px;
  background:radial-gradient(1100px 360px at 15% -20%, rgba(255,58,58,.12), transparent 70%);}
.hub-head h1{margin:6px 0 16px;}
.hub-head h1 em{font-style:normal;color:var(--red);}
.hub-head .statusbar{margin-bottom:18px;}

/* Tools eines Spiels: Datenbanken, Finder, Rechner.
   Sehen aus wie Guide-Karten — sie sind gleichwertiger Inhalt, keine Fußnote. */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,360px));gap:20px;margin:28px 0;}
.tool{display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color var(--t),transform var(--t);}
.tool:hover{border-color:var(--red-line);transform:translateY(-2px);color:var(--text);}
.tool-bild{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-input);}
.tool-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.tool-icon{width:100%;height:100%;display:grid;place-items:center;color:var(--red);background:var(--red-soft);}
.tool-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.tool-tags{display:flex;gap:6px;}
.tag-tool{background:var(--red-soft);border-color:var(--red-line);color:var(--red);}
.tool-name{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;letter-spacing:.01em;}
.tool:hover .tool-name{color:var(--red);}
.tool-text{font-size:.9rem;color:var(--text-2);line-height:1.55;}
.tool-mehr{margin-top:auto;padding-top:4px;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red);}

/* Spielkacheln auf der Startseite */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.game{display:block;text-decoration:none;color:var(--text);background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--t);}
.game:hover{border-color:var(--red-line);color:var(--text);transform:translateY(-2px);}
.game-img{display:block;aspect-ratio:16/9;background:var(--bg-elevated);overflow:hidden;}
.game-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.game:hover .game-img img{transform:scale(1.04);}
.game-body{display:block;padding:14px 16px 16px;}
.game-name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.2;}
.game-meta{display:block;margin-top:5px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}

@media (prefers-reduced-motion:reduce){
  .game:hover{transform:none;}
  .game:hover .game-img img{transform:none;}
  .tool:hover{transform:none;}
}

/* Featured */
.featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;color:inherit;transition:border-color var(--t);}
.featured:hover{border-color:var(--red-line);color:inherit;}
.featured-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg-input);}
.featured-img img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0;}
.featured-body{padding:26px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center;}
.featured-tags{display:flex;flex-wrap:wrap;gap:8px;}
.featured-body h3{font-size:1.5rem;line-height:1.2;}
.featured-body p{color:var(--text-2);font-size:.97rem;margin:0;}
.featured-more{font-family:var(--font-display);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--red);font-size:.9rem;}

/* Stream */
.stream-section{background:var(--bg-elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stream-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:22px;align-items:start;}
.stream-player{position:relative;}
.stream-player iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-lg);display:block;}
.facade--twitch{aspect-ratio:16/9;border-radius:var(--radius-lg);border:1px solid var(--border);
  background:linear-gradient(140deg,#1b1330,var(--bg-card));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;}
.facade--twitch::after,.facade--twitch::before{display:none;}
.facade--twitch .facade-fallback{position:static;transform:none;font-size:1.15rem;color:#fff;}
.facade-note{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);max-width:34ch;text-align:center;line-height:1.5;}
.stream-side{display:flex;flex-direction:column;gap:14px;}
.stream-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;}
.stream-card h4{margin-bottom:14px;}
.schedule-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:.94rem;color:var(--text-2);}
.schedule-row:last-child{border-bottom:none;}
.schedule-row .mono{color:var(--red);}

/* Bibliothek */
.page-hero{padding:56px 0 26px;}
.page-hero h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:12px;}
.page-hero h1 em{font-style:normal;color:var(--red);}
.page-hero p{color:var(--text-2);max-width:var(--measure);margin:0;}

.filterbar{padding:0 0 8px;position:sticky;top:64px;z-index:20;background:rgba(8,8,14,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.filterbar .container{padding-top:16px;padding-bottom:14px;}
.gl-sprung ~ .filterbar{top:120px;}
.search-wrap{margin-bottom:12px;position:relative;max-width:520px;}

/* Vorschlagsliste unter dem Suchfeld
   Sitzt im .search-wrap, deshalb dort position:relative. Die Filterleiste ist
   sticky mit z-index 20 — die Liste muss darüber, sonst schiebt sich das
   Kartenraster davor. */
.sg-box{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-elevated);border:1px solid var(--border-hover);border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.55);padding:6px;
  scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;scroll-padding:6px 0;}
.sg-box::-webkit-scrollbar{width:8px;}
.sg-box::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px;}
.sg-box::-webkit-scrollbar-track{background:transparent;}
.sg-gruppe{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin:8px 10px 4px;}
.sg-gruppe:first-child{margin-top:4px;}
.sg-treffer{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:44px;
  border-radius:6px;text-decoration:none;color:var(--text);}
.sg-treffer.is-aktiv{background:var(--red-soft);}
.sg-label{flex:1 1 auto;min-width:0;font-family:var(--font-display);font-weight:600;font-size:1rem;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sg-label mark{background:none;color:var(--red);font-weight:700;}
.sg-sub{flex:0 0 auto;font-size:.78rem;color:var(--text-3);white-space:nowrap;}
.sg-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:.66rem;color:var(--text-2);
  border:1px solid var(--border);border-radius:4px;padding:3px 7px;white-space:nowrap;}
.sg-treffer.is-aktiv .sg-badge{border-color:var(--red-line);color:var(--red);}
.sg-leer{margin:0;padding:14px 12px;font-size:.92rem;color:var(--text-2);}
.sg-leer b{color:var(--text);}
.sg-leer span{display:block;margin-top:6px;font-size:.82rem;color:var(--text-3);}
.sg-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media (max-width:600px){
  .sg-sub{display:none;}
  .sg-box{max-height:56vh;}
}
.search-wrap input[type="search"]{width:100%;max-width:520px;padding:11px 15px;border-radius:var(--radius);
  background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:.95rem;}
.search-wrap input[type="search"]:focus{border-color:var(--red-line);outline:none;}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.filter-select{
  font-family:var(--font-display);font-weight:600;font-size:.88rem;letter-spacing:.03em;
  color:var(--text);background:var(--bg-input);border:1px solid var(--border);
  padding:9px 14px;border-radius:var(--radius);cursor:pointer;
}
.filter-select:focus{border-color:var(--red-line);outline:none;}
.filter-reset{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);background:none;border:1px solid transparent;cursor:pointer;padding:9px 10px;
}
.filter-reset:hover{color:var(--red);}
.results-count{font-family:var(--font-mono);font-size:.75rem;color:var(--text-3);margin:12px 0 0;}
.results-count #dg-count{color:var(--red);}

.card-tags{display:flex;flex-wrap:wrap;gap:6px;}
.tag-game{background:var(--yellow-soft);color:var(--yellow);border-color:rgba(255,210,52,.3);}
.tag-diff{background:var(--neon-soft);color:var(--neon);border-color:rgba(180,255,57,.3);}
.tag-patch{background:var(--yellow-soft);color:var(--yellow);border:1px solid rgba(255,210,52,.3);}
.card-excerpt{font-size:.9rem;color:var(--text-2);line-height:1.55;margin:0;}
.card[hidden]{display:none;}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-2);}
.empty-state h3{margin-bottom:8px;color:var(--text);}
.empty-state p{margin-bottom:18px;}

@media (max-width:860px){
  .featured{grid-template-columns:1fr;}
  .stream-layout{grid-template-columns:1fr;}
  .filterbar{position:static;}
}


/* ==========================================================================
   Fußbereich — Grid statt der alten einzeiligen Flex-Zeile
   ========================================================================== */
.footer-grid{padding-top:56px;padding-bottom:40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-brand h4{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;color:var(--text);}
.footer-brand h4 span{color:var(--red);}
.footer-brand p{margin:0;max-width:34ch;line-height:1.6;}
.footer-col h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px;font-weight:500;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{text-decoration:none;}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px;}

.footer-bottom{padding-top:20px;padding-bottom:32px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;}
.footer-bottom .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.footer-legal a{text-decoration:none;}
.footer-legal a:hover{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   3D-Controller — Sticky-Scroll-Section, übernommen aus der Astro-Fassung
   ========================================================================== */
.controller-section{position:relative;height:180vh;}
.controller-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.controller-sticky::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,var(--bg) 80%);z-index:0;pointer-events:none;}
#controller-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}

.keywords{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.keyword{position:absolute;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:0;white-space:nowrap;will-change:transform,opacity;}
.keyword.neon{color:var(--neon);}
.keyword.light{color:rgba(240,240,240,.9);}
.keyword.dim{color:rgba(240,240,240,.35);}
/* Vom Rand aus positioniert, nicht vom Mittelpunkt: sonst wandern die
   rechten Wörter auf breiten Monitoren aus dem Bild. */
.kw-1{font-size:clamp(2.5rem,7vw,5.5rem);top:22%;left:4vw;}
.kw-2{font-size:clamp(2rem,5.2vw,4.5rem);top:20%;right:3vw;}
.kw-3{font-size:clamp(2.8rem,8vw,6rem);bottom:24%;left:5vw;}
.kw-4{font-size:clamp(2rem,6vw,4.5rem);bottom:28%;right:4vw;}
.kw-5{font-size:clamp(1.8rem,5vw,4rem);top:43%;left:7vw;}
.kw-6{font-size:clamp(1.8rem,5vw,4rem);top:40%;right:8vw;}

.tagline-overlay{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);text-align:center;z-index:3;opacity:0;pointer-events:none;padding:0 20px;}
.tagline-overlay h2{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,2.2rem);font-weight:600;color:var(--text);letter-spacing:.08em;margin-bottom:.6rem;}
.tagline-overlay p{font-size:clamp(.85rem,1.3vw,1rem);color:var(--text-2);max-width:44ch;line-height:1.7;margin:0 auto;}

/* Fallback: kein WebGL, schmaler Viewport, Datensparmodus oder reduzierte
   Bewegung. Dann bleibt die Aussage stehen, der ganze 3D-Apparat nicht. */
.controller-section--statisch{height:auto;}
.controller-section--statisch .controller-sticky{position:static;height:auto;padding:96px 0;}
.controller-section--statisch #controller-canvas,
.controller-section--statisch .keywords{display:none;}
.controller-section--statisch .tagline-overlay{position:static;transform:none;opacity:1;}

/* ==========================================================================
   Tarstein-Finder
   ========================================================================== */
.ts-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-2);white-space:nowrap;cursor:pointer;}
.ts-toggle input{accent-color:var(--red);width:15px;height:15px;cursor:pointer;}

.ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;}
.ts-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:90px;}
.ts-card[hidden]{display:none;}
.ts-card:target{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line);}

.ts-head{display:flex;align-items:center;gap:14px;}
.ts-icon{width:120px;height:120px;flex:0 0 120px;border-radius:10px;object-fit:contain;padding:6px;
  background:radial-gradient(circle at 50% 40%,#2b2b3f 0%,#16161f 70%);border:1px solid var(--border-hover);
  filter:brightness(1.3) contrast(1.06);}
.ts-icon--leer{display:block;}
.ts-head h2{font-size:1.02rem;line-height:1.22;margin:0;}
.ts-en{font-family:var(--font-mono);font-size:.74rem;color:var(--text-3);margin:4px 0 0;letter-spacing:.02em;}

.ts-tags{display:flex;flex-wrap:wrap;gap:6px;}
.ts-effekt{font-size:.92rem;color:var(--text-2);line-height:1.55;margin:0;}
.ts-offen{font-size:.85rem;color:var(--text-3);line-height:1.5;margin:0;font-style:italic;}

.ts-stufen{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px;font-size:.88rem;color:var(--text-2);line-height:1.45;}
.ts-stufe{display:inline-block;min-width:5.6em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);}
.ts-stufen[data-ohne-werte="1"] .ts-stufe{color:var(--text-3);}

.ts-fundort{font-size:.85rem;color:var(--text-2);line-height:1.5;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--border);}
.ts-fundort strong{color:var(--text);font-weight:600;}

.ts-ph{font-family:var(--font-mono);font-size:.85em;color:var(--yellow);background:var(--yellow-soft);border:1px solid rgba(255,210,52,.28);border-radius:4px;padding:0 4px;cursor:help;}

.ts-quellen{margin-top:56px;padding-top:28px;border-top:1px solid var(--border);}
.ts-quellen h2{font-size:1.2rem;margin-bottom:14px;}
.ts-quellen p{font-size:.9rem;color:var(--text-2);line-height:1.65;margin:0 0 12px;}

@media (max-width:560px){
  .ts-grid{grid-template-columns:1fr;}
  .ts-toggle{width:100%;}
}

/* ==========================================================================
   Glossar — Deutsch ↔ Englisch

   Zwei Spalten statt Karten: bei 866 Einträgen ist eine Kartenwand zum
   Nachschlagen unbrauchbar. Eine Zeile pro Begriff, deutsch fett voran,
   englisch als Nebenzeile — das Auge scannt die linke Kante.
   ========================================================================== */
.gl-az{display:flex;flex-wrap:wrap;gap:2px;margin:12px 0 0;}
.gl-az[hidden]{display:none;}
.gl-az-b{font-family:var(--font-mono);font-size:.74rem;line-height:1;padding:6px 7px;border:0;border-radius:5px;
  background:transparent;color:var(--text-2);cursor:pointer;}
.gl-az-b:hover{background:var(--bg-card);color:var(--red);}
.gl-az-b.is-leer{color:var(--border-hover);cursor:default;}

/* Sprungleiste — klebt unter dem Seitenkopf und sagt, was auf der Seite steht.
   Hoeher im Stapel als die Filterleiste, damit die darunter durchlaeuft. */
.gl-sprung{position:sticky;top:64px;z-index:25;background:rgba(8,8,14,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.gl-sprung .container{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;}
.gl-sprung-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;}
.gl-sprung-liste{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.gl-sprung-liste::-webkit-scrollbar{display:none;}
.gl-sprung-liste a{display:flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  font-size:.85rem;color:var(--text-2);padding:6px 11px;border-radius:6px;border:1px solid transparent;}
.gl-sprung-liste a:hover{color:var(--text-1);background:var(--bg-card);}
.gl-sprung-liste a.is-hier{color:var(--red);border-color:var(--red-line);background:var(--red-soft);}
.gl-sprung-liste a span{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);}
.gl-sprung-liste a.is-hier span{color:var(--red);}

/* Zwischenueberschrift innerhalb eines Abschnitts (Mechaniken-Gruppen). */
.gl-untertitel{display:flex;align-items:baseline;gap:12px;margin:38px 0 16px;
  padding-bottom:8px;border-bottom:1px solid var(--border);}
.gl-untertitel:first-of-type{margin-top:0;}
.gl-untertitel h3{margin:0;font-family:var(--font-display);font-size:1.28rem;line-height:1;}
.gl-untertitel span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--text-3);}

/* Namensliste — Baender, Rubriken, Zeilen.
   Die Liste selbst ist nur noch ein Stapel; das Raster sitzt eine Ebene
   tiefer in .gl-grid, damit jede Rubrik ihre eigenen Spalten bekommt und
   die Sortierung nicht ueber Ueberschriften hinweglaeuft. */
.gl-liste{display:flex;flex-direction:column;gap:34px;}
.gl-liste[hidden],.gl-flach[hidden]{display:none;}

.gl-band[hidden]{display:none;}
.gl-band-kopf{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:0 12px;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.gl-band-kopf h3{margin:0;font-family:var(--font-display);font-size:1.42rem;line-height:1;letter-spacing:.01em;}
.gl-band-zahl{font-family:var(--font-mono);font-size:.7rem;line-height:1;color:var(--red);
  background:var(--red-soft);border:1px solid var(--red-line);border-radius:20px;padding:4px 9px;}
.gl-band-kurz{grid-column:1/-1;margin:7px 0 0;font-size:.88rem;line-height:1.5;color:var(--text-2);}

.gl-gruppe{border:1px solid var(--border);border-radius:10px;background:var(--bg-card);margin-bottom:8px;}
.gl-gruppe[hidden]{display:none;}
.gl-gruppe[open]{border-color:var(--border-hover);}
.gl-gruppe > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:13px 16px;min-height:44px;border-radius:10px;}
.gl-gruppe > summary::-webkit-details-marker{display:none;}
.gl-gruppe > summary::after{content:"";width:7px;height:7px;margin-left:auto;flex:none;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .15s ease;}
.gl-gruppe[open] > summary::after{transform:rotate(-135deg) translateY(-2px);}
.gl-gruppe > summary:hover{background:var(--bg-elevated);}
.gl-gruppe > summary:hover .gl-gruppe-name{color:var(--red);}
.gl-gruppe-name{font-weight:600;font-size:1rem;color:var(--text-1);}
.gl-gruppe-zahl{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);
  background:var(--bg-input);border-radius:20px;padding:3px 8px;}
.gl-gruppe > .gl-grid{padding:2px 12px 14px;}

.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 24px;}
.gl-flach{margin-top:8px;}

.gl-trenner{grid-column:1/-1;margin:26px 0 6px;
  font-family:var(--font-display);font-size:1.1rem;line-height:1;color:var(--red);
  padding:6px 0;border-bottom:1px solid var(--border);background:var(--bg);}
.gl-trenner:first-child{margin-top:0;}

.gl-eintrag{padding:11px 12px;border-radius:8px;border:1px solid transparent;scroll-margin-top:220px;}
.gl-eintrag[hidden]{display:none;}
.gl-eintrag:nth-child(odd){background:rgba(255,255,255,.014);}
.gl-eintrag.is-treffer{border-color:var(--red-line);background:rgba(255,58,58,.06);}

/* Ansichtsumschalter Thema / A–Z */
.gl-ansicht{display:inline-flex;gap:2px;padding:2px;border-radius:8px;
  background:var(--bg-input);border:1px solid var(--border);}
.gl-ans-b{font-size:.82rem;line-height:1;padding:8px 13px;min-height:34px;border:0;border-radius:6px;
  background:transparent;color:var(--text-2);cursor:pointer;}
.gl-ans-b:hover{color:var(--text-1);}
.gl-ans-b.is-aktiv{background:var(--red);color:#fff;}
#gl-alle[hidden]{display:none;}

.gl-de{margin:0;font-weight:600;font-size:.97rem;line-height:1.25;color:var(--text-1);}
.gl-en{margin:2px 0 0;font-family:var(--font-mono);font-size:.78rem;line-height:1.3;color:var(--text-2);}
.gl-selbe{color:var(--text-3);font-style:italic;}
.gl-hinweis{margin:6px 0 0;font-size:.82rem;line-height:1.45;color:var(--text-2);}

.gl-rubriken{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:5px;}
.gl-rubriken .tag{font-size:.63rem;padding:2px 6px;}

.gl-quelle{margin:32px 0 0;font-size:.82rem;color:var(--text-3);}

@media (max-width:760px){
  .gl-sprung .container{gap:10px;}
  .gl-sprung-label{display:none;}
  .gl-band-kopf h3{font-size:1.22rem;}
}

@media (max-width:560px){
  .gl-grid{grid-template-columns:1fr;}
  .gl-az{gap:0;}
  .gl-liste{gap:26px;}
  .gl-gruppe > .gl-grid{padding:2px 8px 12px;}
  .gl-ansicht{width:100%;}
  .gl-ans-b{flex:1;}
}

/* --- Hüllen-Steckbriefe --------------------------------------------------
   Der inhaltliche Teil des Nachschlagewerks. Breitere Karten als die
   Namensliste, weil hier Fließtext steht, den man liest statt scannt. */
.hue-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:22px;}
.hue{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:22px 24px;
  display:flex;flex-direction:column;gap:14px;scroll-margin-top:100px;}
.hue:target{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line);}

.hue-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;}
.hue-kopf h3{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1;letter-spacing:.01em;}
.hue-rolle{margin:0;font-size:.86rem;color:var(--text-2);}
.hue-tags{margin:0;width:100%;display:flex;gap:6px;flex-wrap:wrap;}

.hue-kurz{margin:0;font-size:1rem;line-height:1.5;color:var(--text-1);border-left:2px solid var(--red-line);padding-left:12px;}

.hue-block{margin:0;}
.hue-label{margin:0 0 5px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
.hue-block p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-2);}
.hue-block b{color:var(--text-1);font-weight:600;}

.hue-faehig{margin:0;}
.hue-faehig dt{font-weight:600;font-size:.9rem;color:var(--text-1);margin-top:9px;}
.hue-faehig dt:first-child{margin-top:0;}
.hue-faehig dd{margin:2px 0 0;font-size:.88rem;line-height:1.55;color:var(--text-2);}

.hue-achtung{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-2);
  background:rgba(255,58,58,.06);border:1px solid var(--red-line);border-radius:8px;padding:11px 13px;}
.hue-notiz{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-1);
  background:var(--bg-input);border-radius:8px;padding:11px 13px;}
.hue-notiz span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:4px;}

.hue-zweige{margin-top:auto;}
.hue-zweige summary{cursor:pointer;font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}
.hue-zweige summary:hover{color:var(--red);}
.hue-zweige p{margin:8px 0 0;font-size:.8rem;line-height:1.6;color:var(--text-2);}

.section--duenn{padding-bottom:0;}

@media (max-width:560px){
  .hue-liste{grid-template-columns:1fr;}
  .hue{padding:18px;}
}

/* --- Builds am Steckbrief ------------------------------------------------
   Der Steckbrief ist Einstieg, nicht Endstation: wer bis hierher liest,
   will den Build sehen. Das Vorschaubild läuft deshalb über die volle
   Kartenbreite statt als Briefmarke daneben — bei den Guide-Karten wirkt
   genau das, und ein 96px-Streifen sah daneben aus wie eine Fußnote. */
.hue-builds{margin:0;}
.hue-build{display:flex;flex-direction:column;text-decoration:none;color:var(--text-1);
  background:var(--bg-input);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  margin-top:12px;transition:border-color .15s,transform .15s;}
.hue-build:first-of-type{margin-top:0;}
.hue-build:hover{border-color:var(--red-line);transform:translateY(-2px);color:var(--text-1);}

.hue-build-bildwrap{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-card);}
.hue-build-bild{width:100%;height:100%;object-fit:cover;display:block;}

/* Play-Symbol nur dort, wo im Guide wirklich ein Video steckt. */
.hue-build-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,58,58,.92);
  box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .15s,background .15s;}
.hue-build-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;}
.hue-build:hover .hue-build-play{transform:translate(-50%,-50%) scale(1.08);background:var(--red);}

.hue-build-text{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;}
.hue-build-titel{font-size:.95rem;font-weight:600;line-height:1.32;}
.hue-build:hover .hue-build-titel{color:var(--red);}
.hue-build-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);}

/* --- Mechaniken und Statuseffekte ---------------------------------------
   Schmalere Karten als die Hüllen: hier stehen zwei bis vier Sätze, keine
   Steckbriefe. align-items:start verhindert, dass eine kurze Karte auf die
   Höhe ihrer langen Nachbarin gezogen wird und unten ins Leere läuft. */
.mech-liste,.stat-liste{display:grid;gap:18px;align-items:start;}
.mech-liste{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}
.stat-liste{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

.mech,.stat-eff{background:var(--bg-card);border:1px solid var(--border);border-radius:11px;
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;scroll-margin-top:100px;}
.mech:target,.stat-eff:target{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line);}

.mech-kopf,.stat-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;}
.mech-kopf h4,.mech-kopf h3,.stat-kopf h3{margin:0;font-family:var(--font-display);font-size:1.16rem;line-height:1.15;}
.mech-en,.stat-en{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}

.mech-text{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-2);}
.mech-text b{color:var(--text-1);font-weight:600;}

.stat-wirkung{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-2);}
.stat-wirkung--offen{color:var(--text-3);font-style:italic;}
.stat-unsicher{margin:0;font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);}
.stat-immun{margin:0;font-size:.8rem;color:var(--text-3);}
.stat-immun a{color:var(--text-2);}
.stat-immun a:hover{color:var(--red);}

.stat-steine{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.stat-steine .hue-label{width:100%;margin:0;}
.stat-stein{font-size:.74rem;padding:3px 8px;border-radius:5px;background:var(--bg-input);
  border:1px solid var(--border);color:var(--text-2);text-decoration:none;}
.stat-stein:hover{border-color:var(--red-line);color:var(--red);}

/* Hüllen-Karten nicht auf gleiche Höhe ziehen — sonst klafft unter der
   kürzeren Karte eine Lücke, sobald die Nachbarin einen Build hat. */
.hue-liste{align-items:start;}

/* --- Symbole -------------------------------------------------------------
   Inline gezeichnet statt als Bilddatei: kein zusätzlicher Request, und sie
   nehmen die Farbe des Textes an, in dem sie stehen. */
.sym{width:1em;height:1em;flex:0 0 auto;vertical-align:-.14em;}
.tag .sym{margin-right:5px;vertical-align:-.16em;}

.sym--eff{width:30px;height:30px;flex:0 0 30px;color:var(--red);opacity:.9;
  padding:5px;border-radius:8px;background:rgba(255,58,58,.08);
  border:1px solid var(--red-line);box-sizing:border-box;}

.stat-kopf{align-items:center;gap:10px;flex-wrap:nowrap;}
.stat-titel{min-width:0;}
.stat-titel h3{margin:0;font-family:var(--font-display);font-size:1.16rem;line-height:1.15;}

/* Tarstein-Kacheln: das Steinbild ist der eigentliche Wiedererkennungswert,
   der Name allein sagt niemandem etwas. */
.stat-steine{flex-direction:row;flex-wrap:wrap;}
.stat-stein{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;}
.stat-stein img{width:44px;height:44px;object-fit:contain;display:block;
  border-radius:6px;background:radial-gradient(circle at 50% 40%,#2b2b3f 0%,#16161f 70%);
  filter:brightness(1.3) contrast(1.06);}

/* --- Rückweg aus dem Guide ins Nachschlagewerk --------------------------- */
.nachschlag{margin:44px 0 0;}
.nachschlag h2{font-size:1.3rem;margin:0 0 16px;}
.nachschlag-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.nachschlag-ziel{display:flex;flex-direction:column;gap:5px;padding:15px 17px;text-decoration:none;
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  transition:border-color .15s,transform .15s;}
.nachschlag-ziel:hover{border-color:var(--red-line);transform:translateY(-2px);}
.nachschlag-name{font-weight:600;font-size:.97rem;line-height:1.3;color:var(--text-1);}
.nachschlag-ziel:hover .nachschlag-name{color:var(--red);}
.nachschlag-text{font-size:.85rem;line-height:1.5;color:var(--text-2);}

/* --- Fanseiten- und Markenhinweis ---------------------------------------
   Steht bewusst über der Rechtszeile und nicht versteckt im Impressum:
   Der Hinweis wirkt nur, wenn Besucher ihn auch sehen. */
.footer-hinweis{padding-top:26px;border-top:1px solid var(--border);}
.footer-hinweis p{margin:0;font-size:.76rem;line-height:1.6;color:var(--text-3);max-width:none;}

/* --- Nachschlagewerk: spielübergreifende Ergänzungen ---------------------
   Icons und Stufenangaben kommen nur bei Spielen vor, die sie liefern —
   Mortal Shell 2 hat keine, Star Wars schon. Beides optional. */
.hue-icon{width:46px;height:46px;flex:0 0 46px;object-fit:contain;border-radius:9px;padding:5px;
  background:radial-gradient(circle at 50% 40%,#2b2b3f 0%,#16161f 70%);
  border:1px solid var(--border-hover);}
.hue-kopf{align-items:center;}
.hue-stufen{font-family:var(--font-mono);font-size:.63rem;font-weight:400;color:var(--text-3);
  margin-left:7px;padding:1px 5px;border:1px solid var(--border);border-radius:4px;}
.hue-faehig dt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.faehig-icon{width:22px;height:22px;flex:0 0 22px;object-fit:contain;border-radius:5px;
  background:rgba(255,255,255,.05);}

/* ==========================================================================
   Streifen-Tabellen lesbar halten
   
   WordPress liefert den Stil "Streifen" aus dem Block-Core mit — und der
   rechnet mit einer hellen Seite: Er setzt jede zweite Zeile auf ein helles
   Grau. Auf dunklem Grund bleibt unsere Schrift hell, und die Zeile wird
   unlesbar. Das fällt beim Schreiben nicht auf, weil der Editor hell ist.
   
   Deshalb hier: Streifen auf einen dunklen Ton drehen und die Textfarbe
   erzwingen. Damit ist der Stil auch dann sicher, wenn ihn jemand später
   im Editor per Klick auswählt.
   ========================================================================== */
.entry .wp-block-table.is-style-stripes,
.entry .wp-block-table.is-style-stripes table{background:transparent;border-bottom:0;}
.entry .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.entry table.is-style-stripes tbody tr:nth-child(odd){background:rgba(255,255,255,.04);}
.entry .wp-block-table.is-style-stripes tbody tr:nth-child(even),
.entry table.is-style-stripes tbody tr:nth-child(even){background:transparent;}
.entry .wp-block-table.is-style-stripes td,
.entry .wp-block-table.is-style-stripes th,
.entry table.is-style-stripes td,
.entry table.is-style-stripes th{color:var(--text);border-color:var(--border);}

/* ==========================================================================
   Spiel-Steckbrief — Bild plus harte Fakten
   
   Ersetzt die nackte Tabelle für Release, Plattformen und Preise. Die Zahlen
   sind das, wonach jemand vor dem Kauf sucht; das Bild sorgt dafür, dass er
   auf dem Weg dorthin nicht an einer Textwüste vorbeiscrollt.
   ========================================================================== */
.spiel-fakten{
  max-width:var(--measure);margin:30px 0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.spiel-fakten__bild{margin:0;position:relative;line-height:0;background:var(--bg-elevated);}
.spiel-fakten__bild img{width:100%;height:auto;display:block;}
/* Weicher Verlauf nach unten, damit Bild und Faktenblock eine Einheit bilden
   statt zwei aufeinandergestapelter Kacheln. */
.spiel-fakten__bild::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to bottom,transparent,var(--bg-card));pointer-events:none;
}
.spiel-fakten__quelle{
  position:absolute;right:10px;bottom:8px;z-index:1;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);background:rgba(8,8,14,.68);padding:3px 7px;border-radius:4px;line-height:1.4;
}
.spiel-fakten__liste{margin:0;padding:6px 20px 16px;}
.spiel-fakten__liste > div{
  display:grid;grid-template-columns:minmax(120px,29%) 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border);align-items:baseline;
}
.spiel-fakten__liste > div:last-child{border-bottom:0;}
.spiel-fakten__liste dt{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:0;
}
.spiel-fakten__liste dd{margin:0;color:var(--text);font-size:.96rem;}
.spiel-fakten__liste dd b,.spiel-fakten__liste dd strong{color:#fff;font-weight:600;}
.spiel-fakten__liste .fakt-zusatz{display:block;color:var(--text-2);font-size:.86rem;margin-top:2px;}

@media (min-width:720px){
  .spiel-fakten{display:grid;grid-template-columns:44% 1fr;align-items:stretch;}
  .spiel-fakten__bild{height:100%;}
  .spiel-fakten__bild img{height:100%;object-fit:cover;}
  /* Quer statt hoch: Der Verlauf läuft jetzt nach rechts in den Faktenblock. */
  .spiel-fakten__bild::after{inset:0 0 0 auto;width:34%;height:auto;
    background:linear-gradient(to right,transparent,var(--bg-card));}
  .spiel-fakten__liste{padding:14px 22px;align-self:center;}
}

/* Werbe-Box mit Produktkachel — Bild links, Text rechts.
   Ohne Bild bleibt die alte einspaltige Form erhalten, damit Guides ohne
   hinterlegtes Cover unverändert aussehen. */
.deal--bild{display:grid;grid-template-columns:130px 1fr;column-gap:16px;row-gap:12px;}
.deal--bild .deal-label{grid-column:1/-1;margin-bottom:-4px;}
.deal--bild .deal-text{min-width:0;}
.deal-bild{
  display:block;line-height:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-elevated);
  transition:border-color .15s ease,transform .15s ease;
}
.deal-bild:hover,.deal-bild:focus-visible{border-color:var(--border-hover);transform:translateY(-2px);}
.deal-bild img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;}
@media (min-width:620px){
  .deal--bild{grid-template-columns:180px 1fr;column-gap:22px;align-items:start;}
}
.deal--bild h3{margin-top:0;}

/* ---------- Unterstützen ---------- */

/* Der Kasten wird mitten in .entry eingefügt und würde sonst die
   Abstände der Artikel-Überschriften und -Absätze erben. */
.entry .uf-titel{margin:0 0 12px;padding:0;border:0;scroll-margin-top:0;}
.entry .uf-titel::before,.entry .uf-titel::after{content:none;}
.entry .uf-label,.entry .uf-text{margin:0;}
.entry .uf-text + .uf-text{margin-top:13px;}
.entry .uf-fuss{margin:14px 0 0;}
.entry .uf-knopf{margin:22px 0 0;}

.uf{
  max-width:var(--measure);
  margin:44px 0;
  padding:26px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,58,58,.13) 0%, rgba(255,58,58,0) 58%),
    var(--bg-card);
  border:1px solid var(--border-hover);
  border-left:3px solid var(--red);
  border-radius:var(--radius-lg);
}
.uf--bild{
  display:flex;
  align-items:flex-start;
  gap:24px;
}
.uf--bild .uf-bild{flex:0 0 auto;}
.uf--bild .uf-bild img{
  display:block;
  width:124px;
  height:124px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--red-line);
}

/* Breites Banner: randlos über den ganzen Kasten. */
.uf--banner{padding:0;overflow:hidden;}
.uf--banner .uf-bild{margin:0;}
.uf--banner .uf-bild img{
  display:block;
  width:100%;
  height:auto;
  border-bottom:1px solid var(--border-hover);
}
.uf--banner .uf-inhalt{padding:24px 26px 26px;}
.uf--banner .uf-label{margin-bottom:6px;}
.uf--banner .uf-titel{font-size:1.5rem;}
.uf-inhalt{min-width:0;flex:1 1 auto;}
.uf-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 8px;
}
.uf-titel{
  font-family:var(--font-display);
  font-size:1.72rem;
  line-height:1.15;
  margin:0 0 12px;
  color:var(--text);
}
.uf-text{
  margin:0;
  color:var(--text-2);
  font-size:1rem;
  line-height:1.7;
}
.uf-text + .uf-text{margin-top:13px;}
.uf-ziel{margin:22px 0 4px;}
.uf-ziel-zeile{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  align-items:baseline;
  justify-content:space-between;
  font-size:.86rem;
  color:var(--text-3);
  margin-bottom:8px;
}
.uf-ziel-name{
  font-family:var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.72rem;
}
.uf-ziel-zahl{color:var(--text-2);}
.uf-ziel-zahl b{color:var(--text);font-weight:600;}
.uf-balken{
  height:9px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.uf-balken-fuellung{
  display:block;
  height:100%;
  min-width:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff3a3a,#ff8a3a);
}
.uf-knopf{
  display:inline-block;
  margin:22px 0 0;
  padding:14px 30px;
  background:var(--red);
  color:#0b0b12;
  font-family:var(--font-display);
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(255,58,58,.28);
  transition:transform var(--t),filter var(--t),box-shadow var(--t);
}
.uf-knopf:hover,.uf-knopf:focus-visible{
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(255,58,58,.36);
  color:#0b0b12;
}
.uf-fuss{
  margin:14px 0 0;
  font-size:.82rem;
  line-height:1.6;
  color:var(--text-3);
}
/* Kasten auf Seiten ohne Textspalte (Nachschlagewerke, Werkzeuge). */
.uf-huelle{margin-bottom:64px;}
.uf-huelle .uf{margin:0 auto;}

/* ---------- Support-Knopf in der Kopfzeile ---------- */
.nav-support{
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  padding:7px 14px 6px;
  border:1px solid var(--red-line);
  border-radius:var(--radius);
  background:rgba(255,58,58,.07);
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--t),border-color var(--t);
}
.nav-support:hover,.nav-support:focus-visible{
  background:rgba(255,58,58,.14);
  border-color:var(--red);
}
.nav-support-kopf{
  display:flex;
  align-items:center;
  gap:7px;
}
.nav-support-herz{fill:var(--red);flex:0 0 auto;}
.nav-support-text{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
}
.nav-support-balken{
  display:block;
  height:4px;
  background:var(--bg-input);
  border-radius:999px;
  overflow:hidden;
}
.nav-support-balken > span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ff3a3a,#ff8a3a);
}
@media (max-width:820px){
  .nav-support{padding:6px 10px 5px;}
  .nav-support-text{display:none;}
  .nav-support-balken{min-width:34px;}
}
@media (prefers-reduced-motion:reduce){
  .nav-support{transition:none;}
}

@media (max-width:640px){
  .uf{padding:22px 18px;border-radius:var(--radius);}
  .uf-huelle{margin-bottom:44px;}
  .uf--banner{padding:0;}
  .uf--banner .uf-inhalt{padding:20px 18px 22px;}
  .uf--bild{flex-direction:column;align-items:center;text-align:center;gap:16px;}
  .uf--bild .uf-ziel-zeile{justify-content:center;}
  .uf--bild .uf-bild img{width:96px;height:96px;}
  .uf-titel{font-size:1.36rem;}
  .uf--banner .uf-titel{font-size:1.3rem;}
  .uf-knopf{display:block;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .uf-knopf{transition:none;}
  .uf-knopf:hover,.uf-knopf:focus-visible{transform:none;}
}

/* ---------- Kompakter Support-Streifen über Werkzeugen ---------- */
.ufs{
  margin:0 0 8px;
  padding:14px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(255,58,58,.12) 0%, rgba(255,58,58,.03) 42%, rgba(255,58,58,0) 78%),
    var(--bg-elevated);
}
.ufs-innen{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.ufs-herz{fill:var(--red);flex:0 0 auto;width:22px;height:20px;}
.ufs-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ufs-text strong{
  font-family:var(--font-display);
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}
.ufs-text span{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ufs-balken{
  flex:1 1 120px;
  max-width:260px;
  height:6px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.ufs-balken > span{
  display:block;
  height:100%;
  min-width:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff3a3a,#ff8a3a);
}
.ufs-knopf{
  margin-left:auto;
  flex:0 0 auto;
  padding:10px 22px;
  border-radius:var(--radius);
  background:var(--red);
  color:#0b0b12;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  text-decoration:none;
  transition:filter var(--t),transform var(--t);
}
.ufs-knopf:hover,.ufs-knopf:focus-visible{filter:brightness(1.1);transform:translateY(-1px);color:#0b0b12;}
@media (max-width:700px){
  .ufs-innen{gap:12px;}
  .ufs-text{flex:1 1 auto;}
  .ufs-balken{flex:1 1 100%;max-width:none;order:3;}
  .ufs-knopf{margin-left:0;order:2;padding:9px 16px;font-size:.9rem;}
}
@media (prefers-reduced-motion:reduce){
  .ufs-knopf{transition:none;}
  .ufs-knopf:hover,.ufs-knopf:focus-visible{transform:none;}
}