/* ============================================================
 * WatchGuide 2026 — Genre-Kategorie (.wgrev / wgc-*)
 * Neuer Look fuer Film-/Serien-Genre-Archive (category-2026.php).
 * Eigenstaendig + kollisionsfrei: alles unter .wgrev .wgc-*.
 * Bringt eigene Mobile-Regeln mit -> kein wg-2026-mobile-nuclear noetig.
 * Stand: 2026-06-03
 * ============================================================ */

/* Tokens = Zentrale-Palette (design-system-zentrale-2026.md §1, Rollout ② 14.07.2026) */
:root{
  --wg-bg:#0d0f14; --wg-bg-2:#12151c; --wg-panel:#161a23; --wg-panel-2:#1b2029;
  --wg-o:#ff6b00; --wg-o-2:#ff8533; --wg-txt:#eef0f4; --wg-muted:#a3abba;
  --wg-line:#252b38; --wg-line-2:#1e2430;
  --wg-radius:14px; --wg-max:1300px;
  --wg-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --wg-green:#34d399; --wg-blue:#4f7fff; --wg-gold:#e8c268;
}

/* base — nur auf der Genre-Seite (body-Marker) */
body.wg-gen2026{margin:0;background:var(--wg-bg);color:var(--wg-txt);font-family:var(--wg-ui);-webkit-font-smoothing:antialiased}
body.wg-gen2026 .wgrev{font-size:17px;line-height:1.65}
.wgrev *{box-sizing:border-box}
.wgrev img{max-width:100%;display:block}
.wgrev a{color:inherit;text-decoration:none}
.wgrev .wgc-wrap{max-width:var(--wg-max);margin:0 auto;padding:0 22px}

/* breadcrumb */
.wgrev .wgc-bc{padding:18px 0 0;font-size:.82rem;color:var(--wg-muted)}
.wgrev .wgc-bc a:hover{color:var(--wg-o-2)}
.wgrev .wgc-bc span{color:var(--wg-txt)}

/* compact hero */
.wgrev .wgc-hero{padding:14px 0 8px}
.wgrev .wgc-kick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:var(--wg-muted);text-transform:uppercase;letter-spacing:.05em}
.wgrev .wgc-fresh{color:var(--wg-green);display:inline-flex;align-items:center;gap:5px}
.wgrev .wgc-fresh::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wg-green);box-shadow:0 0 0 3px rgba(57,217,138,.2)}
.wgrev .wgc-h1{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:900;letter-spacing:-.025em;margin:.25em 0 .15em;line-height:1.05;color:#fff}
.wgrev .wgc-answer{font-size:1.1rem;line-height:1.55;margin:.4em 0 .7em;color:#eef2f7}
.wgrev .wgc-answer b{color:#fff;background:linear-gradient(transparent 62%,rgba(255,107,0,.22) 62%)}
.wgrev .wgc-mini{display:flex;gap:22px;flex-wrap:wrap;padding:10px 0 2px;border-top:1px solid var(--wg-line-2)}
.wgrev .wgc-mini div{display:flex;flex-direction:column;line-height:1.1}
.wgrev .wgc-mini strong{font-size:1.5rem;font-weight:900;color:#fff}
.wgrev .wgc-mini span{font-size:.76rem;color:var(--wg-muted);margin-top:2px}

/* sticky sort/filter bar */
.wgrev .wgc-bar{position:sticky;top:0;z-index:30;background:rgba(10,11,13,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--wg-line);border-bottom:1px solid var(--wg-line);margin-top:14px}
.wgrev .wgc-bar-in{max-width:var(--wg-max);margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 22px;flex-wrap:wrap}
.wgrev .wgc-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.wgrev .wgc-chip{background:var(--wg-panel);border:1px solid var(--wg-line);color:var(--wg-muted);border-radius:999px;padding:6px 13px;font-size:.84rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s;font-family:inherit}
.wgrev .wgc-chip:hover{border-color:rgba(255,107,0,.5);color:var(--wg-txt)}
.wgrev .wgc-chip.on{background:var(--wg-o);border-color:var(--wg-o);color:#160c02}
.wgrev .wgc-chip .wgc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.wgrev .wgc-sort{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--wg-muted)}
.wgrev .wgc-sort select{background:var(--wg-panel);color:var(--wg-txt);border:1px solid var(--wg-line);border-radius:9px;padding:6px 11px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer}

/* sections */
.wgrev .wgc-sec{padding:30px 0}
.wgrev .wgc-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 16px}
.wgrev .wgc-shead h2{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.1;color:#fff}
.wgrev .wgc-kk{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--wg-o-2);display:block;margin-bottom:3px}
.wgrev .wgc-shead a{font-size:.84rem;font-weight:700;color:var(--wg-o-2);white-space:nowrap}
.wgrev .wgc-shead a:hover{text-decoration:underline}
.wgrev .wgc-count{font-size:.84rem;color:var(--wg-muted);font-weight:600;white-space:nowrap}

/* poster wall */
.wgrev .wgc-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:18px}
/* Render-Performance bei langen Grids: off-screen Karten ueberspringen */
.wgrev .wgc-wall .wgc-card{content-visibility:auto;contain-intrinsic-size:auto 320px}
/* eingeklappte Karten (ueber dem Initial-Limit) — Links bleiben im HTML (SEO), Bilder laden nicht */
.wgrev .wgc-card.is-folded{display:none}
.wgrev .wgc-morewrap{display:flex;justify-content:center;padding:14px 0 2px}
.wgrev .wgc-more{background:var(--wg-panel);border:1px solid var(--wg-line);color:var(--wg-txt);font-family:inherit;font-weight:800;font-size:.94rem;padding:12px 26px;border-radius:11px;cursor:pointer;transition:.15s}
.wgrev .wgc-more:hover{border-color:rgba(255,107,0,.6);color:var(--wg-o-2);transform:translateY(-1px)}
.wgrev .wgc-more b{color:var(--wg-o-2);font-weight:900}
.wgrev .wgc-empty{color:var(--wg-muted);background:var(--wg-panel);border:1px dashed var(--wg-line);border-radius:12px;padding:22px;text-align:center;grid-column:1/-1}

/* card */
.wgrev .wgc-card{position:relative;border-radius:12px;overflow:hidden;background:var(--wg-panel);border:1px solid var(--wg-line);transition:.18s;display:block}
.wgrev .wgc-card:hover{transform:translateY(-3px);border-color:rgba(255,107,0,.5);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.wgrev .wgc-poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:linear-gradient(150deg,#1a1f29,#0c0e13)}
.wgrev .wgc-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wgrev .wgc-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,9,11,.92))}
.wgrev .wgc-pfallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;color:rgba(255,255,255,.16)}
.wgrev .wgc-pt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:11px}
.wgrev .wgc-pt b{display:block;font-size:.96rem;font-weight:800;line-height:1.15;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.wgrev .wgc-pt small{font-size:.76rem;color:var(--wg-muted)}
.wgrev .wgc-score{position:absolute;top:9px;right:9px;z-index:3;background:var(--wg-o);color:#160c02;font-weight:900;font-size:.8rem;padding:3px 8px;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.wgrev .wgc-score.is-mid{background:#2b3140;color:var(--wg-o-2)}
.wgrev .wgc-flags{position:absolute;top:9px;left:9px;z-index:3;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.wgrev .wgc-flag{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 6px;border-radius:6px}
.wgrev .wgc-flag.is-kino{background:rgba(255,107,0,.94);color:#160c02}
.wgrev .wgc-flag.is-soon{background:rgba(79,127,255,.94);color:#fff}
.wgrev .wgc-flag.is-trailer{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Siegel-Ecke „Der Watcher" links oben (Zentrale-Brand §4); Flags ruecken darunter */
.wgrev .wgc-card .wg-seal{position:absolute;top:6px;left:6px;width:52px;height:52px;z-index:4;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));pointer-events:none}
.wgrev .wgc-card .wg-seal+.wgc-flags{top:64px}
.wgrev .wgc-prov{position:absolute;bottom:10px;right:10px;z-index:3;display:flex;gap:4px}
.wgrev .wgc-prov span{min-width:22px;height:22px;padding:0 4px;border-radius:6px;font-size:.6rem;font-weight:900;display:flex;align-items:center;justify-content:center;color:#fff;background:#2b3140;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.wgrev .wgc-prov .pv-netflix{background:#e50914}
.wgrev .wgc-prov .pv-prime{background:#00a8e1}
.wgrev .wgc-prov .pv-disney{background:#113ccf}
.wgrev .wgc-prov .pv-apple{background:#000;border:1px solid #444}
.wgrev .wgc-prov .pv-paramount{background:#0064ff}
.wgrev .wgc-prov .pv-wow{background:#00c3b5;color:#062}
.wgrev .wgc-prov .pv-sky{background:#0072c9}
.wgrev .wgc-prov .pv-rtl{background:#e9501e}
.wgrev .wgc-prov .pv-joyn{background:#ff005f}
.wgrev .wgc-prov .pv-crunchyroll{background:#f47521;color:#160c02}
.wgrev .wgc-prov .pv-maxdome{background:#e30613}
.wgrev .wgc-prov .pv-magenta{background:#e20074}

/* horizontal lane */
.wgrev .wgc-lane{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.wgrev .wgc-lane::-webkit-scrollbar{height:7px}
.wgrev .wgc-lane::-webkit-scrollbar-thumb{background:var(--wg-line);border-radius:9px}
.wgrev .wgc-lane .wgc-card{flex:0 0 168px;scroll-snap-align:start}

/* editorial depth */
.wgrev .wgc-edit{background:var(--wg-bg-2);border-top:1px solid var(--wg-line);border-bottom:1px solid var(--wg-line);margin:8px 0}
.wgrev .wgc-edit-in{max-width:var(--wg-max);margin:0 auto;padding:34px 22px}
.wgrev .wgc-edit-col{max-width:800px}
.wgrev .wgc-edit h2{font-size:1.5rem;font-weight:900;margin:0 0 12px;letter-spacing:-.02em;color:#fff}
.wgrev .wgc-edit h3{font-size:1.12rem;font-weight:800;margin:22px 0 7px;color:#fff}
.wgrev .wgc-edit p{color:#dbe1ea;font-size:1.02rem;line-height:1.72;margin:0 0 13px}
.wgrev .wgc-edit p b{color:#fff}
.wgrev .wgc-edit .wgc-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.wgrev .wgc-edit .wgc-strip span{background:var(--wg-panel);border:1px solid var(--wg-line);border-radius:999px;padding:5px 12px;font-size:.82rem;color:var(--wg-muted);font-weight:600}

/* related genres */
.wgrev .wgc-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.wgrev .wgc-gcard{background:var(--wg-panel);border:1px solid var(--wg-line);border-radius:12px;padding:14px 16px;transition:.15s}
.wgrev .wgc-gcard:hover{border-color:rgba(255,107,0,.5);transform:translateY(-2px)}
.wgrev .wgc-gcard b{display:block;font-size:1rem;font-weight:800;color:#fff}
.wgrev .wgc-gcard span{display:block;font-size:.82rem;color:var(--wg-muted);margin:3px 0 7px}
.wgrev .wgc-gcard em{font-size:.74rem;color:var(--wg-o-2);font-weight:700;font-style:normal}

/* faq */
.wgrev .wgc-faq details{border:1px solid var(--wg-line);border-radius:12px;margin:0 0 10px;background:var(--wg-panel);overflow:hidden}
.wgrev .wgc-faq summary{cursor:pointer;font-weight:800;padding:15px 18px;list-style:none;font-size:1.02rem;color:#fff}
.wgrev .wgc-faq summary::-webkit-details-marker{display:none}
.wgrev .wgc-faq summary::after{content:"+";float:right;color:var(--wg-o);font-weight:900;font-size:1.3rem;line-height:1}
.wgrev .wgc-faq details[open] summary::after{content:"–"}
.wgrev .wgc-faq details p{margin:0;padding:0 18px 16px;color:var(--wg-muted);line-height:1.65}

/* pagination (fallback for very large genres) */
.wgrev .wgc-pag{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:8px 0 4px}
.wgrev .wgc-pag a,.wgrev .wgc-pag span{padding:7px 13px;border-radius:9px;border:1px solid var(--wg-line);background:var(--wg-panel);color:var(--wg-txt);font-weight:700;font-size:.86rem}
.wgrev .wgc-pag .current{background:var(--wg-o);border-color:var(--wg-o);color:#160c02}

/* freshness footer */
.wgrev .wgc-foot{text-align:center;padding:26px 0 50px;color:var(--wg-muted);font-size:.86rem;border-top:1px solid var(--wg-line-2)}
.wgrev .wgc-foot b{color:var(--wg-green)}

/* Hub-Decision: Magazin-Variante (Top-Pick + mehr) */
.wgrev .wgc-decision{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:4px}
.wgrev .wgc-dpick{background:var(--wg-panel);border:1px solid var(--wg-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.wgrev .wgc-dpick:hover{border-color:rgba(255,107,0,.4)}
.wgrev .wgc-dpick-ph{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#1a1f29,#0c0e13);background-size:cover;background-position:center 22%;display:flex;align-items:flex-end;padding:12px;text-decoration:none}
.wgrev .wgc-dpick-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,.1) 20%,rgba(8,9,11,.94))}
.wgrev .wgc-dpick-lbl{position:relative;z-index:2;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--wg-o-2)}
.wgrev .wgc-dpick-title{position:relative;z-index:2;display:block;font-size:1.04rem;font-weight:900;color:#fff;line-height:1.13;margin-top:2px;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.wgrev .wgc-dpick-when2{position:relative;z-index:2;display:block;font-size:.74rem;font-weight:700;color:var(--wg-green);margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.wgrev .wgc-dpick-body{padding:12px 15px 15px}
.wgrev .wgc-dpick-body > p{font-size:.8rem;color:var(--wg-muted);margin:0 0 9px;line-height:1.45}
.wgrev .wgc-dpick-more{font-size:.84rem;line-height:1.55}
.wgrev .wgc-dpick-more > span{color:var(--wg-muted)}
.wgrev .wgc-dpick-more a{color:var(--wg-txt);font-weight:600;text-decoration:none}
.wgrev .wgc-dpick-more a:hover{color:var(--wg-o-2)}
.wgrev .wgc-dpick-more a:not(:last-child)::after{content:" · ";color:var(--wg-muted);font-weight:400}
.wgrev .wgc-dpick-when{color:var(--wg-muted);font-size:.78rem}
.wgrev .wgc-dpick-empty{align-items:flex-start;opacity:.75}

/* Monats-Navigation + Monats-Sektionen (Kino-Kalender: demnaechst / kinofilme-2026) */
.wgrev .wgc-monthnav{position:sticky;top:0;z-index:30;background:rgba(10,11,13,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--wg-line);border-bottom:1px solid var(--wg-line);margin-top:14px}
.wgrev .wgc-monthnav-in{max-width:var(--wg-max);margin:0 auto;display:flex;gap:8px;padding:11px 22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wgrev .wgc-monthnav-in::-webkit-scrollbar{height:0}
.wgrev .wgc-monthnav a{flex:0 0 auto;background:var(--wg-panel);border:1px solid var(--wg-line);color:var(--wg-muted);border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:700;white-space:nowrap;text-decoration:none;transition:.15s;text-transform:capitalize}
.wgrev .wgc-monthnav a:hover{border-color:rgba(255,107,0,.5);color:var(--wg-txt)}
.wgrev .wgc-monthnav a b{color:var(--wg-o-2);margin-left:5px;font-weight:900}
.wgrev .wgc-month{margin:0 0 14px;scroll-margin-top:62px}
.wgrev .wgc-month-head{display:flex;align-items:baseline;gap:11px;margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--wg-line)}
.wgrev .wgc-month-head h3{font-size:1.35rem;font-weight:900;margin:0;letter-spacing:-.02em;color:#fff;text-transform:capitalize}
.wgrev .wgc-month-head span{font-size:.82rem;color:var(--wg-o-2);font-weight:800}

/* Autor-Trust-Grid (Flagship filme / serien) */
.wgrev .wgc-persona{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
.wgrev .wgc-pcard{background:var(--wg-panel);border:1px solid var(--wg-line);border-radius:12px;padding:16px 13px;text-align:center;transition:.15s}
.wgrev .wgc-pcard:hover{border-color:rgba(255,107,0,.5);transform:translateY(-2px)}
.wgrev .wgc-pcard-av{width:60px;height:60px;border-radius:50%;margin:0 auto 9px;overflow:hidden;background:var(--wg-panel-2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:var(--wg-o-2);border:1px solid var(--wg-line)}
.wgrev .wgc-pcard-av img{width:100%;height:100%;object-fit:cover}
.wgrev .wgc-pcard b{display:block;font-size:.95rem;font-weight:800;color:#fff}
.wgrev .wgc-pcard em{display:block;font-size:.78rem;color:var(--wg-muted);font-style:normal;margin:3px 0 6px;line-height:1.32}
.wgrev .wgc-pcard small{font-size:.74rem;color:var(--wg-o-2);font-weight:700}

/* responsive */
@media(max-width:680px){
  body.wg-gen2026 .wgrev{font-size:16px}
  .wgrev .wgc-wrap,.wgrev .wgc-bar-in,.wgrev .wgc-edit-in{padding-left:16px;padding-right:16px}
  .wgrev .wgc-mini{gap:16px}
  .wgrev .wgc-mini strong{font-size:1.3rem}
  .wgrev .wgc-wall{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px}
  .wgrev .wgc-h1{font-size:2rem}
  .wgrev .wgc-sort{width:100%;justify-content:space-between}
  .wgrev .wgc-shead{flex-wrap:wrap}
}
@media(max-width:420px){
  .wgrev .wgc-wall{grid-template-columns:repeat(2,1fr);gap:11px}
}

/* sub-genre-nav (Horror-Master-Hubs, Gate im Template) */
.wgrev .wgc-subnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 2px}
.wgrev .wgc-subnav-label{font-size:.78rem;font-weight:700;color:var(--wg-muted);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.wgrev .wgc-subnav a{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--wg-line);border-radius:999px;background:var(--wg-panel);color:var(--wg-txt);font-size:.86rem;font-weight:600;line-height:1.2;transition:border-color .15s ease,color .15s ease}
.wgrev .wgc-subnav a:hover{border-color:var(--wg-o);color:var(--wg-o-2)}
.wgrev .wgc-subnav a.is-hi{border-color:rgba(255,107,0,.42);color:var(--wg-o-2)}
.wgrev .wgc-subnav a.is-hi:hover{border-color:var(--wg-o);color:var(--wg-o)}
@media(max-width:680px){.wgrev .wgc-subnav a{padding:6px 11px;font-size:.81rem}}

/* Genre-Abo-Chip (wg-notifications, 17.07.2026) */
.wgrev .wgc-sub{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;min-height:34px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.45);border-radius:999px;color:#ff8533;font:700 .74rem/1 inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.wgrev .wgc-sub:hover{background:rgba(255,107,0,.16);color:#ffa05c}
.wgrev .wgc-sub.is-on{background:rgba(57,217,138,.1);border-color:rgba(57,217,138,.5);color:var(--wg-green)}
.wgrev .wgc-sub.is-on:hover{background:rgba(57,217,138,.18)}
.wgrev .wgc-sub:disabled{opacity:.55;cursor:wait}
.wgrev .wgc-sub svg{flex:0 0 auto}
@media (max-width:680px){.wgrev .wgc-sub{margin-left:0;width:100%;justify-content:center;min-height:44px}}