/* Gerüst-CSS für alle Seiten – früher ein ~300-Zeilen <style>-Block
   im <head> jeder Seite (templates/layouts/base.html.twig). Ausgelagert,
   damit das HTML kleiner wird und der Browser es einmal cachen kann. */
      /* Browser-Reset */
      button { background: transparent; cursor: pointer; }

      body {
        font-family: 'Special Elite', 'Courier New', monospace;
        background-color: var(--paper);
        color: var(--ink);
        overflow-x: hidden;
        background-image:
          url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
          radial-gradient(circle at 85% 100%, rgba(212,32,48,.04), transparent 35%);
      }
      .prose-rt     { color: var(--ink); line-height: 1.8; }
      .prose-rt p   { margin-bottom: 1.2em; }
      .prose-rt ul, .prose-rt ol { margin: 0 0 1.2em 1.4em; }
      .prose-rt ul  { list-style: disc outside; }
      .prose-rt ol  { list-style: decimal outside; }
      .prose-rt li  { margin-bottom: .35em; }
      .prose-rt li > ul, .prose-rt li > ol { margin-top: .35em; }
      /* Jodit verpackt Listenpunkte in <li><p>...</p></li> — ohne diese
         Regel erbt jeder Punkt zusaetzlich den vollen Absatzabstand
         (1.2em) von .prose-rt p und die Liste reisst auseinander. */
      .prose-rt li p { margin-bottom: 0; }
      .stars        { color: var(--red); }
      .torn-top     { border-top: 3px solid var(--ink); position: relative; }
      .torn-top::before {
        content: '';
        display: block;
        height: 4px;
        background: repeating-linear-gradient(
          90deg, var(--ink) 0px, var(--ink) 8px, transparent 8px, transparent 14px
        );
      }
      .tape-badge {
        display: inline-block;
        background: var(--red);
        color: var(--paper);
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 2px;
        padding: 2px 10px;
        font-size: 0.75rem;
        transform: rotate(-2deg);
        box-shadow: var(--shadow-sm);
      }
      .fanzine-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
      .fanzine-card:hover {
        transform: rotate(0deg) translateY(-3px) !important;
        box-shadow: 0 6px 0 var(--ink);
      }
      [x-cloak] { display: none !important; }

      /* ── Seiten-Überschrift ───────────────────────────────────── */
      .page-title {
        font-family: 'Big Shoulders Stencil Display', 'Anton', sans-serif;
        font-weight: 900;
        font-size: clamp(2.8rem, 7vw, 5rem);
        letter-spacing: .01em; line-height: .9;
        color: var(--ink);
        text-shadow: 4px 4px 0 var(--red);
        display: inline-block;
        margin-bottom: .5rem;
      }

      /* ── FOOTER ─────────────────────────────────────────────── */
      .ft-banner {
        background: var(--ink);
        border-top: none;
        border-bottom: 3px solid var(--red);
        text-align: center; padding: .9rem 0;
        position: relative; overflow: hidden;
      }
      .ft-banner-text {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.4rem;
        letter-spacing: .38em; color: var(--red);
        text-shadow: 0 0 20px rgba(212,32,48,.4), 3px 3px 0 rgba(0,0,0,.8);
        display: inline-block; transform: rotate(-.4deg); position: relative;
        white-space: nowrap;
      }
      .ft-root {
        background: var(--ink);
        color: var(--paper);
        border-top: 4px solid var(--red);
        padding: 3rem 0 2rem;
        position: relative; overflow: hidden;
      }
      .ft-root::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: repeating-linear-gradient(90deg, var(--red) 0, var(--red) 12px, transparent 12px, transparent 20px);
        pointer-events: none;
      }
      .ft-inner { display: flex; flex-direction: column; gap: 2.5rem; }
      .ft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
      @media (min-width: 640px)  { .ft-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
  /* Sechs Rubrikspalten seit Spiele dazukam, dann das Maskottchen. */
      @media (min-width: 900px)  { .ft-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) 200px; gap: 1.5rem; } }
      /* Maskottchen-Spalte */
      .ft-mascot-col {
        display: none;
        align-items: flex-end; justify-content: center;
      }
      @media (min-width: 900px) { .ft-mascot-col { display: flex; } }
      .ft-mascot {
        height: 280px; width: auto;
        filter: drop-shadow(-4px 0 14px rgba(0,0,0,.5));
        pointer-events: none; user-select: none;
      }
      .ft-logo {
        font-family: 'Permanent Marker', cursive;
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        display: inline-block; transform: rotate(-2deg);
        color: var(--paper); text-shadow: 2px 2px 0 #000, 4px 4px 0 var(--red);
        text-decoration: none; transition: transform .2s, text-shadow .2s;
        margin-bottom: .5rem;
      }
      .ft-logo:hover {
        transform: rotate(.5deg) scale(1.04);
        text-shadow: 2px 2px 0 #000, 6px 6px 0 var(--red);
      }
      .ft-tagline {
        font-family: 'DM Mono', monospace; font-size: .76rem;
        color: rgba(237,224,196,.6); line-height: 1.85; max-width: 28ch;
      }
      .ft-col-head {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.05rem;
        letter-spacing: .14em; color: var(--red);
        padding-bottom: .4rem; margin-bottom: .9rem;
        border-bottom: 2px solid rgba(237,224,196,.25);
      }
      .ft-nav { display: flex; flex-direction: column; gap: .35rem; }
      .ft-nav a {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.08rem;
        letter-spacing: .08em; color: rgba(237,224,196,.7);
        text-decoration: none; transition: color .15s, padding-left .15s; display: block;
      }
      .ft-nav a::before { content: '›'; color: var(--red); margin-right: .4em; opacity: .9; }
      .ft-nav a:hover { color: var(--paper); padding-left: 3px; }
      .ft-social { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .6rem; }
      .ft-social a {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: 2px solid rgba(237,224,196,.3);
        color: rgba(237,224,196,.65); text-decoration: none;
        transition: color .15s, border-color .15s, background .15s, transform .15s;
      }
      .ft-social a:hover {
        color: var(--paper); background: var(--red); border-color: var(--red);
        transform: translateY(-2px) rotate(-4deg);
      }
      .ft-copy {
        display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
        padding-top: 1.5rem; border-top: 2px dashed rgba(237,224,196,.18);
        font-family: 'DM Mono', monospace; font-size: .74rem; color: rgba(237,224,196,.55);
      }
      .ft-tape {
        display: inline-block; background: var(--red); color: var(--paper);
        font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px;
        padding: 2px 10px; font-size: .78rem;
        transform: rotate(-2.5deg); box-shadow: 2px 2px 0 var(--ink);
      }
      .ft-rage {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1rem; letter-spacing: .22em; color: #ff5565;
      }
      .ft-copy nav { display: flex; gap: 1rem; margin-left: auto; }
      .ft-copy nav a { color: rgba(237,224,196,.55); text-decoration: none; transition: color .15s; }
      .ft-copy nav a:hover { color: var(--paper); }

      /* ── DETAIL HERO ──────────────────────────────────────────── */
      .dt-hero {
        position: relative; overflow: hidden;
        border-bottom: 3px solid var(--ink);
      }
      .dt-hero-bg {
        position: absolute; inset: -40px;
        background-image: var(--cover);
        background-size: cover; background-position: center;
        filter: blur(40px) brightness(.15) saturate(.4);
        z-index: 0;
      }
      .dt-hero-inner {
        position: relative; z-index: 1;
        display: flex; gap: 2rem; align-items: flex-end;
        padding: 3rem 1rem 2.5rem;
      }
      @media (max-width: 640px) {
        .dt-hero-inner { flex-direction: column; align-items: flex-start; }
      }
      .dt-cover-wrap {
        flex-shrink: 0; position: relative; cursor: pointer;
        overflow: hidden;
        box-shadow: 5px 5px 0 rgba(0,0,0,.7);
        transition: transform .2s, box-shadow .2s;
      }
      .dt-cover-wrap:hover {
        transform: translateY(-4px);
        box-shadow: 7px 9px 0 rgba(0,0,0,.7);
      }
      .dt-cover-wrap img { display: block; width: 196px; height: 196px; object-fit: cover; }
      @media (min-width: 768px) { .dt-cover-wrap img { width: 224px; height: 224px; } }
      .dt-cover-hint {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        background: rgba(0,0,0,.52); opacity: 0; transition: opacity .2s; color: #fff;
      }
      .dt-cover-wrap:hover .dt-cover-hint { opacity: 1; }
      .dt-meta { flex: 1; min-width: 0; }
      .dt-badge {
        display: inline-block;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: .18em; font-size: .78rem; color: var(--red-deep);
        margin-bottom: .35rem;
      }
      /* Im dunklen Hero-Hintergrund (Bild vorhanden) hellen wieder auf */
      .dt-hero[style] .dt-badge { color: var(--red); }
      .dt-h1 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(2.2rem, 7vw, 3.8rem);
        line-height: 1; letter-spacing: .02em;
        color: var(--ink);
        margin-bottom: .1rem;
      }
      /* When cover image is present (hero has inline style), flip to light text */
      .dt-hero[style] .dt-h1 {
        color: var(--paper);
        text-shadow: 2px 2px 0 rgba(0,0,0,.7);
      }
      .dt-h2 { font-size: 1.1rem; color: var(--rt-text-sub); margin-bottom: .8rem; }
      .dt-hero[style] .dt-h2 { color: rgba(237,224,196,.85); text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
      .dt-dl {
        display: grid; grid-template-columns: auto 1fr;
        gap: .2rem .8rem; font-size: .82rem; margin-bottom: .8rem;
      }
      .dt-dl dt { color: var(--rt-text-muted); }
      .dt-dl dd { color: var(--rt-text-base); }
      .dt-hero[style] .dt-dl dt { color: rgba(200,180,140,.8); }
      .dt-hero[style] .dt-dl dd { color: var(--paper); }
      .dt-wertung {
        display: inline-flex; align-items: flex-end; gap: .25rem;
        background: rgba(212,32,48,.15); border: 2px solid rgba(212,32,48,.5);
        padding: .35rem .85rem;
      }
      .dt-wertung-num {
        font-family: 'Anton', sans-serif;
        font-size: 3.5rem; line-height: 1; color: var(--red);
      }
      .dt-wertung-den { font-size: .95rem; color: var(--rt-text-muted); margin-bottom: .25rem; }
      .dt-hero[style] .dt-wertung-den { color: rgba(255,255,255,.85); }

      /* ── COVER LIGHTBOX ───────────────────────────────────────── */
      .cv-lb {
        display: none; position: fixed; inset: 0; z-index: 9999;
        background: rgba(0,0,0,.92);
        align-items: center; justify-content: center; padding: 1rem;
      }
      .cv-lb.open { display: flex; }
      .cv-lb-inner { position: relative; }
      .cv-lb-inner img {
        max-width: 90vw; max-height: 90vh;
        object-fit: contain; display: block;
        border: 3px solid var(--ink);
        box-shadow: 8px 8px 0 rgba(0,0,0,.8);
      }
      .cv-lb-close {
        position: absolute; top: -2rem; right: 0;
        background: none; border: none; color: rgba(237,224,196,.5);
        font-size: 1.5rem; cursor: pointer; line-height: 1;
        transition: color .12s; padding: 0;
      }
      .cv-lb-close:hover { color: var(--red); }

      /* ── NEWS SIDEBAR CARD ────────────────────────────────────── */
      .ncs-card {
        display: block; text-decoration: none; color: inherit;
        background: var(--rt-card-bg-2);
        border: 2px solid var(--ink);
        overflow: hidden;
        transition: box-shadow .18s, transform .18s;
        margin-bottom: .75rem;
      }
      .ncs-card:hover {
        box-shadow: var(--shadow-sm);
        transform: translate(-2px, -2px);
      }
      .ncs-thumb { overflow: hidden; height: 72px; }
      .ncs-thumb img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: filter .4s;
      }
      .ncs-card:hover .ncs-thumb img { filter: var(--rt-img-hover); }
      .ncs-body { padding: .55rem .7rem .65rem; }
      .ncs-date { font-size: .65rem; color: var(--rt-text-faint); margin-bottom: .2rem; }
      .ncs-headline {
        font-family: 'Bebas Neue', sans-serif;
        font-size: .95rem; letter-spacing: .04em; line-height: 1.25;
        color: var(--rt-text-base); transition: color .15s;
      }
      .ncs-card:hover .ncs-headline { color: var(--rt-accent); }
