/* jam.css - SID JAM (jam.html, en/jam.html). Nur Klassen, keine Inline-Stile (CSP).
   Baut auf styles.css auf (Kopf, Fusszeile, Knoepfe, Farben). */
:root{--jam-blau:#352879;--jam-hellblau:#6c5eb5;--jam-lila:#a99cff;--jam-schirm:#120d36;--jam-gelb:#ffd23f;--jam-gruen:#7dff43;--jam-pink:#ff5fa2;--jam-grad:linear-gradient(100deg,#a99cff 0%,#6c9eff 40%,#2ce8e8 100%)}
.jam [hidden]{display:none!important}
.jam{max-width:var(--max);margin:auto;padding:0 24px 40px}
.jam a:not(.button){color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.jam h2{margin:0 0 14px;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.15;letter-spacing:-.03em}
.jam h3{margin:22px 0 10px;color:#c9cfdb;font:800 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.jam-klein{margin:8px 0 0;color:#8b93a3;font-size:.86rem;line-height:1.5}
.jam-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 10px;color:var(--jam-lila);font:800 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.jam-label-klein{color:#8b93a3;font:800 .62rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jam-klein-zeile{display:block;color:#8b93a3;font-size:.84rem;line-height:1.4;overflow-wrap:anywhere}

/* Kopf */
.jam-kopf{padding:72px 0 34px}
.jam-eyebrow{color:var(--jam-lila)}
.jam-dot{background:var(--jam-lila);box-shadow:0 0 12px var(--jam-lila)}
.jam-kopf h1{margin:0;font:900 clamp(3.2rem,8vw,6.4rem)/.9 var(--sans);letter-spacing:-.06em;text-transform:uppercase}
.jam-wortmarke{background:var(--jam-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(108,94,181,.35))}
.jam-kopf h1 em{display:block;margin-top:.45em;color:#f5f0e8;font:800 clamp(1.25rem,2.6vw,1.9rem)/1.15 var(--sans);font-style:normal;letter-spacing:-.02em;text-transform:none}
.jam-lead{max-width:760px;margin:22px 0 0;color:#c9cfdb;font-size:1.08rem}
.jam-hinweis{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--orange);background:rgba(255,122,24,.08);color:#ffd8b8}
.jam-button{background:linear-gradient(120deg,var(--jam-hellblau),#4b8dff);color:#fff;box-shadow:0 8px 26px rgba(108,94,181,.3)}
.jam-button:hover{box-shadow:0 10px 32px rgba(108,94,181,.5)}

/* Geschlossene Probe, Verbindung */
.jam-probe{margin:0 0 26px;padding:28px 30px;border:1px solid rgba(169,156,255,.45);border-left:5px solid var(--jam-lila);background:linear-gradient(110deg,rgba(108,94,181,.18),rgba(44,232,232,.04))}
.jam-probe h2{font-size:clamp(1.5rem,3vw,2.3rem)}
.jam-probe>p:not(.card-kicker):not(.jam-klein){max-width:760px;color:#c9cfdb}
.jam-probe .card-kicker{color:var(--jam-lila)}
.jam-probe .hero-actions{margin-top:18px}
.jam-meldung{margin:0 0 18px;padding:12px 16px;border-left:3px solid var(--orange);background:rgba(255,122,24,.08);color:#ffd8b8;font:700 .8rem/1.5 var(--mono)}
.jam-meldung-klein{margin:12px 0 0;color:var(--jam-gelb);font:700 .78rem/1.5 var(--mono)}

/* Sender: Schirm + Pult */
.jam-sender{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:18px;margin-bottom:18px}
.jam-schirm{position:relative;display:flex;flex-direction:column;min-height:320px;padding:30px 32px;border:10px solid #07080c;border-radius:26px/18px;background:radial-gradient(ellipse at 50% 40%,#1d1652 0%,var(--jam-schirm) 70%);box-shadow:0 0 0 1px #2b3340,inset 0 0 60px rgba(0,0,0,.65),0 0 40px rgba(108,94,181,.18);overflow:hidden}
.jam-schirm::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px)}
.jam-schirm.ist-sendeschluss{padding:0;background:#000}
.jam-jetzt{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column}
.jam-programm{padding:5px 9px;border:1px solid rgba(255,210,63,.55);color:var(--jam-gelb);letter-spacing:.1em;overflow-wrap:anywhere}
.jam .jam-stueck{margin:6px 0 6px;color:#fff;font:900 clamp(1.7rem,3.6vw,2.9rem)/1.02 var(--sans);letter-spacing:-.04em;overflow-wrap:anywhere;text-shadow:0 0 18px rgba(169,156,255,.35)}
.jam-autor{margin:0;color:#d9d3ff;font-size:1.15rem;overflow-wrap:anywhere}
.jam-jahr{color:#8f86c9}
.jam-details{margin:10px 0 0;color:var(--jam-lila);font:700 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.jam-stil{margin:10px 0 0;max-width:640px;color:#b8b0ec;font-size:.88rem;font-style:italic;overflow-wrap:anywhere}
.jam-zeit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:auto;padding-top:26px;color:#d9d3ff;font:700 .8rem/1 var(--mono)}
.jam-quiz{position:relative;z-index:1;margin-top:18px;padding:14px 16px;border:1px dashed rgba(255,210,63,.6);background:rgba(255,210,63,.07)}
.jam-quiz strong{color:var(--jam-gelb);font:900 1.1rem/1 var(--mono);letter-spacing:.2em}
.jam-quiz p{margin:6px 0 0;color:#f2e6b0}

/* Fortschrittsbalken (auch in Stimmen und Abstimmung) */
.jam progress{width:100%;height:10px;-webkit-appearance:none;appearance:none;border:1px solid rgba(169,156,255,.35);background:#0a0820;color:var(--jam-lila)}
.jam progress::-webkit-progress-bar{background:#0a0820}
.jam progress::-webkit-progress-value{background:linear-gradient(90deg,var(--jam-hellblau),var(--jam-lila))}
.jam progress::-moz-progress-bar{background:linear-gradient(90deg,var(--jam-hellblau),var(--jam-lila))}

/* Testbild */
.jam-testbild{position:relative;flex:1 1 auto;display:grid;grid-template-rows:62% 9% 1fr;min-height:340px;height:100%}
.jam-balken{display:grid;grid-template-columns:repeat(7,1fr)}
.jam-balken-unten{grid-template-columns:repeat(4,1fr) 1fr 2fr}
.jam-balken span{display:block}
.tb-weiss{background:#c0c0c0}.tb-gelb{background:#c0c000}.tb-cyan{background:#00c0c0}.tb-gruen{background:#00c000}.tb-magenta{background:#c000c0}.tb-rot{background:#c00000}.tb-blau{background:#0000c0}.tb-schwarz{background:#131313}.tb-tief{background:#00214c}.tb-lila{background:#32006a}.tb-grau{background:#1d1d1d}
.jam-balken-unten .tb-weiss{background:#fff}
.jam-testbild-kreis{position:absolute;left:50%;top:34%;display:grid;place-items:center;align-content:center;gap:4px;width:min(46%,240px);aspect-ratio:1;border:4px solid #fff;border-radius:50%;background:rgba(0,0,0,.82);transform:translate(-50%,-50%);box-shadow:0 0 0 3px #000,0 0 28px rgba(0,0,0,.6);text-align:center}
.jam-testbild-kreis strong{color:#fff;font:900 clamp(1.1rem,3vw,1.9rem)/1 var(--mono);letter-spacing:.08em}
.jam-testbild-kreis span{color:var(--jam-gelb);font:800 clamp(.6rem,1.4vw,.78rem)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.jam-testbild-text{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:12px 16px;background:rgba(0,0,0,.86);color:#fff;font:800 .86rem/1.4 var(--mono);letter-spacing:.04em;text-align:center}
.ist-sendeschluss .jam-jetzt{position:absolute;left:12px;top:10px;z-index:3;padding:6px 10px;background:rgba(0,0,0,.75)}
.ist-sendeschluss .jam-jetzt .jam-label,.ist-sendeschluss .jam-jetzt .jam-autor,.ist-sendeschluss .jam-jetzt .jam-details,.ist-sendeschluss .jam-jetzt .jam-stil,.ist-sendeschluss .jam-jetzt .jam-zeit{display:none}
.jam .ist-sendeschluss .jam-stueck{margin:0;font:800 .8rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* Pult */
.jam-pult{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(14,21,31,.95),rgba(7,10,15,.95))}
.jam-pult .jam-klein{margin:0}
.jam-start{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:74px;padding:16px 20px;border:1px solid transparent;background:linear-gradient(120deg,var(--red),var(--orange));color:#fff;font:900 1.05rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 32px rgba(255,59,37,.3);transition:transform .2s,box-shadow .2s}
.jam-start:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(255,59,37,.48)}
.jam-start-symbol{width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.jam-start.ist-an{border-color:rgba(125,255,67,.55);background:#0c1a10;color:var(--jam-gruen);box-shadow:inset 0 0 22px rgba(125,255,67,.12),0 0 24px rgba(125,255,67,.12)}
.jam-start.ist-an .jam-start-symbol{width:16px;height:16px;border:0;background:var(--jam-gruen);box-shadow:0 0 12px var(--jam-gruen)}
.jam-hoerer{display:flex;align-items:baseline;gap:8px;margin:2px 0 0;color:#aab2c0;font:700 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.jam-hoerer strong{color:#fff;font-size:1.6rem}
.jam-laut{display:grid;gap:6px;color:#aab2c0;font:700 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jam input[type=range]{width:100%;accent-color:var(--jam-lila)}
.jam-klang{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.jam-klang legend{margin-bottom:6px;padding:0;color:#aab2c0;font:700 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jam-klang label{position:relative;display:block;cursor:pointer}
.jam-klang input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.jam-klang span{display:block;height:100%;padding:10px 8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#b6bdc7;font:800 .66rem/1.3 var(--mono);letter-spacing:.06em;text-align:center;text-transform:uppercase}
.jam-klang input:checked+span{border-color:var(--jam-lila);background:rgba(108,94,181,.2);color:#fff}
.jam-klang input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.jam-status{min-height:1.4em;margin:0;color:var(--jam-gelb);font:700 .74rem/1.45 var(--mono)}
.jam-bewerten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.jam-sterne{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.jam-sterne .jam-label-klein{margin-right:6px}
.jam-stern{padding:2px 3px;border:0;background:none;color:#3c4452;font-size:1.45rem;line-height:1;cursor:pointer;transition:color .15s,transform .15s}
.jam-stern:hover,.jam-stern:focus-visible{color:#ffe68a;transform:scale(1.12)}
.jam-stern.ist-an{color:var(--jam-gelb);text-shadow:0 0 10px rgba(255,210,63,.45)}
.jam-skip{padding:10px 14px;color:#d8dde5;cursor:pointer}
.jam-skip[aria-pressed=true]{border-color:var(--jam-pink);color:var(--jam-pink);cursor:default}

/* Stimmen */
.jam-stimmen{margin-bottom:18px;padding:26px 28px;border:1px solid rgba(169,156,255,.3);background:linear-gradient(145deg,rgba(26,20,72,.55),rgba(7,10,15,.95))}
.jam-abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:14px}
.jam-abschnitt-kopf h2{margin:0}
.jam-abschnitt-kopf .jam-klein{max-width:560px;margin:0}
.jam-stimmen-aus{margin:0;color:#aab2c0}
.jam-textknopf{padding:0;border:0;background:none;color:var(--cyan);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jam-stimmen-tafel{display:grid;gap:6px;font-family:var(--mono)}
.jam-stimme{display:grid;grid-template-columns:44px minmax(86px,.8fr) minmax(170px,1.3fr) minmax(120px,.9fr) minmax(120px,1.2fr) minmax(110px,1fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(169,156,255,.18);background:rgba(10,8,32,.7);transition:border-color .1s}
.jam-stimme.ist-gate{border-color:rgba(169,156,255,.5)}
.jam-stimme.ist-stumm{opacity:.45}
.jam-stimme-kopf{padding-block:0;border:0;background:none;color:#7f8897;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.jam-stimme-nr{width:34px;height:34px;border:1px solid var(--jam-lila);background:rgba(108,94,181,.25);color:#fff;font:900 .95rem/1 var(--mono);cursor:pointer}
.jam-stimme-nr[aria-pressed=true]{border-color:#555;background:#1a1a1a;color:#777;text-decoration:line-through}
.jam-notenbox{display:grid;gap:2px}
.jam-note{color:var(--jam-gruen);font:900 1.35rem/1 var(--mono);text-shadow:0 0 10px rgba(125,255,67,.35)}
.jam-note.ist-aus{color:#3d4650;text-shadow:none}
.jam-hz{display:block;height:1.25em;overflow:hidden;color:#7f8897;font-size:.66rem;line-height:1.25;white-space:nowrap}
.jam-wellen,.jam-flaggen{display:flex;flex-wrap:wrap;gap:4px}
.jam-chip,.jam-flagge{padding:4px 6px;border:1px solid #2a2f3b;color:#4a5260;font:800 .64rem/1 var(--mono)}
.jam-chip.ist-an{border-color:var(--cyan);background:rgba(44,232,232,.12);color:var(--cyan)}
.jam-flagge{min-width:22px;text-align:center}
.jam-flagge.ist-an{border-color:var(--jam-gelb);background:rgba(255,210,63,.12);color:var(--jam-gelb)}
.jam-huelle,.jam-puls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}
.jam-phase{width:18px;color:var(--jam-lila);font:900 .85rem/1 var(--mono);text-align:center}
.jam-pulszahl{min-width:44px;color:#c9cfdb;font-size:.74rem;text-align:right}
.jam-filter{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));align-items:center;gap:12px;margin-top:4px;padding:12px;border:1px dashed rgba(169,156,255,.3)}
.jam-filter-titel{color:var(--jam-lila);font:900 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.jam-filter-feld{display:grid;gap:4px}
.jam-filter-feld{min-width:0}
.jam-filter-feld strong{overflow:hidden;color:#fff;font:800 .86rem/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}

/* Karten */
.jam-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.jam-karte{min-width:0;padding:26px 28px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(14,21,31,.92),rgba(7,10,15,.94))}
.jam-karte>p:not(.jam-klein):not(.jam-label):not(.jam-meldung-klein){color:#b1b8c2}
.jam-liste{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.jam-liste>li{padding:10px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);overflow-wrap:anywhere}
.jam-liste strong{display:block;color:#eef0f4;line-height:1.3}
#jam-warteschlange{counter-reset:wunsch}
.jam-naechstes{margin:0 0 6px;padding:12px 14px;border-left:3px solid var(--jam-lila);background:rgba(108,94,181,.12);color:#e6e2ff;overflow-wrap:anywhere}
.jam-rest{color:var(--jam-gelb)}
.jam-kandidaten{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.jam-kandidat{display:grid;gap:6px;width:100%;padding:12px 14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.jam-kandidat:hover:not(:disabled){border-color:var(--jam-lila)}
.jam-kandidat:disabled{cursor:default}
.jam-kandidat[aria-pressed=true]{border-color:var(--jam-lila);background:rgba(108,94,181,.2)}
.jam-kandidat-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jam-kandidat-kopf strong{color:#fff;overflow-wrap:anywhere}
.jam-stimmzahl{flex:0 0 auto;color:var(--jam-gelb);font:800 .72rem/1 var(--mono)}
.jam-kandidat-unter{color:#8b93a3;font-size:.84rem;overflow-wrap:anywhere}
.jam-kandidat progress{height:6px}

/* Chat */
.jam-chat{display:flex;flex-direction:column}
.jam-chatliste{flex:1 1 auto;height:340px;min-height:220px;margin:0 0 12px;padding:10px 12px;overflow-y:auto;list-style:none;border:1px solid rgba(169,156,255,.2);background:#08071a;font-size:.92rem;overscroll-behavior:contain}
.jam-chatliste:focus-visible{outline-offset:-2px}
.jam-chat-zeile{padding:3px 0;line-height:1.45;overflow-wrap:anywhere}
.jam-chat-zeit{margin-right:8px;color:#566070;font:700 .66rem/1 var(--mono)}
.jam-chat-name{margin-right:6px;color:var(--cyan)}
.jam-chat-name::after{content:":"}
.jam-chat-text{color:#dfe3ea}
.jam-chat-zeile.ist-meins .jam-chat-name{color:var(--jam-gruen)}
.jam-chat-name.ist-forum{color:#ff9a3d}
.jam-chat .jam-abschnitt-kopf{margin-bottom:12px}
.jam-forumlink{font:800 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.jam-chat-zeile.art-1 .jam-chat-text{color:#8b93a3;font-style:italic}
.jam-chat-zeile.art-3 .jam-chat-text{color:var(--jam-gelb)}
.jam-chat-zeile.art-4 .jam-chat-name,.jam-chat-zeile.art-4 .jam-chat-text{color:var(--jam-pink)}
.jam-chat-zeile.ist-lokal{opacity:.85}
.jam-zeile{display:flex;gap:8px}
.jam input[type=text],.jam input[type=search]{flex:1 1 auto;min-width:0;padding:12px 12px;border:1px solid var(--line);background:#06080c;color:#fff;font:600 .95rem/1.2 var(--sans)}
.jam input[type=text]:focus,.jam input[type=search]:focus{border-color:var(--jam-lila);outline:none;box-shadow:0 0 0 2px rgba(169,156,255,.25)}
.jam-zeile .button{flex:0 0 auto;cursor:pointer}
.jam button.button-ghost{color:#d8dde5}
.jam button.jam-button{color:#fff}

/* Suche und Hitparade */
.jam-treffer,.jam-hitliste{margin-top:12px;max-height:460px;overflow-y:auto}
.jam-stueckzeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jam-stueckzeile-text{min-width:0}
.jam-stueckzeile-aktion{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.jam-liedwahl{padding:6px 4px;border:1px solid var(--line);background:#06080c;color:#fff;font:700 .74rem/1 var(--mono)}
.jam-wunsch{padding:8px 11px;border:1px solid rgba(169,156,255,.5);background:rgba(108,94,181,.15);color:#fff;font:800 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.jam-wunsch:hover:not(:disabled){background:rgba(108,94,181,.35)}
.jam-wunsch:disabled{border-color:var(--line);background:none;color:#69717e;cursor:default}
.jam-hitliste{counter-reset:platz}
.jam-hitliste>li{counter-increment:platz}
.jam-hitliste .jam-stueckzeile-text{display:grid;grid-template-columns:2.2em minmax(0,1fr)}
.jam-hitliste .jam-stueckzeile-text::before{content:counter(platz);grid-row:1/3;color:var(--jam-gelb);font:900 1rem/1.3 var(--mono)}

/* Rechte */
.jam-rechte{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.jam-rechte h2{font-size:1.2rem}
.jam-rechte p{max-width:860px;color:#aab2c0}

@media(max-width:960px){
.jam-sender{grid-template-columns:1fr}
.jam-stimme{grid-template-columns:40px minmax(72px,.7fr) minmax(150px,1.3fr) minmax(110px,1fr);grid-template-areas:none}
.jam-stimme>.jam-huelle,.jam-stimme>.jam-puls{grid-column:span 2}
.jam-stimme-kopf{display:none}
.jam-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
.jam-filter-titel{grid-column:1/-1}
}
@media(max-width:720px){
.jam-raster{grid-template-columns:1fr}
}
@media(max-width:620px){
.jam{padding:0 16px 30px}
.jam-kopf{padding:48px 0 24px}
.jam-kopf h1{font-size:clamp(2.8rem,15vw,4rem)}
.jam-schirm{min-height:260px;padding:22px 18px;border-width:7px}
.jam-testbild{min-height:260px}
.jam-pult,.jam-karte,.jam-stimmen,.jam-probe{padding:20px 16px}
.jam-stimme{grid-template-columns:36px minmax(0,1fr) minmax(0,1.4fr);gap:8px 10px;padding:10px}
.jam-stimme>.jam-flaggen{grid-column:2/-1}
.jam-stimme>.jam-huelle,.jam-stimme>.jam-puls{grid-column:1/-1}
.jam-stimme-nr{width:30px;height:30px}
.jam-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
.jam-stueckzeile{flex-wrap:wrap}
.jam-zeile{flex-wrap:wrap}
.jam-zeile .button{width:100%}
.jam-chatliste{height:300px}
}