/* Globale Lesbarkeit: Basis leicht größer (alle rem-Größen skalieren mit) */
html { font-size: 17px; overflow-x: hidden; }
body { overflow-x: hidden; }
img  { max-width: 100%; }

/* ── Print Fanzine Design Tokens ─────────────────────────── */
:root {
  --paper:      #ede0c4;
  --paper-2:    #e4d4a8;
  --paper-3:    #d8c48c;
  --ink:        #0e0c09;
  --ink-soft:   #2d2820;
  --red:        #d42030;
  --red-deep:   #8e1320;
  --yellow:     #f0c800;
  --shadow:     5px 5px 0 var(--ink);
  --shadow-sm:  3px 3px 0 var(--ink);

  /* Compat-Variablen für bestehende Templates */
  --rt-card-bg:         var(--paper-2);
  --rt-card-bg-2:       var(--paper);
  --rt-text-base:       var(--ink);
  --rt-text-sub:        #1f1b14;
  --rt-text-muted:      #463c26;
  --rt-text-faint:      #5c4f34;
  --rt-accent:          var(--red);
  --rt-accent-2:        #f97316;
  --rt-accent-3:        #16a34a;
  --rt-border:          rgba(14,12,9,.15);
  --rt-border-subtle:   rgba(14,12,9,.07);
  --rt-border-hover:    rgba(212,32,48,.65);
  --rt-card-radius:     0px;
  --rt-card-shadow:     var(--shadow-sm);
  --rt-card-border:     2px solid var(--ink);
  --rt-chip-bg:         var(--ink);
  --rt-chip-text:       var(--paper);
  --rt-chip-border:     transparent;
  --rt-img-hover:       grayscale(100%) brightness(.72) contrast(1.1);
  --rt-font-card:       'Bebas Neue', sans-serif;
  --rt-fw-card:         400;
}

/* Theme-Toggle entfernt */
.rt-theme-btn { display: none !important; }

/* ── Reporter-Link ────────────────────────────────────────── */
.reporter-link {
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dotted rgba(14,12,9,.3);
  transition: color .12s, border-color .12s;
}
.reporter-link:hover {
  color: var(--red);
  border-bottom-color: rgba(212,32,48,.45);
}

/* ── Karten-Bild-Filter ──────────────────────────────────── */
.card-img  { transition: filter .42s; }
.card-hover:hover .card-img { filter: var(--rt-img-hover); }

/* ── Review-Karte (Print-Fanzine) ────────────────────────── */
.rv-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-top: 3px solid var(--red);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.rv-card:nth-child(3n+1) { transform: rotate(-0.5deg); }
.rv-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.rv-card:nth-child(3n)   { transform: rotate(-0.25deg); }
.rv-card:hover {
  transform: rotate(0deg) translateY(-4px) !important;
  box-shadow: 5px 5px 0 var(--ink);
}
.rv-card-thumb {
  position: relative; height: 200px; overflow: hidden;
  background: var(--paper-3);
  border-bottom: 2px solid var(--ink);
}
.rv-card-thumb picture {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.rv-card-thumb img,
.rv-card-thumb picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-card-score {
  position: absolute; bottom: .5rem; right: .5rem;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; line-height: 1;
  color: #fff; background: var(--red); border: 2px solid #fff;
  padding: .1rem .5rem;
}
.rv-card-score small { font-size: .55em; color: rgba(255,255,255,.85); }
.rv-card-body { padding: .7rem .85rem .85rem; }
.rv-card-genre { margin-bottom: .55rem; }
.rv-card-band {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.1rem; line-height: 1.2;
  color: var(--ink); transition: color .15s;
}
.rv-card:hover .rv-card-band { color: var(--red); }
.rv-card-album {
  font-size: .92rem; color: var(--rt-text-sub); margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .55rem; padding-top: .5rem;
  border-top: 1px dashed rgba(14,12,9,.25);
}
.rv-card-meta {
  font-family: 'DM Mono', monospace; font-size: .78rem;
  color: var(--rt-text-muted);
}

/* ── Interview-Karte ─────────────────────────────────────── */
.iv-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-top: 3px solid var(--red);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.iv-card:hover {
  border-color: var(--red);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translateY(-3px);
}
.iv-thumb { position: relative; overflow: hidden; height: 200px; background: var(--paper-3); }
.iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-badge {
  position: absolute; top: .65rem; left: .65rem;
  font-family: 'Bebas Neue', sans-serif; font-size: .65rem; letter-spacing: .18em;
  color: #fff; background: rgba(230,48,48,.85); padding: 2px 8px;
}
.iv-body { padding: .85rem 1rem 1rem; }
.iv-band {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1.05rem; line-height: 1.25;
  color: var(--ink); transition: color .15s; margin-bottom: .15rem;
}
.iv-card:hover .iv-band { color: var(--red); }
.iv-subtitle { font-size: .88rem; color: var(--rt-text-sub); margin-bottom: .5rem; }
.iv-meta { font-size: .8rem; color: var(--rt-text-sub); font-weight: 500; }
.iv-excerpt {
  font-size: .9rem; color: var(--rt-text-sub); line-height: 1.6; margin-top: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Weiteres-Raster (Details-Seiten) ────────────────────── */
.rt-related { margin-top: 3rem; padding-top: 2rem; border-top: 2px dashed rgba(14,12,9,.15); }
.rt-related-head {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: .08em; line-height: 1;
  color: var(--ink); margin-bottom: 1.25rem;
}
.rt-related-head span { color: var(--red); }
.rt-related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 640px) { .rt-related-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Tailwind gray overrides for paper theme ─────────────── */
/* In the dark theme these were light on dark; on paper we need warm ink tones */
.text-gray-300 { color: var(--rt-text-sub); }
.text-gray-400 { color: var(--rt-text-muted); }
.text-gray-500 { color: var(--rt-text-faint); }
.text-gray-600 { color: var(--rt-text-muted); }

/* ── Prose article blocks (detail pages) ─────────────────── */
article.prose-rt {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
}

/* ── Prose headings (Datenschutz, Impressum, static pages) ── */
.rt-prose-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem; letter-spacing: .04em; line-height: 1.2;
  color: var(--ink);
  border-bottom: 1px solid rgba(14,12,9,.2);
  padding-bottom: .3rem; margin-bottom: .75rem;
}

/* ── Login / Auth form ───────────────────────────────────── */
.rt-login-box {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 1.75rem 1.5rem;
}
.rt-login-label {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: .85rem; letter-spacing: .12em; color: var(--rt-text-muted);
  margin-bottom: .35rem;
}
.rt-login-input {
  width: 100%; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 0;
  padding: .5rem .75rem; font-size: .9rem; color: var(--ink);
  font-family: 'DM Mono', monospace;
  transition: border-color .15s;
}
.rt-login-input:focus { outline: none; border-color: var(--red); }
.rt-login-btn {
  width: 100%; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 0;
  padding: .6rem 1rem; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem; letter-spacing: .14em;
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.rt-login-btn:hover {
  background: var(--red); border-color: var(--red);
  box-shadow: 3px 3px 0 var(--ink);
}