@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../shared/assets/fonts/Montserrat-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

/* =========================================================
   1. GLOBALE EINSTELLUNGEN & SCHRIFTARTEN (ALLE SEITEN)
   ========================================================= */

body {
    position: relative;

    &::before {
        display: block;
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url("./assets/background_portrait-2.webp");
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;

        background-position: center;

        @media (min-width: 768px) {
            background-image: url("./assets/background_landscape-2.webp");
        }
    }

    .wrapper,
    .pages,
    .page-sub,
    .main-content {
        background-color: transparent !important;
    }

    .td-count,
    .td-price,
    .td-sum,
    .total-label {
        font-weight: 600 !important;
    }

    .navbar-inverse {
        border-color: transparent;
    }

    & footer {
        background-color: transparent !important;
    }

    footer,
    footer a,
    footer p,
    footer span {
        color: #ffffff !important;
    }

    /* 1. STANDARDSCHRIFTART FÜR DEN REST (Montserrat Medium - schließt System-Icons UND ALLE ÜBERSCHRIFTEN/STRONG aus) */
    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(h1 *):not(h2 *):not(h3 *):not(h4 *):not(h5 *):not(h6 *):not(.material-symbols-rounded):not(.fa):not(.glyphicon):not(.ticket-info-row i):not(.fc-icon):not(.main-content strong):not(.page-sub strong) {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 500 !important;
        /* Medium */
    }

    /* 2. SCHRIFTART FÜR ALLE ÜBERSCHRIFTEN & STRONG-TITEL (Montserrat Extra Bold) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h1 *,
    h2 *,
    h3 *,
    h4 *,
    h5 *,
    h6 *,
    .main-content h3,
    .main-content h4,
    .page-sub h3,
    .page-sub h4,
    .main-content strong,
    .page-sub strong,
    /* Zwingt die Paragraphen-Titel (§) rein auf das dicke Schriftgewicht */
    .cover-content h2,
    .cover-content h2 a,
    #page3 .sumOfPurchase h2,
    .event-calendar h2 {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800 !important;
        /* Extra Bold */
    }

    /* =========================================================
   SPEZIFISCHE KORREKTUREN
   ========================================================= */

    /* 1. KORREKTUR FÜR DIE CHECKOUT-ÜBER-SCHRIFTEN (Bild 1 & 2: "Versandart", "Käufer") */
    #page3 h2,
    #page3 h2.checkout-heading,
    .customer-data-wrapper h2 {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800 !important;
        /* Extra Bold */
    }

    /* 2. KORREKTUR FÜR DEN EVENT-LINK IM HEADER (Bild 4: "PUANTEZ - 2:00 PM Service...") */
    header.cover .cover-content h2 a,
    header.cover .cover-content a,
    #page2 header.cover .cover-content h2 a,
    [class*="purchasecomplete"] header.cover .cover-content h2 a {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800 !important;
        /* Extra Bold */
    }

    /* =========================================================
   ERWEITERUNG: EVENTTITEL (ÜBERSICHTSSEITE & PAGE 2)
   ========================================================= */

    /* Triff den Event-Titel im Header exakt über die neue Klasse aus dem Screenshot */
    a.a-eventlink,
    header.cover .cover-content h2 a.a-eventlink {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800 !important;
        /* Extra Bold */
    }

    /* Zwingt die Event-Titel in der Event-Liste (Übersichtsseite) ebenfalls auf Extra Bold */
    .table-events td a,
    .table-events .event-title,
    #eventoverview .event-title,
    .table-events td strong {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800 !important;
        /* Extra Bold */
    }


    /* =========================================================
   2. EINHEITLICHER HEADER-BEREICH (ALLE SEITEN)
   ========================================================= */

    .cover img,
    .navbar-brand img {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* Positions-Fix: Gleicht den Höhenunterschied zwischen den Seiten perfekt aus */
    #page1 header.cover,
    #page2 header.cover,
    #page3 header.cover,
    #eventoverview header.cover,
    header.cover {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        visibility: visible !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        padding-top: 25px !important;
        /* Verhindert das Springen und hält das Logo synchron */
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    /* Setzt die Menüleiste auf absolute Position, damit sie keinen Platz mehr wegnimmt */
    .navbar {
        position: absolute !important;
        top: 0 !important;
        width: 100% !important;
       display: none;
        box-shadow: unset;
    }

    #page2 header.cover .cover-bg,
    #page2 header.cover .cover-gradient,
    header.cover:has(+ .container-purchasecomplete) .cover-bg,
    header.cover:has(+ .container-purchasecomplete) .cover-gradient,
    [class*="purchasecomplete"] header.cover .cover-bg,
    [class*="purchasecomplete"] header.cover .cover-gradient {
        display: none !important;
    }

    #page2 header.cover .cover-content,
    header.cover:has(+ .container-purchasecomplete) .cover-content,
    [class*="purchasecomplete"] header.cover .cover-content {
        text-align: center !important;
        display: block !important;
        position: relative;
        z-index: 5;
        margin-top: 0 !important;
    }

    #page2 header.cover .cover-content img,
    header.cover:has(+ .container-purchasecomplete) .cover-content img,
    [class*="purchasecomplete"] header.cover .cover-content img {
        content: url("./assets/logo.webp");
        max-height: 170px !important;
        width: auto !important;
        margin: 0 auto 20px auto !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    #page2 header.cover .cover-content h2,
    #page2 header.cover .cover-content h2 a,
    header.cover:has(+ .container-purchasecomplete) .cover-content h2,
    [class*="purchasecomplete"] header.cover .cover-content h2,
    header.cover:has(+ .container-purchasecomplete) .cover-content h2 a,
    [class*="purchasecomplete"] header.cover .cover-content h2 a {
        font-family: "Montserrat", serif !important;
        font-size: 24px !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
        text-decoration: none !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    #page2 header.cover .cover-content p.cover-subtitle,
    #page2 header.cover .cover-content .cover-subtitle span,
    header.cover:has(+ .container-purchasecomplete) .cover-content p.cover-subtitle,
    [class*="purchasecomplete"] header.cover .cover-content p.cover-subtitle,
    header.cover:has(+ .container-purchasecomplete) .cover-content .cover-subtitle span,
    [class*="purchasecomplete"] header.cover .cover-content .cover-subtitle span {
        font-family: "Montserrat", sans-serif !important;
        font-size: 15px !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
        margin-top: -5px !important;
        padding-top: 0 !important;
        line-height: 1.2 !important;
    }

    #page2 header.cover .cover-content .cover-subtitle i,
    header.cover:has(+ .container-purchasecomplete) .cover-content .cover-subtitle i,
    [class*="purchasecomplete"] header.cover .cover-content .cover-subtitle i {
        font-size: 16px !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
        vertical-align: text-bottom !important;
    }


    /* =========================================================
   3. ÜBERSICHTSSEITE & BUTTONS (IDENTISCHER HOVER-LOOK)
   ========================================================= */

    .text-muted {
        color: #ffffff !important;
    }

    /* Radikale 999px Abrundung für alle Schaltflächen und Suchfelder */
    .btn,
    .btn-primary,
    .btn-default,
    input[type="search"],
    .fc-button {
        border-radius: 999px !important;
    }

    /* Gewährleistet, dass die Schalter oben im Kalender vollkommen rund bleiben */
    .overview-switch.btn-group .btn,
    .overview-switch.btn-group>.btn:first-child,
    .overview-switch.btn-group>.btn:last-child,
    .overview-switch.btn-group>.btn:not(:first-child):not(:last-child) {
        border-radius: 999px !important;
    }

    /* --- DAS CLEAN-DESIGN FÜR ALLE BUTTONS (SOWOHL LISTE ALS AUCH ZURÜCK/WEITER) --- */

    /* Normalzustand: Transparent mit edlem, dickerem weißen Rahmen */
    .btn-primary,
    .btn-default,
    .table-events .btn,
    #eventoverview .btn,
    .overview-switch.btn-group .btn:not(.active) {
        border: 2px solid #ffffff !important;
        /* Knackiger Rahmen */
        background-color: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(20px);
        /* Transparentes Schwarzglas */
        color: #ffffff !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: none !important;
    }

    /* Text- & Icon-Farbe im Inneren von inaktiven Kalender-Buttons ebenfalls weiß */
    .overview-switch.btn-group .btn:not(.active) * {
        color: #ffffff !important;
    }

    /* HOVER-ZUSTAND INVERTIERT: Beim Drüberfahren füllt sich der Button SCHWARZ mit weißem Rahmen (Wie Kaufabschluss) */
    .btn-primary:hover,
    .btn-default:hover,
    .table-events .btn:hover,
    #eventoverview .btn:hover,
    .overview-switch.btn-group .btn:not(.active):hover {
        border: 2px solid #ffffff !important;
        /* Weißer Rahmen bleibt */
        background-color: #000000 !important;
        /* Schwarzer Hover-Effekt */
        background: #000000 !important;
        color: #ffffff !important;
    }

    /* Gewährleistet, dass auch Icons beim Hovern weiß bleiben */
    .overview-switch.btn-group .btn:not(.active):hover * {
        color: #ffffff !important;
    }

    /* --- AKTIVER ZUSTAND (NUR FÜR DIE MONAT/WOCHE/TAG SCHALTER OBEN) --- */
    .overview-switch.btn-group .btn.active {
        background-color: #ffffff !important;
        border: 2px solid #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }

    .overview-switch.btn-group .btn.active * {
        color: #000000 !important;
    }

    /* --- ANPASSUNG: AKTIVE FC ICONS KALENDER-SCHALTER --- */

    /* Nur das aktuell ausgewählte Icon erhält den weißen Hintergrund */
    .overview-switch.btn-group .btn.active,
    .fc-toolbar .fc-button-group .fc-state-active,
    .fc-button.fc-state-active {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: 2px solid #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    /* Zwingt den Text und das Icon im ausgewählten Zustand auf Schwarz */
    .overview-switch.btn-group .btn.active * {
        color: #000000 !important;
    }

    /* --- MAXIMALER FORCE-FIX FÜR DEN AKTIVEN BUTTON --- */

    div.pull-right.btn-group.overview-switch a.btn.active,
    div.pull-right.btn-group.overview-switch a.btn.active.btn-primary,
    #eventoverview .pull-right.btn-group a.btn.active {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: 2px solid #ffffff !important;
        color: #000000 !important;
        opacity: 1 !important;
    }

    /* Zwingt das Icon im active Zustand auf Schwarz */
    div.pull-right.btn-group.overview-switch a.btn.active i,
    div.pull-right.btn-group.overview-switch a.btn.active span,
    div.pull-right.btn-group.overview-switch a.btn.active * {
        color: #000000 !important;
    }

    /* HOVER-KORREKTUR FÜR DEN FORCE-FIX (Invertiert zu schwarz/weiß) */
    div.pull-right.btn-group.overview-switch a.btn.active:hover,
    #eventoverview .pull-right.btn-group a.btn.active:hover {
        background-color: #000000 !important;
        background: #000000 !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
    }

    div.pull-right.btn-group.overview-switch a.btn.active:hover * {
        color: #ffffff !important;
    }

    /* --- ZENTRIERUNG & LAYOUT-RETTUNG (STABIL WIE VORHER) --- */

    #eventoverview .btn,
    .table-events .btn,
    .btn-block {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    #eventoverview .btn span,
    .table-events .btn span,
    .btn-block span {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Suchleiste oben */
    input[type="search"] {
        border-radius: 999px !important;
    }

    /* "Tickets ab..."-Text in den Event-Listen */
    ul.list-eventinfos li:nth-child(3) {
        display: flex !important;
        align-items: center !important;
        color: #ffffff !important;
        font-weight: 800 !important;
    }

    ul.list-eventinfos li:nth-child(3) * {
        color: #ffffff !important;
        font-weight: 800 !important;
    }

    /* Weiße Trennlinien zwischen den Events */
    .table-events tbody tr td.row {
        border-bottom: 3px solid #ffffff !important;
        padding-bottom: 40px !important;
        padding-top: 40px !important;
    }

    .table-events tbody tr:last-child td.row {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Zebra-Streifen */
    .table-events tbody tr:nth-child(even)>td:not(.row),
    .table-events tbody tr.even>td:not(.row) {
        background-image: none !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
    }

    .table-events tbody tr:nth-child(odd)>td:not(.row),
    .table-events tbody tr.odd>td:not(.row) {
        background-image: none !important;
        background-color: transparent !important;
    }

    .table-events tbody tr:hover>td:not(.row) {
        background-color: rgba(255, 255, 255, 0.12) !important;
        transition: background-color 0.2s ease;
    }

    /* Kalender-Steuerung Details */
    @media only screen and (min-width: 576px) {
        .fc-day-grid-event .fc-content {
            background-color: #000000 !important;
        }
    }

    .fc-event {
        background-color: #ffffff !important;
    }

    .event-calendar h2 {
        color: #ffffff;
    }

    .fc-event .fc-content {
        color: #ffffff !important;
    }

    /* HOVER-ZUSTAND INVERTIERT FÜR KALENDER-BUTTONS */
    .fc-toolbar .fc-button-group .fc-button:hover,
    .fc-toolbar .fc-button-group .fc-button.fc-state-hover {
        background-color: #000000 !important;
        background: #000000 !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .overview-switch.btn-group .btn {
        margin-left: 5px !important;
        margin-right: 5px !important;
        float: none !important;
        display: inline-block !important;
    }

    /* =========================================================
   VISUELLE ABHEBUNG: AKTIVE BUTTONS VS INAKTIVE BUTTONS
   ========================================================= */

    /* 1. DER AKTIVE "TICKETS"-BUTTON (Volle Power & Sichtbarkeit) */
    #eventoverview .btn.btn-primary:not(.disabled):not([disabled]),
    .table-events .btn-primary:not(.disabled):not([disabled]) {
        background-color: #0066ff !important;
        /* Knalliges, aktives Blau (oder deine Brand-Farbe) */
        color: #ffffff !important;
        /* Rein weißer Text */
        border: 2px solid #0066ff !important;
        /* Rahmen in Button-Farbe */
        font-weight: 800 !important;
        /* Extra Bold Montserrat */
        box-shadow: 0 0 15px rgba(0, 102, 255, 0.4) !important;
        /* Subtiler Leuchteffekt */
        transition: all 0.2s ease-in-out !important;
    }

    /* Hover-Effekt für den aktiven Button (wenn man mit der Maus drüberfährt) */
    #eventoverview .btn.btn-primary:not(.disabled):not([disabled]):hover,
    .table-events .btn-primary:not(.disabled):not([disabled]):hover {
        background-color: #0052cc !important;
        /* Etwas dunkleres Blau beim Hover */
        border-color: #0052cc !important;
        box-shadow: 0 0 25px rgba(0, 102, 255, 0.7) !important;
        /* Stärkeres Leuchten */
        transform: scale(1.02) !important;
        /* Leichtes Vergrößern */
    }

    /* 2. DIE INAKTIVEN / DEAKTIVIERTEN BUTTONS (Dezent im Hintergrund belassen) */
    #eventoverview .btn.disabled,
    #eventoverview .btn[disabled],
    .table-events .btn.disabled,
    .table-events .btn[disabled] {
        background-color: transparent !important;
        /* Transparent wie im Screenshot */
        color: rgba(255, 255, 255, 0.5) !important;
        /* Abgeschwächter, grauer Text */
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        /* Dünner, unauffälliger Rahmen */
        box-shadow: none !important;
        /* Kein Leuchten */
        transform: none !important;
        pointer-events: none;
        /* Macht den Button unklickbar */
    }

    /* =========================================================
   4. VERANSTALTUNGSSEITE (Stabiles Original-Layout)
   ========================================================= */

    .include-vat {
        color: #ffffff;
    }

    .actionBar {
        border-top: unset !important;
        background-color: transparent !important;
    }

    table.config td.td-count .minus-wrapper .btn-ticketamount,
    table.config td.td-count .plus-wrapper .btn-ticketamount,
    .btn-ticketamount,
    .minus-wrapper .btn,
    .plus-wrapper .btn {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: 1px solid #ffffff !important;
        color: #000000 !important;
        border-radius: 999px !important;
    }

    /* HOVER INVERTIERT: Plus/Minus wechselt zu Schwarz mit weißem Rahmen */
    table.config td.td-count .minus-wrapper .btn-ticketamount:hover,
    table.config td.td-count .plus-wrapper .btn-ticketamount:hover,
    .btn-ticketamount:hover,
    .minus-wrapper .btn:hover,
    .plus-wrapper .btn:hover {
        background-color: #000000 !important;
        background: #000000 !important;
        border: 1px solid #ffffff !important;
        color: #ffffff !important;
        transition: all 0.2s ease-in;
    }

    #page2 .cover-content,
    #page2 .event-infos-wrapper,
    #page2 .cover-subtitle {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: none !important;
        transition: none !important;
    }

    #page2 .cover-content h2,
    #page2 .cover-content h2 a,
    #page2 .cover-content p,
    #page2 .cover-content span,
    #page2 .cover-content i,
    #page2 .cover-subtitle,
    #page2 .cover-subtitle * {
        color: #ffffff !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6) !important;
    }

    .nav-tabs {
        border-bottom: none !important;
        display: flex !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .nav-tabs>li>a,
    .nav-tabs>li.active>a {
        border-radius: 999px !important;
        padding: 10px 25px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
    }

    .nav-tabs>li:not(.active)>a {
        background-color: transparent !important;
        border: 1px solid #ffffff !important;
        color: #ffffff !important;
    }

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:hover,
    .nav-tabs>li.active>a:focus {
        background-color: #ffffff !important;
        border: 1px solid #000000 !important;
        color: #000000 !important;
    }

    /* HOVER INVERTIERT FÜR INFOS/TICKETS KAUFEN TABS */
    .nav-tabs>li:not(.active)>a:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    /* Der umschließende Schwarzglas-Kasten für das Ticket-Grid */
    #page2 .container.row-firstnewpage,
    #page2 .cover+.container {
        background-color: rgba(0, 0, 0, 0.4) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Alle inneren Tabellenlinien auf Seite 2 dezent transparent setzen */
    #page2 .container.row-firstnewpage table,
    #page2 .container.row-firstnewpage thead,
    #page2 .container.row-firstnewpage tbody,
    #page2 .container.row-firstnewpage tr,
    #page2 .container.row-firstnewpage td,
    #page2 .container.row-firstnewpage th,
    #page2 .table-responsive,
    #page2 table.config {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
    }

    /* Zwingt ausnahmslos alle Zellen zu der durchgehenden Rahmenlinie */
    #page2 table.config th,
    #page2 table.config td,
    #page2 table.config thead th,
    #page2 .container.row-firstnewpage th,
    #page2 .container.row-firstnewpage td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* Verhindert das Abschneiden der Linien an den äußeren Padding-Grenzen */
    #page2 table.config th:first-child,
    #page2 table.config td:first-child {
        padding-left: 0 !important;
    }

    #page2 table.config th:last-child,
    #page2 table.config td:last-child {
        padding-right: 0 !important;
    }

    #page2 th.right.tickets-column,
    #page2 td.right_smaller,
    #page2 .ticketTypeSum {
        background-color: transparent !important;
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    #page2 .container.row-firstnewpage * {
        --background-surface-weak: transparent !important;
        --background-surface-medium: transparent !important;
        --background-surface-default: transparent !important;
    }

    /* Blendet die Akzentlinie unter den Navigation-Tabs komplett aus */
    #page2 .nav-tabs .nav-border,
    .nav-tabs span.nav-border,
    .nav-tabs::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
    }

    /* Ausverkaufte & Inaktive/Bald verfügbare Tickets Anpassung */
    tr.ticketTypes {
        &.typeNotActive .td-count {
            visibility: hidden;
            overflow: hidden;
            height: 0;
        }

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

        /* ERWEITERUNG: Greift nun bei "soonAvailable" ODER generell bei inaktiven "typeNotActive" Ticketzeilen */
        &.soonAvailable td:not(.ticketTypeSumSoldOut),
        &.typeNotActive td:not(.ticketTypeSumSoldOut) {
            opacity: 0.25 !important;
            /* Erzeugt den ausgegrauten Effekt */
            color: #787878 !important;
            /* Ein sauberes Grau (statt reinem Schwarz), damit es auf dem dunklen Glas perfekt aussieht */
        }
    }


    /* =========================================================
   5. CHECKOUT (Käuferdaten & Gutschein-Optimierung)
   ========================================================= */

    .tioNotOrganizer {
        color: #ffffff !important;
    }

    html body input.form-control,
    html body select.form-control,
    html body textarea.form-control {
        border-radius: 999px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    html body .input-group .form-control {
        border-radius: 999px !important;
    }

    html body .input-group-btn>.btn,
    html body .input-group-append>.btn,
    .couponDiv .input-group-btn>.btn {
        border-radius: 999px !important;
        margin-left: 10px !important;
    }

    /* --- LINKER BEREICH: KUNDENDATEN --- */
    #page3 .customer-data-wrapper {
        background-color: transparent !important;
        background-image: none !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    #page3 .customer-data-wrapper .page-sub {
        background-color: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    /* --- RECHTER BEREICH: WARENKORB & DURCHGEHENDE LINIEN --- */
    #page3 .sumOfPurchase {
        background-color: rgba(0, 0, 0, 0.4) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
        padding: 20px 0px !important;
    }

    /* Fügt den Texten im Kopf und Hinweistexten den korrekten Abstand wieder hinzu */
    #page3 .sumOfPurchase h2,
    #page3 .sumOfPurchase p,
    #page3 .sumOfPurchase .couponDiv {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #page3 .sumOfPurchase table,
    #page3 .sumOfPurchase thead,
    #page3 .sumOfPurchase tbody,
    #page3 .sumOfPurchase .table-responsive,
    #page3 .sumOfPurchase .checkout-box,
    #page3 .sumOfPurchase .panel,
    #page3 .sumOfPurchase .well,
    #page3 .sumOfPurchase [class*="card"],
    #page3 .sumOfPurchase [class*="block"] {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* Zwingt jede Tabellenzeile im Warenkorb zu der feinen, durchgezogenen Linie */
    #page3 .sumOfPurchase tr,
    #page3 .sumOfPurchase th,
    #page3 .sumOfPurchase td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        background-color: transparent !important;
        background: transparent !important;
    }

    /* Verteilt das Padding auf die Zellen, damit die Linien bis zur Außenkante spannen */
    #page3 .sumOfPurchase th,
    #page3 .sumOfPurchase td {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Setzt den exakten Seitenabstand für den Inhalt innerhalb der Tabelle */
    #page3 .sumOfPurchase th:first-child,
    #page3 .sumOfPurchase td:first-child {
        padding-left: 20px !important;
    }

    #page3 .sumOfPurchase th:last-child,
    #page3 .sumOfPurchase td:last-child {
        padding-right: 20px !important;
    }

    /* Entfernt die allerletzte Rahmenlinie vor den Eingabefeldern für einen sauberen Abschluss */
    #page3 .sumOfPurchase tr:last-child,
    #page3 .sumOfPurchase tr:last-child td {
        border-bottom: none !important;
    }

    #page3 .sumOfPurchase * {
        --background-surface-weak: transparent !important;
        --background-surface-medium: transparent !important;
        --background-surface-default: transparent !important;
    }

    #page3 .tioNotOrganizer {
        background-color: rgba(0, 0, 0, 0.4) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
        border: none !important;
    }

    @media (min-width: 992px) {

        #page3 .customer-data-wrapper .page-sub:first-child,
        #page3 .sumOfPurchase,
        #page2 .container.row-firstnewpage {
            margin-top: 30px !important;
        }
    }

    /* =========================================================
   6. KAUFABSCHLUSS (Erfolgsseite)
   ========================================================= */

    .container-purchasecomplete {
        background-color: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(4px);
        border-radius: 1rem !important;
        margin-top: 0 !important;
    }

    .container-purchasecomplete .col-md-7 h2:first-child {
        color: #ffffff !important;
    }

    /* Normalzustand: Transparent mit dickem weißen Rahmen */
    a.btn.btn-download {
        border: 2px solid #ffffff !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        transition: all 0.2s ease-in-out !important;
        box-shadow: none !important;
    }

    a.btn.btn-download * {
        color: #ffffff !important;
    }

    /* Hover-ZUSTAND INVERTIERT: Wechselt zu schwarzem Hintergrund mit weißem Rahmen */
    a.btn.btn-download:hover,
    a.btn.btn-download:focus,
    a.btn.btn-download:active {
        border-color: #ffffff !important;
        /* Weißer Rahmen beim Hover */
        background-color: #000000 !important;
        /* Schwarzer Hintergrund beim Hover */
        background: #000000 !important;
        color: #ffffff !important;
    }

    a.btn.btn-download:hover *,
    a.btn.btn-download:focus *,
    a.btn.btn-download:active * {
        color: #ffffff !important;
    }

    /* Styling Erfolgs-Kasten - TRANS-FIX FÜR DIE RICHTIGE SCHWARZGLAS-TÖNUNG */
    .container-purchasecomplete {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-top: 60px !important;
    }

    /* Wir legen den echten Glaskasten direkt auf die umschließende Zeile, damit sie vollflächig einfärbt */
    .container-purchasecomplete>.row {
        background-color: rgba(0, 0, 0, 0.45) !important;
        /* Etwas satteres Schwarzglas für perfekte Lesbarkeit */
        backdrop-filter: blur(10px) !important;
        /* Schöner, weicher Glaseffekt */
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 12px !important;
        /* Formt die runden Ecken */
        padding: 30px 20px !important;
        /* Bringt den Inhalt auf Abstand zum Rand */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        /* Die feine Glaskante von Page 2 */
    }

    /* Löscht alle störenden Zwischenhintergründe der Spalten und Boxen */
    .container-purchasecomplete [class*="col-"],
    .container-purchasecomplete .panel,
    .container-purchasecomplete .well,
    .container-purchasecomplete .checkout-box,
    .container-purchasecomplete [class*="card"] {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Alle Texte knallhart auf reines Weiß setzen für maximalen Kontrast */
    .container-purchasecomplete :is(h2, h3, h4, p, span, strong, li, div) {
        color: #ffffff !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* Fix für den Download-Button */
    a.btn.btn-download {
        border: 2px solid #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
    }

    a.btn.btn-download * {
        color: #ffffff !important;
    }

    /* Hover-Zustand für den Button (Invertiert zu Weiß mit schwarzem Text) */
    a.btn.btn-download:hover,
    a.btn.btn-download:hover * {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    /* =========================================================
   7. GLASKASTEN-EFFEKT (HAUPT-DESIGN)
   ========================================================= */

    :is(#page2, #page3) :is(.cover + .container, .customer-data-wrapper .page-sub, .sumOfPurchase, .tioNotOrganizer) {
        background-color: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        z-index: 1 !important;

        @media (max-width: 768px) {
            margin-top: 2vh;
        }
    }

    #page2 table.config,
    #page2 .table-responsive {
        background-color: transparent !important;
        background: transparent !important;
    }

    #page2 table.config thead tr th,
    #page2 th.tickets-column {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    #page2 tr.ticketTypes td {
        background: transparent !important;
        color: #ffffff !important;
    }

    #page2 .bigger {
        background: rgba(255, 255, 255, 0.04) !important;
        color: #ffffff !important;
    }

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

    /* =========================================================
   8. MOBILE ANPASSUNGEN (Smartphones max 768px)
   ========================================================= */

    @media (max-width: 768px) {
        /* FIX: Hält Tabellenzellen und Zeilen absolut sauber und transparent */
        td:not(.container-fluid td),
        th:not(.container-fluid td),
        tr:not(.container-fluid td),
        .table-events tr,
        .table-events td {
            background-image: none !important;
            background-color: transparent !important;
        }
    }



    @media (max-width: 768px) {

        /*  WARENKORB (Perfekt bündig und identisch zum oberen Kasten angepasst) */
        #page3 .sumOfPurchase {
            width: 100% !important;
            /* Hier die gewünschte Breite eintragen */
            margin-left: auto !important;
            /* Zentriert den Kasten links */
            margin-right: auto !important;
            /* Zentriert den Kasten rechts */
            box-sizing: border-box !important;
            padding: 20px !important;
            border-radius: 12px !important;
            margin-top: 20px !important;
            margin-bottom: 20px !important;
            transform: none !important;
        }

        /* =========================================================
       DESKTOP-ANZEIGE FÜR KALENDER-EVENTS AUF MOBILE (REPAIR)
       ========================================================= */

        /* 1. Holt die Event-Balken auf Mobile zurück und bricht Radikal-Stauchungen auf */
        #eventoverview .fc-view-container .fc-event,
        #eventoverview .fc-view-container .fc-event .fc-content,
        .fc-view-container .fc-event,
        .fc-view-container .fc-content {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            min-height: 18px !important;
            /* Verhindert das Zusammenstauchen zum Quadrat */
            height: auto !important;
        }

        /* 2. Setzt die Kasten-Stile zurück, damit der blaue Balken mit Text voll wächst */
        .fc-view-container .fc-event {
            margin: 2px 2px !important;
            padding: 3px 5px !important;
            white-space: normal !important;
            /* Erlaubt Zeilenumbruch */
            word-break: break-word !important;
            overflow: visible !important;
            border-radius: 4px !important;
            width: auto !important;
            /* Holt die volle Breite im Datumsfeld zurück */
            position: relative !important;
            /* Löst absolute Stauchungen auf */
        }

        /* 3. Bringt den Text im Balken wieder zum Vorschein */
        .fc-view-container .fc-event .fc-title,
        span.fc-title {
            font-family: "Montserrat", sans-serif !important;
            font-weight: 800 !important;
            /* Montserrat Extra Bold */
            font-size: 10px !important;
            /* Kompakte Größe für Mobile */
            line-height: 1.2 !important;
            color: #000000 !important;
            /* Weißer Text auf blauem Grund */
            display: block !important;
            visibility: visible !important;
        }

        /* 4. Sorgt dafür, dass die Kalenderzeilen elastisch Platz machen */
        .fc-basic-view .fc-body .fc-row,
        .fc-row .fc-content-skeleton {
            min-height: 75px !important;
            height: auto !important;
        }

        .fc-row .fc-content-skeleton tbody td {
            height: auto !important;
        }
    }
}