/* insaar.de — Musikportal von Vaikuntha. Grün, psychedelisch, indische Mythologie.
   Keine Fremdschriften. Der SoundCloud-Player startet beim Öffnen (offen für alle, 13.10.2026); YouTube erst nach Klick. */
:root {
  --nacht: #03110b;
  --wald: #072117;
  --moos: #0d3524;
  --jade: #17a673;
  --smaragd: #2fe09a;
  --limette: #b9f56b;
  --gold: #e6c466;
  --tinte: #e9f7ee;
  --sub: #9dc4ae;
  --linie: rgba(120, 230, 170, .18);
  --glas: rgba(10, 44, 30, .62);
  --rot: #ff8f7a;
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nacht); color: var(--tinte);
  font: 17px/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--smaragd); text-underline-offset: 3px; }
a:hover { color: var(--limette); }
button { font: inherit; color: var(--tinte); cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: .01em; }
h3 { font-size: 1.5rem; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--limette); outline-offset: 3px; border-radius: 6px; }

/* ---------- Himmel: langsam wandernde Lichter hinter allem ---------- */
.himmel { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, #0b3a26 0%, var(--wald) 38%, var(--nacht) 78%); }
.himmel i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; }
.himmel i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
  background: conic-gradient(from 0deg, #0f7a52, #b9f56b33, #0a5c6b, #2fe09a55, #0f7a52); animation: dreh 70s linear infinite; }
.himmel i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 30vh;
  background: conic-gradient(from 90deg, #e6c46622, #17a673, #063d3a, #b9f56b44, #e6c46622); animation: dreh 95s linear infinite reverse; }
.himmel i:nth-child(3) { width: 40vmax; height: 40vmax; left: 20vw; bottom: -24vmax;
  background: radial-gradient(circle, #2fe09a55, transparent 65%); animation: atem 14s ease-in-out infinite; }
.himmel::after { content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes atem { 50% { transform: scale(1.25); opacity: .35; } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(16px, 4vw, 44px); background: linear-gradient(#03110bee, #03110b99 70%, transparent);
  backdrop-filter: blur(8px); }
/* Marke: „in“ = Indien (Gold), „saar“ = Saarland (Smaragd) — Bene 11.10.2026 */
.marke { display: grid; line-height: 1; color: var(--tinte); text-decoration: none; }
.marke .wort { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .04em; }
.marke i, .wortmarke i { font-style: normal; color: var(--gold); }
.marke b, .wortmarke b { color: var(--smaragd); font-weight: 500; }
.marke small { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sub); margin-top: 3px; }
.wortmarke { display: inline-flex; gap: 2px; margin: 4px 0 10px; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; filter: drop-shadow(0 4px 22px #03110b); }
.wortmarke span { display: grid; justify-items: center; gap: 6px; }
.wortmarke small { font-family: var(--sans); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; padding: 5px 10px 0; border-top: 1px solid var(--linie); }
.wortmarke span:first-child small { border-color: #e6c46677; color: var(--gold); }
.wortmarke span:last-child small { border-color: #2fe09a77; color: var(--smaragd); }
.buehne h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); }

/* ---------- Mythologie ---------- */
.mythen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mythen a { display: grid; gap: 10px; align-content: start; padding: 26px 24px; text-decoration: none; color: var(--tinte); transition: .25s; position: relative; overflow: hidden; }
.mythen a::before { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, #e6c46622, transparent 70%); }
.mythen a:hover { transform: translateY(-4px); border-color: var(--gold); }
.mythen .zeichen { font-size: 2rem; line-height: 1.2; color: var(--gold); text-shadow: 0 0 24px #e6c46677; }
.mythen p { color: var(--sub); font-size: .98rem; }
.mythen em { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--smaragd); }
.saar { margin-top: 18px; display: grid; grid-template-columns: minmax(200px, 1fr) 2.2fr; gap: 24px; align-items: center; padding: clamp(22px, 3.4vw, 36px);
  background: linear-gradient(110deg, rgba(47, 224, 154, .2), var(--glas) 60%); }
.saar .kicker { color: var(--smaragd); margin-bottom: 8px; }
.saar > p { color: #cfe8da; }
@media (max-width: 760px) { .saar { grid-template-columns: 1fr; } }
.kopf nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.kopf nav a { color: var(--sub); text-decoration: none; font-size: .95rem; }
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a.gold { color: var(--gold); }
.sprache { display: flex; border: 1px solid var(--linie); border-radius: 99px; overflow: hidden; }
.sprache button { background: none; border: 0; padding: 4px 11px; font-size: .8rem; color: var(--sub); }
.sprache button[aria-pressed=true] { background: var(--moos); color: var(--limette); }
.wer { font-size: .85rem; color: var(--sub); }
.wer button { background: none; border: 0; color: var(--smaragd); padding: 0 0 0 6px; text-decoration: underline; font-size: inherit; }
@media (max-width: 1020px) { .kopf nav a.fern { display: none; } }

/* ---------- Bühne — kompakt, damit der Automat gleich im Bild steht (Bene 20.10.2026) ---------- */
.buehne { position: relative; min-height: 0; display: grid; place-items: center; text-align: center;
  padding: 18px 16px 26px; isolation: isolate; overflow: hidden; }
.mandala { position: absolute; inset: 50% auto auto 50%; width: min(90vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
  z-index: -2; opacity: .42; animation: farbe 26s ease-in-out infinite alternate; }
.mandala svg { width: 100%; height: 100%; overflow: visible; }
.mandala g.ring { transform-origin: 500px 500px; animation: dreh var(--t, 120s) linear infinite; }
.mandala g.ring.rueck { animation-direction: reverse; }
.mandala .puls { transform-origin: 500px 500px; animation: puls 7s ease-in-out infinite; }
body.spielt .mandala .puls { animation-duration: 1.9s; }
@keyframes farbe { from { filter: hue-rotate(-22deg) saturate(1.05); } to { filter: hue-rotate(34deg) saturate(1.35); } }
@keyframes puls { 50% { transform: scale(1.045); } }
.buehne .innen { max-width: 780px; }
.kicker { font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: var(--limette); }
.om { font-family: var(--serif); font-size: 1.7rem; color: var(--gold); line-height: 1; margin: 2px 0 0; text-shadow: 0 0 28px #e6c46688; }
.buehne .wortmarke { font-size: clamp(1.5rem, 4.2vw, 2.4rem); margin: 2px 0 6px; }
.buehne .kicker { font-size: .72rem; }
h1 { font-size: clamp(3rem, 10.5vw, 7.2rem); letter-spacing: -.01em;
  color: #fff; padding-bottom: .08em; text-shadow: 0 2px 4px #03110b, 0 6px 40px #03110b; }
/* Lesbarkeit (Bene 11.10.2026: „schlecht lesbar — was ist mit Weiß“): Schrift weiß, das Mandala tritt zurück,
   und hinter dem Text liegt ein dunkler Schleier — vorher liefen die Linien des Yantra mitten durch die Buchstaben. */
.buehne .innen { position: relative; }
.buehne .innen::before { content: ""; position: absolute; inset: -12% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, #03110bee 0%, #03110bcc 55%, transparent 100%); }
.buehne .unter, .buehne .zeile-klein { color: #fff; }
.buehne .unter { font-family: var(--serif); font-size: clamp(1.05rem, 2.1vw, 1.3rem); color: #fff; margin: 8px auto 0; max-width: 32em;
  text-shadow: 0 2px 18px #03110b; }
.buehne .zeile-klein { margin-top: 10px; font-size: .84rem; }
.knoepfe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 99px; border: 1px solid var(--linie);
  background: var(--glas); backdrop-filter: blur(10px); text-decoration: none; color: var(--tinte); font-weight: 600; transition: .25s; }
.knopf:hover { border-color: var(--smaragd); color: var(--tinte); transform: translateY(-2px); }
.knopf.haupt { background: linear-gradient(120deg, var(--jade), #0c7a55 55%, #2c8f2c); border-color: #6ff0b7aa;
  box-shadow: 0 0 0 1px #2fe09a33, 0 14px 50px -12px #2fe09a99; }
.knopf.haupt:hover { box-shadow: 0 0 0 1px #b9f56b88, 0 18px 60px -10px #b9f56baa; }
.knopf.gold { border-color: #e6c46688; color: var(--gold); }
.knopf[disabled] { opacity: .55; cursor: wait; }
.zeile-klein { margin-top: 18px; font-size: .9rem; color: var(--sub); }

/* ---------- Abschnitte ---------- */
section { padding: clamp(56px, 9vw, 110px) clamp(16px, 4vw, 44px); scroll-margin-top: 72px; }   /* unter dem klebenden Kopf landen, nicht darunter verdeckt */
.breite { max-width: 1180px; margin: 0 auto; }
.kopfzeile { display: grid; gap: 10px; margin-bottom: 34px; max-width: 46em; }
.kopfzeile .kicker { color: var(--gold); }
.kopfzeile p { color: var(--sub); font-size: 1.08rem; }
.karte { background: var(--glas); border: 1px solid var(--linie); border-radius: var(--r); backdrop-filter: blur(14px); }

/* ---------- Mitmachen (Tor nur noch fürs Abstimmen und Einreichen) ---------- */
.tor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tor.eins { grid-template-columns: minmax(0, 620px); }
.tor > * { padding: clamp(22px, 3.4vw, 38px); display: grid; gap: 14px; align-content: start; }
.tor p { color: var(--sub); }
.feld { display: grid; gap: 6px; font-size: .9rem; color: var(--sub); }
.feld input { font: inherit; color: var(--tinte); background: #031a11; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; width: 100%; }
.feld input:focus { border-color: var(--smaragd); outline: none; }
.meldung { font-size: .92rem; color: var(--limette); min-height: 1.4em; }
.meldung.fehler { color: var(--rot); }
@media (max-width: 820px) { .tor { grid-template-columns: 1fr; } }

/* ---------- Zahlen ---------- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.zahl { padding: 22px 20px; position: relative; overflow: hidden; }
.zahl::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #2fe09a33, transparent 70%); }
.zahl b { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 500; line-height: 1; color: var(--smaragd);
  font-variant-numeric: tabular-nums; }
.zahl.gold b { color: var(--gold); }
.zahl span { color: var(--sub); font-size: .92rem; }
.balken { margin-top: 26px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.balken h3 { margin-bottom: 6px; }
.balken .z { display: grid; grid-template-columns: minmax(90px, 220px) 1fr 2.4em; gap: 12px; align-items: center; font-size: .95rem; }
.balken .z span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken .z i { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--jade), var(--limette)); min-width: 6px;
  box-shadow: 0 0 18px -2px #2fe09a99; transform-origin: left; animation: wachs 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.balken .z em { font-style: normal; color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes wachs { from { transform: scaleX(0); } }
.leer { color: var(--sub); font-style: italic; }

/* ---------- Lieder (Liste, Einreichungen) ---------- */
.lieder { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.lied { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; }
.lied .bild { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--moos); display: grid; place-items: center; font-size: 1.5rem; color: var(--smaragd); }
.lied .t { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.lied .k { color: var(--sub); font-size: .9rem; }
.lied .art { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lied .rechts { display: flex; align-items: center; gap: 12px; }
.rund { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: #06281b; display: grid; place-items: center; font-size: 1.05rem; transition: .2s; }
.rund:hover { border-color: var(--smaragd); background: var(--moos); }
.stimme { display: grid; gap: 5px; min-width: 150px; }
.stimme .leiste { height: 8px; border-radius: 99px; background: #052015; overflow: hidden; }
.stimme .leiste i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--jade), var(--limette), var(--gold)); transition: width .6s; }
.stimme small { color: var(--sub); font-size: .8rem; }
.waehl { padding: 9px 16px; border-radius: 99px; border: 1px solid #b9f56b77; background: #0b3220; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.waehl:hover { background: var(--moos); border-color: var(--limette); }
.waehl[aria-pressed=true] { background: var(--limette); color: #062012; border-color: var(--limette); cursor: default; }
@media (max-width: 700px) { .lied { grid-template-columns: 52px 1fr; } .lied .bild { width: 52px; height: 52px; } .lied .rechts { grid-column: 1 / -1; justify-content: space-between; } }
.einreichen { padding: clamp(20px, 3vw, 32px); margin-bottom: 22px; display: grid; gap: 14px; }
.einreichen .reihe { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 900px) { .einreichen .reihe { grid-template-columns: 1fr; } }
.einbettung { grid-column: 1 / -1; }
.einbettung iframe { width: 100%; border: 0; border-radius: 14px; display: block; }
.zwischen { margin: 34px 0 14px; color: var(--gold); }

/* ---------- Jukebox: Konsole oben (Player, Suche, Facetten), Liste darunter — Bene 14.10.2026: „Musik im Vordergrund“ ---------- */
#jukebox { padding-top: 0; }
#konsole-anker { height: 1px; }
.konsole { padding: clamp(14px, 2.2vw, 22px); display: grid; gap: 14px; z-index: 20;
  background: linear-gradient(160deg, rgba(23, 166, 115, .22), var(--glas) 40%); box-shadow: 0 24px 80px -30px #000; }
.konsole > *, .konsole .oben > * { min-width: 0; }   /* sonst drückt ein langer Titel in „Läuft gerade“ die Konsole breiter als das Handy */
.konsole .oben { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.player { min-height: 166px; border-radius: 14px; overflow: hidden; background: #041a11; }
.player iframe { width: 100%; height: 166px; border: 0; display: block; }
.player .still { height: 100%; min-height: 166px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; text-align: center; color: var(--sub); font-size: .92rem;
  background: radial-gradient(circle at 50% 40%, #0d3524, #041a11 70%); }
.player .still span { font-size: 2.2rem; color: var(--gold); line-height: 1; text-shadow: 0 0 24px #e6c46688; }
.seite { display: grid; gap: 10px; align-content: start; min-width: 0; overflow: hidden; }
.jetzt { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.jetzt .label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--limette); display: flex; align-items: center; gap: 8px; }
.jetzt b { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jetzt i { font-style: normal; color: var(--sub); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq b { width: 3px; height: 100%; background: var(--limette); border-radius: 2px; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq b:nth-child(2) { animation-delay: .25s; }
.eq b:nth-child(3) { animation-delay: .5s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.knoepfe-klein { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knoepfe-klein .knopf { padding: 10px 18px; font-size: .95rem; }
.rund.klein { width: 38px; height: 38px; font-size: 1rem; }
.naechstes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--sub); }
.naechstes b { color: var(--tinte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.naechstes i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24%; }
.naechstes button { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--linie); background: #06281b; font-size: .82rem; }
.naechstes button:hover { border-color: var(--smaragd); background: var(--moos); }
.naechstes .leer { font-size: .86rem; }

/* Suche + Facetten: Chips mit Treffer-Zahlen, die sich mit jeder Wahl neu zählen */
.suche { display: grid; gap: 10px; }
.suchzeile { display: flex; gap: 10px; align-items: center; }
.suchfeld { flex: 1; display: flex; align-items: center; gap: 10px; background: #031a11; border: 1px solid var(--linie); border-radius: 99px; padding: 4px 8px 4px 16px; transition: .2s; }
.suchfeld:focus-within { border-color: var(--smaragd); box-shadow: 0 0 0 4px #2fe09a22; }
.suchfeld .lupe { color: var(--sub); font-size: 1.3rem; line-height: 1; }
.suchfeld input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--tinte); background: none; border: 0; padding: 9px 0; outline: none; }
.suchfeld input::-webkit-search-cancel-button { display: none; }
.suchfeld .leeren { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--moos); color: var(--tinte); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--linie); background: #06281b; color: var(--tinte);
  font: inherit; font-size: .86rem; line-height: 1.25; text-decoration: none; cursor: pointer; transition: .18s; white-space: nowrap; }
.chip:hover { border-color: var(--smaragd); background: var(--moos); color: var(--tinte); }
.chip[aria-pressed=true] { background: var(--limette); color: #062012; border-color: var(--limette); font-weight: 600; }
.chip small { font-size: .74em; opacity: .7; font-variant-numeric: tabular-nums; }
.chip.aus { opacity: .35; pointer-events: none; }
.chip.aktiv { background: var(--moos); border-color: var(--smaragd); }
.chip.aktiv b { color: var(--limette); font-weight: 700; }
.chip.reset { background: none; border-style: dashed; color: var(--sub); }
.chip.gold { border-color: #e6c46688; color: var(--gold); }
.chip.gold[aria-pressed=true] { background: var(--gold); color: #1a1200; }
.chip.mini { padding: 4px 10px; font-size: .78rem; }
.chip.umschalter { display: none; }
.chip.umschalter b { background: var(--limette); color: #062012; border-radius: 99px; padding: 0 7px; font-size: .74em; }
.chip.gchip { display: none; }   /* Gruppen-Chip „Genre: psy ▾“ — nur in der kompakten Leiste */
.chip.gchip b { color: var(--limette); font-weight: 600; }
.chip.gchip.aktiv { border-color: var(--smaragd); background: var(--moos); }
.facetten { display: grid; gap: 8px; }
.gruppe { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.gname { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); padding-top: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zahl-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--sub); font-size: .88rem; font-variant-numeric: tabular-nums; }
.zahl-zeile .n { margin-right: 6px; }
.mitte { text-align: center; margin-top: 18px; }

/* Festgeklebt: die Konsole bleibt beim Scrollen oben. Die Facetten verschwinden nicht mehr (Bene 20.10.2026: „nicht klar, wie man
   da wieder hinkommt“), sondern schrumpfen zu einer Leiste aus Gruppen-Chips; jeder Chip klappt seine Auswahl als Menü auf.
   Der Knopf „Alle Filter“ zeigt wieder das volle Feld. */
@media (min-width: 900px) and (min-height: 700px) {
  .konsole { position: sticky; top: 62px; }
  .konsole.fest { border-color: #2fe09a66; background: linear-gradient(160deg, rgba(23, 166, 115, .3), #041a11f4 40%); box-shadow: 0 30px 80px -20px #000, 0 0 60px -20px #2fe09a66; }
  .konsole.fest .chip.umschalter { display: inline-flex; }
  .konsole.fest .naechstes { display: none; }
  .konsole.fest:not(.offen) .facetten { display: flex; flex-wrap: wrap; gap: 6px; }
  .konsole.fest:not(.offen) .gruppe { display: block; position: relative; }
  .konsole.fest:not(.offen) .gname { display: none; }
  .konsole.fest:not(.offen) .chip.gchip { display: inline-flex; }
  .konsole.fest:not(.offen) .chips { display: none; }
  .konsole.fest:not(.offen) .gruppe.auf .chip.gchip { border-color: var(--limette); }
  .konsole.fest:not(.offen) .gruppe.auf .chips { display: flex; flex-wrap: wrap; gap: 6px; position: absolute; top: calc(100% + 6px); left: 0; z-index: 6;
    min-width: 260px; max-width: 520px; max-height: 50vh; overflow: auto; padding: 10px; border-radius: 14px;
    background: #041a11f8; border: 1px solid #2fe09a66; box-shadow: 0 20px 50px -10px #000; animation: auftauchen .18s ease both; }
}
@media (max-width: 899px) {
  .konsole .oben { grid-template-columns: minmax(0, 1fr); }
  .gruppe { grid-template-columns: 1fr; gap: 4px; }
  .gname { padding-top: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
}

/* ---------- Die Liste: vier Stufen — je weniger Treffer, desto mehr je Titel ---------- */
#liste-alle { margin-top: 16px; }
#liste-alle .lied { animation: auftauchen .3s ease both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } }
.lied.spielt { border-color: var(--limette); background: linear-gradient(110deg, rgba(185, 245, 107, .16), var(--glas) 60%); }
.lied.spielt .t::before { content: "▶ "; color: var(--limette); font-size: .8em; }
body.spielt .lied.spielt .t::before { content: "♫ "; }
/* dicht: eine Zeile je Titel */
.lieder.dicht { gap: 4px; }
.lied.dicht { grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; padding: 6px 10px 6px 8px; border-radius: 12px; }
.lied.dicht .bild { width: 40px; height: 40px; border-radius: 9px; font-size: 1rem; }
.lied.dicht .t { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lied.dicht .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.lied.dicht .rund { width: 36px; height: 36px; font-size: .9rem; }
@media (max-width: 700px) {
  .lied.dicht { grid-template-columns: 40px 1fr auto; row-gap: 0; }
  .lied.dicht .bild { grid-row: 1 / 3; }
  .lied.dicht .t { grid-column: 2; grid-row: 1; }
  .lied.dicht .k { grid-column: 2; grid-row: 2; }
  .lied.dicht .rechts { grid-column: 3; grid-row: 1 / 3; }
}
/* weit: Karten mit großem Bild, Schlagworten und Links */
.lieder.weit { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.lied.weit { grid-template-columns: 1fr; gap: 12px; padding: 12px; align-content: start; }
.bildrahmen { border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--moos); }
.bildrahmen .bild { width: 100%; height: 100%; border-radius: 0; font-size: 3rem; }
.lied.weit .meta, .lied.gross .meta { display: grid; gap: 6px; align-content: start; min-width: 0; }
.lied.weit .t, .lied.gross .t { font-size: 1.45rem; }
.lied .kname { background: none; border: 0; padding: 0; color: var(--smaragd); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.lied .kname:hover { color: var(--limette); }
.lied .tags, .lied .links { display: flex; flex-wrap: wrap; gap: 6px; }
.lied .tags:empty { display: none; }
.lied.weit .rechts { justify-content: flex-end; }
/* groß: ein bis drei Treffer, alles auf einen Blick */
.lieder.gross { gap: 16px; }
.lied.gross { grid-template-columns: minmax(160px, 240px) 1fr auto; gap: 22px; padding: 16px; }
.lied.gross .t { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.lied.gross .rund { width: 64px; height: 64px; font-size: 1.4rem; background: linear-gradient(120deg, var(--jade), #0c7a55); border-color: #6ff0b7aa; }
@media (max-width: 700px) {
  .lied.gross { grid-template-columns: 110px 1fr; }
  .lied.gross .rechts { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- Einarmiger Bandit: Gehäuse, Lichterkranz, Anzeige, Genre-Chips, drei Walzen, Hebel, Abzeichen (Bene 14.10.2026) ---------- */
#automat { padding-top: 0; padding-bottom: clamp(24px, 4vw, 44px); }
.bandit { position: relative; max-width: 760px; margin: 0 auto; padding: 34px 26px 22px; border-radius: 34px 34px 26px 26px; isolation: isolate;
  background: linear-gradient(180deg, #0f3d2a, #072117 55%, #041a11); border: 2px solid #e6c46688;
  box-shadow: 0 40px 120px -30px #000, inset 0 0 0 6px #03110b, inset 0 0 0 7px #e6c46633, 0 0 80px -30px #2fe09a99;
  display: grid; grid-template-columns: 1fr 86px; grid-template-areas: "schild schild" "anzeige anzeige" "genres genres" "fenster hebel" "ergebnis hebel" "abzeichen abzeichen"; gap: 14px 18px; }
.bandit > * { min-width: 0; }
.bandit.zieht { animation: ruck .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes ruck { 20% { transform: translateY(6px) rotate(-.4deg); } 60% { transform: translateY(-3px) rotate(.3deg); } }
.bandit.dreht { animation: zittern .12s linear infinite; }
@keyframes zittern { 50% { transform: translate(.6px, -.6px); } }
/* Lichterkranz: Glühbirnen als Punktmuster am Rand, die im Takt weiterlaufen — beim Drehen schneller, beim Jackpot wild */
.lichter { position: absolute; inset: 10px; border-radius: 28px 28px 20px 20px; pointer-events: none; z-index: 1; opacity: .9;
  --b: radial-gradient(circle, #e6c466 0 3px, #e6c46644 4px, transparent 5px);
  background: var(--b) 0 0 / 28px 14px repeat-x, var(--b) 0 100% / 28px 14px repeat-x, var(--b) 0 0 / 14px 28px repeat-y, var(--b) 100% 0 / 14px 28px repeat-y;
  animation: lauf 1.1s steps(2) infinite; }
@keyframes lauf { to { background-position: 28px 0, -28px 100%, 0 28px, 100% -28px; } }
.bandit.dreht .lichter { animation-duration: .3s; }
.bandit.jackpot .lichter { --b: radial-gradient(circle, #b9f56b 0 3px, #b9f56b66 4px, transparent 5px); animation-duration: .18s; }
.schild { grid-area: schild; display: grid; justify-items: center; gap: 2px; margin: -6px 0 2px; }
.schild .s1 { font-family: var(--serif); font-size: 2.2rem; letter-spacing: .06em; text-shadow: 0 0 30px #e6c46688; }
.schild .s1 i { font-style: normal; color: var(--gold); } .schild .s1 b { color: var(--smaragd); font-weight: 500; }
.schild .s2 { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--limette); }
.anzeige { grid-area: anzeige; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: #02120a; border: 1px solid #2fe09a44; box-shadow: inset 0 0 30px #2fe09a22; font-variant-numeric: tabular-nums; }
.anzeige span { display: grid; gap: 1px; text-align: center; }
.anzeige small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
.anzeige b { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--limette); text-shadow: 0 0 14px #b9f56b88; line-height: 1.1; }
.anzeige b i { font-style: normal; font-size: .7em; color: var(--sub); }
.genres { grid-area: genres; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.genres .chip[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: #1a1200; }
.fenster { grid-area: fenster; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 18px;
  background: linear-gradient(180deg, #000a, #0004 20%, #0004 80%, #000a), #0a2a1c; border: 2px solid #e6c46655; box-shadow: inset 0 0 40px #000c; }
.walze { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #06281b; box-shadow: inset 0 10px 24px #000a, inset 0 -10px 24px #000a; }
.walze .band { display: grid; will-change: transform; }
.walze i { display: block; aspect-ratio: 1; width: 100%; background: var(--moos) center / cover no-repeat; position: relative; }
.walze i em { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-style: normal; font-size: .68rem; line-height: 1.2; color: #fff; background: linear-gradient(transparent, #000c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandit.dreht .walze .band { filter: blur(1.5px) brightness(1.1); }
.walze.steht { animation: stopp .5s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 0 0 2px var(--limette), inset 0 10px 24px #000a, inset 0 -10px 24px #000a; }
@keyframes stopp { 30% { transform: translateY(4px); } }
.fenster .linie { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: #e6c466aa; box-shadow: 0 0 12px #e6c466; pointer-events: none; opacity: .5; }
.bandit.jackpot .fenster { border-color: var(--limette); box-shadow: inset 0 0 40px #000c, 0 0 50px -10px #b9f56bcc; animation: glueh 1.2s ease-in-out 3; }
.bandit.doppel .fenster { border-color: var(--smaragd); box-shadow: inset 0 0 40px #000c, 0 0 40px -10px #2fe09acc; }
@keyframes glueh { 50% { box-shadow: inset 0 0 40px #000c, 0 0 90px -5px #b9f56b; } }
.ergebnis { grid-area: ergebnis; min-height: 3.2em; display: grid; gap: 2px; align-content: center; text-align: center; padding: 8px 12px; border-radius: 12px; background: #02120a88; }
.ergebnis .ausgang { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ergebnis .ausgang b { color: var(--limette); }
.bandit.jackpot .ergebnis .ausgang { font-size: 1.1rem; color: var(--limette); text-shadow: 0 0 20px #b9f56b; animation: puls 1s ease-in-out 3; }
.ergebnis .lied-name b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; display: block; line-height: 1.15; }
.ergebnis .lied-name i { font-style: normal; color: var(--sub); font-size: .9rem; }
.ergebnis .extra { font-size: .82rem; color: var(--limette); }
.ergebnis .leer { font-size: .9rem; }
/* Hebel: Stange mit Kugel, die beim Ziehen nach unten kippt */
.hebel { grid-area: hebel; display: grid; align-items: start; justify-items: center; padding-top: 10px; }
.hebel button { position: relative; width: 70px; height: 210px; background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; align-content: start; }
.hebel .stange { width: 12px; height: 150px; border-radius: 6px; background: linear-gradient(90deg, #8a8f8c, #e8ecea 45%, #6f7472); box-shadow: 0 6px 16px #000a; transform-origin: 50% 100%; transition: transform .25s; }
.hebel .kugel { position: absolute; top: -22px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; transition: transform .25s;
  background: radial-gradient(circle at 35% 30%, #ff9c8c, #d8402a 55%, #7a1608); box-shadow: 0 8px 20px #000a, inset -4px -6px 12px #0008; }
.hebel .wort { position: absolute; bottom: 0; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sub); }
.hebel button::after { content: ""; position: absolute; bottom: 24px; width: 34px; height: 22px; border-radius: 8px; background: linear-gradient(#2a3330, #0e1412); box-shadow: 0 4px 10px #000a; }
.hebel button:hover .kugel { transform: scale(1.08); }
.bandit.zieht .hebel .stange { transform: scaleY(.55); }
.bandit.zieht .hebel .kugel { transform: translateY(68px); }
.hebel button:focus-visible { outline: 2px solid var(--limette); outline-offset: 6px; border-radius: 40px; }
.abzeichen { grid-area: abzeichen; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.abzeichen .ab { display: grid; justify-items: center; gap: 2px; width: 84px; padding: 8px 4px; border-radius: 12px; background: #02120a88; border: 1px solid var(--linie); opacity: .4; filter: grayscale(1); transition: .3s; }
.abzeichen .ab i { font-style: normal; font-size: 1.4rem; line-height: 1; }
.abzeichen .ab small { font-size: .62rem; text-align: center; color: var(--sub); line-height: 1.2; }
.abzeichen .ab.hat { opacity: 1; filter: none; border-color: #e6c46688; box-shadow: 0 0 18px -6px #e6c466; }
/* Konfetti: fällt aus dem Schild, nur bei Doppel und Jackpot */
.konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; border-radius: inherit; }
.konfetti b { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: fallen 2s ease-in both; }
@keyframes fallen { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(560px) rotate(720deg); } }
@media (max-width: 700px) {
  .bandit { padding: 26px 14px 16px; grid-template-columns: 1fr; grid-template-areas: "schild" "anzeige" "genres" "fenster" "hebel" "ergebnis" "abzeichen"; }
  .anzeige { grid-template-columns: repeat(2, 1fr); }
  .genres { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; }
  .fenster { gap: 6px; padding: 8px; }
  .hebel { padding-top: 0; }
  .hebel button { width: 100%; height: 56px; border-radius: 99px; background: linear-gradient(120deg, #d8402a, #7a1608); box-shadow: 0 10px 30px -8px #d8402a; align-content: center; }
  .hebel .stange, .hebel button::after { display: none; }
  .hebel .kugel { position: static; margin: 0; width: 26px; height: 26px; display: inline-block; vertical-align: middle; }
  .hebel .wort { position: static; color: #fff; font-size: .9rem; font-weight: 700; margin-left: 10px; }
  .hebel button { grid-auto-flow: column; justify-content: center; gap: 0; }
  .bandit.zieht .hebel .kugel { transform: none; }
  .bandit.zieht .hebel button { transform: scale(.96); }
}

/* ---------- Künstler ---------- */
.kuenstler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.kuenstler a { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px 12px; text-decoration: none; color: var(--tinte); transition: .25s; }
.kuenstler a:hover { transform: translateY(-4px); border-color: var(--smaragd); }
.kuenstler .kopfbild { width: 104px; height: 104px; border-radius: 50%; padding: 3px;
  background-image: conic-gradient(var(--jade), var(--limette), var(--gold), var(--jade)); }
.kuenstler .kopfbild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.kuenstler .kopfbild span { width: 100%; height: 100%; border-radius: 50%; background: var(--wald); display: grid; place-items: center; font-family: var(--serif); font-size: 2.2rem; color: var(--smaragd); }
.kuenstler strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.15; }
.kuenstler small { color: var(--sub); }

/* ---------- Vaikuntha ---------- */
.heim { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; padding: clamp(24px, 4vw, 50px); align-items: center;
  background: linear-gradient(140deg, rgba(47, 224, 154, .16), var(--glas) 50%, rgba(230, 196, 102, .12)); }
.heim p { color: #cfe8da; margin-top: 14px; }
.wege { display: grid; gap: 10px; }
.wege a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--linie); background: #04190f99; text-decoration: none; color: var(--tinte); transition: .2s; }
.wege a:hover { border-color: var(--gold); transform: translateX(4px); }
.wege a span { color: var(--sub); font-size: .88rem; display: block; }
@media (max-width: 820px) { .heim { grid-template-columns: 1fr; } }
footer { padding: 30px clamp(16px, 4vw, 44px) 60px; color: var(--sub); font-size: .88rem; text-align: center; }
footer a { color: var(--sub); }

/* Autoplay wartet auf eine Geste: der Hauptknopf atmet, bis die Musik läuft */
body.wartet #spiel { animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { box-shadow: 0 0 0 10px #b9f56b33, 0 18px 60px -10px #b9f56baa; transform: translateY(-2px) scale(1.04); } }

/* ---------- Spenden-Band unter der Liste + Aufruf an Künstler:innen (Bene 20.10.2026) ---------- */
.geben-band { margin-top: 26px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center;
  background: linear-gradient(110deg, rgba(230, 196, 102, .16), var(--glas) 60%); border-color: #e6c46655; }
.geben-band .kicker { color: var(--gold); font-size: .72rem; }
.geben-band h3 { font-size: 1.3rem; margin-top: 4px; }
.geben-band p:not(.kicker) { color: var(--sub); font-size: .92rem; margin-top: 4px; }
.geben-band .chips { justify-content: flex-end; }
.geben-band .chip.gold { padding: 9px 15px; font-size: .9rem; }
@media (max-width: 760px) { .geben-band { grid-template-columns: 1fr; } .geben-band .chips { justify-content: flex-start; } }
.kuenstler-ruf { margin-top: 26px; padding: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: auto 1fr auto; gap: 18px 24px; align-items: center;
  background: linear-gradient(110deg, rgba(47, 224, 154, .14), var(--glas) 60%); }
.kuenstler-ruf .zeichen { font-size: 2.2rem; line-height: 1; color: var(--gold); text-shadow: 0 0 24px #e6c46677; }
.kuenstler-ruf h3 { font-size: 1.4rem; }
.kuenstler-ruf p { color: var(--sub); margin-top: 6px; }
@media (max-width: 820px) { .kuenstler-ruf { grid-template-columns: auto 1fr; } .kuenstler-ruf .knopf { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Unterstützen: still, am Ende ---------- */
section.leise { padding-top: clamp(30px, 5vw, 60px); }
section.leise .kopfzeile .kicker { color: var(--sub); }
section.leise h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
section.leise .kopfzeile p { font-size: 1rem; }
.projekte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.projekt { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; text-decoration: none; color: var(--tinte); transition: .2s; }
.projekt:hover { border-color: #e6c46699; transform: translateY(-2px); color: var(--tinte); }
.projekt .zeichen { font-size: 1.5rem; line-height: 1; color: var(--gold); }
.projekt strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.15; }
.projekt span:not(.zeichen) { display: block; color: var(--sub); font-size: .86rem; margin-top: 3px; }
.projekt em { font-style: normal; color: var(--sub); }
section.leise .zeile-klein { margin-top: 16px; }
section.leise .zeile-klein a { color: var(--sub); }

.toast { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 50; padding: 12px 22px; border-radius: 22px; width: max-content; background: #0b3220; border: 1px solid var(--limette); color: var(--tinte); box-shadow: 0 12px 40px #000a; max-width: calc(100vw - 30px); text-align: center; }

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