/* FJW Retro – gemeinsames Stylesheet (Theme + Vorschau)
   Layout: Bühne mit Sonne, Ring und Logo über einem Neon-Horizont; darunter Programm-Tabelle im Kermes-Stil. */
:root {
  --nacht: #0B0B0F;      /* Hintergrund */
  --anth: #222229;       /* Flächen, Trennlinien */
  --grau: #AEB0B9;       /* Nebelgrau, Nebentext */
  --weiss: #FFFFFF;
  --pink: #E50088;       /* Neonpink, Hauptakzent */
  --gelb: #F4DD00;       /* Signalgelb */
  --cyan: #00D9FF; --violett: #7B2CFF; --orange: #FF6A00;   /* Ringfarben */
  --f-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;  /* Lato Black */
  --f-text: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --w: min(100vw, 1100px);  /* Breite der Bühne */
  --max: 1100px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--nacht); overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--nacht); color: var(--weiss); font-family: var(--f-text); font-size: 18px; line-height: 1.55; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--weiss); text-decoration-color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Farbstrich in den fünf Ringfarben */
.farbstrich { display: flex; height: 8px; }
.farbstrich span { flex: 1; }
.farbstrich span:nth-child(1) { background: var(--violett); } .farbstrich span:nth-child(2) { background: var(--pink); }
.farbstrich span:nth-child(3) { background: var(--orange); }  .farbstrich span:nth-child(4) { background: var(--gelb); }
.farbstrich span:nth-child(5) { background: var(--cyan); }
.farbstrich.kurz { width: min(320px, 70%); height: 7px; margin: 14px auto 0; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11, 11, 15, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--anth); }
.kopf .farbstrich { height: 6px; }
/* Farbleiste unten: immer sichtbar */
.farbleiste-unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(6px + env(safe-area-inset-bottom, 0px)); }
.farbleiste-unten span { height: 100%; }
body { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.kopf-logo img { width: 170px; filter: drop-shadow(0 0 6px rgba(229, 0, 136, .7)); }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a { font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; text-decoration: none; }
.nav a:hover, .nav .current-menu-item a { color: var(--pink); text-shadow: 0 0 10px rgba(229, 0, 136, .8); }
.nav-toggle { display: none; background: none; border: 2px solid var(--pink); color: var(--weiss); font: 900 13px var(--f-display); letter-spacing: .14em; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--nacht); border-bottom: 1px solid var(--anth); display: none; }
  .nav.offen { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 16px; }
  .nav a { display: block; padding: 12px 0; }
}

/* ---------- Bühne: Sonne, Ring, Logo, Horizont, Gitter ---------- */
.buehne { --oben: calc(var(--w) * .07); position: relative; height: calc(var(--w) * .80 + var(--oben)); overflow: hidden; background: var(--nacht); }
.buehne-bild { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
.stage { position: absolute; left: 50%; top: var(--oben); width: var(--w); height: calc(100% - var(--oben)); transform: translateX(-50%); }
.sonne-rahmen { position: absolute; left: 0; top: calc(-1 * var(--oben)); width: 100%; height: calc(var(--w) * .505 + var(--oben)); overflow: hidden; }
.sonne { position: absolute; left: 0; top: var(--oben); width: 100%; height: auto; overflow: visible; transform-origin: 50% 63%; animation: aufgang 6.5s cubic-bezier(.12, .55, .18, 1) .3s both; }
/* Sonne steigt langsam hinter dem Horizont auf und kommt dabei nach vorn */
@keyframes aufgang { 0% { transform: translateY(64%) scale(.72); opacity: .35; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ring-an { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes einschalten { 0% { opacity: 0; } 20% { opacity: .9; } 26% { opacity: .1; } 40% { opacity: 1; } 46% { opacity: .3; } 60%, 100% { opacity: 1; } }
.ring { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; transform-origin: 50% 43.75%; animation: ring-an 1.8s cubic-bezier(.2, .8, .2, 1) 3.4s both; }
.ring path { fill: none; stroke-width: 30; stroke-linecap: butt; }
.ring .glow path { stroke-width: 54; opacity: .5; }
.ring .seg { animation: segment 6s infinite; }
.ring .seg:nth-child(2) { animation-delay: 1.2s; } .ring .seg:nth-child(3) { animation-delay: 2.4s; }
.ring .seg:nth-child(4) { animation-delay: 3.6s; } .ring .seg:nth-child(5) { animation-delay: 4.8s; }
@keyframes segment { 0%, 100% { opacity: 1; } 8% { opacity: .25; } 12% { opacity: 1; } 16% { opacity: .4; } 20% { opacity: 1; } }
.logo-gross { position: absolute; left: 9.03%; top: 26.54%; width: 81.94%; filter: drop-shadow(0 0 2px #0B0B0F) drop-shadow(0 0 3px #0B0B0F) drop-shadow(0 0 12px rgba(229, 0, 136, .95)) drop-shadow(0 0 28px rgba(229, 0, 136, .6)); animation: einschalten 1.4s linear 4.8s both, flackern 7s 7s infinite; }
@keyframes flackern {
  0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 44% { opacity: .7; } 45% { opacity: 1; }
  71% { opacity: 1; } 71.5% { opacity: .4; } 72.5% { opacity: 1; }
}
.horizont { position: absolute; left: 0; right: 0; height: 3px; }
.horizont.h1 { top: calc(var(--w) * .507 + var(--oben)); background: var(--cyan); box-shadow: 0 0 6px var(--cyan), 0 0 22px var(--cyan); }
.horizont.h2 { top: calc(var(--w) * .536 + var(--oben)); background: var(--pink); box-shadow: 0 0 6px var(--pink), 0 0 22px var(--pink); }
.horizont.h3 { top: calc(var(--w) * .566 + var(--oben)); background: var(--violett); box-shadow: 0 0 6px var(--violett), 0 0 20px var(--violett); }
.boden { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--w) * .596 + var(--oben)); overflow: hidden; border-top: 1px solid rgba(229, 0, 136, .5); }
.boden-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Claim ---------- */
.claim { text-align: center; padding-block: 34px 10px; }
.claim h1, .claim .h1 { font: 900 clamp(26px, 4.2vw, 46px)/1.1 var(--f-display); margin: 0; letter-spacing: .01em; text-wrap: balance; }
.claim .pink { color: var(--pink); }
.lll { color: var(--gelb); font-weight: 900; letter-spacing: .3em; font-size: clamp(13px, 1.6vw, 17px); margin-top: 10px; text-shadow: 0 0 12px rgba(244, 221, 0, .55); }

/* ---------- LIVE / nächster Auftritt ---------- */
.live { text-align: center; padding-block: 56px 64px; }
.live-wort { font: 900 clamp(110px, 22vw, 230px)/.9 var(--f-display); letter-spacing: .03em; margin: 0; color: var(--weiss);
  text-shadow: 0 0 6px #fff, 0 0 22px rgba(255, 255, 255, .55), 0 0 60px rgba(229, 0, 136, .55); animation: flackern 9s infinite 1.5s; }
.datum-box { display: inline-block; background: var(--pink); color: var(--weiss); font: 900 clamp(24px, 3.6vw, 40px)/1 var(--f-display); padding: 18px 30px; border-radius: 12px; margin-top: 26px; position: relative; font-variant-numeric: tabular-nums; }
.datum-box .birne { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 10px var(--gelb); animation: birne 1s steps(1) infinite; }
.datum-box .birne:nth-child(1) { left: -6px; top: -6px; } .datum-box .birne:nth-child(2) { right: -6px; top: -6px; animation-delay: .5s; }
.datum-box .birne:nth-child(3) { left: -6px; bottom: -6px; animation-delay: .5s; } .datum-box .birne:nth-child(4) { right: -6px; bottom: -6px; }
@keyframes birne { 50% { opacity: .2; box-shadow: none; } }
.live-ort { font: 900 clamp(22px, 3vw, 32px)/1.2 var(--f-display); margin: 22px 0 4px; }
.live-info { color: var(--grau); margin: 0; }
.countdown { color: var(--gelb); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; margin-top: 14px; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: 64px; border-top: 1px solid var(--anth); }
.abschnitt-kopf { text-align: center; margin-bottom: 34px; }
.eyebrow { color: var(--grau); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; font-size: 14px; margin: 0 0 8px; }
.abschnitt-kopf h2 { font: 900 clamp(28px, 5vw, 58px)/1.05 var(--f-display); margin: 0; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }

/* Programm-Tabelle (Kermes-Stil) */
.programm { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; border-top: 3px solid var(--pink); border-bottom: 3px solid var(--pink); }
.programm li { display: grid; grid-template-columns: 210px 1fr auto; gap: 8px 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--anth); }
.programm li:last-child { border-bottom: 0; }
.p-datum { font: 900 52px/1 var(--f-display); color: var(--pink); font-variant-numeric: tabular-nums; }
.p-tag { display: block; font: 900 14px/1 var(--f-display); letter-spacing: .32em; color: var(--grau); margin-top: 8px; }
.p-titel { font: 900 26px/1.2 var(--f-display); margin: 0; min-width: 0; }
.p-sub { color: var(--grau); margin: 4px 0 0; font-size: 17px; }
.p-zeit { font: 900 24px/1 var(--f-display); color: var(--gelb); white-space: nowrap; font-variant-numeric: tabular-nums; }
.programm .vergangen { opacity: .45; }
.programm-leer { text-align: center; color: var(--grau); }
@media (max-width: 640px) {
  .programm li { grid-template-columns: 1fr auto; }
  .p-datum { font-size: 40px; } .p-text { grid-column: 1 / -1; } .p-zeit { grid-row: 1; grid-column: 2; }
}

/* Band */
.band-text { max-width: 68ch; margin: 0 auto; text-align: center; }
.band-text p { color: #E9E9EE; }

/* Galerie: WordPress-Galerieblock und Vorschau-Platzhalter */
.galerie .wp-block-gallery, .galerie-raster { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 0; }
.galerie figure { margin: 0 !important; width: auto !important; }
.galerie img, .platzhalter { border-radius: 10px; border: 2px solid var(--anth); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: border-color .2s, box-shadow .2s; }
.galerie figure:hover img { border-color: var(--pink); box-shadow: 0 0 22px rgba(229, 0, 136, .55); }
.platzhalter { display: grid; place-items: center; color: var(--grau); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; background: repeating-linear-gradient(135deg, var(--anth) 0 2px, transparent 2px 14px); }

/* Booking */
.booking { text-align: center; }
.knopf { display: inline-block; background: var(--pink); color: var(--weiss); font: 900 18px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 18px 34px; border-radius: 10px; box-shadow: 0 0 0 2px var(--pink), 0 0 26px rgba(229, 0, 136, .6); transition: transform .15s, box-shadow .15s; }
.knopf:hover { color: var(--weiss); transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gelb), 0 0 34px rgba(229, 0, 136, .85); }
.kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-top: 26px; color: var(--grau); }
.kontakt b { color: var(--weiss); }

/* Inhalt normaler Seiten */
.inhalt { padding-block: 56px 80px; }
.inhalt h1 { font: 900 clamp(34px, 5vw, 56px)/1.1 var(--f-display); margin: 0 0 24px; text-wrap: balance; }
.inhalt .eintrag { max-width: 72ch; }
.inhalt .eintrag h2, .inhalt .eintrag h3 { font-family: var(--f-display); font-weight: 900; }
.inhalt .eintrag img { border-radius: 10px; }
.liste-eintrag { padding-block: 22px; border-bottom: 1px solid var(--anth); }
.liste-eintrag h2 { margin: 0 0 6px; font: 900 28px/1.2 var(--f-display); }

/* Fußzeile */
.fuss { border-top: 1px solid var(--anth); text-align: center; padding-block: 44px 0; }
.fuss-logo { width: min(320px, 70%); margin: 0 auto 16px; filter: drop-shadow(0 0 8px rgba(229, 0, 136, .7)); }
.fuss .nav-fuss ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 0; margin: 22px 0 10px; }
.fuss .nav-fuss a { color: var(--grau); font-size: 15px; }
.fuss small { color: var(--grau); display: block; padding-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Repertoire: Laufband + Genre-Slider ---------- */
.laufband { overflow: hidden; padding-block: 6px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband + .laufband { margin-top: 4px; }
.lb-spur { display: flex; width: max-content; gap: 0; animation: laufen 60s linear infinite; }
.laufband.rueck .lb-spur { animation-direction: reverse; animation-duration: 75s; }
.laufband:hover .lb-spur { animation-play-state: paused; }
.lb-spur span { font: 900 clamp(22px, 3.4vw, 38px)/1.3 var(--f-display); white-space: nowrap; padding-inline: 18px; color: var(--weiss); }
.lb-spur span::after { content: "•"; margin-left: 36px; color: var(--pink); text-shadow: 0 0 10px var(--pink); }
.laufband.rueck .lb-spur span { color: transparent; -webkit-text-stroke: 1.5px var(--cyan); text-shadow: 0 0 14px rgba(0, 217, 255, .45); }
.laufband.rueck .lb-spur span::after { color: var(--gelb); text-shadow: 0 0 10px var(--gelb); -webkit-text-stroke: 0; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Fließtext und Willkommen */
.fliesstext { max-width: 68ch; margin: 0 auto; text-align: center; }
.fliesstext p { color: #E9E9EE; margin: 0 0 1em; }
.fliesstext.links { text-align: left; margin: 0; }
.signatur { text-align: center; color: var(--grau); margin: 22px 0 0; }
.signatur span { display: block; font: 900 clamp(26px, 3.4vw, 34px)/1.2 var(--f-display); color: var(--weiss); margin-top: 4px; text-shadow: 0 0 14px rgba(229, 0, 136, .7); }
.rep-hinweis { text-align: center; color: var(--grau); font-size: 15px; margin-top: 4px; }
#repertoire .laufband:first-of-type { margin-bottom: 4px; }
#repertoire .fliesstext { margin-top: 34px; }

/* Bläser */
.brass { background: radial-gradient(ellipse at 50% 0%, rgba(229, 0, 136, .14), transparent 60%), var(--nacht); }
.brass-woerter { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 34px; margin: 0 0 30px; }
.brass-woerter span { font: 900 clamp(40px, 8.4vw, 104px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 2px var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); animation: einsatz 3.6s infinite; }
.brass-woerter span:nth-child(1) { --c: var(--orange); }
.brass-woerter span:nth-child(2) { --c: var(--pink); animation-delay: 1.2s; }
.brass-woerter span:nth-child(3) { --c: var(--gelb); animation-delay: 2.4s; }
@keyframes einsatz { 0%, 24%, 100% { color: transparent; } 4%, 14% { color: var(--c); text-shadow: 0 0 10px var(--c), 0 0 44px var(--c); } }

/* Programmbegleitung */
.leistungen { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; padding: 0; margin: 26px auto 0; max-width: 900px; }
.leistungen li { font-weight: 900; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.leistungen li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.skala { margin: 54px auto 0; max-width: 900px; }
.skala figcaption { text-align: center; color: var(--grau); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; font-size: 14px; margin-bottom: 26px; }
.skala ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.skala ol::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 36px; height: 4px; background: linear-gradient(90deg, var(--violett) 0 25%, var(--pink) 25% 50%, var(--orange) 50% 75%, var(--cyan) 75%); box-shadow: 0 0 12px rgba(229, 0, 136, .6); }
.skala li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; min-width: 0; padding-inline: 6px; }
.skala .punkt { height: 76px; display: grid; place-items: center; }
.skala .punkt::after { content: ""; display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--nacht); border: 4px solid var(--c); box-shadow: 0 0 16px var(--c), inset 0 0 12px var(--c); animation: puls 2.8s infinite; animation-delay: var(--v); }
.skala .s1 { --d: 22px; --c: var(--violett); --v: 0s; } .skala .s2 { --d: 36px; --c: var(--pink); --v: .3s; }
.skala .s3 { --d: 52px; --c: var(--orange); --v: .6s; } .skala .s4 { --d: 70px; --c: var(--cyan); --v: .9s; }
@keyframes puls { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }
.skala b { font: 900 19px/1.2 var(--f-display); }
.skala small { color: var(--grau); font-size: 14px; }
@media (max-width: 640px) {
  .skala ol { grid-template-columns: 1fr; gap: 6px; }
  .skala ol::before { left: 37px; right: auto; width: 4px; top: 38px; bottom: 38px; height: auto; background: linear-gradient(180deg, var(--violett) 0 25%, var(--pink) 25% 50%, var(--orange) 50% 75%, var(--cyan) 75%); }
  .skala li { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center; column-gap: 14px; padding: 0; }
  .skala .punkt { grid-row: 1 / 3; }
  .skala b { align-self: end; } .skala small { align-self: start; }
}

/* Band & Geschichte */
.besetzung { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 26px auto 0; max-width: 900px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
.besetzung i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.geschichte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: center; margin: 70px auto 0; max-width: 980px; }
.ja-klar { white-space: nowrap; font: 900 clamp(44px, 6.4vw, 78px)/1 var(--f-display); color: var(--gelb); margin: 0; text-align: center; transform: rotate(-5deg); text-shadow: 0 0 8px rgba(244, 221, 0, .8), 0 0 40px rgba(244, 221, 0, .45); animation: flackern 8s infinite 3s; }
.geschichte h3 { font: 900 30px/1.1 var(--f-display); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.zeitstrahl { list-style: none; margin: 40px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--pink); }
.zeitstrahl li { padding: 18px 18px 0 0; position: relative; }
.zeitstrahl li::before { content: ""; position: absolute; left: 0; top: -10px; width: 16px; height: 16px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 12px var(--gelb); }
.zeitstrahl b { display: block; font: 900 24px/1.2 var(--f-display); color: var(--pink); margin-bottom: 4px; }
.zeitstrahl span { color: var(--grau); font-size: 16px; }
@media (max-width: 760px) {
  .geschichte { grid-template-columns: 1fr; gap: 18px; }
  .zeitstrahl { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--pink); gap: 18px; }
  .zeitstrahl li { padding: 0 0 0 22px; }
  .zeitstrahl li::before { left: -10px; top: 6px; }
}

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 34px; align-items: start; max-width: 1000px; margin: 0 auto; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.feld input, .feld select, .feld textarea { font: 400 17px/1.4 var(--f-text); color: var(--weiss); background: #121218; border: 2px solid var(--anth); border-radius: 10px; padding: 12px 14px; width: 100%; color-scheme: dark; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(229, 0, 136, .25), 0 0 18px rgba(229, 0, 136, .35); }
.feld.check { flex-direction: row; align-items: flex-start; gap: 12px; }
.feld.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--pink); }
.feld.check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; line-height: 1.45; }
.feld .knopf { border: 0; cursor: pointer; justify-self: start; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px; font-weight: 700; margin: 0 0 16px; }
.meldung.ok { border: 2px solid var(--gelb); color: var(--gelb); }
.meldung.fehler { border: 2px solid var(--pink); color: #FFC2E3; }
.direkt { border-left: 3px solid var(--pink); padding-left: 24px; }
.direkt h3 { font: 900 22px/1.2 var(--f-display); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }
.direkt p { margin: 0 0 14px; }
.direkt small { display: block; color: var(--grau); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; }
.direkt a { font-weight: 900; font-size: 18px; overflow-wrap: anywhere; }
.direkt .direkt-hinweis { color: var(--grau); font-size: 15px; margin-top: 20px; }
@media (max-width: 760px) {
  .kontakt-raster { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; }
  .direkt { border-left: 0; border-top: 3px solid var(--pink); padding: 20px 0 0; }
}

/* Fußzeile: Slogan */
.fuss-slogan { font: 900 clamp(22px, 3vw, 30px)/1.2 var(--f-display); margin: 0 0 8px; text-wrap: balance; }

/* Instagram */
.insta-raster { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; align-items: center; max-width: 920px; margin: 0 auto; }
.insta-raster.ohne-feed { grid-template-columns: 1fr; text-align: center; }
.insta-post { position: relative; border-radius: 18px; padding: 10px; background: #121218; border: 3px solid var(--pink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 30px rgba(229, 0, 136, .55), inset 0 0 18px rgba(229, 0, 136, .25); transform: rotate(-2deg); transition: transform .25s; }
.insta-post:hover { transform: rotate(0) scale(1.02); }
.insta-post::before, .insta-post::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 12px var(--gelb); animation: birne 1s steps(1) infinite; }
.insta-post::before { left: -8px; top: -8px; } .insta-post::after { right: -8px; bottom: -8px; animation-delay: .5s; }
.insta-post img { border-radius: 10px; width: 100%; height: auto; }
.insta-post #sb_instagram, .insta-post .sbi { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.insta-post #sb_instagram #sbi_images { padding: 0 !important; }
.insta-handle { font: 900 clamp(26px, 3.6vw, 40px)/1.1 var(--f-display); margin: 0 0 12px; }
.insta-handle a { text-decoration: none; color: var(--weiss); text-shadow: 0 0 14px rgba(0, 217, 255, .8); }
.insta-handle a:hover { color: var(--cyan); }
.insta-text p { color: #E9E9EE; max-width: 46ch; }
.insta-raster.ohne-feed .insta-text p { margin-inline: auto; }
@media (max-width: 760px) { .insta-raster { grid-template-columns: 1fr; text-align: center; } .insta-post { max-width: 420px; margin: 0 auto; } .insta-text p { margin-inline: auto; } }

/* Besetzungswahl / Bühnenplan */
.besetzung-wahl { max-width: 900px; margin: 40px auto 0; }
.bw-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bw-tabs button { background: #121218; border: 2px solid var(--anth); border-radius: 12px; color: var(--weiss); padding: 14px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color .2s, box-shadow .2s, background .2s; }
.bw-tabs button b { font: 900 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.bw-tabs button small { color: var(--grau); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.bw-tabs button:hover { border-color: var(--pink); }
.bw-tabs button[aria-selected="true"] { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 22px rgba(229, 0, 136, .6); }
.bw-tabs button[aria-selected="true"] small { color: #FFE0F2; }
.bw-panel { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 30px; align-items: center; }
.bw-zahl { margin: 0; color: var(--grau); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.bw-zahl b { display: block; font: 900 84px/.95 var(--f-display); color: var(--gelb); letter-spacing: 0; text-shadow: 0 0 22px rgba(244, 221, 0, .55); font-variant-numeric: tabular-nums; }
.bw-name { font: 900 30px/1.1 var(--f-display); margin: 10px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.bw-text { color: #E9E9EE; margin: 0; }
.buehnenplan { --rand: var(--anth); position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 18px 18px 12px; border: 2px solid var(--anth); border-radius: 16px 16px 4px 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 42px), #0E0E14; }
.platz { grid-column: span 2; min-height: 70px; border-radius: 12px; border: 2px dashed #2C2C36; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #4A4A57; text-align: center; padding: 6px; position: relative; transition: all .35s ease; min-width: 0; }
.platz-name { font: 900 15px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; }
.platz-anzahl { font: 900 15px/1 var(--f-display); color: var(--nacht); background: var(--c, var(--pink)); border-radius: 999px; padding: 3px 9px; position: absolute; top: -10px; right: -8px; box-shadow: 0 0 10px var(--c, var(--pink)); }
.p-extra { border: 2px dashed color-mix(in srgb, var(--gelb) 55%, transparent); color: var(--gelb); }
.p-extra small { font-size: 12px; line-height: 1.25; color: var(--grau); }
.bw-hinweis { text-align: center; color: var(--grau); font-size: 15px; margin: 16px 0 0; }
.platz.an { border-style: solid; border-color: var(--c); color: var(--weiss); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); }
.g-rhythmus { --c: var(--cyan); } .g-blaeser { --c: var(--orange); } .g-gesang { --c: var(--gelb); }
.p-posaune { --c: var(--pink); } .p-saxophon { --c: var(--violett); }
.p-saengerin.an .platz-name::before { content: "★ "; color: var(--gelb); }
.buehnenkante { grid-column: 1 / -1; margin: 6px -18px -12px; padding: 8px; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--grau); border-top: 4px solid var(--pink); box-shadow: 0 -4px 16px rgba(229, 0, 136, .35); }
.platz.neu { animation: anschalten .6s ease; }
@keyframes anschalten { 0% { transform: scale(.85); opacity: .3; } 40% { opacity: 1; } 55% { opacity: .5; } 100% { transform: none; opacity: 1; } }
@media (max-width: 760px) {
  .bw-panel { grid-template-columns: 1fr; text-align: center; }
  .bw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-zahl b { font-size: 64px; }
  .buehnenplan { gap: 8px; padding: 14px 12px 10px; }
  .buehnenkante { margin-inline: -12px; }
  .platz { min-height: 58px; } .platz-name { font-size: 12px; letter-spacing: .03em; }
}

/* Handy (iPhone & Co.) */
@media (max-width: 640px) {
  :root { --w: 122vw; }                                   /* Bühne breiter: Sonne, Ring und Logo größer */
  .logo-gross { left: 13%; width: 74%; top: 28.6%; }
  .buehne { height: calc(var(--w) * .72 + var(--oben)); }
  .logo-gross { filter: drop-shadow(0 0 2px #0B0B0F) drop-shadow(0 0 2px #0B0B0F) drop-shadow(0 0 7px rgba(229, 0, 136, .9)); }
  .claim { padding-block: 22px 4px; }
  .live { padding-block: 34px 44px; }
  .abschnitt { padding-block: 48px; }
  .abschnitt-kopf { margin-bottom: 24px; }
  .galerie .wp-block-gallery, .galerie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .galerie img, .platzhalter { border-radius: 8px; }
  .fliesstext p { font-size: 17px; }
  .kopf-logo img { width: 140px; }
  .knopf { padding: 16px 26px; }
  .feld .knopf { width: 100%; text-align: center; }
}

/* Download-Seite */
.downloads .abschnitt-kopf h1 { font: 900 clamp(34px, 5vw, 58px)/1.05 var(--f-display); margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.dl-intro { text-align: center; color: var(--grau); max-width: 60ch; margin: 0 auto 24px; }
.dl-alles { display: table; margin: 0 auto 34px; }
.dl-alles small, .dl-knoepfe small { display: block; font: 700 12px/1.2 var(--f-text); letter-spacing: .08em; opacity: .75; margin-top: 4px; text-transform: none; }
.dl-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; border-top: 3px solid var(--pink); }
.dl-liste > li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--anth); }
.dl-bild { height: 110px; border-radius: 10px; display: grid; place-items: center; padding: 14px; border: 2px solid var(--anth); }
.dl-bild.dunkel { background: var(--nacht); }
.dl-bild.hell { background: #F4F4F6; }
.dl-bild img { max-width: 100%; max-height: 78px; width: auto; height: auto; object-fit: contain; }
.dl-bild.farben { display: flex; padding: 0; overflow: hidden; }
.dl-bild.farben span { flex: 1; height: 100%; }
.dl-text h2 { font: 900 22px/1.2 var(--f-display); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.dl-text p { margin: 0; color: var(--grau); font-size: 16px; }
.dl-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.dl-knoepfe a { display: block; text-align: center; text-decoration: none; font: 900 14px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); border: 2px solid var(--pink); border-radius: 10px; padding: 10px 16px; min-width: 170px; transition: background .15s, box-shadow .15s; }
.dl-knoepfe a:hover { background: var(--pink); box-shadow: 0 0 18px rgba(229, 0, 136, .6); color: var(--weiss); }
.dl-weitere { max-width: 920px; margin: 44px auto 0; }
.dl-weitere h2 { font: 900 26px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.dl-weitere .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--anth); }
.dl-weitere .wp-block-file__button { background: var(--pink) !important; color: var(--weiss) !important; border-radius: 10px !important; font-weight: 900; padding: 10px 16px !important; }
@media (max-width: 700px) {
  .dl-liste > li { grid-template-columns: 1fr; gap: 12px; }
  .dl-bild { height: 120px; }
  .dl-bild img { max-height: 88px; }
  .dl-knoepfe { flex-direction: row; flex-wrap: wrap; }
  .dl-knoepfe a { flex: 1 1 140px; min-width: 0; }
}