/* =========================================================
   Startseite — Rockplakat zum nächsten Kegeltermin + nächste Termine.
   Drei Varianten im HTML, sichtbar ist nur die des aktiven Modus (data-nur, siehe modi.css).
   CSS aus den Entwürfen übernommen: .bs = d-backstage.html · .wt = b-welttournee.html · .st = c-stumpi.html.
   Die Tokens (Farben, Schriften) setzt modi.css über html[data-modus="…"].
   ========================================================= */

/* =============== Backstage: Pass + Stumpi-Bühne + Tourdaten-Leiste =============== */
.bs-buehne {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 58fr 42fr; align-items: stretch;
  background:
    radial-gradient(ellipse 50% 60% at 78% 45%, rgba(215,25,32,.55), transparent 70%),
    radial-gradient(circle at 10% 90%, rgba(215,25,32,.35), transparent 40%),
    var(--schwarz);
  min-height: min(78vh, 760px);
}
/* Rote Sprühfarbe links hinter dem Pass */
.bs-buehne::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(circle at 6% 20%, var(--rot) 0 3px, transparent 4px) 0 0 / 23px 29px,
    radial-gradient(circle at 60% 70%, var(--rot) 0 2px, transparent 3px) 0 0 / 37px 31px;
  -webkit-mask: linear-gradient(90deg, #000 0 30%, transparent 55%); mask: linear-gradient(90deg, #000 0 30%, transparent 55%);
}
.bs .pass-bereich { position: relative; z-index: 2; padding: clamp(44px, 6vw, 70px) clamp(16px, 3vw, 36px) clamp(26px, 4vw, 40px) clamp(16px, 4vw, 44px); }
.bs .pass-rahmen { position: relative; transform: rotate(-1.2deg); filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: bs-reinhaengen .9s cubic-bezier(.2,1.3,.4,1) both; }
.bs .band {
  position: absolute; top: 0; left: 50%; width: 46px; height: clamp(74px, 8.5vw, 104px); transform: translateX(-50%) rotate(4deg); z-index: 3;
  background: repeating-linear-gradient(90deg, #b3121a 0 4px, var(--rot) 4px 8px); box-shadow: 0 4px 8px rgba(0,0,0,.5);
}
.bs .pass {
  position: relative; background: var(--creme); color: var(--schwarz);
  padding: clamp(46px, 6vw, 64px) clamp(18px, 3.4vw, 40px) clamp(20px, 3vw, 30px);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
@keyframes bs-reinhaengen { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } }
.bs .oese {
  position: absolute; top: 14px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(circle, var(--schwarz) 0 9px, #8d8a84 10px 13px, #3a3835 14px 16px, transparent 17px);
}
.bs .kritzel { font: clamp(15px, 1.7vw, 19px)/1.1 var(--kritzel); position: absolute; }
.bs .kritzel.links { top: 30px; left: 22px; transform: rotate(-12deg); max-width: 9em; }
.bs .kritzel.rechts { top: 26px; right: 22px; transform: rotate(8deg); text-align: right; }
.bs .kritzel.rechts::after { content: ""; display: block; height: 4px; margin-top: 4px; background: var(--rot); transform: skewX(-20deg); }

.bs .bandname { font: clamp(50px, 7.6vw, 104px)/.88 var(--titel); text-transform: uppercase; text-align: center; margin-top: 20px; letter-spacing: -.005em; }
.bs .bandname span { display: block; font-size: .56em; }
.bs .unterband { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0 18px; }
.bs .unterband b { font: 700 13px var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--rot-text); border: 2px solid var(--rot); padding: 3px 10px; text-align: center; }
.bs .unterband i { color: var(--rot); font-style: normal; letter-spacing: .1em; }
.bs .gig-balken { background: var(--rot); color: var(--creme); font: clamp(28px, 3.6vw, 44px)/1 var(--titel); text-transform: uppercase; text-align: center; padding: 8px 12px; transform: skewX(-6deg); letter-spacing: .02em; }
.bs .titelzeile { font: clamp(24px, 2.8vw, 32px)/1.05 var(--titel); text-transform: uppercase; text-align: center; color: var(--rot-text); margin-top: 12px; }
.bs .fakten { display: grid; grid-template-columns: 1fr auto; border: 3px solid var(--schwarz); margin: 14px auto 0; max-width: 700px; }
.bs .fakten p { font: clamp(22px, 2.6vw, 32px)/1.1 var(--titel); text-transform: uppercase; padding: 10px 16px; text-align: center; }
.bs .fakten p + p { border-left: 3px solid var(--schwarz); }
.bs .einlass { text-align: center; font: 500 15px var(--text); color: var(--gedaempft); margin-top: 8px; }
.bs .aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 18px; }
.bs .dabei { font: clamp(20px, 2.2vw, 28px)/1 var(--titel); text-transform: uppercase; border: 2px solid var(--schwarz); padding: 10px 14px; transform: rotate(-3deg); }
.bs .countdown { margin-top: 16px; }
.bs .countdown-zahlen { display: flex; justify-content: center; gap: 18px; font: 500 14px var(--text); color: var(--gedaempft); }
.bs .countdown strong { font: 26px/1 var(--titel); color: var(--schwarz); margin-right: 4px; font-variant-numeric: tabular-nums; }
.bs .countdown-laeuft { text-align: center; font: 26px/1 var(--titel); text-transform: uppercase; color: var(--rot-text); }
.bs .lineup { margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--schwarz); text-align: center; }
.bs .lineup-titel { font: 700 11px var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--gedaempft); }
.bs .namen { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; font: clamp(17px, 1.8vw, 22px)/1.3 var(--titel); text-transform: uppercase; }
.bs .namen li { min-width: 0; overflow-wrap: anywhere; }
.bs .namen li + li::before { content: "✚"; content: "✚" / ""; color: var(--rot); padding: 0 .3em; }
.bs .namen .leer { font: 500 15px var(--text); text-transform: none; color: var(--gedaempft); }
.bs .laden-text { text-align: center; margin-top: 16px; font: 500 15px var(--text); color: var(--gedaempft); }
.bs .stoerung { margin-top: 16px; padding: 12px 14px; border: 3px solid var(--rot-text); color: var(--rot-text); background: #fbe7e4; font-weight: 600; text-align: center; }
.bs .stoerung-aktion { text-align: center; margin-top: 14px; }

/* Rechte Bühne mit Stumpi, Risskante zum Pass */
.bs .stumpi-buehne { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-start; padding-top: 24px; }
.bs .riss {
  position: absolute; top: 0; bottom: 0; left: -34px; width: 70px; z-index: 2; background: var(--creme);
  clip-path: polygon(0 0, 48% 0, 36% 8%, 55% 15%, 40% 24%, 58% 33%, 38% 44%, 52% 55%, 34% 66%, 56% 76%, 38% 88%, 50% 100%, 0 100%);
  opacity: .96;
}
.bs .stumpi-buehne img {
  position: relative; z-index: 3; width: min(76%, 440px); height: auto;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55));
  animation: bs-rocken 1.8s ease-in-out infinite; transform-origin: 50% 95%;
}
@keyframes bs-rocken { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
.bs .graffiti {
  position: absolute; z-index: 2; right: clamp(10px, 3vw, 40px); top: clamp(24px, 6vw, 70px);
  font: clamp(26px, 3.2vw, 50px)/.95 var(--kritzel); color: var(--rot); text-transform: uppercase; transform: rotate(-12deg);
  text-shadow: 0 0 18px rgba(0,0,0,.6); text-align: center;
}

/* Tourdaten-Leiste */
.bs .tourleiste {
  background: var(--schwarz); color: var(--creme); display: grid; grid-template-columns: repeat(3, 1fr) auto;
  border-top: 3px solid var(--schwarz); border-bottom: 3px solid var(--schwarz); --fokus: var(--gelb);
}
.bs .tourleiste a { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: center; padding: 16px clamp(14px, 2vw, 24px); text-decoration: none; border-right: 1px solid #34302b; transition: background .15s; }
.bs .tourleiste a:hover { background: #1d1916; }
.bs .tourleiste :focus-visible { outline-offset: -4px; }
.bs .tourleiste .d { font: 30px/1 var(--titel); text-align: center; }
.bs .tourleiste .d small { display: block; font: 700 11px var(--text); letter-spacing: .2em; color: var(--rot-hell); margin-top: 3px; }
.bs .tourleiste .t { font: 22px/1.05 var(--titel); text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.bs .tourleiste .t small { display: block; font: 500 12px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--stahl); margin-top: 3px; }
.bs .tourleiste .t small::after { content: " ▸▸▸"; content: " ▸▸▸" / ""; color: var(--rot); letter-spacing: 0; }
.bs .tourleiste .stempel { margin-top: 8px; font-size: 13px; color: var(--rot-hell); border-color: var(--rot-hell); }
.bs .tourleiste .abgesagt .d { text-decoration: line-through; text-decoration-color: var(--rot-hell); color: var(--stahl); }
.bs .tourleiste .alle { grid-column: -2 / -1; background: var(--gelb); color: var(--schwarz); display: flex; align-items: center; justify-content: center; font: 22px/1.05 var(--titel); text-transform: uppercase; padding: 14px 22px; border: 0; }
.bs .tourleiste .alle:hover { background: #ffc81f; }
.bs .tourleiste .alle:focus-visible { outline-color: var(--schwarz); }
.bs .tourleiste .leiste-hinweis { grid-column: 1 / -2; align-self: center; padding: 16px clamp(14px, 2vw, 24px); font-size: 15px; color: var(--stahl); }

@media (max-width: 900px) {
  .bs-buehne { grid-template-columns: 1fr; min-height: 0; }
  .bs .stumpi-buehne { padding-top: 0; }
  .bs .stumpi-buehne img { width: min(78%, 360px); margin: 0 auto; }
  .bs .riss { display: none; }
  .bs .graffiti { top: 14px; left: 12px; right: auto; font-size: 24px; transform: rotate(-10deg); }
  .bs .tourleiste { grid-template-columns: 1fr; }
  .bs .tourleiste a { border-right: 0; border-bottom: 1px solid #34302b; }
  .bs .tourleiste .alle, .bs .tourleiste .leiste-hinweis { grid-column: auto; }
  .bs .kritzel.links { display: none; }
}
@media (max-width: 480px) {
  .bs .fakten { grid-template-columns: 1fr; }
  .bs .fakten p + p { border-left: 0; border-top: 3px solid var(--schwarz); }
}

/* =============== Welttournee: Tourplakat bei Nacht =============== */
.wt-buehne {
  position: relative; overflow: hidden;
  padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 48px) clamp(50px, 8vw, 100px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255,91,26,.38), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(195,18,27,.35), transparent 70%),
    var(--nacht);
}
/* Scheinwerferkegel */
.wt-buehne::before, .wt-buehne::after {
  content: ""; position: absolute; top: -20%; width: 38%; height: 140%;
  background: linear-gradient(rgba(255,230,190,.14), transparent 75%);
  filter: blur(6px); pointer-events: none;
  animation: wt-schwenk 7s ease-in-out infinite alternate;
}
.wt-buehne::before { left: 4%; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.wt-buehne::after { right: 4%; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation-delay: -3.5s; }
@keyframes wt-schwenk { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

.wt .plakat {
  position: relative; z-index: 2; max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 4vw, 56px); align-items: center;
}
.wt .motiv {
  position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--kante);
  background: radial-gradient(circle at 50% 60%, #3a1208, var(--asphalt) 70%);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 6px var(--asphalt), 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,91,26,.25);
  animation: wt-auftritt 1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes wt-auftritt { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.wt .motiv svg { width: 58%; filter: drop-shadow(0 0 22px rgba(255,120,40,.7)); }
.wt .flamme { animation: wt-flackern .18s steps(2) infinite alternate; transform-origin: 50% 100%; }
@keyframes wt-flackern { to { transform: scaleY(1.07) skewX(2deg); opacity: .88; } }
.wt .motiv .stempel { position: absolute; top: 18px; right: 14px; transform: rotate(8deg); background: rgba(10,8,7,.8); }

.wt .kicker { font: 700 14px var(--block); letter-spacing: .3em; text-transform: uppercase; color: var(--glut); }
.wt .bandname {
  font: clamp(58px, 11vw, 124px)/.82 var(--metal);
  margin: 10px 0 4px;
  background: linear-gradient(180deg, #fff 0%, #e9e4dc 38%, #8d857c 52%, #f4efe8 64%, #b6aca1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(255,91,26,.35));
  animation: wt-auftritt 1s .15s cubic-bezier(.2,.9,.3,1) both;
}
.wt .tourname { font: 900 clamp(22px, 3.6vw, 34px)/1 var(--block); text-transform: uppercase; letter-spacing: .06em; color: var(--feuer); margin-bottom: 26px; animation: wt-auftritt 1s .3s both; overflow-wrap: anywhere; }
.wt .fakten { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: end; border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); padding: 18px 0; animation: wt-auftritt 1s .45s both; }
.wt .datum { font: 900 clamp(64px, 9vw, 96px)/.8 var(--block); color: var(--chrom); grid-row: span 2; }
.wt .fakten p { font-size: 16px; color: var(--grau); min-width: 0; overflow-wrap: anywhere; }
.wt .fakten b { color: var(--chrom); font-weight: 600; }
.wt .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; animation: wt-auftritt 1s .52s both; }
.wt .countdown { margin-top: 18px; animation: wt-auftritt 1s .6s both; }
.wt .countdown-zahlen { display: flex; gap: 20px; }
.wt .countdown strong { display: block; font: 900 38px/1 var(--block); color: var(--glut); font-variant-numeric: tabular-nums; }
.wt .countdown-zahlen span { font: 700 12px var(--block); letter-spacing: .2em; text-transform: uppercase; color: var(--grau); }
.wt .countdown-laeuft { font: 900 38px/1 var(--block); text-transform: uppercase; color: var(--glut); }
.wt .lineup { margin-top: 24px; animation: wt-auftritt 1s .75s both; }
.wt .lineup-titel { font: 700 12px var(--block); letter-spacing: .24em; text-transform: uppercase; color: var(--grau); }
.wt .namen { list-style: none; display: flex; flex-wrap: wrap; font: 900 clamp(20px, 2.6vw, 26px)/1.25 var(--block); text-transform: uppercase; letter-spacing: .03em; }
.wt .namen li { min-width: 0; overflow-wrap: anywhere; }
.wt .namen li + li::before { content: "✚"; content: "✚" / ""; color: var(--blut); padding: 0 .3em; }
.wt .namen .leer { font: 400 16px var(--text); text-transform: none; letter-spacing: 0; color: var(--grau); }
.wt .kein-termin, .wt .laden-text { border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); padding: 18px 0; }
.wt .kein-termin { font: 900 clamp(26px, 3.6vw, 40px)/1.05 var(--block); text-transform: uppercase; color: var(--chrom); }
.wt .laden-text { color: var(--grau); }
.wt .stoerung { padding: 12px 14px; border: 1px solid var(--feuer); color: var(--feuer); font-weight: 600; }
.wt .stoerung-aktion { margin-top: 14px; }

/* Tourdaten wie auf der Shirt-Rückseite */
.wt-tour { padding: clamp(56px, 8vw, 100px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--kante); }
.wt .tourdaten { list-style: none; border-top: 1px solid var(--kante); }
.wt .tourdaten li { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--kante); transition: background .2s; }
.wt .tourdaten li:hover { background: linear-gradient(90deg, transparent, rgba(255,91,26,.07), transparent); }
.wt .tourdaten .d { font: 900 30px/1 var(--block); }
.wt .tourdaten .d small { display: block; font: 700 12px var(--block); letter-spacing: .2em; color: var(--grau); }
.wt .tourdaten .ort { font: 700 20px/1.2 var(--block); text-transform: uppercase; letter-spacing: .04em; min-width: 0; overflow-wrap: anywhere; }
.wt .tourdaten .ort small { display: block; font: 400 14px var(--text); text-transform: none; letter-spacing: 0; color: var(--grau); }
.wt .tourdaten .status { font: 700 13px var(--block); letter-spacing: .16em; text-transform: uppercase; color: var(--glut); white-space: nowrap; }
.wt .tourdaten .abgesagt .d { color: var(--grau); text-decoration: line-through; }
.wt .tourdaten .abgesagt .status { color: var(--grau); }
.wt .liste-hinweis { color: var(--grau); border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); padding: 18px 0; }

@media (max-width: 800px) {
  .wt .plakat { grid-template-columns: 1fr; }
  .wt .motiv { max-width: 300px; width: 100%; margin: 0 auto; order: 2; }
  .wt .tourdaten li { grid-template-columns: 76px 1fr; }
  .wt .tourdaten .status { grid-column: 2; }
  .wt .tourdaten .knopf { grid-column: 1 / -1; }
  .wt .countdown-zahlen { gap: 14px; }
}

/* =============== Stumpi: Maskottchen + Ticket =============== */
.st-buehne {
  position: relative; overflow: hidden;
  padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 48px) clamp(70px, 9vw, 120px);
  background:
    repeating-conic-gradient(from 0deg at 34% 55%, rgba(255,212,0,.09) 0deg 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 34% 55%, #3b2c00 0%, var(--schwarz) 62%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
}
.st .buehne-raster { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 48px); align-items: center; }

/* Im HTML steht der Termin vor der Figur (Handy: Termin zuerst); am PC steht die Figur links */
.st .maskottchen { position: relative; order: -1; }
.st .maskottchen svg, .st .figur-motiv { width: 100%; max-width: 470px; display: block; margin: 0 auto; overflow: visible; }
.st .headbang { transform-origin: 150px 362px; animation: st-headbang .9s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes st-headbang { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg) translateY(4px); } }
.st .fuss { transform-origin: 190px 458px; animation: st-wippen .45s ease-in-out infinite alternate; }
@keyframes st-wippen { to { transform: rotate(-12deg); } }
.st .schlagarm { transform-origin: 100px 176px; animation: st-schrammel .45s ease-in-out infinite alternate; }
@keyframes st-schrammel { to { transform: rotate(6deg); } }
.st .blitz { animation: st-zucken 1.8s steps(1) infinite; }
.st .blitz.b2 { animation-delay: -.9s; }
@keyframes st-zucken { 0%, 70% { opacity: 1; } 72%, 76% { opacity: .15; } 78% { opacity: 1; } }
.st .namensschild {
  display: block; width: fit-content; margin: -4px auto 0; transform: rotate(-4deg);
  font: 18px/1.2 var(--kritzel); color: var(--gelb); text-align: center;
}

.st .plakat { position: relative; min-width: 0; }
.st .praesentiert { font: 800 13px var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--gelb); }
.st .bandname { font: clamp(46px, 7.4vw, 92px)/.9 var(--display); margin: 10px 0 6px; text-shadow: 5px 5px 0 var(--rot); }
.st .tour { font: clamp(15px, 2vw, 19px)/1.3 var(--kritzel); color: var(--gelb); margin-bottom: 26px; transform: rotate(-2deg); display: inline-block; overflow-wrap: anywhere; }

.st .ticket {
  display: grid; grid-template-columns: auto 1fr; background: var(--weiss); color: var(--schwarz);
  border-radius: 6px; overflow: hidden; box-shadow: 8px 8px 0 var(--gelb);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
}
.st .ticket .datum { background: var(--rot); color: var(--weiss); padding: 18px 20px; text-align: center; border-right: 3px dashed var(--weiss); display: flex; flex-direction: column; justify-content: center; }
/* Weiß auf Rot hat Kontrast 4,4: klein nur ab 19 px fett (Styleguide §5) */
.st .ticket .datum small { display: block; font: 800 19px var(--text); letter-spacing: .1em; text-transform: uppercase; }
.st .ticket .datum b { display: block; font: 44px/1 var(--display); }
.st .ticket .infos { padding: 16px 20px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.st .ticket .infos p + p { margin-top: 4px; }
.st .ticket .infos b { font-weight: 800; }
.st .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.st .countdown { margin-top: 22px; }
.st .countdown-zahlen { display: flex; gap: 10px; }
.st .countdown-zahlen div { background: var(--kohle); border: 2px solid var(--gelb); padding: 8px 14px; text-align: center; min-width: 76px; }
.st .countdown strong { display: block; font: 30px/1 var(--display); color: var(--gelb); font-variant-numeric: tabular-nums; }
.st .countdown-zahlen span { font: 800 11px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.st .countdown-laeuft { display: inline-block; font: 30px/1 var(--display); color: var(--gelb); background: var(--kohle); border: 2px solid var(--gelb); padding: 10px 14px; }
.st .lineup { margin-top: 22px; }
.st .lineup-titel { font: 800 12px var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--grau); }
.st .namen { list-style: none; display: flex; flex-wrap: wrap; font: 20px/1.35 var(--display); }
.st .namen li { min-width: 0; overflow-wrap: anywhere; }
.st .namen li + li::before { content: "⚡"; content: "⚡" / ""; color: var(--gelb); padding: 0 .2em; }
.st .namen .leer { font: 600 16px var(--text); color: var(--grau); }
.st .kein-termin { font: clamp(22px, 3vw, 30px)/1.2 var(--display); color: var(--gelb); background: var(--kohle); border: 2px solid var(--gelb); padding: 16px 18px; box-shadow: 8px 8px 0 var(--rot); }
.st .laden-text { color: var(--grau); font-weight: 600; }
.st .stoerung { background: var(--kohle); border: 3px solid var(--rot); box-shadow: 4px 4px 0 var(--rot); padding: 12px 14px; font-weight: 600; }
.st .stoerung-aktion { margin-top: 16px; }

/* Kegeltermine als gelber Abschnitt mit schwarzen Karten */
.st-gigs {
  margin-top: -44px; clip-path: polygon(0 44px, 100% 0, 100% calc(100% - 44px), 0 100%);
  padding: calc(clamp(56px, 8vw, 96px) + 44px) clamp(16px, 4vw, 48px) calc(clamp(56px, 8vw, 96px) + 44px);
}
.st .gigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.st .gig { background: var(--schwarz); color: var(--weiss); padding: 20px; position: relative; border-top: 6px solid var(--rot); --fokus: var(--gelb); min-width: 0; }
.st .gig .tag { font: 800 12px var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gelb); }
.st .gig h3 { font: 30px/1.05 var(--display); margin: 4px 0 8px; }
.st .gig p { color: var(--grau); font-size: 15px; overflow-wrap: anywhere; }
.st .gig .balken { height: 8px; background: var(--kante); margin: 12px 0 4px; }
.st .gig .balken i { display: block; height: 100%; background: var(--gelb); }
.st .gig .knopf { margin-top: 14px; border-color: var(--gelb); }
.st .gig-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.st .gig .stempel { transform: rotate(6deg); }
.st .gig.abgesagt h3 { text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 4px; color: var(--grau); }
.st .liste-hinweis { font-weight: 600; }

@media (max-width: 820px) {
  .st .buehne-raster, .st .gigs { grid-template-columns: 1fr; }
  .st .maskottchen { order: 0; }
  .st .maskottchen svg, .st .figur-motiv { max-width: 330px; }
  .st .countdown-zahlen div { min-width: 0; flex: 1; padding: 8px 6px; }
}
@media (max-width: 420px) {
  .st .ticket .datum { padding: 14px 12px; }
  .st .ticket .datum b { font-size: 34px; }
  .st .ticket .infos { padding: 14px 14px 14px 16px; }
}