/* Rock: Festivalbühne, Line-up-Plakat, Backstage-Pässe. Schwarz, Neonpink, Gelb. */
html[data-theme="rock"] {
  --grund: #0b0b0f;
  --text: #fff;
  --kopf-text: #fff;
  --flaeche: #f3efe2;
  --flaeche-text: #111;
  --knopf: #ffe600;
  --knopf-text: #111;
  --rand: #111;
  --fokus: #00e5ff;
  --fehler: #b00045;
  --radius: 4px;
  --schrift: Impact, "Haettenschweiler", "Arial Narrow Bold", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
}

html[data-theme="rock"] body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-theme="rock"] :is(h1, h2, .tuer-nummer, .tuer-band, .tuer-stempel, .schalter, .knopf, .countdown) {
  font-family: var(--schrift); font-weight: 400; letter-spacing: .02em;
}

/* Plakat-Kopf: wie kopiert und aufgeklebt */
html[data-theme="rock"] .kopf h1 {
  display: inline-block; padding: 6px 16px; color: #111; background: #ffe600; transform: rotate(-1.2deg);
  text-transform: uppercase; box-shadow: 6px 6px 0 #ff2e93;
}
html[data-theme="rock"] .kopf h1 em { color: #ff2e93; }
html[data-theme="rock"] .unterzeile { color: #fff; text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="rock"] .countdown { color: #ffe600; font-size: 1.2rem; }

/* Scheinwerfer schwenken langsam */
html[data-theme="rock"] .spot { transform-box: fill-box; transform-origin: 50% 0; animation: spot 7s ease-in-out infinite alternate; }
html[data-theme="rock"] .spot-b { animation-delay: -2s; animation-duration: 9s; }
html[data-theme="rock"] .spot-c { animation-delay: -4s; }
html[data-theme="rock"] .spot-d { animation-delay: -1s; animation-duration: 11s; }
@keyframes spot {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

/* Backstage-Pass */
html[data-theme="rock"] .tuer {
  padding-top: 26px; background: var(--flaeche); border: 3px solid #111; border-radius: 10px;
  box-shadow: 4px 4px 0 #ff2e93;
}
html[data-theme="rock"] .tuer::before { /* Lochung für das Band */
  content: ""; position: absolute; top: 8px; left: 50%; width: 34px; height: 9px; margin-left: -17px;
  background: #0b0b0f; border-radius: 6px;
}
html[data-theme="rock"] li:nth-child(3n) .tuer { transform: rotate(1deg); box-shadow: 4px 4px 0 #ffe600; }
html[data-theme="rock"] li:nth-child(4n+1) .tuer { transform: rotate(-1deg); }
html[data-theme="rock"] .tuer:not(:disabled):hover { transform: translateY(-3px) rotate(-2deg); }
html[data-theme="rock"] .tuer-nummer { font-size: 2.6rem; }

html[data-theme="rock"] .tuer.zu { background: #23232b; color: #b9b9c4; box-shadow: 4px 4px 0 #3a3a44; border-color: #3a3a44; }
html[data-theme="rock"] .tuer.zu .tuer-stempel { color: #111; background: #ffe600; padding: 1px 8px; transform: rotate(-3deg); }
html[data-theme="rock"] .tuer.offen { background: #ffe600; }
html[data-theme="rock"] .tuer.offen .tuer-stempel { color: #fff; background: #ff2e93; padding: 1px 8px; }
html[data-theme="rock"] .tuer.gesehen .tuer-stempel {
  color: #b00045; padding: 0 6px; border: 2px solid #b00045; border-radius: 3px; transform: rotate(-5deg);
}

/* Vorband und Headliner */
html[data-theme="rock"] .tuer.vorband { min-height: 110px; }
html[data-theme="rock"] .tuer.headliner { min-height: 190px; border-width: 5px; box-shadow: 7px 7px 0 #ff2e93; }
html[data-theme="rock"] .tuer.headliner .tuer-nummer { font-size: 4.4rem; }
html[data-theme="rock"] .tuer.headliner .tuer-band { font-size: 1.6rem; text-transform: uppercase; }

/* Dialog */
html[data-theme="rock"] .buehne { box-shadow: 0 0 60px #ff2e93; }
html[data-theme="rock"] .dialog-tag { color: #b00045; text-transform: uppercase; letter-spacing: .08em; }
html[data-theme="rock"] .dialog-innen h2 { text-transform: uppercase; }
html[data-theme="rock"] .vorhang-links, html[data-theme="rock"] .vorhang-rechts {
  background: repeating-linear-gradient(90deg, #7d0a3e 0 18px, #b0145a 18px 36px, #5c0730 36px 44px);
}
html[data-theme="rock"] .schalter { box-shadow: 3px 3px 0 #ff2e93; }

/* Einfache Seiten */
html[data-theme="rock"] .seite-mitte { background: radial-gradient(circle at 50% 0, #3a0b25, #0b0b0f 70%); }
html[data-theme="rock"] .karte { box-shadow: 8px 8px 0 #ff2e93; transform: rotate(-.6deg); }
html[data-theme="rock"] .karte h1 { text-transform: uppercase; }
html[data-theme="rock"] .karte h1 em { color: #ff2e93; }