@media (min-width: 520px) {
.ticketshop-form__row--two {
        grid-template-columns: 1fr 1fr;
    }
}
.ticketshop-form .ticketshop-stepper input[type="number"] {
    width: 4.5rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ticketshop-stepper input::-webkit-outer-spin-button,
.ticketshop-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.ticketshop .ticketshop-consent input[type="checkbox"] {
    flex: none;
    display: grid;
    float: none;
    place-content: center;
    position: static;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.1rem 0 0;
    padding: 0;
    border: 2px solid #8c97ad;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ticketshop .ticketshop-consent input[type="checkbox"]::after {
    content: "";
    width: 0.75rem;
    height: 0.4rem;
    border-bottom: 2.5px solid #fff;
    border-left: 2.5px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}
.ticketshop .ticketshop-consent input[type="checkbox"]:checked {
    border-color: var(--ts-blue);
    background: var(--ts-blue);
}
.ticketshop .ticketshop-consent input[type="checkbox"]:checked::after {
    opacity: 1;
}
.ticketshop .ticketshop-consent input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--ts-gold);
    outline-offset: 2px;
}
.ticketshop .ticketshop-consent input[type="checkbox"].invalid {
    border-color: var(--ts-danger);
}
@media (max-width: 767px) {
.ticketshop-order__aside { order: -1; }
}
.ticketshop-toolbtn:hover,
.ticketshop-toolbtn:focus-visible {
    filter: brightness(0.95);
}
.ticketshop-status--upcoming .ticketshop-status__icon {
    box-shadow: 0 0 0 6px var(--ts-gold-soft), 0 10px 24px rgba(0, 51, 152, 0.28);
}
.ticketshop-status--ended .ticketshop-status__icon,
.ticketshop-status--soldout .ticketshop-status__icon {
    background: linear-gradient(145deg, #6b7385 0%, #434a5a 100%);
    box-shadow: 0 0 0 6px var(--ts-soft), 0 10px 24px rgba(16, 24, 40, 0.2);
}
@media (max-width: 420px) {
.ticketshop-timer__grid {
        gap: 0.4rem;
    }
}
.ticketshop-hero .ticketshop-infolist li .fa-solid {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.ticketshop.is-full .ticketshop-hero {
    margin-top: 1rem;
}
/* Warteliste (ausverkauft) */
.ticketshop-waitlist {
    max-width: 28rem;
    margin: 1.25rem auto;
    text-align: left;
}
.ticketshop-waitlist__row {
    margin-bottom: 0.75rem;
}
@media (max-width: 767px) {
/* Mobil: Kopfkarte kompakter, Termin-Infos einspaltig (gilt für Bestellseite und Saalplan) */
.ticketshop-hero {
        gap: 0.75rem;
        padding: 1rem;
    }
}
.ticketshop-pick .ticketshop-stepper input[type="number"] {
    width: 4.5rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ticketshop-pick__cta {
    margin-top: 1.25rem;
}
@media (max-width: 767px) {
.ticketshop.ticketshop-tickets {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }
}
/* Kompakte Kundenseiten: weniger Höhe im Kopf, Infokästen zugeklappt, damit man kaum scrollen muss */
.ticketshop-hero {
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}
@media (min-width: 760px) {
.ticketshop-hero {
        grid-template-columns: 1fr 200px;
        padding: 1.25rem 1.75rem;
    }
}
.ticketshop-hero__actions {
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}
.ticketshop-fold > summary::after {
    content: "\25BE";
    float: right;
    transition: transform 0.15s;
}
.ticketshop-fold[open] > summary::after {
    transform: rotate(180deg);
}
.ticketshop-fold[open] > summary {
    margin-bottom: 0.75rem;
}
@media (min-width: 700px) {
/* "Gut zu wissen": die Punkte nebeneinander statt untereinander (mobil untereinander) */
.ticketshop-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}
.ticketshop .ticketshop-infolist {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ticketshop-status--image {
    padding-top: 1.1rem;
}
.ticketshop-status__start {
    margin: 0.6rem 0 0;
}
.ticketshop-timer__grid {
    grid-template-columns: repeat(4, minmax(0, 4.75rem));
}
@media (min-width: 900px) {
.ticketshop-status--upcoming > .ticketshop-timer {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
.ticketshop-status--upcoming > .ticketshop-status__start {
        grid-column: 2;
        grid-row: 3;
    }
}
.ticketshop-about > .ticketshop-lostlink a {
    flex: 1;
}
@media (max-width: 480px) {
/* Smartphone: Countdown bleibt vierspaltig und flach */
.ticketshop-timer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
    }
.ticketshop-about__know .ticketshop-features {
        gap: 0.6rem;
    }
}
/* Infokacheln: flach, Überschrift ohne Umbruch, einheitliche Symbole */
.ticketshop .ticketshop-hero .ticketshop-infolist {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.ticketshop-hero .ticketshop-infolist li .fa-solid {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.75rem;
}
.ticketshop-status__title {
    font-weight: 800;
}
.ticketshop-status__title::after {
    display: block;
    width: 3.5rem;
    height: 4px;
    margin: 0.4rem auto 0;
    border-radius: 4px;
    background: var(--ts-gold);
}
.ticketshop-timer__grid {
    gap: 0.5rem;
    justify-content: center;
}
@media (min-width: 900px) {
.ticketshop-status--upcoming > .ticketshop-status__title::after {
        margin-left: 0;
    }
.ticketshop-status--upcoming > .ticketshop-timer {
        align-self: center;
    }
}
.ticketshop-about__know .ticketshop-features {
    gap: 0.9rem 0;
}
@media (min-width: 700px) {
.ticketshop-about__know .ticketshop-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
.ticketshop-about__know .ticketshop-features li:first-child {
        padding-left: 0;
    }
}
/* Bestellformular daneben (zweispaltig): Infoleiste bleibt einspaltig */
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about {
    grid-template-columns: minmax(0, 1fr);
}
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about__know .ticketshop-features {
    grid-template-columns: minmax(0, 1fr);
}
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about__know .ticketshop-features li {
    padding: 0;
    border-left: 0;
}
@media (max-width: 699px) {
/* Smartphone: alles untereinander, keine schmalen Textspalten */
.ticketshop-hero::before {
        width: 70%;
        opacity: 0.6;
    }
}
/* Feinschliff: Countdown-Teaser, Glas-Knöpfe im Kopf, Infokacheln ---------------------------------------------- */
.ticketshop-status__copy {
    min-width: 0;
}
@media (min-width: 900px) {
.ticketshop-status--upcoming > .ticketshop-status__copy {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        padding-left: 1.5rem;
        border-left: 1px solid var(--ts-border);
    }
.ticketshop-status--upcoming .ticketshop-status__copy .ticketshop-status__text {
        max-width: none;
    }
}
.ticketshop-hero .ticketshop-hero__actions .ticketshop-btn .fa-solid {
    color: #ffffff;
}
.ticketshop-hero .ticketshop-hero__actions .ticketshop-btn:hover,
.ticketshop-hero .ticketshop-hero__actions .ticketshop-btn:focus-visible {
    border-color: var(--ts-gold);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.ticketshop-hero .ticketshop-hero__actions .ticketshop-btn:hover .fa-solid,
.ticketshop-hero .ticketshop-hero__actions .ticketshop-btn:focus-visible .fa-solid {
    color: var(--ts-gold);
}
/* Infokacheln: Überschrift in Versalien, Hauptangabe groß, Ergänzung klein in Hellblau */
.ticketshop .ticketshop-hero .ticketshop-infolist {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
    align-items: stretch;
}
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    line-height: 1.2;
}
/* Hinweis zum Zugang: über die ganze Reihe, flach */
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__note {
    grid-column: 1 / -1;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
}
.ticketshop-hero .ticketshop-infolist__note .fa-solid {
    background: none;
    color: var(--ts-gold);
}
@media (max-width: 699px) {
.ticketshop .ticketshop-hero .ticketshop-infolist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 400px) {
.ticketshop .ticketshop-hero .ticketshop-infolist {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Letzte Korrekturen: Termin-Zeile ohne Pills, Footer-Zeile für "Ticket verloren?" -------------------------- */
.ticketshop .ticketshop-hero .ticketshop-chips {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.ticketshop .ticketshop-hero .ticketshop-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    border: 0;
    border-radius: 0;
    background: none;
}
.ticketshop .ticketshop-hero .ticketshop-chip .fa-solid {
    color: #cfe0ff;
}
.ticketshop .ticketshop-hero .ticketshop-chip:not(.ticketshop-chip--accent):not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.ticketshop .ticketshop-hero .ticketshop-chip:not(.ticketshop-chip--accent):nth-last-child(2):has(+ .ticketshop-chip--accent) {
    border-right: 0;
}
@media (max-width: 640px) {
/* Smartphone: untereinander, keine Trennlinien */
.ticketshop .ticketshop-hero .ticketshop-chips {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
.ticketshop .ticketshop-hero .ticketshop-chip {
        display: flex;
        padding: 0;
    }
.ticketshop .ticketshop-hero .ticketshop-chip:not(.ticketshop-chip--accent):not(:last-child),
    .ticketshop .ticketshop-hero .ticketshop-chip:not(.ticketshop-chip--accent):nth-last-child(2):has(+ .ticketshop-chip--accent) {
        border-right: 0;
    }
}
@media (max-width: 699px) {
.ticketshop-about__foot {
        justify-content: center;
    }
}
/* Im zweispaltigen Bestellformular bleibt "Gut zu wissen" einspaltig */
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about {
    display: block;
}
@media (min-width: 900px) {
.ticketshop-status__swash {
        margin-left: 0;
    }
}
.ticketshop-about__info {
    min-width: 0;
}
.ticketshop-about__foot .ticketshop-lostlink a:hover,
.ticketshop-about__foot .ticketshop-lostlink a:focus-visible {
    background: #061d4b;
    color: #ffffff;
    text-decoration: none;
}
@media (min-width: 900px) {
.ticketshop-about__know {
        grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr);
    }
}
/* Bestellformular daneben (schmale Spalte): alles einspaltig */
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about__know {
    grid-template-columns: minmax(0, 1fr);
}
.ticketshop-order__grid:not(.ticketshop-order__grid--single) .ticketshop-about__foot {
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--ts-border);
    border-left: 0;
}
@media (min-width: 900px) {
/* Countdown-Karte (Desktop): Logo | Countdown | Überschrift, zwei gleiche senkrechte Trennlinien ------------------- */
.ticketshop-status--upcoming {
        grid-template-columns: auto 1px minmax(0, auto) 1px minmax(0, 1fr);
        column-gap: clamp(1rem, 2.4vw, 1.5rem);
    }
.ticketshop-status--upcoming::before {
        grid-column: 2;
    }
.ticketshop-status--upcoming::after {
        grid-column: 4;
    }
.ticketshop-status--upcoming > .ticketshop-status__icon,
    .ticketshop-status--upcoming > .ticketshop-status__image {
        grid-column: 1;
    }
.ticketshop-status--upcoming > .ticketshop-timer,
    .ticketshop-status--upcoming > .ticketshop-status__start {
        grid-column: 3;
    }
.ticketshop-status--upcoming > .ticketshop-status__copy {
        grid-column: 5;
        padding-left: 0.9rem;
        border-left: 0;
    }
}
.ticketshop-hero__zoom .ticketshop-hero__image {
    transition: transform 0.2s ease;
}
.ticketshop-hero__zoom:hover .ticketshop-hero__image,
.ticketshop-hero__zoom:focus-visible .ticketshop-hero__image {
    transform: rotate(3deg) scale(1.03);
}
.ticketshop-hero__zoom:focus-visible {
    outline: 3px solid var(--ts-gold);
    outline-offset: 4px;
    border-radius: 6px;
}
/* Das Modal hängt am <body>, daher ohne Vorfahren-Selektor */
.ticketshop-lightbox.modal {
    --bs-modal-bg: transparent;
    --bs-modal-border-width: 0;
    background: rgba(6, 12, 28, 0.88);
}
.ticketshop-lightbox .ticketshop-lightbox__close:hover,
.ticketshop-lightbox .ticketshop-lightbox__close:focus-visible {
    background-color: #061d4b;
    box-shadow: 0 0 0 2px var(--ts-gold, #ffcc33);
}
@media (prefers-reduced-motion: reduce) {
.ticketshop-hero__zoom .ticketshop-hero__image,
    .ticketshop-hero__zoomicon {
        transition: none;
    }
}
/* Termin-Zeile unter dem Titel: 15 px, mehr Luft, Trennlinien ca. 22 px ------------------------------------------ */
.ticketshop .ticketshop-hero .ticketshop-titlerow {
    margin-bottom: 0.75rem;
}
.ticketshop .ticketshop-hero .ticketshop-chips {
    margin-bottom: 1.125rem;
    gap: 0.4rem 0;
}
.ticketshop .ticketshop-hero .ticketshop-chip {
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
}
.ticketshop .ticketshop-hero .ticketshop-chip:first-child {
    padding-left: 0;
}
.ticketshop .ticketshop-hero .ticketshop-chip .fa-solid {
    flex: 0 0 auto;
    width: 1.1rem;
    font-size: 1.0625rem;
    line-height: 1;
    text-align: center;
}
.ticketshop .ticketshop-hero .ticketshop-chips + .ticketshop-infolist {
    margin-top: 0;
}
@media (max-width: 899px) {
.ticketshop .ticketshop-hero .ticketshop-chip {
        padding: 0 1rem;
        font-size: 0.875rem;
    }
.ticketshop .ticketshop-hero .ticketshop-chip:first-child {
        padding-left: 0;
    }
.ticketshop .ticketshop-hero .ticketshop-chip .fa-solid {
        font-size: 1rem;
    }
}
@media (max-width: 640px) {
.ticketshop .ticketshop-hero .ticketshop-chip {
        padding: 0;
        font-size: 0.8125rem;
    }
}
@media (min-width: 900px) {
/* Countdown-Karte: Textspalte weiter rechts (Abstand zur zweiten Linie ca. 78 px), Knopf bündig mit der Spalte ---- */
.ticketshop-status--upcoming {
        --ts-status-indent: clamp(1.25rem, 4.5vw, 3.4rem);
    }
.ticketshop-status--upcoming > .ticketshop-status__copy {
        padding-left: var(--ts-status-indent);
    }
}
@media (max-width: 699px) {
.ticketshop-hero {
        --ts-glow-a: 0.5;
        --ts-glow-b: 0.6;
    }
}
/* 4. Infokacheln: dezente Tiefe beim Hover (nur mit Maus; die Kacheln sind keine Knöpfe, daher kein Zeiger) */
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card {
    transition: transform 0.22s ease-out, background-color 0.22s ease-out, border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}
.ticketshop-hero .ticketshop-infolist__head .fa-solid {
    transition: filter 0.22s ease-out, color 0.22s ease-out;
}
@media (hover: hover) and (pointer: fine) {
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.42);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 18px rgba(0, 10, 40, 0.3);
    }
}
@media (prefers-reduced-motion: reduce) {
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card,
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card:hover {
        transform: none;
        transition: none;
    }
}
@media (max-width: 699px) {
.ticketshop-hero::after {
        right: -150px;
        opacity: 0.45;
    }
}
/* Scheinwerfer: Lichtquelle links neben das Plakat, Schwenk asymmetrisch zur freien Fläche, Ebene unter dem Konfetti ---
   Ursache der Überdeckung: Die Quelle lag senkrecht über dem Plakat (150 px vom rechten Rand) und der Kegel zeigte
   nach unten, also genau auf das Plakat, das (zusammen mit Texten und Kacheln) eine Ebene darüber liegt. */
.ticketshop-hero {
    isolation: isolate;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.ticketshop-hero::after {
        background:
            radial-gradient(circle at 50% 4px, rgba(255, 255, 255, 0.85) 0, color-mix(in srgb, var(--ts-beam-color) 60%, transparent) 14px, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 56px),
            conic-gradient(from 180deg at 50% 4px, color-mix(in srgb, var(--ts-beam-color) 40%, transparent) 0deg, color-mix(in srgb, var(--ts-beam-color) 17%, transparent) 11deg, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 22deg, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 338deg, color-mix(in srgb, var(--ts-beam-color) 17%, transparent) 349deg, color-mix(in srgb, var(--ts-beam-color) 40%, transparent) 360deg);
    }
}
@media (max-width: 699px) {
.ticketshop-hero::after {
        right: -60px;
        opacity: 0.5;
    }
}
/* Scheinwerfer, sichtbarer: zwei Kegel (innen schmal und hell, außen breit und weich) in einem Schwenk-Element, dezent
   abgedunkelte Fläche unter dem Strahl, Lichtquelle bei ca. 77 % der Kopfbreite. Alle Kegel nutzen --ts-beam-color. -- */
.ticketshop-hero::after {
    left: min(calc(77% - 220px), calc(100% - 460px));
    right: auto;
    background:
        radial-gradient(circle at 50% 5px, rgba(255, 255, 255, 0.95) 0, rgba(230, 242, 255, 0.55) 9px, rgba(190, 220, 255, 0) 60px),
        conic-gradient(from 180deg at 50% 5px, rgba(235, 245, 255, 0.5) 0deg, rgba(235, 245, 255, 0.36) 4deg, rgba(235, 245, 255, 0.16) 7deg, rgba(235, 245, 255, 0) 9.5deg, rgba(235, 245, 255, 0) 350.5deg, rgba(235, 245, 255, 0.16) 353deg, rgba(235, 245, 255, 0.36) 356deg, rgba(235, 245, 255, 0.5) 360deg),
        conic-gradient(from 180deg at 50% 5px, rgba(205, 228, 255, 0.2) 0deg, rgba(205, 228, 255, 0.13) 10deg, rgba(205, 228, 255, 0.05) 20deg, rgba(205, 228, 255, 0) 27deg, rgba(205, 228, 255, 0) 333deg, rgba(205, 228, 255, 0.05) 340deg, rgba(205, 228, 255, 0.13) 350deg, rgba(205, 228, 255, 0.2) 360deg);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.ticketshop-hero::after {
        background:
            radial-gradient(circle at 50% 5px, rgba(255, 255, 255, 0.95) 0, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 55%, #fff) 70%, transparent) 9px, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 64px),
            conic-gradient(from 180deg at 50% 5px,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 52%, transparent) 0deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 38%, transparent) 4deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 17%, transparent) 7deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 0%, transparent) 9.5deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 0%, transparent) 350.5deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 17%, transparent) 353deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 38%, transparent) 356deg,
                color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 60%, #fff) 52%, transparent) 360deg),
            conic-gradient(from 180deg at 50% 5px,
                color-mix(in srgb, var(--ts-beam-color) 22%, transparent) 0deg,
                color-mix(in srgb, var(--ts-beam-color) 15%, transparent) 10deg,
                color-mix(in srgb, var(--ts-beam-color) 6%, transparent) 20deg,
                color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 27deg,
                color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 333deg,
                color-mix(in srgb, var(--ts-beam-color) 6%, transparent) 340deg,
                color-mix(in srgb, var(--ts-beam-color) 15%, transparent) 350deg,
                color-mix(in srgb, var(--ts-beam-color) 22%, transparent) 360deg),
            conic-gradient(from 180deg at 50% 5px, rgba(2, 8, 34, 0.3) 0deg, rgba(2, 8, 34, 0.3) 20deg, rgba(2, 8, 34, 0) 32deg, rgba(2, 8, 34, 0) 328deg, rgba(2, 8, 34, 0.3) 340deg, rgba(2, 8, 34, 0.3) 360deg);
    }
}
@media (max-width: 699px) {
.ticketshop-hero::after {
        left: calc(70% - 220px);
        opacity: 0.6;
    }
}
.ticketshop-hero::after {
    left: min(calc(77% - 260px), calc(100% - 500px));
    width: 520px;
    height: 520px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 45%, rgba(0, 0, 0, 0) 100%);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.ticketshop-hero::after,
    .ticketshop-hero > .ticketshop-hero__beam {
        background:
            radial-gradient(circle at 50% 5px, rgba(255, 255, 255, 0.95) 0, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 70%, transparent) 9px, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 64px),
            conic-gradient(from 180deg at 50% 5px, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 42%, transparent) 0deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 31%, transparent) 4deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 14%, transparent) 7deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 0%, transparent) 9.5deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 0%, transparent) 350.5deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 14%, transparent) 353deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 31%, transparent) 356deg, color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 50%, #fff) 42%, transparent) 360deg),
            conic-gradient(from 180deg at 50% 5px, color-mix(in srgb, var(--ts-beam-color) 20%, transparent) 0deg, color-mix(in srgb, var(--ts-beam-color) 14%, transparent) 10deg, color-mix(in srgb, var(--ts-beam-color) 6%, transparent) 20deg, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 27deg, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 333deg, color-mix(in srgb, var(--ts-beam-color) 6%, transparent) 340deg, color-mix(in srgb, var(--ts-beam-color) 14%, transparent) 350deg, color-mix(in srgb, var(--ts-beam-color) 20%, transparent) 360deg),
            conic-gradient(from 180deg at 50% 5px, rgba(2, 8, 34, 0.26) 0deg, rgba(2, 8, 34, 0.26) 20deg, rgba(2, 8, 34, 0) 32deg, rgba(2, 8, 34, 0) 328deg, rgba(2, 8, 34, 0.26) 340deg, rgba(2, 8, 34, 0.26) 360deg);
    }
}
@media (max-width: 899px) {
.ticketshop-hero::after {
        left: min(calc(77% - 200px), calc(100% - 440px));
        width: 400px;
        height: 400px;
    }
}
@media (max-width: 699px) {
.ticketshop-hero::after {
        left: calc(70% - 200px);
        opacity: 0.6;
    }
}
@media (prefers-reduced-motion: reduce) {
.ticketshop-hero::after {
        transform: rotate(25deg);
    }
.ticketshop-hero > .ticketshop-hero__beam {
        transform: rotate(-25deg);
    }
}
.ticketshop-hero::after {
    transform: rotate(calc(var(--ts-aim) * 1deg));
    animation: ts-aim 7s ease-in-out infinite alternate;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.ticketshop-hero::after {
        animation: ts-aim 7s ease-in-out infinite alternate, ts-beam-color 28s linear infinite;
    }
}
/* Reflex-Ebene: liegt im Plakat-Knopf über dem Bild (gleiche Neigung, gleiche Ecken), unter dem Lupen-Symbol */
.ticketshop-hero__zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 6px;
    background: radial-gradient(ellipse 75% 60% at calc((-1 * var(--ts-aim) - 4) * 2%) calc(100% - (-1 * var(--ts-aim) - 4) * 1.4%), rgba(210, 232, 255, 0.5) 0, rgba(210, 232, 255, 0.22) 45%, rgba(210, 232, 255, 0) 100%);
    mix-blend-mode: screen;
    opacity: clamp(0, calc((-1 * var(--ts-aim) - 4) / 14), 1);
    pointer-events: none;
    transform: rotate(3deg);
    transition: transform 0.2s ease;
    animation: ts-aim 7s ease-in-out infinite alternate;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.ticketshop-hero__zoom::after {
        --ts-beam-color: #59c7ff;
        background: radial-gradient(ellipse 75% 60% at calc((-1 * var(--ts-aim) - 4) * 2%) calc(100% - (-1 * var(--ts-aim) - 4) * 1.4%), color-mix(in srgb, color-mix(in srgb, var(--ts-beam-color) 45%, #fff) 52%, transparent) 0, color-mix(in srgb, var(--ts-beam-color) 26%, transparent) 45%, color-mix(in srgb, var(--ts-beam-color) 0%, transparent) 100%);
        animation: ts-aim 7s ease-in-out infinite alternate, ts-beam-color 28s linear infinite;
    }
}
.ticketshop-hero__zoom:hover::after,
.ticketshop-hero__zoom:focus-visible::after {
    transform: rotate(3deg) scale(1.03);
}
.ticketshop-hero__zoomicon {
    z-index: 2;
}
@media (max-width: 899px) {
.ticketshop-hero__zoom::after {
        opacity: calc(clamp(0, calc((-1 * var(--ts-aim) - 4) / 14), 1) * 0.7);
    }
}
@media (prefers-reduced-motion: reduce) {
/* Reduzierte Bewegung: keine wandernde Beleuchtung, Scheinwerfer statisch */
.ticketshop-hero__zoom::after {
        display: none;
    }
.ticketshop-hero::after {
        animation: none;
        transform: rotate(25deg);
    }
}
@media (max-width: 767px) {
/* Handy: kompakter Kopf über dem Saalplan, damit der Plan im ersten Bildschirm beginnt (0.10.42) ----------------------- */
.ticketshop .ticketshop-hero--compact {
        gap: 0.4rem;
        padding: 0.7rem 0.9rem;
    }
.ticketshop .ticketshop-hero--compact::after,
    .ticketshop .ticketshop-hero--compact .ticketshop-hero__beam,
    .ticketshop .ticketshop-hero--compact .ticketshop-hero__confetti,
    .ticketshop .ticketshop-hero--compact .ticketshop-hero__casino,
    .ticketshop .ticketshop-hero--compact .ticketshop-hero__kicker,
    .ticketshop .ticketshop-hero--compact .ticketshop-infolist {
        display: none;
    }
.ticketshop .ticketshop-hero--compact .ticketshop-hero__title {
        margin: 0 0 0.3rem;
        font-size: 1.2rem;
    }
.ticketshop .ticketshop-hero--compact .ticketshop-hero__actions {
        margin: 0.3rem 0 0;
    }
.ticketshop .ticketshop-hero--compact .ticketshop-hero__actions .ticketshop-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }
.ticketshop .ticketshop-hero--compact .ticketshop-chips {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.2rem 0.9rem;
        margin-bottom: 0.3rem;
        font-size: 0.85rem;
    }
.ticketshop .ticketshop-hero--compact .ticketshop-hero__price {
        margin: 0;
        font-size: 0.9rem;
    }
}
/* Kassen-Symbolleiste: sichtbare Beschriftung (Tooltips gibt es auf Touch-Geräten nicht) (0.10.42) -------------------- */
.ticketshop-toolbtn--labeled {
    width: auto;
    min-height: 2.75rem;
    padding: 0 0.8rem;
    gap: 0.45rem;
}
.ticketshop-toolbtn__text {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
}
@media (max-width: 479px) {
.ticketshop-toolbtn--labeled .ticketshop-toolbtn__text {
        display: none;
    }
.ticketshop-toolbtn--labeled {
        width: 2.75rem;
        padding: 0;
    }
}
.ticketshop-progress__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ticketshop-progress__item + .ticketshop-progress__item::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--ts-border);
}
.ticketshop-progress__dot {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ts-border);
    color: var(--ts-ink);
    font-size: 0.8rem;
}
.ticketshop-progress__item.is-done .ticketshop-progress__dot {
    background: var(--ts-success);
    color: #ffffff;
}
.ticketshop-progress__item.is-current .ticketshop-progress__dot {
    background: var(--ts-blue);
    color: #ffffff;
}
/* Schnellwahl über dem Saalplan (0.10.42) --------------------------------------------------------------------------- */
.ticketshop-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--ts-radius, 14px);
    background: var(--ts-blue-soft, #e8eefb);
}
.ticketshop-quick__label {
    font-size: 0.9rem;
}
.ticketshop-quick__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ticketshop-quick__chip {
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--ts-blue, #003398);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ts-blue, #003398);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
@media (min-width: 640px) {
.ticketshop-quick__go {
        margin-left: auto;
    }
}
/* Kopf über dem Plan: keine Dauer-Animationen (Plan, Kasse und Einlass sollen ruhig und schnell bleiben) */
.ticketshop-hero--compact::after,
.ticketshop-hero--compact .ticketshop-hero__beam,
.ticketshop-hero--compact .ticketshop-hero__confetti,
.ticketshop-hero--compact .ticketshop-hero__casino,
.ticketshop-hero--compact .ticketshop-hero__casino * {
    animation: none;
}
/* Umschalter Wartebildschirm | Verkaufsansicht (Vorschau) für Berechtigte (0.10.56) ------------------------------------ */
.ticketshop-previewswitch {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1.5px solid var(--ts-gold, #e8b400);
    border-radius: 999px;
    background: #fff9e0;
}
.ticketshop-previewswitch__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    color: #5b4500;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}
a.ticketshop-previewswitch__opt:hover,
a.ticketshop-previewswitch__opt:focus-visible {
    background: #ffefb0;
    color: #3b2c00;
}
.ticketshop-previewswitch__opt.is-active {
    background: var(--ts-gold, #e8b400);
    color: #1b2233;
}
@media (max-width: 479px) {
.ticketshop-previewswitch {
        flex-wrap: wrap;
        border-radius: 18px;
    }
.ticketshop-previewswitch__opt {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Plakat klein in der Kopfzeile der Kasse (ohne Sitzplätze) */
.ticketshop-boxg .ticketshop-boxg__poster {
    float: right;
    width: 6rem;
    height: auto;
    max-height: 9rem;
    margin: 0 0 0.5rem 1rem;
    object-fit: cover;
    border-radius: var(--ts-radius-sm);
    box-shadow: var(--ts-shadow);
    border: 1px solid var(--ts-border);
    background: var(--ts-soft);
}
.ticketshop-boxg .ticketshop-boxg__toolbar {
    clear: both;
}
@media (max-width: 479px) {
    .ticketshop-boxg .ticketshop-boxg__poster {
        width: 4.5rem;
        margin-left: 0.75rem;
    }
}/* Kaufweg (Kartenwahl und Bestellformular): Kopf ohne Terminkacheln, auch am Desktop (0.10.76) --------------------------- */
.ticketshop .ticketshop-hero--checkout .ticketshop-infolist {
    display: none;
}
/* Kaufweg: Warenkorb quer über die ganze Breite direkt unter dem Kopf, „Gut zu wissen“ darunter (0.10.77) ------------- */
.ticketshop-order__grid--stack {
    grid-template-columns: minmax(0, 1fr);
}
.ticketshop-order__grid--stack .ticketshop-order__aside {
    order: -1;
    position: static;
}
/* Preiszeile im Kopf: Preis links, „Ticket verloren?“ rechts auf einer Linie mit der Kartenbreite (0.10.80) ------------ */
.ticketshop .ticketshop-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}
.ticketshop .ticketshop-hero__foot .ticketshop-hero__price {
    margin: 0;
}
.ticketshop .ticketshop-hero__lost {
    margin-left: auto;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}
/* „Ticket verloren?“ im Kopf des Kaufwegs: ab 760 px in die untere rechte Ecke der Karte (0.10.81) ---------------------- */
@media (min-width: 760px) {
.ticketshop .ticketshop-hero--compact .ticketshop-hero__lost {
        position: absolute;
        right: 1.5rem;
        bottom: 1rem;
        z-index: 2;
        margin: 0;
    }
}
/* Terminkacheln im Kopf: laufender Schritt „Jetzt“, sonst der nächste „Als Nächstes“ (wie die Schritte der Veranstaltungsliste) (0.10.82) */
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card--now {
    border-color: rgba(120, 226, 160, 0.75);
    background: rgba(34, 160, 90, 0.24);
}
.ticketshop-hero .ticketshop-infolist li.ticketshop-infolist__card--next {
    border-color: rgba(255, 215, 94, 0.75);
    background: rgba(255, 204, 51, 0.15);
}
/* Symbole der Kacheln im Kopf als Kreis; bei „Jetzt“/„Als Nächstes“ von Anfang an golden gefüllt, Marke als eigene Zeile darüber (0.10.83) */
.ticketshop .ticketshop-hero .ticketshop-infolist__card .ticketshop-infolist__head .fa-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.8rem;
    filter: none;
}
.ticketshop .ticketshop-hero .ticketshop-infolist__card--next .ticketshop-infolist__head .fa-solid,
.ticketshop .ticketshop-hero .ticketshop-infolist__card--now .ticketshop-infolist__head .fa-solid {
    background: var(--ts-gold);
    color: var(--ts-blue-dark);
}
.ticketshop .ticketshop-hero .ticketshop-infolist__card--now .ticketshop-infolist__head .fa-solid {
    background: #15803d;
    color: #ffffff;
}
.ticketshop-infolist__kicker {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ts-gold);
}
.ticketshop-infolist__card--now .ticketshop-infolist__kicker {
    color: #7be2a0;
}