/* ==========================================================================
   Web Font
   ========================================================================== */

/* Fliesstext: Poppins (bereits projektweit bewaehrt, gut lesbar).
   Headlines/Hero/Wordmark: Baloo 2 - rundliche, kraeftige Display-Schrift,
   die der bauchigen, kugeligen Headline-Typo auf dokomi.de am naechsten kommt
   (die exakte Originalschrift der Website ist nicht zweifelsfrei bestimmbar,
   daher bewusst die aehnlichste verfuegbare Google Font gewaehlt). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    /* Rundliche, verspielte Formensprache (Blob-Shapes, abgerundete Buttons/
       Karten auf dokomi.de) statt eckiger Kanten. */
    --dk-border-radius: 18px;
    /* Pink/Korallrot - die dominante Akzentfarbe aus Logo/Screenshots,
       uebernimmt hier die "primaere Interaktionsfarbe"-Rolle. */
    --dk-color-green: #FF3B5B;
    /* Gelb - eigener Ton (Wunschfarbe aus der Vorgabe des Veranstalters für
       .alert-warning), bewusst von der Akzentfarbe oben getrennt. */
    --dk-color-yellow: #FFCE51;
    /* Keine eigene Fehlerfarbe vorgegeben - Markenpink wiederverwendet. */
    --dk-color-red: #FF3B5B;
    --dk-color-gray: #000000;
    --dk-color-black: #000000;
    --dk-color-white: #FFFFFF;
    /* Zusaetzliche Markenfarben aus Screenshots/Vorgabe des Veranstalters. */
    --dk-color-blue: #2C46DB;
    --dk-color-skyblue: #6BB3EA;
    --dk-color-teal: #24B8A4;
    /* Einheitlich helles Theme (kein abgesetzter dunkler Header wie bei
       anderen Shops) - Inhaltsflaechen und Text entsprechend hell/dunkel. */
    --dk-color-surface: #FFFFFF;
    /* Kundenwunsch (Phase 3): statt komplett transparent/voller Deckkraft
       lieber ca. 20% Deckkraft auf heller Flaeche fuer diverse Content-Boxen
       (Crowdfunding-Wells, Ticketliste, Checkout-Spalten).
       Kundenwunsch (Korrektur): bei 20% Deckkraft auf reinem Weiss wirkten
       diese Flaechen optisch kaum vom weissen Seitenhintergrund zu
       unterscheiden und damit "noch eher weiss". Gleiche 20%-Deckkraft
       beibehalten, aber Grundfarbe auf das helle Markenblau
       (--dk-color-skyblue: #6BB3EA) umgestellt statt Weiss. */
    --dk-color-surface-faint: rgba(107, 179, 234, 0.2);
    --dk-color-text: #000000;
    /* Link-Hover: Markenpink. */
    --dk-color-link-hover: #FF3B5B;
    --dk-font-family: 'Poppins', Arial, Helvetica, sans-serif;
    /* Display-Schrift fuer Headlines/Hero/Wordmark-Elemente. */
    --dk-font-display: 'Baloo 2', 'Poppins', Arial, Helvetica, sans-serif;
    /* Dezenterer Schatten passend zum freundlichen, flachen Look. */
    --dk-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    /* Trennlinien zwischen Tickets/Artikeln: zwei schmale horizontale Balken. */
    --dk-divider-pattern-size: 8px;
    --dk-divider-bar-thickness: 2px;
    --dk-header-height: 3rem;
    --dk-safe-area-top: env(safe-area-inset-top, 0px);
    --dk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --dk-sticky-top-offset: calc(var(--dk-header-height) + var(--dk-safe-area-top) + 1.25rem);
    --dk-anchor-scroll-offset: calc(var(--dk-header-height) + var(--dk-safe-area-top) + 3rem);
    --dk-sticky-footer-btn-height: 2.25rem;
    --dk-info-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    --dk-clock-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    --dk-shopping-cart-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    --dk-trash-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
    --dk-menu-width: 80px;
    --dk-content-padding-x: 4vw;
    --dk-content-max-width: 100%;
    /* Platzhalter-Werte, bis das tatsaechliche DoKomi-Logo/-Seitenverhaeltnis
       vorliegt - bei Bedarf hier anpassen. */
    /* Kundenwunsch: 20% kleiner als zuvor (vorher 180/240/280px auf den drei
       Breakpoints) - gilt fuer alle drei Groessen unten. */
    --dk-logo-width: 144px;
    --dk-logo-aspect-ratio: 3332.9 / 2076.1;
    /* War zuvor negativ (z. B. -55px) - dadurch wurde das fixierte Logo vom
       oberen Viewport-Rand selbst abgeschnitten (nicht nur optisch ueberlappt,
       sondern tatsaechlich aus dem sichtbaren Bereich geschoben). Kundenwunsch:
       Logo vollstaendig sichtbar, oberhalb von "TICKETSHOP" - daher auf 0
       gesetzt (kein negativer Versatz mehr), auf allen Breakpoints. */
    --dk-logo-offset-top: 0px;
    --dk-logo-box-height: calc(var(--dk-logo-width) / (3332.9 / 2076.1));
    /* Kundenwunsch: etwas Luft oberhalb des Logos (zwischen Seitenanfang und
       Logo-Oberkante). Fliesst nur in die reservierte Flaeche oberhalb von
       "TICKETSHOP" ein (s. .cover .cover-content margin-top) - der Abstand
       zwischen Logo-Unterkante und "TICKETSHOP" (0.25rem) bleibt unveraendert. */
    --dk-logo-top-gap: 1rem;
}

/* ==========================================================================
   Headline-/Display-Schrift (Baloo 2)
   ========================================================================== */
/* Kraeftige, rundliche Headline-Typo wie auf dokomi.de: statt jede einzelne
   Ueberschriften-Regel im Grundtemplate anzufassen, hier zentral auf alle
   Headline-aehnlichen Elemente angewendet. */
h1, h2, h3, h4,
.jumbotron h1,
.cover .cover-content h2,
.media-heading,
.wrap.accordions .wrap_heading h2 {
    font-family: var(--dk-font-display);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
    font-size: 1rem
}
body {
    font-family: var(--dk-font-family);
    font-size: unset;
    line-height: 1.65rem;
}

body.v2 {
    color: var(--dk-color-text);
    background-color: var(--dk-color-surface);
    scroll-padding-top: var(--dk-anchor-scroll-offset);
}

html:has(body.v2) {
    scroll-padding-top: var(--dk-anchor-scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
    html:has(body.v2),
    body.v2 {
        scroll-behavior: smooth;
    }
}

p {
    margin: 1em 0
}

a {
    color: var(--dk-color-green, #FF3B5B);
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    text-decoration: none;
}
a:hover {
    color: var(--dk-color-white, #fff);
    text-decoration: none;
}

/* TicketPay: sichtbaren Browser/Bootstrap-Focus-Rahmen bei Link-Clicks entfernen */
body.v2 a:focus,
body.v2 a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Native select dropdowns – system light popup (Windows/Chrome: avoid white-on-white) */
body.v2 select {
    color-scheme: light;
}

body.v2 select option {
    color: var(--dk-color-black);
    background-color: var(--dk-color-white);
}

/* Fliesstext-Links (Infoboxen/Modals/Hinweiskaesten) in der Markenfarbe
   Pink statt dem hellen Grundtemplate-Link, damit sie auf der weissen
   Flaeche gut lesbar sind. */
body.v2 .wrap:not(.accordions) .wrap_content .well a,
body.v2 .wrap:not(.accordions) .wrap_content .well .items a,
body.v2 .modal .modal-body a:not(.btn),
body.v2 #content main .jumbotron.jumbotron-textonly a {
    color: var(--dk-color-green) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.12em;
}

body.v2 .wrap:not(.accordions) .wrap_content .well a :is(span, u, em, i, strong, b, font),
body.v2 .wrap:not(.accordions) .wrap_content .well .items a :is(span, u, em, i, strong, b, font),
body.v2 .modal .modal-body a:not(.btn) :is(span, u, em, i, strong, b, font),
body.v2 #content main .jumbotron.jumbotron-textonly a :is(span, u, em, i, strong, b, font) {
    color: inherit !important;
    text-decoration: none !important;
}

body.v2 .wrap:not(.accordions) .wrap_content .well a:hover,
body.v2 .wrap:not(.accordions) .wrap_content .well .items a:hover,
body.v2 .modal .modal-body a:not(.btn):hover,
body.v2 #content main .jumbotron.jumbotron-textonly a:hover,
body.v2 .wrap:not(.accordions) .wrap_content .well a:hover :is(span, u, em, i, strong, b, font),
body.v2 .wrap:not(.accordions) .wrap_content .well .items a:hover :is(span, u, em, i, strong, b, font),
body.v2 .modal .modal-body a:not(.btn):hover :is(span, u, em, i, strong, b, font),
body.v2 #content main .jumbotron.jumbotron-textonly a:hover :is(span, u, em, i, strong, b, font),
body.v2 .wrap:not(.accordions) .wrap_content .well a:focus,
body.v2 .wrap:not(.accordions) .wrap_content .well .items a:focus,
body.v2 .modal .modal-body a:not(.btn):focus,
body.v2 #content main .jumbotron.jumbotron-textonly a:focus,
body.v2 .wrap:not(.accordions) .wrap_content .well a:focus :is(span, u, em, i, strong, b, font),
body.v2 .wrap:not(.accordions) .wrap_content .well .items a:focus :is(span, u, em, i, strong, b, font),
body.v2 .modal .modal-body a:not(.btn):focus :is(span, u, em, i, strong, b, font),
body.v2 #content main .jumbotron.jumbotron-textonly a:focus :is(span, u, em, i, strong, b, font) {
    color: var(--dk-color-link-hover) !important;
    text-decoration: none !important;
}

/* Brand-brown surfaces – white typography (TicketPay CMS often injects inline #333) */
body.v2 .wrap:not(.accordions) .wrap_content .well {
    background-color: var(--dk-color-surface);
}

/* Crowdfunding-Rewards-Box (enthält .media-Liste statt reinem Fließtext) –
   Kundenwunsch: statt komplett transparent nun ca. 20% Deckkraft.
   :has(.media) unterscheidet diese Box von der sonst identischen
   .well.well-light.well-shadow Intro-Box (ohne .media) - die jetzt weiter
   unten im "Kundenwunsche DoKomi"-Block ebenfalls auf 20% gesetzt wird. */
body.v2 .wrap:not(.accordions) .wrap_content .well:has(.media) {
    background-color: var(--dk-color-surface-faint) !important;
}

body.v2 .wrap:not(.accordions) .wrap_content .well,
body.v2 .wrap:not(.accordions) .wrap_content .well .items {
    color: var(--dk-color-text) !important;
}

body.v2 .wrap:not(.accordions) .wrap_content .well :is(p, div, span, em, i, strong, b, font, u, li, td, th, small, h1, h2, h3, h4, h5, h6),
body.v2 .wrap:not(.accordions) .wrap_content .well .items :is(p, div, span, em, i, strong, b, font, u, li, td, th, small, h1, h2, h3, h4, h5, h6) {
    color: var(--dk-color-text) !important;
}

/* Dark accordion ticket copy – white (override inline #333 on dark wells) */
body.v2 .wrap.accordions .wrap_content .well .items .description,
body.v2 .wrap.accordions .wrap_content .well .items .description :is(p, div, span, em, i, strong, b, font, u, li, td, th, small) {
    color: var(--dk-color-text) !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .description a,
body.v2 .wrap.accordions .wrap_content .well .items .description a :is(span, u, em, i, strong, b, font) {
    color: var(--dk-color-green) !important;
}


/* ==========================================================================
   Hero
   ========================================================================== */

:root {
    --dk-hero-gap-status-input: 3.5rem;
}

body.v2:has(.cover) {
    background-color: var(--dk-color-surface);
}

.cover {
    --hero-mobile-height: 8rem;
    --hero-desktop-height: 15rem;
    --dk-hero-meta-size: clamp(0.9375rem, 3vw, 1.25rem);

    position: relative;
    overflow: visible;
    background: transparent;
}

/* Fixed viewport layer: image + gradient, height via aspect-ratio */
.cover .cover-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    z-index: 0;
    pointer-events: none;
}

body.v2:has(.navbar) .cover .cover-bg {
    left: var(--dk-menu-width);
    width: calc(100% - var(--dk-menu-width));
}

@media screen and (max-width: 1023px) {
    /* Auf schmalen, aber hohen Mobil-Screens reichte die per aspect-ratio
       berechnete Boxhoehe oft nicht bis zum unteren Viewport-Rand, wodurch
       das Hintergrundbild sichtbar "abgeschnitten" wirkte, bevor Inhalt es
       ueberdeckte. Stattdessen die Box direkt auf die volle Viewporthoehe
       setzen (wie gewuenscht: soll wie am Desktop komplett ausgefuellt sein) -
       dynamische Viewporthoehe (dvh) beruecksichtigt dabei ein-/ausblendende
       Mobil-Browserleisten, mit vh als Fallback fuer aeltere Browser. */
    .cover .cover-bg {
        aspect-ratio: unset;
        height: 100vh;
        height: 100dvh;
    }
}

.cover .cover-content {
    padding: 0;
    position: relative;
    margin-top: calc(var(--dk-header-height) + var(--dk-safe-area-top));
}
.cover .cover-content > .row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: var(--hero-mobile-height);
}

@media (min-width: 64rem) {
    .cover .cover-content > .row {
        height: var(--hero-desktop-height);
    }
}

/* Desktop: fixed hero height & typography */
@media (min-width: 768px) {
    :root {
        --dk-hero-gap-status-input: 4.5rem;
    }

    .cover {
        --hero-desktop-height: 21rem;
        --dk-hero-meta-size: 1.125rem;
    }

    .cover .cover-content > .row {
        height: var(--hero-desktop-height);
        min-height: var(--hero-desktop-height);
    }

    .cover .cover-content h2.text-uppercase {
        font-size: 2.75rem;
        line-height: 1.1;
    }
}

@media (min-width: 1200px) {
    .cover {
        --hero-desktop-height: 22rem;
    }

    .cover .cover-content h2.text-uppercase {
        font-size: 3rem;
    }
}
/* Page Hero Container */
.cover .cover-content > .row > *:first-child{
    width: 100%;
    text-align: center;
}
/*
 * Top bar – mirrors website .header > .container
 * TicketPay DOM: .wrapper-right > (.wrapper-right-logo + .wrapper-right-info)
 * Kundenwunsch: Header auf allen Breakpoints wie die vormalige Mobil-Variante
 * (zentriertes Logo + Pill-Nav im Hero-Flow) – keine fixe schwarze Topbar mehr.
 * Die eigentlichen Regeln dafuer liegen weiter unten (ehemals nur
 * @media max-width:767px, jetzt ungated fuer alle Breakpoints) und werden
 * hier nur noch fuer groessere Logo-Groessen auf breiteren Screens erweitert.
 */
@media (min-width: 768px) {
    :root {
        --dk-logo-width: 192px;
        /* Kundenwunsch: kein negativer Versatz mehr (siehe Basiswert oben) -
           das Logo wird dadurch nicht mehr vom Viewport-Rand abgeschnitten. */
        --dk-logo-offset-top: 0px;
        --dk-logo-box-height: calc(var(--dk-logo-width) / (3332.9 / 2076.1));
    }
}

@media (min-width: 1200px) {
    :root {
        --dk-logo-width: 224px;
        --dk-logo-offset-top: 0px;
        --dk-logo-box-height: calc(var(--dk-logo-width) / (3332.9 / 2076.1));
    }
}

/* Wie bei .wrapper-right-logo selbst (s. u.) bewusst verallgemeinert, statt
   an ".cover.show_own_header .wrapper-right" gebunden zu bleiben, damit das
   Logo-Bild auch auf Seiten ohne dieses Eltern-Markup korrekt skaliert und
   den Schatten erhaelt. */
.wrapper-right-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 0 20px #000);
}

.cover.show_own_header .wrapper-right .wrapper-right-info .btn-group {
    margin: 0 !important;
    display: flex;
    align-items: center;
    height: 100%;
}

.cover.show_own_header .wrapper-right .wrapper-right-info .btn-group .btn > i {
    display: none !important;
}

.cover.show_own_header .wrapper-right .wrapper-right-info .btn-group .btn:focus,
.cover.show_own_header .wrapper-right .wrapper-right-info .btn-group .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

@media (min-width: 1600px) {
    :root {
        --dk-content-max-width: 1440px;
    }
}

@media (min-width: 1920px) {
    :root {
        --dk-content-max-width: 1600px;
    }
}

/* Header/Nav auf allen Breakpoints: fixes Logo oben, gruene Pill-Nav im Hero
   unter Location (Kundenwunsch: Desktop soll wie die vormalige Mobil-Ansicht
   aussehen – ehemals @media max-width:767px, jetzt ungated) */
:root {
    --dk-anchor-scroll-offset: calc(
            max(
                var(--dk-header-height),
                calc(var(--dk-logo-offset-top) + var(--dk-logo-box-height))
            ) + var(--dk-safe-area-top) + 3rem
        );
    }

    .cover .cover-content {
        overflow: visible;
        margin-top: calc(var(--dk-logo-offset-top) + var(--dk-logo-box-height) + 0.25rem + var(--dk-logo-top-gap));
    }

    .cover .cover-content > .row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: calc(var(--hero-mobile-height) + var(--dk-hero-meta-size) + 2.5rem);
        padding: 0.5rem 0 0.5rem;
        overflow: visible;
    }

    .cover .cover-content > .row > *:first-child {
        order: 1;
        width: 100%;
    }

    .cover .cover-content > .row > *:last-child {
        order: 2;
        position: static;
        height: auto;
        width: 100%;
        pointer-events: auto;
        text-align: center;
    }

    .cover.show_own_header .wrapper-right {
        position: static;
        /* War zuvor height:0 mit overflow:visible - dadurch wurde fuer die
           Pill-Nav (.wrapper-right-info, s.u.) gar kein Platz im normalen
           Fluss reserviert; sie "ueberlief" die Box optisch nach unten und
           sass dadurch je nach Seite (unterschiedlich hoher Hero-Text) zu
           nah an der folgenden Content-Box. Jetzt auto, damit die Hoehe der
           Nav tatsaechlich mitgerechnet wird (das Logo selbst steht seit
           der zweiten Korrektur per position:absolute oberhalb von
           "TICKETSHOP" und zaehlt daher NICHT mehr zur Hoehe dieser Box -
           siehe .wrapper-right-logo weiter unten). */
        height: auto;
        overflow: visible;
        pointer-events: none;
        background: transparent;
        box-shadow: none;
        float: none !important;
        text-align: center !important;
    }

    .cover .cover-content > .row > *:last-child .wrapper-right {
        width: 100%;
    }

    /* Kundenwunsch: schwarze Header-Leiste komplett entfernt (vorher hier als
       ::before-Pseudoelement, faelschlich "Grauer Streifen" genannt - war
       tatsaechlich schwarz, da --dk-color-gray: #000000). Kein Ersatzelement,
       da der Veranstalter explizit keine Topbar mehr wollte. */

    /* Kundenwunsch (Korrektur 1): "position: fixed" wurde live getestet und
       funktionierte technisch einwandfrei - das Logo blieb beim Scrollen
       tatsaechlich oben stehen. Genau DAS war aber nicht gewollt: das Logo
       ist recht gross (~1/4 Bildschirmhoehe) und hat beim dauerhaften
       Fixiertbleiben Formulare/Inhalte darunter verdeckt. "position: fixed"
       wurde deshalb entfernt, das Logo sollte sich wie die uebrigen Header-
       Elemente verhalten und beim Scrollen mit herauslaufen.

       Kundenwunsch (Korrektur 2): nach Korrektur 1 stand das Logo zwar
       richtig im Textfluss, aber INNERHALB von .wrapper-right (zusammen mit
       der Info/Warenkorb/Hilfe-Pille) - optisch also unterhalb von Titel/
       Datum, nicht darueber. Kundenwunsch: Logo ganz oben, ueber dem Wort
       "TICKETSHOP", zusaetzlich 20% kleiner (siehe --dk-logo-width oben).

       Geloest ohne erneutes "position: fixed" (bliebe sonst beim Scrollen
       sichtbar): ".cover .cover-content" reserviert bereits seit laengerem
       via margin-top genau die Hoehe des Logos als Leerraum UEBER dem
       Titel (--dk-logo-box-height, s. :root) und ist bereits position:
       relative. Das Logo wird daher "position: absolute" relativ zu .cover-
       content in genau diesen Leerraum gesetzt - dadurch steht es visuell
       vor "TICKETSHOP", scrollt aber ganz normal mit der Seite weg (da nur
       relativ zum Eltern-Container, nicht zum Viewport, positioniert). */
    .wrapper-right-logo {
        display: block !important;
        position: absolute !important;
        top: calc(-1 * (var(--dk-logo-offset-top) + var(--dk-logo-box-height) + 0.25rem)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--dk-logo-width);
        aspect-ratio: var(--dk-logo-aspect-ratio);
        min-height: 0 !important;
        height: auto;
        margin: 0;
        padding: 0;
        float: none !important;
        transform: translateX(-50%) !important;
        z-index: 5;
        pointer-events: auto;
        line-height: 0;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        height: auto;
        min-height: unset;
        max-height: none;
        background: transparent;
        box-shadow: none;
        /* Kundenwunsch: mehr Abstand zur folgenden Content-Box (vorher 0
           unten - zusammen mit der height:0-Korrektur oben sass die Pill-Nav
           auf einigen Seiten zu nah an der Box darunter). */
        padding: 0.75rem 4vw 1.5rem;
        overflow: visible;
        pointer-events: auto;
    }

    /* Grüne Pill-Nav: Breite nach Text, Trennlinien per Border */
    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm {
        --dk-mobile-nav-pill-height: 2.5rem;
        display: inline-flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        width: auto;
        max-width: calc(100vw - 8vw);
        min-height: var(--dk-mobile-nav-pill-height);
        height: auto;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
        background-color: var(--dk-color-green);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
        vertical-align: middle;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto;
        width: auto;
        position: relative;
        float: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--dk-color-black) !important;
        opacity: 1 !important;
        font-weight: 900;
        text-transform: uppercase;
        padding: 0 0.75rem !important;
        font-size: 0.6875rem !important;
        line-height: 1 !important;
        height: auto !important;
        min-height: var(--dk-mobile-nav-pill-height) !important;
        min-width: unset;
        white-space: nowrap !important;
        overflow: visible;
        box-sizing: border-box;
        text-align: center;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn > i {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn > span,
    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn #cart_button_amount_top {
        display: inline !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        font-size: inherit !important;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm #event_scroll2continue {
        display: none !important;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn + .btn {
        border-left: 1px solid rgba(0, 0, 0, 0.22) !important;
    }

    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn:hover,
    .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm > .btn:focus {
        background-color: rgba(0, 0, 0, 0.08) !important;
        color: var(--dk-color-black) !important;
        opacity: 1 !important;
    }

.cover .cover-content  h2 {
    font-weight: 900;
    margin-bottom: 0.25rem !important;
}

.cover .cover-content h2.text-uppercase::before {
    content: "TICKETSHOP";
    display: block;
    font-size: var(--dk-hero-meta-size);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

/* FIX: "TICKETSHOP" / Veranstaltungsname / Datum / Ort im Hero waren per
   Grundtemplate mit Schlagschatten gesetzt. Kundenwunsch: kein Schatten -
   !important, da das Grundtemplate hier offenbar selbst Schatten mit
   ausreichend Spezifitaet setzt. Die Textfarbe selbst bleibt unangetastet
   (keine Vorgabe dazu), nur der Schatten wird entfernt. */
.cover .cover-content h2.text-uppercase,
.cover .cover-content h2.text-uppercase::before,
.cover .cover-content > .row > *:first-child > p,
.cover .cover-content .header_details.event_time_info,
.cover .cover-content .header_details.event_location_info {
    text-shadow: none !important;
}

.cover .cover-content > .row > *:first-child > p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--dk-hero-meta-size);
    line-height: 1.15;
}

.cover .cover-content .header_details.event_time_info {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: 400;
}

.cover .cover-content .header_details.event_location_info {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: 400;
    /* TicketPay renders "| VENUE" when the city field is empty.
       Negative text-indent clips the separator; padding-left must stay 0,
       otherwise overflow:hidden does not clip into the padding box. */
    text-indent: -0.58em;
    padding-left: 0;
}

@media (min-width: 768px) {
    .cover .cover-content .header_details.event_time_info,
    .cover .cover-content .header_details.event_location_info {
        font-weight: 900;
    }
}

.cover-bg {
    opacity: 1;
}

/* Kein abdunkelnder Verlauf ueber dem Hero-Hintergrund, damit die farbige
   Wellen-/Blob-Grafik unveraendert sichtbar bleibt. */

.cover .cover-bg .cover-innerbg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Vorgabe Veranstalter: feste Wellen-Grafik statt des dynamischen,
   per Inline-Style gesetzten Event-Bilds im Hero. */
div.cover-innerbg {
    background-image: url(https://crew.dokomi.de/images/wave.webp) !important;
}

/* Kundenwunsch: Wellenlinie wirkt zu unscharf/weich. Eine echte
   Pixel-Schaerfung (Unsharp-Mask) ist per CSS nicht moeglich, da wir die
   Bilddatei selbst nicht bearbeiten koennen (nur ueber eine SVG-
   <filter>-Definition im HTML, die hier nicht verfuegbar ist). Als
   bestmoegliche Annaeherung erhoehen wir Kontrast/Saettigung, was den
   Wellen-Rand optisch deutlich praegnanter wirken laesst, und deaktivieren
   das Weich-Resampling bei Skalierung. Fuer eine wirklich scharfe Kante
   waere eine hoeher aufgeloeste Quelldatei (z. B. 2x/3x) noetig.
   -> Laut Feedback reicht dieser Filter allein nicht aus (das Bild bleibt
   beim Hochskalieren unscharf, egal wie der Browser es rendert - das ist
   eine Eigenschaft der Rasterbilddatei selbst, nicht etwas, das sich per
   CSS-Filter beheben laesst). Kundenvorgabe: wenn Schaerfen nicht moeglich,
   dann ersetzen und aehnlich nachzeichnen - daher weiter unten durch eine
   selbst gezeichnete Vektor-Welle (SVG) ersetzt, die in den Markenfarben
   gehalten ist und bei JEDER Bildschirmgroesse/-dichte gestochen scharf
   bleibt (Vektor statt Raster, kein Hochskalierungs-Weichzeichnen mehr
   moeglich). Dieser Filter-Block bleibt zur Dokumentation stehen, wird aber
   durch die Regel unten (spaeter in der Kaskade, gleiche Spezifitaet)
   ueberschrieben. */
div.cover-innerbg {
    filter: contrast(1.25) saturate(1.15) brightness(1.02);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Kundenwunsch: Ersatz-Grafik fuer die unscharfe wave.webp - selbst
   gezeichnete Vektor-Welle (SVG als Data-URI) in den vorgegebenen
   Markenfarben (--dk-color-skyblue / --dk-color-blue / --dk-color-teal),
   die die Form/Farbgebung des Originalbilds nachzeichnet. Da es sich um
   Vektorgrafik statt eines Rasterbilds handelt, gibt es prinzipbedingt
   keine Unschaerfe mehr, unabhaengig von Bildschirmgroesse oder -dichte.
   Kundenwunsch (Korrektur): "zu viel los" - die Flaeche OBERHALB der
   Wellen (der volle Hintergrund-Rechteck-Farbverlauf Skyblue/Blue/Teal)
   wird komplett entfernt/durch reines Weiss ersetzt. Die beiden
   Wellen-Pfade (<path>, halbtransparentes Blau) bleiben dabei unveraendert
   bestehen - nur das Rechteck darunter (vormals fill='url(#g)' mit dem
   Farbverlauf) wird weiss; das zugehoerige <linearGradient>-Degradee wird
   dadurch nicht mehr benoetigt und ebenfalls entfernt. */
div.cover-innerbg {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20400'%20preserveAspectRatio='none'%3E%3Crect%20width='1440'%20height='400'%20fill='%23ffffff'/%3E%3Cpath%20d='M0,230%20C240,160%20420,300%20720,250%20C1020,200%201200,120%201440,190%20L1440,400%20L0,400%20Z'%20fill='%232C46DB'%20fill-opacity='0.55'/%3E%3Cpath%20d='M0,280%20C300,340%20540,220%20840,270%20C1140,320%201300,260%201440,290%20L1440,400%20L0,400%20Z'%20fill='%236BB3EA'%20fill-opacity='0.45'/%3E%3C/svg%3E") !important;
    filter: none;
    image-rendering: auto;
}

/* ==========================================================================
   Container
   ========================================================================== */

.container {
    width: 100% !important;
    max-width: var(--dk-content-max-width) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dk-content-padding-x);
    padding-right: var(--dk-content-padding-x);
    box-sizing: border-box;
}

/* ==========================================================================
   Checkout progress
   ========================================================================== */

.checkout-progress-row {
    margin-top: 0;
    margin-bottom: 1rem;
}

body.v2:has(.cover) .checkout-progress-row {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    body.v2:has(.cover) .checkout-progress-row {
        margin-top: -6.75rem;
        margin-bottom: var(--dk-hero-gap-status-input) !important;
    }
}

@media (min-width: 1200px) {
    body.v2:has(.cover) .checkout-progress-row {
        margin-top: -5.25rem;
    }
}

.checkout-progress-row > [class*="col-"] {
    padding-left: 2px;
    padding-right: 2px;
}

.checkout-progress-row .pi-callout {
    margin: 0;
}

/* FA circle-number icons are not available locally – render steps via CSS */
.checkout-progress-row .pi-callout i.h2 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 0 6px;
    padding: 0;
    line-height: 1;
    font-size: 0;
    font-style: normal;
    font-family: Helvetica, Arial, sans-serif !important;
    border-radius: 0;
    box-sizing: border-box;
}

.checkout-progress-row .pi-callout i.h2::before {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    font-family: inherit;
}

.checkout-progress-row > [class*="col-"]:nth-child(2) .pi-callout i.h2::before { content: "1"; }
.checkout-progress-row > [class*="col-"]:nth-child(3) .pi-callout i.h2::before { content: "2"; }
.checkout-progress-row > [class*="col-"]:nth-child(4) .pi-callout i.h2::before { content: "3"; }
.checkout-progress-row > [class*="col-"]:nth-child(5) .pi-callout i.h2::before { content: "4"; }
.checkout-progress-row > [class*="col-"]:nth-child(6) .pi-callout i.h2::before { content: "5"; }

.checkout-progress-row .pi-callout-success {
    color: var(--dk-color-green);
}

.checkout-progress-row .pi-callout-success i.h2 {
    background-color: var(--dk-color-green);
    color: var(--dk-color-black);
    border: 2px solid var(--dk-color-green);
}

.checkout-progress-row .pi-callout-success i.h2::before {
    color: var(--dk-color-black);
}

.checkout-progress-row .pi-callout-success h5 {
    color: var(--dk-color-green);
}

.checkout-progress-row .pi-callout-success::after,
.checkout-progress-row .pi-callout-default::after {
    display: none;
    content: none;
}

.checkout-progress-row .pi-callout-default {
    color: var(--dk-color-text);
}

.checkout-progress-row .pi-callout-default i.h2 {
    background-color: transparent;
    color: var(--dk-color-text);
    border: 2px solid var(--dk-color-text);
}

.checkout-progress-row .pi-callout-default i.h2::before {
    color: var(--dk-color-text);
}

.checkout-progress-row .pi-callout-default h5,
.checkout-progress-row .pi-callout-default h4 {
    color: var(--dk-color-text);
}

.checkout-progress-row > [class*="col-"]:first-child,
.checkout-progress-row > [class*="col-"]:last-child {
    display: none;
}

@media (max-width: 767px) {
    .checkout-progress-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(0.375rem, 1.75vw, 0.625rem);
        margin-bottom: 0.75rem;
    }

    .checkout-progress-row > [class*="col-"] {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        float: none;
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }

    .checkout-progress-row .pi-callout {
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .checkout-progress-row .pi-callout i.h2 {
        width: 2rem;
        height: 2rem;
        margin: 0 auto 4px;
        border-width: 2px;
    }

    .checkout-progress-row .pi-callout i.h2::before {
        font-size: 0.875rem;
    }

    .checkout-progress-row .pi-callout h5 {
        display: block !important;
        margin: 0;
        font-size: clamp(0.5rem, 2.35vw, 0.625rem);
        line-height: 1.05;
        font-weight: 600;
        word-break: break-word;
        hyphens: auto;
    }
}

@media (max-width: 374px) {
    .checkout-progress-row .pi-callout i.h2 {
        width: 1.875rem;
        height: 1.875rem;
    }

    .checkout-progress-row .pi-callout i.h2::before {
        font-size: 0.8125rem;
    }

    .checkout-progress-row .pi-callout h5 {
        font-size: 0.5rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .checkout-progress-row .pi-callout i.h2 {
        width: 2.625rem;
        height: 2.625rem;
    }

    .checkout-progress-row .pi-callout i.h2::before {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .checkout-progress-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(0.75rem, 2vw, 1.5rem);
    }

    .checkout-progress-row > [class*="col-"] {
        flex: 0 1 auto;
        width: auto !important;
        max-width: none !important;
        float: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .checkout-progress-row .pi-callout {
        height: auto;
        min-height: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .checkout-progress-row .pi-callout i.h2 {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 8px;
    }

    .checkout-progress-row .pi-callout i.h2::before {
        font-size: 1.25rem;
    }

    .checkout-progress-row .pi-callout h5 {
        font-size: 1rem;
        line-height: 1.15;
    }
}

@media (min-width: 992px) {
    .checkout-progress-row .pi-callout i.h2 {
        width: 3rem;
        height: 3rem;
        margin-bottom: 10px;
    }

    .checkout-progress-row .pi-callout i.h2::before {
        font-size: 1.375rem;
    }

    .checkout-progress-row .pi-callout h5 {
        font-size: 1.0625rem;
    }
}

/* ==========================================================================
   Content
   ========================================================================== */

#content {
    position: relative;
    margin: 2vw 0;
    min-height: 650px;
}

@media (min-width: 768px) {
    #content {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

body.v2:has(.cover) #content {
    position: relative;
    z-index: 1;
    background: transparent;
    margin-top: 0.5rem;
}

@media (max-width: 767px) {
    body.v2:has(.cover) #content {
        margin-top: 0.5rem;
        padding-top: 0;
    }

    body.v2:has(.cover) .checkout-progress-row {
        margin-top: 0.75rem;
    }
}

@media (min-width: 768px) {
    body.v2:has(.cover) #content {
        margin-top: 0;
    }
}

body.v2 .wrap:not(.accordions) .wrap_heading h2 {
    font-size: 8vw;
    line-height: 1.2;
    text-transform: uppercase;
    color: #FF3B5B;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    body.v2 .wrap:not(.accordions) .wrap_heading h2 {
        font-size: 3vw;
    }
}

@media only screen and (max-width: 768px) {
    body.v2 .wrap:not(.accordions) .wrap_content .well {
        margin-bottom: 30px;
        padding: 0;
        background-color: var(--dk-color-surface);
        border: 0 none;
        box-shadow: var(--dk-box-shadow);
        /* War 0 (eckig) - Kundenwunsch: Ecken auch auf Mobil abgerundet,
           wie am Desktop (siehe Basis-.well-Regel weiter unten). */
        border-radius: var(--dk-border-radius);
    }
    body.v2 .wrap:not(.accordions) .wrap_content .well .items {
        display: block;
        padding: 15px;
        background: none;
        border-radius: 0;
    }
}

.well {
    border-radius: var(--dk-border-radius);
    padding: clamp(1.25rem, 2vw, 2.5rem);
}



/* Card / Panel */
.container .jumbotron, .container-fluid .jumbotron {
    border-radius: var(--dk-border-radius) !important;
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
    border: none;
    box-shadow: var(--dk-box-shadow);
}

/* Unified content box shadow – overrides TicketPay colored glows */
body.v2 .container .jumbotron,
body.v2 .container-fluid .jumbotron,
body.v2 .jumbotron.jumbotron-default,
body.v2 .jumbotron.jumbotron-success,
body.v2 .jumbotron.jumbotron-danger,
body.v2 #content main .row .well.well-light,
body.v2 #content main .row .well.well-shadow,
body.v2 #paymentchoose .well,
body.v2 #klarna_container .well,
body.v2 .wrap:not(.accordions) .wrap_content .well,
body.v2 .promoCode,
body.v2 .cart .cartSet .cartWrap {
    box-shadow: var(--dk-box-shadow) !important;
}
.jumbotron.jumbotron-less-padding {
    padding: max(2vw, 1rem);
}
.jumbotron p {
    margin: 0;
}
.jumbotron .fa-check {
    color: var(--dk-color-green);
}

/* Page 2 (Zusatzartikel) – Warenkorb-Hinweis oben */
body.v2 #content main .jumbotron.jumbotron-textonly {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

body.v2 #content main .jumbotron.jumbotron-textonly p {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    line-height: 1.45;
    font-weight: 400;
    color: var(--dk-color-text) !important;
}

body.v2 #content main .jumbotron.jumbotron-textonly .fa-check {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--dk-color-green) !important;
}

.jumbotron h1 {
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
}

/* TicketPay highlight dates / deadlines (<mark> in jumbotron, modals, …) */
body.v2 mark,
body.v2 .jumbotron mark,
body.v2 h4 mark,
body.v2 .modal mark,
body.v2 #content mark {
    background: var(--dk-color-red) !important;
    background-color: var(--dk-color-red) !important;
    color: var(--dk-color-white) !important;
    padding: 0.1em 0.4em;
    font-weight: 700;
}

/* HR */
.jumbotron > hr {
    background-color: currentColor;
    border: none;
    height: 10px;
    margin: max(2vw, 1rem) 0;
    display: block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(-12.000000,0)'%3E%3Cpath d='M28,0L10,18'/%3E%3Cpath d='M18,0L0,18'/%3E%3Cpath d='M48,0L30,18'/%3E%3Cpath d='M38,0L20,18'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 20 16' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(-12.000000,0)'%3E%3Cpath d='M28,0L10,18'/%3E%3Cpath d='M18,0L0,18'/%3E%3Cpath d='M48,0L30,18'/%3E%3Cpath d='M38,0L20,18'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 10px 100%;
    mask-size: 10px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

/* ==========================================================================
   Button
   ========================================================================== */

.btn {
    display: inline-block;
    border-radius: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

/* ==========================================================================
   Button Group
   ========================================================================== */

.btn-sm,
.btn-group-sm > .btn {
    border-radius: var(--dk-border-radius);
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    line-height: 1.5;
}
.btn-default {
    border: none;
    background-color: #FF3B5B;
    color: var(--dk-color-black);
}
.btn-brand,
.btn-ok {
    background-color: var(--dk-color-yellow) !important;
    color: var(--dk-color-black) !important;
}
.btn-brand:hover,
.btn-ok:hover {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
}

/* Checkout / continue actions in page content (not sticky footer) */
body.v2 #content .btn-brand.btn-continue,
body.v2 #content .btn.btn-brand.btn-continue {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2 #content .btn-brand.btn-continue:hover,
body.v2 #content .btn-brand.btn-continue:focus,
body.v2 #content .btn-brand.btn-continue:focus-visible,
body.v2 #content .btn.btn-brand.btn-continue:hover,
body.v2 #content .btn.btn-brand.btn-continue:focus,
body.v2 #content .btn.btn-brand.btn-continue:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}
.btn-group > .btn:last-of-type {
    border-top-right-radius: var(--dk-border-radius) !important;
    border-bottom-right-radius: var(--dk-border-radius) !important;
}


/* ==========================================================================
   Input Group
   ========================================================================== */

.input-group > .form-control,
.input-group > .input-group-btn .btn {
    min-height: 50px;
}

/* Freischaltcode – website-style pill (input + docked green button) */
.input-group.input-split:has(#redeem_coupon) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--dk-color-text);
    background-color: var(--dk-color-surface);
    box-shadow: none;
}

body.v2 #content main .input-group.input-split:has(#redeem_coupon) .form-control,
body.v2 #content main #redeem_coupon.form-control,
.input-group.input-split:has(#redeem_coupon) .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
    min-height: 50px;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    line-height: 1.25;
}

body.v2 #content main .input-group.input-split:has(#redeem_coupon) .form-control:focus,
body.v2 #content main #redeem_coupon.form-control:focus,
.input-group.input-split:has(#redeem_coupon) .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
}

body.v2 #content main .input-group.input-split:has(#redeem_coupon) .form-control::placeholder,
body.v2 #content main #redeem_coupon.form-control::placeholder,
.input-group.input-split:has(#redeem_coupon) .form-control::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

.input-group.input-split:has(#redeem_coupon) .input-group-btn {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    clear: none !important;
    vertical-align: middle;
}

.input-group.input-split:has(#redeem_coupon) .input-group-btn .btn,
.input-group.input-split:has(#redeem_coupon) #button_coupon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 50px;
    min-width: auto;
    height: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    line-height: 1;
    box-shadow: none !important;
}

.input-group.input-split:has(#redeem_coupon) #button_coupon::after {
    color: inherit;
}

.input-group.input-split:has(#redeem_coupon) .input-group-btn .btn:hover,
.input-group.input-split:has(#redeem_coupon) .input-group-btn .btn:focus,
.input-group.input-split:has(#redeem_coupon) #button_coupon:hover,
.input-group.input-split:has(#redeem_coupon) #button_coupon:focus {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
}

@media (max-width: 768px) {
    .input-group.input-split:has(#redeem_coupon) .form-control,
    .input-group.input-split:has(#redeem_coupon) .input-group-btn {
        display: flex !important;
        margin-bottom: 0 !important;
        clear: none !important;
    }

    .input-group.input-split:has(#redeem_coupon) .form-control {
        font-size: 1rem;
        padding: 0.625rem 1rem;
    }

    .input-group.input-split:has(#redeem_coupon) .input-group-btn .btn,
    .input-group.input-split:has(#redeem_coupon) #button_coupon {
        padding: 0.625rem 0.75rem;
        font-size: 0.6875rem;
    }
}

@media (min-width: 769px) {
    .input-group.input-split:has(#redeem_coupon) .form-control {
        font-size: 1.125rem;
        padding: 0.75rem 1.5rem;
    }

    .input-group.input-split:has(#redeem_coupon) .input-group-btn .btn,
    .input-group.input-split:has(#redeem_coupon) #button_coupon {
        padding: 0.75rem 1.125rem;
        font-size: 0.875rem;
    }
}


/* ==========================================================================
   Accordions – match website .cb__accordion / .cb__accordion-ticket
   ========================================================================== */

.accordions {
    --inner-padding: clamp(1.25rem, 2vw, 2.5rem);
    --inner-padding-half: clamp(0.75rem, 1vw, 1.25rem);
    border-radius: var(--dk-border-radius);
}

body.v2 .wrap.accordions {
    border: 2px solid var(--dk-color-text);
    margin: 0 0 clamp(1.25rem, 2vw, 2.5rem);
    box-shadow: var(--dk-box-shadow);
}

body.v2 .wrap.accordions[id],
body.v2 .wrap.accordions .wrap_heading,
body.v2 .wrap.accordions .wrap_content .well > .items[id] {
    scroll-margin-top: var(--dk-anchor-scroll-offset);
}

body.v2 #stickyfooter {
    scroll-margin-top: var(--dk-anchor-scroll-offset);
}

body.v2 .wrap.accordions .wrap_heading {
    padding: var(--inner-padding);
    background-color: var(--dk-color-surface);
    border-radius: inherit;
    box-shadow: none !important;
}

.accordions:first-of-type .wrap_heading {
    border-top-left-radius: var(--dk-border-radius);
    border-top-right-radius: var(--dk-border-radius);
}

.accordions:last-of-type .wrap_heading {
    border-bottom-left-radius: var(--dk-border-radius);
    border-bottom-right-radius: var(--dk-border-radius);
}

body.v2 .wrap.accordions .wrap_content {
    margin-top: calc(var(--dk-border-radius) * -1);
    border-top: var(--dk-border-radius) solid var(--dk-color-surface);
    box-shadow: none !important;
    /* Disable TicketPay slideToggle height animation (jQuery .slideToggle('fast')) */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

body.v2 #content .wrap.accordions .wrap_content .well,
body.v2 #content main .wrap.accordions .wrap_content .well,
body.v2 .wrap.accordions .wrap_content .well,
body.v2 #content .wrap.accordions .wrap_content .well.well-light,
body.v2 #content main .wrap.accordions .wrap_content .well.well-light,
body.v2 .wrap.accordions .wrap_content .well.well-light,
body.v2 #content .wrap.accordions .wrap_content .well.well-shadow,
body.v2 #content main .wrap.accordions .wrap_content .well.well-shadow,
body.v2 .wrap.accordions .wrap_content .well.well-shadow {
    margin-bottom: 0;
    padding: var(--inner-padding);
    padding-top: var(--dk-border-radius) !important;
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text);
    border: none !important;
    box-shadow: none !important;
    border-bottom-left-radius: var(--dk-border-radius);
    border-bottom-right-radius: var(--dk-border-radius);
}

/* Category heading */
body.v2 .wrap.accordions .wrap_heading h2,
body.v2 .wrap.accordions .wrap_heading h2.text-system {
    font-size: clamp(1.25rem, 2vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
    position: relative;
    gap: var(--inner-padding-half);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    color: var(--dk-color-text) !important;
    margin-bottom: 0;
}

body.v2 .wrap.accordions .wrap_heading:hover h2,
body.v2 .wrap.accordions .wrap_heading:hover h2.text-system {
    color: var(--dk-color-green) !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .description em {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

body.v2 .wrap.accordions .wrap_content .well .items .description {
    font-size: inherit;
    line-height: 1.5;
}

/* Readmore – fade when collapsed.
   Kundenwunsch: der weiche weisse Verlauf ("weisser Schatten"), der bei
   gekuerzten Ticketbeschreibungen (z. B. "Flohmarkt Slot 2") am unteren Rand
   lag, soll komplett weg. Die Farbe stammte noch aus der Zeit vor der Phase-
   3-Umstellung auf 20% Deckkraft-Flaechen (var(--dk-color-surface), also
   deckendes Weiss) und passte seitdem optisch nicht mehr zur jetzt
   durchscheinenden Well-Flaeche - sah dadurch wie ein zusaetzlicher weisser
   Schatten ueber dem Text aus. Der Verlauf wird komplett entfernt; der
   "mehr anzeigen"-Button/Pfeil (eigene Regeln weiter unten) bleibt als
   Bedienelement unveraendert bestehen. */
body.v2 .wrap.accordions .wrap_content .well .items .description[data-readmore][aria-expanded="false"] {
    position: relative;
}

/* Readmore toggle */
body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto !important;
    margin-top: 0.75rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dk-color-black) !important;
    text-decoration: none !important;
    background-color: var(--dk-color-green);
    border: 2px solid var(--dk-color-green);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle]:hover,
body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle]:focus {
    color: var(--dk-color-text) !important;
    background-color: var(--dk-color-surface);
    border-color: var(--dk-color-text);
    text-decoration: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle]::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c-9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.4-24.6 9.4-33.8 0z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c-9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.4-24.6 9.4-33.8 0z"/></svg>');
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.v2 .wrap.accordions .wrap_content .well .items .description[aria-expanded="true"] + a[data-readmore-toggle]::after {
    transform: rotate(180deg);
}

@media (min-width: 1024px) {
    body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .description + a[data-readmore-toggle]::after {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* Accordion-Pfeil: schwarz wie der Ueberschriften-Text (--dk-color-text),
   damit er zur hellen Flaeche passt. */
body.v2 .wrap.accordions .wrap_heading h2::before {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    display: block;
    content: "";
    background-color: var(--dk-color-text);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>');
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>');
    width: var(--inner-padding);
    height: var(--inner-padding);
    flex-shrink: 0;
}

body.v2 .wrap.accordions .wrap_heading h2:has(.fa-minus-circle)::before {
    transform: rotate(90deg);
}

body.v2 .wrap.accordions .wrap_heading h2 i.i.fa {
    display: none;
}

/* Ticket name */
body.v2 .wrap.accordions .wrap_content .well .items .headline {
    margin: 0;
    padding: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items .headline h3 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--dk-color-text);
    line-height: 1.15;
}

body.v2 .wrap.accordions .wrap_content .well .items .headline.mb-15 {
    margin-bottom: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items .cross_out_code.hide {
    display: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"] {
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

/* Ticket row: stacked by default, side-by-side via container query when wide enough */
body.v2 .wrap.accordions .wrap_content .well .items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    border-top: none !important;
    border-bottom: none !important;
    min-width: 0;
    overflow: visible;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row {
    display: contents;
}

/* Page 2 (Zusatzartikel): content row is wrapped in .variant */
body.v2 .wrap.accordions .wrap_content .well .items > .variant {
    display: contents;
}

body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row {
    display: contents;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row > [class*="col-"],
body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    padding-left: 0;
    padding-right: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row:first-child > .col-md-12,
body.v2 .wrap.accordions .wrap_content .well .items > .row:first-child > .col-sm-12 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-md-9,
body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-sm-8,
body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-md-9,
body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-sm-8 {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-md-3,
body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-sm-4,
body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-md-3,
body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-sm-4 {
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
    justify-self: stretch;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 992px) {
    body.v2 .wrap.accordions .wrap_content .well .items {
        grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 320px);
        row-gap: 0.375rem;
    }

    body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-md-3,
    body.v2 .wrap.accordions .wrap_content .well .items > .row:last-child > .col-sm-4,
    body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-md-3,
    body.v2 .wrap.accordions .wrap_content .well .items > .variant > .row > .col-sm-4 {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        /* Sticky-Verhalten der Preis-/Warenkorb-Box auf Kundenwunsch entfernt -
           die Box scrollt jetzt ganz normal mit statt am Rand kleben zu bleiben. */
        position: static;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image),
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) {
        --dk-carousel-right-gap: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Page 2 ArticleExtra: native TicketPay offset aligns under price – reset in our grid */
    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row > [class*="col-md-offset-"],
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row > [class*="col-sm-offset-"] {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    /* Enthaelt ein Ticket eine Ticketvarianten-Gruppe (#variant_box_XXX mit
       mehreren Groessen), wird die ganze Ticketzeile auf eine einzige Spalte
       zurueckgestellt: Sowohl der Beschreibungstext oben als auch die
       Variantengruppe darunter sollen ueber die volle Breite gehen, statt
       dass die Variantengruppe wie eine normale Preisbox in die schmale
       rechte Spalte gequetscht wird. Die vorherige Variante (nur grid-column
       auf der Preis-Spalte selbst umbiegen) hat nicht zuverlaessig
       funktioniert, weil die generische Regel oben die Spalte weiterhin auf
       "grid-column: 2" gesetzt hat und der Grid dafuer eine zusaetzliche,
       schmale Spalte erzeugt hat statt die vorhandene volle Breite zu nutzen.
       Deshalb hier zusaetzlich .items selbst auf eine Spalte zurueckstellen
       UND die Spalte, die die Variantengruppe enthaelt, unabhaengig von ihrer
       genauen Klassen-Kombination ([class*="col-"] statt fest .col-md-3/
       .col-sm-4) auf diese eine Spalte zwingen. */
    body.v2 .wrap.accordions .wrap_content .well .items:has([id^="variant_box_"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.v2 .wrap.accordions .wrap_content .well .items > .row > [class*="col-"]:has([id^="variant_box_"]) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body.v2 .wrap.accordions .wrap_content .well .items .article-box {
        padding: 0.875rem 1rem;
    }
}

body.v2 .wrap.accordions .wrap_content .well .items .stockStatus {
    float: none;
    margin: 0;
}

/* TicketPay gibt dem Stock-Status mobil eine helle Box (#f5f5f5 + #ddd-Rahmen),
   was mit der weißen Schrift unlesbar wird. Für den normalen Verkaufsphasen-Text
   neutralisieren, damit er wie auf Desktop transparent/lesbar bleibt. */
body.v2 .wrap.accordions .wrap_content .well .items .cartSectiondetails .stockStatus {
    background: transparent !important;
    border: none !important;
    text-align: left;
    letter-spacing: normal;
    padding-left: 0;
    padding-right: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items .stockStatus.out {
    white-space: nowrap;
}

/* Striped divider between tickets inside an accordion
   gap-before: previous ticket → divider | gap-after: divider → title */
body.v2 .wrap.accordions .wrap_content .well .items + .items,
body.v2 .wrap.accordions .wrap_content .well .items + div + .items {
    --dk-ticket-divider-gap-before: 0.625rem;
    --dk-ticket-divider-gap-after: 1.5rem;
    position: relative;
    overflow: visible !important;
    margin-top: calc(var(--dk-ticket-divider-gap-before) + var(--dk-divider-pattern-size) + var(--dk-ticket-divider-gap-after)) !important;
    padding-top: 0 !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items + .items::before,
body.v2 .wrap.accordions .wrap_content .well .items + div + .items::before {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--dk-ticket-divider-gap-after) + var(--dk-divider-pattern-size)));
    left: 0;
    right: 0;
    height: var(--dk-divider-pattern-size);
    background-image: linear-gradient(
        to bottom,
        var(--dk-color-text) 0,
        var(--dk-color-text) var(--dk-divider-bar-thickness),
        transparent var(--dk-divider-bar-thickness),
        transparent calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) var(--dk-divider-pattern-size)
    );
    border: none;
    pointer-events: none;
}

/* --- Mischwarenkorb: mehrere .variant-Blöcke in einem .items ---
   TicketPay liefert bei Add-ons mit mehreren Bezugsartikeln mehrere .variant im
   selben .items. Das globale .items-Grid würde alle Beschreibungen/Kaufboxen in
   dieselben Grid-Zellen legen (Ãœberlagerung). Daher wird jede .variant hier zu
   einem eigenen Layout-Block, sodass die Tickets sauber untereinander liegen. */
body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) {
    grid-template-columns: minmax(0, 1fr);
}

body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    min-width: 0;
    border: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row {
    display: contents;
}

body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-md-9,
body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-sm-8 {
    grid-column: 1;
    grid-row: 1;
}

body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-md-3,
body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-sm-4 {
    grid-column: 1;
    grid-row: 2;
    position: static;
}

@media (min-width: 992px) {
    body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant {
        grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 320px);
        row-gap: 0.375rem;
    }

    body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-md-9,
    body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-sm-8 {
        grid-column: 1;
        grid-row: 1;
    }

    body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-md-3,
    body.v2 .wrap.accordions .wrap_content .well .items:has(.variant + .variant) > .variant > .row > .col-sm-4 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        /* Sticky-Verhalten der Preis-/Warenkorb-Box auf Kundenwunsch entfernt -
           die Box scrollt jetzt ganz normal mit statt am Rand kleben zu bleiben. */
        position: static;
    }
}

/* Trennstrich zwischen den einzelnen Varianten (analog zum Ticket-Trenner) */
body.v2 .wrap.accordions .wrap_content .well .items > .variant + .variant {
    --dk-ticket-divider-gap-before: 0.625rem;
    --dk-ticket-divider-gap-after: 1.5rem;
    position: relative;
    overflow: visible !important;
    margin-top: calc(var(--dk-ticket-divider-gap-before) + var(--dk-divider-pattern-size) + var(--dk-ticket-divider-gap-after)) !important;
}

body.v2 .wrap.accordions .wrap_content .well .items > .variant + .variant::before {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--dk-ticket-divider-gap-after) + var(--dk-divider-pattern-size)));
    left: 0;
    right: 0;
    height: var(--dk-divider-pattern-size);
    background-image: linear-gradient(
        to bottom,
        var(--dk-color-text) 0,
        var(--dk-color-text) var(--dk-divider-bar-thickness),
        transparent var(--dk-divider-bar-thickness),
        transparent calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) var(--dk-divider-pattern-size)
    );
    border: none;
    pointer-events: none;
}

/* --- Ticketvarianten-Gruppen (z. B. Groessen eines Produkts wie das
   Finisher-Shirt): TicketPay verschachtelt hier .items INEINANDER
   (#variant_box_XXX > .items > .items > .row) statt der flachen
   .items > .row- bzw. .items > .variant > .row-Struktur, fuer die die
   Grid-Regeln oben gebaut sind. Weil ".items" oben ganz allgemein (egal
   auf welcher Verschachtelungstiefe) als CSS-Grid behandelt wird,
   landen die Spalten .col-md-3 (leerer Spacer) und .col-md-3.col-sm-4
   (Preis-/Warenkorb-Box) hier in derselben Grid-Zelle uebereinander -
   das fuehrte zu den doppelten/ueberlagerten Preis-/Mengen-/Button-
   Elementen. Statt dessen wird pro Variante alles einfach gestapelt
   (normaler Blockfluss): Titel, dann Bild + Beschreibung (nutzt die
   bereits vorhandene, funktionierende Kompaktbild-Logik von oben ganz
   von selbst), dann die Preis-/Warenkorb-Box darunter. Eine
   Nebeneinander-Aufteilung mit der Preis-Box wurde bewusst NICHT
   verwendet, da der verfuegbare Platz dafuer in der Praxis zu schmal
   ist und Bild/Text sonst zusammengequetscht werden. */

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] > .items {
    display: block !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] > .items > .items {
    display: block !important;
    border: 1px solid rgba(26, 26, 26, 0.18) !important;
    border-radius: var(--dk-border-radius);
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding: 1rem clamp(0.875rem, 1.5cqi, 2rem) !important;
    box-sizing: border-box;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] > .items > .items > .row {
    display: block !important;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .row > .col-md-6.col-sm-8 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
}

/* Leerer Spacer (col-md-3 ohne col-sm-4) ausblenden - er ist nur dazu da,
   im urspruenglichen Bootstrap-Grid Platz zu lassen, den wir hier nicht
   brauchen. Die eigentliche Preis-Box hat zusaetzlich .col-sm-4 und bleibt
   daher unberuehrt. */
body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .row > .col-md-3:not(.col-sm-4) {
    display: none !important;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .row > .col-md-3.col-sm-4 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin-top: 1rem;
    position: static !important;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .price_quantity_box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
}

/* Beschreibung der einzelnen Varianten immer vollstaendig zeigen - kein
   Readmore-Abschneiden/Fade + "Mehr anzeigen"-Button, da die Texte hier
   kurz sind und ein abgeschnittener Text in der schmaleren Spalte sonst
   mit der Preis-Box ueberlappen kann. */
body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .description {
    max-height: none !important;
    overflow: visible !important;
}

body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .description[data-readmore][aria-expanded="false"]::after,
body.v2 .wrap.accordions .wrap_content .well [id^="variant_box_"] .description + a[data-readmore-toggle] {
    display: none !important;
}

/* TicketPay-style purchase frame */
body.v2 .wrap.accordions .wrap_content .well .items .article-box {
    --dk-cart-control-height: 2.625rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    align-items: center;
    margin: 0;
    padding: 1rem clamp(0.875rem, 1.5cqi, 2rem);
    border: 1px solid rgba(26, 26, 26, 0.18) !important;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
    overflow: visible;
    box-sizing: border-box;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box::before {
    display: none;
    content: none;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box .price_quantity_box {
    grid-column: 1;
    min-width: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) {
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    box-sizing: border-box;
}

body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) {
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 100%;
}

body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) .stockStatus {
    flex: 1 1 auto;
    width: 100%;
    display: block;
    text-align: center;
}

body.v2 .wrap.accordions .price_quantity_box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
}

body.v2 .wrap.accordions .price_quantity_box .clearfix:not(.show_quantity:has(> .stockStatus.out))::before,
body.v2 .wrap.accordions .price_quantity_box .clearfix:not(.show_quantity:has(> .stockStatus.out))::after {
    content: none !important;
    display: none !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_price {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.2;
    text-align: right;
    white-space: normal;
    float: none !important;
    background: none !important;
    border: none !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_price small {
    font-size: clamp(0.875rem, 1vw, 1.125rem);
    line-height: 1.2;
}

body.v2 .wrap.accordions .price_quantity_box .show_price small s,
body.v2 .wrap.accordions .price_quantity_box .show_price small s font {
    color: var(--dk-color-red) !important;
    text-decoration: line-through;
}

body.v2 .wrap.accordions .price_quantity_box > [id^="quantity_box"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 0;
    row-gap: 0.375rem;
    width: 100%;
}

body.v2 .wrap.accordions .price_quantity_box .show_quantity,
body.v2 .wrap.accordions .price_quantity_box .show_quantity.clearfix {
    order: 1;
    flex: 0 0 4.25rem;
    width: 4.25rem;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    float: none !important;
    clear: none !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: none !important;
    box-shadow: none !important;
}

body.v2 .wrap.accordions .price_quantity_box [id^="quantity_box"] > div:has(h5) {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
}

body.v2 .wrap.accordions .price_quantity_box h5 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(26, 26, 26, 0.85);
    text-align: right;
    white-space: normal;
}

body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"].hide {
    display: flex !important;
}

body.v2 .wrap.accordions .price_quantity_box:has(> .show_button[id^="cart_buttons"]:not(.hide)) [id^="reserve_button"] {
    display: none !important;
}

body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"] {
    order: 2;
    flex: 1 1 0;
    display: flex !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0;
    width: auto !important;
    min-width: 0;
    float: none !important;
    clear: none !important;
    border: none;
}

body.v2 .wrap.accordions .price_quantity_box > .show_button[id^="cart_buttons"] {
    order: unset;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0.375rem 0 0 !important;
    padding: 0;
    width: auto !important;
    max-width: 100%;
}

body.v2 #content main .wrap.accordions .price_quantity_box .show_quantity .form-control,
body.v2 .wrap.accordions .price_quantity_box .show_quantity .form-control {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    height: var(--dk-cart-control-height);
    min-height: var(--dk-cart-control-height);
    margin: 0;
    padding: 0 1.625rem 0 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--dk-color-text);
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>') !important;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: right 9px center;
    border-radius: 0 !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-right: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.v2 .wrap.accordions .price_quantity_box .show_button .add-button,
body.v2 .wrap.accordions .price_quantity_box .add-button {
    --dk-add-button-font-family: var(--dk-font-family);
    --dk-add-button-font-size: clamp(0.6875rem, 1vw, 0.8125rem);
    --dk-add-button-font-weight: 900;
    --dk-add-button-letter-spacing: 0.01em;
    --dk-add-button-text-transform: uppercase;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--dk-cart-control-height);
    min-height: var(--dk-cart-control-height);
    padding: 0 0.875rem;
    font-family: var(--dk-add-button-font-family);
    font-size: var(--dk-add-button-font-size);
    font-weight: var(--dk-add-button-font-weight);
    line-height: 1;
    letter-spacing: var(--dk-add-button-letter-spacing);
    text-transform: var(--dk-add-button-text-transform);
    white-space: nowrap;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    overflow: hidden;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-left: none !important;
    margin: 0;
    background-color: rgba(26, 26, 26, 0.18) !important;
    color: rgba(26, 26, 26, 0.45) !important;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

body.v2 .wrap.accordions .price_quantity_box .add-button::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--dk-shopping-cart-icon-mask);
    mask-image: var(--dk-shopping-cart-icon-mask);
}

html:lang(nl) body.v2 .wrap.accordions .price_quantity_box .show_button .add-button,
html:lang(nl) body.v2 .wrap.accordions .price_quantity_box .add-button {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent;
}

html:lang(nl) body.v2 .wrap.accordions .price_quantity_box .show_button .add-button::after,
html:lang(nl) body.v2 .wrap.accordions .price_quantity_box .add-button::after {
    content: "In winkelwagen";
    display: inline;
    font-family: var(--dk-add-button-font-family);
    font-size: var(--dk-add-button-font-size);
    font-weight: var(--dk-add-button-font-weight);
    font-style: normal;
    line-height: 1;
    letter-spacing: var(--dk-add-button-letter-spacing);
    text-transform: var(--dk-add-button-text-transform);
    white-space: nowrap;
}

html:lang(nl) body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"].hide .add-button::after {
    color: rgba(26, 26, 26, 0.45);
}

html:lang(nl) body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"]:not(.hide) .add-button::after {
    color: var(--dk-color-black);
}

html:lang(nl) body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"]:not(.hide) .add-button:hover::after {
    color: var(--dk-color-black);
}

body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"]:not(.hide) .add-button {
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-left: none !important;
    cursor: pointer;
    pointer-events: auto;
}

body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"]:not(.hide) .add-button:hover {
    background-color: var(--dk-color-yellow) !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-left: none !important;
    color: var(--dk-color-black) !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_button .btn .fa,
body.v2 .wrap.accordions .price_quantity_box .add-button .fa {
    display: none;
}

body.v2 .wrap.accordions .price_quantity_box > .show_button .remove-button {
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    min-height: var(--dk-cart-control-height);
    height: var(--dk-cart-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    align-self: flex-end;
    border-radius: 0;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0 1rem;
    border: 2px solid rgba(26, 26, 26, 0.35);
    background: transparent;
    color: var(--dk-color-text) !important;
    white-space: nowrap;
}

body.v2 .wrap.accordions .price_quantity_box > .show_button .remove-button::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    -webkit-mask-image: var(--dk-trash-icon-mask);
    mask-image: var(--dk-trash-icon-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body.v2 .wrap.accordions .price_quantity_box .show_button .remove-button:hover,
body.v2 .wrap.accordions .price_quantity_box .show_button .remove-button:focus {
    border-color: var(--dk-color-red) !important;
    background: var(--dk-color-surface) !important;
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-red) !important;
}

@media (min-width: 768px) {
    body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"] {
        width: 100%;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .article-box {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    /* Zeile 1: Preis | Zeile 2: Select + Button | Zeile 3: Verfügbarkeit */
    body.v2 .wrap.accordions .price_quantity_box .show_price {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 0.25rem 0.375rem;
        font-size: clamp(1.0625rem, 1.15vw, 1.3125rem);
        line-height: 1.15;
        white-space: nowrap;
        justify-content: flex-end;
    }

    body.v2 .wrap.accordions .price_quantity_box .show_price small {
        font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
        white-space: nowrap;
    }

    body.v2 .wrap.accordions .price_quantity_box > [id^="quantity_box"] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        column-gap: 0;
        row-gap: 0.375rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.v2 .wrap.accordions .price_quantity_box .show_quantity .form-control {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 1.5rem 0 0.5rem;
        font-size: 0.8125rem;
    }

    body.v2 .wrap.accordions .price_quantity_box h5 {
        font-size: 1rem;
        line-height: 1.2;
        text-align: right;
    }
}

body.v2 .wrap.accordions .packagedetail i.fa {
    color: var(--dk-color-green);
}

/* Ticket image carousel – styled like an accordion swiper carousel */
body.v2 .wrap.accordions .article_image {
    --dk-carousel-nav-size: 28px;
    --dk-carousel-nav-bg: rgba(204, 204, 204, 0.7);
    --dk-carousel-nav-offset: 0.5rem;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: min(280px, 100%);
}

@media (max-width: 767px) {
    body.v2 .wrap.accordions .article_image {
        max-width: min(220px, 100%);
    }
}

/* Bildformat: keine feste aspect-ratio mehr vorgeben – die Box passt sich der
   tatsaechlich hochgeladenen Bildgroesse an (Breite 100% der verfuegbaren
   Spalte, Hoehe automatisch im Originalseitenverhaeltnis des Bildes statt
   quadratisch/16:9 zugeschnitten). */
body.v2 .wrap.accordions .article_image .carousel {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    border-radius: var(--dk-border-radius);
    overflow: hidden;
    background-color: var(--dk-color-surface);
    position: relative;
    align-content: unset !important;
}

body.v2 .wrap.accordions .article_image .carousel-inner {
    height: auto;
    border-radius: inherit;
}

body.v2 .wrap.accordions .article_image .carousel-inner > .item {
    height: auto;
}

body.v2 .wrap.accordions .article_image .carousel-inner > .item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain;
}

/* Single article image (no carousel) – match slider chrome */
body.v2 .wrap.accordions .article_image:has(> img) {
    border-radius: var(--dk-border-radius);
    overflow: hidden;
    background-color: var(--dk-color-surface);
}

body.v2 .wrap.accordions .article_image > img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain;
}

body.v2 .wrap.accordions .article_image .carousel-indicators {
    display: none !important;
}

body.v2 .wrap.accordions .article_image .carousel:not(:has(.carousel-inner > .item:nth-child(2))) .carousel-control {
    display: none !important;
}

body.v2 .wrap.accordions .article_image .carousel-control {
    position: absolute;
    top: auto !important;
    bottom: var(--dk-carousel-nav-offset);
    width: var(--dk-carousel-nav-size) !important;
    height: var(--dk-carousel-nav-size) !important;
    opacity: 0.7;
    background: none !important;
    background-image: none !important;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: opacity 150ms ease;
}

body.v2 .wrap.accordions .article_image .carousel-control:hover,
body.v2 .wrap.accordions .article_image .carousel-control:focus {
    opacity: 0.9;
    outline: none;
}

body.v2 .wrap.accordions .article_image .carousel-control.left {
    left: var(--dk-carousel-nav-offset) !important;
    right: auto !important;
    border-radius: 0;
    background-color: var(--dk-carousel-nav-bg) !important;
}

body.v2 .wrap.accordions .article_image .carousel-control.right {
    left: calc(var(--dk-carousel-nav-offset) + var(--dk-carousel-nav-size)) !important;
    right: auto !important;
    border-radius: 0;
    background-color: var(--dk-carousel-nav-bg) !important;
}

body.v2 .wrap.accordions .article_image .carousel-control .icon-prev,
body.v2 .wrap.accordions .article_image .carousel-control .icon-next,
body.v2 .wrap.accordions .article_image .carousel-control .fa {
    display: none !important;
}

body.v2 .wrap.accordions .article_image .carousel-control::before {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--dk-color-black);
}

body.v2 .wrap.accordions .article_image .carousel-control.left::before {
    content: '<';
}

body.v2 .wrap.accordions .article_image .carousel-control.right::before {
    content: '>';
}

body.v2 .wrap.accordions .article_image .carousel-control .glyphicon {
    display: none !important;
}

/* Bild-Slider volle Breite, Beschreibung darunter */
body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image),
body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) {
    --dk-carousel-right-gap: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100% - var(--dk-carousel-right-gap));
    max-width: calc(100% - var(--dk-carousel-right-gap));
}

body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image) > .col-md-4,
body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) > .col-sm-4,
body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image) > .col-md-8,
body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) > .col-sm-8 {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    padding: 0;
}

body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image) > br,
body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) > br {
    display: none !important;
}

@media (min-width: 768px) {
    body.v2 .wrap.accordions .article_image {
        --dk-carousel-nav-size: 38px;
        --dk-carousel-nav-offset: 0.75rem;
        margin-bottom: 0;
    }

    /* Klein & links in der Box statt ganzer Kartenbreite: Bild bleibt links,
       Beschreibung rechts daneben (normale Reihenfolge, nicht gespiegelt),
       das Bild bekommt eine feste, kompakte Breite statt der vollen
       Kartenbreite. Mobil bleibt bewusst unveraendert (grosses Bild oben
       in voller Breite). */
    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image),
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image) > .col-md-4,
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) > .col-sm-4 {
        flex: 0 0 150px !important;
        width: 150px !important;
        max-width: 150px !important;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image) > .col-md-8,
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) > .col-sm-8 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    body.v2 .wrap.accordions .article_image,
    body.v2 .wrap.accordions .article_image:has(> img) {
        max-width: 150px;
        margin: 0 !important;
        overflow: hidden;
        border-radius: var(--dk-border-radius);
        height: auto;
    }

    body.v2 .wrap.accordions .article_image .carousel-control::before {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    body.v2 .wrap.accordions .article_image {
        --dk-carousel-nav-size: 36px;
        --dk-carousel-nav-offset: 0.625rem;
    }

    body.v2 .wrap.accordions .article_image .carousel-control::before {
        font-size: 1.25rem;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .col-md-9 > .row:has(.article_image),
    body.v2 .wrap.accordions .wrap_content .well .items .col-sm-8 > .row:has(.article_image) {
        gap: 0.375rem;
        --dk-carousel-right-gap: 0;
        width: 100%;
        max-width: 100%;
    }

    body.v2 #content .wrap.accordions .wrap_content .well,
    body.v2 #content main .wrap.accordions .wrap_content .well,
    body.v2 .wrap.accordions .wrap_content .well,
    body.v2 #content .wrap.accordions .wrap_content .well.well-light,
    body.v2 #content main .wrap.accordions .wrap_content .well.well-light,
    body.v2 .wrap.accordions .wrap_content .well.well-light,
    body.v2 #content .wrap.accordions .wrap_content .well.well-shadow,
    body.v2 #content main .wrap.accordions .wrap_content .well.well-shadow,
    body.v2 .wrap.accordions .wrap_content .well.well-shadow {
        margin-bottom: 0;
        padding: var(--inner-padding);
        padding-top: var(--dk-border-radius) !important;
        background-color: var(--dk-color-surface) !important;
        border: none;
        box-shadow: none !important;
        border-bottom-left-radius: var(--dk-border-radius);
        border-bottom-right-radius: var(--dk-border-radius);
    }

    body.v2 .wrap.accordions .wrap_content .well .items {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .article-box {
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        box-sizing: border-box;
    }

    body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) {
        width: 100%;
        max-width: none;
        padding: 0;
        box-sizing: border-box;
    }

    /* Mobil wie Desktop: Preis oben rechts, Select + Button darunter */
    body.v2 .wrap.accordions .price_quantity_box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0.875rem;
    }

    body.v2 .wrap.accordions .price_quantity_box .show_price {
        width: 100%;
        margin-left: 0;
        font-size: 1.125rem;
        line-height: 1.15;
        justify-content: flex-end;
        text-align: right;
    }

    body.v2 .wrap.accordions .price_quantity_box h5 {
        text-align: right;
        font-size: 1rem;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .stockStatus {
        justify-self: stretch;
    }
}

/* Icon colors default */
.heading h1, .jumbotron h1, .text-system, .listing-filter .listing-view-action span.active, .final, .color, .color i, span.color, i.color, a.color, .btn-ok, .btn-ok:hover, .btn-ok:focus, .btn-ok:active, .paginate .pagination li a {
    color: var(--dk-color-green) !important;
}


/* Tooltip – Visa badge info (Bootstrap, container: body via ticketpay-anchor.js) */
.tooltip {
    z-index: 1100;
    opacity: 1 !important;
}

.tooltip-inner {
    max-width: 15rem;
    padding: 0.75rem 1rem;
    border-radius: var(--dk-border-radius);
    border: 2px solid var(--dk-color-text);
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-transform: none;
    box-shadow: none;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--dk-color-text);
    border-width: 6px 6px 0;
    margin-left: -6px;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--dk-color-text);
}

body.v2 .label.label-default.label-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dk-color-text) !important;
    background-color: rgba(110, 110, 110, 0.95);
    border: none;
    border-radius: 0;
    cursor: help;
    vertical-align: middle;
}

body.v2 .wrap.accordions .price_quantity_box .show_price {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_quantity {
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_button {
    margin: 0 !important;
}

/* Quantity Box */
body.v2 .price_quantity_box {
    background: none;
    border: none;
    color: inherit;
    text-align: right;
}

/* Ticketpreise in der dunklen Theme-Textfarbe statt der Markenfarbe Pink,
   damit sie auf der weissen Flaeche gut lesbar hervorstechen. */
body.v2 .price_quantity_box .show_price {
    padding: 0;
    color: var(--dk-color-text);
    font-weight: 900;
    font-size: 1.5rem;
    text-align: right;
    white-space: nowrap;
    display: flex;
    justify-content: end;
    gap: 0.5rem;
}
body.v2 .price_quantity_box .show_price small s {
    color: red;
}

body.v2 .price_quantity_box .show_quantity {
    border: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: right;
    box-shadow: none;
}

body.v2 .price_quantity_box .show_quantity .form-control {
    text-align: center;
    border-radius: 0;
    border-width: 1px;
    border-color: rgba(26, 26, 26, 0.85);
    background-color: transparent;
    color: var(--dk-color-text);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: none;
    height: unset;
    width: unset;
    min-width: 100px;
    margin-left: auto;
    margin-right: 0;

    /* Custom Select Arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    padding-right: 2rem;
}

body.v2 .price_quantity_box .show_button {
    padding: 0;
    margin-top: 1rem;
}

body.v2 .wrap.accordions .price_quantity_box .show_button .btn,
body.v2 .wrap.accordions .add-button {
    border-radius: 0;
    font-weight: 900;
    text-transform: uppercase;
}

body.v2 .wrap.accordions .price_quantity_box [id^="reserve_button"]:not(.hide) .add-button {
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2 .wrap.accordions .price_quantity_box .show_button .btn:not(.remove-button):hover,
body.v2 .wrap.accordions .price_quantity_box .add-button:hover {
    background-color: var(--dk-color-yellow) !important;
    color: var(--dk-color-black) !important;
}

/* Badge – Nicht verfügbar */
body.v2 .wrap.accordions .wrap_content .well .items .stockStatus.out,
body.v2 .wrap .wrap_content .well .items .stockStatus.out {
    display: inline-block;
    border: none;
    border-radius: 0;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    background-color: rgb(204 102 102 / 1);
    color: black !important;
    cursor: not-allowed;
}

/* Vorgeplant / Coming Soon – stockStatus ersetzt die Mengenauswahl */
body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) {
    display: flex;
    align-items: center;
    justify-content: stretch;
    grid-template-columns: unset;
    column-gap: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    width: 100%;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out)::before {
    display: none;
    content: none;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .price_quantity_box {
    grid-column: unset;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    gap: 0.5rem;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_price {
    display: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_quantity {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_quantity::before,
body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_quantity::after {
    content: none !important;
    display: none !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_quantity > .stockStatus.out {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-height: var(--dk-cart-control-height);
    box-sizing: border-box;
    margin: 0;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 0;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--dk-color-yellow);
    color: var(--dk-color-black) !important;
    cursor: default;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.show_quantity > .stockStatus.out) .show_quantity > .stockStatus.out::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--dk-color-text);
    -webkit-mask-image: var(--dk-clock-icon-mask);
    mask-image: var(--dk-clock-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Vorübergehend nicht verfügbar (Reservierung / Wartezustand) */
body.v2 .wrap.accordions .wrap_content .well .items .stockStatus.tempout,
body.v2 .wrap .wrap_content .well .items .stockStatus.tempout {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: clamp(0.6875rem, 2.4vw, 0.8125rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dk-color-text) !important;
    cursor: wait;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box > .temp-soldout {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    align-self: center;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box > .stockStatus.tempout,
body.v2 .wrap.accordions .wrap_content .well .items .article-box > .temp-soldout.stockStatus.tempout {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    align-self: center;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box .temp-soldout .stockStatus.tempout {
    width: 100%;
    min-width: 0;
}

/* Lade-Indikator – TicketPay-.line-Balken ausblenden, eigener Shimmer */
body.v2 .wrap.accordions .stockStatus.tempout::before,
body.v2 .wrap .stockStatus.tempout::before {
    content: "";
    display: block;
    width: min(100%, 5rem);
    height: 0.75rem;
    margin: 0 0 0.5rem;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        rgba(26, 26, 26, 0.14) 0%,
        rgba(26, 26, 26, 0.14) 38%,
        var(--dk-color-green) 50%,
        rgba(26, 26, 26, 0.14) 62%,
        rgba(26, 26, 26, 0.14) 100%
    );
    background-size: 220% 100%;
    animation: pv-tempout-shimmer 1.15s linear infinite;
}

body.v2 .wrap.accordions .wrap_content .well .items .article-box .stockStatus.tempout::before,
body.v2 .wrap.accordions .wrap_content .well .items .article-box > .temp-soldout.stockStatus.tempout::before {
    margin-left: 0;
}

@keyframes pv-tempout-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

body.v2 .wrap.accordions .stockStatus.tempout > .line:not(:last-of-type),
body.v2 .wrap .stockStatus.tempout > .line:not(:last-of-type) {
    display: none !important;
}

body.v2 .wrap.accordions .stockStatus.tempout > .line:last-of-type,
body.v2 .wrap .stockStatus.tempout > .line:last-of-type {
    display: block !important;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(26, 26, 26, 0.72) !important;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    /* TicketPay-Mobile: weißer stockStatus-Kasten neutralisieren */
    body.v2 .wrap.accordions .wrap_content .well .items .temp-soldout,
    body.v2 .wrap.accordions .wrap_content .well .items .temp-soldout.stockStatus.tempout,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box .temp-soldout,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box .stockStatus.tempout,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box .temp-soldout .stockStatus.tempout,
    body.v2 .wrap.accordions .wrap_content .well .items .stockStatus.tempout,
    body.v2 .wrap .wrap_content .well .items .stockStatus.tempout {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-align: center;
        color: var(--dk-color-text) !important;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.temp-soldout),
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(> .stockStatus.tempout),
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.temp-soldout .stockStatus.tempout),
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(> .temp-soldout.stockStatus.tempout) {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 0.875rem 0.75rem;
        gap: 0.5rem;
        border: 1px solid rgba(26, 26, 26, 0.18) !important;
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0.22) !important;
        box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
    }

    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.temp-soldout)::before,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(> .stockStatus.tempout)::before,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(.temp-soldout .stockStatus.tempout)::before,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box:has(> .temp-soldout.stockStatus.tempout)::before {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .article-box > .temp-soldout,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box > .stockStatus.tempout,
    body.v2 .wrap.accordions .wrap_content .well .items .article-box > .temp-soldout.stockStatus.tempout {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        text-align: center;
    }

    body.v2 .wrap.accordions .wrap_content .well .items .stockStatus.tempout,
    body.v2 .wrap .wrap_content .well .items .stockStatus.tempout {
        font-size: 0.6875rem;
        line-height: 1.35;
        text-align: center;
    }

    body.v2 .wrap.accordions .stockStatus.tempout::before,
    body.v2 .wrap .stockStatus.tempout::before {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.5rem;
    }

    body.v2 .wrap.accordions .stockStatus.tempout > .line:not(:last-of-type),
    body.v2 .wrap .stockStatus.tempout > .line:not(:last-of-type) {
        margin-bottom: 0;
    }

    body.v2 .wrap.accordions .stockStatus.tempout > .line:last-of-type,
    body.v2 .wrap .stockStatus.tempout > .line:last-of-type,
    body.v2 .wrap.accordions .stockStatus.tempout .line,
    body.v2 .wrap .stockStatus.tempout .line {
        font-size: 0.625rem;
        color: rgba(26, 26, 26, 0.72) !important;
    }

    body.v2 .wrap.accordions .wrap_content .well .items [id^="form_article_"]:not(:has(.article-box)) .stockStatus.tempout {
        padding: 0.875rem 0.75rem !important;
        border: 1px solid rgba(26, 26, 26, 0.18) !important;
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0.22) !important;
        box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
        text-align: center;
    }
}

/* ==========================================================================
   bottom Total
   ========================================================================== */

#shopping_cart {
    margin-top: clamp(1.25rem, 2vw, 2.5rem);
    margin-right: clamp(1.25rem, 2vw, 2.5rem);
}
.subtotal li {
    list-style-type: none;
    padding: .25em 0;
}
.subtotal .totallabel,
.subtotal .value {
    color: var(--dk-color-text);
}
.subtotal li.final {
    margin-top: 1em;
    padding: 1em 0;
    font-weight: 900;
    border-top-color: var(--dk-color-green) !important;
}
#sum_calculated {
    /* Cap so amounts like 10.000,00 € stay on one line in the cart column */
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    white-space: nowrap;
}

/* ==========================================================================
   Sticky footer (Countdown + Warenkorb + Weiter)
   ========================================================================== */

body.v2 #stickyfooter {
    background: #000000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
    color: var(--dk-color-white);
    z-index: 105;
    /* TicketPay: feste height:52px – Inhalt würde unten rauslaufen */
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.v2 #stickyfooter .orderstuff_layout {
    padding-top: 0.875rem;
    padding-bottom: max(1.125rem, calc(var(--dk-safe-area-bottom) + 1rem));
    padding-left: 0;
    padding-right: 0;
}

body.v2 #stickyfooter #initorder_layout.btn-continue,
body.v2 #stickyfooter .btn-brand.btn-continue {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    -webkit-text-fill-color: var(--dk-color-black) !important;
    text-transform: uppercase;
    border-left: none !important;
    padding: 0 1rem !important;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* TicketPay-Chevron (content: "\276f") per ::after */
body.v2 #stickyfooter #initorder_layout.btn-continue::after,
body.v2 #stickyfooter .btn-brand.btn-continue::after {
    color: var(--dk-color-black) !important;
}

body.v2 #stickyfooter #initorder_layout.btn-continue:hover,
body.v2 #stickyfooter #initorder_layout.btn-brand.btn-continue:hover,
body.v2 #stickyfooter .btn-continue:hover,
body.v2 #stickyfooter .btn-brand.btn-continue:hover,
body.v2 #stickyfooter #initorder_layout.btn-continue:focus,
body.v2 #stickyfooter #initorder_layout.btn-brand.btn-continue:focus,
body.v2 #stickyfooter .btn-continue:focus,
body.v2 #stickyfooter .btn-brand.btn-continue:focus,
body.v2 #stickyfooter #initorder_layout.btn-continue:focus-visible,
body.v2 #stickyfooter #initorder_layout.btn-brand.btn-continue:focus-visible,
body.v2 #stickyfooter .btn-continue:focus-visible,
body.v2 #stickyfooter .btn-brand.btn-continue:focus-visible {
    background-color: var(--dk-color-yellow) !important;
    border-color: var(--dk-color-yellow) !important;
    color: var(--dk-color-black) !important;
    filter: none;
}

body.v2 #stickyfooter #stickyfooter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    /* TicketPay: line-height:46px schiebt Buttons über den Footer-Rand */
    line-height: 1 !important;
}

body.v2 #stickyfooter #stickyfooter-inner::before,
body.v2 #stickyfooter #stickyfooter-inner::after {
    content: none !important;
    display: none !important;
}

body.v2 #stickyfooter .pull-left,
body.v2 #stickyfooter .pull-right {
    float: none !important;
    width: auto;
}

body.v2 #stickyfooter .pull-right {
    margin-left: auto;
}

body.v2 #stickyfooter .pull-left > span.hidden-xs {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.8);
}

body.v2 #stickyfooter .pull-left:has(.countDownTimer) > span.hidden-xs {
    display: none !important;
}

body.v2 #stickyfooter .pull-left .btn-group,
body.v2 #stickyfooter .pull-right .btn-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    vertical-align: middle;
}

body.v2 #stickyfooter .pull-left .btn-group {
    border-radius: 0;
}

body.v2 #stickyfooter .pull-right .btn-group {
    border-radius: 0;
}

/* SSL-Schloss-Button ausblenden – Countdown reicht */
body.v2 #stickyfooter .pull-left .btn-group > .btn:not(.countDownTimer) {
    display: none !important;
}

body.v2 #stickyfooter #initorder_layout {
    display: none;
}

body.v2 #stickyfooter #initorder_layout:not([style*="display: none"]) {
    display: inline-flex !important;
}

body.v2 #stickyfooter #stickyfooter-inner .btn {
    border: none !important;
    min-height: unset !important;
    height: var(--dk-sticky-footer-btn-height) !important;
    padding: 0 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

body.v2 #stickyfooter .btn > i,
body.v2 #stickyfooter .btn > .fa {
    display: none !important;
}

body.v2 #stickyfooter .countDownTimer {
    background: #000000 !important;
    color: var(--dk-color-white) !important;
    border-radius: 0 !important;
    min-width: 4.25rem;
    letter-spacing: 0.02em;
    gap: 0.375rem;
}

body.v2 #stickyfooter .countDownTimer::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    -webkit-mask-image: var(--dk-clock-icon-mask);
    mask-image: var(--dk-clock-icon-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body.v2 #stickyfooter .countDownTimer.text-danger {
    color: var(--dk-color-red) !important;
}

/* Pill-Form über btn-group (overflow:hidden) – Kinder ohne eigene Rundung */
body.v2 #stickyfooter .pull-right .btn-group > .btn {
    border-radius: 0 !important;
}

body.v2 #stickyfooter .pull-right .btn-group > .btn:last-of-type {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.v2 #stickyfooter #show_shopping_cart {
    background: #000000 !important;
    color: var(--dk-color-white) !important;
    white-space: nowrap;
    gap: 0.375rem;
}

body.v2 #stickyfooter #show_shopping_cart::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    -webkit-mask-image: var(--dk-shopping-cart-icon-mask);
    mask-image: var(--dk-shopping-cart-icon-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body.v2 #stickyfooter .btn-continue:active,
body.v2 #stickyfooter .btn-brand.btn-continue:active {
    filter: brightness(0.92);
}

@media (max-width: 767px) {
    body.v2 #stickyfooter {
        --dk-sticky-footer-btn-height: 2.375rem;
    }

    body.v2 #stickyfooter .orderstuff_layout {
        padding-top: 0.75rem;
        padding-bottom: max(1rem, calc(var(--dk-safe-area-bottom) + 0.875rem));
        padding-left: 0;
        padding-right: 0;
    }

    body.v2 #stickyfooter #stickyfooter-inner {
        gap: 0.625rem;
    }

    body.v2 #stickyfooter #stickyfooter-inner .btn {
        font-size: 0.75rem !important;
        padding: 0 0.75rem !important;
    }

    body.v2 #stickyfooter .countDownTimer {
        min-width: 4rem;
    }

    body.v2 #stickyfooter #show_shopping_cart {
        max-width: 8.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.v2 #stickyfooter .btn-continue {
        padding: 0 0.875rem !important;
    }
}

/* ==========================================================================
   Modal
   ========================================================================== */

/* Ãœber fixiertem TicketPay-Header (bis z-index 125) und TYPO3-Nav */
body.v2.modal-open .modal {
    z-index: 1300 !important;
}

body.v2.modal-open .modal-backdrop,
body.v2.modal-open > .modal-backdrop,
body.modal-open > .modal-backdrop {
    z-index: 1290 !important;
}

/* Portal: navigation below modals; invoice modal is nested in navbar (exception below) */
body.v2.modal-open:has(.navbar.navbar-default) .navbar.navbar-default {
    z-index: 100 !important;
}

body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.in) .navbar.navbar-default,
body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.show) .navbar.navbar-default {
    z-index: 1310 !important;
}

body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.in) .modal-backdrop,
body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.show) .modal-backdrop,
body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.in) > .modal-backdrop,
body.v2.modal-open:has(.navbar.navbar-default):has(#modal_invoice.modal.show) > .modal-backdrop {
    z-index: 1280 !important;
}

body.v2.modal-open:has(.navbar.navbar-default) #modal_invoice.modal.in,
body.v2.modal-open:has(.navbar.navbar-default) #modal_invoice.modal.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1320 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}

body.v2.modal-open:has(.navbar.navbar-default) #modal_invoice .modal-dialog {
    position: relative;
    z-index: 1;
}

/* Personalization / AJAX modals (often injected into #content or #modal-holder) */
body.v2.modal-open:has(.navbar.navbar-default) #content .modal.in:not(#modal_invoice),
body.v2.modal-open:has(.navbar.navbar-default) #content .modal.show:not(#modal_invoice),
body.v2.modal-open:has(.navbar.navbar-default) #modal-holder .modal.in,
body.v2.modal-open:has(.navbar.navbar-default) #modal-holder .modal.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1300 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.v2.modal-open:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li {
    position: relative;
    z-index: 1;
}

/* Modals werden oft in #content injiziert – dort z-index:1 sonst unter dem Header */
body.v2.modal-open:has(.cover) #content {
    z-index: 1300;
}

body.v2.modal-open:has(.navbar.navbar-default):has(.cover) #content {
    z-index: auto;
}

body.v2.modal-open .cover.show_own_header .wrapper-right {
    z-index: 100 !important;
}

/* Meetch Ticketversicherung – iframe popup above header, sticky footer, shop modals */
body.v2 .upc-modal {
    z-index: 1400 !important;
}

body.v2:has(.upc-modal) #content {
    z-index: 1400;
}

body.v2:has(.upc-modal) .cover.show_own_header .wrapper-right {
    z-index: 100 !important;
}

body.v2.modal-open .modal-dialog {
    margin: clamp(4.5rem, 15vw, 6rem) auto 1rem;
    max-width: calc(100% - 2rem);
}

@media (min-width: 768px) {
    body.v2.modal-open .modal-dialog {
        width: min(42rem, calc(100% - 2rem));
        margin-top: calc(var(--dk-header-height) + var(--dk-safe-area-top) + 1.5rem);
        margin-bottom: 2rem;
    }
}

.modal-content {
    border: none;
    border-radius: var(--dk-border-radius);
    overflow: hidden;
}

.modal-header {
    padding: max(1vw, 1rem) max(2vw, 1rem);
    border-top-left-radius: var(--dk-border-radius);
    border-top-right-radius: var(--dk-border-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 0;
    background: #000000;
    border: none;
}
.modal-header:before, .modal-header:after {
    display: none;
    content: "";
}
.modal-title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    color: var(--dk-color-white) !important;
}

.modal-header .close {
    margin: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 1;
    text-transform: lowercase;
}

.modal-body {
    padding: max(2vw, 1rem);
    background: #000000;
    color: var(--dk-color-white);
}

/* Modals – white headlines/body (override global .text-system green) */
body.v2 .modal .modal-title,
body.v2 .modal .modal-body,
body.v2 .modal .modal-body .text-system,
body.v2 .modal .modal-body h1,
body.v2 .modal .modal-body h2,
body.v2 .modal .modal-body h3,
body.v2 .modal .modal-body h4,
body.v2 .modal .modal-body h5,
body.v2 .modal .modal-body h6,
body.v2 .modal .modal-body p,
body.v2 .modal .modal-body li,
body.v2 .modal .modal-body label,
body.v2 .modal .modal-body .well,
body.v2 .modal .modal-body .well h1,
body.v2 .modal .modal-body .well h2,
body.v2 .modal .modal-body .well h3,
body.v2 .modal .modal-body .well h4,
body.v2 .modal .modal-body .well .text-system {
    color: var(--dk-color-white) !important;
}

body.v2 .modal .modal-body :is(span, div, em, i, strong, b, font, u, small, td, th, blockquote),
body.v2 .modal .modal-body .well :is(span, div, em, i, strong, b, font, u, small, td, th) {
    color: var(--dk-color-white) !important;
}

body.v2 .modal .modal-header .close {
    color: var(--dk-color-white) !important;
}

body.v2 .modal .modal-body a.color {
    color: var(--dk-color-white) !important;
    text-decoration: underline !important;
}

body.v2 .modal .modal-body a.color:hover,
body.v2 .modal .modal-body a.color:focus {
    color: var(--dk-color-green) !important;
    text-decoration: none !important;
}

.modal-footer {
    padding: max(1vw, 1rem) max(2vw, 1rem);
    border-bottom-left-radius: var(--dk-border-radius);
    border-bottom-right-radius: var(--dk-border-radius);
    background: #000000;
    border: none;
}

/* Kundenwunsch: alle Modals einheitlich abgerundet. Der Warenkorb
   (#modal_invoice) erscheint bereits rund, Ticketform/Kundendaten
   (personalization_data_/repersonalization_data_/#modal-holder) aber
   eckig – das deutet auf eine eckige Basis-Regel ausserhalb dieser Datei
   hin, die die obige .modal-content-Regel ueberschreibt. Hier mit
   erhoehter Spezifitaet + !important erzwungen, damit wirklich jedes
   Modal (unabhaengig von ID/Herkunft) dieselbe Rundung erhaelt. */
body.v2 .modal .modal-content,
body.v2 [id^="personalization_data_"].modal .modal-content,
body.v2 [id^="repersonalization_data_"].modal .modal-content,
body.v2 #modal-holder .modal .modal-content {
    border-radius: var(--dk-border-radius) !important;
    overflow: hidden !important;
}

body.v2 .modal .modal-header,
body.v2 [id^="personalization_data_"].modal .modal-header,
body.v2 [id^="repersonalization_data_"].modal .modal-header,
body.v2 #modal-holder .modal .modal-header {
    border-top-left-radius: var(--dk-border-radius) !important;
    border-top-right-radius: var(--dk-border-radius) !important;
}

body.v2 .modal .modal-footer,
body.v2 [id^="personalization_data_"].modal .modal-footer,
body.v2 [id^="repersonalization_data_"].modal .modal-footer,
body.v2 #modal-holder .modal .modal-footer {
    border-bottom-left-radius: var(--dk-border-radius) !important;
    border-bottom-right-radius: var(--dk-border-radius) !important;
}

body.v2 .modal-footer .btn-default {
    border-radius: 0;
    font-weight: 900;
    text-transform: uppercase;
}

/* Modals – green action buttons on light background */
body.v2 .modal .btn-brand,
body.v2 .modal .btn.btn-brand,
body.v2 .modal .btn-ok,
body.v2 .modal .btn.btn-ok,
body.v2 .modal a.btn-brand,
body.v2 .modal button.btn-brand,
body.v2 .modal input.btn-brand {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    font-weight: 900;
    text-transform: uppercase;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2 .modal .btn-brand:hover,
body.v2 .modal .btn.btn-brand:hover,
body.v2 .modal .btn-brand:focus,
body.v2 .modal .btn.btn-brand:focus,
body.v2 .modal .btn-brand:focus-visible,
body.v2 .modal .btn-ok:hover,
body.v2 .modal .btn.btn-ok:hover,
body.v2 .modal .btn-ok:focus,
body.v2 .modal .btn.btn-ok:focus,
body.v2 .modal .btn-ok:focus-visible,
body.v2 .modal a.btn-brand:hover,
body.v2 .modal a.btn-brand:focus,
body.v2 .modal button.btn-brand:hover,
body.v2 .modal button.btn-brand:focus,
body.v2 .modal input.btn-brand:hover,
body.v2 .modal input.btn-brand:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: var(--dk-color-white) !important;
}

body.v2 .modal .btn-brand .fa,
body.v2 .modal .btn.btn-brand .fa,
body.v2 .modal .btn-ok .fa,
body.v2 .modal .btn.btn-ok .fa,
body.v2 .modal .btn-brand i.fa,
body.v2 .modal .btn-ok i.fa {
    color: inherit !important;
}

/* Modals – standalone form fields (help modal etc., not split input groups) */
body.v2 .modal .modal-body .form-control {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dk-color-white);
    background-color: #000000;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

body.v2 .modal .modal-body .form-control::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

body.v2 .modal .modal-body .form-control:focus {
    border-color: var(--dk-color-green);
    box-shadow: 0 0 0 1px var(--dk-color-green);
    outline: none;
}

/* Help modal etc. – pill split (input + submit), mirrors Freischaltcode */
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #000000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    gap: 0;
    box-sizing: border-box;
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)):focus-within {
    border-color: var(--dk-color-green);
    box-shadow: 0 0 0 1px var(--dk-color-green);
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-addon {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 1% !important;
    max-width: none;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    background-color: #000000;
    color: var(--dk-color-white);
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-addon {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    vertical-align: middle;
    white-space: nowrap;
}

body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn-brand,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn-ok,
body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    height: 100%;
    margin: 0 !important;
    padding: 0.625rem 1rem;
    border: none !important;
    border-radius: 0 !important;
    white-space: nowrap;
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);
    line-height: 1.1;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    width: auto !important;
}

body.v2 .modal .modal-body .well,
body.v2 .modal .modal-body .well.well-flat,
body.v2 .modal .modal-body .well-flat,
body.v2 .modal .modal-body .well.well-feature,
body.v2 .modal .modal-body .well.well-icon {
    border: none;
    border-radius: var(--dk-border-radius);
    background: #000000 !important;
    box-shadow: none;
    padding: 1rem;
    margin-bottom: 1rem;
}

body.v2 .modal .modal-body .well:last-child {
    margin-bottom: 0;
}

body.v2 .modal .modal-body .well > hr,
body.v2 .modal .modal-body hr.less-margin {
    margin: 1rem 0;
}

/* Event-info / help modal (Infos zur Veranstaltung, Hilfe, ...) - key/value rows
   rendered as plain .data > .line / .line-label divs. These were only styled
   for the logged-in portal (".data-wrapper" under a page with a navbar); inside
   a .modal they inherited an unstyled/light default look while the text above
   was forced to white, producing white-on-white rows. Force readable colors
   regardless of page context. */
body.v2 .modal .modal-body .data,
body.v2 .modal .modal-body .line,
body.v2 .modal .modal-body .line.line-label {
    background: transparent !important;
    color: var(--dk-color-white) !important;
}

body.v2 .modal .modal-body .line.line-label {
    font-weight: 700;
    opacity: 0.85;
}

/* Tables inside modals (Warenkorb-/Info-/Hilfe-Modal etc.) - Bootstrap's default
   contextual row backgrounds (.active/.success/.info/.warning/.danger/.finaltotal)
   are light/white by default and were only neutralized for #content main .table,
   not for tables rendered inside a .modal. Combined with the white text forced
   above, this produced white-on-white rows. Strip those backgrounds here too. */
body.v2 .modal .modal-body .table {
    color: var(--dk-color-white);
    border-collapse: separate;
    border-spacing: 0;
}

body.v2 .modal .modal-body .table > thead > tr > th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent !important;
}

body.v2 .modal .modal-body .table > tbody > tr > td,
body.v2 .modal .modal-body .table > tbody > tr > th {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background-color: transparent !important;
}

body.v2 .modal .modal-body .table > tbody > tr.active > td,
body.v2 .modal .modal-body .table > tbody > tr.success > td,
body.v2 .modal .modal-body .table > tbody > tr.info > td,
body.v2 .modal .modal-body .table > tbody > tr.warning > td,
body.v2 .modal .modal-body .table > tbody > tr.danger > td,
body.v2 .modal .modal-body .table > tbody > tr.finaltotal > td,
body.v2 .modal .modal-body .table > tbody > tr.active,
body.v2 .modal .modal-body .table > tbody > tr.success,
body.v2 .modal .modal-body .table > tbody > tr.info,
body.v2 .modal .modal-body .table > tbody > tr.warning,
body.v2 .modal .modal-body .table > tbody > tr.danger,
body.v2 .modal .modal-body .table > tbody > tr.finaltotal {
    background-color: transparent !important;
}

body.v2 .modal .modal-body .table > tbody > tr.finaltotal > td {
    color: var(--dk-color-green) !important;
    border-top: 2px solid var(--dk-color-green);
    font-weight: 900;
}

/* Portal modals – readable text on brand-brown modal chrome (see stronger override at end of file) */
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-content,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-header,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-content,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-header,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-body,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-footer,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-content,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-header,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-body,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-footer,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-content,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-header,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-body,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-title,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-title,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-title,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-title {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-header .close,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal .modal-header .close,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"].modal .modal-header .close,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-header .close {
    color: var(--dk-color-white) !important;
}

/* Event time modal: TicketPay serves malformed markup – the second ".col-md-6"
   ("Ende der Veranstaltung") is nested INSIDE the first one (missing closing
   </div>). Bootstrap's float grid then renders "Ende" as a narrow, indented
   half-width column that wraps. Neutralize every column in this modal to a
   clean, full-width stacked block so both date blocks align identically,
   regardless of the broken nesting.
   Scoped via the clock icon in the title (:has) so it works no matter which id
   the modal gets on shop vs. portal; #time kept as an extra fallback. */
body.v2 #time .modal-body .row,
body.v2 #time .modal-body .col-md-6,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .row,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .col-md-6 {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Bootstrap's .row clearfix pseudo-elements add stray boxes – disable them. */
body.v2 #time .modal-body .row::before,
body.v2 #time .modal-body .row::after,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .row::before,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .row::after {
    display: none;
}

/* Spacing between the two date blocks (nested or sibling markup). */
body.v2 #time .modal-body .col-md-6 .col-md-6,
body.v2 #time .modal-body .col-md-6 + .col-md-6,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .col-md-6 .col-md-6,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body .col-md-6 + .col-md-6 {
    margin-top: 0.75rem;
}

body.v2 #time .modal-body h4,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

body.v2 #time .modal-body p,
body.v2 .modal:has(.modal-title .fa-clock-o) .modal-body p {
    margin: 0;
}

/* ==========================================================================
   Info icon (ticketshop/info.svg)
   ========================================================================== */

.fa-info::before,
.fa-info-circle::before {
    content: "" !important;
    display: inline-block;
    width: 0.75em;
    height: 0.875em;
    vertical-align: -0.05em;
    background-color: currentColor;
    -webkit-mask-image: var(--dk-info-icon-mask);
    mask-image: var(--dk-info-icon-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.label-tooltip .fa-info,
.label-tooltip .fa-info-circle {
    margin-right: 0.25em;
}

/* ==========================================================================
   Alert
   ========================================================================== */

.alert {
    padding: 1rem 2rem;
    margin-bottom: 20px;
    border: none;
    border-radius: var(--dk-border-radius);
    font-weight: bold;
}

.alert-danger {
    color: white;
    background-color: var(--dk-color-red);
    border: none;
}

.alert-info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green);
    border: none;
}

.alert-info .fa-info,
.alert-info .fa-info-circle {
    flex-shrink: 0;
}

.alert-info .fa-info::before,
.alert-info .fa-info-circle::before {
    width: 0.875rem;
    height: 1rem;
}

.alert-warning {
    color: var(--dk-color-black);
    background-color: var(--dk-color-yellow);
    border: none;
}

.alert-success {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green) !important;
    border: none;
}

.alert-success :is(p, strong, span, em, i, small, .fa, a:not(:hover):not(:focus)) {
    color: var(--dk-color-black) !important;
}

body.v2 #content main .alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    font-weight: 400;
}

body.v2 #content main .alert p {
    margin: 0;
}

body.v2 #content main .alert p + p {
    margin-top: 0.5rem;
}


/* ==========================================================================
   Page - Checkout (Kundendaten, Bezahlmethode)
   ========================================================================== */

body.v2 #content main .row .well.well-light,
body.v2 #paymentchoose .well,
body.v2 #klarna_container .well {
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
    border: none;
    margin-bottom: clamp(1.25rem, 2vw, 2.5rem);
}

body.v2 #content main .row .well.well-light h2,
body.v2 #paymentchoose .well h2,
body.v2 #klarna_container .well h2 {
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 1rem;
}

body.v2 #content main .well.well-light hr.less-margin,
body.v2 #paymentchoose .well hr.less-margin,
body.v2 #klarna_container .well hr.less-margin {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}

body.v2 #content main > .row#ticketchoose .well h2,
body.v2 #content main > .row#customerdata .well h2 {
    margin-bottom: 1rem;
}

/* Lieferanschrift & Versandoptionen: hier liegt zwischen #content main und
   der eigentlichen .row noch ein zusaetzlicher #shipping-Wrapper, dadurch
   griff die ">"-Regel oben nicht und die Box blieb weiss/unstyled. Zur
   Absicherung zusaetzlich direkt ueber #shipping/#deliverychoose greifen,
   unabhaengig davon welche well-Modifier-Klasse tatsaechlich verwendet wird. */
body.v2 #shipping .well,
body.v2 #shippingaddress .well,
body.v2 #deliverychoose .well {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
    border: none !important;
}
body.v2 #shipping .well h2,
body.v2 #shipping .well h3,
body.v2 #shipping .well h4,
body.v2 #shipping .well label,
body.v2 #shipping .well .checkbox,
body.v2 #shipping .well .checkbox label {
    color: var(--dk-color-text) !important;
}
body.v2 #shipping .well h2 {
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 1rem;
}
body.v2 #shipping .well hr.less-margin {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}

body.v2 #content main .control-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

body.v2 #content main .asterisk {
    color: var(--dk-color-red);
}

body.v2 #content main .form-group {
    margin-bottom: 1.25rem;
}

/* Checkout inputs – newsletter style (transparent, white outline) */
body.v2 #content main .form-control:not(.show_quantity_select):not(#redeem_coupon) {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    color: var(--dk-color-text);
    background-color: transparent;
    background-image: none;
    border: 1px solid rgba(26, 26, 26, 0.85);
    border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
}

body.v2 #content main .form-control:not(.show_quantity_select):not(#redeem_coupon)::placeholder {
    color: rgba(26, 26, 26, 0.75);
}

body.v2 #content main .form-control:not(.show_quantity_select):not(#redeem_coupon):focus {
    border-color: var(--dk-color-green);
    box-shadow: 0 0 0 1px var(--dk-color-green);
    outline: none;
    background-color: transparent;
    color: var(--dk-color-text);
}

body.v2 #content main select.form-control:not(.show_quantity_select) {
    color: var(--dk-color-text);
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
}

body.v2 .has-error .form-control:not(.show_quantity_select) {
    border-color: var(--dk-color-red) !important;
    box-shadow: 0 0 0 1px var(--dk-color-red) !important;
}

body.v2 #content main .checkbox {
    padding-left: 0;
    margin: 0;
}

body.v2 #content main .checkbox label {
    font-weight: 400;
    cursor: pointer;
}

body.v2 #content main .bs-callout {
    border-radius: var(--dk-border-radius);
    padding: clamp(0.875rem, 1.25vw, 1.25rem);
    margin: 0;
    border: 2px solid transparent;
    background-color: rgba(26, 26, 26, 0.05) !important;
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease;
    cursor: pointer;
}

body.v2 #content main .bs-callout-default {
    border-color: transparent;
    background-color: rgba(26, 26, 26, 0.05) !important;
}

body.v2 #content main .bs-callout-default:hover {
    border-color: rgba(51, 204, 153, 0.4);
}

body.v2 #content main .bs-callout-default:has(input:checked) {
    border-color: var(--dk-color-green) !important;
    background-color: rgba(51, 204, 153, 0.1) !important;
}

body.v2 #content main .bs-callout label {
    display: block;
    position: relative;
    padding-left: calc(1.25rem + 0.75rem);
    margin: 0;
    cursor: pointer;
    color: var(--dk-color-text);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.3;
}

body.v2 #content main .bs-callout .font-default {
    display: block;
    margin-top: 0.375rem;
    color: var(--dk-color-text);
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    min-width: 0;
}

body.v2 #content main .bs-callout .font-default b {
    color: var(--dk-color-text);
    font-weight: 700;
}

body.v2 #content main .bs-callout a.color:hover,
body.v2 #content main .bs-callout a.color:focus {
    color: var(--dk-color-text) !important;
    text-decoration: underline;
}

body.v2 #content main .bs-callout-danger {
    border-color: var(--dk-color-red) !important;
    background-color: rgba(204, 102, 102, 0.15) !important;
}

body.v2 #content main .bs-callout-danger input[type="checkbox"] {
    accent-color: var(--dk-color-red);
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.65);
    border-radius: 0;
}

body.v2 #content main .bs-callout input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--dk-color-green);
    cursor: pointer;
}

/* MyTicket Portal: Checkbox im Umpersonalisierungs-Flow (DOM hat kein "#content main") */
body.v2:has(.navbar.navbar-default) #content #personalize_box {
    border-radius: var(--dk-border-radius);
    padding: clamp(0.875rem, 1.25vw, 1.25rem);
    margin: 0;
    border: 2px solid transparent;
    background-color: rgba(26, 26, 26, 0.05) !important;
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease;
    cursor: pointer;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box:hover {
    border-color: rgba(51, 204, 153, 0.4);
}

body.v2:has(.navbar.navbar-default) #content #personalize_box:has(input:checked) {
    border-color: var(--dk-color-green) !important;
    background-color: rgba(51, 204, 153, 0.1) !important;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box.bs-callout-danger {
    border-color: var(--dk-color-red) !important;
    background-color: rgba(204, 102, 102, 0.15) !important;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box label {
    display: block;
    position: relative;
    padding-left: calc(1.25rem + 0.75rem);
    margin: 0;
    cursor: pointer;
    color: var(--dk-color-text);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.3;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box .font-default {
    display: block;
    margin-top: 0.375rem;
    color: var(--dk-color-text);
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    min-width: 0;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box .font-default b {
    color: var(--dk-color-text);
    font-weight: 700;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--dk-color-green);
    cursor: pointer;
}

body.v2:has(.navbar.navbar-default) #content #personalize_box.bs-callout-danger input[type="checkbox"] {
    accent-color: var(--dk-color-red);
}

body.v2 #content main #customerdata .form-group:has(.bs-callout) {
    margin-bottom: 0.625rem;
}

body.v2 #content main #customerdata .form-group:has(.bs-callout):last-of-type {
    margin-bottom: 1.25rem;
}

body.v2 #content main #abort_button {
    border-radius: 0;
    border: 1px solid var(--dk-color-red) !important;
    background: var(--dk-color-red) !important;
    color: var(--dk-color-black) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

body.v2 #content #abort_button:hover,
body.v2 #content #abort_button:focus,
body.v2 #content #abort_button:focus-visible {
    color: var(--dk-color-text) !important;
    border-color: var(--dk-color-text) !important;
    background-color: var(--dk-color-surface) !important;
    box-shadow: none !important;
}

body.v2 #content .iti {
    width: 100%;
}

body.v2 #content .iti .iti__selected-country {
    border-radius: 0;
}

/* Ticketversicherung */
body.v2 #content main .well.well-light:has(#insurance_form) .row > .col-md-4.text-right img {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background-color: var(--dk-color-text);
    border-radius: calc(var(--dk-border-radius) * 0.5);
    box-sizing: content-box;
}

body.v2 #content main .well.well-light:has(#insurance_form) a:not(.btn):hover,
body.v2 #content main .well.well-light:has(#insurance_form) a:not(.btn):focus {
    color: var(--dk-color-text) !important;
    text-decoration: underline;
}

body.v2 #content main #insurance_form .radio label {
    color: var(--dk-color-text);
    font-weight: 400;
    cursor: pointer;
}

body.v2 #content main #insurance_form .radio input[type="radio"] {
    accent-color: var(--dk-color-green);
    cursor: pointer;
}

/* Page 4 – Bezahlmethode */
body.v2 #content main > .row:has(#paymentchoose) {
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    body.v2 #content main > .row:has(#paymentchoose) > .col-md-4 {
        padding-right: 0.75rem;
    }

    body.v2 #content main > .row:has(#paymentchoose) > .col-md-8 {
        padding-left: 0.75rem;
    }
}

body.v2 #paymentchoose .well.well-minheight {
    min-height: 0;
}

body.v2 #paymentchoose .well > form > .form-group {
    margin-bottom: 0;
}

body.v2 #paymentchoose .form-group .form-group {
    margin-bottom: 0.625rem;
}

body.v2 #paymentchoose .form-group .form-group:last-child {
    margin-bottom: 0;
}

/* Payment methods */
body.v2 .paymentmethod {
    position: relative !important;
    display: grid !important;
    height: auto !important;
    min-height: 0;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 0.875rem;
    align-items: center;
    padding: clamp(0.875rem, 1.25vw, 1.25rem);
    margin-bottom: 0.625rem;
    border-radius: var(--dk-border-radius);
    background-color: rgba(26, 26, 26, 0.05) !important;
    border: 2px solid transparent;
    transition: border-color 150ms ease, background-color 150ms ease;
    cursor: pointer;
    font-weight: 600;
}

body.v2 .paymentmethod:hover {
    border-color: rgba(51, 204, 153, 0.4);
}

/* MyTicket Portal (Umpersonalisierung): Zahlungslogos ohne Radios/Text
   -> nebeneinander in einzelnen Boxen anzeigen, keine Hover-Hervorhebung. */
body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
    margin-bottom: 0.625rem;
    background-color: transparent !important;
    border: none !important;
    cursor: default;
    transition: none !important;
}

body.v2 .paymentmethod:not(:has(.paymentmethod_radio)):hover {
    border-color: transparent !important;
    background-color: transparent !important;
}

body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) .paymentmethod_image {
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    width: 7.5rem;
    height: 3.5rem;
    margin: 0 !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--dk-border-radius);
    cursor: default !important;
    line-height: 1 !important;
}

body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) .paymentmethod_image img {
    max-width: 100% !important;
    max-height: 2.25rem !important;
    width: auto;
    height: auto;
}

@media (max-width: 767px) {
    /* Portal info logos (Umpersonalisierung etc.) – all payment icons in one row */
    body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) {
        flex-wrap: nowrap;
        gap: 0.375rem;
        width: 100%;
    }

    body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) .paymentmethod_image {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        height: auto;
        min-height: 2.5rem;
        padding: 0.25rem 0.125rem !important;
    }

    body.v2 .paymentmethod:not(:has(.paymentmethod_radio)) .paymentmethod_image img {
        max-height: 1.625rem !important;
    }
}

body.v2 .paymentmethod:has(input:checked),
body.v2 .paymentmethod.paymentmethod-checked {
    border-color: var(--dk-color-green) !important;
    background-color: rgba(51, 204, 153, 0.1) !important;
}

body.v2 .paymentmethod_radio,
body.v2 .paymentmethod_image,
body.v2 .paymentmethod_extra {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    text-align: left !important;
}

body.v2 .paymentmethod_radio {
    grid-row: 1 / 3;
}

body.v2 .paymentmethod_image {
    grid-column: 2;
    grid-row: 1 / 3;
    line-height: normal !important;
}

body.v2 .paymentmethod_image img {
    max-height: 2.5rem;
    width: auto;
    max-width: 100px;
}

body.v2 .paymentmethod_text {
    grid-column: 3;
    grid-row: 1;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 !important;
    cursor: pointer;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
}

/* PayPal markup: <div class="paymentmethod_text"><label style="font-weight: normal">… */
body.v2 .paymentmethod_text label {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    line-height: 1.3 !important;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    cursor: pointer;
}

body.v2 .paymentmethod.paymentmethod-checked .paymentmethod_text,
body.v2 .paymentmethod:has(input:checked) .paymentmethod_text {
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
}

/* Kundenwunsch: Gebühren-%-Angabe je Zahlungsmethode komplett ausblenden */
body.v2 .paymentmethod_extra {
    display: none !important;
}

/* OPPWA / VR Pay Copy & Pay – Kreditkartenformular (wpwl-*)
   TicketPay addClass('form-control') – höhere Spezifität nötig. */
body.v2 .wpwl-container,
body.v2 .wpwl-form {
    --dk-wpwl-field-height: 3rem;
    color: var(--dk-color-text);
    font-family: var(--dk-font-family);
}

/* OPPWA floats/clears außer Kraft setzen */
body.v2 .wpwl-clearfix::before,
body.v2 .wpwl-clearfix::after {
    content: none !important;
    display: none !important;
}

body.v2 .wpwl-label,
body.v2 .wpwl-wrapper,
body.v2 .wpwl-brand,
body.v2 .wpwl-button {
    float: none !important;
}

body.v2 .wpwl-group {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.375rem;
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    width: 100%;
}

body.v2 .wpwl-group-brand {
    grid-template-columns: minmax(0, 1fr) auto;
}

body.v2 .wpwl-group-brand .wpwl-label {
    grid-column: 1 / -1;
}

body.v2 .wpwl-group-brand .wpwl-wrapper {
    grid-column: 1;
}

body.v2 .wpwl-group-brand .wpwl-brand {
    grid-column: 2;
}

body.v2 .wpwl-group-submit {
    margin-top: 1.25rem;
    margin-bottom: 0;
    justify-items: end;
}

body.v2 .wpwl-label {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--dk-color-text) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.3;
}

body.v2 .wpwl-label small {
    display: inline;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    color: rgba(26, 26, 26, 0.7);
}

body.v2 .wpwl-label small a {
    color: var(--dk-color-green) !important;
    text-decoration: none;
}

body.v2 .wpwl-label small a:hover,
body.v2 .wpwl-label small a:focus {
    color: var(--dk-color-text) !important;
    text-decoration: underline;
}

body.v2 .wpwl-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.v2 .wpwl-brand,
body.v2 .wpwl-brand-card {
    /* OPPWA-Sprite: Position nicht anfassen – feste Logo-Fläche + weißer Rahmen */
    display: block !important;
    box-sizing: content-box !important;
    margin: 0.35rem !important;
    padding: 0 !important;
    background-color: var(--dk-color-text) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 0.35rem var(--dk-color-text);
    overflow: visible;
    align-self: center;
}

/*
 * OPPWA setzt ab 480px:
 *   .wpwl-wrapper-brand, .wpwl-brand-card { width: 33.33333333%; }
 * Das quetscht das Logo zu einem schmalen Streifen – zurück auf feste Logo-Größe.
 */
@media (min-width: 480px) {
    body.v2 .wpwl-wrapper-brand {
        width: auto !important;
        max-width: none !important;
    }

    body.v2 .wpwl-brand-card,
    body.v2 .wpwl-brand.wpwl-brand-card {
        width: 65px !important;
        height: 40px !important;
        max-width: 65px !important;
        flex: 0 0 65px !important;
    }
}

/* Inputs / selects – wie Käuferdaten (transparent, weiße Outline) */
body.v2 .wpwl-control,
body.v2 .wpwl-control.form-control,
body.v2 #content main .wpwl-control.form-control,
body.v2 #content main .wpwl-form .form-control {
    display: block;
    box-sizing: border-box !important;
    width: 100%;
    height: var(--dk-wpwl-field-height) !important;
    min-height: var(--dk-wpwl-field-height) !important;
    max-height: var(--dk-wpwl-field-height) !important;
    padding: 0.5rem 1rem !important;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65rem;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Einheitliche Placeholder-Farbe (Native-Felder; Firefox braucht opacity) */
body.v2 .wpwl-control::placeholder,
body.v2 .wpwl-control.form-control::placeholder,
body.v2 #content main .wpwl-form .form-control::placeholder,
body.v2 .wpwl-control-expiry::placeholder,
body.v2 .wpwl-control-cardHolder::placeholder,
body.v2 input.wpwl-control::placeholder {
    color: rgba(26, 26, 26, 0.75) !important;
    opacity: 1 !important;
}

body.v2 .wpwl-control::-webkit-input-placeholder,
body.v2 input.wpwl-control::-webkit-input-placeholder {
    color: rgba(26, 26, 26, 0.75) !important;
    opacity: 1 !important;
}

body.v2 .wpwl-control::-moz-placeholder,
body.v2 input.wpwl-control::-moz-placeholder {
    color: rgba(26, 26, 26, 0.75) !important;
    opacity: 1 !important;
}

body.v2 .wpwl-control:focus,
body.v2 .wpwl-control.form-control:focus,
body.v2 #content main .wpwl-form .form-control:focus {
    border-color: var(--dk-color-green) !important;
    box-shadow: 0 0 0 1px var(--dk-color-green) !important;
    outline: none;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
}

body.v2 select.wpwl-control,
body.v2 select.wpwl-control.form-control,
body.v2 #content main .wpwl-form select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem !important;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    cursor: pointer;
    color-scheme: light;
}

body.v2 select.wpwl-control option,
body.v2 #content main .wpwl-form select.form-control option {
    color: var(--dk-color-black);
    background-color: var(--dk-color-text);
}

/*
 * PCI iframes (Kartennummer / CVV): Innen-Padding geht nur über den Wrapper,
 * weil der Iframe-Inhalt vom Payment-Provider kommt.
 */
body.v2 .wpwl-wrapper-cardNumber,
body.v2 .wpwl-wrapper-cvv {
    display: flex !important;
    align-items: center;
    box-sizing: border-box !important;
    height: var(--dk-wpwl-field-height) !important;
    min-height: var(--dk-wpwl-field-height) !important;
    padding: 0 1rem !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    overflow: hidden;
}

body.v2 .wpwl-wrapper-cardNumber:focus-within,
body.v2 .wpwl-wrapper-cvv:focus-within {
    border-color: var(--dk-color-green) !important;
    box-shadow: 0 0 0 1px var(--dk-color-green);
}

body.v2 .wpwl-wrapper-cardNumber iframe.wpwl-control,
body.v2 .wpwl-wrapper-cvv iframe.wpwl-control,
body.v2 .wpwl-wrapper-cardNumber iframe.wpwl-control-iframe,
body.v2 .wpwl-wrapper-cvv iframe.wpwl-control-iframe {
    display: block;
    flex: 1 1 auto;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    max-height: 1.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Fallback für andere wpwl-iframes (falls vorhanden) */
body.v2 iframe.wpwl-control:not(.wpwl-control-cardNumber):not(.wpwl-control-cvv),
body.v2 iframe.wpwl-control-iframe:not(.wpwl-control-cardNumber):not(.wpwl-control-cvv) {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--dk-wpwl-field-height) !important;
    min-height: var(--dk-wpwl-field-height) !important;
    max-height: var(--dk-wpwl-field-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* „Jetzt bezahlen“ – Grün → Hover Gelb */
body.v2 .wpwl-button,
body.v2 .wpwl-button-pay,
body.v2 button.wpwl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dk-wpwl-field-height);
    height: var(--dk-wpwl-field-height);
    padding: 0 1.5rem;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    font-family: var(--dk-font-family);
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 150ms ease, color 150ms ease;
}

body.v2 .wpwl-button:hover,
body.v2 .wpwl-button:focus,
body.v2 .wpwl-button-pay:hover,
body.v2 .wpwl-button-pay:focus,
body.v2 button.wpwl-button:hover,
body.v2 button.wpwl-button:focus {
    background-color: var(--dk-color-yellow) !important;
    color: var(--dk-color-black) !important;
    outline: none;
}

/* Kreditkarten-Box: Gesamtbetrag + Zurück */
body.v2 .well.well-light:has(.wpwl-form) > .mb-10 p,
body.v2 .well.well-light:has(.wpwl-container) > .mb-10 p {
    margin: 0;
    color: var(--dk-color-text);
    font-size: 1rem;
    font-weight: 700;
}

body.v2 .well.well-light:has(.wpwl-form) > a.btn.btn-default,
body.v2 .well.well-light:has(.wpwl-container) > a.btn.btn-default {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    margin-top: 0.5rem;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--dk-color-text) !important;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8125rem;
    text-decoration: none !important;
}

body.v2 .well.well-light:has(.wpwl-form) > a.btn.btn-default:hover,
body.v2 .well.well-light:has(.wpwl-form) > a.btn.btn-default:focus,
body.v2 .well.well-light:has(.wpwl-container) > a.btn.btn-default:hover,
body.v2 .well.well-light:has(.wpwl-container) > a.btn.btn-default:focus {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

@media (min-width: 768px) {
    body.v2 .wpwl-group {
        grid-template-columns: 10rem minmax(0, 1fr);
    }

    body.v2 .wpwl-group-brand {
        grid-template-columns: 10rem minmax(0, 1fr) auto;
    }

    body.v2 .wpwl-group-brand .wpwl-label {
        grid-column: 1;
    }

    body.v2 .wpwl-group-brand .wpwl-wrapper {
        grid-column: 2;
    }

    body.v2 .wpwl-group-brand .wpwl-brand {
        grid-column: 3;
    }

    body.v2 .wpwl-group-submit {
        grid-template-columns: 10rem minmax(0, 1fr);
    }

    body.v2 .wpwl-group-submit .wpwl-wrapper-submit {
        grid-column: 2;
        justify-self: end;
        width: auto;
    }
}

body.v2 .radio-styled input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--dk-color-green);
    cursor: pointer;
}

/* "Ihre reservierte Bestellung" (Bezahllink-Seite): .well.well-flat behaelt
   hier noch Bootstraps hellen Standard-Hintergrund, waehrend der
   Tabellentext direkt darunter global auf weiss gestellt ist (fuer die
   dunklen Boxen im Rest des Shops) - das ergab weissen Text auf weissem
   Grund. Genau dasselbe Muster wurde weiter oben schon fuer .well-flat
   innerhalb von Modals gefixt; hier greift dieselbe Loesung fuer den Fall,
   dass .well-flat ausserhalb eines Modals auftaucht (z. B. in der dunklen
   Jumbotron-Box auf der Bezahllink-Seite): einfach "flach" in die dunkle Box
   darum uebergehen lassen statt einen eigenen hellen Kasten zu zeigen. */
body.v2 .well.well-flat {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Order table */
body.v2 #content main .table {
    color: var(--dk-color-text);
    border-collapse: separate;
    border-spacing: 0;
}

body.v2 #content main .table > thead > tr > th {
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    font-weight: 900;
    padding: 0.5rem 0.75rem 0.75rem;
    color: rgba(26, 26, 26, 0.7);
}

body.v2 #content main .table > tbody > tr > td {
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    padding: 0.75rem;
    vertical-align: top;
}

body.v2 #content main .table > tbody > tr.active > td {
    background-color: transparent;
}

body.v2 #content main .table > tbody > tr.active > td,
body.v2 #content main .table > tbody > tr.bold > td {
    font-weight: 700;
}

body.v2 #content main .table > thead > tr > th:last-child {
    width: auto !important;
    min-width: 7.5rem;
}

body.v2 #content main .table > tbody > tr.finaltotal,
body.v2 #content main .table > tbody > tr.finaltotal > td {
    background-color: transparent !important;
}

body.v2 #content main .table > tbody > tr.finaltotal > td {
    font-weight: 900;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--dk-color-green);
    border-top: 2px solid var(--dk-color-green);
    padding-top: 1rem;
    vertical-align: middle;
}

body.v2 #content main .table > tbody > tr.finaltotal > td:last-child,
body.v2 #content main .table > tbody > tr.finaltotal > td#total_amount {
    white-space: nowrap;
}

body.v2 #content main .table .line {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Page 5 – Bestätigung / Ergebnis */
body.v2 #content main .jumbotron.jumbotron-success {
    text-align: center;
}

body.v2 #content main .jumbotron.jumbotron-success h1,
body.v2 #content main .jumbotron.jumbotron-success p {
    text-align: center;
}

body.v2 #content main .jumbotron.jumbotron-success p {
    margin-bottom: 1rem;
}

body.v2 #content main .jumbotron.jumbotron-success .well {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

body.v2 #content main .jumbotron.jumbotron-success .well img {
    display: block;
    max-width: min(100%, 42rem);
    height: auto;
    margin: 0 auto;
}

body.v2 #content main .jumbotron.jumbotron-success > hr {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}

/* Page 7 – Bezahlung Umpersonalisierung info box */
body.v2 #content main .jumbotron.jumbotron-default > hr {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}

body.v2 #content main .jumbotron.jumbotron-success .btn-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-default,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-info {
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-info {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-default:hover,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-default:focus,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-default:focus-visible,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-info:hover,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-info:focus,
body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn-info:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

/* Vorkasse – bank transfer details as data table (readonly fields) */
body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) {
    display: grid;
    grid-template-columns: minmax(9rem, 36%) 1fr;
    gap: 0.35rem 1.25rem;
    align-items: start;
    margin: 0;
    padding: 0.875rem 1rem;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

body.v2 #content main .jumbotron > hr.less-margin + .form-group:has(> .controls > input.form-control[readonly]),
body.v2 #content main .jumbotron > hr + .form-group:has(> .controls > input.form-control[readonly]):not(
        .form-group:has(> .controls > input.form-control[readonly])
        ~ .form-group:has(> .controls > input.form-control[readonly])
    ) {
    margin-top: 1rem;
    border-top-left-radius: var(--dk-border-radius) !important;
    border-top-right-radius: var(--dk-border-radius) !important;
}

body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]):has(+ hr) {
    border-bottom: none !important;
    border-bottom-left-radius: var(--dk-border-radius) !important;
    border-bottom-right-radius: var(--dk-border-radius) !important;
    margin-bottom: 0;
    overflow: hidden;
}

body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn {
    margin-top: 1.25rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn.btn-default:hover,
body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn.btn-default:focus,
body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn.btn-default:focus-visible {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn.btn-default:hover .fa,
body.v2 #content main .jumbotron:has(.form-group > .controls > input.form-control[readonly]) > .btn.btn-default:focus .fa {
    color: inherit !important;
}

body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) .control-label {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(26, 26, 26, 0.6);
    text-align: left;
}

body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) .controls {
    margin: 0;
}

body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) input.form-control[readonly] {
    display: block;
    width: 100%;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dk-color-text) !important;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: text;
    user-select: all;
    -webkit-text-fill-color: var(--dk-color-text);
    opacity: 1;
}

body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) input.form-control[readonly]:focus {
    outline: none;
    box-shadow: none !important;
}

@media (max-width: 575px) {
    body.v2 #content main .jumbotron .form-group:has(> .controls > input.form-control[readonly]) {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* Legacy box layout (falls noch verwendet) */
.wrapper_all {
    padding: 0;
    background: none;
}

.box-grey.headline {
    padding: clamp(1rem, 2vw, 3rem);
}

.box-light, .box-dark, .box-darker, .box-grey, .box-coloured, .box-danger {
    border-radius: var(--dk-border-radius);
    padding: clamp(0.5rem, 1vw, 1.5rem);
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
}

.ticket_details .box-light {
    background-color: var(--dk-color-surface);
}

.box-inner {
    padding: clamp(0.5rem, 1vw, 1.5rem);
}

.box-footer {
    margin: 0;
    padding: clamp(0.5rem, 1vw, 1.5rem);
    background-color: transparent;
}

#warning_open_cases {
    margin-top: 30px;
}

.box-inner h3 {
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
}

.box-grey:has(+ .box-light) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.box-grey + .box-light {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.box-inner .quick_form form {
    margin: 0;
}

.data-wrapper .btn.link2details {
    width: auto;
}


/* Form */
.form-control {
    display: block;
    width: 100%;
    height: unset;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.65rem;
    color: var(--dk-color-text);
    background-color: var(--dk-color-surface);
    background-image: none;
    border: 1px solid rgba(26, 26, 26, 0.35);
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-control:focus {
    border-color: var(--dk-color-green);
    box-shadow: 0 0 0 1px var(--dk-color-green);
}

select.form-control {
    /* Custom Select Arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    padding-right: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

body.v2 footer {
    color: rgba(26, 26, 26, 0.92);
    padding: 1.5rem 0 6rem;
    line-height: 1.35;
}

body.v2 footer a {
    color: rgba(26, 26, 26, 0.92);
}

body.v2 footer a:hover {
    color: var(--dk-color-green);
}

body.v2 footer .logowrapper {
    margin-bottom: 0.5rem;
}

body.v2 footer .footer-system-logo {
    display: block;
    margin: 0 auto;
}

body.v2.nocover footer .list-inline:has(> .nocover_link) {
    display: none;
}

body.v2 footer #modal_revocation:empty {
    display: none;
}

body.v2 footer .list-inline {
    margin: 0.375rem 0 0;
}

body.v2 footer #modal_revocation + ul.list-inline {
    margin-top: 0.875rem;
}

body.v2 footer .list-inline > li {
    padding: 0 0.75rem;
    line-height: 1.35;
}

@media (max-width: 767px) {
    body.v2 footer {
        padding-top: 1.75rem;
        line-height: 1.45;
    }

    body.v2 footer .logowrapper {
        margin-bottom: 0.75rem;
    }

    body.v2 footer .list-inline {
        margin-top: 0.625rem;
    }

    body.v2 footer #modal_revocation + ul.list-inline {
        margin-top: 1.125rem;
    }

    body.v2 footer .list-inline > li {
        padding: 0.2rem 0.5rem;
        line-height: 1.45;
    }
}

body.v2 footer .btn.btn-default[onclick*="start_revoc"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    padding: 0.4rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dk-color-black) !important;
    text-decoration: none !important;
    background-color: var(--dk-color-green) !important;
    border: 2px solid var(--dk-color-green) !important;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.v2 footer .btn.btn-default[onclick*="start_revoc"]:hover,
body.v2 footer .btn.btn-default[onclick*="start_revoc"]:focus {
    color: var(--dk-color-text) !important;
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    text-decoration: none !important;
}

@media (min-width: 1024px) {
    body.v2 footer .btn.btn-default[onclick*="start_revoc"] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   MyTicket Portal
   ========================================================================== */

body.v2:has(.navbar.navbar-default) {
    padding-left: 0 !important;
    padding-bottom: 0;
}

body.v2:has(.navbar.navbar-default) .cover .cover-bg {
    left: 0 !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    body.v2:has(.navbar.navbar-default) .cover.show_own_header .wrapper-right {
        left: 0 !important;
    }
}

/* Portal navigation – unified bar with equal tabs */
body.v2 .navbar.navbar-default {
    position: sticky;
    top: calc(var(--dk-header-height) + var(--dk-safe-area-top));
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 0 0 1.5rem;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 99;
}

@media (min-width: 768px) {
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default {
        --dk-portal-nav-gap: 1.25rem;
        margin-top: var(--dk-portal-nav-gap);
        top: calc(var(--dk-header-height) + var(--dk-safe-area-top) + var(--dk-portal-nav-gap));
    }
}

body.v2 .navbar.navbar-default .navbar-header {
    display: none;
}

body.v2 .navbar.navbar-default .navbar-collapse {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
}

@media (min-width: 768px) {
    body.v2 .navbar.navbar-default .navbar-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible;
    }
}

body.v2 .navbar.navbar-default > .container {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--dk-content-padding-x);
}

/* Invoice modal lives inside .navbar-nav – hide from tab layout when closed */
body.v2 .navbar.navbar-default .navbar-nav > .modal:not(.in):not(.show),
body.v2 .navbar.navbar-default .navbar-nav > div.modal:not(.in):not(.show) {
    display: none !important;
}

body.v2.modal-open .navbar.navbar-default,
body.v2.modal-open .navbar.navbar-default .navbar-nav,
body.v2.modal-open .navbar.navbar-default .navbar-collapse {
    overflow: visible !important;
}

body.v2.modal-open .navbar.navbar-default .navbar-nav > .modal.in,
body.v2.modal-open .navbar.navbar-default .navbar-nav > .modal.show,
body.v2.modal-open .navbar.navbar-default .navbar-nav > div.modal.in,
body.v2.modal-open .navbar.navbar-default .navbar-nav > div.modal.show,
body.v2.modal-open #modal_invoice.modal {
    display: block !important;
}

body.v2 .navbar.navbar-default .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--dk-color-gray);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: var(--dk-box-shadow);
    overflow: hidden;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    border: none;
    margin: 0;
    padding: 0;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.875rem 1rem;
    margin: 0;
    border-radius: 0;
    border: none !important;
    background-color: transparent !important;
    color: var(--dk-color-white) !important;
    font-size: 0.8125rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    transition: background-color 150ms ease, color 150ms ease;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li:first-child > a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li:last-child > a {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li > a i.fa {
    font-size: 1.25rem;
    flex-shrink: 0;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li.active > a,
body.v2 .navbar.navbar-default .navbar-nav > .active > a,
body.v2 .navbar.navbar-default .navbar-nav > li.active > a:hover,
body.v2 .navbar.navbar-default .navbar-nav > li.active > a:focus,
body.v2 .navbar.navbar-default .navbar-nav > .active > a:hover,
body.v2 .navbar.navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2 .navbar.navbar-default .nav.navbar-nav > li:not(.active) > a:hover,
body.v2 .navbar.navbar-default .nav.navbar-nav > li:not(.active) > a:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--dk-color-white) !important;
}

/* Bootstrap focus ring entfernen (sichtbarer Rahmen bei Klicks) */
body.v2 .navbar.navbar-default .navbar-nav > li > a:focus,
body.v2 .navbar.navbar-default .navbar-nav > li > a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    body.v2 .navbar.navbar-default .nav.navbar-nav > li > a {
        min-height: 4rem;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        gap: 0.75rem;
    }

    body.v2 .navbar.navbar-default .nav.navbar-nav > li > a i.fa {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    body.v2 .navbar.navbar-default .nav.navbar-nav > li > a {
        min-height: 4.25rem;
        padding: 1.125rem 1.5rem;
        font-size: 1.0625rem;
    }
}

@media (max-width: 767px) {
    /* Option A: fixed bottom tab bar (portal only) */
    body.v2:has(.navbar.navbar-default) {
        --dk-portal-bottom-nav-height: calc(4.25rem + var(--dk-safe-area-bottom));
        padding-bottom: var(--dk-portal-bottom-nav-height);
    }

    body.v2:has(.navbar.navbar-default) .cover.show_own_header .wrapper-right .wrapper-right-info .btn-group.btn-group-sm {
        display: none !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0;
        margin: 0;
        z-index: 110;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default > .container {
        display: block;
        padding: 0;
        max-width: 100%;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-header {
        display: none !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-collapse,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-collapse.collapse:not(.in),
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-collapse.collapse.in {
        display: block !important;
        height: auto !important;
        overflow: visible;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-nav {
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 var(--dk-safe-area-bottom);
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        min-height: 4.25rem;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        width: auto;
        margin: 0;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li:last-child {
        border-right: none;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li > a {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.3125rem;
        min-height: 4.25rem;
        height: 100%;
        padding: 0.5rem 0.25rem;
        font-size: clamp(0.5rem, 2.4vw, 0.625rem);
        font-weight: 800;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
        white-space: normal;
        hyphens: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
        border-radius: 0 !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li:first-child > a,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li:last-child > a {
        border-radius: 0 !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li > a i.fa {
        width: auto;
        font-size: 1.25rem;
        line-height: 1;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li.active > a,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-nav > .active > a,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li.active > a:hover,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li.active > a:focus,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-nav > .active > a:hover,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-nav > .active > a:focus {
        background-color: var(--dk-color-green) !important;
        color: var(--dk-color-black) !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li.active > a i.fa,
    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .navbar-nav > .active > a i.fa {
        color: var(--dk-color-black) !important;
    }

    body.v2:has(.navbar.navbar-default) .navbar.navbar-default .nav.navbar-nav > li:not(.active) > a:active {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    body.v2:has(.navbar.navbar-default) footer {
        padding-bottom: calc(1.5rem + var(--dk-portal-bottom-nav-height));
    }
}

/* Portal case-type banner (Umpersonalisierung, Rückgabe …) – redundant with the
   form card heading, hidden to avoid the duplicate label */
body.v2:has(.navbar.navbar-default) .navbar.navbar-default.navbar-casetype {
    display: none !important;
}

/* Portal content */
body.v2:has(.navbar.navbar-default) #content {
    margin-top: 0;
}

body.v2:has(.navbar.navbar-default) #content > .container {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    /* Bootstrap .row (-15px margins) extends past .container padding → horizontal scroll */
    body.v2:has(.navbar.navbar-default) {
        overflow-x: clip;
    }

    body.v2:has(.navbar.navbar-default) #content > .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    body.v2:has(.navbar.navbar-default) #content .wrapper_all > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.v2:has(.navbar.navbar-default) #content .wrapper_all > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
        max-width: 100%;
    }

    /* Section rows inside full-width cols (ticket_details, …) */
    body.v2:has(.navbar.navbar-default) #content .wrapper_all > .row [class*="col-"] > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.v2:has(.navbar.navbar-default) #content .wrapper_all > .row [class*="col-"] > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
        max-width: 100%;
    }

    body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line,
    body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line strong {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

body.v2:has(.navbar.navbar-default) #content .wrapper_all .box-light,
body.v2:has(.navbar.navbar-default) #content .wrapper_all .box-grey,
body.v2:has(.navbar.navbar-default) #content .wrapper_all .box-grey.headline {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
    border: none !important;
    box-shadow: var(--dk-box-shadow) !important;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    padding: 0 !important;
    overflow: hidden;
}

body.v2:has(.navbar.navbar-default) #content .box-inner,
body.v2:has(.navbar.navbar-default) #content .box-inner.box-inner-nopadding {
    background-color: transparent !important;
    color: var(--dk-color-text) !important;
    padding: clamp(1rem, 2vw, 1.5rem);
}

body.v2:has(.navbar.navbar-default) #content .box-inner h3 {
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    margin-top: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    color: var(--dk-color-green) !important;
}

/* Sidebar column heading (e.g. "Umpersonalisierung") lives in a narrow col-md-4.
   The default clamp scales up to 2rem, which pushes the long single word + icon
   onto a second line on desktop. Cap the size so it stays on one line
   (mobile is full-width and therefore unaffected). */
body.v2:has(.navbar.navbar-default) #content .col-md-4 .box-inner h3 {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}

body.v2:has(.navbar.navbar-default) #content .box-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    padding: clamp(1rem, 2vw, 1.5rem);
}

/* MyTicket Portal: Inhalte in .box-dark (Formulare, Bezahl-Link, …) */
body.v2:has(.navbar.navbar-default) #content .box-dark label,
body.v2:has(.navbar.navbar-default) #content .box-dark .control-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(26, 26, 26, 0.75);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-group {
    margin-bottom: 1.25rem;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-inner p,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-inner li {
    color: rgba(26, 26, 26, 0.85);
    line-height: 1.5;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    font-weight: 400;
    line-height: 1.45;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert p,
body.v2:has(.navbar.navbar-default) #content .box-dark .alert strong,
body.v2:has(.navbar.navbar-default) #content .box-dark .alert i.fa {
    margin: 0;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert-info {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert-success {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert-danger {
    color: var(--dk-color-text) !important;
    background-color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .alert-warning {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-yellow) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-inner ul {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-control {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: none;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Bezahl-Link (readonly URL zum Kopieren) */
body.v2:has(.navbar.navbar-default) #content .box-dark .box-inner p > input.form-control[type="text"] {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.35;
    cursor: text;
    user-select: all;
    text-overflow: ellipsis;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-inner p b {
    color: var(--dk-color-text);
    font-weight: 700;
}

body.v2:has(.navbar.navbar-default) #content .box-dark textarea.form-control {
    min-height: 6rem;
    border-radius: var(--dk-border-radius);
    resize: vertical;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-control::placeholder {
    color: rgba(26, 26, 26, 0.75);
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-control:focus {
    border-color: var(--dk-color-green) !important;
    box-shadow: 0 0 0 1px var(--dk-color-green) !important;
    outline: none;
    background-color: transparent !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark select.form-control {
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .has-error .form-control,
body.v2:has(.navbar.navbar-default) #content .box-dark .form-group.has-error .form-control {
    border-color: var(--dk-color-red) !important;
    box-shadow: 0 0 0 1px var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-group input[type="file"] {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    color: rgba(26, 26, 26, 0.85) !important;
    background-color: transparent !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0;
    box-shadow: none !important;
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    line-height: 1.65;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-group input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--dk-color-text);
    border-radius: 0;
    background-color: #FF3B5B;
    color: var(--dk-color-black);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-group input[type="file"]::file-selector-button:hover {
    background-color: var(--dk-color-green);
    border-color: var(--dk-color-green);
    color: var(--dk-color-black);
}

body.v2:has(.navbar.navbar-default) #content .box-dark .form-group input[type="file"]::-webkit-file-upload-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--dk-color-text);
    border-radius: 0;
    background-color: #FF3B5B;
    color: var(--dk-color-black);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn, button.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.625rem;
    border-radius: 0;
    font-size: clamp(0.5625rem, 2.2vw, 0.8125rem);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

@media (min-width: 768px) {
    body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn,
    body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn, button.btn) {
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default {
    border: 1px solid var(--dk-color-text) !important;
    background-color: #FF3B5B !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:focus-visible,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:focus-visible {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-default:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > a.btn.btn-default:focus i.fa {
    color: var(--dk-color-black) !important;
}

/* Primary actions in box-footer – green (Abbrechen bleibt rot) */
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']),
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']) {
    border: 1px solid var(--dk-color-green) !important;
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']) .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']) i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']) .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']) i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):hover,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):focus,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):focus-visible,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):hover,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):focus,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
    filter: none !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger:not([value='cancel']):focus i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger, button.btn.btn-danger):not([value='cancel']):focus i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel'],
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']) {
    border: 1px solid var(--dk-color-red) !important;
    background-color: var(--dk-color-red) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel'] .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel'] i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']) .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']) i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:hover,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:focus,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:focus-visible,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):hover,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):focus,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
    filter: none !important;
}

body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn.btn-danger[value='cancel']:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn.btn-danger[value='cancel'], button.btn.btn-danger[value='cancel']):focus i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line,
body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line strong {
    color: var(--dk-color-text);
}

body.v2:has(.navbar.navbar-default) #content .box-grey.headline > .line {
    padding: clamp(1rem, 2vw, 1.5rem);
}

body.v2:has(.navbar.navbar-default) #content .box-grey.headline #warning_open_cases {
    margin-top: 1rem;
}

body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line.text-danger,
body.v2:has(.navbar.navbar-default) #content .box-grey.headline .line.text-danger strong {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-inner .well.well-sm.groupby {
    margin: 0;
    padding: 0.875rem 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Portal: "Daten Personalisierung" Karte (Well) nicht hell anzeigen */
body.v2:has(.navbar.navbar-default) #content .box-inner .well.well-sm.secwrap {
    background-color: rgba(0, 0, 0, 0.22) !important;
    border: none !important;
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content .group-inner {
    margin-top: 0.75rem;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .data {
    background-color: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(26, 26, 26, 0.1) !important;
    border-radius: var(--dk-border-radius);
    box-shadow: none !important;
    padding: clamp(1rem, 2vw, 1.25rem);
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .data > .row.mb-10,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .data > .row.first_row {
    margin-bottom: 1rem;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .warning_box {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0 0 0.75rem;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .warning_box .line,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .warning_box .line.line-label,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .warning_box.text-danger .line-label {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.line-label {
    color: var(--dk-color-text);
    margin-bottom: 0.375rem;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.line-label > i.fa {
    color: var(--dk-color-green);
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.opencase,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.opencase[style] {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.text-right {
    margin-top: 0.75rem;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: normal;
}

@media (min-width: 768px) {
    body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.text-right .link2details.w-75,
    body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.text-right .btn.link2details.w-75 {
        width: 75% !important;
        margin-left: auto;
    }
}

body.v2:has(.navbar.navbar-default) #content .well.groupby {
    background-color: rgba(26, 26, 26, 0.08) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dk-color-text) !important;
    border-radius: var(--dk-border-radius);
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .line,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .line.line-label {
    color: var(--dk-color-text);
}

body.v2:has(.navbar.navbar-default) #content .text-black {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .text-danger,
body.v2:has(.navbar.navbar-default) #content .warning_box.text-danger,
body.v2:has(.navbar.navbar-default) #content .line.opencase {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default {
    border: 1px solid rgba(26, 26, 26, 0.35) !important;
    background: transparent !important;
    color: var(--dk-color-text) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus-visible,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger {
    background-color: var(--dk-color-red) !important;
    border-color: var(--dk-color-red) !important;
    color: var(--dk-color-text) !important;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus-visible,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:focus-visible,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:hover,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:focus,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .btn-brand,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .btn-brand:hover,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:hover,
body.v2:has(.navbar.navbar-default) #content .btn-brand:focus,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:focus,
body.v2:has(.navbar.navbar-default) #content .btn-brand:focus-visible,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

/* Umpersonalisieren – modal trigger, destructive action */
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"],
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"] {
    background-color: var(--dk-color-red) !important;
    border-color: var(--dk-color-red) !important;
    color: var(--dk-color-white) !important;
    cursor: pointer;
}

body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus-visible,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus-visible {
    background-color: #000000 !important;
    border-color: var(--dk-color-white) !important;
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) #content .secwrap .section-wrapper {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    padding: 0.75rem 0;
}

body.v2:has(.navbar.navbar-default) #content .section-left {
    color: rgba(26, 26, 26, 0.6);
}

body.v2:has(.navbar.navbar-default) #content .section-right {
    color: var(--dk-color-text);
    font-weight: 700;
}

body.v2:has(.navbar.navbar-default) #content .box-grey:has(+ .box-light) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content .box-grey + .box-light {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    box-shadow: none !important;
}

/* Stacked headline + ticket box – box-shadow only (filter breaks fixed modals in .quick_form) */
body.v2:has(.navbar.navbar-default) #content .col-md-8:has(> .box-grey.headline + .box-light) > .box-grey.headline,
body.v2:has(.navbar.navbar-default) #content .col-md-8:has(> .box-grey.headline + .box-light) > .box-light {
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content .col-md-8:has(> .box-grey.headline + .box-light) > .box-light {
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5) !important;
}

body.v2.modal-open:has(.navbar.navbar-default) #content .box-light:has(.modal.in),
body.v2.modal-open:has(.navbar.navbar-default) #content .box-light:has(.modal.show),
body.v2.modal-open:has(.navbar.navbar-default) #content .wrapper_all .box-light:has(.modal.in),
body.v2.modal-open:has(.navbar.navbar-default) #content .wrapper_all .box-light:has(.modal.show) {
    overflow: visible !important;
}

/* Portal icon colors – Font Awesome glyphs on production */
body.v2:has(.navbar.navbar-default) .data-wrapper .line.line-label:not(.text-danger) > i.fa {
    color: var(--dk-color-green);
}

body.v2:has(.navbar.navbar-default) .warning_box i.fa,
body.v2:has(.navbar.navbar-default) .line.text-danger > i.fa,
body.v2:has(.navbar.navbar-default) .line.opencase > i.fa {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) .btn .fa,
body.v2:has(.navbar.navbar-default) .btn i.fa {
    color: inherit !important;
    transition: color 150ms ease;
}

/* Ticket actions */
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-default:focus-visible i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper a.btn.link2details.btn-default:focus i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-danger:focus-visible i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper div.btn.link2details.btn-danger:focus i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.link2details.btn-success:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:hover .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:focus .fa,
body.v2:has(.navbar.navbar-default) #content .data-wrapper .btn.btn-success:focus i.fa {
    color: var(--dk-color-text) !important;
}

/* Sidebar / footer actions */
body.v2:has(.navbar.navbar-default) #content .btn-brand .fa,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand .fa,
body.v2:has(.navbar.navbar-default) #content .btn-brand i.fa,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .btn-brand:hover .fa,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:hover .fa,
body.v2:has(.navbar.navbar-default) #content .btn-brand:focus .fa,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:focus .fa,
body.v2:has(.navbar.navbar-default) #content .btn-brand:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content .btn.btn-brand:focus-visible .fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"] .fa,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"] i.fa,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"] .fa,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"] i.fa {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover .fa,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover i.fa,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus .fa,
body.v2:has(.navbar.navbar-default) #content a.btn.btn-brand.link2details[data-target^="#repersonalization_data_"]:focus i.fa,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover .fa,
body.v2:has(.navbar.navbar-default) #content a.button.btn-brand.link2details[data-target^="#repersonalization_data_"]:hover i.fa {
    color: var(--dk-color-white) !important;
}

/* Nav tabs */
body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a i.fa {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a:hover .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a:focus .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a:hover i.fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li:not(.active) > a:focus i.fa {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a i.fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a:hover .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a:focus .fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a:hover i.fa,
body.v2:has(.navbar.navbar-default) .navbar-nav > li.active > a:focus i.fa {
    color: var(--dk-color-black) !important;
}

/* Portal personalization form (AJAX .quick_form) – no extra box, stays in ticket card */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) {
    margin-top: 1rem;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    color: var(--dk-color-text);
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) form,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .data,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .well,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .panel,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .panel-body,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) fieldset,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) > .row,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) form {
    margin: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    font-weight: 400;
    line-height: 1.45;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert:last-of-type {
    margin-bottom: 1.25rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert p {
    margin: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert p + p {
    margin-top: 0.5rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert-danger {
    color: var(--dk-color-text) !important;
    background-color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert-info {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert-success {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .alert-warning {
    color: var(--dk-color-black) !important;
    background-color: var(--dk-color-yellow) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) label,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .control-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(26, 26, 26, 0.75);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-group {
    margin-bottom: 1.25rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-control {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: none;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-control::placeholder {
    color: rgba(26, 26, 26, 0.75);
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-control:focus {
    border-color: var(--dk-color-green) !important;
    box-shadow: 0 0 0 1px var(--dk-color-green) !important;
    outline: none;
    background-color: transparent !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) select.form-control {
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .has-error .form-control,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-group.has-error .form-control {
    border-color: var(--dk-color-red) !important;
    box-shadow: 0 0 0 1px var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .help-block,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .form-error {
    margin-top: 0.375rem;
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .iti {
    width: 100%;
}

/* Personalization form – action buttons */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: stretch;
    margin-top: 0.25rem;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* Production markup: .row > .col-md-4 > button (two separate cols) */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin-top: 0.25rem;
    margin-bottom: 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) > input[type="hidden"] {
    display: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) > [class*="col-"] {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    float: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(.btn-box) {
    margin-left: 0;
    margin-right: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"]:has(.btn-box) {
    padding-left: 0;
    padding-right: 0;
}

/* Fallback: both buttons direct in one col (no wrapper) */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"]:has(> :is(a.btn, button.btn, input.btn) + :is(a.btn, button.btn, input.btn)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.75rem;
    padding-left: 0;
    padding-right: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > :is(a.btn, button.btn, input.btn) + :is(a.btn, button.btn, input.btn)) {
    margin-left: 0;
    margin-right: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn-box > :is(a.btn, button.btn, input.btn),
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"] > :is(a.btn, button.btn, input.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0 !important;
    padding: 0.75rem 0.625rem;
    border-radius: 0;
    font-size: clamp(0.5625rem, 2.2vw, 0.8125rem);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn-box > :is(a.btn, button.btn, input.btn),
    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"] > :is(a.btn, button.btn, input.btn) {
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) input.btn-default {
    border: 1px solid var(--dk-color-text) !important;
    background-color: #FF3B5B !important;
    color: var(--dk-color-black) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:focus-visible,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:focus-visible {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-default:focus i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-default:focus i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) input.btn-danger,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) input.btn-success {
    border: 1px solid var(--dk-color-red) !important;
    background-color: var(--dk-color-red) !important;
    color: var(--dk-color-text) !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* MyTicket Portal: "Umpersonalisieren" statt rot -> grün */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) input.btn-danger {
    border: 1px solid var(--dk-color-green) !important;
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success i.fa {
    color: var(--dk-color-text) !important;
}

/* MyTicket Portal: Icon-Farbe passend zu grün */
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger i.fa {
    color: var(--dk-color-black) !important;
}

/* MyTicket Portal (Umpersonalisierung starten): immer grün */
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
    filter: none !important;
}

body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus i.fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content #process_personalize.btn.btn-danger:focus-visible i.fa {
    color: var(--dk-color-text) !important;
}

/* MyTicket Portal: Buttons in der box-footer sollen einen echten Hover haben */
body.v2:has(.navbar.navbar-default) #content .box-footer .btn {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:hover,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus-visible {
    background-color: var(--dk-color-green) !important;
    border-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-default:focus-visible i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
    filter: none !important;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus-visible .fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus i.fa,
body.v2:has(.navbar.navbar-default) #content .box-footer .btn.btn-danger:focus-visible i.fa {
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:focus-visible,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:focus-visible,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger:focus-visible,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success:hover,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success:focus,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-danger:focus i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:focus .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn.btn-success:focus i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) button.btn-success:hover i.fa {
    color: var(--dk-color-text) !important;
}

/* Portal ticket detail page (single ticket view) */
body.v2:has(.navbar.navbar-default) #content :is(.col-md-8, .wrapper_all) > .box-grey.text-center {
    padding: clamp(1rem, 2vw, 1.25rem) !important;
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(.col-md-8, .wrapper_all) > .box-grey.text-center h3 {
    margin: 0 0 0.375rem;
    padding: 0;
    border: none;
    color: var(--dk-color-text) !important;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 900;
    line-height: 1.25;
    text-transform: none;
}

body.v2:has(.navbar.navbar-default) #content :is(.col-md-8, .wrapper_all) > .box-grey.text-center h3 i.fa {
    color: var(--dk-color-green);
}

body.v2:has(.navbar.navbar-default) #content :is(.col-md-8, .wrapper_all) > .box-grey.text-center .line {
    margin: 0;
    color: rgba(26, 26, 26, 0.65);
    font-size: 0.875rem;
    line-height: 1.35;
}

body.v2:has(.navbar.navbar-default) #content :is(.col-md-8, .wrapper_all) > .box-grey.text-center:has(+ .box-light) + .box-light {
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.45) !important;
}

body.v2:has(.navbar.navbar-default) #content .box-inner.box-inner-nopadding {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

body.v2:has(.navbar.navbar-default) #content .box-inner.box-inner-nopadding h3 {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content .secwrap .section-wrapper {
    padding: 0.875rem 0;
}

/* Footer action button (Download Ticket …) – TicketPay renders it inside the
   label/value grid with an empty left spacer, which visually indents it.
   Drop the grid so the button aligns flush with the box content. */
body.v2:has(.navbar.navbar-default) #content .box-footer .section-wrapper {
    display: block;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .section-left {
    display: none;
}

body.v2:has(.navbar.navbar-default) #content .box-footer .section-right {
    float: none;
    width: 100%;
    text-align: left;
}

body.v2:has(.navbar.navbar-default) #content .secwrap .section-wrapper .text-success,
body.v2:has(.navbar.navbar-default) #content .section-right .text-success {
    color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content .ticket_details_closed {
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* Status steps + Ticket-Historie: one outer box with nested step cards */
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-grey.text-center,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-light {
    box-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: var(--dk-color-surface) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-grey.text-center {
    position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1rem, 2vw, 1.5rem)
        calc(clamp(0.875rem, 1.5vw, 1.125rem) + var(--dk-divider-pattern-size) + 0.625rem) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-grey.text-center::after {
    content: "";
    position: absolute;
    left: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(0.875rem, 1.5vw, 1.125rem);
    height: var(--dk-divider-pattern-size);
    background-image: linear-gradient(
        to bottom,
        var(--dk-color-text) 0,
        var(--dk-color-text) var(--dk-divider-bar-thickness),
        transparent var(--dk-divider-bar-thickness),
        transparent calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) var(--dk-divider-pattern-size)
    );
    border: none;
    pointer-events: none;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-light {
    border-radius: 0;
    padding: 0 !important;
    overflow: visible;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-grey.text-center + .box-light,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-light + .box-light {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-light:last-child {
    border-bottom-left-radius: var(--dk-border-radius);
    border-bottom-right-radius: var(--dk-border-radius);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: clamp(1.25rem, 2vw, 2rem) !important;
    overflow: hidden;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) > .col-md-12 > .box-light + .box-light .box-inner {
    padding-top: clamp(0.875rem, 1.5vw, 1rem);
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center h2,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center.text-danger h2 {
    margin: 0;
    padding: 0;
    border: none !important;
    color: var(--dk-color-text) !important;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center h2 i.fa,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center.text-danger h2 i.fa {
    color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center h2 small,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center.text-danger h2 small,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-grey.text-center.text-danger h2 small.text-danger {
    display: block;
    margin-top: 0.375rem;
    color: rgba(26, 26, 26, 0.55) !important;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .text-success,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .fa-check {
    color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-light .box-inner {
    padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1rem, 2vw, 1.5rem);
    border-top: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-inner > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0;
    padding: clamp(0.875rem, 1.5vw, 1rem);
    background-color: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: var(--dk-border-radius);
    box-shadow: none;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-inner > .row + .row {
    margin-top: clamp(0.875rem, 1.5vw, 1rem);
    padding-top: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-inner > .row + .row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dk-divider-pattern-size);
    background-image: linear-gradient(
        to bottom,
        var(--dk-color-text) 0,
        var(--dk-color-text) var(--dk-divider-bar-thickness),
        transparent var(--dk-divider-bar-thickness),
        transparent calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) calc(var(--dk-divider-pattern-size) - var(--dk-divider-bar-thickness)),
        var(--dk-color-text) var(--dk-divider-pattern-size)
    );
    border: none;
    pointer-events: none;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .box-inner > .row > [class*='col-'] {
    float: none;
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger {
    border: 1px solid var(--dk-color-green) !important;
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
    font-weight: 900;
    text-transform: uppercase;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger .fa,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger i.fa {
    color: var(--dk-color-black) !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:hover,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:focus,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:focus-visible {
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-text) !important;
    color: var(--dk-color-text) !important;
    filter: none !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:hover .fa,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:hover i.fa,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:focus .fa,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details .btn.btn-danger:focus i.fa {
    color: var(--dk-color-text) !important;
}

/* Open cases nest status steps inside the first .box-light (not siblings like history) */
body.v2:has(.navbar.navbar-default) #content .ticket_details:has(> .col-md-12 > .box-grey.text-center) > .col-md-12 > .box-light > .box-light {
    border-radius: 0;
    padding: 0 !important;
    margin: clamp(0.875rem, 1.5vw, 1rem) 0 0 2.5rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.v2:has(.navbar.navbar-default) #content .ticket_details:has(> .col-md-12 > .box-grey.text-center) > .col-md-12 > .box-light > .box-light .box-inner {
    padding-top: 0;
}

body.v2:has(.navbar.navbar-default) #content h3.without-border {
    margin: 0;
    padding: 0;
    border: none !important;
    color: var(--dk-color-text) !important;
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
}

body.v2:has(.navbar.navbar-default) #content h3.without-border i.fa {
    color: var(--dk-color-green);
}

body.v2:has(.navbar.navbar-default) #content h3.without-border small {
    display: block;
    margin-top: 0.375rem;
    color: rgba(26, 26, 26, 0.5);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) h3.without-border,
body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) h3.without-border.text-danger {
    color: var(--dk-color-text) !important;
    text-transform: uppercase !important;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) h3.without-border i.fa {
    color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) #content .badge.badge-success {
    background-color: var(--dk-color-green) !important;
    border: none;
    border-radius: 0;
    color: var(--dk-color-black) !important;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 0.375rem 0.75rem;
    text-transform: uppercase;
}

body.v2:has(.navbar.navbar-default) #content :is(
        .ticket_details_closed,
        .ticket_details:has(> .col-md-12 > .box-grey.text-center)
    ) .subcase-details :is(.badge.badge-default, .badge.badge-danger, .label.label-default, .label.label-danger) {
    background-color: var(--dk-color-red) !important;
    border: none;
    border-radius: 0;
    color: var(--dk-color-text) !important;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 0.375rem 0.75rem;
    text-transform: uppercase;
}

/* Portal modals – final override after portal dark-theme rules (.section-right, .data-wrapper, …) */
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-content *,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body *,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-content *,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-body,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-body *,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-content *,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-body,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-body *,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-content *,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-body,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-body * {
    color: var(--dk-color-white) !important;
}

/* Daten Personalisierung – standard brand-brown modal */
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-content {
    background: #000000 !important;
}

body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-header {
    background: #000000 !important;
}

body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-body {
    background: #000000 !important;
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-body * {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) [id^="personalization_data_"].modal:not(#modal_invoice) .modal-title {
    color: var(--dk-color-white) !important;
}

/* Umpersonalisierung data cards (repersonalization_data_* + .secwrap): dark card */
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-content {
    background: transparent !important;
}

body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-header {
    background: transparent !important;
}

body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body {
    background: rgba(0, 0, 0, 0.22) !important;
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body * {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-content .text-system,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-content .text-system,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-content .text-system,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-content .text-system,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body h1,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body h2,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body h3,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-body h4 {
    color: var(--dk-color-white) !important;
}

/* Umpersonalisierung data cards: headings on dark modal body */
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body h1,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body h2,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body h3,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-body h4 {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap).modal:not(#modal_invoice) .modal-title {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-content .text-success,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-content .text-success,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-content .text-success,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-content .text-success {
    color: var(--dk-color-green) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-content .text-danger,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-content .text-danger,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:has(.secwrap) .modal-content .text-danger,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-content .text-danger {
    color: var(--dk-color-red) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer .btn-default .fa,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-footer .btn-default .fa,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-footer .btn-default .fa,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer .btn-default .fa {
    color: var(--dk-color-black) !important;
}

/* Kundenwunsch: Schließen/Speichern-Buttons im MyTicketPortal-Modal-Footer
   (z. B. optionale Teilnehmerdaten) unsichtbar – der globale .btn-default
   hat einen schwarzen Hintergrund, hier wird aber (s.o.) schwarzer Text
   erzwungen, macht also schwarz auf schwarz. Eigener, garantiert sichtbarer
   Hintergrund für genau diese dunklen Modal-Footer. */
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-footer .btn-default,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer .btn-default {
    background-color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer .btn-default:hover,
body.v2:has(.navbar.navbar-default) .modal:not(#modal_invoice) .modal-footer .btn-default:focus,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-footer .btn-default:hover,
body.v2:has(.navbar.navbar-default) [id^="personalization_data_"] .modal-footer .btn-default:focus,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-footer .btn-default:hover,
body.v2:has(.navbar.navbar-default) [id^="repersonalization_data_"]:not(:has(.secwrap)) .modal-footer .btn-default:focus,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer .btn-default:hover,
body.v2:has(.navbar.navbar-default) #modal-holder .modal .modal-footer .btn-default:focus {
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-black) !important;
}

/* Portal modals – brand-brown chrome for all standard dialogs */
body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-content {
    background: #000000 !important;
}

body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-header {
    background: #000000 !important;
}

body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-body {
    background: #000000 !important;
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-body :is(span, div, em, i, strong, b, font, u, small, td, th, p, li),
body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-body .well :is(span, div, em, i, strong, b, font, u, small, td, th, p, li) {
    color: var(--dk-color-white) !important;
}

body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-footer {
    background: #000000 !important;
}

body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-title,
body.v2:has(.navbar.navbar-default) :is(
        .modal:not(#modal_invoice):not([id^="repersonalization_data_"]:has(.secwrap)),
        #modal-holder .modal:not([id^="repersonalization_data_"]:has(.secwrap))
    ) .modal-header .close {
    color: var(--dk-color-white) !important;
}

/* MyTicket Portal: Checkbox-Danger Hintergrund wirklich durchsetzen */
body.v2:has(.navbar.navbar-default) #content #personalize_box.bs-callout-danger {
    background-color: rgba(204, 102, 102, 0.15) !important;
    border-color: var(--dk-color-red) !important;
}

/* TicketPay Widerrufsbelehrung (/revocation) etc. – reine Text-Seiten ohne
   Cover/Hero, erkennbar am .jumbotron.jumbotron-textonly Inhalt in main.
   WICHTIG: nicht anhand von "kein Navbar" / "main ist einziges Kind"
   erkennen – das trifft strukturell auch auf den Resale-Shop und den
   normalen Ticketshop (z. B. ohne Fortschrittsindikator) zu, die beide
   ebenfalls ohne Navbar auskommen, aber ihr Cover/Layout behalten sollen. */
/* FIX: Auf Seite 2 (Zusatzartikel) gibt es oben ebenfalls einen "Warenkorb-Hinweis" mit genau denselben Klassen (.jumbotron.jumbotron-textonly,
   siehe Styling weiter oben im Dokument), obwohl diese Seite ganz normal ihr Cover/Hero + den Fortschrittsindikator behalten soll. Ohne die
   Zusatzbedingung ":not(:has(.checkout-progress-row))" wurde die Zusatzartikel-Seite faelschlich wie eine reine Widerrufsbelehrung-Seite
   behandelt: Cover wurde ausgeblendet (fehlendes Hintergrundbild) und der Fortschrittsindikator ruckte trotzdem um den fuer das Hero-Bild
   vorgesehenen Abstand nach oben (dadurch wirkte er "abgeschnitten"). Echte Widerrufsbelehrung-Seiten haben nie einen Fortschrittsindikator,
   daher grenzt das zuverlaessig ab. */
body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) {
    background-color: var(--dk-color-surface) !important;
    color: var(--dk-color-text) !important;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) .cover {
    display: none;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) #content {
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
    margin-top: 0;
    min-height: auto;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) #content > .container > main {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
    color: var(--dk-color-text);
    line-height: 1.6;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) #content > .container > main a {
    color: var(--dk-color-text);
    text-decoration: underline;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) #content > .container > main a:hover,
body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) #content > .container > main a:focus {
    color: var(--dk-color-green);
    text-decoration: none;
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) footer {
    background-color: var(--dk-color-surface);
    color: var(--dk-color-text);
    border-top: 1px solid rgba(26, 26, 26, 0.15);
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) footer a {
    color: rgba(26, 26, 26, 0.92);
}

body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) footer a:hover,
body.v2:has(#content main .jumbotron.jumbotron-textonly):not(:has(.checkout-progress-row)) footer a:focus {
    color: var(--dk-color-text);
}

/* ==========================================================================
   Mobile optimizations (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {
    /* Help modal – keep email field + button in one pill (override TicketPay input-split stack) */
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        border: 1px solid #ccc;
        border-radius: 0;
        overflow: hidden;
        background-color: #000000;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        gap: 0;
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)):focus-within {
        border-color: var(--dk-color-green);
        box-shadow: 0 0 0 1px var(--dk-color-green);
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control,
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn,
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-addon {
        display: block !important;
        margin-bottom: 0 !important;
        clear: none !important;
        width: auto !important;
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control {
        flex: 1 1 auto !important;
        width: 1% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0.875rem;
        font-size: 1rem;
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .form-control:focus {
        border: none !important;
        box-shadow: none !important;
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn,
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn-brand,
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn .btn-ok,
    body.v2 .modal .modal-body .input-group.input-split:not(:has(#redeem_coupon)) .input-group-btn button {
        width: auto !important;
        min-height: 2.75rem;
        padding: 0.625rem 0.75rem;
        border-radius: 0 !important;
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    body.v2 .modal .modal-body .form-group .btn,
    body.v2 .modal .modal-body form > .btn,
    body.v2 .modal .modal-body .well .btn {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* Page buttons – slightly smaller so long labels fit */
    body.v2 #content .btn:not(.btn-sm):not(.countDownTimer):not(#stickyfooter .btn) {
        padding: 0.625rem 0.875rem;
        font-size: clamp(0.625rem, 2.5vw, 0.8125rem);
        line-height: 1.15;
    }

    body.v2 #content main .jumbotron > .btn,
    body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 0.5625rem 0.5rem;
        font-size: clamp(0.5625rem, 2.35vw, 0.6875rem);
        line-height: 1.1;
        letter-spacing: -0.01em;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    body.v2 #content main .jumbotron:has(> .btn + .btn) > .btn {
        width: calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
    }

    body.v2 #content main .jumbotron:not(:has(> .btn + .btn)) > .btn {
        width: auto;
        max-width: 100%;
    }

    body.v2 #content main .jumbotron.jumbotron-success .btn-box {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.625rem;
    }

    body.v2 #content main .jumbotron.jumbotron-success .btn-box .btn {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    body.v2 #content main #abort_button {
        font-size: 0.6875rem;
        padding: 0.5rem 0.875rem;
    }

    /* Portal action rows – stack buttons full width on narrow screens */
    body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box,
    body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn-box,
    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"]:has(> :is(a.btn, button.btn, input.btn) + :is(a.btn, button.btn, input.btn)) {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }

    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) {
        flex-direction: column;
        gap: 0;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 0.75rem;
    }

    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row:has(> [class*="col-"] > button.btn) > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    body.v2:has(.navbar.navbar-default) #content .box-dark .box-footer .btn-box .btn,
    body.v2:has(.navbar.navbar-default) #content .box-footer:has(> .btn) > :is(a.btn, button.btn),
    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .btn-box > :is(a.btn, button.btn, input.btn),
    body.v2:has(.navbar.navbar-default) #content :is(.quick_form, .validate_me) .row > [class*="col-"] > :is(a.btn, button.btn, input.btn) {
        width: 100%;
        max-width: none;
        padding: 0.625rem 0.5rem;
        font-size: clamp(0.5rem, 2.2vw, 0.6875rem);
        line-height: 1.15;
    }
}

/* ==========================================================================
   Resale Shop (Zweitmarkt)
   ========================================================================== */
/* Der Resale-Shop hat keinen Fortschrittsindikator und eine etwas andere
   Struktur als der normale Ticketshop: eine Intro-Box (.jumbotron) mit
   Sicherheits-/Lieferungs-Icons, und pro Angebot eine Zeile mit Titel +
   Beschreibung links sowie "Angebote anzeigen/ausblenden"-Buttons rechts
   (statt Preis/Menge wie im normalen Ticketverkauf). Ergaenzt die
   bestehenden Grundregeln, ohne die normalen Ticket-Zeilen zu beeinflussen. */

/* Intro-Icons ("100% sicher" / "Schnelle Lieferung") im Theme-Look: Icon in
   der Akzentfarbe, kompakte Beschriftung darunter, die beiden Icon-Bloecke
   sitzen nebeneinander mit Abstand zueinander. */
body.v2 #content main .jumbotron .jumbotron-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.25rem;
}

body.v2 #content main .jumbotron .jumbotron-icons .fa {
    color: var(--dk-color-green);
}

body.v2 #content main .jumbotron .jumbotron-icons h4 {
    margin: 0.5rem 0 0;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dk-color-text);
}

/* Angebots-Zeile: anders als bei Tickets greift hier keine .row:last-child
   Regel (die .resaleoffers folgt der .row noch als weiteres Kind von
   .items), daher werden Titel/Beschreibung und Buttons hier explizit im
   Grid platziert, statt sich auf die Auto-Platzierung zu verlassen. Die
   (nach Klick per AJAX nachladbare) Angebotsliste bekommt dabei die volle
   Breite unterhalb der Zeile statt nur eine halbe Spalte. */
body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-md-9,
body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-sm-8 {
    grid-column: 1;
    grid-row: 1;
}

body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-md-3.offer-actions,
body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-sm-4.offer-actions {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.75rem;
}

body.v2 .wrap.accordions .wrap_content .well .items > .resaleoffers {
    grid-column: 1;
}

@media (min-width: 992px) {
    body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-md-3.offer-actions,
    body.v2 .wrap.accordions .wrap_content .well .items > .row > .col-sm-4.offer-actions {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        align-self: center;
    }

    body.v2 .wrap.accordions .wrap_content .well .items > .resaleoffers {
        grid-column: 1 / -1;
    }
}

/* Falls "Angebote anzeigen" und "Angebote ausblenden" je einmal gleichzeitig
   sichtbar waeren, sollen sie nicht ohne Abstand aneinanderkleben. */
body.v2 .offer-actions .btn + .btn {
    margin-top: 0.5rem;
}

/* Nachgeladene Angebote (per AJAX): oben durch eine dezente Trennlinie vom
   Titel/den Buttons abgesetzt statt uebergangslos daran zu kleben. */
body.v2 .wrap.accordions .wrap_content .well .items > .resaleoffers:not(:empty) {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(26, 26, 26, 0.15);
}

/* Nachgeladene Angebote: .data-wrapper/.data/.line/.line-label sind identisch
   zu den Zeilen im Warenkorb-/Hilfe-Modal (siehe dortiger Fix weiter oben),
   waren aber nur fuer die eingeloggte Portal-Ansicht (Navbar vorhanden)
   gestylt. Im Resale-Shop (keine Navbar) blieb der Hintergrund hell/transparent
   waehrend der Text global auf Weiss steht – weiss auf weiss, quasi unsichtbar.
   Hier unabhaengig vom Navbar-Kontext lesbar machen. */
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .data-wrapper,
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .data,
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .line,
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .line.line-label {
    background: transparent !important;
    color: var(--dk-color-text) !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .line.line-label {
    font-weight: 700;
}

body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .small {
    color: var(--dk-color-text) !important;
    opacity: 0.75;
}

body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers hr.less-margin {
    border-color: rgba(26, 26, 26, 0.15);
    margin: 1rem 0;
}

/* Der weisse Kasten umschliesst nicht nur die Angebotszeile, sondern auch den
   Hinweistext (".mt-5") darunter – der Hintergrund sitzt also nicht auf
   .data-wrapper selbst, sondern auf ihrem gemeinsamen Elternelement
   (.resaleoffers bzw. dem per AJAX nachgeladenen #offerlist_... Wrapper-Div).
   Das muss zusaetzlich transparent gemacht werden, sonst scheint dort weiterhin
   ein heller Standard-Hintergrund durch, egal wie die Kind-Elemente gestylt sind. */
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers,
body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers > div {
    background: transparent !important;
}

body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .mt-5 {
    color: var(--dk-color-text) !important;
    opacity: 0.75;
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    body.v2 .wrap.accordions .wrap_content .well .items .resaleoffers .col-md-3.text-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
}

/* ==========================================================================
   MyTicketPortal – Ticket Weiterverkauf starten (Self-Service Resale-Angebot)
   ========================================================================== */
/* Eigene Unterseite zum Erstellen eines Weiterverkaufs-Angebots (Kontoinhaber,
   IBAN, Verkaufspreis, Gebuehren-Aufteilung, Sichtbarkeit im Resale Shop).
   Anders als die MyTicket-Portal-Formulare weiter oben liegt diese Box weder
   unter :has(.navbar.navbar-default) noch unter #content main, daher greifen
   die dortigen Label-/Help-Block-/Callout-Regeln hier nicht – Beschriftungen,
   Hilfetexte und die Zustimmungs-Box blieben dadurch dunkel auf dunklem
   Untergrund unlesbar. Ueber die eindeutige #resale_price-Kennung robust
   (unabhaengig vom umgebenden Seitenaufbau) nachgeruestet. */
body.v2 .box-inner:has(#resale_price) {
    color: var(--dk-color-text) !important;
}

body.v2 .box-inner:has(#resale_price) .well1 {
    background: transparent !important;
    color: var(--dk-color-text) !important;
}

body.v2 .box-inner:has(#resale_price) h3 {
    color: var(--dk-color-green) !important;
}

body.v2 .box-inner:has(#resale_price) .control-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dk-color-text) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
}

body.v2 .box-inner:has(#resale_price) .help-block {
    color: rgba(26, 26, 26, 0.75) !important;
}

body.v2 .box-inner:has(#resale_price) .form-control {
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
}

body.v2 .box-inner:has(#resale_price) select.form-control {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="black"/></svg>');
}

body.v2 .box-inner:has(#resale_price) .input-group-addon {
    color: var(--dk-color-text) !important;
    background-color: transparent !important;
    border: 1px solid rgba(26, 26, 26, 0.85) !important;
    border-right: none !important;
}

body.v2 .box-inner:has(#resale_price) .checkbox label,
body.v2 .box-inner:has(#resale_price) .checkbox .font-default {
    color: var(--dk-color-text) !important;
}

body.v2 .box-inner:has(#resale_price) a {
    color: var(--dk-color-text) !important;
    text-decoration: underline !important;
}

body.v2 .box-inner:has(#resale_price) a:hover,
body.v2 .box-inner:has(#resale_price) a:focus {
    color: var(--dk-color-green) !important;
}

/* Preis-/Gebuehren-Zusammenfassung (#form_notebox), die nach Preiseingabe
   per JS eingeblendet wird */
body.v2 .box-inner:has(#resale_price) #form_notebox {
    background-color: rgba(26, 26, 26, 0.05) !important;
    border: none !important;
}

body.v2 .box-inner:has(#resale_price) .section-wrapper {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    padding: 0.5rem 0;
}

body.v2 .box-inner:has(#resale_price) .section-left {
    color: rgba(26, 26, 26, 0.6) !important;
}

body.v2 .box-inner:has(#resale_price) .section-right {
    color: var(--dk-color-text) !important;
    font-weight: 700;
}

/* AGB-Zustimmungs-Box (#tos_box) */
body.v2 .box-inner:has(#resale_price) .bs-callout {
    border-radius: var(--dk-border-radius);
    padding: clamp(0.875rem, 1.25vw, 1.25rem);
    border: 2px solid transparent;
    background-color: rgba(26, 26, 26, 0.05) !important;
}

body.v2 .box-inner:has(#resale_price) .bs-callout:has(input:checked) {
    border-color: var(--dk-color-green) !important;
    background-color: rgba(51, 204, 153, 0.1) !important;
}

body.v2 .box-inner:has(#resale_price) .bs-callout label {
    color: var(--dk-color-text) !important;
    font-weight: 900;
}

body.v2 .box-inner:has(#resale_price) .bs-callout .font-default {
    color: var(--dk-color-text) !important;
}

/* ==========================================================================
   Vorgaben des Veranstalters (DoKomi) – exakte Farb-/Stilwünsche, die über
   die generelle Markenfarb-Umstellung oben hinausgehen oder ihr bewusst
   widersprechen. Bewusst als eigener Block am Ende der Datei, damit diese
   Vorgaben in der Kaskade zuverlässig greifen.
   ========================================================================== */

/* Kundenwunsch (Phase 3): Content-Boxen (.well / .well-light / .well-shadow)
   nicht mehr komplett transparent, sondern ca. 20% Deckkraft auf heller
   Flaeche - einheitlich fuer Akkordeon-Wells (z. B. Ticketliste) UND
   Nicht-Akkordeon-Wells (z. B. Crowdfunding-Intro-Box). Gleiche Selektoren
   wie die jeweiligen Grundregeln weiter oben, damit die Kaskade per
   Spezifitaet + Reihenfolge zuverlaessig greift. Ausserdem ueberall
   abgerundete Ecken, auch dort, wo bisher keine Rundung gesetzt war. */
body.v2 .wrap:not(.accordions) .wrap_content .well,
body.v2 #content .wrap.accordions .wrap_content .well,
body.v2 #content main .wrap.accordions .wrap_content .well,
body.v2 .wrap.accordions .wrap_content .well,
body.v2 #content .wrap.accordions .wrap_content .well.well-light,
body.v2 #content main .wrap.accordions .wrap_content .well.well-light,
body.v2 .wrap.accordions .wrap_content .well.well-light,
body.v2 #content .wrap.accordions .wrap_content .well.well-shadow,
body.v2 #content main .wrap.accordions .wrap_content .well.well-shadow,
body.v2 .wrap.accordions .wrap_content .well.well-shadow {
    background-color: var(--dk-color-surface-faint) !important;
    border-radius: var(--dk-border-radius) !important;
}

/* Kundenwunsch: Checkout-Schritte "Ticketauswahl" (#ticketchoose) und
   "Kundendaten" (#customerdata) ebenfalls mit ca. 20% Deckkraft. Die
   urspruengliche Fassung hat zusaetzlich die Layout-Spalten (.col-md-4 /
   .col-md-8.col-sm-12) eingefaerbt - das war ein Fehler: diese Klassen sind
   reine Bootstrap-Grid-Spalten, keine visuellen Panels, und nur manche
   Formularfeld-Gruppen (z. B. "Strasse") stecken in so einer Spalte, andere
   (z. B. "Vorname") nicht. Dadurch bekam ausgerechnet das Strasse-Feld einen
   auffaelligen eigenen hellen Kasten, den die Nachbarfelder nicht hatten.
   Jetzt NUR noch auf das .well selbst angewendet. */
body.v2 #content main > .row#ticketchoose .well,
body.v2 #content main > .row#customerdata .well,
body.v2 #ticketchoose .well,
body.v2 #customerdata .well {
    background-color: var(--dk-color-surface-faint) !important;
}

/* Kundenwunsch (Erweiterung): Zahlungsmethode ("Bezahlmethode", #paymentchoose
   / #klarna_container) sowie die Bestelluebersicht ("Ihre Bestellung", ueber
   die allgemeine body.v2 #content main .row .well.well-light-Regel) waren in
   der vorigen Runde bewusst ausgenommen, da nicht namentlich erwaehnt - der
   Kunde hat per Screenshot klargestellt, dass diese Boxen ebenfalls die
   20%-Deckkraft-Flaeche bekommen sollen. */
body.v2 #content main .row .well.well-light,
body.v2 #paymentchoose .well,
body.v2 #klarna_container .well {
    background-color: var(--dk-color-surface-faint) !important;
    border: none;
}

/* Kundenwunsch: "Vorkasse (Ueberweisung)"-Bestaetigungsbox ist kein .well,
   sondern ein .jumbotron.jumbotron-default.jumbotron-less-padding - daher
   eigene Regel fuer die gleiche 20%-Deckkraft-Optik. Bewusst nicht auf alle
   Jumbotrons generell angewendet (z. B. Erfolgs-/Fehlermeldungen koennten
   andere Hintergruende brauchen), sondern nur auf diese konkrete Variante. */
body.v2 .jumbotron.jumbotron-default.jumbotron-less-padding {
    background-color: var(--dk-color-surface-faint) !important;
    border-radius: var(--dk-border-radius) !important;
}

/* ==========================================================================
   Crowdfunding-Schieberegler (noUiSlider)
   Kundenwunsch: Farbe auf #25B8A4 (liegt minimal neben dem bestehenden
   --dk-color-teal: #24B8A4 - bewusst der exakt angegebene Wert, eigene
   Variable statt die bestehende Teal-Variable umzubiegen, da sonst auch alle
   anderen Teal-Stellen im Shop mitgeaendert wuerden). Bisher komplett
   ungestyltes Bibliotheks-Standardaussehen (daher der khakifarbene Balken
   und das schlichte weisse Quadrat als Ziehpunkt im Screenshot). Zusaetzlich
   Ziehpunkt durch das DoKomi-"Muffin"-Icon ersetzt. */
:root {
    --dk-color-slider: #25B8A4;
}

.slider-styled.noUi-target,
#example.noUi-target {
    /* Kundenwunsch: war kaum zu erkennen - deshalb jetzt 100% deckende Farbe
       statt der vorherigen 20%-Transparenz, und etwas dicker (0.5rem auf
       0.85rem). Zusaetzlich mehr Abstand nach oben zur Box darueber. */
    height: 0.85rem;
    margin-top: 2rem;
    background: var(--dk-color-slider);
    border: none;
    border-radius: 999px;
    box-shadow: none;
}

.slider-styled .noUi-base,
.slider-styled .noUi-connects,
#example .noUi-base,
#example .noUi-connects {
    height: 100%;
    border-radius: 999px;
}

.slider-styled .noUi-connect,
#example .noUi-connect {
    background: var(--dk-color-slider);
}

/* Ziehpunkt: Standard-Look (weisses Quadrat mit Griffmuster) komplett aus,
   stattdessen das DoKomi-Muffin-Icon als Ziehpunkt-Grafik. Groesse/Versatz
   so gewaehlt, dass der Punkt mittig auf der 0.5rem hohen Linie sitzt. */
.slider-styled .noUi-handle,
#example .noUi-handle {
    width: 2.5rem;
    height: 2.5rem;
    /* Vertikal mittig auf der jetzt 0.85rem hohen Linie: (0.85rem - 2.5rem) / 2 */
    top: calc((0.85rem - 2.5rem) / 2);
    right: -1.25rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: grab;
}

.slider-styled .noUi-handle:before,
.slider-styled .noUi-handle:after,
#example .noUi-handle:before,
#example .noUi-handle:after {
    display: none;
}

.slider-styled .noUi-touch-area,
#example .noUi-touch-area {
    position: absolute;
    inset: 0;
    background-image: url("https://www.dokomi.de/static/images/common/creamy-smile.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.slider-styled .noUi-tooltip,
#example .noUi-tooltip {
    background: var(--dk-color-white);
    border: 1px solid var(--dk-color-slider);
    color: var(--dk-color-text);
    border-radius: var(--dk-border-radius);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
}

/* Kundenwunsch: Entfernen-Button darf beim Hover nicht komplett rot werden
   (rote Schrift UND roter Hintergrund). Die bestehende Regel weiter oben
   (body.v2 .wrap.accordions .price_quantity_box .show_button .remove-
   button:hover) greift nur, wenn genau diese Elternstruktur vorhanden ist;
   auf der eigentlichen Warenkorb-Seite fehlt diese ggf., wodurch der
   generische body .btn-default:hover (rosa/rot) + weisse Schrift
   durchschlug. Dieser zusaetzliche, kontextunabhaengige Selektor greift
   garantiert ueberall, wo die Klasse .remove-button vorkommt. */
body.v2 .remove-button:hover,
body.v2 .remove-button:focus,
body.v2 a.remove-button:hover,
body.v2 a.remove-button:focus {
    background: var(--dk-color-surface) !important;
    background-color: var(--dk-color-surface) !important;
    border-color: var(--dk-color-red) !important;
    color: var(--dk-color-red) !important;
}

/* Haupt-Buttons: schwarz statt Markenpink, mit Pink als Hover-/Fokus-Farbe. */
body .btn-default {
    background-color: var(--dk-color-black);
    color: var(--dk-color-white) !important;
    border: none;
}
body .btn-default:hover,
body .btn-default:focus {
    background-color: var(--dk-color-green) !important;
    color: var(--dk-color-white) !important;
}

/* "Weiter"-Button im Bestellprozess: eigene Optik (schwarz, größere Schrift,
   mehr Innenabstand), unabhängig vom generischen .btn-brand/.btn-ok-Stil. */
button.btn.btn-brand#go_next {
    background: var(--dk-color-black) !important;
    font-size: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
button.btn.btn-brand#go_next:hover {
    background: var(--dk-color-green) !important;
}

/* Box-Überschriften (z. B. in Bestätigungs-/Infoboxen). */
.media-heading {
    color: var(--dk-color-black);
    font-size: 24px;
}

/* Status-Badge "erfolgreich" in Markenfarbe Türkis statt Pink. */
.label-success {
    background-color: var(--dk-color-teal) !important;
}

/* Kategorie-/Abschnittsüberschriften und Textfarb-Utility-Klassen: schwarz
   statt der generellen Akzentfarbe Pink aus dem globalen .text-system/.color-
   Regelsatz weiter oben in der Datei. */
body.v2 .wrap.accordions .wrap_heading h2.text-system,
h2.text-system {
    color: var(--dk-color-black) !important;
}
h3 {
    color: var(--dk-color-black) !important;
}
.color {
    color: var(--dk-color-black) !important;
}
a.color,
a.color i {
    color: var(--dk-color-blue) !important;
}
a.color:hover,
a.color:hover i,
a.color:focus,
a.color:focus i {
    color: var(--dk-color-green) !important;
}

/* Kundenwunsch (Korrektur): die vormalige Regel hier hat allen .well-shadow-
   Boxen INNERHALB von Akkordeons (z. B. Merchandise, Flohmarkt/Resale-Shop)
   einen zusaetzlichen hellen 1px-Rahmen gegeben. Da .wrap.accordions selbst
   aber immer schon einen eigenen, dickeren Rahmen hat (border: 2px solid
   var(--dk-color-text), siehe Grundregel oben) - und zwar ausnahmslos bei
   jedem Akkordeon - erzeugte diese Zusatzregel jedes Mal einen doppelten,
   ineinander liegenden Rahmen ("2 Rahmen ineinander"). Der Kunde hat das am
   Beispiel des Resale-Shops/Flohmarkt bemaengelt; da die Regel aber nie ohne
   den aeusseren Akkordeon-Rahmen greifen konnte, wurde sie komplett entfernt
   statt nur eingeschraenkt. */

/* Warenkorb-Summe: Zwischensumme/Werte schwarz, Trennlinie vor der
   Endsumme neutral grau statt in der Akzentfarbe. */
.subtotal li span {
    color: var(--dk-color-black);
}
.subtotal li.final {
    border-top-color: #ccc !important;
}

/* Hinweis-Boxen: Info in Indigo-Blau statt der generellen Akzentfarbe,
   Warnung bereits passend (Gelb/Schwarz) über die globale Variable oben. */
.alert-info {
    background-color: var(--dk-color-blue) !important;
    color: var(--dk-color-white) !important;
    border: none !important;
}

/* Modal-Kopfzeile: hellblau statt schwarz, mit schwarzer Überschrift. */
.modal-header {
    background-color: var(--dk-color-skyblue) !important;
}
.modal-header h4 {
    color: var(--dk-color-black) !important;
}

/* Zahlungsarten-Auswahl: eigene, hellere Flächenfarben statt der
   Grundtemplate-Transparenz/-Rahmenfarben. */
.paymentmethod {
    background-color: #f8f8f8 !important;
}
.paymentmethod_text {
    background-color: #e8e8e8 !important;
}
.paymentmethod-checked .paymentmethod_text {
    background-color: var(--dk-color-teal) !important;
}
.paymentmethod-checked .paymentmethod_text label {
    color: var(--dk-color-white) !important;
}

/* Erfolgs-Box (z. B. Bestellbestätigung): randloser Schatten weg, dafür
   dezenter heller Rahmen – analog zur .well-shadow-Anpassung oben. */
body.v2 .jumbotron.jumbotron-success {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}

/* Info-Box (Umpersonalisierung etc.): zusätzlicher Innenabstand bei
   Überschrift und hervorgehobenem Text (mark), letzterer in Indigo-Blau. */
.jumbotron.jumbotron-default h4 {
    padding: 10px 0;
}
.jumbotron.jumbotron-default mark {
    background-color: var(--dk-color-blue) !important;
    padding: 10px;
}

/* Vorausgefüllte, nicht editierbare Formularfelder (z. B. Vorkasse-
   Bankdaten): kein Schatten, kein Rahmen, etwas größere Schrift. */
.form-control[readonly] {
    box-shadow: none !important;
    border: none;
    font-size: 16px;
}

/* Footer/Sticky-Footer: Hellblau statt Schwarz/Creme, wie vom Veranstalter
   gewünscht. !important bzw. gleiche Spezifität + spätere Position in der
   Kaskade stellen sicher, dass dies die Grundtemplate-Hintergrundfarbe
   zuverlässig überschreibt. */
body.v2 footer {
    background-color: var(--dk-color-skyblue) !important;
}
body.v2 #stickyfooter {
    background: var(--dk-color-skyblue) !important;
}