/* =========================================================
   1. CI-FARBEN & SCHRIFTARTEN
   ========================================================= */
body,
p,
td,
th,
label,
small {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Links */
a {
    color: #c7a873 !important;
}

a:hover,
a:focus {
    color: #efe8dd !important;
    text-decoration: none !important;
}

/* =========================================================
   2. HINTERGRUND & GLOBAL
   ========================================================= */
body {
    position: relative;
    background-color: #060409 !important;
    /* CI-Schwarz als Platzhalter, bis das Bild da ist */
}

body::before {
    display: block;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("./assets/breakfast-club.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center !important;
    z-index: -1;
}

@media (max-width: 768px) {
    body::before {
        background-image: url("./assets/open-beatz.webp");
    }
}

body :is(.wrapper, .pages, .cover, .actionBar, footer) {
    background-color: transparent !important;
}

.wrapper>nav {
    display: none;
}

/* =========================================================
   3. BUTTONS & FORMULARE
   ========================================================= */
.btn-primary,
.btn-default {
    border-radius: 25px !important;
    background-color: #efe8dd !important;
    border-color: #efe8dd !important;
    color: #060409 !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary:hover,
.btn-default:hover,
.btn-primary:focus,
.btn-default:focus {
    background-color: #c7a873 !important;
    border-color: #c7a873 !important;
    color: #060409 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Plus / Minus Buttons funktional sauber halten */
.input-group-btn .btn,
.bootstrap-touchspin .btn,
.btn-number,
button[data-type="plus"],
button[data-type="minus"],
button[data-dir="up"],
button[data-dir="down"] {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    min-height: auto !important;
    padding: 6px 10px !important;
    transform: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 10;
}

.form-control,
input,
select,
textarea {
    border-radius: 12px !important;
    color: #060409;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #c7a873 !important;
    box-shadow: 0 0 0 3px rgba(199, 168, 115, 0.14) !important;
    outline: none !important;
}

/* =========================================================
   4. TABS (Tickets kaufen / Infos)
   ========================================================= */
.nav.nav-tabs {
    border-bottom: none !important;
}

.nav-tabs .nav-border {
    display: none !important;
}

/* indicator fix für blurs */

#page2 .nav-tabs li a[href="#buy"],
#page2 .nav-tabs li a[href="#info"] {
    background: transparent !important;
    border: none !important;
    color: #efe8dd !important;
    font-weight: 400 !important;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    outline: none !important;
    box-shadow: none !important;
}

#page2 .nav-tabs li a[href="#buy"]:hover,
#page2 .nav-tabs li a[href="#info"]:hover {
    color: #c7a873 !important;
    /* Geändert von eurem Blau auf Kunden-Gold */
}

#page2 .nav-tabs li.active>a {
    color: #c7a873 !important;
    font-weight: 700 !important;
}

/* Aktiver Tab Strich unten */
.nav-tabs li.active {
    position: relative;
}

.nav-tabs li.active::after {
    content: "";
    position: absolute;
    width: calc(100% - 8.4px);
    height: 2px;
    top: 100%;
    background-color: #c7a873 !important;
    /* CI-Gold statt Blau/Weiß */
}

/* =========================================================
   5. SEKUNDÄRE TABS (Pills) - FINAL GEFIXT
   ========================================================= */
.nav.nav-tabs.secondary-tabs {
    border-bottom: none !important;
    margin-bottom: 22px !important;
}

.secondary-tabs .nav-border,
.nav-tabs.secondary-tabs li::after {
    display: none !important;
    content: none !important;
}

/* 1. CONTAINER STANDARD: Hell Beige */
#page2 .nav.nav-tabs.secondary-tabs>li {
    border-radius: 25px !important;
    background-color: #efe8dd !important;
    border: 1px solid #efe8dd !important;
    overflow: hidden !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    transition: none !important;
}

/* 2. TEXT STANDARD: Schwarz */
#page2 .nav.nav-tabs.secondary-tabs>li>a {
    display: block !important;
    border-radius: 25px !important;
    border: none !important;
    background: transparent !important;
    color: #060409 !important;
    font-weight: 400 !important;
    padding: 10px 28px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* 3. CONTAINER HOVER & ACTIVE */
#page2 .nav.nav-tabs.secondary-tabs>li:hover,
#page2 .nav.nav-tabs.secondary-tabs>li.active,
#page2 .nav.nav-tabs.secondary-tabs>li:focus-within {
    background-color: #c7a873 !important;
    border-color: #c7a873 !important;
    box-shadow: none !important;
}

/* 4. TEXT HOVER & ACTIVE*/
#page2 .nav.nav-tabs.secondary-tabs>li:hover>a,
#page2 .nav.nav-tabs.secondary-tabs>li>a:hover,
#page2 .nav.nav-tabs.secondary-tabs>li.active>a,
#page2 .nav.nav-tabs.secondary-tabs>li.active>a:hover,
#page2 .nav.nav-tabs.secondary-tabs>li.active>a:focus,
#page2 .nav.nav-tabs.secondary-tabs>li.active>a:active {
    color: #060409 !important;
    font-weight: 500 !important;
    background: transparent !important;
    outline: none !important;
}

/* =========================================================
   6. COVER & HEADER (ZURÜCK ZUR ORIGINAL-LOGIK)
   ========================================================= */

/* Blendet VA-Header & VA-Titel aus (wie in eurem Ursprungscode) */
.cover .cover-content h2 a,
.cover-subtitle {
    display: none !important;
}

/* Euer originaler Cover-Fix */
#page2 .cover {
    background-image: url('x') !important;
    background-color: transparent !important;
    /* Zwingend transparent, überschreibt Kunden-CI */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    display: block !important;
    top: 0px;
    height: 320px !important;
    margin-bottom: 4rem !important;
}

@media (max-width: 768px) {
    #page2 .cover {
        background-image: none !important;
        margin-bottom: unset !important;
        height: auto !important;
    }
}

/* Verhindert den doppelten Abstand zwischen Cover und Container */
#page2 .cover+.container {
    margin-top: unset !important;
}

/* Blendet Hintergründe und Bilder sicher aus */
#page2 .cover-bg {
    background: none !important;
    display: none !important;
}

#page2 .cover .cover-content img,
#page2 .cover-innerbg {
    visibility: hidden !important;
}

/* =========================================================
   7. TICKETS, TABELLEN & BADGES
   ========================================================= */
.dataTables_filter,
#eventoverview .overview-switch {
    display: none !important;
}

.ticketTypes {
    position: relative;
}

.ticketTypes .ticketTypeSumSoldOut {
    position: unset !important;
}

.ticketTypes .ticketTypeSumSoldOut .out-badge {
    bottom: 0 !important;
    top: 0;
    right: 0 !important;
    height: fit-content;
}

.ticketTypes:not(:first-of-type) .out-badge {
    top: 2rem !important;
}

/* Sold out Logik */
tr.ticketTypes.typeNotActive .td-count {
    visibility: hidden;
    overflow: hidden;
    height: 0;
}

tr.ticketTypes:has(.ticketTypeSumSoldOut):not(.soonAvailable) .ticketType-title {
    color: #efe8dd !important;
    opacity: 1 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ff0000 !important;
    text-decoration-thickness: 3px !important;
}

tr.ticketTypes.soonAvailable td:not(.ticketTypeSumSoldOut) {
    opacity: 0.25;
    color: white;
}

/* Tabellen-Anpassungen */
.ticketType-title,
tr.ticketTypes .ticketType-title,
tr.ticketTypes.typeNotActive .ticketType-title,
.table.config tr.ticketTypes.typeNotActive .ticket-price-value {
    color: #efe8dd !important;
    opacity: 1 !important;
}

#page2 table.table.config td:first-child,
#page2 table.overview td:first-child,
#page3 table.table.config td:first-child,
#page3 table.overview td:first-child {
    background-color: transparent !important;
}

.table.config .input-group-btn .btn-link {
    background-color: transparent !important;
    color: #efe8dd !important;
}

/* =========================================================
   8. ABSTÄNDE, CUSTOM SLIDER & CHECKOUT
   ========================================================= */
#page2>.container .tab-content {
    margin-top: unset !important;
}

#page2>.container .ticketTypeSum,
#page2>.container .ticketTypeSumSoldOut {
    padding-bottom: 0.5rem;
}

#page2 .cover+.container {
    margin-top: unset;
}

.custom-slider-tio {
    overflow-y: hidden;
    max-height: 500px;
    transition: all 0.5s;
}

.custom-slider-tio.closed-tio {
    max-height: 0;
}

.mobileBadgeSpace {
    display: none;
}

/* Euer Glassmorphismus für Container */
:is(#page2, #page3) :is(.cover + .container, .customer-data-wrapper .page-sub, .sumOfPurchase),
.container-purchasecomplete,
footer {
    background-color: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(4px);
    border-radius: 1rem !important;
    z-index: 1 !important;
}

.wrapper>.container.container-purchasecomplete .btn-download {
    color: black !important;
}

.page3a,
#page3 .sumOfPurchase,
.tioNotOrganizer {
    padding: 0 20px !important;
}

#page3 .sumOfPurchase .tioNotOrganizer {
    padding-bottom: 1rem !important;
}

.customer-data-wrapper,
.tioNotOrganizer {
    background: none !important;
}

.actionBar {
    border-top: none !important;
}

/* Footer Glaskasten Texte */
body>footer,
.wrapper>.container,
body>footer p,
body>footer a,
.wrapper>.container p,
.wrapper>.container a,
.include-vat,
.tioNotOrganizer,
.shipmentDiv small {
    color: #efe8dd !important;
    text-align: center !important;
}

body>footer a {
    display: inline-block;
    margin: 5px 8px;
}

/* =========================================================
   9. MOBILE FIXES (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

    /* Notfall-Fix: Blendet unkategorisierte "Sonstiges"-Tabs aus */
    .nav.nav-tabs.secondary-tabs>li:has(a[href*="sonstiges" i]) {
        display: none !important;
    }

    .ticketTypeSumSoldOut .badge-important {
        bottom: 8em !important;
    }

    .ticketType-title {
        display: inline-flex !important;
        align-items: center;
        width: 100%;
        margin-top: 1rem;
    }

    #page2 .cover {
        margin-top: unset !important;
        margin-bottom: 2rem !important;
        height: auto !important;
        background-image: none !important;
        background-size: 80% !important;
    }

    :is(#page2, #page3) :is(.cover + .container, .customer-data-wrapper .page-sub, .sumOfPurchase) {
        margin-top: 2vh;
    }

    .mobile-table-highlight {
        background-color: unset !important;
        border: unset !important;
    }

    table.config tr.ticketTypes {
        display: block;
        margin-bottom: 10px;
    }

    table.config tr.ticketTypes td {
        background-color: transparent !important;
        color: #efe8dd;
        border-width: 0;
    }

    table.config tr.ticketTypes td.ticketSinglePrice {
        display: block !important;
        padding-top: 4px !important;
        font-weight: 500;
    }

    #page2 .ticketTypes:first-of-type td:has(.ticketType-title) {
        padding-top: unset;
    }

    #page2 .ticketTypes:first-of-type td:has(.ticketType-title) .ticketType-title {
        margin-top: unset;
    }
}

/* =========================================================
   10. ACTION BAR (ZURÜCK/WEITER) UNTEN ANDOCKEN
   ========================================================= */

/* Nimmt dem Balken die Fixierung und setzt ihn ans Ende des Inhalts */
.actionBar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 2rem !important;
    /* Ein bisschen Luft nach oben */
    padding-bottom: 2rem !important;
    /* Ein bisschen Luft nach unten */
    background-color: transparent !important;
    box-shadow: none !important;
    /* Entfernt den Schatten, der oft beim Scrollen entsteht */
}

body,
.wrapper,
#page2,
#page3 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}