/* Ticketshop-Elemente: Saalplan und Einlass-Scanner (nur geladen, wenn ein Block auf der Seite ist). */
.akt-sp-head { display: grid; gap: 14px; margin-bottom: 16px; }
.akt-sp-termine { display: flex; flex-wrap: wrap; gap: 8px; }
.akt-sp-termine button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; border-radius: 12px; padding: 10px 14px; cursor: pointer; display: grid; gap: 4px; text-align: left; min-width: 128px; transition: border-color .2s; }
.akt-sp-termine button b { font-size: var(--step-0); } .akt-sp-termine button small { color: var(--text-soft); font-size: var(--step--1); }
.akt-sp-termine button[aria-selected="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.akt-sp-termine button.is-dauer { border-color: #3cb371; } .akt-sp-termine button.is-dauer::after { content: "Dauerkarte"; font-size: 11px; color: #3cb371; font-weight: 600; }
.akt-sp-occ { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .akt-sp-occ i { display: block; height: 100%; background: #3cb371; width: 0; transition: width .4s; }
.akt-sp-termine button.is-soldout .akt-sp-occ i { background: var(--danger); } .akt-sp-occ-text { font-size: 11px; color: var(--muted); }
.akt-sp-ctrls { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; }
.akt-sp-ctrls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .akt-sp-ctrls legend { font-size: var(--step--1); color: var(--muted); padding: 0; margin-bottom: 6px; }
.akt-sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.akt-sp-chips label { position: relative; } .akt-sp-chips input { position: absolute; opacity: 0; inset: 0; }
.akt-sp-chips span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-soft); font-size: var(--step--1); font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.akt-sp-chips input:checked + span { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
.akt-sp-chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.akt-sp-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.akt-sp-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--step--1); color: var(--text-soft); cursor: pointer; } .akt-sp-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.akt-sp-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .9fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .akt-sp-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-sp-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.akt-sp-svg { width: 100%; min-width: 640px; height: auto; display: block; }
.akt-sp-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; position: sticky; top: 96px; }
@media (max-width: 1000px) { .akt-sp-panel { position: static; } }
.akt-sp-panel h3 { margin: 4px 0 10px; font-size: var(--step-1); } .akt-sp-panel p { color: var(--text-soft); margin: 0 0 10px; }
.akt-sp-panel-eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--orange-text); font-weight: 600; margin: 0; }
.akt-sp-selected { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; } .akt-sp-selected li { font-size: var(--step--1); padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.akt-sp-selected li::before { content: "✓ "; color: var(--orange-text); font-weight: 700; }
.akt-sp-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 12px; color: var(--text-soft); }
.akt-sp-legend div { display: flex; gap: 8px; align-items: center; } .akt-sp-legend dt, .akt-sp-legend dd { margin: 0; }
.sp-leg { display: inline-grid; place-items: center; width: 20px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700; font-style: normal; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.sp-leg-a { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); } .sp-leg-b { background: rgba(255,102,0,.35); } .sp-leg-c { background: rgba(255,102,0,.16); } .sp-leg-d { background: var(--surface-2); } .sp-leg-f { background: rgba(60,179,113,.35); } .sp-leg-s { background: rgba(60,179,113,.16); }
.sp-leg-belegt { background: var(--line); } .sp-leg-gesperrt { color: var(--muted); }
.akt-sp-note { font-size: 12px; color: var(--muted); }
.akt-sp-list { margin-top: 12px; font-size: var(--step--1); color: var(--text-soft); } .akt-sp-list summary { cursor: pointer; }
.akt-sp-timeline { margin: 0 0 14px; } .akt-sp-tl-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.akt-sp-tl-mitglied { width: 0; background: #3cb371; transition: width .4s; } .akt-sp-tl-frei { flex: 1; background: var(--orange); opacity: .7; } .akt-sp-tl-tag { width: 10%; background: var(--text); opacity: .5; }
.akt-sp-tl-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
/* SVG */
.sp-stagearea path { fill: var(--text); opacity: .85; } .sp-stage-label { fill: var(--bg); font-size: 14px; font-weight: 700; text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; }
.sp-pitch rect, .sp-pitch circle, .sp-pitch line { fill: rgba(60,179,113,.12); stroke: #3cb371; stroke-width: 1.5; } .sp-pitch .sp-stage-label { fill: #3cb371; }
.sp-sec-label { fill: var(--muted); font-size: 12px; font-weight: 600; text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.sp-focal circle { fill: var(--orange); } .sp-focal text { fill: var(--orange-text); font-size: 11px; }
.sp-seat { cursor: pointer; outline: none; }
.sp-seat-box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; transition: fill .2s, stroke .2s, transform .15s; }
.sp-cat-a .sp-seat-box { fill: var(--orange); stroke: var(--orange); } .sp-cat-a .sp-seat-num { fill: var(--orange-ink); }
.sp-cat-b .sp-seat-box { fill: rgba(255,102,0,.35); } .sp-cat-c .sp-seat-box { fill: rgba(255,102,0,.16); } .sp-cat-d .sp-seat-box { fill: var(--surface-2); }
.sp-cat-f .sp-seat-box { fill: rgba(60,179,113,.35); }
.sp-seat-num { font-size: 8px; fill: var(--text); text-anchor: middle; pointer-events: none; opacity: .75; }
.sp-seat-mark { stroke: var(--text); pointer-events: none; }
.sp-seat:hover .sp-seat-box, .sp-seat:focus-visible .sp-seat-box { stroke: var(--text); stroke-width: 2; }
.sp-seat.is-belegt .sp-seat-box { fill: var(--line); stroke: var(--line); } .sp-seat.is-belegt .sp-seat-num, .sp-seat.is-belegt .sp-seat-mark { opacity: .35; } .sp-seat.is-belegt { cursor: not-allowed; }
.sp-gesperrt .sp-seat-box { fill: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px); fill: var(--surface); stroke-dasharray: 2 2; } .sp-gesperrt { cursor: not-allowed; }
.sp-seat.is-selected .sp-seat-box { fill: #3cb371; stroke: #1f7a44; stroke-width: 2; } .sp-seat.is-selected .sp-seat-num, .sp-seat.is-selected .sp-seat-mark { fill: #fff; stroke: #fff; opacity: 1; }
.sp-seat.is-selected .sp-seat-box { transform-box: fill-box; transform-origin: center; animation: sp-pick .35s ease-out; } @keyframes sp-pick { 50% { transform: scale(1.35); } }
.sp-area { cursor: pointer; outline: none; } .sp-area-box { fill: rgba(60,179,113,.1); stroke: #3cb371; stroke-width: 1.5; stroke-dasharray: 6 5; transition: fill .2s; }
.sp-area:hover .sp-area-box, .sp-area:focus-visible .sp-area-box { fill: rgba(60,179,113,.2); stroke-width: 2.5; }
.sp-area.is-voll .sp-area-box { stroke: var(--danger); fill: rgba(255,138,107,.08); }
.sp-area-label { fill: var(--text); font-size: 14px; font-weight: 700; text-anchor: middle; } .sp-area-sub { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.sp-area-plus { fill: #3cb371; font-size: 20px; font-weight: 800; text-anchor: middle; }
.sp-cap-track { fill: var(--line); } .sp-cap-fill { fill: #3cb371; transition: width .4s; } .sp-area.is-voll .sp-cap-fill { fill: var(--danger); }
.akt-sp[data-bestuhlung="frei"] .sp-seat-num, .akt-sp[data-bestuhlung="steh"] .sp-seat-num { display: none; }
.akt-sp[data-bestuhlung="frei"] .sp-seat-box { rx: 9; } .akt-sp[data-bestuhlung="frei"] .sp-seat.is-belegt .sp-seat-box { fill: var(--surface-2); stroke: var(--line); }
.akt-sp[data-bestuhlung="steh"] .sp-seat-box { fill: rgba(60,179,113,.18) !important; stroke: transparent; rx: 1; } .akt-sp[data-bestuhlung="steh"] .sp-seat.is-belegt .sp-seat-box { fill: rgba(60,179,113,.18) !important; }
.akt-sp.is-soldout .sp-seats { opacity: .55; }
/* Einlass */
.akt-el-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .akt-el-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-el-phones { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.akt-el-phone { width: 200px; max-width: 46%; } .akt-el-phone svg { width: 100%; height: auto; display: block; }
.akt-el-phone-label { text-align: center; font-weight: 700; margin: 0 0 8px; font-size: var(--step--1); color: var(--text-soft); }
.el-body { fill: #1b1b1b; } .el-screen { fill: #0d0d0d; } .el-speaker { fill: #333; }
.el-status-text { fill: #bbb; font-size: 11px; text-anchor: middle; } .el-dot { fill: #555; } .el-dot.is-on { fill: #3cb371; } .el-dot.is-off { fill: #ff8a6b; }
.el-cam { fill: #1f1f1f; } .el-corner { fill: none; stroke: #ff6600; stroke-width: 3; stroke-linecap: round; }
.el-beam { stroke: #ff6600; stroke-width: 2; opacity: 0; } .is-scanning .el-beam { opacity: .9; animation: el-beam .9s linear; } @keyframes el-beam { from { transform: translateY(0); } to { transform: translateY(90px); } }
.el-result-box { fill: #3cb371; } .el-result-icon { fill: #fff; font-size: 22px; font-weight: 800; text-anchor: middle; } .el-result-text { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; }
.is-used .el-result-box { fill: #d08a00; } .is-wrong .el-result-box { fill: #2f6fb5; } .is-bad .el-result-box { fill: #c2413b; }
.el-result { transition: opacity .2s; } .is-ok .el-screen { fill: #0f2a1b; } .is-bad .el-screen { fill: #2a0f0f; } .is-used .el-screen { fill: #2a200a; } .is-wrong .el-screen { fill: #0d1a2a; }
.el-counter-text { fill: #ddd; font-size: 12px; font-weight: 700; text-anchor: middle; } .el-counter-sub { fill: #ff8a6b; font-size: 10px; text-anchor: middle; }
.akt-el-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.akt-el-panel h3 { margin: 4px 0 8px; font-size: var(--step-1); } .akt-el-hint { color: var(--text-soft); margin: 0 0 12px; }
.akt-el-tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } @media (max-width: 480px) { .akt-el-tickets { grid-template-columns: 1fr; } }
.akt-el-ticket { display: flex; gap: 8px; align-items: center; border: 1px dashed var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step--1); font-weight: 600; border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; transition: border-color .2s, transform .15s; }
.akt-el-ticket svg { color: var(--orange-text); flex: none; } .akt-el-ticket:hover { border-color: var(--orange); transform: translateY(-1px); } .akt-el-ticket:disabled { opacity: .5; cursor: wait; }
.akt-el-gates { margin-bottom: 12px; } .akt-el-offline { margin-bottom: 14px; }
.akt-el-explain { border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .akt-el-explain b { display: block; margin-bottom: 4px; } .akt-el-explain p { margin: 0; color: var(--text-soft); font-size: var(--step--1); }
@media (prefers-reduced-motion: reduce) { .sp-seat.is-selected .sp-seat-box, .is-scanning .el-beam { animation: none; } .sp-cap-fill, .akt-sp-occ i, .akt-sp-tl-mitglied { transition: none; } }