/* ==========================================================================
   RUN.EVENTS WIDGETS — Tickets/Registration (runevents-tickets)
   Angepasst an das OPS-2027-Design.

   Geändert wurde:
   1. Äußerer Innenabstand von 1,5 rem entfernt, der OPS-Buchungsblock
      bringt seinen eigenen mit
   2. Keine Schlagschatten, keine Einblendanimation
   3. Ticketname in Weiß auf dunkler Fläche statt Magenta auf magentafarbenem
      Schleier, damit er als Überschrift wirkt
   4. Gutscheinfeld und Auswahlfeld mit deutlichem Rahmen und dunklem Grund,
      dazu color-scheme: dark, damit die aufgeklappte Liste dunkel erscheint
   5. Zusammenfassung rechts auf Flächen statt farbige Schleier
   6. Steuerhinweis hinter den Preisen, zweisprachig, siehe Hinweis unten

   Der Spaltenabstand kommt aus --space-lg, der äußere Innenabstand aus
   --space-xl. Beide sind im OPS-Variablenblock gesetzt.
   ========================================================================== */

/* GEÄNDERT: 1.5rem entfernt */
#pb-495 runevents-tickets{
    display: block;
    padding: 0;
    container-type: inline-size;
    container-name: re-tickets-container;
}


/* --------------------------------------------------------------------------
   Rahmen
   GEÄNDERT: kein Schatten, keine Animation
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets,#pb-495 runevents-tickets .re-tickets,#pb-495 runevents-tickets > .re-tickets,#pb-495 div.re-tickets{
    background: var(--color-surface);
    font-family: var(--font-body);
    color: var(--color-text);
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: none;
    animation: none;
}


/* --------------------------------------------------------------------------
   Zweispaltiges Layout
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets > .side{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

#pb-495 .re-tickets > .side:first-of-type,#pb-495 .re-tickets > .side:first-child{
    padding-right: var(--space-lg);
}

#pb-495 .re-tickets > .side:nth-of-type(2){
    background: transparent;
    padding: 0;
}


/* --------------------------------------------------------------------------
   Buttons
   GEÄNDERT: mit Kontur, ohne Schatten, dunkle Schrift beim Überfahren
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .btn,#pb-495 .re-tickets button{
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
    border: 2px solid var(--color-primary) !important;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.2;
    padding: 0.8125rem var(--space-lg);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
    border-radius: var(--radius-sm) !important;
    box-shadow: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#pb-495 .re-tickets .btn:hover,#pb-495 .re-tickets button:hover{
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-text-on-secondary) !important;
    box-shadow: none;
}

#pb-495 .re-tickets .btn:focus-visible,#pb-495 .re-tickets button:focus-visible{
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    box-shadow: none;
}

#pb-495 .re-tickets .btn.full-width,#pb-495 .re-tickets button.full-width{
    width: 100%;
}


/* --------------------------------------------------------------------------
   Überschriften
   GEÄNDERT: Abschnittsüberschrift als kleine Versalien in Rosa,
   passend zu den OPS-Eyebrows
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets h2{
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 var(--space-md) 0;
}

#pb-495 .re-tickets h3,#pb-495 .re-tickets h4{
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

#pb-495 .re-tickets h4{
    font-size: var(--text-body);
}

#pb-495 .re-tickets h5{
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--color-text-inverse);
    margin: 0;
}

#pb-495 .re-tickets h6{
    font-size: var(--text-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-secondary);
    margin: 0;
}

#pb-495 .re-tickets .section{
    margin: 0;
    padding: 0;
}

#pb-495 .re-tickets .section h2{
    margin-bottom: var(--space-sm);
}


/* --------------------------------------------------------------------------
   Gutscheinzeile
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .btn-container{
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    align-items: stretch;
}

#pb-495 .re-tickets .btn-container input{
    flex: 1;
    min-width: 0;
}

#pb-495 .re-tickets .btn-container .btn{
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Ticketliste
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .scroll-section{
    max-height: none;
    height: auto;
    overflow: visible;
    padding-right: var(--space-md);
}

#pb-495 .re-tickets .flex-space{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}

#pb-495 .re-tickets .scroll-section > .flex-space{
    padding: var(--space-md);
    margin: 0 0 var(--space-sm) 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

#pb-495 .re-tickets .scroll-section > .flex-space:hover{
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: var(--color-bg);
}

#pb-495 .re-tickets .scroll-section > .flex-space:last-child{
    margin-bottom: 0;
}

#pb-495 .re-tickets .scroll-section > .flex-space > div:empty{
    display: none;
}

#pb-495 .re-tickets .price{
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

#pb-495 .re-tickets .price > .flex-space{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
}

/* GEÄNDERT: Ticketname in Weiß, ohne farbigen Kasten */
#pb-495 .re-tickets .price > .flex-space > h4:first-child{
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: none;
    color: var(--color-text-inverse);
    padding: 0;
    border: none;
    border-radius: 0;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.018em;
    margin: 0;
    flex: none;
}

#pb-495 .re-tickets .price > .flex-space > .flex-space{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: space-between;
}

#pb-495 .re-tickets .price > .flex-space > .flex-space h4{
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--color-text-inverse);
    white-space: nowrap;
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    margin: 0;
    flex: none;
}

/* Durchgestrichener Altpreis dezenter */
#pb-495 .re-tickets .price h4[style*="line-through"]{
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
}

#pb-495 .re-tickets .price small{
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Steuerhinweis hinter den Preisen, zweisprachig

   SO WIRD UMGESCHALTET
   Deutsch ist die Grundeinstellung, dafuer ist nichts zu tun.
   Fuer die englische Fassung die Klasse ops27-en am umgebenden Element
   ergaenzen, also im HTML-Block der englischen Ticketseite:

       <div class="ops27 ops27-en">

   Das Attribut lang taugt hier nicht, weil der Hub auf allen Seiten
   dieselbe Sprache eintraegt.

   SAUBERER WAERE: den Hinweis in run.events in die Ticketbeschreibung
   schreiben. Dann steht er in den Daten, ist je Sprache pflegbar und wird
   von Screenreadern gelesen. Bei einer Steuerangabe am Preis ist das
   relevant, weil es eine Pflichtangabe ist. Wenn ihr das tut, diesen ganzen
   Block loeschen.
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .price > .flex-space > .flex-space h4::after{
    content: " zzgl. USt.";
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

#pb-495 .ops27-en .re-tickets .price > .flex-space > .flex-space h4::after{
    content: " plus VAT";
}

/* Hinter dem durchgestrichenen Altpreis kein Hinweis */
#pb-495 .re-tickets .price h4[style*="line-through"]::after,#pb-495 .ops27-en .re-tickets .price h4[style*="line-through"]::after{
    content: "";
}


/* --------------------------------------------------------------------------
   Auswahlfeld
   GEÄNDERT: dunkler Grund, deutlicher Rahmen, color-scheme für die
   aufgeklappte Liste
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .price > .flex-space > .flex-space select,#pb-495 .re-tickets select{
    width: auto;
    min-width: 72px;
    max-width: 100px;
    flex: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse);
    color-scheme: dark;
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--text-body);
    font-family: var(--font-body);
    min-height: 40px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

#pb-495 .re-tickets select option{
    background: var(--color-bg);
    color: var(--color-text-inverse);
}

#pb-495 .re-tickets select:hover{
    border-color: var(--color-secondary);
}

#pb-495 .re-tickets select:focus{
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   Eingabefelder
   GEÄNDERT: kräftigerer Rahmen, damit das Gutscheinfeld als Feld erkennbar ist
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets input[type="text"],#pb-495 .re-tickets input[type="email"],#pb-495 .re-tickets input[type="search"],#pb-495 .re-tickets textarea{
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-body);
    font-family: var(--font-body);
    min-height: 44px;
    width: 100%;
    transition: border-color var(--transition-fast);
}

#pb-495 .re-tickets input::placeholder,#pb-495 .re-tickets textarea::placeholder{
    color: var(--color-text-muted);
    opacity: 1;
}

#pb-495 .re-tickets input[type="text"]:focus,#pb-495 .re-tickets input[type="email"]:focus,#pb-495 .re-tickets input[type="search"]:focus,#pb-495 .re-tickets textarea:focus{
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   Zusammenfassung rechts
   GEÄNDERT: Flächen statt farbige Schleier
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets > .side:nth-of-type(2) > div:first-child{
    flex: 1;
    display: flex;
    flex-direction: column;
}

#pb-495 .re-tickets > .side:nth-of-type(2) .section{
    margin: 0;
    padding: 0;
}

#pb-495 .re-tickets > .side:nth-of-type(2) .section .add-spacing{
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin: var(--space-sm) 0 var(--space-md) 0;
    min-height: 100px;
}

#pb-495 .re-tickets > .side:nth-of-type(2) .section .add-spacing > div{
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

#pb-495 .re-tickets > .side:nth-of-type(2) .section .add-spacing > div:last-child{
    border-bottom: none;
}

#pb-495 .re-tickets > .side:nth-of-type(2) > div:first-child > .flex-space.add-spacing{
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-top: auto;
    border-left: 3px solid var(--color-primary);
}

#pb-495 .re-tickets > .side:nth-of-type(2) > div:last-child{
    margin-top: var(--space-md);
}

#pb-495 .re-tickets .redirect-footer{
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

#pb-495 .re-tickets .redirect-footer img{
    vertical-align: middle;
    margin-left: var(--space-xs);
}


/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets .success{
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin: var(--space-md) 0;
}

#pb-495 .re-tickets .error{
    background-color: var(--color-error) !important;
    color: var(--color-text-inverse) !important;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin: var(--space-md) 0;
}

#pb-495 .re-tickets .loading{
    opacity: 0.7;
    pointer-events: none;
}


/* ==========================================================================
   Anpassung an die Breite des Containers
   ========================================================================== */
@container re-tickets-container (max-width: 700px) {
    #pb-495 .re-tickets{
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-md);
    }

    #pb-495 .re-tickets > .side:first-of-type,#pb-495 .re-tickets > .side:first-child{
        padding-right: 0;
    }

    #pb-495 .re-tickets > .side:nth-of-type(2){
        flex: none;
        width: 100%;
    }

    #pb-495 .re-tickets .scroll-section{
        padding-right: 0;
    }

    #pb-495 .re-tickets .btn-container{
        flex-direction: column;
    }
}

@container re-tickets-container (max-width: 450px) {
    #pb-495 .re-tickets{
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    #pb-495 .re-tickets .price > .flex-space > h4:first-child{
        font-size: 1rem;
    }

    #pb-495 .re-tickets .price > .flex-space > .flex-space{
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    #pb-495 .re-tickets select{
        min-width: 64px;
    }

    #pb-495 .re-tickets .btn,#pb-495 .re-tickets button{
        padding: 0.625rem var(--space-md);
        font-size: var(--text-small);
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        #pb-495 .re-tickets{
            flex-direction: column;
            padding: var(--space-md);
            gap: var(--space-md);
        }

        #pb-495 .re-tickets > .side:first-of-type,#pb-495 .re-tickets > .side:first-child{
            padding-right: 0;
        }

        #pb-495 .re-tickets > .side:nth-of-type(2){
            flex: none;
            width: 100%;
        }

        #pb-495 .re-tickets .scroll-section{
            padding-right: 0;
        }

        #pb-495 .re-tickets .price > .flex-space{
            flex-direction: column;
            align-items: flex-start;
        }

        #pb-495 .re-tickets .price > .flex-space > .flex-space{
            width: 100%;
            justify-content: space-between;
            margin-top: var(--space-sm);
        }

        #pb-495 .re-tickets .btn-container{
            flex-direction: column;
        }
    }
}


/* --------------------------------------------------------------------------
   Voreingestelltes Rot von run.events auf die Eventfarbe umlenken
   -------------------------------------------------------------------------- */
#pb-495 .re-tickets *[style*="background-color: #ee255a"],#pb-495 .re-tickets *[style*="background-color: rgb(238, 37, 90)"],#pb-495 .re-tickets *[style*="background: #ee255a"],#pb-495 .re-tickets *[style*="background: rgb(238, 37, 90)"],#pb-495 .re-tickets .notification,#pb-495 .re-tickets .alert,#pb-495 .re-tickets .warning,#pb-495 .re-tickets .info-banner{
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

#pb-495 runevents-tickets [style*="background-color: #ee255a"],#pb-495 runevents-tickets [style*="background-color: rgb(238, 37, 90)"],#pb-495 runevents-tickets [style*="background: #ee255a"],#pb-495 runevents-tickets [style*="background: rgb(238, 37, 90)"]{
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}