/* Startseite (/) – aus templates/home/index.html.twig ausgelagert,
   damit die Seite nicht ~470 Zeilen Inline-CSS im HTML trägt.
   Der Feed-Karten-Abschnitt ist mit partials/feed-css.html.twig
   identisch (das nutzt weiterhin /community in seinem Style-Block). */

/* ═══════════════════════════════════════════════════════════════════════
   STARTSEITE – Komplett-Redesign
   Farbpalette aus app.css:
     --paper / --paper-2 / --paper-3  (warm beige)
     --ink                             (fast schwarz)
     --red / --red-deep
     --rt-card-border  = 2px solid var(--ink)
     --rt-font-card    = 'Bebas Neue'
     --rt-text-*       (base / sub / muted / faint)
     --rt-accent       = var(--red)
     --rt-accent-2     = orange
     --rt-accent-3     = grün
═══════════════════════════════════════════════════════════════════════ */

/* ── Layout-Wrapper ─────────────────────────────────────────────────── */
.hp { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 5rem; }
.hp-sec { margin-bottom: 3rem; }
@media (min-width: 768px) { .hp-sec { margin-bottom: 4rem; } }

/* ── Section-Header ─────────────────────────────────────────────────── */
.sh {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 3px solid var(--ink); padding-bottom: .45rem;
  margin-bottom: 1.25rem;
}
.sh-bar {
  display: block; width: 10px; flex-shrink: 0;
  background: var(--red); align-self: stretch; min-height: 1.2em;
}
.sh-bar.iv  { background: #1d4ed8; }
.sh-bar.vid { background: #7c3aed; }
.sh-bar.fot { background: #0891b2; }
.sh-bar.com { background: var(--rt-accent-2); }

.sh-title {
  font-family: 'Big Shoulders Stencil Display', 'Bebas Neue', sans-serif;
  font-weight: 900; font-size: 1.65rem; letter-spacing: .06em;
  color: var(--ink); line-height: 1;
}
.sh-gap { flex: 1; min-width: 0; }
.sh-all {
  font-family: 'Bebas Neue', sans-serif; font-size: .92rem; letter-spacing: .12em;
  color: var(--red); text-decoration: none; white-space: nowrap; transition: color .12s;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .sh { flex-wrap: wrap; row-gap: .2rem; }
  .sh-gap { display: none; }
  .sh-all { width: 100%; padding-left: 16px; font-size: .75rem; }
}
.sh-all:hover { color: var(--ink); }
.sh-all.iv  { color: #1d4ed8; } .sh-all.iv:hover  { color: var(--ink); }
.sh-all.vid { color: #7c3aed; } .sh-all.vid:hover { color: var(--ink); }
.sh-all.fot { color: #0891b2; } .sh-all.fot:hover { color: var(--ink); }
.sh-all.com { color: var(--rt-accent-2); } .sh-all.com:hover { color: var(--ink); }

/* Kategorie-Badge */
.badge {
  display: inline-block; font-family: 'Bebas Neue', sans-serif;
  font-size: .7rem; letter-spacing: .1em; line-height: 1;
  padding: 3px 8px; color: var(--paper);
}
.badge.rv  { background: var(--red); }
.badge.nw  { background: var(--rt-accent-2); }
.badge.iv  { background: #1d4ed8; }
.badge.vid { background: #7c3aed; }
.badge.fot { background: #0891b2; }
.badge.kb  { background: #15803d; }
.badge.bl  { background: #b45309; }

/* ═══════════════════════════════════════════════════════════════════════
   0 · NEU ERSCHIENEN — rubrikübergreifendes Ticker
═══════════════════════════════════════════════════════════════════════ */
.hp-neu { margin-bottom: 2rem; }
.hp-neu-scroller { position: relative; }
.hp-neu-row {
  display: flex; gap: .9rem; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; scroll-padding-inline: 34px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-inline: 34px;
}
.hp-neu-row::-webkit-scrollbar { display: none; }
.hp-neu-row > * { scroll-snap-align: start; }
.hp-neu-scroller::before, .hp-neu-scroller::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2.5rem;
  pointer-events: none; z-index: 1;
}
.hp-neu-scroller::before {
  left: 0; background: linear-gradient(to right, var(--paper) 0%, transparent 100%);
}
.hp-neu-scroller::after {
  right: 0; background: linear-gradient(to left, var(--paper) 0%, transparent 100%);
}
.hp-neu-nav {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 30px; border: none;
  background: rgba(237, 224, 196, .8); color: var(--rt-text-muted); cursor: pointer;
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: .6; transition: opacity .15s, background .15s, color .15s;
}
.hp-neu-scroller:hover .hp-neu-nav { opacity: 1; }
.hp-neu-nav:hover, .hp-neu-nav:focus-visible { background: rgba(237, 224, 196, .95); color: var(--ink); }
.hp-neu-nav.prev { left: 0; }
.hp-neu-nav.next { right: 0; }
.hp-neu-card {
  flex: 0 0 auto; width: 160px; text-decoration: none; color: var(--ink);
  border: var(--rt-card-border); background: var(--paper-2);
}
@media (min-width: 640px) { .hp-neu-card { width: 190px; } }
.hp-neu-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.hp-neu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-neu-thumb .badge { position: absolute; top: 6px; left: 6px; }
.hp-neu-body { padding: .5rem .6rem .7rem; }
.hp-neu-title {
  font-family: var(--rt-font-card), sans-serif; font-size: 1.05rem; line-height: 1.05;
  margin-bottom: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-neu-date {
  font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--rt-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   1 · HERO
═══════════════════════════════════════════════════════════════════════ */
.hp-hero {
  position: relative; overflow: hidden; border: var(--rt-card-border);
  margin-bottom: 3rem;
  aspect-ratio: 4/3; min-height: 220px; max-height: 400px;
}
@media (min-width: 480px) { .hp-hero { aspect-ratio: 21/9; max-height: 500px; } }
@media (min-width: 768px) { .hp-hero { aspect-ratio: 21/8; max-height: none; } }

.hp-hero a { position: absolute; inset: 0; display: block; }
.hp-hero a img, .hp-hero a picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hero-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.08) 100%);
}
.hp-hero-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.25rem 1.25rem; pointer-events: none;
}
@media (min-width: 768px) { .hp-hero-body { padding: 1.5rem 2rem 2rem; } }
.hp-hero-date {
  display: inline-block; font-family: 'DM Mono', monospace;
  font-size: .72rem; letter-spacing: .05em;
  color: #fff; background: var(--red); padding: .15rem .6rem; margin-bottom: .5rem;
}
.hp-hero-title {
  font-family: var(--rt-font-card), sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 3rem); line-height: 1.05; color: #fff;
  text-shadow: 2px 2px 0 #000, 4px 4px 14px rgba(0,0,0,.9);
}
.hp-hero-dots {
  position: absolute; bottom: .75rem; right: 1rem;
  display: flex; gap: 4px; z-index: 10; pointer-events: all;
}
.hp-hero-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  cursor: pointer; padding: 0; transition: background .2s;
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · NEWS + TERMINE (zweispaltig)
═══════════════════════════════════════════════════════════════════════ */
.hp-duo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem;
}
@media (min-width: 768px) { .hp-duo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; } }

/* News-Liste */
.hp-news-list { display: flex; flex-direction: column; gap: .5rem; }

.hp-news-a {
  display: flex; gap: 0; align-items: stretch;
  background: var(--rt-card-bg); border: var(--rt-card-border);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.hp-news-a:hover { box-shadow: var(--rt-card-shadow); transform: translateX(3px); }
.hp-news-a:first-child {
  flex-direction: column; border-top: 4px solid var(--rt-accent-2);
}
.hp-news-thumb { flex-shrink: 0; overflow: hidden; background: var(--paper-3); width: 88px; }
.hp-news-a:first-child .hp-news-thumb { width: 100%; height: 180px; }
.hp-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .35s; }
.hp-news-a:hover .hp-news-thumb img { filter: var(--rt-img-hover); }
.hp-news-body { padding: .6rem .85rem; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hp-news-a:first-child .hp-news-body { padding: .8rem 1rem 1rem; }
.hp-news-date {
  font-family: 'DM Mono', monospace; font-size: .67rem; letter-spacing: .06em;
  color: var(--rt-text-faint); margin-bottom: .2rem;
}
.hp-news-hl {
  font-family: var(--rt-font-card), sans-serif; font-size: 1.1rem; line-height: 1.15;
  color: var(--rt-text-base); transition: color .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-news-a:first-child .hp-news-hl { font-size: 1.5rem; white-space: normal; }
.hp-news-a:hover .hp-news-hl { color: var(--rt-accent-2); }
.hp-news-intro {
  font-size: .83rem; color: var(--rt-text-muted); margin-top: .3rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-news-a:not(:first-child) .hp-news-intro { display: none; }

/* Termine-Liste */
.hp-termine-box {
  border: var(--rt-card-border); border-top: 4px solid var(--red);
  background: var(--rt-card-bg); overflow: hidden;
}
.hp-termine-list { padding: 0 .85rem; }
.hp-termin-row {
  display: grid; grid-template-columns: 3.2rem 2px minmax(0, 1fr) auto;
  align-items: center; gap: .65rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rt-border-subtle);
  text-decoration: none; color: inherit;
}
.hp-termin-row:last-child { border-bottom: none; }
.hp-termin-row:hover .hp-termin-band { color: var(--red); }
.hp-termin-date-col { text-align: center; line-height: 1; }
.hp-termin-day {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem; color: var(--ink);
}
.hp-termin-mon {
  display: block; font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .04em; color: var(--rt-text-faint);
}
.hp-termin-line { width: 2px; height: 2.2rem; background: rgba(212,32,48,.4); }
.hp-termin-info { min-width: 0; }
.hp-termin-band {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); transition: color .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-termin-ort {
  display: block; font-size: .78rem; color: var(--rt-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-termin-price { font-family: 'DM Mono', monospace; font-size: .75rem; font-weight: 700; color: #15803d; }
.hp-termine-footer {
  border-top: 1px solid var(--rt-border-subtle);
  padding: .6rem .85rem;
  display: flex; justify-content: flex-end;
}
.hp-termine-footer a {
  font-family: 'Bebas Neue', sans-serif; font-size: .9rem; letter-spacing: .1em;
  color: var(--red); text-decoration: none; transition: color .12s;
}
.hp-termine-footer a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   3 · REVIEWS
═══════════════════════════════════════════════════════════════════════ */
.hp-rev-layout {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
}
@media (min-width: 640px) { .hp-rev-layout { grid-template-columns: 5fr 3fr; } }

/* Großes Featured-Review */
.hp-rev-big {
  display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden; min-height: 300px;
  border: var(--rt-card-border); border-top: 4px solid var(--red);
  transition: box-shadow .18s;
}
@media (min-width: 640px) { .hp-rev-big { min-height: 340px; } }
.hp-rev-big:hover { box-shadow: var(--rt-card-shadow); }
.hp-rev-big img, .hp-rev-big picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: filter .45s;
}
.hp-rev-big:hover img { filter: var(--rt-img-hover); }
.hp-rev-big-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.6) 50%,
    rgba(0,0,0,.05) 100%);
}
.hp-rev-big-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem; }
.hp-rev-big-genre {
  font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .05em;
  color: rgba(255,255,255,.6); margin-bottom: .3rem;
}
.hp-rev-big-band {
  font-family: var(--rt-font-card), sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #fff; line-height: 1; text-shadow: 2px 2px 0 #000;
}
.hp-rev-big-album { font-size: .95rem; color: rgba(255,255,255,.8); margin-top: .3rem; }
.hp-rev-big-foot {
  display: flex; justify-content: space-between; align-items: flex-end; margin-top: .7rem;
}
.hp-rev-big-meta { font-family: 'DM Mono', monospace; font-size: .7rem; color: rgba(255,255,255,.6); }
.hp-rev-big-wert {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1;
  color: #fff; background: var(--red); border: 2px solid #fff; padding: 2px 10px;
}
.hp-rev-big-wert small { font-size: .5em; }

/* Small-Review-Stack */
.hp-rev-stack { display: flex; flex-direction: column; gap: .6rem; }
.hp-rev-small {
  display: flex; align-items: stretch; gap: 0;
  background: var(--rt-card-bg); border: var(--rt-card-border);
  border-left: 4px solid var(--red); text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.hp-rev-small:hover { box-shadow: var(--rt-card-shadow); transform: translateX(2px); }
.hp-rev-small-thumb { width: 78px; flex-shrink: 0; overflow: hidden; background: var(--paper-3); }
.hp-rev-small-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .35s; }
.hp-rev-small:hover .hp-rev-small-thumb img { filter: var(--rt-img-hover); }
.hp-rev-small-body { padding: .55rem .75rem; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hp-rev-small-band {
  font-family: var(--rt-font-card), sans-serif; font-size: 1.1rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s;
}
.hp-rev-small:hover .hp-rev-small-band { color: var(--red); }
.hp-rev-small-album { font-size: .8rem; color: var(--rt-text-sub); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-rev-small-meta { font-family: 'DM Mono', monospace; font-size: .65rem; color: var(--rt-text-faint); margin-top: .3rem; }
.hp-rev-small-wert {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--red);
  margin-left: auto; flex-shrink: 0; align-self: center; padding: 0 .65rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · INTERVIEWS
═══════════════════════════════════════════════════════════════════════ */
.hp-iv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem;
}
@media (min-width: 640px) { .hp-iv-grid { grid-template-columns: repeat(3, 1fr); } }

.hp-iv-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--rt-card-bg); border: var(--rt-card-border);
  border-top: 4px solid #1d4ed8; overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.hp-iv-card:hover { box-shadow: var(--rt-card-shadow); transform: translateY(-3px); }
.hp-iv-thumb { height: 145px; overflow: hidden; background: var(--paper-3); }
.hp-iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .4s; }
.hp-iv-card:hover .hp-iv-thumb img { filter: var(--rt-img-hover); }
.hp-iv-body { padding: .65rem .85rem .85rem; }
.hp-iv-band { font-family: var(--rt-font-card), sans-serif; font-size: 1.2rem; color: var(--ink); line-height: 1.1; transition: color .12s; }
.hp-iv-card:hover .hp-iv-band { color: #1d4ed8; }
.hp-iv-sub { font-size: .8rem; color: var(--rt-text-sub); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-iv-meta { font-family: 'DM Mono', monospace; font-size: .65rem; color: var(--rt-text-faint); margin-top: .3rem; }

/* ═══════════════════════════════════════════════════════════════════════
   5 · VIDEOS + FOTOS (Zwei Spalten)
═══════════════════════════════════════════════════════════════════════ */
.hp-media-duo {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 768px) { .hp-media-duo { grid-template-columns: 1fr 1fr; } }

.hp-media-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
}

.hp-media-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--rt-card-bg); border: var(--rt-card-border);
  overflow: hidden; transition: box-shadow .15s, transform .15s;
}
.hp-media-card.vid { border-top: 3px solid #7c3aed; }
.hp-media-card.fot { border-top: 3px solid #0891b2; }
.hp-media-card:hover { box-shadow: var(--rt-card-shadow); transform: translateY(-2px); }
.hp-media-thumb {
  height: 100px; overflow: hidden; background: var(--paper-3); position: relative;
}
.hp-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .35s; }
.hp-media-card:hover .hp-media-thumb img { filter: var(--rt-img-hover); }
.hp-media-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3); transition: background .15s;
}
.hp-media-card:hover .hp-media-play { background: rgba(0,0,0,.5); }
.hp-media-play-icon {
  width: 28px; height: 28px; background: rgba(255,255,255,.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hp-media-body { padding: .4rem .55rem .55rem; }
.hp-media-title { font-family: var(--rt-font-card), sans-serif; font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s; }
.hp-media-card.vid:hover .hp-media-title { color: #7c3aed; }
.hp-media-card.fot:hover .hp-media-title { color: #0891b2; }
.hp-media-sub { font-size: .72rem; color: var(--rt-text-faint); margin-top: .1rem; }


/* ═══════════════════════════════════════════════════════════════════════
   7 · COMMUNITY FEED
═══════════════════════════════════════════════════════════════════════ */

/* Beitrag-Rich-Card im Homepage-Feed */
.hp-fp-bc {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid rgba(14,12,9,.12); overflow: hidden;
  transition: border-color .15s;
}
.hp-fp-bc:hover { border-color: rgba(14,12,9,.3); }
.hp-fp-bc-img-wrap {
  position: relative; aspect-ratio: 16/7; overflow: hidden; background: var(--paper-3);
}
.hp-fp-bc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.hp-fp-bc:hover .hp-fp-bc-img { transform: scale(1.04); }
.hp-fp-bc-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
}
.hp-fp-bc-badge {
  position: absolute; top: .4rem; left: .45rem;
  font-family: 'Bebas Neue', sans-serif; font-size: .65rem; letter-spacing: .1em;
  color: #fff; padding: 1px 7px; pointer-events: none;
}
.hp-fp-bc-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hp-fp-bc-play svg {
  background: rgba(255,255,255,.8); border-radius: 50%;
  padding: 7px 7px 7px 9px; width: 30px; height: 30px; box-sizing: content-box;
  transition: background .15s;
}
.hp-fp-bc:hover .hp-fp-bc-play svg { background: #fff; }
.hp-fp-bc-foot {
  padding: .4rem .55rem .5rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.hp-fp-bc-titel {
  font-family: var(--rt-font-card), sans-serif; font-size: .92rem;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .12s;
}
.hp-fp-bc:hover .hp-fp-bc-titel { color: var(--red); }
.hp-fp-bc-sub {
  font-size: .72rem; color: var(--rt-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hp-feed-grid {
  display: grid; grid-template-columns: 1fr; gap: .6rem;
}
@media (min-width: 560px) { .hp-feed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hp-feed-grid { grid-template-columns: repeat(3, 1fr); } }

.hp-fp {
  background: var(--rt-card-bg); border: var(--rt-card-border);
  border-top: 3px solid var(--rt-accent-2);
  padding: .8rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  position: relative; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.hp-fp:hover { border-color: rgba(14,12,9,.35); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
/* Stretched link — deckt die gesamte Karte ab */
.hp-fp-card-link {
  position: absolute; inset: 0; z-index: 0;
}
/* Nur konkrete Links innerhalb der Karte über dem Stretched Link */
.hp-fp-head a,
.hp-fp-body a { position: relative; z-index: 1; }
.hp-fp-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hp-fp-av {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 2px solid var(--ink);
}
.hp-fp-meta { min-width: 0; flex: 1; }
.hp-fp-nick {
  display: block; font-family: 'DM Mono', monospace; font-weight: 700;
  font-size: .78rem; letter-spacing: .03em; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s;
}
.hp-fp-nick:hover { color: var(--rt-accent-2); }
.hp-fp-time { font-family: 'DM Mono', monospace; font-size: .63rem; color: var(--rt-text-faint); }
.hp-fp-body { min-width: 0; flex: 1; }
.hp-fp-text {
  font-size: .86rem; color: var(--rt-text-sub); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-hashtag { color: var(--red); text-decoration: none; font-weight: 600; }
.tl-hashtag:hover { text-decoration: underline; }
.hp-fp-beitrag {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .55rem;
  background: var(--paper); border-left: 3px solid var(--red);
  text-decoration: none; color: inherit; transition: background .12s;
}
.hp-fp-beitrag:hover { background: var(--paper-3); }
.hp-fp-b-art { font-family: 'Bebas Neue', sans-serif; font-size: .72rem; letter-spacing: .08em; color: var(--red); flex-shrink: 0; }
.hp-fp-b-titel { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-fp-og {
  border: 1px solid var(--rt-border-subtle); text-decoration: none; display: flex; flex-direction: column; overflow: hidden;
}
.hp-fp-og img { width: 100%; max-height: 90px; object-fit: cover; display: block; }
.hp-fp-og-body { padding: .3rem .45rem .4rem; }
.hp-fp-og-domain { font-family: 'DM Mono', monospace; font-size: .63rem; color: var(--rt-text-faint); display: block; }
.hp-fp-og-title { font-size: .78rem; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-fp-thumbs { display: flex; gap: 2px; overflow: hidden; }
.hp-fp-thumbs img { flex: 1; min-width: 0; max-width: 33.33%; aspect-ratio: 1; object-fit: cover; display: block; }
.hp-feed-nav { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.hp-feed-btn {
  font-family: 'DM Mono', monospace; font-size: .75rem;
  padding: .3rem .7rem; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); text-decoration: none; transition: background .12s, color .12s;
}
.hp-feed-btn:hover, .hp-feed-btn.cur { background: var(--ink); color: var(--paper); }


/* ═══════════════════════════════════════════════════════════════════════
   6 · BROWSER GAMES Teaser
═══════════════════════════════════════════════════════════════════════ */
.hp-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.hp-game-tile {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 120px; padding: 1rem 1.25rem;
  text-decoration: none; overflow: hidden; position: relative;
  transition: transform .12s, box-shadow .12s;
}
.hp-game-tile:hover { transform: translate(-3px, -3px); }
.hp-game-tile--pr {
  background: #0a0a0a; border: 2px solid #ff3300;
  box-shadow: 4px 4px 0 #ff3300;
}
.hp-game-tile--pr:hover { box-shadow: 6px 6px 0 #ff3300; }
.hp-game-tile--st {
  background: #000; border: 2px solid #007730;
  box-shadow: 4px 4px 0 #007730;
}
.hp-game-tile--st:hover { box-shadow: 6px 6px 0 #007730; }
/* Krypta stand hier nicht, obwohl es in der Beta ist — das Raster ist auto-fit,
   die dritte Kachel fügt sich ohne weitere Anpassung ein. */
.hp-game-tile--kr {
  background: #0a0007; border: 3px solid #440011; box-shadow: 4px 4px 0 #660011;
}
.hp-game-tile--kr:hover { box-shadow: 6px 6px 0 #880022; }
/* Pixel-Deko Hintergrund */
.hp-game-tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
}
.hp-game-tile--pr::before {
  background: repeating-linear-gradient(
    90deg, #ff3300 0px, #ff3300 2px, transparent 2px, transparent 18px
  );
}
.hp-game-tile--st::before {
  background: repeating-linear-gradient(
    0deg, #00c850 0px, #00c850 1px, transparent 1px, transparent 14px
  );
}
.hp-game-tile--kr::before {
  background: repeating-linear-gradient(
    45deg, #cc2233 0px, #cc2233 1px, transparent 1px, transparent 12px
  );
}
.hp-game-name {
  font-family: 'Permanent Marker', cursive;
  line-height: 1; position: relative; z-index: 1;
  text-shadow: 2px 2px 0 #000;
}
.hp-game-tile--pr .hp-game-name { font-size: clamp(1.4rem, 3vw, 2.1rem); color: #ff3300; }
.hp-game-tile--st .hp-game-name { font-size: clamp(1rem, 2.5vw, 1.5rem); color: #00c850; }
.hp-game-tile--kr .hp-game-name { font-size: clamp(1.3rem, 2.8vw, 1.9rem); color: #cc3333; }
.hp-game-sub {
  font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  margin-top: .2rem; position: relative; z-index: 1;
}
.hp-game-tile--pr .hp-game-sub { color: rgba(255,51,0,.5); }
.hp-game-tile--st .hp-game-sub { color: rgba(0,200,80,.4); }
.hp-game-tile--kr .hp-game-sub { color: rgba(200,50,50,.5); }
.hp-game-cta {
  font-family: 'Bebas Neue', sans-serif; font-size: .9rem; letter-spacing: .2em;
  margin-top: .55rem; position: relative; z-index: 1;
}
.hp-game-tile--pr .hp-game-cta { color: #ffd700; }
.hp-game-tile--st .hp-game-cta { color: #7fff80; }
.hp-game-tile--kr .hp-game-cta { color: #ddaa44; }