/**
 * Tickets Pro - Frontend Styles
 * 
 * Fully integrated with Ensemble Designer CSS Variables
 * Following the same pattern as ensemble-frontend.css and booking-engine
 * 
 * Variable Hierarchy:
 * 1. Designer variables (--ensemble-*) from active Layout Set
 * 2. Sensible fallbacks matching Ensemble defaults
 *
 * @package Ensemble
 * @subpackage Addons/TicketsPro
 * @since 3.2.0
 */

/* ============================================
   TICKET FORM CONTAINER
   ============================================ */

.es-ticket-form {
    margin: 24px 0;
}

.es-ticket-form-title {
    margin: 0 0 16px 0;
    font-size: var(--ensemble-h4-size, 18px);
    font-weight: var(--ensemble-heading-weight, 600);
    font-family: var(--ensemble-font-heading, inherit);
    color: var(--ensemble-card-text, inherit);
}

/* ============================================
   EXTERNAL TICKETS (Third-party providers)
   ============================================ */

.es-external-tickets {
    margin-bottom: 30px;
}

.es-tickets-section-title {
    font-size: var(--ensemble-h4-size, 18px);
    font-weight: var(--ensemble-heading-weight, 600);
    font-family: var(--ensemble-font-heading, inherit);
    margin: 0 0 15px;
    color: var(--ensemble-card-text, inherit);
}

.es-external-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.es-external-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--ensemble-card-bg, transparent);
    border: 2px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-card-radius, 12px);
    text-decoration: none;
    color: var(--ensemble-card-text, inherit);
    transition: all 0.2s ease;
    border-left: 4px solid var(--provider-color, #6b7280);
}

.es-external-ticket:hover:not(.es-disabled) {
    border-color: var(--provider-color, #6b7280);
    box-shadow: var(--ensemble-card-shadow-hover, 0 4px 12px rgba(0,0,0,0.1));
    transform: translateY(-2px);
}

.es-external-ticket.es-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ensemble-surface, transparent);
}

.es-ext-ticket-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.es-ext-ticket-name {
    font-weight: var(--ensemble-heading-weight, 600);
    font-size: 16px;
    color: var(--ensemble-card-text, inherit);
}

.es-ext-ticket-price {
    font-size: 14px;
    color: var(--ensemble-card-text-secondary, inherit);
}

.es-ext-ticket-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--ensemble-tag-radius, 4px);
    font-size: 12px;
    font-weight: 500;
}

.es-ext-ticket-status.es-status-limited,
.es-ext-ticket-status.es-status-few_left {
    background: color-mix(in srgb, var(--ensemble-warning, #f59e0b) 18%, transparent);
    color: var(--ensemble-warning-text, #856404);
}

.es-ext-ticket-status.es-status-sold_out,
.es-ext-ticket-status.es-status-cancelled {
    background: color-mix(in srgb, var(--ensemble-danger, #ef4444) 15%, transparent);
    color: var(--ensemble-danger-text, #721c24);
}

.es-ext-ticket-status.es-status-presale {
    background: color-mix(in srgb, var(--ensemble-info, #3b82f6) 15%, transparent);
    color: var(--ensemble-info-text, #004085);
}

.es-ext-ticket-provider {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ensemble-card-text-secondary, inherit);
}

.es-ext-ticket-provider .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ============================================
   PAID TICKETS CONTAINER
   ============================================ */

.es-paid-tickets {
    background: var(--ensemble-card-bg, transparent);
    border: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-card-radius, 12px);
    padding: 24px;
}

.es-ticket-section {
    margin-bottom: 24px;
}

.es-ticket-section:last-child {
    margin-bottom: 0;
}

/* ============================================
   TICKET CATEGORY CARDS
   ============================================ */

.es-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.es-ticket-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--ensemble-surface, transparent);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-card-radius, 12px);
    transition: all 0.2s ease;
}

.es-ticket-item:hover {
    border-color: var(--ensemble-primary, #667eea);
    box-shadow: var(--ensemble-card-shadow-hover, 0 4px 16px rgba(0,0,0,0.12));
}

.es-ticket-item.es-sold-out {
    opacity: 0.6;
    pointer-events: none;
}

.es-ticket-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.es-ticket-name {
    display: block;
    font-weight: var(--ensemble-heading-weight, 600);
    font-size: 16px;
    color: var(--ensemble-card-text, inherit);
}

.es-ticket-description {
    display: block;
    font-size: 14px;
    color: var(--ensemble-card-text-secondary, inherit);
}

.es-ticket-availability {
    font-size: 13px;
    color: var(--ensemble-card-text-muted, inherit);
}

.es-ticket-availability.es-limited {
    color: var(--ensemble-warning, #f59e0b);
    font-weight: 500;
}

.es-ticket-availability.es-sold-out {
    color: var(--ensemble-danger, #ef4444);
    font-weight: 600;
}

.es-ticket-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--ensemble-primary, #667eea);
    min-width: 80px;
    text-align: right;
}

/* ============================================
   QUANTITY SELECTOR
   ============================================ */

.es-ticket-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-button-radius, 8px);
    overflow: hidden;
}

.es-ticket-quantity button,
.es-qty-minus,
.es-qty-plus {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ensemble-card-bg, transparent);
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--ensemble-card-text-secondary, inherit);
    transition: all 0.2s ease;
}

.es-ticket-quantity button:hover,
.es-qty-minus:hover,
.es-qty-plus:hover {
    background: var(--ensemble-primary-light, rgba(102, 126, 234, 0.1));
    color: var(--ensemble-primary, #667eea);
}

.es-ticket-quantity input,
.es-ticket-qty-input {
    width: 52px;
    height: 36px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-right: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    font-size: 15px;
    font-weight: 600;
    color: var(--ensemble-card-text, inherit);
    background: var(--ensemble-card-bg, transparent);
    -moz-appearance: textfield;
}

.es-ticket-qty-input::-webkit-outer-spin-button,
.es-ticket-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.es-ticket-quantity input:focus {
    outline: none;
    border-color: var(--ensemble-primary, #667eea);
    box-shadow: 0 0 0 3px var(--ensemble-primary-light, rgba(102, 126, 234, 0.15));
}

/* ============================================
   ORDER SUMMARY
   ============================================ */

.es-order-summary {
    padding: 20px;
    background: var(--ensemble-surface, transparent);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-card-radius, 12px);
    box-shadow: var(--ensemble-card-shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 24px;
}

.es-order-summary-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: var(--ensemble-heading-weight, 600);
    color: var(--ensemble-card-text, inherit);
}

.es-order-summary-items {
    margin-bottom: 16px;
}

.es-order-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    font-size: 14px;
    color: var(--ensemble-card-text-secondary, inherit);
}

.es-order-summary-item:last-child {
    border-bottom: none;
}

.es-order-summary-total,
.es-order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 2px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    font-size: 18px;
    font-weight: 700;
    color: var(--ensemble-card-text, inherit);
}

.es-order-summary-total .es-total-price,
.es-order-total .es-total-price {
    color: var(--ensemble-primary, #667eea);
}

/* ============================================
   CUSTOMER FIELDS
   ============================================ */

.es-customer-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.es-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.es-field-label {
    font-weight: 500;
    font-size: 14px;
    color: var(--ensemble-card-text, inherit);
}

.es-field-input {
    padding: 10px 12px;
    border: 1px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-button-radius, 8px);
    font-size: 15px;
    background: var(--ensemble-card-bg, transparent);
    color: var(--ensemble-card-text, inherit);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.es-field-input:focus {
    border-color: var(--ensemble-primary, #667eea);
    outline: none;
    box-shadow: 0 0 0 3px var(--ensemble-primary-light, rgba(102, 126, 234, 0.15));
}

.es-required {
    color: var(--ensemble-danger, #ef4444);
}

/* ============================================
   PAYMENT GATEWAY SELECTION
   ============================================ */

.es-payment-selection {
    margin: 24px 0;
    padding: 20px;
    background: var(--ensemble-surface, transparent);
    border-radius: var(--ensemble-card-radius, 12px);
}

.es-payment-selection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: var(--ensemble-heading-weight, 600);
    color: var(--ensemble-card-text, inherit);
}

.es-payment-selection-title .dashicons {
    color: var(--ensemble-primary, #667eea);
}

.es-payment-gateways,
.es-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-payment-gateway-option,
.es-payment-option {
    position: relative;
    cursor: pointer;
}

.es-payment-gateway-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.es-payment-gateway-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--ensemble-card-bg, transparent);
    border: 2px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-card-radius, 12px);
    transition: all 0.2s ease;
}

.es-payment-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid var(--ensemble-card-border, rgba(128,128,128,.28));
    border-radius: var(--ensemble-button-radius, 8px);
    background: var(--ensemble-card-bg, transparent);
    transition: all 0.2s;
}

.es-payment-gateway-option:hover .es-payment-gateway-card,
.es-payment-option:hover {
    border-color: var(--ensemble-primary, #667eea);
}

.es-payment-gateway-input:checked + .es-payment-gateway-card {
    border-color: var(--ensemble-primary, #667eea);
    background: var(--ensemble-primary-light, rgba(102, 126, 234, 0.08));
}

.es-payment-option input[type="radio"] {
    margin-right: 12px;
    accent-color: var(--ensemble-primary, #667eea);
}

.es-payment-option input[type="radio"]:checked + .es-payment-label {
    font-weight: 600;
}

.es-payment-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ensemble-card-text, inherit);
}

.es-payment-gateway-icon {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.es-payment-gateway-icon img,
.es-payment-icon {
    max-width: 100%;
    max-height: 100%;
    height: 24px;
    width: auto;
    object-fit: contain;
}

.es-payment-gateway-info {
    flex: 1;
}

.es-payment-gateway-name {
    font-weight: var(--ensemble-heading-weight, 600);
    color: var(--ensemble-card-text, inherit);
}

.es-payment-gateway-desc {
    display: block;
    font-size: 13px;
    color: var(--ensemble-card-text-secondary, inherit);
}

.es-payment-gateway-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.es-payment-gateway-check .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--ensemble-primary, #667eea);
}

.es-payment-gateway-input:checked ~ .es-payment-gateway-card .es-payment-gateway-check {
    opacity: 1;
}

.es-payment-test-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    background: var(--ensemble-warning, #f59e0b);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--ensemble-tag-radius, 12px);
}

/* ============================================
   TERMS & SUBMIT
   ============================================ */

.es-terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--ensemble-card-text, inherit);
}

.es-terms-checkbox input {
    margin-top: 2px;
    accent-color: var(--ensemble-primary, #667eea);
}

.es-terms-checkbox a {
    color: var(--ensemble-primary, #667eea);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.es-terms-checkbox a:hover {
    color: var(--ensemble-secondary, #764ba2);
}

/* ============================================
   CHECKOUT / SUBMIT BUTTONS
   ============================================ */

.es-checkout-btn,
.es-ticket-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ensemble-button-text, #ffffff);
    background: var(--ensemble-button-bg, var(--ensemble-primary, #667eea));
    border: none;
    border-radius: var(--ensemble-button-radius, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.es-checkout-btn:hover,
.es-ticket-submit-btn:hover:not(:disabled) {
    background: var(--ensemble-button-hover-bg, var(--ensemble-secondary, #764ba2));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ensemble-primary-light, rgba(102, 126, 234, 0.3));
}

.es-checkout-btn:active,
.es-ticket-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.es-checkout-btn:disabled,
.es-ticket-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--ensemble-card-text-muted, inherit);
}

.es-checkout-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.es-ticket-form.es-loading {
    opacity: 0.6;
    pointer-events: none;
}

.es-ticket-form.es-loading .es-checkout-btn::after,
.es-ticket-form.es-loading .es-ticket-submit-btn::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: es-spin 0.8s linear infinite;
}

.es-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: es-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes es-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   NOTICES
   ============================================ */

.es-tickets-notice {
    padding: 16px;
    background: color-mix(in srgb, var(--ensemble-info, #3b82f6) 12%, transparent);
    border-radius: var(--ensemble-card-radius, 12px);
    color: var(--ensemble-info-text, #0c5460);
    display: flex;
    align-items: center;
    gap: 10px;
}

.es-tickets-notice .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.es-tickets-notice.es-notice-success {
    background: color-mix(in srgb, var(--ensemble-success, #10b981) 15%, transparent);
    color: var(--ensemble-success-text, #0f5132);
}

.es-tickets-notice.es-notice-warning {
    background: color-mix(in srgb, var(--ensemble-warning, #f59e0b) 18%, transparent);
    color: var(--ensemble-warning-text, #856404);
}

.es-tickets-notice.es-notice-error {
    background: color-mix(in srgb, var(--ensemble-danger, #ef4444) 15%, transparent);
    color: var(--ensemble-danger-text, #721c24);
}

/* ============================================
   FLOOR PLAN INTEGRATION
   ============================================ */

@keyframes es-pulse-highlight {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.es-ticket-item.es-highlight-pulse {
    animation: es-pulse-highlight 0.8s ease-out 2;
    border-color: var(--ensemble-success, #10b981) !important;
    background: rgba(16, 185, 129, 0.1);
}

.es-ticket-item.es-from-floor-plan {
    border-left: 3px solid var(--ensemble-success, #10b981);
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

.es-mode-dark .es-ticket-form,
.es-mode-dark .es-paid-tickets,
.es-mode-dark .es-external-tickets,
[data-theme="dark"] .es-ticket-form {
    --ensemble-card-bg: var(--ensemble-dark-card-bg, #1a1a2e);
    --ensemble-card-border: var(--ensemble-dark-card-border, #333);
    --ensemble-surface: var(--ensemble-dark-surface, #16162a);
    --ensemble-text: var(--ensemble-dark-text, #ffffff);
    --ensemble-text-secondary: var(--ensemble-dark-text-secondary, #aaa);
    --ensemble-text-muted: var(--ensemble-dark-text-muted, #777);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    .es-paid-tickets {
        padding: 16px;
    }

    /* HIER lag der Umbruch, den niemand bestellt hatte (bis 02.09.2026):
     *
     *     .es-ticket-item { flex-wrap: wrap; }
     *     .es-ticket-info { flex-basis: 100%; }
     *
     * 600 Punkte ist die Breite des FENSTERS, nicht der Karte. Die Ticketzeile
     * steht aber in einer Seitenspalte von vielleicht 240 Punkten — und auf
     * einem Telefon, wo diese Regel greift, ist sie im Gegenteil die breiteste
     * Stelle der Seite. Die Regel hat also genau dort umgebrochen, wo Platz
     * war, und dort nicht, wo es eng wurde.
     *
     * Der Umbruch haengt jetzt an 400 Punkten und steht bei den uebrigen
     * Zeilenregeln, nicht hier.
     */
    
    .es-payment-gateway-card {
        padding: 12px;
    }
    
    .es-payment-gateway-icon {
        width: 36px;
        height: 24px;
    }
    
    .es-external-ticket {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================================================
   RUHIGE TICKETLISTE (03.09.2026)

   Vorbild: eine Zeile je Ticket, Name links, Preis rechts in der Akzentfarbe,
   ausverkaufte Zeilen gedämpft mit Statuswort. Der Mengenwähler steht nicht
   dauerhaft in jeder Zeile, sondern erscheint, sobald man ein Ticket wählt —
   bei vier Preisstufen sind vier Wähler nebeneinander mehr Lärm als Hilfe.

   Die Klasse `es-tickets--quiet` setzt das JavaScript. Ohne JavaScript bleibt
   alles so, wie es war: alle Wähler sichtbar, jedes Ticket kaufbar.
   ============================================================================ */

.es-ticket-list.es-tickets--quiet .es-ticket-item {
    /* Umbrechen ist der sichere Grundzustand — eine Zeile wird daraus nur,
       wenn die Liste selbst breit genug ist. Die Container-Abfrage dazu steht
       im Stilblock der Vorlage (ticket-form.php), zusammen mit den übrigen
       Zeilenregeln; hier stehen nur die Zutaten der ruhigen Liste. */
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    cursor: pointer;
}

.es-ticket-list.es-tickets--quiet .es-ticket-item.es-sold-out {
    cursor: default;
    opacity: .55;
}

/* Der Preis trägt die Akzentfarbe — er ist die Information, die der Besucher
   sucht. Bei ausverkauften Zeilen fällt er bewusst in die Fließtextfarbe
   zurück, sonst wirbt eine Zeile, die nichts mehr zu geben hat. */
.es-ticket-list.es-tickets--quiet .es-ticket-price {
    color: var(--ensemble-primary, currentColor);
    font-weight: 600;
    white-space: nowrap;
}

.es-ticket-list.es-tickets--quiet .es-ticket-item.es-sold-out .es-ticket-price {
    color: var(--ensemble-card-text-muted, inherit);
    font-weight: 500;
}

/* Der Wähler erscheint erst bei Auswahl — und zwar in derselben Zeile.
   Bis 02.09.2026 stand hier flex-basis: 100%, der Wähler rutschte also unter
   Name und Preis. Nachdem die Zeile Platz bekommen hat (kein 80-Punkte-Preis,
   schmalerer Rand, kompakter Wähler), passen alle drei nebeneinander. Reicht es
   doch nicht, sorgt das flex-wrap der Zeile weiterhin für den Umbruch. */
.es-ticket-list.es-tickets--quiet .es-ticket-quantity {
    display: none;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.es-ticket-list.es-tickets--quiet .es-ticket-quantity { margin-left: auto; }

@container es-tickets (min-width: 300px) {
    .es-ticket-list.es-tickets--quiet .es-ticket-item { flex-wrap: nowrap; }
}

.es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected {
    cursor: default;
}

.es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected .es-ticket-quantity {
    display: flex;
}

/* Eine ausgewählte Zeile hebt sich ab, ohne zu leuchten. */
.es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected {
    border-color: var(--ensemble-primary, currentColor);
}

/* Hinweis „Zum Auswählen tippen" nur, solange nichts gewählt ist und die Zeile
   überfahren wird — auf Touch-Geräten ohnehin unsichtbar, dort führt der erste
   Tipp direkt zum Ziel. */
@media (hover: hover) {
    .es-ticket-list.es-tickets--quiet .es-ticket-item:not(.is-selected):not(.es-sold-out):hover {
        border-color: var(--ensemble-primary, currentColor);
    }
}

/* ============================================================================
   SCHMALE SEITENSPALTE MIT MENGENWÄHLER (09.10.2026)

   Ab 300 Punkten Listenbreite steht eine Ticketzeile einzeilig. Das reicht für
   Name und Preis, aber nicht, sobald der Mengenwähler dazukommt (gewähltes
   Ticket bzw. Liste ohne JavaScript): In der 313 Punkte breiten Seitenspalte
   des Nachtwerk-Themes blieben dem Namen rund 85 Punkte, „Tagesticket
   Samstag" brach Silbe für Silbe um. Bis 380 Punkte bricht eine Zeile mit
   Wähler deshalb um: Name oben über die ganze Breite, darunter Preis links und
   Wähler rechts.
   ============================================================================ */
@container es-tickets (max-width: 379px) {
    .es-ticket-list:not(.es-tickets--quiet) .es-ticket-item,
    .es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected {
        flex-wrap: wrap;
    }
    .es-ticket-list:not(.es-tickets--quiet) .es-ticket-item .es-ticket-info,
    .es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected .es-ticket-info {
        flex: 1 1 100%;
    }
    .es-ticket-list:not(.es-tickets--quiet) .es-ticket-item .es-ticket-price,
    .es-ticket-list.es-tickets--quiet .es-ticket-item.is-selected .es-ticket-price {
        margin-right: auto;
        margin-left: 0;
        text-align: left;
    }
}