/* =========================================================
   7er Club Mannheim – Retro-Konzertplakat
   Siebdruck-Farben auf Papier, grobe Plakatschriften,
   Rasterpunkte und leicht versetzter Druck.
   ========================================================= */

:root {
  --paper: #efe5cf;
  --paper-2: #e6d9bc;
  --ink: #1c1814;
  --ink-2: #2a241e;
  --red: #8b1a2f;        /* Weinrot (CI) */
  --red-hell: #d4566b;   /* Weinrot aufgehellt für Schrift auf Schwarz */
  --mustard: #f0ac2e;
  --teal: #1e6b72;
  --muted: #6b5f50;

  --f-display: "Bowlby One", "Impact", sans-serif;
  --f-cond: "Anton", "Impact", sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "Courier Prime", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Papierkorn über allem */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--mustard); padding: 8px 14px; font-weight: 800; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: 400 1.05rem/1 var(--f-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px 14px;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-red { background: var(--red); color: var(--paper); }
.btn-mustard { background: var(--mustard); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--red); }
.btn-ghost { background: transparent; }

.link-arrow {
  font: 400 1rem/1 var(--f-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid var(--red);
  padding-bottom: 4px;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--red); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 12px var(--gutter);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px solid var(--red);
}
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nav a {
  font: 400 1rem/1 var(--f-cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:not(.nav-cta):hover { color: var(--mustard); }
.nav-cta { background: var(--mustard); color: var(--ink); padding: 10px 16px 9px; }
.nav-cta:hover { background: var(--paper); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--paper); margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 4px solid var(--red);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 18px var(--gutter); font-size: 1.4rem; border-top: 1px solid var(--ink-2); }
  .nav-cta { margin: 12px var(--gutter) 18px; text-align: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Hero / Plakat ---------- */
.hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Rasterpunkte in der Ecke */
.hero::before {
  content: "";
  position: absolute;
  right: -10%; top: -20%;
  width: 70%; height: 120%;
  background: radial-gradient(circle, var(--mustard) 2.2px, transparent 2.6px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 65%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 65%);
  opacity: .8;
  z-index: -1;
}
.hero-poster { position: relative; }
.kicker {
  font: 700 .85rem/1.3 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--muted);
}
.hero-title {
  margin: 0;
  line-height: .8;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
}
.hero-title span { display: block; }
.ht-7 {
  font-size: clamp(6.5rem, 22vw, 17rem);
  color: var(--red);
  letter-spacing: -.02em;
  /* versetzter Siebdruck */
  text-shadow: 6px 6px 0 var(--teal);
}
.ht-club {
  font-size: clamp(4rem, 13.5vw, 10.4rem);
  color: var(--ink);
  letter-spacing: .02em;
  margin-top: -.04em;
  -webkit-text-stroke: 0;
}
.hero-genres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 18px; padding: 0;
}
.hero-genres span {
  font: 400 1.05rem/1 var(--f-cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 11px 6px;
  border: 2px solid var(--ink);
}
.hero-genres span:nth-child(3n+1) { background: var(--ink); color: var(--paper); }
.hero-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.stamp {
  position: absolute;
  top: clamp(40px, 8vw, 110px);
  right: 0;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  text-align: center;
  font: 400 1.05rem/1.05 var(--f-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  border: 4px double var(--red);
  border-radius: 50%;
  transform: rotate(-14deg);
  opacity: .9;
  mix-blend-mode: multiply;
}

/* Nächste Show */
.next-show {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 22px 26px;
  transform: rotate(1.4deg);
  box-shadow: 10px 10px 0 var(--red);
}
.ns-label {
  position: absolute; top: -16px; left: 18px;
  margin: 0;
  background: var(--mustard); color: var(--ink);
  font: 400 1rem/1 var(--f-cond);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px 7px;
  transform: rotate(-3deg);
}
.ns-poster { margin: 10px 0 18px; }
/* Flyer vollständig zeigen – nicht beschneiden, nur bei Bedarf verkleinern */
.ns-flyer { display: block; width: auto; max-width: 100%; height: auto; max-height: min(64vh, 560px); margin: 0 auto; }
.ns-date { font: 700 .9rem/1.2 var(--f-mono); color: var(--mustard); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.ns-title { font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--f-cond); text-transform: uppercase; margin: 0 0 4px; }
.ns-sub { margin: 0 0 18px; color: #cbbfa6; }
.next-show .btn { border-color: var(--paper); box-shadow: 5px 5px 0 var(--paper); }

/* Klebeband */
.taped { position: relative; margin: 0; }
.taped::before, .taped::after {
  content: "";
  position: absolute;
  width: 92px; height: 26px;
  background: rgba(240, 229, 200, .72);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  z-index: 2;
}
.taped::before { top: -11px; left: -18px; transform: rotate(-32deg); }
.taped::after { top: -11px; right: -18px; transform: rotate(32deg); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .next-show { max-width: 420px; }
  .stamp { width: 96px; height: 96px; font-size: .85rem; top: 118px; }
}

/* ---------- Laufband ---------- */
.ticker {
  background: var(--red);
  color: var(--paper);
  border-block: 4px solid var(--ink);
  overflow: hidden;
  transform: rotate(-1.2deg);
  margin: 0 -2vw;
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker span {
  font: 400 clamp(1.3rem, 2.4vw, 1.9rem)/1 var(--f-cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 0 14px;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Sektionen ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
}
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 4px solid currentColor;
  padding-bottom: 14px;
}
.section-no {
  grid-row: span 2;
  margin: 0;
  font: 400 clamp(3rem, 7vw, 5.5rem)/.8 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
}
.section-head h2 {
  margin: 0;
  font: 400 clamp(2.6rem, 7vw, 5.6rem)/.9 var(--f-cond);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.section-sub { margin: 8px 0 0; color: var(--muted); max-width: 40em; }
.sub-head {
  font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1 var(--f-cond);
  text-transform: uppercase;
  margin: clamp(56px, 7vw, 88px) 0 24px;
}

/* ---------- Programm ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chip {
  font: 400 1rem/1 var(--f-cond);
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent;
  border: 2px solid var(--ink);
  padding: 10px 16px 9px;
}
.chip:hover { background: var(--paper-2); }
.chip.is-active { background: var(--ink); color: var(--paper); }

.month-head {
  font: 400 clamp(1.5rem, 3vw, 2.1rem)/1 var(--f-display);
  text-transform: uppercase;
  margin: 44px 0 16px;
  color: var(--teal);
}
.month-head span { color: var(--muted); font-size: .6em; vertical-align: middle; }
.month-head:first-child { margin-top: 0; }

/* Ticket-Abriss */
.event {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 92px 84px 1fr auto;
  align-items: center;
  gap: 0 22px;
  background: #f7f0de;
  border: 2px solid var(--ink);
  margin-bottom: 14px;
  padding: 14px 22px 14px 0;
  transition: transform .15s, box-shadow .15s;
  -webkit-mask: radial-gradient(circle var(--notch) at 92px 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at 92px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 92px 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at 92px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.event:hover { transform: translateX(6px); box-shadow: -6px 0 0 var(--red); }
.ev-date {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 3px dashed var(--ink);
  margin: -14px 0;
  padding: 14px 0;
  text-transform: uppercase;
}
.ev-day { font: 700 .8rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.ev-num { font: 400 2.6rem/1 var(--f-display); color: var(--red); margin: 2px 0; }
.ev-mon { font: 400 1rem/1 var(--f-cond); letter-spacing: .1em; }
.ev-flyer {
  width: 84px; height: 104px;
  object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--ink-2);
  filter: saturate(.9) contrast(1.05);
}
.flyer-type {
  display: grid; place-items: center;
  padding: 6px;
  background: var(--teal);
  color: var(--paper);
  text-align: center;
  font: 400 .78rem/1 var(--f-cond);
  text-transform: uppercase;
  overflow: hidden;
}
.ns-flyer.flyer-type { width: 100%; aspect-ratio: 4 / 5; font-size: clamp(2rem, 4vw, 3rem); padding: 24px; background: var(--teal); }
.ev-info { min-width: 0; }
.ev-type {
  display: inline-block;
  font: 700 .72rem/1 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 7px 3px;
  margin-bottom: 6px;
  color: var(--paper);
}
.ev-type-konzert { background: var(--red); }
.ev-type-tribute { background: var(--teal); }
.ev-type-party { background: var(--mustard); color: var(--ink); }
.ev-title { margin: 0; font: 400 clamp(1.3rem, 2.2vw, 1.75rem)/1.05 var(--f-cond); text-transform: uppercase; }
.ev-sub { margin: 3px 0 0; font-weight: 600; }
.ev-time { margin: 4px 0 0; font: 400 .88rem/1.2 var(--f-mono); color: var(--muted); }
.ev-tix { display: flex; flex-direction: column; gap: 8px; }
.tix {
  font: 400 .95rem/1 var(--f-cond);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  padding: 10px 14px 9px;
  background: var(--ink); color: var(--paper);
  min-width: 110px;
}
.tix:hover { background: var(--red); }
.tix-door { background: transparent; color: var(--muted); border: 2px dashed var(--muted); }
.event-empty { font-family: var(--f-mono); }

@media (max-width: 720px) {
  .event {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "date info" "date tix";
    gap: 10px 16px;
    padding-right: 16px;
    -webkit-mask: none; mask: none;
  }
  .ev-date { grid-area: date; }
  .ev-flyer { display: none; }
  .ev-info { grid-area: info; }
  .ev-tix { grid-area: tix; flex-direction: row; flex-wrap: wrap; }
  .tix { min-width: 0; }
  .ev-num { font-size: 2.1rem; }
}

/* ---------- Der Club (dunkle Sektion) ---------- */
.club {
  max-width: none;
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.club > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.club .section-no { -webkit-text-stroke-color: var(--mustard); }
.club-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.club-lede {
  font: 400 clamp(1.5rem, 2.8vw, 2.2rem)/1.15 var(--f-cond);
  text-transform: uppercase;
  margin-top: 0;
  color: var(--mustard);
}
.club-text p { max-width: 36em; }
.club-rent {
  margin-top: 32px;
  padding: 22px 24px;
  border: 2px dashed var(--paper);
}
.club-rent h3 { margin: 0 0 6px; font: 400 1.6rem/1 var(--f-cond); text-transform: uppercase; }
.club-rent p { margin: 0 0 14px; }
.club .link-arrow { border-color: var(--mustard); }
.club .link-arrow:hover { color: var(--mustard); }
.club-photo figure { transform: rotate(-2deg); background: var(--paper); padding: 12px 12px 0; box-shadow: 10px 10px 0 var(--red); }
.club-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.35) contrast(1.1); }
.club-photo figcaption { color: var(--ink); font: 700 .9rem/1 var(--f-mono); padding: 12px 2px 14px; text-transform: uppercase; letter-spacing: .06em; }

.facts {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 6vw, 80px) !important;
  border-top: 4px solid var(--paper);
  border-bottom: 4px solid var(--paper);
}
.facts li {
  padding: 24px 12px;
  text-align: center;
  border-right: 2px solid var(--ink-2);
}
.facts li:last-child { border-right: 0; }
.facts strong { display: block; font: 400 clamp(2rem, 4.6vw, 3.6rem)/1 var(--f-display); color: var(--red); }
.facts span { font: 400 1rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.tech-note { font: 400 .95rem/1.5 var(--f-mono); color: #cbbfa6; margin-top: 28px !important; }
.tech-note a { color: var(--paper); }

@media (max-width: 860px) {
  .club-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(2) { border-right: 0; }
  .facts li:nth-child(-n+2) { border-bottom: 2px solid var(--ink-2); }
}

/* ---------- Videos & Fotos ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.video { margin: 0; }
.video-btn, .video iframe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  padding: 0;
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--teal);
}
.video-btn img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.15) sepia(.2); transition: filter .2s; }
.video-btn:hover img { filter: none; }
.play {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.play::after {
  content: ""; position: absolute; left: 24px; top: 17px;
  border-left: 20px solid var(--paper);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.video figcaption { margin-top: 12px; font-size: .95rem; }
.video figcaption strong { font: 400 1.15rem/1.1 var(--f-cond); text-transform: uppercase; }
.video figcaption span { font-family: var(--f-mono); color: var(--muted); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.photo {
  padding: 0; border: 3px solid var(--ink); background: var(--ink);
  aspect-ratio: 1;
  overflow: hidden;
}
.photo:nth-child(1), .photo:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); transition: filter .25s, transform .4s; }
.photo:hover img { filter: grayscale(0); transform: scale(1.04); }
.more-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh;
}
.lightbox::backdrop { background: rgba(20, 16, 12, .94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 88vw; max-height: 84vh; border: 6px solid var(--paper); }
.lightbox button {
  position: fixed;
  background: var(--mustard); color: var(--ink);
  border: 3px solid var(--ink);
  width: 52px; height: 52px;
  font: 400 2rem/1 var(--f-cond);
}
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .video-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo:nth-child(6) { grid-column: auto; grid-row: auto; }
}

/* ---------- Anfahrt & Kontakt ---------- */
.anfahrt { padding-bottom: clamp(80px, 10vw, 140px); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.ticket-card {
  background: #f7f0de;
  border: 2px solid var(--ink);
  padding: 24px;
  box-shadow: 6px 6px 0 var(--ink);
}
.ticket-card p { margin: 0 0 18px; }
.tc-label {
  font: 700 .78rem/1 var(--f-mono) !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px !important;
  padding-top: 2px;
}
.tc-address { font: 400 1.5rem/1.1 var(--f-cond); text-transform: uppercase; }
.big-mail { font: 400 1.25rem/1.2 var(--f-cond); letter-spacing: .02em; text-decoration-thickness: 2px; text-underline-offset: 4px; word-break: break-word; }
.big-mail:hover { color: var(--red); }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.socials a {
  display: inline-block;
  font: 400 .9rem/1 var(--f-cond);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 7px 10px 6px;
}
.socials a:hover { background: var(--ink); color: var(--paper); }

.map {
  position: relative;
  min-height: 380px;
  border: 3px solid var(--ink);
  background:
    radial-gradient(circle, rgba(28,24,20,.18) 1.4px, transparent 1.8px) 0 0 / 9px 9px,
    var(--paper-2);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) sepia(.25) contrast(1.05); }
.map-consent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 28px;
  text-align: center;
  font-size: .95rem;
}
.map-consent p { max-width: 26em; margin: 0; }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .map { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
  .map { min-height: 300px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--red);
  color: var(--paper);
  padding: clamp(40px, 6vw, 72px) var(--gutter) 28px;
  border-top: 4px solid var(--ink);
  overflow: hidden;
}
.footer-big {
  margin: 0 0 28px;
  font: 400 clamp(2.6rem, 10.5vw, 9.5rem)/.85 var(--f-display);
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 5px 5px 0 var(--mustard);
  white-space: nowrap;
}
.footer-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font: 400 .9rem/1.4 var(--f-mono);
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.footer-row p { margin: 0; }

/* ---------- Entwurfs-Umschalter ---------- */
.draft-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 150;
  display: flex;
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  font: 400 .9rem/1 var(--f-cond);
  letter-spacing: .08em; text-transform: uppercase;
}
.draft-switch a { color: var(--paper); text-decoration: none; padding: 10px 14px 9px; }
.draft-switch a[aria-current="page"] { background: var(--mustard); color: var(--ink); }

/* ---------- Programm: ganze Zeile klickbar ---------- */
.event { cursor: pointer; }
.ev-link { text-decoration: none; }
.ev-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ev-tix { position: relative; z-index: 1; }
.ev-more {
  margin-left: 10px;
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ev-more::after { content: " →"; }
.event:hover .ev-title { color: var(--red); }
.ns-poster { display: block; }
.ns-title a { text-decoration: none; }
.ns-title a:hover { color: var(--mustard); }

/* ---------- Event-Details ---------- */
html.modal-open { overflow: hidden; }
.event-modal {
  width: min(1000px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--red);
  overflow: hidden;
}
.event-modal::backdrop { background: rgba(28, 24, 20, .82); }
.em-inner {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  max-height: inherit;
  overflow: auto;
}
.em-media {
  position: sticky; top: 0;
  align-self: start;
  background: var(--ink);
  padding: 22px;
  min-height: 100%;
}
.em-flyer { width: 100%; height: auto; border: 3px solid var(--paper); }
.em-flyer.flyer-type { aspect-ratio: 3 / 4; font-size: 2.4rem; padding: 24px; }
.em-body { position: relative; padding: 34px 36px 30px; }
.em-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 44px; height: 44px;
  background: var(--ink); color: var(--paper);
  border: 0;
  font: 400 1.8rem/1 var(--f-cond);
}
.em-close:hover { background: var(--red); }
.em-date { margin: 10px 0 4px; font: 700 .9rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.em-title { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.4rem)/.95 var(--f-display); text-transform: uppercase; padding-right: 40px; }
.em-sub { margin: 8px 0 0; font-weight: 600; font-size: 1.1rem; }
.em-facts {
  display: flex; flex-wrap: wrap;
  margin: 22px 0;
  border: 2px solid var(--ink);
}
.em-facts div { flex: 1 1 120px; padding: 10px 14px; border-right: 2px dashed var(--ink); }
.em-facts div:last-child { border-right: 0; }
.em-facts dt { font: 700 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.em-facts dd { margin: 5px 0 0; font: 400 1.15rem/1.1 var(--f-cond); text-transform: uppercase; }
.em-past { font-family: var(--f-mono); background: var(--paper-2); padding: 10px 14px; }
.em-desc p { margin: 0 0 14px; }
.em-h { margin: 22px 0 10px; font: 400 1.3rem/1 var(--f-cond) !important; text-transform: uppercase; letter-spacing: .04em; }
.em-lineup { list-style: none; margin: 0; padding: 0; }
.em-lineup li { padding: 8px 0; border-bottom: 2px dotted rgba(28,24,20,.35); font-weight: 600; }
.em-lineup li::before { content: "✸ "; color: var(--red); }
.em-tix-row { display: flex; flex-wrap: wrap; gap: 14px; }
.em-tix-row .tix-door { box-shadow: none; border-style: dashed; background: transparent; }
.em-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.em-action {
  background: transparent;
  border: 2px solid var(--ink);
  padding: 10px 14px 9px;
  font: 400 .95rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
}
.em-action:hover { background: var(--ink); color: var(--paper); }
.em-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 28px; padding-top: 18px;
  border-top: 3px solid var(--ink);
}
.em-nav a { text-decoration: none; font: 400 1.05rem/1.15 var(--f-cond); text-transform: uppercase; }
.em-nav a:hover { color: var(--red); }
.em-nav small { display: block; font: 700 .7rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.em-next { text-align: right; }
.em-prev small::before { content: "← "; }
.em-next small::after { content: " →"; }

@media (max-width: 760px) {
  .event-modal { width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin: 0; border: 0; box-shadow: none; }
  .em-inner { grid-template-columns: 1fr; height: 100%; }
  .em-media { position: relative; padding: 16px 16px 0; min-height: 0; }
  .em-flyer { max-height: 55vh; width: auto; margin: 0 auto; }
  .em-body { padding: 24px 18px 30px; }
  .em-close { position: fixed; }
}

/* ---------- Eventkalender ---------- */
.kalender { border-top: 4px dashed var(--ink); }
.cal {
  background: #f7f0de;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.cal-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 3px solid var(--ink);
}
.cal-title {
  margin: 0 8px; min-width: 7.5em;
  font: 400 clamp(1.5rem, 3vw, 2.2rem)/1 var(--f-display);
  text-transform: uppercase;
  color: var(--red);
}
.cal-title span { color: var(--ink); font-size: .6em; }
.cal-btn, .cal-today {
  height: 44px;
  background: var(--ink); color: var(--paper);
  border: 0;
  font: 400 1.5rem/1 var(--f-cond);
}
.cal-btn { width: 44px; }
.cal-today { padding: 0 16px; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.cal-btn:hover:not(:disabled), .cal-today:hover:not(:disabled) { background: var(--red); }
.cal-btn:disabled, .cal-today:disabled { opacity: .25; cursor: default; }
.cal-legend { display: flex; gap: 16px; margin: 0 0 0 auto; padding: 0; list-style: none; font: 700 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.cal-legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border: 2px solid var(--ink); }
.lg-konzert::before { background: var(--red); }
.lg-tribute::before { background: var(--teal); }
.lg-party::before { background: var(--mustard); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd {
  padding: 10px 8px 9px;
  background: var(--ink); color: var(--paper);
  font: 400 .95rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
}
.cal-day {
  min-height: 124px;
  padding: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-grid > :nth-last-child(-n+7) { border-bottom: 0; }
.cal-num { font: 700 .95rem/1 var(--f-mono); }
.cal-day.is-other { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(28,24,20,.06) 6px 8px); }
.cal-day.is-other .cal-num { opacity: .35; }
.cal-day.is-past:not(.is-other) .cal-num { opacity: .45; }
.cal-day.is-today .cal-num {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin: -4px 0 0 -4px;
  background: var(--red); color: var(--paper);
  border-radius: 50%;
}
.cal-ev {
  display: flex; gap: 6px; align-items: stretch;
  text-decoration: none;
  background: var(--teal); color: var(--paper);
  border: 2px solid var(--ink);
  transition: transform .12s, box-shadow .12s;
  min-width: 0;
}
.cal-ev:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.cal-ev-konzert { background: var(--red); }
.cal-ev-party { background: var(--mustard); color: var(--ink); }
.cal-ev img { width: 30px; height: 40px; object-fit: cover; flex: none; border-right: 2px solid var(--ink); }
.cal-ev-text { padding: 4px 6px 4px 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cal-ev:not(:has(img)) .cal-ev-text { padding-left: 6px; }
.cal-ev b {
  font: 400 .85rem/1.05 var(--f-cond); text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-ev small { font: 700 .66rem/1.2 var(--f-mono); opacity: .85; }

.cal-agenda { display: none; }

@media (max-width: 860px) {
  .cal-legend { margin-left: 0; width: 100%; }
  .cal-day { min-height: 64px; padding: 6px; align-items: center; }
  .cal-day.has-events { background: var(--paper-2); }
  .cal-ev { width: 12px; height: 12px; border-radius: 50%; border-width: 2px; padding: 0; }
  .cal-ev img, .cal-ev-text { display: none; }
  .cal-ev:hover { transform: none; box-shadow: none; }
  .cal-day { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 4px; }
  .cal-num { width: 100%; text-align: center; }
  .cal-day.is-today .cal-num { width: 26px; margin: -3px auto 0; }

  .cal-agenda { display: block; border-top: 3px solid var(--ink); }
  .cal-ag {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 16px;
    border-bottom: 2px dashed var(--ink);
    text-decoration: none;
  }
  .cal-ag:last-child { border-bottom: 0; }
  .cal-ag-date { display: flex; flex-direction: column; align-items: center; min-width: 44px; font: 700 .72rem/1 var(--f-mono); text-transform: uppercase; color: var(--muted); }
  .cal-ag-date b { font: 400 1.8rem/1 var(--f-display); color: var(--red); }
  .cal-ag-info { display: flex; flex-direction: column; align-items: flex-start; }
  .cal-ag-info .ev-type { margin-bottom: 4px; }
  .cal-ag-info b { font: 400 1.15rem/1.1 var(--f-cond); text-transform: uppercase; }
  .cal-ag-info small { font-family: var(--f-mono); color: var(--muted); }
  .cal-none { padding: 16px; margin: 0; font-family: var(--f-mono); }
}

/* ---------- Nach oben ---------- */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 150;
  width: 52px; height: 52px;
  background: var(--mustard); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 1.6rem/1 var(--f-cond);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .25s, transform .25s, box-shadow .12s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 6px 6px 0 var(--red); }

@media (max-width: 760px) {
  .em-inner { display: block; }
  .em-flyer.flyer-type { aspect-ratio: auto; min-height: 160px; font-size: 1.8rem; }
}
@media (max-width: 860px) {
  .cal-title { order: -1; width: 100%; margin: 0 0 4px; }
}

/* ---------- Rechtliches ---------- */
.nav-simple { display: flex !important; position: static !important; background: none !important; border: 0 !important; }
.nav-simple a { padding: 0 !important; font-size: 1rem !important; border: 0 !important; }
.legal-body { max-width: 760px; }
.legal-body h3 { font: 400 1.5rem/1.1 var(--f-cond); text-transform: uppercase; margin: 36px 0 10px; }
.legal-body p { margin: 0 0 14px; overflow-wrap: anywhere; }
.legal-body a { color: var(--red); }
.legal .section-head { grid-template-columns: auto 1fr; }

/* ---------- Logo (Vektor-Nachbau) ---------- */
.brand { display: block; color: var(--paper); line-height: 0; }
.brand-logo { display: block; width: 89px; height: 46px; }
.hero-logo { margin: 4px 0 0; color: var(--ink); line-height: 0; }
.hero-logo svg {
  display: block;
  width: min(100%, 660px);
  height: auto;
  aspect-ratio: 948 / 490;
}

/* ---------- 7er Radio im Banner ---------- */
.radio-band {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  background: var(--red);
  color: var(--paper);
  border-block: 4px solid var(--ink);
  transform: rotate(-1.2deg);
  margin: 0 -2vw;
}
.radio-band .ticker {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: none; border: 0; transform: none; margin: 0;
}
.radio-player {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  max-width: 52%;
  padding: 10px 22px 10px calc(2vw + var(--gutter));
  background: var(--ink);
}
.radio-play {
  flex: none;
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mustard);
  border: 3px solid var(--paper);
  display: grid; place-items: center;
  transition: transform .12s;
}
.radio-play:hover { transform: scale(1.06); }
.rp-icon {
  width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid var(--ink);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.radio-band.is-playing .rp-icon {
  width: 16px; height: 20px; margin: 0; border: 0;
  background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%);
}
.radio-band.is-loading .rp-icon {
  width: 22px; height: 22px; margin: 0;
  border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.radio-cover { flex: none; width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--paper); }
.radio-meta { min-width: 0; }
.radio-name { margin: 0; font: 400 1.3rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.radio-live {
  display: inline-block;
  margin-right: 6px; padding: 3px 6px 2px;
  background: var(--red);
  font-size: .62em; letter-spacing: .12em;
  vertical-align: 3px;
}
.radio-band.is-playing .radio-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
  border-radius: 50%; background: var(--paper);
  animation: blink 1.2s infinite;
}
@keyframes blink { 50% { opacity: .2; } }
.radio-now {
  margin: 5px 0 0;
  max-width: 34ch;
  font: 400 .85rem/1.3 var(--f-mono);
  color: #cbbfa6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.radio-link {
  flex: none;
  margin-left: 4px;
  font: 400 .9rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mustard); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.radio-link:hover { color: var(--paper); }

@media (max-width: 760px) {
  .radio-band { flex-direction: column; transform: rotate(-1.2deg); }
  .radio-player { max-width: none; padding: 12px var(--gutter) 12px calc(2vw + var(--gutter)); gap: 12px; }
  .radio-meta { flex: 1; }
  .radio-now { max-width: none; }
  .radio-link { display: none; }
}
@media (prefers-reduced-motion: reduce) { .radio-band.is-loading .rp-icon, .radio-live::before { animation: none; } }

/* ---------- Programm: Monate springen & einklappen ---------- */
.month-jump {
  position: sticky; top: 72px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 0;
  margin-bottom: 22px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.mj-label { margin-right: 4px; font: 700 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.month-jump a {
  font: 400 1rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 9px 14px 8px;
}
.month-jump a:hover { background: var(--ink); color: var(--paper); }
.mj-all {
  margin-left: auto;
  background: none; border: 0; padding: 6px 0;
  font: 700 .8rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--red);
  text-decoration: underline; text-underline-offset: 3px;
}
.month-group { scroll-margin-top: 150px; }
.month-group .month-head { margin: 40px 0 14px; }
.month-group:first-of-type .month-head { margin-top: 0; }
.month-toggle {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 0 0 10px;
  background: none; border: 0;
  border-bottom: 3px solid var(--ink);
  font: inherit; color: inherit; text-align: left; text-transform: inherit;
}
.mt-name span { color: var(--muted); font-size: .6em; vertical-align: middle; }
.mt-count { font: 700 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mt-chev {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 3px solid var(--ink);
  color: var(--ink);
  font: 400 1.4rem/1 var(--f-cond);
  transition: background .15s, color .15s;
}
.mt-chev::before { content: "−"; }
.month-group.is-collapsed .mt-chev::before { content: "+"; }
.month-toggle:hover .mt-chev { background: var(--ink); color: var(--paper); }
.month-group.is-collapsed .month-head { margin-bottom: 0; }
@media (max-width: 720px) {
  .month-jump { top: 72px; gap: 6px; }
  .mj-label { width: 100%; }
  .month-jump a { padding: 8px 10px 7px; }
  .mt-count { display: none; }
}
.radio-cover[hidden] { display: none; }
.hero-poster .stamp { top: auto; bottom: 150px; right: 0; }
@media (max-width: 900px) { .hero-poster .stamp { bottom: auto; top: 40px; right: 0; width: 88px; height: 88px; font-size: .8rem; } }
@media (max-width: 600px) { .hero-poster .stamp { display: none; } }

/* ---------- Weinrot: Anpassungen für ausreichenden Kontrast ---------- */
.facts strong { color: var(--red-hell); }
.facts small { display: block; margin-bottom: 8px; font: 700 .82rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #e2d8c3; }
/* Saison-Wort (Indoor/Outdoor) etwas kleiner als die Zahlen, damit es in jeden Kasten passt */
.fakt-saison strong { font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.24; }
@media (max-width: 360px) { .fakt-saison strong { font-size: 1.4rem; } }
.footer-big { color: var(--paper); text-shadow: 5px 5px 0 var(--ink); }
.footer-row { border-top-color: rgba(239, 229, 207, .35); }

/* ---------- Untermenü "Programm" ---------- */
.nav-gruppe { position: relative; display: flex; align-items: center; }
.nav-haupt::after { content: " ▾"; font-size: .75em; }
.nav-unter {
  position: absolute; top: 100%; left: -16px; z-index: 60;
  display: none; flex-direction: column;
  min-width: 190px;
  padding: 14px 0 6px;               /* oben Luft, damit die Maus den Weg schafft */
}
.nav-unter::before {
  content: ""; position: absolute; inset: 10px 0 0;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 5px 5px 0 var(--red);
  z-index: -1;
}
.nav-unter a { padding: 11px 16px; white-space: nowrap; }
.nav-unter a:hover, .nav-unter a[aria-current="page"] { color: var(--mustard); }
.nav-gruppe:hover .nav-unter, .nav-gruppe:focus-within .nav-unter { display: flex; }
.kalender-seite { border-top: 0; }

@media (max-width: 820px) {
  .nav-gruppe { flex-direction: column; align-items: stretch; }
  .nav-haupt::after { content: ""; }
  .nav-unter { position: static; display: flex; min-width: 0; padding: 0; }
  .nav-unter::before { display: none; }
  .nav-unter a { padding-left: calc(var(--gutter) + 22px) !important; font-size: 1.1rem !important; }
  .nav-unter a::before { content: "↳ "; color: var(--red-hell); }
}

/* =========================================================
   Wow-Effekte
   ========================================================= */

/* ---------- Bühnenlicht im Kopfbereich ---------- */
.hero { isolation: isolate; }
.buehnenlicht {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 360px at var(--lx, 70%) var(--ly, 35%), rgba(255, 246, 220, .9), rgba(255, 246, 220, 0) 70%),
    radial-gradient(circle 1100px at var(--lx, 70%) var(--ly, 35%), rgba(28, 24, 20, 0) 22%, rgba(28, 24, 20, .2) 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

/* ---------- Equalizer im Radio-Band ---------- */
.radio-band .ticker { position: relative; }
.eq { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.radio-band .ticker-track { position: relative; z-index: 1; }

/* ---------- Countdown im Fallblatt-Look ---------- */
.fallblatt { margin: 12px 0 16px; }
.fb-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-gruppe { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fb-ziffern { display: flex; gap: 3px; }
.fb-zelle {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 42px;
  overflow: hidden;
  background: linear-gradient(#332c26 50%, #2a241f 50%);
  color: var(--paper);
  font: 400 1.7rem/1 var(--f-cond);
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .35);
  perspective: 220px;
}
.fb-zelle::after {   /* Fuge zwischen den Klappen */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0, 0, 0, .65);
}
.fb-neu { display: block; transform-origin: 50% 0; animation: klappen .38s cubic-bezier(.3, .7, .4, 1); }
@keyframes klappen { from { transform: rotateX(-95deg); opacity: .25; } to { transform: none; opacity: 1; } }
.fb-gruppe small { font: 700 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #cbbfa6; }
.fb-info { margin: 8px 0 0; font: 700 .8rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mustard); }
.fb-info:empty { display: none; }

/* ---------- Beton-Hintergrund (Über uns: Fish) ---------- */
.uu-fish {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 104px) var(--gutter) clamp(52px, 7vw, 84px);
  color: var(--paper);
  background:
    repeating-linear-gradient(to bottom, transparent 0 159px, rgba(0, 0, 0, .14) 159px 161px),   /* Schalungsfugen */
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, .1), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 0, 0, .3), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .19  0 0 0 0 .17  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),
    #69645c;
}
.pw-kicker { margin: 0 0 10px; font: 700 .85rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }

/* ---------- Ticket abreißen ---------- */
.abriss {
  pointer-events: none;
  border-left: 3px dashed currentColor !important;
  transform-origin: 0 0;
  animation: abreissen .85s cubic-bezier(.5, 0, .75, 0) forwards;
}
@keyframes abreissen {
  0% { transform: none; }
  22% { transform: rotate(-7deg) translate(4px, -3px); }
  100% { transform: rotate(26deg) translate(46px, 150px); opacity: 0; }
}
.abgerissen { opacity: .3; transition: opacity .3s; }

/* ---------- Hör rein (Detailansicht) ---------- */
.hoerrein { margin-top: 4px; }
.hoerrein-start {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 11px;
  background: var(--ink); color: var(--paper);
  border: 0;
  font: 400 1rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--red);
  cursor: pointer;
}
.hoerrein-start:hover { background: var(--red); }
.hoerrein-start small { font: 700 .7rem/1 var(--f-mono); letter-spacing: .1em; color: var(--mustard); }
.hr-play { width: 0; height: 0; border-left: 12px solid var(--mustard); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hoerrein-hinweis { margin: 8px 0 0 !important; font: 400 .78rem/1.3 var(--f-mono); color: var(--muted); }
.hoerrein-player { display: block; width: 100%; border: 3px solid var(--ink); }
.hoerrein-video { aspect-ratio: 16 / 9; height: auto; }

/* ---------- Versteckter Headbang-Modus ---------- */
.headbang main, .headbang .site-header { transform-origin: 50% 0; animation: headbangen .46s ease-in-out infinite; }
@keyframes headbangen {
  0%, 100% { transform: none; }
  35% { transform: translateY(calc(6px + var(--beat, 0) * 8px)) rotate(calc(-.6deg - var(--beat, 0) * 1.2deg)); }
  70% { transform: translateY(2px) rotate(calc(.6deg + var(--beat, 0) * 1.2deg)); }
}
.headbang-buehne { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; height: 120px; pointer-events: none; }
.feuerzeug { position: absolute; bottom: 0; left: var(--x); width: 16px; height: 46px; animation: aufsteigen 1.1s var(--d) ease-out both; }
.feuerzeug::before {   /* Flamme */
  content: ""; position: absolute; left: 1px; top: 0;
  width: 14px; height: 24px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 70%, #fff6c8 0 20%, #ffc53a 42%, #ff6a1a 68%, transparent 72%);
  filter: drop-shadow(0 0 8px rgba(255, 170, 40, .85));
  transform-origin: 50% 100%;
  animation: flackern var(--v) ease-in-out infinite alternate;
}
.feuerzeug::after {    /* Feuerzeug */
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 16px; height: 22px;
  background: var(--red);
  border: 2px solid var(--ink); border-radius: 3px;
}
@keyframes flackern { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.85, 1.12) rotate(4deg); } }
@keyframes aufsteigen { from { transform: translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }
.headbang-hinweis {
  position: fixed; left: 50%; top: 86px; z-index: 260;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--mustard);
  box-shadow: 5px 5px 0 var(--red);
  font: 400 1.1rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .headbang main, .headbang .site-header, .feuerzeug, .feuerzeug::before, .fb-neu, .abriss { animation: none; }
}

/* =========================================================
   Kopfbereich kompakt: Radio-Band sofort sichtbar
   ========================================================= */
.hero {
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(20px, 3.5vh, 44px) var(--gutter) clamp(30px, 4.5vh, 56px);
}
.hero-logo svg { width: min(100%, 640px, 62vh); }
.hero-genres { margin: 18px 0 14px; }
.hero-lede { margin-bottom: 22px; }

/* Karte "Nächste Show" quer: Flyer links, Infos rechts, Countdown darunter */
.next-show {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: stretch;
  padding: 26px 22px 20px;
}
.ns-poster { grid-column: 1; grid-row: 1; margin: 0; align-self: start; }
.ns-flyer { width: auto; max-width: 100%; max-height: min(40vh, 340px); margin: 0 auto; }
.ns-info { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ns-title { font-size: clamp(1.4rem, 2vw, 1.8rem); overflow-wrap: anywhere; }
.ns-sub { margin-bottom: 14px; }
.ns-info .btn { margin-top: auto; padding: 13px 16px 12px; font-size: .95rem; }
.next-show .fallblatt { grid-column: 1 / -1; grid-row: 2; margin: 0; padding-top: 14px; border-top: 2px dashed rgba(239, 229, 207, .25); }
.next-show .fb-zeile { gap: 8px 14px; }

/* Handy/Tablet: Karte steht hinter dem Radio-Band */
.next-show.unter-radio { max-width: 560px; margin: 46px var(--gutter) 6px; transform: rotate(.8deg); }
@media (min-width: 561px) and (max-width: 900px) { .next-show.unter-radio { margin-left: auto; margin-right: auto; } }
@media (max-width: 420px) {
  .next-show { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 14px; padding: 24px 16px 16px; }
  .next-show .fb-zelle { width: 26px; height: 38px; font-size: 1.45rem; }
}
/* Handy/Tablet: einspaltig (muss nach der kompakten Kopf-Regel stehen) */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: 18px; padding-bottom: 26px; }
  .hero-genres { margin: 14px 0 12px; }
  .hero-actions { gap: 12px; flex-wrap: nowrap; }
  .hero-actions .btn { padding: 13px 13px 12px; font-size: .95rem; white-space: nowrap; }
}

/* ---------- Karte "Nächste Show": größer, Radio-Band bleibt sichtbar ---------- */
@media (min-width: 901px) {
  .hero { grid-template-columns: 1fr 1fr; }
}
.next-show { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: 16px 20px; }
.ns-flyer { max-height: min(43vh, 460px); }
.ns-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.ns-date { font-size: .95rem; }
.ns-sub { font-size: 1.02rem; }

/* Handy: Karte steht hinter dem Radio-Band – Flyer groß über die ganze Breite */
@media (max-width: 600px) {
  .next-show { grid-template-columns: 1fr; padding: 26px 18px 18px; }
  .ns-poster { grid-column: 1; grid-row: 1; }
  .ns-flyer { width: 100%; max-height: 72vh; object-fit: contain; }
  .ns-info { grid-column: 1; grid-row: 2; }
  .ns-info .btn { margin-top: 14px; }
  .next-show .fallblatt { grid-row: 3; }
  .next-show .fb-zelle { width: 30px; height: 42px; font-size: 1.7rem; }
}

/* =========================================================
   Seite "Über uns"
   ========================================================= */
.uu-kopf { padding-bottom: clamp(24px, 4vw, 48px); }
.uu-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.uu-lede { margin: 0 0 14px; font: 400 clamp(1.4rem, 2.6vw, 2.05rem)/1.15 var(--f-cond); text-transform: uppercase; }
.uu-intro p:not(.uu-lede) { margin: 0; font-size: 1.08rem; }
@media (max-width: 760px) { .uu-intro { grid-template-columns: 1fr; } }

/* Zeitleiste */
.zeitleiste { position: relative; list-style: none; margin: 0; padding: 0; }
.zeitleiste::before {
  content: ""; position: absolute; left: 56px; top: 10px; bottom: 30px; width: 4px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 10px, transparent 10px 16px);
}
.zeitleiste li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: start; padding-bottom: 32px; }
.zl-jahr {
  position: relative; z-index: 1; justify-self: start;
  padding: 10px 12px 8px;
  background: var(--mustard); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 1.35rem/1 var(--f-display);
  transform: rotate(-3deg);
}
.zeitleiste li:nth-child(even) .zl-jahr { background: var(--paper); transform: rotate(2deg); }
.zl-text { padding: 18px 22px; background: #f7f0de; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--red); }
.zl-text h3 { margin: 0 0 6px; font: 400 1.6rem/1.05 var(--f-cond); text-transform: uppercase; }
.zl-text p { margin: 0; }
@media (max-width: 600px) {
  .zeitleiste::before { display: none; }
  .zeitleiste li { grid-template-columns: 1fr; gap: 12px; }
}

/* Fish & Backstage-Pass */
.uu-fish { max-width: none; }
.fish-raster {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(36px, 6vw, 90px); align-items: center;
}
.fish-text h2 { margin: 0 0 14px; font: 400 clamp(2.2rem, 5vw, 3.8rem)/.95 var(--f-display); text-transform: uppercase; text-shadow: 4px 4px 0 var(--ink); }
.fish-text .uu-lede { color: var(--mustard); }
.fish-text p:not(.uu-lede):not(.pw-kicker) { max-width: 38em; color: #ece3cf; }
.pass {
  position: relative; justify-self: center;
  width: min(100%, 300px); aspect-ratio: 5 / 7.4;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 22px 20px;
  background: var(--paper); color: var(--ink);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  transform-origin: 50% -80px;
  animation: pendeln 4.5s ease-in-out infinite;
}
.pass::before {   /* Umhängeband */
  content: ""; position: absolute; left: 50%; top: -150px; z-index: -1;
  width: 34px; height: 160px;
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, #6d1525 10px 20px);
  transform: translateX(-50%);
}
.pass-loch { position: absolute; top: 14px; left: 50%; width: 46px; height: 12px; border-radius: 6px; background: #4b453e; transform: translateX(-50%); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.pass-kopf { margin: 0 0 6px; font: 700 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.pass-name { margin: 8px 0 10px; font: 400 clamp(3.4rem, 8vw, 4.8rem)/.85 var(--f-display); text-transform: uppercase; color: var(--red); }
.pass-rolle { margin: 0; font: 400 1rem/1.25 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.pass-streifen {
  width: calc(100% + 44px); margin: auto -22px 12px;
  padding: 10px 0 8px;
  background: var(--ink); color: var(--mustard);
  font: 400 1.9rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
}
.pass-fuss { margin: 0; font: 700 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@keyframes pendeln { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(2.5deg); } }
@media (max-width: 760px) {
  .fish-raster { grid-template-columns: 1fr; }
  .pass { width: min(78%, 280px); margin-top: 70px; }
}

/* Zahlen (dunkel) */
.uu-zahlen { max-width: none; background: var(--ink); color: var(--paper); }
.uu-zahlen > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.uu-zahlen .section-no { -webkit-text-stroke-color: var(--mustard); }
.uu-facts { margin-top: 0 !important; }
.uu-ausstattung { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px !important; }
.uu-ausstattung p { margin: 0; color: #e2d8c3; }
.uu-ausstattung strong { font: 400 1.05rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mustard); }
.uu-ausstattung a { color: var(--paper); }
@media (max-width: 760px) { .uu-ausstattung { grid-template-columns: 1fr; } }

/* Bands */
.band-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 12px; }
.band-chips li {
  padding: 10px 14px 9px;
  background: #f7f0de; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font: 400 clamp(1.05rem, 1.8vw, 1.35rem)/1 var(--f-cond); letter-spacing: .05em; text-transform: uppercase;
  transform: rotate(var(--r, 0deg));
}
.band-chips li:nth-child(3n+1) { --r: -1.5deg; background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.band-chips li:nth-child(4n+2) { --r: 1.2deg; }
.band-chips li:nth-child(5n+3) { background: var(--mustard); color: var(--ink); }

/* Stimmen */
.stimmen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stimme {
  display: block; padding: 24px 26px;
  color: var(--ink); text-decoration: none;
  background: #f7f0de; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.stimme:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--red); }
.stimme-zitat { margin: 0 0 14px; font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.15 var(--f-cond); text-transform: uppercase; }
.stimme-quelle { margin: 0; font: 700 .8rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stimme-quelle::after { content: " ↗"; color: var(--red); }
@media (max-width: 700px) { .stimmen { grid-template-columns: 1fr; } }

/* Karten unten */
.uu-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uu-karte {
  position: relative; display: block; padding: 24px 26px 30px;
  color: var(--paper); text-decoration: none;
  background: var(--ink); box-shadow: 6px 6px 0 var(--red);
  transition: transform .15s;
}
.uu-karte:hover { transform: translate(-2px, -2px); }
.uu-karte .pw-kicker { margin-bottom: 8px; }
.uu-karte h3 { margin: 0; font: 400 1.6rem/1.05 var(--f-cond); text-transform: uppercase; }
.uu-karte span { position: absolute; right: 22px; bottom: 20px; font-size: 1.5rem; color: var(--mustard); }
@media (max-width: 760px) { .uu-karten { grid-template-columns: 1fr; } }

/* Startseite: Link zu "Über uns" */
.uu-mehr { margin: 22px 0 0; }
@media (prefers-reduced-motion: reduce) { .pass { animation: none; } }

/* =========================================================
   Feedback Oktober 2026
   ========================================================= */

/* Logo überall gleich: schwarz – dafür heller Kopf */
.site-header { background: var(--paper); color: var(--ink); }
.brand { color: var(--ink); }
.nav a:not(.nav-cta):hover, .nav-unter a:hover, .nav-unter a[aria-current="page"] { color: var(--red); }
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-toggle span { background: var(--ink); }
.nav-unter::before { background: var(--paper); border-color: var(--ink); }
@media (max-width: 820px) {
  .nav { background: var(--paper); }
  .nav a { border-top-color: rgba(28, 24, 20, .14); }
}

/* Überschriften ohne Nummerierung */
.section-head { display: block; }

/* Genres im Plakat alle gleich */
.hero-genres span, .hero-genres span:nth-child(3n+1) { background: var(--ink); color: var(--paper); }

/* Programm: Wochentag deutlich, Wochenenden in einer Farbe */
.ev-day {
  margin-bottom: 4px; padding: 4px 6px 3px;
  font: 400 .875rem/1 var(--f-cond); letter-spacing: .05em;
  color: var(--paper); background: var(--ink);
}
.ist-wochenende .ev-day { background: var(--red); }
.wochenende {
  margin: 0 0 18px; padding: 0 12px 1px;
  background: rgba(240, 172, 46, .28);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--mustard);
}
.wochenende .event { margin-bottom: 12px; }
.we-kopf { margin: 0; padding: 11px 0 10px; font: 400 1.05rem/1 var(--f-cond); letter-spacing: .07em; text-transform: uppercase; }
.we-kopf span { display: inline-block; margin-right: 8px; padding: 4px 8px 3px; background: var(--red); color: var(--paper); }
@media (max-width: 720px) {
  .ev-day { font-size: .75rem; padding: 4px 4px 3px; }
  .wochenende { padding: 0 8px 1px; box-shadow: 4px 4px 0 var(--mustard); }
}

/* Highlights (Original-Mitglieder, große Namen) */
.ev-hl {
  display: inline-block; margin-bottom: 6px; padding: 4px 7px 3px;
  font: 700 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); background: var(--red);
}
.ev-hl-text { margin: 4px 0 0; font-weight: 700; color: var(--red); }
.event.ist-highlight { border: 3px solid var(--red); }
.ns-hl {
  display: inline-block; margin: 0 0 14px; padding: 5px 8px 4px;
  font: 700 .78rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--red);
}
.em-hl { margin: 0 0 6px; font-weight: 700; color: var(--red); }
.em-hl .ev-hl { margin: 0 6px 0 0; }
.highlights { margin: 0 0 clamp(30px, 4vw, 44px); }
.hl-kopf { margin: 0 0 14px; font: 400 1.5rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.hl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.hl-karte {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  color: var(--paper); text-decoration: none;
  background: var(--ink); box-shadow: 6px 6px 0 var(--red);
  transition: transform .15s;
}
.hl-karte:hover { transform: translate(-2px, -2px); }
.hl-flyer { flex: none; width: 72px; height: 96px; object-fit: cover; border: 2px solid var(--paper); }
.hl-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hl-datum { font: 700 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mustard); }
.hl-titel { font: 400 1.35rem/1.05 var(--f-cond); text-transform: uppercase; }
.hl-text { font-size: .92rem; line-height: 1.35; color: #e2d8c3; }

/* Eventkalender in einer Farbe */
.cal-ev { background: var(--red); color: var(--paper); }

/* 7er Radio: moderierte Live-Sendungen */
.radio-sendung { margin: 3px 0 0; font: 400 .8rem/1.3 var(--f-mono); color: var(--mustard); }
.radio-now { margin-top: 3px; }
@media (min-width: 761px) { .radio-player { max-width: 60%; padding-top: 8px; padding-bottom: 8px; } .radio-now { max-width: 46ch; } }
.radio-sendung b { color: var(--paper); }
.rs-zeit, .rs-wer { display: block; }
.rs-wer { color: #cbbfa6; }
.radio-sendung .nw { white-space: nowrap; }
.radio-now:empty { display: none; }
.radio-band.ist-live .radio-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
  border-radius: 50%; background: var(--paper);
  animation: blink 1.2s infinite;
}

/* Der Club: große Namen ganz oben */
.club-legenden { margin: 0 auto clamp(40px, 5vw, 60px); }
.legenden-liste {
  list-style: none; margin: 4px 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; row-gap: 4px;
  font: 400 clamp(1.6rem, 3.4vw, 2.7rem)/1.1 var(--f-cond); text-transform: uppercase;
}
.legenden-liste li:nth-child(-n+3) { color: var(--mustard); }
.legenden-liste li:not(:last-child)::after { content: "✸"; margin: 0 .4em; font-size: .55em; vertical-align: .3em; color: var(--red-hell); }
.legenden-liste small { font: 700 .75rem/1 var(--f-mono); letter-spacing: .08em; vertical-align: .55em; color: var(--paper); }
.club-legenden .link-arrow { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .radio-band.ist-live .radio-live::before { animation: none; } }


/* Ausverkauft */
.tix-aus { background: var(--red); color: var(--paper); border: 0; cursor: default; }
.tix-aus:hover { background: var(--red); }
.btn.tix-aus { box-shadow: none; transform: rotate(-2deg); }
.ns-aus {
  display: inline-block; margin: 0; padding: 8px 12px 7px;
  font: 400 1.1rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper); background: var(--red);
  transform: rotate(-3deg);
}
.ns-aus { align-self: flex-start; margin-top: auto; }
.em-kasse { margin: 10px 0 0; font: 400 .85rem/1.4 var(--f-mono); color: var(--muted); }

/* Versteckte Elemente bleiben versteckt, auch wenn sie sonst display: grid/flex haben */
[hidden] { display: none !important; }

/* Suche im Programm */
.suche { margin: 0 0 clamp(26px, 3.5vw, 40px); }
.suche-feld {
  display: block; width: 100%; box-sizing: border-box;
  padding: 15px 18px 14px 52px;
  font: 400 1.05rem/1.2 var(--f-body); color: var(--ink);
  background: #f7f0de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231c1814' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15.5 15.5 6 6'/%3E%3C/svg%3E") no-repeat 17px 50%;
  border: 3px solid var(--ink); border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  -webkit-appearance: none; appearance: none;
}
.suche-feld::placeholder { color: var(--muted); }
.suche-feld:focus { outline: none; box-shadow: 5px 5px 0 var(--red); }
.suche-info { margin: 12px 0 0; font: 700 .85rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.suche-info:empty { display: none; }

/* Infos (unter dem Programm) */
.infos { max-width: none; background: var(--paper-2); border-top: 4px solid var(--ink); }
.infos > * { max-width: calc(var(--max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.infos .section-head { border-bottom-color: var(--ink); }
.infos .section-sub a { color: inherit; }
.infos-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.info-karte {
  padding: 22px 24px 24px;
  background: #f7f0de; border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--red);
}
.info-kicker { margin: 0 0 6px; font: 700 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.info-karte h3 { margin: 0 0 12px; font: 400 clamp(1.6rem, 2.4vw, 2rem)/1 var(--f-cond); text-transform: uppercase; }
.info-karte p { margin: 0 0 12px; }
.info-liste { margin: 0; padding: 0; list-style: none; }
.info-liste li { position: relative; margin: 0 0 8px; padding-left: 22px; }
.info-liste li::before { content: "✸"; position: absolute; left: 0; top: 0; color: var(--red); }
.info-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0 !important; }
.info-links .tix { min-width: 0; }
@media (max-width: 900px) { .infos-raster { grid-template-columns: 1fr; gap: 20px; } }

/* Partner (letzter Abschnitt der Startseite) */
.anfahrt { padding-bottom: clamp(64px, 9vw, 120px); }
.partner { padding-top: clamp(48px, 6vw, 80px); }
.partner-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.partner-karte {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--ink); color: var(--paper);
  box-shadow: 6px 6px 0 var(--mustard);
}
.partner-karte h3 { margin: 0 0 10px; font: 400 clamp(1.5rem, 2.2vw, 1.9rem)/1 var(--f-cond); text-transform: uppercase; color: var(--mustard); }
.partner-karte p { margin: 0 0 16px; font-size: .95rem; line-height: 1.45; color: #e2d8c3; }
.partner-karte .link-arrow { align-self: flex-start; margin-top: auto; color: var(--paper); }
.partner-karte .link-arrow:hover { color: var(--mustard); }
@media (max-width: 1100px) { .partner-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .partner-liste { grid-template-columns: 1fr; } }

/* #####################################################################
   RETRO-PLAKAT-DESIGN (Oktober 2026) – überschreibt die Regeln oben
   ##################################################################### */

/* =====================================================================
   7er Club – Plakat-Ebene „Rockplakat“ (Siebdruck, 70er/80er)
   ---------------------------------------------------------------------
   Idee: Die Seite ist ein siebgedrucktes Rock-Konzertplakat.
   Zwei Druckfarben (Schwarz + Weinrot) auf hellem Plakatpapier, Senf nur
   als seltene dritte Farbe. Schmale, harte Plakatgrotesk (Anton) für alle
   Überschriften, fette Grotesk-Ziffern (Archivo Black) für Daten und
   Zahlen, Archivo als Lesetext. Rasterpunkte, Druckabrieb und leicht
   verrutschter Zweitdruck statt Zierrat: keine Sterne, Strahlen oder
   Bänder. Rahmen sind gedruckte Linien, Stempel sind Gummistempel.

   Diese Ebene steht am Ende von css/style.css und überschreibt gezielt
   (gleiche Spezifität, spätere Regel gewinnt).
   Gliederung:
     1  Grundwerte & Texturen      10 Infos
     2  Papier, Schriften, Knöpfe  11 Der Club
     3  Kopf                       12 Videos & Fotos
     4  Hero (Plakatrahmen)        13 Anfahrt
     5  Karte „Nächste Show“       14 Partner
     6  Radio-Band                 15 Fuß
     7  Abschnittsköpfe            16 Detail-Dialog
     8  Programm                   17 Über uns
     9  Wochenenden                18 Kalender, Rechtliches, Bewegung
   ===================================================================== */


/* =====================================================================
   1  Grundwerte & Texturen
   ===================================================================== */
:root {
  /* Papier */
  --paper: #e7e0d2;          /* helles Plakatpapier, kaum vergilbt */
  --paper-2: #d8cebc;        /* dunklerer Bogen (Infos) */
  --paper-hell: #f2ede3;     /* frisch gestrichene Fläche (Zettel, Terminzeilen) */
  /* Druckfarben */
  --ink: #1d1a17;            /* Schwarz */
  --ink-2: #342e27;
  --red: #8b1a2f;            /* Weinrot (CI) */
  --red-hell: #e47a8b;       /* Weinrot aufgehellt – nur für Schrift auf Schwarz */
  --mustard: #e1a23a;        /* dritte Druckfarbe, sparsam */
  --muted: #5a4d3d;          /* graue Tinte für Nebentext (AA auf Papier) */
  --teal: var(--red);        /* alte Petrol-Akzente aus style.css laufen auf Weinrot */

  /* Schriften – drei Familien, alle Grotesk (Archivo Black steckt auch im Logo) */
  --f-head: "Anton", "Impact", sans-serif;                          /* Plakatgrotesk: Überschriften */
  --f-display: var(--f-head);
  --f-cond: "Anton", "Impact", sans-serif;                          /* Plakatgrotesk: Knöpfe, Labels */
  --f-zahl: "Archivo Black", "Arial Black", sans-serif;             /* fette Ziffern: Daten, Zahlen */
  --f-body: "Archivo", system-ui, sans-serif;                       /* Lesetext */
  /* style.css benutzt --f-mono noch für Kleingedrucktes (früher Courier Prime).
     Schreibmaschine entfällt – bei der Übernahme in style.css besser die
     Stellen auf --f-body umstellen und --f-mono löschen. */
  --f-mono: var(--f-body);

  /* Gedruckte Linien */
  --linie: 4px;                                                       /* dicke Linie */
  --innen: inset 0 0 0 5px var(--paper-hell), inset 0 0 0 6.5px var(--ink);   /* feine Innenlinie */
  --innen-rot: inset 0 0 0 5px var(--paper-hell), inset 0 0 0 6.5px var(--red);
  /* Weinroter Passerversatz – nur große Überschriften (h2, Fuß) */
  --versatz: .03em .026em 0 rgba(139, 26, 47, .8);

  /* Weinroter Rasterton (für Wochenend-Blöcke): 45°-Raster, ca. 35 % Deckung */
  --rasterton-rot:
    radial-gradient(circle, rgba(139, 26, 47, .62) 1.25px, transparent 1.75px) 0 0 / 6px 6px,
    radial-gradient(circle, rgba(139, 26, 47, .62) 1.25px, transparent 1.75px) 3px 3px / 6px 6px;

  /* Texturen als SVG-data-URIs (erzeugt von werkzeug/bauen.py) */
  /* Druckabrieb (Maske, nur große Überschriften): Ausbrüche in Nestern, nicht gleichmäßig verteilt */
  --abrieb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='4' stitchTiles='stitch' result='lo'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9' stitchTiles='stitch' result='hi'/%3E%3CfeComposite in='hi' in2='lo' operator='arithmetic' k2='.8' k3='1.25' k4='-.36'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -20 0 0 0 10.8'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  --abrieb-leicht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='4' stitchTiles='stitch' result='lo'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9' stitchTiles='stitch' result='hi'/%3E%3CfeComposite in='hi' in2='lo' operator='arithmetic' k2='.8' k3='1.25' k4='-.36'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -20 0 0 0 11.8'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");   /* für sehr große Schrift (Fuß) */
  /* Papier-Sprenkel auf vollen Farbflächen (Hintergrundbild, kein filter) */
  --sprenkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='31' stitchTiles='stitch' result='lo'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='21' stitchTiles='stitch' result='hi'/%3E%3CfeComposite in='hi' in2='lo' operator='arithmetic' k2='.8' k3='1.2' k4='-.34'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.86  0 0 0 0 0.71  20 0 0 0 -11.4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 {deckung}'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* Rasterpunkt-Verläufe (Siebdruck-Halbton), 10 px Rasterweite, 265 px hoch: als Maske benutzt */
  --raster-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='265'%3E%3Ccircle cx='2.5' cy='15' r='0.18'/%3E%3Ccircle cx='7.5' cy='20' r='0.18'/%3E%3Ccircle cx='2.5' cy='25' r='0.30'/%3E%3Ccircle cx='7.5' cy='30' r='0.30'/%3E%3Ccircle cx='2.5' cy='35' r='0.45'/%3E%3Ccircle cx='7.5' cy='40' r='0.45'/%3E%3Ccircle cx='2.5' cy='45' r='0.60'/%3E%3Ccircle cx='7.5' cy='50' r='0.60'/%3E%3Ccircle cx='2.5' cy='55' r='0.77'/%3E%3Ccircle cx='7.5' cy='60' r='0.77'/%3E%3Ccircle cx='2.5' cy='65' r='0.95'/%3E%3Ccircle cx='7.5' cy='70' r='0.95'/%3E%3Ccircle cx='2.5' cy='75' r='1.14'/%3E%3Ccircle cx='7.5' cy='80' r='1.14'/%3E%3Ccircle cx='2.5' cy='85' r='1.34'/%3E%3Ccircle cx='7.5' cy='90' r='1.34'/%3E%3Ccircle cx='2.5' cy='95' r='1.54'/%3E%3Ccircle cx='7.5' cy='100' r='1.54'/%3E%3Ccircle cx='2.5' cy='105' r='1.75'/%3E%3Ccircle cx='7.5' cy='110' r='1.75'/%3E%3Ccircle cx='2.5' cy='115' r='1.97'/%3E%3Ccircle cx='7.5' cy='120' r='1.97'/%3E%3Ccircle cx='2.5' cy='125' r='2.20'/%3E%3Ccircle cx='7.5' cy='130' r='2.20'/%3E%3Ccircle cx='2.5' cy='135' r='2.43'/%3E%3Ccircle cx='7.5' cy='140' r='2.43'/%3E%3Ccircle cx='2.5' cy='145' r='2.66'/%3E%3Ccircle cx='7.5' cy='150' r='2.66'/%3E%3Ccircle cx='2.5' cy='155' r='2.91'/%3E%3Ccircle cx='7.5' cy='160' r='2.91'/%3E%3Ccircle cx='2.5' cy='165' r='3.16'/%3E%3Ccircle cx='7.5' cy='170' r='3.16'/%3E%3Ccircle cx='2.5' cy='175' r='3.41'/%3E%3Ccircle cx='7.5' cy='180' r='3.41'/%3E%3Ccircle cx='2.5' cy='185' r='3.67'/%3E%3Ccircle cx='7.5' cy='190' r='3.67'/%3E%3Ccircle cx='2.5' cy='195' r='3.93'/%3E%3Ccircle cx='7.5' cy='200' r='3.93'/%3E%3Ccircle cx='2.5' cy='205' r='4.20'/%3E%3Ccircle cx='7.5' cy='210' r='4.20'/%3E%3Ccircle cx='2.5' cy='215' r='4.47'/%3E%3Ccircle cx='7.5' cy='220' r='4.47'/%3E%3Ccircle cx='2.5' cy='225' r='4.75'/%3E%3Ccircle cx='7.5' cy='230' r='4.75'/%3E%3Ccircle cx='2.5' cy='235' r='5.03'/%3E%3Ccircle cx='7.5' cy='240' r='5.03'/%3E%3Ccircle cx='2.5' cy='245' r='5.31'/%3E%3Ccircle cx='7.5' cy='250' r='5.31'/%3E%3Ccircle cx='2.5' cy='255' r='5.60'/%3E%3Ccircle cx='7.5' cy='260' r='5.60'/%3E%3C/svg%3E");
  --raster-oben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='265'%3E%3Ccircle cx='2.5' cy='250' r='0.18'/%3E%3Ccircle cx='7.5' cy='245' r='0.18'/%3E%3Ccircle cx='2.5' cy='240' r='0.30'/%3E%3Ccircle cx='7.5' cy='235' r='0.30'/%3E%3Ccircle cx='2.5' cy='230' r='0.45'/%3E%3Ccircle cx='7.5' cy='225' r='0.45'/%3E%3Ccircle cx='2.5' cy='220' r='0.60'/%3E%3Ccircle cx='7.5' cy='215' r='0.60'/%3E%3Ccircle cx='2.5' cy='210' r='0.77'/%3E%3Ccircle cx='7.5' cy='205' r='0.77'/%3E%3Ccircle cx='2.5' cy='200' r='0.95'/%3E%3Ccircle cx='7.5' cy='195' r='0.95'/%3E%3Ccircle cx='2.5' cy='190' r='1.14'/%3E%3Ccircle cx='7.5' cy='185' r='1.14'/%3E%3Ccircle cx='2.5' cy='180' r='1.34'/%3E%3Ccircle cx='7.5' cy='175' r='1.34'/%3E%3Ccircle cx='2.5' cy='170' r='1.54'/%3E%3Ccircle cx='7.5' cy='165' r='1.54'/%3E%3Ccircle cx='2.5' cy='160' r='1.75'/%3E%3Ccircle cx='7.5' cy='155' r='1.75'/%3E%3Ccircle cx='2.5' cy='150' r='1.97'/%3E%3Ccircle cx='7.5' cy='145' r='1.97'/%3E%3Ccircle cx='2.5' cy='140' r='2.20'/%3E%3Ccircle cx='7.5' cy='135' r='2.20'/%3E%3Ccircle cx='2.5' cy='130' r='2.43'/%3E%3Ccircle cx='7.5' cy='125' r='2.43'/%3E%3Ccircle cx='2.5' cy='120' r='2.66'/%3E%3Ccircle cx='7.5' cy='115' r='2.66'/%3E%3Ccircle cx='2.5' cy='110' r='2.91'/%3E%3Ccircle cx='7.5' cy='105' r='2.91'/%3E%3Ccircle cx='2.5' cy='100' r='3.16'/%3E%3Ccircle cx='7.5' cy='95' r='3.16'/%3E%3Ccircle cx='2.5' cy='90' r='3.41'/%3E%3Ccircle cx='7.5' cy='85' r='3.41'/%3E%3Ccircle cx='2.5' cy='80' r='3.67'/%3E%3Ccircle cx='7.5' cy='75' r='3.67'/%3E%3Ccircle cx='2.5' cy='70' r='3.93'/%3E%3Ccircle cx='7.5' cy='65' r='3.93'/%3E%3Ccircle cx='2.5' cy='60' r='4.20'/%3E%3Ccircle cx='7.5' cy='55' r='4.20'/%3E%3Ccircle cx='2.5' cy='50' r='4.47'/%3E%3Ccircle cx='7.5' cy='45' r='4.47'/%3E%3Ccircle cx='2.5' cy='40' r='4.75'/%3E%3Ccircle cx='7.5' cy='35' r='4.75'/%3E%3Ccircle cx='2.5' cy='30' r='5.03'/%3E%3Ccircle cx='7.5' cy='25' r='5.03'/%3E%3Ccircle cx='2.5' cy='20' r='5.31'/%3E%3Ccircle cx='7.5' cy='15' r='5.31'/%3E%3Ccircle cx='2.5' cy='10' r='5.60'/%3E%3Ccircle cx='7.5' cy='5' r='5.60'/%3E%3C/svg%3E");
  /* Passermarken */
  --passer-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' stroke='%231d1a17' stroke-width='1.6'%3E%3Ccircle cx='15' cy='15' r='8'/%3E%3Cpath d='M15 0v30M0 15h30'/%3E%3C/svg%3E");
  --passer-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' stroke='%23f3e7c9' stroke-width='1.6'%3E%3Ccircle cx='15' cy='15' r='8'/%3E%3Cpath d='M15 0v30M0 15h30'/%3E%3C/svg%3E");
}


/* =====================================================================
   2  Papier, Schriften, Knöpfe
   ===================================================================== */
html { hyphens: manual; }
body {
  font: 400 17px/1.6 var(--f-body);
  background:
    radial-gradient(ellipse 60% 40% at 8% 2%, rgba(60, 50, 40, .07), transparent 70%),
    radial-gradient(ellipse 50% 35% at 96% 30%, rgba(60, 50, 40, .05), transparent 70%),
    var(--paper);
}
body::after { opacity: .3; }                 /* Papierfasern aus style.css etwas kräftiger */
body::before {                                /* leicht abgedunkelte Bogenränder */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(ellipse 120% 100% at 50% 45%, transparent 64%, rgba(40, 32, 24, .14) 100%);
}

/* Druckabrieb: nur die großen Überschriften, Ausbrüche in Nestern */
.section-head h2, .footer-big {
  -webkit-mask-image: var(--abrieb);
          mask-image: var(--abrieb);
  -webkit-mask-size: 420px 420px;
          mask-size: 420px 420px;
}

/* kleine Überschriften (Handy): leichterer Abrieb, damit keine Buchstaben „verschwinden“ */
@media (max-width: 600px) {
  .section-head h2 { -webkit-mask-image: var(--abrieb-leicht); mask-image: var(--abrieb-leicht); -webkit-mask-size: 260px 260px; mask-size: 260px 260px; }
}

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.skip { background: var(--red); color: var(--paper-hell); }

/* Knöpfe: volle Druckfarbe, gedruckte Linie statt Kasten-Schatten */
.btn {
  font: 400 1.05rem/1 var(--f-cond);
  letter-spacing: .08em;
  padding: 15px 26px 14px;
  border: 3px solid var(--ink);
  box-shadow: none;
  transition: background-color .15s, color .15s, transform .12s;
}
.btn:hover { transform: translateY(-2px); box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-red, .btn-mustard { background: var(--red); color: var(--paper-hell); border-color: var(--red); }
.btn-red:hover, .btn-mustard:hover { background: var(--ink); border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper-hell); box-shadow: none; }
.btn-ink:hover { background: var(--red); border-color: var(--red); }
.btn-ghost { border: 5px double var(--ink); padding: 13px 24px 12px; background: transparent; }   /* gesetzter Doppelrahmen */
.btn-ghost:hover { background: var(--ink); color: var(--paper-hell); }

.link-arrow { font-family: var(--f-cond); border-bottom: 3px solid var(--red); }
.link-arrow::after { content: " →"; }


/* =====================================================================
   3  Kopf: heller Bogenrand mit Doppellinie Schwarz/Weinrot
   ===================================================================== */
.site-header {
  background: var(--paper);
  border-bottom: var(--linie) solid var(--ink);
  box-shadow: 0 3px 0 var(--paper), 0 5px 0 var(--red);
  padding-top: 10px; padding-bottom: 10px;
}
.nav a { font-family: var(--f-cond); letter-spacing: .09em; }
.nav-haupt::after { content: " ▾"; font-size: .75em; color: var(--red); }
.nav-cta { background: var(--red); color: var(--paper-hell) !important; padding: 10px 16px 9px; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px var(--paper-hell); }
.nav-cta:hover { background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--paper-hell); }
.nav-unter::before { background: var(--paper-hell); border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper-hell), inset 0 0 0 4px var(--ink); }
@media (max-width: 820px) {
  .nav { background: var(--paper); border-bottom: var(--linie) solid var(--ink); }
  .nav-haupt::after { content: ""; }
  .nav-unter a::before { content: "↳ "; color: var(--red); }
}


/* =====================================================================
   4  Hero = Plakat im schweren Rahmen, alles zentriert gestapelt
   ===================================================================== */
/* Plakatrahmen: eine schwere schwarze Linie */
.hero::after {
  content: "";
  position: absolute; z-index: -1;
  inset: clamp(8px, 1.4vh, 14px) calc(var(--gutter) / 2) clamp(10px, 1.8vh, 18px);
  border: 6px solid var(--ink);
  pointer-events: none;
}
/* Rasterpunkte (Siebdruck-Halbton) hinter dem Logo, nach außen auslaufend */
.hero::before {
  left: -6%; right: auto; top: -18%;
  width: 62%; height: 130%;
  background: radial-gradient(circle, rgba(139, 26, 47, .34) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 0 18%, transparent 60%);
          mask-image: radial-gradient(circle at 50% 48%, #000 0 18%, transparent 60%);
  opacity: 1;
}
/* Bühnenlicht nur als heller Schimmer innerhalb des Bogens */
.buehnenlicht {
  inset: 14px calc(var(--gutter) / 2 + 6px);
  background: radial-gradient(circle 380px at var(--lx, 70%) var(--ly, 35%), rgba(255, 246, 220, .5), rgba(255, 246, 220, 0) 70%);
}

/* Plakatspalte: Container für die Logo-/Stempel-Rechnung */
.hero-poster {
  min-width: 0;
  container-type: inline-size;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  /* Logobreite: so groß wie möglich, aber rechts vom „r“ bleibt Platz für den Stempel
     (Rechnung: Stempel 96 px, ragt 24 px in die Spaltenlücke) */
  --logo-w: min(640px, 62vh, calc(122cqw - 190px));
}
/* Kopfzeile in Plakatgrotesk zwischen Doppellinien */
.kicker {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  height: 22px;
  margin: 0 0 8px;
  font: 400 .84rem/1 var(--f-cond);
  letter-spacing: .2em;
  color: var(--ink);
  white-space: nowrap;
}
.kicker::before, .kicker::after {
  content: ""; flex: 1 1 24px; min-width: 16px; height: 7px;
  border-top: 3px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.hero-logo { width: 100%; margin: 0 auto; }
.hero-logo svg { margin: 0 auto; }
@media (min-width: 601px) {
  .hero-logo svg { width: min(100%, var(--logo-w)); }
}
@media (max-width: 600px) {
  .kicker { display: block; height: auto; padding: 6px 0 5px; border-top: 3px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-size: .8rem; letter-spacing: .1em; white-space: normal; line-height: 1.35; text-wrap: balance; }
  .kicker::before, .kicker::after { content: none; }
}
/* Genres: alle gleich, schwarze Druckklötze */
.hero-genres { justify-content: center; gap: 8px; margin: 16px 0 12px; }
.hero-genres span, .hero-genres span:nth-child(3n+1) {
  position: relative;
  font: 400 1.05rem/1 var(--f-cond);
  letter-spacing: .12em;
  padding: 8px 11px 7px;
  margin: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper-hell);
}
.hero-lede {
  font: 500 clamp(1.06rem, 1.45vw, 1.22rem)/1.5 var(--f-body);
  max-width: 31em;
  margin: 0 auto 20px;
}
.hero-actions { justify-content: center; }
@media (max-width: 600px) {
  .hero { padding-left: calc(var(--gutter) + 8px); padding-right: calc(var(--gutter) + 8px); }
  .hero::after { inset: 8px calc(var(--gutter) / 2) 10px; }
  .hero::before { left: -20%; width: 140%; top: -12%; height: 80%; }
  .hero-genres { gap: 6px; }
  .hero-genres span, .hero-genres span:nth-child(3n+1) { padding: 6px 7px 5px; font-size: .9rem; letter-spacing: .08em; }   /* alle sechs in einer Zeile */
  .hero-actions .btn { padding: 13px 12px 12px; font-size: .95rem; }
  .hero-actions .btn-ghost { padding: 11px 10px 10px; }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .hero-genres span, .hero-genres span:nth-child(3n+1) { padding: 7px 9px 6px; font-size: .98rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero::before { left: 0; width: 100%; top: -20%; height: 110%; }
}
@media (max-width: 380px) { .hero-actions { flex-wrap: wrap; } }

/* Stempel → weinroter Gummistempel („Laut seit 2001!“ / „Heute live!“).
   Sitzt rechts neben dem „r“ unter der Punktreihe – nie auf dem Logo. */
.stamp, .hero-poster .stamp {
  width: auto; height: auto;
  padding: 9px 12px 8px;
  border: 3px solid var(--red);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--red);
  background: transparent;
  color: var(--red);
  font: 400 1.12rem/1.02 var(--f-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  clip-path: none;
  transform: rotate(-9deg);
  opacity: .92;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--abrieb-leicht); -webkit-mask-size: 200px 200px;
          mask-image: var(--abrieb-leicht);         mask-size: 200px 200px;
  z-index: 2;
}
.hero-poster .stamp {
  /* Logo-Oberkante = Kopfzeile (22 px + 8 px Abstand); Punktreihe endet bei ≈ 4,5 % der Logobreite */
  top: calc(30px + .065 * var(--logo-w));
  bottom: auto;
  right: -24px;
}
@media (min-width: 601px) and (max-width: 900px) {   /* einspaltig: Logo etwas kleiner, Stempel bleibt im Rahmen */
  .hero-poster { --logo-w: min(560px, 62vh, calc(100cqw - 150px)); }
  .hero-poster .stamp { right: 0; }
}
@media (max-width: 600px) { .hero-poster .stamp { display: none; } }   /* wie bisher */


/* =====================================================================
   5  Karte „Nächste Show“: Handzettel mit Rahmenlinien
   ===================================================================== */
.next-show {
  background: var(--paper-hell);
  color: var(--ink);
  border: var(--linie) solid var(--ink);
  box-shadow: var(--innen);
  transform: none;
  padding: 30px 22px 20px;
}
.next-show.unter-radio { transform: none; }
/* Schild oben mittig: schwarzer Druckklotz, leicht schief aufgesetzt */
.ns-label {
  top: -19px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper-hell);
  font: 400 1.15rem/1 var(--f-head);
  letter-spacing: .12em;
  padding: 9px 18px 8px;
  clip-path: none;
}
.ns-flyer { border: 2px solid var(--ink); }
.ns-date {
  font: 700 .95rem/1.25 var(--f-body);
  letter-spacing: .06em;
  color: var(--red);
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 3px solid var(--red);
}
.ns-title { font-family: var(--f-head); font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.02; letter-spacing: .015em; text-transform: uppercase; color: var(--ink); }
.ns-title a:hover { color: var(--red); }
.ns-sub { color: var(--ink-2); font-style: italic; }
.next-show .btn { border-color: var(--red); box-shadow: none; }
.next-show .btn:hover { border-color: var(--ink); }
.ns-hl { background: var(--ink); color: var(--paper-hell); font-family: var(--f-body); font-weight: 700; }

/* Countdown: rechts unter den Infos statt abgesetzt unter dem Flyer */
@media (min-width: 601px) {
  .next-show { grid-template-rows: 1fr auto; }
  .ns-poster { grid-row: 1 / span 2; }
  .next-show .fallblatt { grid-column: 2; grid-row: 2; align-self: end; }
}
.next-show .fallblatt { border-top: 3px solid var(--ink); box-shadow: inset 0 4px 0 var(--paper-hell), inset 0 5.5px 0 var(--ink); padding-top: 16px; }
/* schwarze Druckklötze statt Fallblatt-Plastik */
.fb-zelle {
  font-family: var(--f-zahl);
  background: var(--ink);
  border-radius: 0;
  box-shadow: none;
  color: var(--paper-hell);
}
.fb-zelle::after { background: rgba(236, 219, 181, .2); }
.fb-gruppe small { font: 700 .72rem/1 var(--f-body); letter-spacing: .12em; color: var(--ink-2); }
.fb-info { font: 700 .86rem/1.3 var(--f-body); letter-spacing: .08em; color: var(--red); }


/* =====================================================================
   6  Radio-Band: gerade gedruckte Banderole mit Doppellinien
   ===================================================================== */
.radio-band {
  transform: none;
  margin: 0;
  background: var(--sprenkel), var(--red);
  border-block: var(--linie) solid var(--ink);
  box-shadow: 0 -7px 0 -5.5px var(--ink), 0 7px 0 -5.5px var(--ink);   /* feine zweite Linie oben und unten */
}
@media (max-width: 760px) { .radio-band { transform: none; } }
.radio-player { background: var(--ink); padding-left: var(--gutter); }
@media (max-width: 760px) { .radio-player { padding-left: var(--gutter); } }
.radio-play { background: var(--red); border: 3px solid var(--paper-hell); }
.rp-icon { border-left-color: var(--paper-hell); }
.radio-band.is-playing .rp-icon { background: linear-gradient(90deg, var(--paper-hell) 0 35%, transparent 35% 65%, var(--paper-hell) 65%); }
.radio-band.is-loading .rp-icon { border-color: var(--paper-hell); border-right-color: transparent; }
.radio-name { font-family: var(--f-cond); }
.radio-live { background: var(--red); font-family: var(--f-cond); }
.radio-sendung { font-family: var(--f-body); font-weight: 600; font-size: .84rem; color: var(--mustard); }
.radio-now { font-family: var(--f-body); }
.radio-link { font-family: var(--f-cond); color: var(--paper-hell); border-bottom-color: var(--red-hell); }
.ticker span { font-family: var(--f-cond); letter-spacing: .1em; color: var(--paper-hell); }


/* =====================================================================
   7  Abschnittsköpfe: große Plakatgrotesk, darunter schwerer Balken
   ===================================================================== */
.section-head {
  display: block;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(30px, 4vw, 50px);
}
.section-head h2 {
  font: 400 clamp(2.7rem, 11.5vw, 8rem)/.98 var(--f-head);
  letter-spacing: .012em;
  padding: .04em .03em .03em 0;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow: var(--versatz);
}
.section-sub {
  margin: 10px auto 0;
  max-width: 36em;
  font: italic 400 1.1rem/1.5 var(--f-body);
  color: var(--muted);
}
/* Schwerer schwarzer Balken mit feiner weinroter Zweitdruck-Linie */
.section-head::after {
  content: "";
  display: block;
  margin-top: 18px;
  height: 12px;
  --orn: var(--ink);
  --orn-2: var(--red);
  background:
    linear-gradient(var(--orn), var(--orn)) left top / 100% 7px no-repeat,
    linear-gradient(var(--orn-2), var(--orn-2)) left 0 top 10px / 100% 2px no-repeat;
}
.sub-head {
  font: 400 clamp(1.8rem, 3.8vw, 2.9rem)/1.02 var(--f-head);
  text-align: center;
  text-transform: uppercase;
}


/* =====================================================================
   8  Programm
   ===================================================================== */
/* Suche: helles Feld mit Doppelrahmen */
.suche-feld {
  font: 500 1.08rem/1.2 var(--f-body);
  background-color: var(--paper-hell);
  border: 3px solid var(--ink);
  box-shadow: var(--innen);
  padding: 17px 20px 16px 54px;
  background-position: 19px 50%;
}
.suche-feld:focus { box-shadow: var(--innen-rot); border-color: var(--red); outline: none; }
.suche-feld::placeholder { color: var(--muted); font-style: italic; }
.suche-info { font: 600 1rem/1.3 var(--f-body); color: var(--red); text-align: center; }
@media (max-width: 400px) { .suche-feld { font-size: .98rem; padding-left: 46px; padding-right: 12px; background-position: 15px 50%; } }
@media (max-width: 340px) { .suche-feld { font-size: .9rem; } }

/* Monatssprünge: zentrierte, klebende Leiste mit kleinen Schildern */
.month-jump {
  justify-content: center;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--paper), 0 4.5px 0 var(--ink);
}
.mj-label { font: 400 .86rem/1 var(--f-cond); letter-spacing: .16em; color: var(--red); }
.month-jump a { border: 2px solid var(--ink); font-family: var(--f-cond); background: var(--paper-hell); }
.month-jump a:hover { background: var(--ink); color: var(--paper-hell); }
.mj-all { font: italic 600 .92rem/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--red); }
@media (min-width: 721px) {
  .month-jump { padding-right: 140px; }
  .mj-all { position: absolute; right: 0; }
}
@media (max-width: 720px) { .mj-label { text-align: center; } }

/* Monatskopf: zentriert, große weinrote Plakatgrotesk, Jahr kursiv, Anzahl dazwischen */
.month-head, .month-group .month-head { color: var(--red); font-family: var(--f-head); }
.month-toggle {
  position: relative;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 0 52px 12px;
  border-bottom: var(--linie) solid var(--ink);
  box-shadow: 0 3px 0 var(--paper), 0 4.5px 0 var(--ink);
  margin-bottom: 8px;
}
/* style.css färbt mit „.month-head span“ alle Spans grau und klein – hier gezielt zurücksetzen */
.month-head .mt-name { font: 400 clamp(2.1rem, 4.6vw, 3.4rem)/1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--red); vertical-align: baseline; }
.month-head .mt-name span { font: italic 600 .5em/1 var(--f-body); color: var(--ink); vertical-align: baseline; letter-spacing: 0; }
.month-head .mt-count { display: inline; font: italic 600 1rem/1 var(--f-body); letter-spacing: .02em; text-transform: none; color: var(--ink-2); vertical-align: baseline; }
.month-head .mt-count::before { content: "– "; }
.month-head .mt-count::after { content: " –"; }
.month-head .mt-chev {
  position: absolute; right: 0; top: 50%;
  transform: translateY(calc(-50% - 6px));
  width: 38px; height: 38px;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--ink);
  background: transparent;
  color: var(--ink);
  font: 400 1.4rem/1 var(--f-body);
}
.month-toggle:hover .mt-chev { background: var(--ink); color: var(--paper-hell); box-shadow: none; }
@media (max-width: 720px) {
  .month-toggle { padding: 0 44px 10px; }
  .month-head .mt-count { font-size: .92rem; }
}

/* Terminzeile: Zettel mit Außenlinie + feiner Innenlinie, keine Ticket-Kerbe */
.event {
  background: var(--paper-hell);
  border: 3px solid var(--ink);
  box-shadow: var(--innen);
  -webkit-mask: none; mask: none;
  padding: 16px 24px 16px 0;
  transition: background-color .15s;
}
.event:hover { transform: none; box-shadow: var(--innen); background: #f8efd8; }
.event:hover .ev-title { color: var(--red); }
.ev-date { border-right: 3px solid var(--ink); margin: -16px 0; padding: 16px 0; }
.ev-day, .ist-wochenende .ev-day {
  font: 400 .88rem/1 var(--f-cond);
  letter-spacing: .08em;
  padding: 4px 7px 3px;
  background: var(--ink);
  color: var(--paper-hell);
}
.ist-wochenende .ev-day { background: var(--red); }
.ev-num { font: 400 2.5rem/1 var(--f-zahl); color: var(--ink); margin: 4px 0 2px; }
.ist-wochenende .ev-num { color: var(--red); }
.ev-mon { font-family: var(--f-cond); letter-spacing: .14em; }
.ev-flyer { border: 2px solid var(--ink); filter: none; }      /* Flyer bleiben farbig: man erkennt die Show daran */
.ev-title { font: 400 clamp(1.35rem, 2.3vw, 1.9rem)/1.05 var(--f-cond); letter-spacing: .02em; transition: color .15s; }
.ev-sub { font: italic 600 1.05rem/1.3 var(--f-body); margin-top: 3px; }
.ev-time { font: 600 .84rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-more { font-weight: 700; letter-spacing: .1em; color: var(--red); }
.ev-more::after { content: " →"; }
/* Ticket-Knöpfe: volle schwarze Fläche, klar lesbar */
.tix { font-family: var(--f-cond); background: var(--ink); color: var(--paper-hell); letter-spacing: .1em; }
.tix:hover { background: var(--red); }
.tix-door { background: transparent; color: var(--ink); border: 3px double var(--ink); }
/* „Ausverkauft“: schräger weinroter Gummistempel mit Doppelring */
.tix-aus, .tix-aus:hover, .ns-aus, .btn.tix-aus {
  background: transparent;
  color: var(--red);
  border: 3px solid var(--red);
  box-shadow: inset 0 0 0 2px var(--paper-hell), inset 0 0 0 3.5px var(--red);
  font: 400 1.05rem/1 var(--f-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 12px 9px;
  transform: rotate(-6deg);
  cursor: default;
}
.ns-aus { display: inline-block; margin-top: 14px; align-self: flex-start; }
.ev-hl, .em-hl .ev-hl { background: var(--red); color: var(--paper-hell); font-family: var(--f-body); font-weight: 700; }
.ev-hl-text { color: var(--red); font-family: var(--f-body); font-style: italic; font-weight: 600; }
.event.ist-highlight { border-color: var(--red); box-shadow: var(--innen-rot); }
@media (max-width: 720px) {
  .event { padding-right: 16px; }
  .ev-day, .ist-wochenende .ev-day { font-size: .8rem; padding: 4px 5px 3px; }
  .ev-num { font-size: 2.1rem; }
}

/* Highlights-Kasten (falls vorhanden) */
.hl-kopf { font-family: var(--f-head); color: var(--red); text-align: center; }
.hl-karte { background: var(--ink); box-shadow: none; border: 3px solid var(--ink); }
.hl-datum { font-family: var(--f-body); color: var(--mustard); }


/* =====================================================================
   9  Wochenenden: weinroter Kopfbalken + weinroter Rasterton
      (farbiger Block, aber auf langen Listen nicht erschlagend rot)
   ===================================================================== */
.wochenende {
  background: var(--rasterton-rot), var(--paper);
  border: 3px solid var(--red);
  box-shadow: none;
  padding: 0 14px 2px;
  margin-bottom: 22px;
}
.wochenende .event { border-color: var(--ink); }
.we-kopf {
  margin: 0 -14px 14px;
  padding: 12px 14px 11px;
  background: var(--sprenkel), var(--red);
  font: 400 1.1rem/1 var(--f-cond);
  letter-spacing: .09em;
  color: var(--paper-hell);
}
.we-kopf span {
  margin-right: 10px;
  padding: 6px 10px 5px;
  background: var(--ink);
  color: var(--paper-hell);
  font: 400 1rem/1 var(--f-head);
  letter-spacing: .12em;
  clip-path: none;
}
@media (max-width: 720px) {
  .wochenende { padding: 0 8px 1px; box-shadow: none; }
  .we-kopf { margin: 0 -8px 10px; padding: 10px 8px 9px; font-size: 1rem; line-height: 1.6; }
  .we-kopf span { font-size: .9rem; padding: 5px 8px 4px; }
}


/* =====================================================================
   10  Infos: drei Plakatspalten auf Kraftpapier, durch Linien getrennt
   ===================================================================== */
.infos {
  background: var(--paper-2);
  border-top: var(--linie) solid var(--ink);
  box-shadow: inset 0 3px 0 var(--paper-2), inset 0 4.5px 0 var(--ink);
}
.infos-raster {
  gap: 0;
  border-top: var(--linie) solid var(--ink);
  border-bottom: var(--linie) solid var(--ink);
  box-shadow: 0 -7px 0 -5.5px var(--ink), 0 7px 0 -5.5px var(--ink);
}
.info-karte {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
  padding: 26px 26px 28px;
}
.info-karte + .info-karte { border-left: 2px solid var(--ink); }
.info-kicker { font: 400 .86rem/1.2 var(--f-cond); letter-spacing: .18em; color: var(--red); margin-bottom: 8px; }
.info-karte h3 { font: 400 clamp(1.8rem, 2.7vw, 2.4rem)/1.02 var(--f-head); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 14px; }
.info-liste li { padding-left: 0; }
.info-liste li::before { content: "■"; position: static; margin-right: 7px; font-size: .7em; vertical-align: .12em; color: var(--red); }
.info-links { justify-content: center; }
@media (max-width: 900px) {
  .info-karte + .info-karte { border-left: 0; border-top: 2px solid var(--ink); }
}


/* =====================================================================
   11  Der Club: schwarz gedruckte Fläche, Bands als Plakat-Billing
   ===================================================================== */
.club {
  position: relative;
  isolation: isolate;
  background: var(--ink);
}
/* weinroter Rasterkeil in der oberen rechten Ecke (Siebdruck-Halbton) */
.club::before {
  content: "";
  position: absolute; top: 0; right: 0; z-index: -1;
  width: min(46%, 560px); height: 265px;
  background: var(--red);
  -webkit-mask: var(--raster-oben) right top / 10px 265px repeat-x, linear-gradient(to left, #000 30%, transparent);
          mask: var(--raster-oben) right top / 10px 265px repeat-x, linear-gradient(to left, #000 30%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  opacity: .8;
  pointer-events: none;
}
.club .section-head::after, .uu-zahlen .section-head::after, .uu-fish .section-head::after { --orn: var(--paper); --orn-2: var(--red-hell); }
.club .section-head h2 { color: var(--paper-hell); }
.club .section-sub { color: #d9cbb0; }
.club-legenden { text-align: center; }
.pw-kicker { font: 400 .86rem/1.3 var(--f-cond); letter-spacing: .18em; color: var(--mustard); }
/* Billing: Headliner groß (Senf), danach kleiner – getrennt durch weinrote Schrägstriche */
.legenden-liste {
  justify-content: center; align-items: baseline;
  column-gap: 0; row-gap: 2px;
  font: 400 clamp(1.5rem, 3.2vw, 2.6rem)/1.15 var(--f-cond);
  letter-spacing: .02em;
  color: var(--paper-hell);
}
.legenden-liste li:nth-child(-n+3) { font: 400 clamp(2.1rem, 5.2vw, 4.4rem)/1.04 var(--f-head); letter-spacing: .015em; color: var(--mustard); }
.legenden-liste li:not(:last-child)::after { content: "/"; margin: 0 .32em; font-size: .8em; vertical-align: .04em; color: var(--red-hell); }
.legenden-liste small { white-space: nowrap; font: 600 .8rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.club-lede { font: 400 clamp(1.45rem, 2.6vw, 2.1rem)/1.15 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--mustard); }
.club-text p:not(.club-lede) { font-size: 1.08rem; }
.club-rent { border: 3px solid var(--paper); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 5.5px var(--paper); padding: 26px 28px; }
.club-rent h3 { font-family: var(--f-head); font-size: 1.8rem; letter-spacing: .03em; text-transform: uppercase; }
/* Bühnenfoto: Schwarz-Weiß-Rasterdruck im Passepartout, ohne Klebestreifen, ohne CSS-filter */
.club-photo figure {
  position: relative;
  transform: none;
  background: var(--paper-hell);
  padding: 12px 12px 0;
  box-shadow: none;
  border: 3px solid var(--paper-hell);
  isolation: isolate;
}
.club-photo figure.taped::before {          /* Graustufen per Mischmodus statt filter */
  content: "";
  position: absolute; left: 12px; right: 12px; top: 12px;
  width: auto; height: auto;
  aspect-ratio: 4 / 3;
  transform: none;
  box-shadow: none;
  background: #808080;
  mix-blend-mode: saturation;
  pointer-events: none;
  z-index: 1;
}
.club-photo figure.taped::after {           /* Rasterpunkte und Papierton */
  content: "";
  position: absolute; left: 12px; right: 12px; top: 12px;
  width: auto; height: auto;
  aspect-ratio: 4 / 3;
  transform: none;
  box-shadow: none;
  background: radial-gradient(circle, rgba(29, 26, 23, .32) 1px, transparent 1.6px) 0 0 / 4px 4px, rgba(231, 224, 210, .22);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
.club-photo img { filter: none; border: 2px solid var(--ink); }
.club-photo figcaption { font: 700 .88rem/1 var(--f-body); letter-spacing: .14em; text-align: center; }
/* Zahlen: Plakatleiste zwischen Doppellinien, fette Ziffern */
.facts { border-top: var(--linie) solid var(--paper); border-bottom: var(--linie) solid var(--paper); box-shadow: 0 -7px 0 -5.5px var(--paper), 0 7px 0 -5.5px var(--paper); }
.facts li { border-right: 2px solid rgba(236, 219, 181, .35); }
.facts strong { font-family: var(--f-zahl); color: var(--red-hell); padding: .04em 0; }
.facts small { font: 400 .84rem/1.2 var(--f-cond); letter-spacing: .14em; color: #e9dcc0; }
.facts span { font-family: var(--f-cond); }
.tech-note { font: 500 .98rem/1.5 var(--f-body); text-align: center; color: #d9cbb0; }
@media (max-width: 860px) {
  .facts li:nth-child(-n+2) { border-bottom: 2px solid rgba(236, 219, 181, .35); }
}


/* =====================================================================
   12  Videos & Fotos: getönte Rasterdrucke im Doppelrahmen
       (ohne CSS-filter: Mischmodus-Ebenen, beim Darüberfahren farbig)
   ===================================================================== */
.video-btn, .video iframe {
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--ink);
}
.video-btn { isolation: isolate; overflow: hidden; }
.video-btn img, .video-btn:hover img { filter: none; }
.video-btn::before, .photo::before {        /* halb entsättigt, damit man Bands noch erkennt */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: #808080;
  mix-blend-mode: saturation;
  opacity: .55;
  pointer-events: none;
  transition: opacity .2s;
}
.video-btn::after, .photo::after {          /* Rasterpunkte + warmer Papierton */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle, rgba(29, 26, 23, .26) 1px, transparent 1.6px) 0 0 / 4px 4px, rgba(210, 200, 182, .24);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .2s;
}
.photo::before { opacity: .75; }
.video-btn:hover::before, .video-btn:hover::after, .photo:hover::before, .photo:hover::after,
.video-btn:focus-visible::before, .video-btn:focus-visible::after { opacity: 0; }
.play { z-index: 2; background: var(--red); border: 3px solid var(--paper-hell); }
.video figcaption { text-align: center; margin-top: 16px; }
.video figcaption strong { font-family: var(--f-cond); letter-spacing: .03em; }
.video figcaption span { font: italic 600 .92rem/1 var(--f-body); color: var(--muted); }
.photo { position: relative; isolation: isolate; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.photo img, .photo:hover img { filter: none; }
.more-links { justify-content: center; }
.lightbox button { background: var(--red); color: var(--paper-hell); border: 3px solid var(--paper-hell); }
.lightbox img { border-color: var(--paper-hell); }


/* =====================================================================
   13  Anfahrt & Kontakt: Handzettel mit Doppelrahmen
   ===================================================================== */
.ticket-card {
  background: var(--paper-hell);
  border: 3px solid var(--ink);
  box-shadow: var(--innen);
  padding: 26px 26px;
}
.tc-label { font: 400 .86rem/1.2 var(--f-cond) !important; letter-spacing: .18em; color: var(--red); border-top: 2px solid var(--red); padding-top: 8px !important; display: inline-block; }
.tc-address { font: 400 1.7rem/1.1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; }
.big-mail { font-family: var(--f-cond); letter-spacing: .03em; overflow-wrap: anywhere; }
.socials a { font-family: var(--f-cond); background: var(--paper); }
.socials a:hover { background: var(--ink); color: var(--paper-hell); }
.map {
  border: 3px solid var(--ink);
  box-shadow: var(--innen);
  background: repeating-linear-gradient(-45deg, rgba(29, 26, 23, .07) 0 2px, transparent 2px 9px), var(--paper-2);
}
.map-consent p { font-style: italic; }


/* =====================================================================
   14  Partner: vier Plakatspalten zwischen kräftigen Linien (keine Kästen)
   ===================================================================== */
.partner-liste {
  gap: 0;
  border-top: var(--linie) solid var(--ink);
  border-bottom: var(--linie) solid var(--ink);
  box-shadow: 0 -7px 0 -5.5px var(--ink), 0 7px 0 -5.5px var(--ink);
}
.partner-karte {
  background: transparent;
  color: var(--ink);
  border: 0;
  box-shadow: none;
  text-align: center;
  align-items: center;
  padding: 26px 22px 26px;
}
.partner-karte h3 { font: 400 clamp(1.6rem, 2.3vw, 2.1rem)/1.05 var(--f-cond); letter-spacing: .03em; color: var(--red); }
.partner-karte h3::after { content: ""; display: block; width: 44px; height: 5px; margin: 12px auto 0; background: var(--ink); }
.partner-karte p { color: var(--ink-2); font-size: 1rem; }
.partner-karte .link-arrow { align-self: center; color: var(--ink); }
.partner-karte .link-arrow:hover { color: var(--red); }
@media (min-width: 1101px) { .partner-karte + .partner-karte { border-left: 2px solid var(--ink); } }
@media (min-width: 601px) and (max-width: 1100px) {
  .partner-karte:nth-child(even) { border-left: 2px solid var(--ink); }
  .partner-karte:nth-child(n+3) { border-top: 2px solid var(--ink); }
}
@media (max-width: 600px) { .partner-karte + .partner-karte { border-top: 2px solid var(--ink); } }


/* =====================================================================
   15  Fuß: weinroter Bogen mit schwarzem Rasterverlauf und Passermarken,
       „Laut bleiben.“ in Plakatgrotesk über die volle Breite
   ===================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--sprenkel), var(--red);
  border-top: var(--linie) solid var(--ink);
  box-shadow: inset 0 3px 0 var(--red), inset 0 4.5px 0 var(--ink);
  text-align: center;
}
.site-footer::before {          /* Rasterverlauf von unten (Siebdruck-Halbton) */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: min(265px, 100%);
  background: var(--ink);
  -webkit-mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
          mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
  opacity: .5;
  pointer-events: none;
}
.site-footer::after {           /* Passermarken wie auf dem Druckbogen */
  content: "";
  position: absolute; top: 16px; left: 14px; right: 14px; height: 22px; z-index: -1;
  background: var(--passer-hell) left / 22px no-repeat, var(--passer-hell) right / 22px no-repeat;
  opacity: .6;
  pointer-events: none;
}
.footer-big {
  /* füllt die Breite: Zeile in Anton ≈ 5,25 × Schriftgröße (5,4 lässt Luft für den Versatz) */
  font: 400 min(calc((100vw - 2 * var(--gutter)) / 5.4), 16rem)/.98 var(--f-head);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper-hell);
  text-shadow: .035em .03em 0 var(--ink);   /* zweite Farbe leicht verrutscht */
  padding: .04em .04em .06em 0;
  margin: 8px 0 24px;
  -webkit-mask-image: var(--abrieb-leicht);
          mask-image: var(--abrieb-leicht);
}
.footer-row { font: 600 .92rem/1.4 var(--f-body); letter-spacing: .04em; border-top: 2px solid rgba(243, 231, 201, .5); box-shadow: 0 -5px 0 -3.5px rgba(243, 231, 201, .5); }
.footer-row a { color: inherit; }

/* „Nach oben“ */
.to-top { background: var(--red); color: var(--paper-hell); border: 3px solid var(--paper-hell); box-shadow: 0 0 0 3px var(--ink); }
.to-top:hover { box-shadow: 0 0 0 3px var(--ink); background: var(--ink); }


/* =====================================================================
   16  Detail-Dialog: Handzettel
   ===================================================================== */
.event-modal {
  background: var(--paper-hell);
  border: var(--linie) solid var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.event-modal::backdrop { background: rgba(29, 26, 23, .85); }
.em-media { background: var(--ink); isolation: isolate; }
.em-media::after {              /* weinroter Rasterverlauf füllt die Flyerspalte nach unten */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: min(265px, 100%);
  background: var(--red);
  -webkit-mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
          mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
  opacity: .75;
  pointer-events: none;
}
.em-flyer { border-color: var(--paper-hell); }
.em-body { box-shadow: inset 6px 0 0 var(--paper-hell), inset 7.5px 0 0 var(--ink); }
.em-close { background: var(--red); color: var(--paper-hell); }
.em-close:hover { background: var(--ink); }
.em-date { font: 700 .95rem/1.2 var(--f-body); letter-spacing: .12em; color: var(--red); border-bottom: 3px solid var(--red); display: inline-block; padding-bottom: 6px; }
.em-title { font: 400 clamp(2.3rem, 5vw, 4rem)/1 var(--f-head); letter-spacing: .015em; text-transform: uppercase; padding: .04em 44px .04em 0; overflow-wrap: anywhere; }
.em-sub { font: italic 600 1.15rem/1.35 var(--f-body); }
/* Fakten-Leiste Einlass/Beginn/Ort zwischen Doppellinien, gut lesbare Labels */
.em-facts {
  border: 0;
  border-top: var(--linie) solid var(--ink);
  border-bottom: var(--linie) solid var(--ink);
  box-shadow: 0 -7px 0 -5.5px var(--ink), 0 7px 0 -5.5px var(--ink);
  margin-top: 22px; margin-bottom: 22px;
}
.em-facts div { border-right: 2px solid var(--ink); text-align: center; }
.em-facts dt { font: 400 .84rem/1 var(--f-cond); letter-spacing: .18em; color: var(--red); }
.em-facts dd { font: 400 1.25rem/1.15 var(--f-cond); }
.em-past { font-family: var(--f-body); font-style: italic; background: var(--paper-2); }
.em-h { font: 400 1.4rem/1 var(--f-head) !important; letter-spacing: .06em; text-transform: uppercase; }   /* style.css setzt die Schrift mit !important */
.em-lineup li::before { content: "■ "; font-size: .7em; vertical-align: .12em; color: var(--red); }
.em-lineup li { border-bottom: 1.5px solid rgba(29, 26, 23, .3); }
.em-kasse { font-family: var(--f-body); font-style: italic; }
.em-action { border: 2px solid var(--ink); font-family: var(--f-cond); box-shadow: none; }
.em-nav { border-top: var(--linie) solid var(--ink); box-shadow: inset 0 3px 0 var(--paper-hell), inset 0 4.5px 0 var(--ink); }
.em-nav a { font-family: var(--f-cond); }
.em-nav small { font: 400 .8rem/1 var(--f-cond); letter-spacing: .16em; color: var(--red); }
.hoerrein-start { background: var(--ink); box-shadow: none; font-family: var(--f-cond); }
.hoerrein-start:hover { background: var(--red); }
.hoerrein-start small { font-family: var(--f-body); }
.hoerrein-hinweis { font-family: var(--f-body); }
@media (max-width: 760px) {
  .event-modal { border: 0; box-shadow: none; }
  .em-body { box-shadow: none; }
  .em-facts div:last-child { flex-basis: 100%; border-top: 2px solid var(--ink); border-right: 0; }   /* „Ort“ in eigener Zeile */
}


/* =====================================================================
   17  Über uns
   ===================================================================== */
.uu-intro { align-items: center; }
.uu-lede { font: 400 clamp(1.4rem, 2.5vw, 2.05rem)/1.15 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; }
/* Bands als Festival-Line-up: zentriert, von groß nach klein, Schwarz/Weinrot im Wechsel */
.band-chips { justify-content: center; align-items: baseline; gap: 4px 0; text-align: center; }
.band-chips li, .band-chips li:nth-child(3n+1), .band-chips li:nth-child(5n+3) {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
  color: var(--ink);
  font: 400 clamp(1.3rem, 2.4vw, 2rem)/1.2 var(--f-cond);
  letter-spacing: .02em;
}
.band-chips li:nth-child(-n+3) { font: 400 clamp(2.2rem, 5.6vw, 4.6rem)/1.04 var(--f-head); letter-spacing: .015em; color: var(--red); }
.band-chips li:nth-child(n+4):nth-child(-n+8) { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
.band-chips li:nth-child(n+4):nth-child(even) { color: var(--red); }
.band-chips li:nth-child(n+13) { font-size: clamp(1.15rem, 2vw, 1.6rem); }
.band-chips li:not(:last-child)::after { content: "/"; margin: 0 .32em; font-size: .8em; vertical-align: .04em; color: var(--red); }
/* Zeitleiste */
.zeitleiste::before { background: repeating-linear-gradient(to bottom, var(--ink) 0 10px, transparent 10px 16px); }
.zl-jahr, .zeitleiste li:nth-child(even) .zl-jahr {
  background: var(--ink);
  color: var(--paper-hell);
  border: 0;
  box-shadow: none;
  transform: none;
  font-family: var(--f-zahl);
}
.zeitleiste li:nth-child(even) .zl-jahr { background: var(--red); }
.zeitleiste li > * { min-width: 0; }
.zl-text { background: var(--paper-hell); border: 3px solid var(--ink); box-shadow: var(--innen); padding: 22px 26px; }
/* lange Wörter („Industriestraße“) dürfen auf schmalen Schirmen nicht aus dem Kasten ragen */
.zl-text h3 { font: 400 clamp(1.35rem, 4.8vw, 1.75rem)/1.05 var(--f-head); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 420px) { .zl-text { padding: 18px 18px; } }
/* Fish: schwarze Druckfläche mit weinrotem Rasterverlauf statt Beton */
.uu-fish { position: relative; isolation: isolate; background: var(--ink); }
.uu-fish::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: min(265px, 100%);
  background: var(--red);
  -webkit-mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
          mask: var(--raster-unten) center bottom / 10px 265px repeat-x;
  opacity: .7;
  pointer-events: none;
}
.fish-text h2 { font-family: var(--f-head); text-shadow: .03em .026em 0 var(--red); color: var(--paper-hell); }
.fish-text p:not(.uu-lede):not(.pw-kicker) { color: #ece0c6; }
.pass { background: var(--paper-hell); }
.pass-name { font-family: var(--f-head); }
.pass-streifen { font-family: var(--f-head); background: var(--ink); }
.pass-kopf, .pass-fuss { font-family: var(--f-body); font-weight: 700; }
.uu-zahlen { background: var(--ink); }
.uu-zahlen .section-head h2 { color: var(--paper-hell); }
.uu-ausstattung strong { font-family: var(--f-cond); }
/* Stimmen: zentrierte Handzettel */
.stimme { background: var(--paper-hell); border: 3px solid var(--ink); box-shadow: var(--innen); text-align: center; }
.stimme:hover { transform: none; box-shadow: var(--innen-rot); border-color: var(--red); }
.stimme-zitat { font: italic 600 clamp(1.15rem, 1.8vw, 1.4rem)/1.35 var(--f-body); text-transform: none; }
.stimme-quelle { font: 700 .84rem/1.3 var(--f-body); letter-spacing: .12em; }
.uu-karte { background: var(--ink); box-shadow: none; border: 3px solid var(--ink); text-align: center; }
.uu-karte:hover { transform: none; background: var(--red); border-color: var(--red); }
.uu-karte h3 { font-family: var(--f-head); font-size: 1.7rem; letter-spacing: .03em; text-transform: uppercase; }


/* =====================================================================
   18  Kalender (einfarbig weinrot), Rechtliches, Bewegung
   ===================================================================== */
.kalender { border-top: 0; }
.kalender .section-head h2 { font-size: clamp(2.4rem, 10.5vw, 8rem); hyphens: manual; }   /* „Eventkalender“ bleibt ein Wort */
.cal { background: var(--paper-hell); border: var(--linie) solid var(--ink); box-shadow: none; outline: 1.5px solid var(--ink); outline-offset: 4px; }
.cal-head { border-bottom: var(--linie) solid var(--ink); justify-content: center; padding: 18px; }
.cal-title { font-family: var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--red); text-align: center; overflow-wrap: anywhere; min-width: 0; }
.cal-title span { font: italic 600 .55em/1 var(--f-body); color: var(--ink); text-transform: none; }
.cal-btn, .cal-today { background: var(--ink); color: var(--paper-hell); font-family: var(--f-cond); }
.cal-btn:hover:not(:disabled), .cal-today:hover:not(:disabled) { background: var(--red); }
.cal-wd { background: var(--ink); font-family: var(--f-cond); }
.cal-day { border-color: var(--ink); }
.cal-num { font: 700 1rem/1 var(--f-body); }
.cal-ev, .cal-ev-konzert, .cal-ev-party { background: var(--red); color: var(--paper-hell); border: 2px solid var(--ink); }
.cal-ev:hover { transform: none; box-shadow: none; background: var(--ink); }
.cal-ev b { font-family: var(--f-cond); }
.cal-ev small { font-family: var(--f-body); font-weight: 600; }
.cal-day.is-today .cal-num { background: var(--red); font-family: var(--f-body); }
@media (max-width: 860px) {
  .cal-day.has-events { background: var(--paper-2); }
  .cal-ag-date { font-family: var(--f-body); }
  .cal-ag-date b { font-family: var(--f-zahl); color: var(--red); }
  .cal-ag-info b { font-family: var(--f-cond); }
  .cal-ag-info small { font-family: var(--f-body); }
}

/* Rechtliche Seiten */
.legal-body h3 { font-family: var(--f-head); }

/* Bewegung reduzieren: Knöpfe springen nicht, Übergänge aus */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .event, .ev-title, .video-btn::before, .video-btn::after, .photo::before, .photo::after { transform: none; transition: none; }
}


/* =====================================================================
   19  Breiter und kompakter (Kundenwunsch Oktober 2026)
   ===================================================================== */
:root { --max: 1440px; }                     /* Inhalt darf auf großen Bildschirmen breiter werden (vorher 1240px) */

/* Radio-Band flacher: kleinerer Knopf, weniger Innenabstand, kleineres Laufband */
.radio-play { width: 44px; height: 44px; }
.rp-icon { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 4px; }
.radio-band.is-playing .rp-icon { width: 13px; height: 16px; }
.radio-name { font-size: 1.12rem; }
.radio-sendung { font-size: .78rem; line-height: 1.25; }
@media (min-width: 761px) { .radio-player { padding-top: 5px; padding-bottom: 5px; } }
@media (max-width: 760px) { .radio-player { padding-top: 8px; padding-bottom: 8px; } }
.ticker span { font-size: clamp(1.05rem, 1.9vw, 1.5rem); padding: 10px 0 9px; }


/* =====================================================================
   20  Ruhige Fassung: Startbereich & Wochenenden (ersetzt Punkteraster)
   Überschreibt:
     A  den Startbereich (.hero::before / ::after, .buehnenlicht)
     B  die Wochenend-Blöcke (.wochenende, .we-kopf)
   Ein Motiv für beide Stellen: schwarzer Rahmen, dahinter eine flache
   Weinrot-Fläche, nach rechts unten versetzt (zweiter Siebdruck-Durchgang).
   Keine Punkte, kein Raster, keine Sprenkel, kein Material-Imitat.
   ===================================================================== */

:root {
  /* frischer, etwas hellerer Plakatbogen innerhalb des Rahmens */
  --bogen: #ede7dc;
  /* großflächige Papierwolke: kaum sichtbare, weiche Unruhe im Bogen
     (feTurbulence, sehr niedrige Frequenz – keine Körnung, kein Muster) */
  --papierwolke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .0048' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52  0 0 0 0 .42  0 0 0 0 .30  .36 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");

  /* Plakatrahmen: Lage und Versatz der roten Zweitdruck-Fläche */
  --rahmen-oben: clamp(8px, 1.4vh, 14px);
  --rahmen-unten: clamp(10px, 1.8vh, 18px);
  --rahmen-seite: calc(var(--gutter) / 2);
  --rahmen-linie: 6px;
  --versatz-rot: 9px;

  /* Fußzeile auf der unteren Rahmenkante (rot gedruckt, Anton) */
  --fusszeile: "LIVE AUS DEM HAFENGEBIET MANNHEIM";

  /* Wochenenden: warmer Kraftpapier-Ton mit gut 10 % Weinrot,
     dunkler als der Bogen, aber hell genug für lange Listen */
  --we-flaeche: #d7bea5;
  --we-versatz: 6px;
}

/* ---------------------------------------------------------------------
   A  Startbereich: Bogen + schwarzer Rahmen + versetzte Weinrot-Fläche
   --------------------------------------------------------------------- */
/* ::before trägt jetzt Bogen UND Rahmen. Die zweite Druckfarbe liegt als
   volle, flache Weinrot-Fläche dahinter und schaut rechts und unten heraus.
   Unter dem Logo liegt nur ruhiges Papier. */
.hero::before {
  content: "";
  position: absolute; z-index: -1;
  inset: var(--rahmen-oben) var(--rahmen-seite) var(--rahmen-unten);
  width: auto; height: auto;
  background: var(--papierwolke) 0 0 / 1400px 900px, var(--bogen);
  border: var(--rahmen-linie) solid var(--ink);
  box-shadow: var(--versatz-rot) var(--versatz-rot) 0 0 var(--red);
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 1;
  pointer-events: none;
}
/* ::after ist frei geworden: rot gedruckte Fußzeile, die die untere
   Rahmenlinie unterbricht – Gegenstück zur schwarzen Kopfzeile oben */
.hero::after {
  content: var(--fusszeile);
  position: absolute; z-index: -1;
  inset: auto calc(var(--rahmen-seite) + 34px) var(--rahmen-unten) auto;
  border: 0;
  padding: 0 12px 2px;
  height: 18px;
  background: var(--bogen);
  color: var(--red);
  font: 400 .8rem/16px var(--f-cond);
  letter-spacing: .2em;
  white-space: nowrap;
  pointer-events: none;
}
/* Bühnenlicht nur innerhalb des Bogens, nie über dem Rahmen */
.buehnenlicht {
  inset: calc(var(--rahmen-oben) + var(--rahmen-linie))
         calc(var(--rahmen-seite) + var(--rahmen-linie))
         calc(var(--rahmen-unten) + var(--rahmen-linie));
}

/* 601–1200 px: Versatz kleiner, Abstand zum Radio-Band größer */
@media (min-width: 601px) and (max-width: 1200px) {
  :root {
    --versatz-rot: 6px;
    --rahmen-unten: calc(clamp(10px, 1.8vh, 18px) + 6px);
  }
  .hero { padding-bottom: calc(clamp(30px, 4.5vh, 56px) + 6px); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero::after { font-size: .74rem; letter-spacing: .16em; }
}
/* Handy */
@media (max-width: 600px) {
  :root {
    --rahmen-oben: 8px;
    --rahmen-unten: 18px;
    --versatz-rot: 5px;
    --fusszeile: "HAFENGEBIET MANNHEIM";
  }
  .hero { padding-bottom: 46px; }
  .hero::after {
    right: calc(var(--rahmen-seite) + 18px);
    padding: 0 8px 2px;
    height: 16px;
    font-size: .7rem; line-height: 14px;
    letter-spacing: .14em;
  }
}

/* ---------------------------------------------------------------------
   B  Wochenenden: gleiches Motiv – schwarzer Rahmen, rote Fläche versetzt
      dahinter, vollrote Kopfzeile mit schwarzem Schildchen
   --------------------------------------------------------------------- */
.wochenende {
  background: var(--we-flaeche);     /* eine gleichmäßige Fläche, keine Struktur */
  border: 3px solid var(--ink);
  box-shadow: var(--we-versatz) var(--we-versatz) 0 0 var(--red);
  margin-bottom: calc(22px + var(--we-versatz));
  margin-right: var(--we-versatz);   /* Versatz bleibt in der Spalte */
}
.we-kopf {
  background: var(--red);            /* Vollton, ohne Sprenkel */
}
@media (max-width: 720px) {
  :root { --we-versatz: 5px; }
  .wochenende { box-shadow: var(--we-versatz) var(--we-versatz) 0 0 var(--red); }
}

/* ---------------------------------------------------------------------
   C  Traversen-Rahmen (Truss) um den Startbereich – wie auf der Bühne
      Ecken = Würfelverbinder, Kanten = Traverse aus zwei Rohren mit Diagonalen.
      Gezeichnet in Druckschwarz, damit es zum Plakat passt.
   --------------------------------------------------------------------- */
:root {
  --truss: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2772%27%20height=%2772%27%3E%3Cg%20fill=%27none%27%20stroke=%27%231d1a17%27%20stroke-linecap=%27square%27%3E%3Crect%20x=%271%27%20y=%271%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%277%27%20y=%277%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Crect%20x=%2749%27%20y=%271%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%2755%27%20y=%277%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Crect%20x=%271%27%20y=%2749%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%277%27%20y=%2755%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Crect%20x=%2749%27%20y=%2749%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%2755%27%20y=%2755%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Cpath%20d=%27M24%203H48M24%2021H48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M24%2021L36.0%203L48%2021%27%20stroke-width=%271.8%27/%3E%3Cpath%20d=%27M24%2051H48M24%2069H48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M24%2069L36.0%2051L48%2069%27%20stroke-width=%271.8%27/%3E%3Cpath%20d=%27M3%2024V48M21%2024V48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M21%2024L3%2036.0L21%2048%27%20stroke-width=%271.8%27/%3E%3Cpath%20d=%27M51%2024V48M69%2024V48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M69%2024L51%2036.0L69%2048%27%20stroke-width=%271.8%27/%3E%3C/g%3E%3C/svg%3E");
  --rahmen-linie: 20px;                /* Traversenbreite (Computer) */
}
.hero::before {
  border: var(--rahmen-linie) solid transparent;
  border-image: var(--truss) 24 round;
}
.hero::after {                          /* Fußzeile sitzt als Schild mittig auf der unteren Traverse */
  box-sizing: border-box;
  display: flex; align-items: center;
  bottom: calc(var(--rahmen-unten) - 3px);
  height: calc(var(--rahmen-linie) + 6px);
  padding: 2px 12px 0;
  line-height: 1;
  border: 2px solid var(--ink);
}
.hero { padding-left: calc(var(--gutter) + 18px); padding-right: calc(var(--gutter) + 18px); padding-top: clamp(30px, 4vh, 44px); }
@media (min-width: 601px) and (max-width: 1200px) { :root { --rahmen-linie: 16px; } }
@media (max-width: 600px) {
  :root { --rahmen-linie: 12px; }
  .hero { padding-left: calc(var(--gutter) + 12px); padding-right: calc(var(--gutter) + 12px); }
}

/* ---------------------------------------------------------------------
   D  Startbereich als Live-Bühne
      Oben die Traverse mit Scheinwerfern, links und rechts Traversen-Türme,
      unten der schwarze Bühnenboden (ersetzt die untere Traverse).
   --------------------------------------------------------------------- */
:root {
  --buehne: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2772%27%20height=%2778%27%3E%3Cg%20fill=%27none%27%20stroke=%27%231d1a17%27%20stroke-linecap=%27square%27%3E%3Crect%20x=%271%27%20y=%271%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%277%27%20y=%277%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Crect%20x=%2749%27%20y=%271%27%20width=%2722%27%20height=%2722%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%2755%27%20y=%277%27%20width=%2710%27%20height=%2710%27%20fill=%27none%27%20stroke=%27%23ede7dc%27%20stroke-width=%271.6%27/%3E%3Cpath%20d=%27M24%203H48M24%2021H48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M24%2021L36.0%203L48%2021%27%20stroke-width=%271.8%27/%3E%3Cpath%20d=%27M3%2024V48M21%2024V48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M21%2024L3%2036.0L21%2048%27%20stroke-width=%271.8%27/%3E%3Cpath%20d=%27M51%2024V48M69%2024V48%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M69%2024L51%2036.0L69%2048%27%20stroke-width=%271.8%27/%3E%3Crect%20x=%270%27%20y=%2748%27%20width=%2772%27%20height=%2730%27%20fill=%27%231d1a17%27%20stroke=%27none%27/%3E%3Crect%20x=%270%27%20y=%2751%27%20width=%2772%27%20height=%271.6%27%20fill=%27%23ede7dc%27%20fill-opacity=%27.55%27%20stroke=%27none%27/%3E%3C/g%3E%3C/svg%3E");
  --lampe: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2722%27%20height=%2730%27%20viewBox=%270%200%2022%2030%27%3E%3Cg%20fill=%27%231d1a17%27%3E%3Crect%20x=%279.5%27%20y=%270%27%20width=%273%27%20height=%276%27/%3E%3Cpath%20d=%27M3%207h16v2.4H3z%27/%3E%3Cpath%20d=%27M4%2010h14l1.5%2015H2.5z%27/%3E%3Crect%20x=%271.5%27%20y=%2725%27%20width=%2719%27%20height=%274%27%20rx=%271%27/%3E%3C/g%3E%3Crect%20x=%274%27%20y=%2726%27%20width=%2714%27%20height=%272%27%20fill=%27%23ede7dc%27%20fill-opacity=%27.8%27/%3E%3C/svg%3E");
  --kegel: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27200%27%20height=%27420%27%20viewBox=%270%200%20200%20420%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23fffaf0%27%20stop-opacity=%271%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23fffaf0%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M88%200h24l88%20420H0z%27%20fill=%27url(%23g)%27/%3E%3C/svg%3E");
  --boden: 30px;                       /* Höhe Bühnenboden (Computer) */
}
.hero::before {
  border-style: solid;
  border-color: transparent;
  border-width: var(--rahmen-linie) var(--rahmen-linie) var(--boden);
  border-image: var(--buehne) 24 24 30 24 round;
}
/* Schild auf dem Bühnenboden: helle Schrift mittig auf der Vorderkante */
.hero::after {
  inset: auto auto var(--rahmen-unten) 50%;
  transform: translateX(-50%);
  height: var(--boden);
  padding: 4px 0 0;
  border: 0;
  background: none;
  color: var(--paper-hell);
  letter-spacing: .26em;
}
/* Licht nur innerhalb der Bühne; Scheinwerfer sind an die Traverse geklemmt
   (Ebene beginnt auf Höhe der Traverse, Kannen hängen knapp darunter) */
.buehnenlicht { bottom: calc(var(--rahmen-unten) + var(--boden)); -webkit-mask-image: none; mask-image: none; }   /* Maske würde die Scheinwerfer oben abschneiden */
.buehnenlicht::after {
  content: "";
  position: absolute; inset: calc(-1 * var(--rahmen-linie) + 2px) 0 0;
  pointer-events: none;
  background:
    var(--lampe) 9% 0 / 26px 35px no-repeat,
    var(--lampe) 30% 0 / 26px 35px no-repeat,
    var(--lampe) 70% 0 / 26px 35px no-repeat,
    var(--lampe) 91% 0 / 26px 35px no-repeat,
    var(--kegel) 9% 28px / 280px 92% no-repeat,
    var(--kegel) 30% 28px / 280px 92% no-repeat,
    var(--kegel) 70% 28px / 280px 92% no-repeat,
    var(--kegel) 91% 28px / 280px 92% no-repeat;
}
.hero { padding-top: calc(clamp(30px, 4vh, 44px) + 14px); padding-bottom: calc(clamp(30px, 4.5vh, 56px) + 14px); }
@media (min-width: 601px) and (max-width: 1200px) {
  :root { --boden: 26px; }
  .hero { padding-bottom: calc(clamp(30px, 4.5vh, 56px) + 16px); }
}
@media (max-width: 900px) {
  .buehnenlicht::after {
    background:
      var(--lampe) 8% 0 / 18px 25px no-repeat,
      var(--lampe) 92% 0 / 18px 25px no-repeat,
      var(--kegel) 8% 22px / 200px 80% no-repeat,
      var(--kegel) 92% 22px / 200px 80% no-repeat;
  }
}
@media (max-width: 600px) {
  :root { --boden: 22px; }
  .hero { padding-top: 40px; padding-bottom: 50px; }
  .hero::after { padding-top: 3px; font-size: .68rem; letter-spacing: .18em; }
}
/* Kein Schriftzug auf dem Bühnenboden */
.hero::after { content: none; }

/* ---------------------------------------------------------------------
   E  Scheinwerfer mit Lichtkegel (bewegt), kein roter Rand am Startbereich
      Jeder Scheinwerfer hängt an der Traverse, der Kegel kommt genau aus
      seiner Linse und schwenkt mit ihm. Läuft das 7er Radio, pulsiert das
      Licht im Takt (--beat aus main.js).
   --------------------------------------------------------------------- */
.hero::before { box-shadow: none; }          /* roter Versatz-Rand entfällt */
.buehnenlicht::after { content: none; }      /* alte, starre Scheinwerfer */
.lichtanlage {
  position: absolute; z-index: -1;
  top: calc(var(--rahmen-oben) + 3px);
  left: calc(var(--rahmen-seite) + var(--rahmen-linie));
  right: calc(var(--rahmen-seite) + var(--rahmen-linie));
  bottom: calc(var(--rahmen-unten) + var(--boden));
  overflow: hidden;                          /* Licht endet am Bühnenboden */
  pointer-events: none;
}
.lichtanlage span {
  position: absolute; top: 0; left: var(--x);
  width: 26px; height: 35px; margin-left: -13px;
  background: var(--lampe) center top / 26px 35px no-repeat;
  transform-origin: 50% 4px;                 /* dreht am Haken */
  transform: rotate(var(--ruhe));
  animation: schwenk var(--dauer) ease-in-out var(--verzug) infinite alternate;
}
/* Lichtkegel: beginnt an der Linse, gleiche Breite wie die Linse */
.lichtanlage span::after {
  content: "";
  position: absolute; top: 33px; left: 50%;
  width: 340px; height: 640px;
  transform: translateX(-50%);
  clip-path: polygon(48.2% 0, 51.8% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 250, 238, .9), rgba(255, 250, 238, .35) 45%, rgba(255, 250, 238, 0) 80%);
  opacity: calc(.6 + var(--beat, 0) * .4);
  transition: opacity .08s linear;
}
.lichtanlage span:nth-child(1) { --x: 7%;  --von: -24deg; --bis: -6deg;  --dauer: 5.2s; --verzug: -1s; }
.lichtanlage span:nth-child(2) { --x: 21%; --von: -16deg; --bis: 6deg;   --dauer: 6.6s; --verzug: -3s; }
.lichtanlage span:nth-child(3) { --x: 36%; --von: 12deg;  --bis: -10deg; --dauer: 5.6s; --verzug: -2s; }
.lichtanlage span:nth-child(4) { --x: 50%; --von: -9deg;  --bis: 9deg;   --dauer: 7.2s; --verzug: -5s; }
.lichtanlage span:nth-child(5) { --x: 64%; --von: -12deg; --bis: 10deg;  --dauer: 6.1s; --verzug: -1.5s; }
.lichtanlage span:nth-child(6) { --x: 79%; --von: 16deg;  --bis: -6deg;  --dauer: 5.4s; --verzug: -4s; }
.lichtanlage span:nth-child(7) { --x: 93%; --von: 24deg;  --bis: 6deg;   --dauer: 4.9s; --verzug: -2.5s; }
.lichtanlage span { --ruhe: calc((var(--von) + var(--bis)) / 2); }
@keyframes schwenk { from { transform: rotate(var(--von)); } to { transform: rotate(var(--bis)); } }
@media (max-width: 900px) {      /* Tablet: vier Scheinwerfer */
  .lichtanlage span:nth-child(2n) { display: none; }
  .lichtanlage span:nth-child(1) { --x: 9%; }
  .lichtanlage span:nth-child(3) { --x: 36%; }
  .lichtanlage span:nth-child(5) { --x: 64%; }
  .lichtanlage span:nth-child(7) { --x: 91%; }
}
@media (max-width: 600px) {      /* Handy: drei Scheinwerfer */
  .lichtanlage span:nth-child(3), .lichtanlage span:nth-child(5) { display: none; }
  .lichtanlage span:nth-child(4) { display: block; --x: 50%; }
  .lichtanlage span:nth-child(1) { --x: 10%; }
  .lichtanlage span:nth-child(7) { --x: 90%; }
}
@media (max-width: 600px) {
  .lichtanlage span { width: 20px; height: 27px; margin-left: -10px; background-size: 20px 27px; }
  .lichtanlage span::after { top: 25px; width: 260px; height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .lichtanlage span { animation: none; }
}

/* Wochenend-Blöcke ohne roten Versatz-Rand */
.wochenende, .wochenende:hover { box-shadow: none; margin-right: 0; margin-bottom: 22px; }
@media (max-width: 720px) { .wochenende { box-shadow: none; } }

/* ---------------------------------------------------------------------
   F  Traversen am Seitenrand mit Scheinwerfern (ab 1100 px Breite)
      Links und rechts steht je eine Traverse fest am Bildschirmrand,
      daran je drei Scheinwerfer, die schräg in die Seite leuchten.
      .rand-traverse (vorn): Traverse + Scheinwerfer
      .rand-licht   (hinten): die Lichtkegel – liegen hinter dem Inhalt
      Beide nutzen dieselben Werte, deshalb schwenken Kegel und Kanne gemeinsam.
   --------------------------------------------------------------------- */
:root { --traverse-senkrecht: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%3E%3Cg%20fill=%27none%27%20stroke=%27%231d1a17%27%20stroke-linecap=%27square%27%3E%3Cpath%20d=%27M3%200V24M21%200V24%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M21%200L3%2012.0L21%2024%27%20stroke-width=%271.8%27/%3E%3C/g%3E%3C/svg%3E"); --rand-breite: 18px; }
.rand-licht, .rand-traverse { display: none; }
@media (min-width: 1100px) {
  .rand-licht, .rand-traverse { display: block; position: fixed; inset: 0; pointer-events: none; }
  .rand-traverse { z-index: 45; }            /* vor dem Inhalt, hinter dem Kopf */
  .rand-licht { z-index: -1; overflow: hidden; }
  .rand-traverse::before, .rand-traverse::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: var(--rand-breite);
    background: var(--traverse-senkrecht) center top / var(--rand-breite) var(--rand-breite) repeat-y;
  }
  .rand-traverse::before { left: 4px; }
  .rand-traverse::after { right: 4px; }
  .rand-traverse span, .rand-licht span {
    position: absolute; top: var(--y);
    width: 26px; height: 35px; margin: -4px 0 0 -13px;
    transform-origin: 50% 4px;
    transform: rotate(var(--von));
    animation: schwenk var(--dauer) ease-in-out var(--verzug) infinite alternate;
  }
  .rand-traverse span { background: var(--lampe) center top / 26px 35px no-repeat; }
  .rand-licht span::after {
    content: ""; position: absolute; top: 33px; left: 50%;
    width: 420px; height: 760px;
    transform: translateX(-50%);
    clip-path: polygon(48.5% 0, 51.5% 0, 100% 100%, 0 100%);
    background: linear-gradient(to bottom, rgba(255, 250, 238, .8), rgba(255, 250, 238, .25) 45%, rgba(255, 250, 238, 0) 80%);
    opacity: calc(.45 + var(--beat, 0) * .4);
  }
  /* links: Haken in der Traversenmitte, Kegel zeigt nach rechts unten */
  .rand-traverse span:nth-child(-n+3), .rand-licht span:nth-child(-n+3) { left: calc(4px + var(--rand-breite) / 2); }
  .rand-traverse span:nth-child(n+4), .rand-licht span:nth-child(n+4) { left: calc(100% - 4px - var(--rand-breite) / 2); }
  .rand-traverse span:nth-child(1), .rand-licht span:nth-child(1) { --y: 24%; --von: -62deg; --bis: -40deg; --dauer: 6.2s; --verzug: -2s; }
  .rand-traverse span:nth-child(2), .rand-licht span:nth-child(2) { --y: 52%; --von: -76deg; --bis: -52deg; --dauer: 7.4s; --verzug: -5s; }
  .rand-traverse span:nth-child(3), .rand-licht span:nth-child(3) { --y: 80%; --von: -96deg; --bis: -70deg; --dauer: 5.6s; --verzug: -1s; }
  .rand-traverse span:nth-child(4), .rand-licht span:nth-child(4) { --y: 24%; --von: 62deg;  --bis: 40deg;  --dauer: 5.9s; --verzug: -3s; }
  .rand-traverse span:nth-child(5), .rand-licht span:nth-child(5) { --y: 52%; --von: 76deg;  --bis: 52deg;  --dauer: 6.8s; --verzug: -4s; }
  .rand-traverse span:nth-child(6), .rand-licht span:nth-child(6) { --y: 80%; --von: 96deg;  --bis: 70deg;  --dauer: 6.1s; --verzug: -2.5s; }
}
@media (prefers-reduced-motion: reduce) { .rand-traverse span, .rand-licht span { animation: none; } }
@media (min-width: 1100px) {
  /* Auf dunklen Flächen sichtbar: feine helle Kontur um Traverse und Scheinwerfer */
  .rand-traverse::before, .rand-traverse::after, .rand-traverse span {
    filter: drop-shadow(1px 0 0 rgba(237, 231, 220, .55)) drop-shadow(-1px 0 0 rgba(237, 231, 220, .55));
  }
  /* Licht liegt vor dem Inhalt, aber aufhellend: auf Papier kaum, auf Schwarz deutlich – wie echtes Bühnenlicht */
  .rand-licht { z-index: 44; mix-blend-mode: screen; }
  .rand-licht span::after { background: linear-gradient(to bottom, rgba(255, 246, 225, .5), rgba(255, 246, 225, .14) 45%, rgba(255, 246, 225, 0) 80%); }
}
@media (min-width: 1100px) {
  /* Seitenrand-Traversen beginnen erst unter dem Radio-Band (Wert setzt main.js beim Scrollen) */
  .rand-licht, .rand-traverse { top: var(--rand-oben, 100vh); }
}
@media (min-width: 1100px) {
  /* Scheinwerfer am Rand stehen fest am Bildschirm und erscheinen, sobald die Traverse dort ankommt */
  .rand-licht, .rand-traverse { overflow: hidden; }
  .rand-traverse span, .rand-licht span { top: calc(var(--yv) - var(--rand-oben, 0px)); }
  .rand-traverse span:nth-child(3n+1), .rand-licht span:nth-child(3n+1) { --yv: 26vh; }
  .rand-traverse span:nth-child(3n+2), .rand-licht span:nth-child(3n+2) { --yv: 54vh; }
  .rand-traverse span:nth-child(3n+3), .rand-licht span:nth-child(3n+3) { --yv: 82vh; }
}

/* =====================================================================
   21  Radio-Band noch flacher (Kundenwunsch)
   ===================================================================== */
.radio-play { width: 36px; height: 36px; border-width: 2px; }
.rp-icon { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.radio-band.is-playing .rp-icon { width: 10px; height: 13px; }
.radio-band.is-loading .rp-icon { width: 16px; height: 16px; border-width: 2px; }
.radio-cover { width: 34px; height: 34px; }
.radio-name { font-size: 1rem; line-height: 1; }
.radio-live { padding: 2px 5px 1px; }
.radio-sendung { margin-top: 2px; font-size: .74rem; line-height: 1.2; }
.ticker span { font-size: clamp(.95rem, 1.5vw, 1.2rem); padding: 6px 0 5px; }
@media (min-width: 761px) {
  .radio-player { padding-top: 3px; padding-bottom: 3px; gap: 10px; }
  .rs-zeit, .rs-wer { display: inline; }          /* Sendezeit und Moderatoren in einer Zeile */
  .rs-wer::before { content: " · "; color: var(--mustard); }
  .rs-wer.rs-nach-doppelpunkt::before { content: " "; }
}
@media (max-width: 760px) {
  .radio-player { padding-top: 5px; padding-bottom: 5px; gap: 10px; }
  .radio-sendung { font-size: .7rem; }
}

/* Show läuft: kein Ticket-Knopf mehr in der Karte „Nächste Show“ */
.next-show.ist-live .ns-tix, .next-show.ist-live .ns-aus { display: none; }

/* Fehlerseite (404) */
.fehlerseite .legal-body { max-width: none; text-align: center; }
.fehlerseite .legal-body p { margin-left: auto; margin-right: auto; }
.fehlerseite .info-links { justify-content: center; margin: 18px 0 0 !important; }
.fehlerseite .legal-body a.tix { color: var(--paper-hell); text-decoration: none; padding: 12px 18px 11px; }
.fehlerseite .legal-body a.tix:hover { background: var(--red); }

.legal-body ul { padding-left: 1.2em; }

/* Über uns: Foto der Macher statt Backstage-Pass */
.fish-raster { grid-template-columns: minmax(280px, 1.1fr) 1fr; }
.macher-foto { margin: 0; padding: 12px 12px 0; background: var(--paper-hell); transform: rotate(-1.5deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.macher-foto img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.macher-foto figcaption { padding: 10px 0 12px; font: 400 1rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink); }
@media (max-width: 760px) { .fish-raster { grid-template-columns: 1fr; } .macher-foto { transform: none; } }