/* ==========================================================================
   SCHOOLANDO.CSS – Custom Theme Overrides
   Komplett neu geschrieben. NUR Farben, Fonts, Schatten, Borders.
   KEINE Layout-Änderungen (height, margin, padding auf Sektions-Container).

   INHALTSVERZEICHNIS:
   §0  – Design Tokens
   §1  – Global: Fonts, Body, Headings
   §2  – Top-Bar
   §3  – Navbar (Hauptnavigation)
   §4  – Kategorien-Dropdown
   §5  – Hero Section
   §6  – Hero Kurs-Karten (rechte Spalte)
   §7  – Hero Spacing & Spacer
   §8  – Statistik-Bereich
   §9  – Section-Titles
   §10 – Buttons (Global)
   §11 – Kurs-Karten
   §12 – Badges & Sterne
   §13 – Trending Categories
   §14 – Newsletter-Bereich
   §15 – Blog-Karten
   §16 – Footer
   §17 – Scrollbar
   §18 – Auth-Seiten (Login / Register)
   §19 – Mobile Overrides
   §19b – Mobile Header & Menu Drawer (Dark Theme)
   §20 – Courses Page
   §21 – Events Page
   §22 – Instructor Finder Page
   §23 – Pages (Über uns, etc.)
   §24 – Panel / Dashboard (Dozenten & Studenten)
   §25 – Become Instructor / Registration Packages
   §26 – Certificate Validation (Frontend)
   §27 – Forum Create Topic (Frontend)
   §28 – Course Detail Page (Kursdetail-Seite)
   §29 – User Profile Page (Dozenten-/Nutzerprofil)
   NOTE: §20, §21 and §22 share many filter styles via comma-separated selectors.
   ========================================================================== */


/* =========================
   SELF-HOSTED FONTS (DSGVO-konform, kein Google-Server-Kontakt)
   ========================= */

/* DM Sans – Body Text */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/dm-sans/dm-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora – Headlines */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/sora/sora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================
   §0 – DESIGN TOKENS
   ========================= */
:root {
    /* Brand */
    --sc-navy: #0D1B2A;
    --sc-navy-light: #162336;
    --sc-blue: #5B8DEF;
    --sc-blue-hover: #4A7AD8;
    --sc-blue-focus: #7BA3F5;
    --sc-amber: #F59E0B;
    --sc-amber-hover: #D97706;
    --sc-emerald: #10B981;
    --sc-slate: #475569;
    --sc-offwhite: #F8FAFC;
    --sc-text: #1E293B;
    --sc-white: #FFFFFF;
    --sc-error: #f87171;

    /* Dark Surfaces */
    --sc-surface: #0f2236;
    --sc-surface-deep: #0a1929;
    --sc-surface-input: #152b45;
    --sc-surface-focus: #1c3554;
    --sc-surface-hover: #0f2744;
    --sc-dropdown: #0B2239;
    --sc-hover: #112A3E;

    /* Radii */
    --sc-radius: 8px;
    --sc-radius-lg: 14px;
}


/* =========================
   §1 – GLOBAL: FONTS, BODY, HEADINGS
   ========================= */
body {
    font-family: "DM Sans", sans-serif !important;
    background-color: var(--sc-navy) !important;
    line-height: 1.7 !important;
    color: var(--sc-text) !important;
}

body.bg-gray,
#app,
.bg-gray {
    background-color: var(--sc-navy) !important;
}

/* Content-Bereiche die hell sein sollen (Navbar + Kursseite ausgenommen) */
.trending-categories-section__item-card,
.trending-categories-section__item-card-mask,
.blog-section__post-card,
.breadcrumbs-section,
.main-content {
    background-color: var(--sc-offwhite) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", sans-serif !important;
    line-height: 1.3 !important;
    color: var(--sc-navy) !important;
}


/* =========================
   §2 – TOP-BAR
   ========================= */
.theme-header-1__top-navbar {
    background-color: var(--sc-navy) !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.theme-header-1__top-navbar a,
.theme-header-1__top-navbar span,
.theme-header-1__top-navbar .icons {
    color: #FFFFFF !important;
}

.theme-header-1__top-navbar a:hover {
    color: var(--sc-amber) !important;
    opacity: 1 !important;
}

/* Suchfeld: eingegebener Text klar sichtbar */
.theme-header-1__top-navbar-search input,
.theme-header-1__top-navbar-search input.form-control {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.theme-header-1__top-navbar-search input::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.theme-header-1__top-navbar-search input:focus {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Login/Register Hover */
a[href="/login"]:hover,
a[href="/login"]:hover span,
a[href="/register"]:hover,
a[href="/register"]:hover span {
    color: var(--sc-amber) !important;
    opacity: 1 !important;
    transition: color 0.2s ease !important;
}


/* =========================
   §3 – NAVBAR (HAUPTNAVIGATION)
   ========================= */
/* Floating-Card Pattern neutralisieren:
   Original: top:-42px, margin-bottom:-42px, height:84px → schwebende Karte
   Neu: Alles auf 0, nahtlos Top-Bar → Navbar → Hero */
.theme-header-1 {
    margin-bottom: 0 !important;
}

.theme-header-1__main {
    background-color: var(--sc-navy) !important;
    box-shadow: none !important;
    border-bottom: none !important;
    top: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.theme-header-1__main-mask {
    background: var(--sc-navy) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 1 !important;
}

.theme-header-1__top-navbar.pb-54 {
    padding-bottom: 0 !important;
}

#themeHeaderSticky {
    top: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
}

/* Navbar Links */
.theme-header-1__main a,
.theme-header-1__main .nav-link,
.theme-header-1__main li > a {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

.theme-header-1__main a:hover,
.theme-header-1__main .nav-link:hover {
    color: var(--sc-amber) !important;
}

/* Navbar innerer Container: "Schwebende Karte" neutralisieren */
#themeHeaderSticky .bg-white.rounded-24,
.theme-header-1__main .bg-white.rounded-24,
.theme-header-1__main .position-relative.z-index-2.bg-white {
    background-color: var(--sc-navy) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 160 !important;
    padding: 8px 16px !important;
}

/* Navbar-Links (Kurse, Veranstaltungen, etc.) sichtbar machen */
.theme-header-1__main .text-dark,
#themeHeaderSticky .text-dark {
    color: #FFFFFF !important;
}

.theme-header-1__main .text-dark:hover,
#themeHeaderSticky .text-dark:hover {
    color: var(--sc-amber) !important;
}

/* Aktiver Menüpunkt: orange (Navbar + Top-Bar) */
.theme-header-1__main .nav-active,
#themeHeaderSticky .nav-active,
.theme-header-1__top-navbar .nav-active,
.theme-header-1__top-navbar .nav-active span,
.theme-header-1__main a.active,
.theme-header-1__main li.active > a,
.theme-header-1__main a[aria-current="page"] {
    color: var(--sc-amber) !important;
    opacity: 1 !important;
}

/* Kategorien-Button Wrapper: Grauer Hintergrund entfernen */
.theme-header-1__main .bg-gray-100,
#themeHeaderSticky .bg-gray-100 {
    background-color: transparent !important;
}

/* "Jetzt starten" Button in Navbar */
.theme-header-1__main .btn-flip-effect.btn.btn-primary,
.theme-header-2__main .btn-flip-effect.btn.btn-primary,
.navbar .btn-flip-effect.btn.btn-primary {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    border-radius: var(--sc-radius) !important;
}

.theme-header-1__main .btn-flip-effect.btn.btn-primary span,
.theme-header-1__main .btn-flip-effect.btn.btn-primary .icons {
    color: var(--sc-navy) !important;
}

.theme-header-1__main .btn-flip-effect.btn.btn-primary::before {
    color: var(--sc-navy) !important;
}

.theme-header-1__main .btn-flip-effect.btn.btn-primary:hover {
    background-color: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}


/* =========================
   §4 – KATEGORIEN-DROPDOWN
   ========================= */
/* Äußerer Dropdown-Container */
.header-1-dropdown-menu {
    background-color: var(--sc-navy) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    z-index: 200 !important;
}

/* Innerer Wrapper: KEINE Border/Shadow (verhindert Doppelrahmen) */
.header-1-dropdown-menu ul,
.header-1-dropdown-menu > ul,
.header-1-dropdown-menu .theme-header-1__categories {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hauptkategorien */
.header-1-dropdown-menu__item {
    background-color: var(--sc-navy) !important;
    border-left: 3px solid transparent !important;
    padding-left: 12px !important;
    transition: border-color 0.15s ease, color 0.15s ease !important;
}

.header-1-dropdown-menu__item a,
.header-1-dropdown-menu__item span,
.header-1-dropdown-menu__item .icons,
.header-1-dropdown-menu__item > div {
    color: rgba(255,255,255,0.85) !important;
    transition: color 0.15s ease !important;
}

.header-1-dropdown-menu__item:hover {
    background-color: var(--sc-hover) !important;
    border-left: 3px solid var(--sc-amber) !important;
}

.header-1-dropdown-menu__item:hover > a,
.header-1-dropdown-menu__item:hover > a span,
.header-1-dropdown-menu__item:hover > a .icons,
.header-1-dropdown-menu__item:hover > div,
.header-1-dropdown-menu__item a:hover {
    color: var(--sc-amber) !important;
}

/* Auth-Dropdown: Dark Theme */
.header-1-dropdown-menu.auth-user-info-dropdown-menu {
    background-color: var(--sc-navy) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
    padding: 8px 0 !important;
}

/* User-Info Kopfbereich */
.auth-user-info-dropdown-menu .bg-gray-100 {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.auth-user-info-dropdown-menu .bg-gray-100 h5,
.auth-user-info-dropdown-menu .bg-gray-100 .font-14 {
    color: #ffffff !important;
}

.auth-user-info-dropdown-menu .bg-gray-100 p,
.auth-user-info-dropdown-menu .bg-gray-100 .text-gray-500,
.auth-user-info-dropdown-menu .bg-gray-100 .font-12 {
    color: var(--sc-blue) !important;
}

.auth-user-info-dropdown-menu .bg-gray-100 .icons {
    color: rgba(255,255,255,0.4) !important;
}

/* Avatar-Kreise */
.auth-user-info-dropdown-menu .bg-white.rounded-circle {
    background-color: rgba(255,255,255,0.08) !important;
}

/* Menu-Items */
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item {
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 4px !important;
    transition: all 0.2s ease !important;
}

.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item a {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item,
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item a,
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item span,
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item .icons {
    color: rgba(255,255,255,0.78) !important;
}

/* Hover: sanfter Hintergrund + Amber-Text */
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover {
    background-color: rgba(255,255,255,0.05) !important;
    border-left-color: var(--sc-amber) !important;
}

.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover a,
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover span,
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover .icons {
    color: var(--sc-amber) !important;
}

/* Abmelden: rot bleibt rot */
.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item .text-danger {
    color: #ef4444 !important;
}

.header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover .text-danger {
    color: #f87171 !important;
}

/* Unterkategorien */
.header-1-dropdown-menu__sub-menu {
    background-color: var(--sc-dropdown) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    z-index: 1000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.header-1-dropdown-menu__item:hover > .header-1-dropdown-menu__sub-menu,
.theme-header-1__dropdown .header-1-dropdown-menu__item:hover .header-1-dropdown-menu__sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.header-1-dropdown-menu__sub-menu li {
    background-color: var(--sc-dropdown) !important;
    border-left: 3px solid transparent !important;
    padding-left: 12px !important;
    transition: border-color 0.15s ease !important;
}

.header-1-dropdown-menu__sub-menu a,
.header-1-dropdown-menu__sub-menu span,
.header-1-dropdown-menu__sub-menu li,
.header-1-dropdown-menu__sub-menu li * {
    color: rgba(255,255,255,0.85) !important;
}

.header-1-dropdown-menu__sub-menu li:hover {
    background-color: var(--sc-hover) !important;
    border-left: 3px solid var(--sc-amber) !important;
}

.header-1-dropdown-menu__sub-menu a:hover,
.header-1-dropdown-menu__sub-menu a:hover span,
.header-1-dropdown-menu__sub-menu li:hover *,
.header-1-dropdown-menu__sub-menu li:hover > a *,
.theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li:hover *,
.theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li:hover > a {
    color: var(--sc-amber) !important;
}

.header-1-dropdown-menu__sub-menu li:hover > a,
.header-1-dropdown-menu__sub-menu li:hover > a span {
    transform: none !important;
}


/* =========================
   §4b – WARENKORB-DRAWER (Cart Drawer)
   ========================= */

/* Drawer Hintergrund */
.cart-drawer {
    background-color: var(--sc-navy) !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: -8px 0 40px rgba(0,0,0,0.5) !important;
}

/* Header-Bereich */
.cart-drawer .border-bottom-gray-bg {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

.cart-drawer .font-weight-bold {
    color: #ffffff !important;
}

/* Schliessen-Button Icon */
.cart-drawer .js-cart-drawer-close .icons,
.cart-drawer .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

.cart-drawer .js-cart-drawer-close:hover .icons {
    color: var(--sc-amber) !important;
}

/* Leerer Warenkorb Text */
.cart-drawer .text-dark,
.cart-drawer h3,
.cart-drawer h4,
.cart-drawer .font-weight-bold {
    color: #ffffff !important;
}

.cart-drawer p,
.cart-drawer .text-gray-500,
.cart-drawer .text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

/* Scrollbar im Drawer */
.cart-drawer .simplebar-scrollbar::before {
    background-color: rgba(255,255,255,0.15) !important;
}

/* Footer-Bereich (Zwischensumme, Warenkorb-Button) */
.cart-drawer__footer {
    border-top-color: rgba(255,255,255,0.08) !important;
    background-color: var(--sc-navy) !important;
}

.cart-drawer__footer .text-dark {
    color: #ffffff !important;
}

.cart-drawer__footer .btn-outline-primary {
    border-color: var(--sc-amber) !important;
    color: var(--sc-amber) !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cart-drawer__footer .btn-outline-primary:hover {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.3) !important;
}

/* Overlay hinter Drawer */
.cart-drawer-mask {
    background-color: rgba(0,0,0,0.6) !important;
}


/* =========================
   §5 – HERO SECTION
   ========================= */
.two-columns-hero-section {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2D4A 100%) !important;
    height: auto !important;
    padding-bottom: 80px !important;
}

/* Hero Texte weiß */
.two-columns-hero-section h1,
.two-columns-hero-section h1 span,
.two-columns-hero-section h1 div,
.two-columns-hero-section h2,
.two-columns-hero-section h3,
.two-columns-hero-section p,
.two-columns-hero-section .font-16,
.two-columns-hero-section__content,
.two-columns-hero-section__content span,
.two-columns-hero-section__content div,
.two-columns-hero-section__content h5 {
    color: #FFFFFF !important;
}

/* Hervorgehobene Wörter in Amber */
.two-columns-hero-section .text-primary,
.two-columns-hero-section .js-two-columns-hero-highlight-words-card {
    color: var(--sc-amber) !important;
}

/* Hero Badge "NEU: Live-Klassen inklusive" */
.two-columns-hero-section .border-2.border-dark,
.two-columns-hero-section .d-inline-flex.rounded-32 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

.two-columns-hero-section .border-2.border-dark .bg-primary,
.two-columns-hero-section .border-2.border-dark .rounded-16.bg-primary {
    background: transparent !important;
    padding: 0 !important;
}

.two-columns-hero-section .border-2.border-dark span,
.two-columns-hero-section .border-2.border-dark .font-14 {
    color: var(--sc-amber) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

.two-columns-hero-section .border-2.border-dark .icons.two-columns-hero-section__upper-cta-badge-icon {
    display: none !important;
}

.two-columns-hero-section .border-2.border-dark > .icons.text-dark,
.two-columns-hero-section .d-inline-flex.rounded-32 > .icons {
    color: var(--sc-amber) !important;
}

.two-columns-hero-section .border-2.border-dark:hover span,
.two-columns-hero-section .border-2.border-dark:hover .font-14,
.two-columns-hero-section a:hover > .border-2.border-dark span {
    color: #FFFFFF !important;
}

/* Hero Primary Button (Kurse entdecken) – Amber fuer Waerme & Einladung */
.two-columns-hero-section .btn-flip-effect.btn.btn-primary {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    border-radius: var(--sc-radius) !important;
    color: var(--sc-navy) !important;
}

.two-columns-hero-section .btn-flip-effect.btn.btn-primary:hover {
    background-color: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

.two-columns-hero-section .btn-flip-effect.btn.btn-primary span,
.two-columns-hero-section .btn-flip-effect.btn.btn-primary::before {
    color: var(--sc-navy) !important;
}

/* Hero Secondary Button (Meeting buchen) */
.two-columns-hero-section .btn-flip-effect.btn-flip-effect__text-dark,
.two-columns-hero-section .btn-flip-effect__text-dark {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: var(--sc-radius) !important;
    color: #FFFFFF !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.two-columns-hero-section .btn-flip-effect__text-dark span,
.two-columns-hero-section .btn-flip-effect__text-dark .btn-flip-effect__text,
.two-columns-hero-section .btn-flip-effect__text-dark .text-dark {
    color: #FFFFFF !important;
}

.two-columns-hero-section .btn-flip-effect__text-dark::before {
    color: #FFFFFF !important;
}

.two-columns-hero-section .btn-flip-effect__text-dark:hover {
    background: #1A2A3F !important;
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow: none !important;
}

.two-columns-hero-section .btn-flip-effect__text-dark:active,
.two-columns-hero-section .btn-flip-effect__text-dark:focus,
.two-columns-hero-section .btn-flip-effect__text-dark:focus-visible {
    background: #1A2A3F !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    outline: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

.two-columns-hero-section .btn-flip-effect__text-dark:active span,
.two-columns-hero-section .btn-flip-effect__text-dark:focus span {
    color: #FFFFFF !important;
}

/* Hero Secondary Button (Custom-Klasse) */
.hero-btn-secondary {
    background: var(--sc-surface-input) !important;
    border: 1px solid #2A3D52 !important;
    color: #FFFFFF !important;
    padding: 14px 26px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s ease, border-color 0.25s ease !important;
    text-decoration: none !important;
}

.hero-btn-secondary:hover {
    background: #1C3147 !important;
    border-color: #3B4F66 !important;
    color: #FFFFFF !important;
}

/* Hero Students Widget */
.two-columns-hero-section .bg-gray-400-20 {
    border-radius: var(--sc-radius-lg) !important;
}

.two-columns-hero-section .bg-white,
.two-columns-hero-section .rounded-24.bg-white {
    border-radius: var(--sc-radius-lg) !important;
}


/* =========================
   §6 – HERO KURS-KARTEN (rechte Spalte)
   ========================= */
.hero-courses-stack {
    position: relative;
    z-index: 1;
    justify-content: flex-start !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
}

.hero-course-card {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    /* backdrop-filter entfernt: kein visueller Effekt auf opakem Hintergrund, spart GPU */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

.hero-course-card:hover {
    background: #1C2D42 !important;
    border-color: #2A3D52 !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

.hero-course-card__title {
    font-weight: 600 !important;
    color: #FFFFFF !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-course-card__thumb img {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.hero-course-card__badge {
    display: inline-block !important;
    background: rgba(245,158,11,0.15) !important;
    color: var(--sc-amber) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.hero-course-card__price span {
    color: var(--sc-amber) !important;
    font-weight: 700 !important;
}

.hero-course-card__content {
    min-width: 0 !important;
}

/* Glow hinter den Karten */
.hero-courses-stack::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(91,141,239,0.12) 0%, rgba(91,141,239,0.04) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}


/* =========================
   §7 – HERO SPACING & SPACER
   ========================= */
/* 80px Spacer entfernen (zwischen Hero und Statistik) */
div.position-relative.d-flex[style*="height: 80px"],
div.position-relative.d-flex[style*="height:80px"] {
    height: 0 !important;
    display: none !important;
}

/* Hero Content Abstände */
.two-columns-hero-section__content {
    padding-top: 60px !important;
}

.two-columns-hero-section__images-side {
    padding-top: 80px !important;
    margin-top: 0 !important;
    align-self: flex-start !important;
}

.two-columns-hero-section .hero-courses-stack {
    padding-top: 60px !important;
}

/* Hero Row: beide Spalten oben ausrichten */
.two-columns-hero-section .row,
.two-columns-hero-section > .container > .row {
    align-items: flex-start !important;
}


/* =========================
   §8 – STATISTIK-BEREICH
   ========================= */
.statistics-section {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.statistics-section__contents {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 60px 0 !important;
}

.statistics-section__mask {
    display: none !important;
}

/* Zahlen in Amber */
.statistics-section__counter-value {
    color: var(--sc-amber) !important;
    font-weight: 700 !important;
    font-family: "Sora", sans-serif !important;
}

/* Labels in gedämpftem Weiß */
.statistics-section .text-dark,
.statistics-section .text-gray-500,
.statistics-section .font-16,
.statistics-section .statistic-col span:not(.statistics-section__counter-value),
.statistics-section p {
    color: rgba(255,255,255,0.8) !important;
}

.statistics-section h3,
.statistics-section h4,
.statistics-section .section-title__heading {
    color: #FFFFFF !important;
}

/* Icon-Kreise */
.statistics-section__icon-1,
.statistics-section__icon-2,
.statistics-section__icon-3,
.statistics-section__icon-4 {
    border: 2px solid rgba(255,255,255,0.15) !important;
}

.statistics-section__icon-1 { background-color: var(--sc-blue) !important; }
.statistics-section__icon-2 { background-color: var(--sc-emerald) !important; }
.statistics-section__icon-3 { background-color: var(--sc-amber) !important; }
.statistics-section__icon-4 { background-color: var(--sc-navy) !important; }

.statistics-section__icon-1 .icons,
.statistics-section__icon-2 .icons,
.statistics-section__icon-3 .icons,
.statistics-section__icon-4 .icons {
    color: #FFFFFF !important;
}


/* =========================
   §9 – SECTION-TITLES
   ========================= */
.section-title__heading {
    color: var(--sc-navy) !important;
    font-family: "Sora", sans-serif !important;
    font-weight: 700 !important;
}

.section-title__description {
    color: var(--sc-slate) !important;
}


/* =========================
   §10 – BUTTONS (GLOBAL)
   ========================= */
.btn-primary {
    background-color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
    border-radius: var(--sc-radius) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover {
    background-color: var(--sc-blue-hover) !important;
    border-color: var(--sc-blue-hover) !important;
}

.btn-outline-primary {
    color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
    border-radius: var(--sc-radius) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.btn-outline-primary:hover {
    background-color: var(--sc-blue) !important;
    color: #FFFFFF !important;
}


/* =========================
   §11 – KURS-KARTEN
   ========================= */
.course-grid-card-1 {
    background-color: #FFFFFF !important;
    border-radius: var(--sc-radius-lg) !important;
    box-shadow: 0 1px 3px rgba(13,27,42,0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden;
}

.course-grid-card-1:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(13,27,42,0.12) !important;
}

.course-grid-card-1__image img {
    border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0 !important;
}

/* Preise */
.course-grid-card-1__body .font-weight-bold,
.course-grid-card-1__body .price,
.course-grid-card-1 .font-weight-bold {
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.course-grid-card-1__body .text-decoration-line-through,
.course-grid-card-1 .text-decoration-line-through {
    color: var(--sc-slate) !important;
}


/* =========================
   §12 – BADGES & STERNE
   ========================= */
.badge-primary,
.course-grid-card-1 .badge,
.badge {
    border-radius: 6px !important;
}

.course-grid-card-1 .text-warning,
.rating-stars .icons,
.stars .icons {
    color: var(--sc-amber) !important;
}


/* =========================
   §13 – TRENDING CATEGORIES
   ========================= */
.trending-categories-section__item-card {
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

.trending-categories-section__item-card:hover {
    border-left: 3px solid var(--sc-amber) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(13,27,42,0.1) !important;
}

.trending-categories-section__item-card-mask {
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
}


/* =========================
   §14 – NEWSLETTER-BEREICH
   ========================= */
.theme-footer-1__newsletter {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    background-color: transparent !important;
}

.theme-footer-1.has-newsletter .theme-footer-1__section {
    padding-top: 40px !important;
}

.theme-footer-1__newsletter > .container {
    max-width: none !important;
    padding: 0 !important;
}

/* Innerer Wrapper */
.theme-footer-1__newsletter .position-relative.z-index-2.bg-white,
.theme-footer-1__newsletter .bg-white.p-16.rounded-24 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
    padding: 18px 22px !important;
    border-radius: 16px !important;
}

.theme-footer-1__newsletter-mask {
    display: none !important;
}

/* Newsletter Row → horizontal flex */
.theme-footer-1__newsletter .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Bootstrap-Col aufheben für Inline-Layout */
.theme-footer-1__newsletter .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.theme-footer-1__newsletter .row > [class*="col-"]:first-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-right: 10px !important;
}

/* Newsletter Texte */
.theme-footer-1__newsletter h4,
.theme-footer-1__newsletter .font-20 {
    color: #FFFFFF !important;
    font-size: 16px !important;
    margin-bottom: 2px !important;
}

.theme-footer-1__newsletter .text-gray-500,
.theme-footer-1__newsletter .font-14 {
    color: rgba(255,255,255,0.78) !important;
    margin-top: 0 !important;
}

/* Newsletter Formular */
.theme-footer-1__newsletter .newsletter-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.theme-footer-1__newsletter .newsletter-form .form-group {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.theme-footer-1__newsletter .newsletter-form .d-flex.align-items-center.gap-8 {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
    height: 56px !important;
}

/* Newsletter Input: linksbündig */
.theme-footer-1__newsletter .newsletter-form .d-flex.align-items-center.gap-8 input,
.theme-footer-1__newsletter input[type="email"],
.theme-footer-1__newsletter input.js-ajax-newsletter_email {
    height: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--sc-text) !important;
    flex: 1 !important;
    display: block !important;
    text-align: left !important;
    direction: ltr !important;
    width: 100% !important;
}

.theme-footer-1__newsletter .newsletter-form input::placeholder,
.theme-footer-1__newsletter input::placeholder {
    text-align: left !important;
}

/* Newsletter Container: text-align left */
.theme-footer-1__newsletter,
.theme-footer-1__newsletter .container,
.theme-footer-1__newsletter .bg-white,
.theme-footer-1__newsletter .row,
.theme-footer-1__newsletter [class*="col-"],
.theme-footer-1__newsletter .newsletter-form,
.theme-footer-1__newsletter .form-group,
.theme-footer-1__newsletter .newsletter-form > div {
    text-align: left !important;
}

.theme-footer-1__newsletter .newsletter-form .d-flex {
    justify-content: flex-start !important;
}

/* Newsletter Button */
.theme-footer-1__newsletter .newsletter-form .btn,
.theme-footer-1__newsletter .btn-primary,
.theme-footer-1__newsletter button[type="submit"] {
    height: 56px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    background-color: var(--sc-amber) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: none !important;
    white-space: nowrap !important;
}

.theme-footer-1__newsletter .newsletter-form .btn:hover,
.theme-footer-1__newsletter .btn-primary:hover {
    background-color: var(--sc-amber-hover) !important;
}


/* =========================
   §15 – BLOG-KARTEN
   ========================= */
.blog-section__post-card {
    border-radius: var(--sc-radius-lg) !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-section__post-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(13,27,42,0.12) !important;
}


/* =========================
   §16 – FOOTER
   ========================= */
.theme-footer-1__section,
.theme-footer-1__section-bg-wrapper,
.theme-footer-1__bottom-section-divider {
    background-color: var(--sc-navy) !important;
}

.theme-footer-1__section a,
.theme-footer-1__section span,
.theme-footer-1__section p,
.theme-footer-1__section h5,
.theme-footer-1__section .icons,
.theme-footer-1__bottom-section-divider a,
.theme-footer-1__bottom-section-divider span,
.theme-footer-1__bottom-section-divider p {
    color: #FFFFFF !important;
}

.theme-footer-1__section a,
.theme-footer-1__bottom-section-divider a {
    transition: color 0.2s ease !important;
}

.theme-footer-1__section a:not(.btn):not(.btn-flip-effect):hover,
.theme-footer-1__section a:not(.btn):not(.btn-flip-effect):hover span,
.theme-footer-1__bottom-section-divider a:not(.btn):not(.btn-flip-effect):hover,
.theme-footer-1__bottom-section-divider a:not(.btn):not(.btn-flip-effect):hover span {
    color: var(--sc-amber) !important;
    opacity: 1 !important;
}


/* =========================
   §17 – SCROLLBAR
   ========================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--sc-offwhite);
}
::-webkit-scrollbar-thumb {
    background: var(--sc-slate);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sc-navy);
}


/* =========================
   §18 – AUTH-SEITEN (LOGIN / REGISTER) – Dark Design
   ========================= */

/* Wrapper: naeher am Header, weniger Leerraum */
.login-page-wrapper {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    margin-bottom: 40px !important;
}

/* Auth Card: Dark Background */
.auth-page-card {
    border-radius: 32px !important;
    overflow: visible !important;
    background: var(--sc-surface) !important;
    height: auto !important;
}

/* Internen Scrollbalken entfernen (auth/theme_1.min.css setzt height:387px + overflow-y:auto) */
.auth-page-form-container {
    height: auto !important;
    overflow: visible !important;
    color: rgba(255,255,255,0.85) !important;
}

.auth-page-card > .position-relative.bg-white.rounded-32,
.auth-page-card > .position-relative.bg-white,
.auth-page-card .bg-white {
    background: var(--sc-surface) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
    border-radius: 32px !important;
}

/* Mask: komplett ausblenden */
.auth-page-card__mask,
.auth-page-card__mask::before,
.auth-page-card__mask::after {
    display: none !important;
}

/* Illustration / Slider: Dark Design */
.auth-page-card .auth-slider-container,
.auth-slider-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--sc-surface-deep) !important;
    background-image: none !important;
    border-radius: 16px !important;
}

.auth-slider-container .swiper-slide {
    background: transparent !important;
}

.auth-slider-container .auth-slider-image {
    background: transparent !important;
}

/* Slider Text */
.auth-slider-container h3,
.auth-slider-container h4,
.auth-slider-container .font-weight-bold {
    color: #ffffff !important;
}

.auth-slider-container p,
.auth-slider-container span,
.auth-slider-container .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Slider Pagination Dots */
.auth-theme-slider-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3) !important;
    opacity: 1 !important;
}

.auth-theme-slider-pagination .swiper-pagination-bullet-active {
    background: var(--sc-blue) !important;
}

/* Textfarben: weiß auf dunkel */
.auth-page-card h1,
.auth-page-card h2,
.auth-page-card h3 {
    font-weight: 700 !important;
    color: #ffffff !important;
}

.auth-page-card p,
.auth-page-card span,
.auth-page-card div,
.auth-page-card .font-16,
.auth-page-card .font-14,
.auth-page-card .font-12,
.auth-page-card .font-weight-bold,
.auth-page-card .text-dark {
    color: #ffffff !important;
}

.auth-page-card .text-gray-500,
.auth-page-card .text-gray-400 {
    color: rgba(255,255,255,0.5) !important;
}

/* Labels: klein, absolut positioniert im Input */
.auth-page-card .form-group-label {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.78) !important;
    position: absolute !important;
    top: 8px !important;
    left: 16px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Radio-Labels (E-Mail/Telefon Tabs) bleiben normal */
.auth-page-card .auth-register-method-item label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    font-size: inherit !important;
    pointer-events: auto !important;
}

/* Rocket Label-Box entfernen */
.auth-page-card .input-group-text {
    display: none !important;
}

/* Auth Formulare */
.auth-page-card form {
    width: 100% !important;
    margin-top: 10px !important;
}

.auth-page-card .form-group {
    position: relative !important;
    margin-bottom: 20px !important;
}

/* Input-Felder: Dark Design mit Platz für Label oben */
.auth-page-card input.form-control,
.auth-page-card input[type="email"],
.auth-page-card input[type="password"],
.auth-page-card input[type="text"],
.auth-page-card input[type="tel"] {
    height: 54px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    padding: 22px 16px 8px 16px !important;
    transition: all 0.25s ease !important;
}

/* Select-Felder: Dark Design */
.auth-page-card select.form-control,
.auth-page-card .form-control:not(input) {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
}

.auth-page-card input.form-control::placeholder,
.auth-page-card .form-control::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* Input Fokus */
.auth-page-card input.form-control:focus,
.auth-page-card .form-control:focus {
    border-color: var(--sc-blue-focus) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
    outline: none !important;
    background: var(--sc-surface-focus) !important;
    color: #ffffff !important;
}

/* Password Toggle Icon */
.auth-page-card .password-input-visibility .icons,
.auth-page-card .icons-eye,
.auth-page-card .icons-eye-slash {
    color: rgba(255,255,255,0.5) !important;
}

/* Auth Buttons */
.auth-page-card .btn {
    height: 54px !important;
    border-radius: 14px !important;
    transition: all 0.25s ease !important;
}

.auth-page-card .btn-primary {
    font-weight: 600 !important;
    box-shadow:
        0 10px 25px rgba(59,130,246,0.4),
        0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Button Hover */
.auth-page-card .btn-primary:hover,
.auth-page-card button.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 14px 30px rgba(59,130,246,0.45),
        0 4px 8px rgba(0,0,0,0.12) !important;
}

/* Auth Links: Amber-Farbe */
.auth-page-card a:not(.btn) {
    color: var(--sc-amber) !important;
}

.auth-page-card a:not(.btn):hover {
    color: var(--sc-amber-hover) !important;
}

/* Auth Tabs & Rollen-Buttons (Teilnehmer / Dozent / Organisation) */
.auth-page-card .auth-register-method-item label {
    border-radius: 12px !important;
    color: rgba(255,255,255,0.78) !important;
    background-color: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
}

.auth-page-card .auth-register-method-item label:hover {
    background-color: var(--sc-surface-focus) !important;
    color: var(--sc-amber) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.auth-page-card .auth-register-method-item input:checked ~ label {
    background: var(--sc-blue) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    border-color: var(--sc-blue) !important;
}

/* Rollen-Container */
.auth-page-card .d-flex.align-items-center.gap-4.p-4.rounded-12.border-gray-300 {
    border-color: rgba(255,255,255,0.08) !important;
    background: var(--sc-surface) !important;
    border-radius: 12px !important;
}

/* Tab-Container Border */
.auth-page-card .border-gray-300 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Social Login Buttons */
.auth-page-card .bg-gray-100 {
    background-color: rgba(255,255,255,0.05) !important;
}

.auth-page-card .border-gray-200 {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Validation Feedback */
.auth-page-card .invalid-feedback {
    color: var(--sc-error) !important;
}

/* Select / Dropdown: Dark Design */
.auth-page-card select,
.auth-page-card select.form-control {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    height: 54px !important;
    padding: 22px 16px 8px 16px !important;
}

.auth-page-card select:focus {
    background: var(--sc-surface-focus) !important;
    border-color: var(--sc-blue-focus) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
}

.auth-page-card select option {
    background: var(--sc-surface);
    color: #ffffff;
}

/* Select2 Container: Dark Design */
.auth-page-card .select2-container .select2-selection {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    height: 54px !important;
    color: #ffffff !important;
}

.auth-page-card .select2-container .select2-selection__rendered {
    color: #ffffff !important;
    padding-top: 14px !important;
}

/* Select2 Dropdown – GLOBAL (Select2 rendert Dropdowns unter <body>, nicht im Eltern-Container) */
.select2-container--open .select2-dropdown {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.select2-results__option {
    color: rgba(255,255,255,0.85) !important;
    background: var(--sc-surface) !important;
    padding: 10px 14px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.select2-results__option--highlighted,
.select2-results__option:hover {
    background: var(--sc-surface-hover) !important;
    color: var(--sc-amber) !important;
}

/* Ausgewaehlter Eintrag */
.select2-results__option[aria-selected="true"] {
    background: rgba(91,141,239,0.15) !important;
    color: var(--sc-blue-focus) !important;
}

.select2-results__options {
    max-height: 260px !important;
    overflow-y: auto !important;
}

/* Scrollbar im Dropdown */
.select2-results__options::-webkit-scrollbar {
    width: 6px !important;
}

.select2-results__options::-webkit-scrollbar-track {
    background: transparent !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 3px !important;
}

/* Suchfeld im Dropdown */
.select2-search--dropdown .select2-search__field {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--sc-blue-focus) !important;
    outline: none !important;
}

/* Dropdown-Container z-index */
.select2-container--open {
    z-index: 9999 !important;
}

/* Optgroup-Labels (Kategorien mit Unterkategorien) */
.select2-results__group {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 700 !important;
    padding: 8px 14px 4px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Checkbox: Dark Design */
.auth-page-card .custom-control-input ~ .custom-control__label::before {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    background: var(--sc-surface-input) !important;
}

.auth-page-card .custom-control-input:checked ~ .custom-control__label::before {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

.auth-page-card .custom-control__label {
    color: rgba(255,255,255,0.78) !important;
}


.auth-page-form-container .simplebar-scrollbar::before {
    background: rgba(255,255,255,0.2) !important;
}

/* Captcha: Dark Design */
.auth-page-card .captcha-image-card {
    background: var(--sc-surface-input) !important;
    border-radius: 8px !important;
}

.auth-page-card #refreshCaptcha {
    background: var(--sc-surface-input) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.auth-page-card #refreshCaptcha:hover {
    background: var(--sc-surface-focus) !important;
}

.auth-page-card #refreshCaptcha .icons {
    color: rgba(255,255,255,0.68) !important;
}

/* Phone Input (register-mobile) */
.auth-page-card .register-mobile-form-group__input {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    height: 54px !important;
    padding: 22px 16px 8px 16px !important;
}

.auth-page-card .register-mobile-form-group__input:focus {
    background: var(--sc-surface-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}


/* =========================
   §19 – MOBILE OVERRIDES
   ========================= */
@media (max-width: 991px) {
    /* Hero */
    .two-columns-hero-section {
        padding-bottom: 60px !important;
    }
    .two-columns-hero-section__content {
        padding-top: 70px !important;
    }
    .two-columns-hero-section__images-side {
        padding-top: 20px !important;
    }
    .two-columns-hero-section .hero-courses-stack {
        padding-top: 20px !important;
    }
    .hero-course-card:hover {
        transform: translateX(2px) !important;
    }
    .course-grid-card-1:hover,
    .blog-section__post-card:hover {
        transform: translateY(-2px) !important;
    }

    /* Newsletter */
    .theme-footer-1__newsletter .row {
        flex-wrap: wrap !important;
    }
    .theme-footer-1__newsletter .row > [class*="col-"]:first-child {
        white-space: normal !important;
    }
    .theme-footer-1__newsletter .newsletter-form {
        width: 100% !important;
    }

    /* Auth */
    .login-page-wrapper {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-bottom: 40px !important;
    }
}

@media (max-width: 768px) {
    /* Header */
    .theme-header-1__main {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    /* Logo */
    .theme-header-1__logo img {
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    .theme-header-1__logo {
        min-width: 140px !important;
    }
    .theme-header-1__logo a,
    .theme-header-1__logo span {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    /* Auth */
    .auth-page-card {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================
   §19b – MOBILE HEADER & MENU DRAWER (Dark Theme)
   Rocket LMS uses a completely separate mobile header component
   (.theme-header-mobile) that replaces .theme-header-1 on small screens.
   ========================= */

/* --- Mobile Header: All bg-white sections → dark --- */
.theme-header-mobile .bg-white,
.theme-header-mobile > .d-flex.bg-white {
    background-color: var(--sc-navy) !important;
}

/* Border between sections */
.theme-header-mobile .border-top-gray-200,
.theme-header-mobile .border-bottom-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Search input */
.theme-header-mobile__search-form .form-control {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
}

.theme-header-mobile__search-form .form-control::placeholder {
    color: rgba(255,255,255,0.58) !important;
}

.theme-header-mobile__search-form .search-icon .icons {
    color: rgba(255,255,255,0.5) !important;
}

/* Icon buttons (language, currency, cart, dark mode toggle) */
.theme-header-mobile .bg-gray-100 {
    background-color: var(--sc-surface-input) !important;
}

.theme-header-mobile .text-gray-500,
.theme-header-mobile .text-gray-400 {
    color: rgba(255,255,255,0.78) !important;
}

.theme-header-mobile .icons.text-gray-500,
.theme-header-mobile .icons.text-gray-400 {
    color: rgba(255,255,255,0.68) !important;
}

/* Dark mode toggle border */
.theme-header-mobile .theme-color-toggle {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Text dark in mobile header */
.theme-header-mobile .text-dark {
    color: #ffffff !important;
}

/* Hamburger menu button border */
.theme-header-mobile .border-gray-300 {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Logo area */
.theme-header-mobile__logo img {
    max-height: 32px !important;
}

/* Dot separator between login/register */
.theme-header-mobile__dot-separator {
    background: rgba(255,255,255,0.3) !important;
}

/* --- Mobile Menu Drawer (slide-out) --- */
.theme-header-mobile__main-menu-drawer,
.mobile-main-menu-drawer {
    background-color: var(--sc-navy) !important;
}

.theme-header-mobile__main-menu-drawer .bg-white,
.mobile-main-menu-drawer .bg-white {
    background-color: var(--sc-navy) !important;
}

.theme-header-mobile__main-menu-drawer .border-bottom-gray-200,
.theme-header-mobile__main-menu-drawer .border-top-gray-200,
.mobile-main-menu-drawer .border-bottom-gray-200,
.mobile-main-menu-drawer .border-top-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Close button */
.theme-header-mobile__main-menu-drawer .border-gray-300,
.mobile-main-menu-drawer .border-gray-300 {
    border-color: rgba(255,255,255,0.12) !important;
}

.theme-header-mobile__main-menu-drawer .close-icon,
.mobile-main-menu-drawer .close-icon {
    color: rgba(255,255,255,0.68) !important;
}

/* User info in drawer */
.theme-header-mobile__main-menu-drawer .text-dark,
.mobile-main-menu-drawer .text-dark {
    color: #ffffff !important;
}

.theme-header-mobile__main-menu-drawer .text-gray-500,
.mobile-main-menu-drawer .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.theme-header-mobile__main-menu-drawer .bg-gray-100,
.mobile-main-menu-drawer .bg-gray-100 {
    background-color: var(--sc-surface-input) !important;
}

/* Tabs (Kategorien / Links) */
.theme-header-mobile__main-menu-drawer .custom-tabs,
.mobile-main-menu-drawer .custom-tabs {
    color: rgba(255,255,255,0.85) !important;
}

.theme-header-mobile__main-menu-drawer .tab-toggle-item,
.mobile-main-menu-drawer .tab-toggle-item {
    color: rgba(255,255,255,0.68) !important;
}

.theme-header-mobile__main-menu-drawer .tab-toggle-item.active,
.mobile-main-menu-drawer .tab-toggle-item.active {
    color: var(--sc-amber) !important;
}

.theme-header-mobile__main-menu-drawer .tab-toggle-item-separator {
    background: rgba(255,255,255,0.1) !important;
}

/* Category/link items in drawer */
.theme-header-mobile__main-menu-drawer .custom-tabs-content a,
.mobile-main-menu-drawer .custom-tabs-content a {
    color: rgba(255,255,255,0.78) !important;
}

.theme-header-mobile__main-menu-drawer .custom-tabs-content a:hover,
.mobile-main-menu-drawer .custom-tabs-content a:hover {
    color: var(--sc-amber) !important;
}

/* Bottom button in drawer */
.theme-header-mobile__main-menu-drawer .btn-primary,
.mobile-main-menu-drawer .btn-primary {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

.theme-header-mobile__main-menu-drawer .btn-primary span,
.mobile-main-menu-drawer .btn-primary span {
    color: var(--sc-navy) !important;
}

/* Arrow icon */
.theme-header-mobile__main-menu-drawer .icons.text-gray-500,
.mobile-main-menu-drawer .icons.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Other Mobile Drawer Panels (language, currency, auth-user) --- */
.theme-header-mobile__language-drawer,
.theme-header-mobile__currency-drawer,
.theme-header-mobile__auth-user-drawer {
    background-color: var(--sc-navy) !important;
}

.theme-header-mobile__language-drawer .bg-white,
.theme-header-mobile__currency-drawer .bg-white,
.theme-header-mobile__auth-user-drawer .bg-white {
    background-color: var(--sc-navy) !important;
}

.theme-header-mobile__language-drawer .text-dark,
.theme-header-mobile__currency-drawer .text-dark,
.theme-header-mobile__auth-user-drawer .text-dark {
    color: #ffffff !important;
}

.theme-header-mobile__language-drawer .text-gray-500,
.theme-header-mobile__currency-drawer .text-gray-500,
.theme-header-mobile__auth-user-drawer .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.theme-header-mobile__language-drawer .border-bottom-gray-200,
.theme-header-mobile__currency-drawer .border-bottom-gray-200,
.theme-header-mobile__auth-user-drawer .border-bottom-gray-200,
.theme-header-mobile__language-drawer .border-gray-300,
.theme-header-mobile__currency-drawer .border-gray-300,
.theme-header-mobile__auth-user-drawer .border-gray-300 {
    border-color: rgba(255,255,255,0.08) !important;
}

.theme-header-mobile__language-drawer .bg-gray-100,
.theme-header-mobile__currency-drawer .bg-gray-100,
.theme-header-mobile__auth-user-drawer .bg-gray-100 {
    background-color: var(--sc-surface-input) !important;
}

/* Auth page: prevent horizontal overflow on mobile */
@media (max-width: 768px) {
    .auth-page-card,
    .login-page-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .auth-page-card .btn,
    .auth-page-card .form-control,
    .auth-page-card input {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .auth-page-card .auth-slider-container {
        display: none !important;
    }
}


/* =========================
   §20 – COURSES PAGE
   ========================= */

/* --- Globaler Override: alle bg-white innerhalb Kursseite --- */
.courses-lists-hero ~ .container .bg-white,
.courses-lists-header .bg-white,
.courses-lists-header .bg-white.rounded-32,
.courses-lists-filters .bg-white,
.courses-lists-filters .bg-white.rounded-24,
.courses-lists-filters .bg-white.px-24,
#leftFiltersAccordion.bg-white,
.courses-lists-header .position-relative.bg-white,
.courses-lists-filters .position-relative.bg-white {
    background: var(--sc-surface) !important;
    background-color: var(--sc-surface) !important;
    color: #ffffff !important;
}

/* Auch .card und generische weiße Panels abfangen */
.courses-lists-filters .card,
.courses-lists-header .card {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* Alle body-Bereiche transparent */
.courses-lists-filters .card-body,
.courses-lists-filters .accordion-body,
.courses-lists-filters .collapse,
.courses-lists-filters .collapsing {
    background: transparent !important;
}

/* --- Hero Banner --- */
.courses-lists-hero {
    background: var(--sc-surface-deep) !important;
    margin-top: -140px !important;
}

.courses-lists-hero__mask {
    background: linear-gradient(180deg, rgba(15,34,54,0.75) 0%, var(--sc-surface-deep) 100%) !important;
    pointer-events: none !important;
}


/* Gesamtes Filter-Formular über allen Overlays */
.js-get-view-data-by-timeout-change {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* Filter-Bar über allen Overlays */
.courses-lists-filters {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* Alle Overlays/Masks dürfen keine Klicks blockieren */
.courses-lists-hero__mask,
.courses-lists-header__mask {
    pointer-events: none !important;
}

/* Alle Filter-Inputs klickbar */
.courses-lists-filters input,
.courses-lists-filters select,
.courses-lists-filters label,
.courses-lists-filters button,
.courses-lists-filters .custom-control-label,
.courses-lists-filters .custom-control__label,
.courses-lists-filters .select2-container {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Grid/List View Buttons */
.courses-lists-card-view {
    position: relative !important;
    z-index: 10 !important;
}

.courses-lists-card-view label {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.courses-lists-card-view input {
    pointer-events: auto !important;
}

/* --- Header Card --- */
.courses-lists-header .bg-white {
    background: var(--sc-surface) !important;
    color: #ffffff !important;
    border-radius: 32px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
}

.courses-lists-header__mask {
    display: none !important;
}

/* Beschreibungstext größer */
.courses-lists-header div.font-12 {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Breadcrumb Text */
.courses-lists-header .text-gray-500 {
    font-size: 14px !important;
    color: rgba(255,255,255,0.5) !important;
}

.courses-lists-header h1 {
    color: #ffffff !important;
}

.courses-lists-header a.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

.courses-lists-header a.text-gray-500:hover {
    color: var(--sc-amber) !important;
}

.courses-lists-header .bg-primary-30 {
    background: rgba(59,130,246,0.15) !important;
}

/* --- Sidebar & Top Filter Bar: Haupt-Container --- */
.courses-lists-filters .bg-white,
.courses-lists-filters .bg-white.rounded-24,
.courses-lists-filters > .bg-white,
.courses-lists-filters > .bg-white.rounded-24,
#leftFiltersAccordion.bg-white,
#leftFiltersAccordion.bg-white.rounded-24 {
    background: var(--sc-surface) !important;
    background-color: var(--sc-surface) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
}

/* Auch den äußeren Wrapper absichern */
.courses-lists-filters {
    color: #ffffff !important;
}

.courses-lists-filters__mask {
    display: none !important;
}

/* --- Sidebar: Accordion Gruppen --- */
.courses-lists-filters .accordion {
    background: transparent !important;
}

.courses-lists-filters .accordion__title {
    background: transparent !important;
}

.courses-lists-filters .accordion__collapse {
    background: transparent !important;
}

/* Accordion Borders */
.courses-lists-filters .border-bottom-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

/* Accordion Seitenlinien: subtiler auf dunkel */
.courses-lists-filters .card-before-line::before {
    background-color: rgba(59,130,246,0.4) !important;
}

/* Jede weiße/graue Background-Utility innerhalb der Filter */
.courses-lists-filters .bg-gray-100,
.courses-lists-filters .bg-gray-200 {
    background: rgba(255,255,255,0.04) !important;
}

/* --- Sidebar Texte: Lesbarkeit --- */
.courses-lists-filters label {
    color: rgba(255,255,255,0.85) !important;
}

.courses-lists-filters h4,
.courses-lists-filters .font-14,
.courses-lists-filters .text-dark,
.courses-lists-filters .font-weight-bold {
    color: #ffffff !important;
}

.courses-lists-filters span {
    color: rgba(255,255,255,0.85) !important;
}

.courses-lists-filters .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.courses-lists-filters .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

/* Icons in Filters */
.courses-lists-filters .icons {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Accordion Toggle Buttons --- */
.courses-lists-filters .accordion__title [role="button"] {
    color: #ffffff !important;
}

.courses-lists-filters .collapse-arrow-icon .icons {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Hover-Effekte (amber) – shared §20/§21 --- */

/* Alle Links in Filtern */
.courses-lists-filters a:hover,
.events-lists-filters a:hover,
.instructor-finder__top-filters a:hover,
.instructor-finder__filters-card a:hover {
    color: var(--sc-amber) !important;
}

/* Accordion-Titel */
.courses-lists-filters .accordion__title [role="button"]:hover,
.events-lists-filters .accordion__title [role="button"]:hover,
.instructor-finder__filters-card .accordion__title [role="button"]:hover {
    color: var(--sc-amber) !important;
}

.courses-lists-filters .accordion__title .cursor-pointer:hover,
.events-lists-filters .accordion__title .cursor-pointer:hover,
.instructor-finder__filters-card .accordion__title .cursor-pointer:hover {
    color: var(--sc-amber) !important;
}

/* Collapse-Pfeil-Icons */
.courses-lists-filters .collapse-arrow-icon:hover .icons,
.events-lists-filters .collapse-arrow-icon:hover .icons,
.instructor-finder__filters-card .collapse-arrow-icon:hover .icons {
    color: var(--sc-amber) !important;
}

/* Top-Filter Toggle-Labels */
.courses-lists-filters .form-group:hover label.cursor-pointer,
.events-lists-filters .form-group:hover label.cursor-pointer,
.instructor-finder__top-filters .form-group:hover label.cursor-pointer,
.instructor-finder__filters-card .form-group:hover label.cursor-pointer {
    color: var(--sc-amber) !important;
}

.courses-lists-filters .form-group:hover .custom-control-label::before,
.events-lists-filters .form-group:hover .custom-control-label::before,
.instructor-finder__top-filters .form-group:hover .custom-control-label::before,
.instructor-finder__filters-card .form-group:hover .custom-control-label::before {
    border-color: var(--sc-amber) !important;
}

.courses-lists-filters .custom-switch ~ div label:hover,
.events-lists-filters .custom-switch ~ div label:hover,
.instructor-finder__top-filters .custom-switch ~ div label:hover,
.instructor-finder__filters-card .custom-switch ~ div label:hover {
    color: var(--sc-amber) !important;
}

.courses-lists-filters .form-group.d-flex:hover label,
.events-lists-filters .form-group.d-flex:hover label,
.instructor-finder__top-filters .form-group.d-flex:hover label,
.instructor-finder__filters-card .form-group.d-flex:hover label {
    color: var(--sc-amber) !important;
}

/* Alle Filter-Labels generell (covers .form-group label:not(...):hover too) */
.courses-lists-filters label:hover,
.events-lists-filters label:hover,
.instructor-finder__top-filters label:hover,
.instructor-finder__filters-card label:hover {
    color: var(--sc-amber) !important;
    cursor: pointer !important;
}

/* Checkbox & Radio Filter-Labels (covers .custom-checkbox/.custom-radio variants) */
.courses-lists-filters .custom-control:hover .custom-control__label,
.events-lists-filters .custom-control:hover .custom-control__label,
.instructor-finder__top-filters .custom-control:hover .custom-control__label,
.instructor-finder__filters-card .custom-control:hover .custom-control__label {
    color: var(--sc-amber) !important;
}

.courses-lists-filters .custom-control:hover label,
.events-lists-filters .custom-control:hover label,
.instructor-finder__top-filters .custom-control:hover label,
.instructor-finder__filters-card .custom-control:hover label {
    color: var(--sc-amber) !important;
}

/* Sortieren-nach Dropdown Hover */
.courses-lists-filters .select2-container .select2-selection:hover,
.events-lists-filters .select2-container .select2-selection:hover,
.instructor-finder__top-filters .select2-container .select2-selection:hover,
.instructor-finder__filters-card .select2-container .select2-selection:hover {
    border-color: var(--sc-amber) !important;
}

/* --- Custom Switch (Top Bar) – shared §20/§21 --- */
.courses-lists-filters .custom-switch .custom-control-label::before,
.events-lists-filters .custom-switch .custom-control-label::before,
.instructor-finder__top-filters .custom-switch .custom-control-label::before,
.instructor-finder__filters-card .custom-switch .custom-control-label::before {
    background: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.courses-lists-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.events-lists-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.instructor-finder__top-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.instructor-finder__filters-card .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

.courses-lists-filters .custom-switch .custom-control-label::after,
.events-lists-filters .custom-switch .custom-control-label::after,
.instructor-finder__top-filters .custom-switch .custom-control-label::after,
.instructor-finder__filters-card .custom-switch .custom-control-label::after {
    background: rgba(255,255,255,0.6) !important;
}

.courses-lists-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
.events-lists-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
.instructor-finder__top-filters .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
.instructor-finder__filters-card .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background: #ffffff !important;
}

/* Switch Label Text – shared §20/§21 */
.courses-lists-filters .custom-switch ~ div label,
.courses-lists-filters .form-group label:not(.custom-control-label):not(.custom-control__label):not(.form-group-label),
.events-lists-filters .custom-switch ~ div label,
.events-lists-filters .form-group label:not(.custom-control-label):not(.custom-control__label):not(.form-group-label),
.instructor-finder__top-filters .custom-switch ~ div label,
.instructor-finder__top-filters .form-group label:not(.custom-control-label):not(.custom-control__label):not(.form-group-label),
.instructor-finder__filters-card .custom-switch ~ div label,
.instructor-finder__filters-card .form-group label:not(.custom-control-label):not(.custom-control__label):not(.form-group-label) {
    color: rgba(255,255,255,0.85) !important;
}

/* --- Checkboxen (Sidebar) – shared §20/§21 --- */
.courses-lists-filters .custom-checkbox .custom-control__label::before,
.courses-lists-filters .custom-control__label::before,
.events-lists-filters .custom-checkbox .custom-control__label::before,
.events-lists-filters .custom-control__label::before,
.instructor-finder__top-filters .custom-checkbox .custom-control__label::before,
.instructor-finder__top-filters .custom-control__label::before,
.instructor-finder__filters-card .custom-checkbox .custom-control__label::before,
.instructor-finder__filters-card .custom-control__label::before {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 6px !important;
}

.courses-lists-filters .custom-control-input:checked ~ .custom-control__label::before,
.events-lists-filters .custom-control-input:checked ~ .custom-control__label::before,
.instructor-finder__top-filters .custom-control-input:checked ~ .custom-control__label::before,
.instructor-finder__filters-card .custom-control-input:checked ~ .custom-control__label::before {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

.courses-lists-filters .custom-control__label,
.events-lists-filters .custom-control__label,
.instructor-finder__top-filters .custom-control__label,
.instructor-finder__filters-card .custom-control__label {
    color: rgba(255,255,255,0.85) !important;
}

/* Checkbox/Radio Reihen – shared §20/§21 */
.courses-lists-filters .custom-control,
.events-lists-filters .custom-control,
.instructor-finder__top-filters .custom-control,
.instructor-finder__filters-card .custom-control {
    background: transparent !important;
}

/* --- Radio Buttons (Rating) – shared §20/§21 --- */
.courses-lists-filters .custom-radio .custom-control__label::before,
.events-lists-filters .custom-radio .custom-control__label::before,
.instructor-finder__top-filters .custom-radio .custom-control__label::before,
.instructor-finder__filters-card .custom-radio .custom-control__label::before {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.courses-lists-filters .custom-radio .custom-control-input:checked ~ .custom-control__label::before,
.events-lists-filters .custom-radio .custom-control-input:checked ~ .custom-control__label::before,
.instructor-finder__top-filters .custom-radio .custom-control-input:checked ~ .custom-control__label::before,
.instructor-finder__filters-card .custom-radio .custom-control-input:checked ~ .custom-control__label::before {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

/* --- Rating Sterne – shared §20/§21 --- */
.courses-lists-filters .rate-stars .icons,
.courses-lists-filters .rate-stars svg,
.events-lists-filters .rate-stars .icons,
.events-lists-filters .rate-stars svg,
.instructor-finder__filters-card .rate-stars .icons,
.instructor-finder__filters-card .rate-stars svg {
    color: var(--sc-amber) !important;
}

/* --- Select / Dropdown in Sidebar – shared §20/§21 --- */
.courses-lists-filters select.form-control,
.courses-lists-filters .form-control,
.events-lists-filters select.form-control,
.events-lists-filters .form-control,
.instructor-finder__top-filters select.form-control,
.instructor-finder__top-filters .form-control,
.instructor-finder__filters-card select.form-control,
.instructor-finder__filters-card .form-control {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

/* Überschreibe inline bg-white auf Inputs/Selects */
.courses-lists-filters .form-control.bg-white,
.courses-lists-filters select.bg-white,
.courses-lists-filters input.bg-white,
.events-lists-filters .form-control.bg-white,
.events-lists-filters select.bg-white,
.events-lists-filters input.bg-white,
.instructor-finder__top-filters .form-control.bg-white,
.instructor-finder__top-filters select.bg-white,
.instructor-finder__top-filters input.bg-white,
.instructor-finder__filters-card .form-control.bg-white,
.instructor-finder__filters-card select.bg-white,
.instructor-finder__filters-card input.bg-white {
    background: var(--sc-surface-input) !important;
}

.courses-lists-filters select.form-control:focus,
.courses-lists-filters .form-control:focus,
.events-lists-filters select.form-control:focus,
.events-lists-filters .form-control:focus,
.instructor-finder__top-filters select.form-control:focus,
.instructor-finder__top-filters .form-control:focus,
.instructor-finder__filters-card select.form-control:focus,
.instructor-finder__filters-card .form-control:focus {
    border-color: var(--sc-blue-focus) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
    background: var(--sc-surface-focus) !important;
}

/* Select2 in Filters – shared §20/§21 */
.courses-lists-filters .select2-container .select2-selection,
.events-lists-filters .select2-container .select2-selection,
.instructor-finder__top-filters .select2-container .select2-selection,
.instructor-finder__filters-card .select2-container .select2-selection {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

.courses-lists-filters .select2-container .select2-selection__rendered,
.events-lists-filters .select2-container .select2-selection__rendered,
.instructor-finder__top-filters .select2-container .select2-selection__rendered,
.instructor-finder__filters-card .select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

/* --- Card View Toggle --- */
.courses-lists-card-view label {
    color: #7c8fa6 !important;
    background: transparent !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
}

.courses-lists-card-view label .icons {
    color: #7c8fa6 !important;
}

.courses-lists-card-view label:hover {
    color: var(--sc-amber) !important;
    background: transparent !important;
}

.courses-lists-card-view label:hover .icons {
    color: var(--sc-amber) !important;
}

.courses-lists-card-view input:checked + label,
.courses-lists-card-view input:checked + label .icons,
.courses-lists-card-view input:checked ~ label,
.courses-lists-card-view input:checked ~ label .icons {
    color: var(--sc-amber) !important;
}

/* Sort Dropdown Hintergrund – shared §20/§21 */
.courses-lists-sort-input .select2-container .select2-selection,
.events-lists-sort-input .select2-container .select2-selection,
.instructor-finder__top-filters .select2-container .select2-selection {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.courses-lists-sort-input .select2-container .select2-selection__rendered,
.events-lists-sort-input .select2-container .select2-selection__rendered,
.instructor-finder__top-filters .select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

.courses-lists-sort-input .select2-container .select2-selection__arrow b,
.events-lists-sort-input .select2-container .select2-selection__arrow b,
.instructor-finder__top-filters .select2-container .select2-selection__arrow b {
    border-color: rgba(255,255,255,0.5) transparent transparent transparent !important;
}

/* --- Preis-Filter Bereich – shared §20/§21 --- */
.courses-lists-filters .input-xs,
.events-lists-filters .input-xs,
.instructor-finder__filters-card .input-xs {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

.courses-lists-filters .input-xs.bg-white,
.events-lists-filters .input-xs.bg-white,
.instructor-finder__filters-card .input-xs.bg-white {
    background: var(--sc-surface-input) !important;
}

.courses-lists-filters .input-xs.text-gray-500,
.events-lists-filters .input-xs.text-gray-500,
.instructor-finder__filters-card .input-xs.text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Price Range Slider Track */
.courses-lists-filters .wrunner-runnable-track,
.events-lists-filters .wrunner-runnable-track,
.instructor-finder__filters-card .wrunner-runnable-track {
    background: var(--sc-surface-input) !important;
}

.courses-lists-filters .wrunner-value-line,
.events-lists-filters .wrunner-value-line,
.instructor-finder__filters-card .wrunner-value-line {
    background: var(--sc-blue-focus) !important;
}

.courses-lists-filters .wrunner-handle,
.events-lists-filters .wrunner-handle,
.instructor-finder__filters-card .wrunner-handle {
    background: #ffffff !important;
    border: 2px solid var(--sc-blue-focus) !important;
}

/* --- Searchable Select – shared §20/§21 --- */
.courses-lists-filters .searchable-select,
.events-lists-filters .searchable-select,
.instructor-finder__top-filters .searchable-select,
.instructor-finder__filters-card .searchable-select {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
}

.courses-lists-filters .searchable-select.bg-white,
.events-lists-filters .searchable-select.bg-white,
.instructor-finder__top-filters .searchable-select.bg-white,
.instructor-finder__filters-card .searchable-select.bg-white {
    background: var(--sc-surface-input) !important;
}

/* Select2 Container innerhalb Sidebar – shared §20/§21 */
.courses-lists-filters .select2-container--default .select2-selection--single,
.events-lists-filters .select2-container--default .select2-selection--single,
.instructor-finder__top-filters .select2-container--default .select2-selection--single,
.instructor-finder__filters-card .select2-container--default .select2-selection--single {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    height: 44px !important;
}

.courses-lists-filters .select2-container--default .select2-selection--single .select2-selection__rendered,
.events-lists-filters .select2-container--default .select2-selection--single .select2-selection__rendered,
.instructor-finder__top-filters .select2-container--default .select2-selection--single .select2-selection__rendered,
.instructor-finder__filters-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 44px !important;
}

.courses-lists-filters .select2-container--default .select2-selection--single .select2-selection__placeholder,
.events-lists-filters .select2-container--default .select2-selection--single .select2-selection__placeholder,
.instructor-finder__top-filters .select2-container--default .select2-selection--single .select2-selection__placeholder,
.instructor-finder__filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,0.88) !important;
}

.courses-lists-filters .select2-container--default .select2-selection--single .select2-selection__arrow b,
.events-lists-filters .select2-container--default .select2-selection--single .select2-selection__arrow b,
.instructor-finder__top-filters .select2-container--default .select2-selection--single .select2-selection__arrow b,
.instructor-finder__filters-card .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,0.5) transparent transparent transparent !important;
}

/* Select2 multiple – shared §20/§21 */
.courses-lists-filters .select2-container--default .select2-selection--multiple,
.events-lists-filters .select2-container--default .select2-selection--multiple,
.instructor-finder__top-filters .select2-container--default .select2-selection--multiple,
.instructor-finder__filters-card .select2-container--default .select2-selection--multiple {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.courses-lists-filters .select2-container--default .select2-selection--multiple .select2-selection__choice,
.events-lists-filters .select2-container--default .select2-selection--multiple .select2-selection__choice,
.instructor-finder__top-filters .select2-container--default .select2-selection--multiple .select2-selection__choice,
.instructor-finder__filters-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sc-surface-focus) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

.courses-lists-filters .form-group-label,
.events-lists-filters .form-group-label,
.instructor-finder__top-filters .form-group-label,
.instructor-finder__filters-card .form-group-label {
    color: rgba(255,255,255,0.78) !important;
    background: var(--sc-surface) !important;
    border: none !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 4px !important;
}

/* Custom-Select Fallback – shared §20/§21 */
.courses-lists-filters .custom-select,
.events-lists-filters .custom-select,
.instructor-finder__top-filters .custom-select,
.instructor-finder__filters-card .custom-select {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.courses-lists-filters select option,
.events-lists-filters select option,
.instructor-finder__top-filters select option,
.instructor-finder__filters-card select option {
    background: var(--sc-surface) !important;
    color: #ffffff !important;
}

/* Placeholder in Inputs – shared §20/§21 */
.courses-lists-filters input::placeholder,
.courses-lists-filters .form-control::placeholder,
.events-lists-filters input::placeholder,
.events-lists-filters .form-control::placeholder,
.instructor-finder__top-filters input::placeholder,
.instructor-finder__top-filters .form-control::placeholder,
.instructor-finder__filters-card input::placeholder,
.instructor-finder__filters-card .form-control::placeholder {
    color: rgba(255,255,255,0.88) !important;
}

/* --- Course Cards: Dark Theme (nur Kursseite) --- */
/* Scoped via :has() damit Homepage-Karten hell bleiben (§11) */

main:has(.courses-lists-hero) .course-grid-card-1 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

main:has(.courses-lists-hero) .course-grid-card-1:hover {
    background: var(--sc-surface-hover) !important;
    transform: translateY(-4px) !important;
    border-color: var(--sc-amber) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 img {
    transition: filter 0.25s ease !important;
}
main:has(.courses-lists-hero) .course-grid-card-1:hover img {
    filter: brightness(0.9) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1:hover .course-grid-card-1__body {
    background: var(--sc-surface-hover) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1__mask,
main:has(.courses-lists-hero) .course-grid-card-1:hover .course-grid-card-1__mask {
    display: none !important;
}

main:has(.courses-lists-hero) .course-grid-card-1:hover a,
main:has(.courses-lists-hero) .course-grid-card-1:hover .course-title,
main:has(.courses-lists-hero) .course-grid-card-1:hover h3 {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-grid-card-1__body {
    background: var(--sc-surface) !important;
    border-radius: 0 0 20px 20px !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .course-title,
main:has(.courses-lists-hero) .course-grid-card-1 h3 {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .text-dark,
main:has(.courses-lists-hero) .course-grid-card-1 .font-weight-bold {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 span {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .text-primary {
    color: var(--sc-blue) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

main:has(.courses-lists-hero) .course-grid-card-1 .icons.text-gray-500 {
    color: rgba(255,255,255,0.88) !important;
}

/* --- Course Grid Card 2 (Alternative, nur Kursseite) --- */
main:has(.courses-lists-hero) .course-grid-card-2 {
    border: 1px solid rgba(255,255,255,0.05) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2__body {
    background: rgba(15,34,54,0.9) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .course-title,
main:has(.courses-lists-hero) .course-grid-card-2 h3 {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .text-dark,
main:has(.courses-lists-hero) .course-grid-card-2 .font-weight-bold {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 span {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .text-primary {
    color: var(--sc-blue) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

main:has(.courses-lists-hero) .course-grid-card-2 .icons.text-gray-500 {
    color: rgba(255,255,255,0.88) !important;
}

/* --- Course Row Cards (List View, nur Kursseite) --- */
main:has(.courses-lists-hero) .course-row-card-1 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .bg-white,
main:has(.courses-lists-hero) .course-row-card-1 > .bg-white {
    background-color: var(--sc-surface) !important;
}

main:has(.courses-lists-hero) .course-row-card-1:hover {
    background: var(--sc-surface-hover) !important;
    transform: translateY(-4px) !important;
    border-color: var(--sc-amber) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 img {
    transition: filter 0.25s ease !important;
}
main:has(.courses-lists-hero) .course-row-card-1:hover img {
    filter: brightness(0.9) !important;
}

main:has(.courses-lists-hero) .course-row-card-1:hover .bg-white {
    background-color: var(--sc-surface-hover) !important;
}

main:has(.courses-lists-hero) .course-row-card-1:hover a {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .course-title,
main:has(.courses-lists-hero) .course-row-card-1 h3 {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .text-dark,
main:has(.courses-lists-hero) .course-row-card-1 .font-weight-bold {
    color: #ffffff !important;
}

main:has(.courses-lists-hero) .course-row-card-1 span {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 p {
    color: rgba(255,255,255,0.78) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .text-primary {
    color: var(--sc-blue) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .border-top-gray-100,
main:has(.courses-lists-hero) .course-row-card-1 .border-left-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .icons.text-gray-500 {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .border-gray-200 {
    border-color: rgba(255,255,255,0.1) !important;
}

main:has(.courses-lists-hero) .course-row-card-1 .btn-primary {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

/* --- SEO Content Block --- */
.courses-lists-filters ~ .col-12 .bg-gray-100,
main.pb-120 section.bg-gray-100 {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

main.pb-120 section.bg-gray-100 h3 {
    color: #ffffff !important;
}

main.pb-120 section.bg-gray-100 .text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Pagination --- */
.js-ajax-pagination .page-link {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
}

.js-ajax-pagination .page-item.active .page-link {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
    color: #ffffff !important;
}

.js-ajax-pagination .page-link:hover {
    background: var(--sc-surface-focus) !important;
}

/* --- Kursseite: Abstände korrigieren --- */
main.pb-120:has(.courses-lists-hero) {
    padding-bottom: 40px !important;
}

/* Card View: transparenter Hintergrund (Duplikat entfernt, konsolidiert oben) */


/* ==========================================================================
   §21 – EVENTS PAGE (Dark Theme, analog zu §20 Courses Page)
   ========================================================================== */

/* --- Globaler Override: bg-white innerhalb Events-Seite --- */
.events-lists-hero ~ .container .bg-white,
.events-lists-header .bg-white,
.events-lists-header .bg-white.rounded-32,
.events-lists-filters .bg-white,
.events-lists-filters .bg-white.rounded-24,
.events-lists-filters .bg-white.px-24,
.events-lists-header .position-relative.bg-white,
.events-lists-filters .position-relative.bg-white {
    background: var(--sc-surface) !important;
    background-color: var(--sc-surface) !important;
    color: #ffffff !important;
}

.events-lists-filters .card,
.events-lists-header .card {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.events-lists-filters .card-body,
.events-lists-filters .accordion-body,
.events-lists-filters .collapse,
.events-lists-filters .collapsing {
    background: transparent !important;
}

/* --- Hero Banner --- */
.events-lists-hero {
    background: var(--sc-surface-deep) !important;
    margin-top: -140px !important;
}

.events-lists-hero__mask {
    background: linear-gradient(180deg, rgba(15,34,54,0.75) 0%, var(--sc-surface-deep) 100%) !important;
    pointer-events: none !important;
}

/* --- Filter-Formular ueber Overlays --- */
.events-lists-filters {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    color: #ffffff !important;
}

.events-lists-hero__mask,
.events-lists-header__mask {
    pointer-events: none !important;
}

.events-lists-filters input,
.events-lists-filters select,
.events-lists-filters label,
.events-lists-filters button,
.events-lists-filters .custom-control-label,
.events-lists-filters .custom-control__label,
.events-lists-filters .select2-container {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* --- Header Card --- */
.events-lists-header .bg-white {
    background: var(--sc-surface) !important;
    color: #ffffff !important;
    border-radius: 32px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
}

.events-lists-header__mask {
    display: none !important;
}

.events-lists-header div.font-12 {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.events-lists-header .text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
    font-size: 14px !important;
}

.events-lists-header h1 {
    color: #ffffff !important;
}

.events-lists-header a.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

.events-lists-header a.text-gray-500:hover {
    color: var(--sc-amber) !important;
}

.events-lists-header .bg-primary-30 {
    background: rgba(59,130,246,0.15) !important;
}

/* --- Sidebar & Top Filter Bar --- */
.events-lists-filters .bg-white,
.events-lists-filters .bg-white.rounded-24,
.events-lists-filters > .bg-white,
.events-lists-filters > .bg-white.rounded-24 {
    background: var(--sc-surface) !important;
    background-color: var(--sc-surface) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
}

.events-lists-filters__mask {
    display: none !important;
}

/* --- Accordion --- */
.events-lists-filters .accordion {
    background: transparent !important;
}

.events-lists-filters .accordion__title {
    background: transparent !important;
}

.events-lists-filters .accordion__collapse {
    background: transparent !important;
}

.events-lists-filters .border-bottom-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

.events-lists-filters .card-before-line::before {
    background-color: rgba(59,130,246,0.4) !important;
}

.events-lists-filters .bg-gray-100,
.events-lists-filters .bg-gray-200 {
    background: rgba(255,255,255,0.04) !important;
}

/* --- Texte --- */
.events-lists-filters label {
    color: rgba(255,255,255,0.85) !important;
}

.events-lists-filters h4,
.events-lists-filters .font-14,
.events-lists-filters .text-dark,
.events-lists-filters .font-weight-bold {
    color: #ffffff !important;
}

.events-lists-filters span {
    color: rgba(255,255,255,0.85) !important;
}

.events-lists-filters .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.events-lists-filters .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

.events-lists-filters .icons {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Accordion Toggle --- */
.events-lists-filters .accordion__title [role="button"] {
    color: #ffffff !important;
}

.events-lists-filters .collapse-arrow-icon .icons {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Events-only Hover-Effekte --- */

/* Unterkategorien (div-basiert: "Microsoft 365", "KI" etc.) */
.events-lists-filters .js-get-view-data-by-tab:hover {
    color: var(--sc-amber) !important;
}

.events-lists-filters .accordion__collapse .pl-8 div:hover {
    color: var(--sc-amber) !important;
}

/* Event-Karten Links */
main:has(.events-lists-hero) .event-grid-card-1 a:hover {
    color: var(--sc-amber) !important;
}

main:has(.events-lists-hero) .event-grid-card-1__contents-title a:hover {
    color: var(--sc-amber) !important;
}

/* NOTE: Custom switch, checkbox, radio, rating, select/dropdown, select2,
   sort dropdown, price filter, searchable select, custom select, and
   placeholder styles are shared with §20 via comma-separated selectors above. */

/* --- Event Grid Cards (Dark Theme) --- */
main:has(.events-lists-hero) .event-grid-card-1 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

main:has(.events-lists-hero) .event-grid-card-1:hover {
    background: var(--sc-surface-hover) !important;
    transform: translateY(-4px) !important;
    border-color: var(--sc-amber) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 img {
    transition: filter 0.25s ease !important;
}

main:has(.events-lists-hero) .event-grid-card-1:hover img {
    filter: brightness(0.9) !important;
}

main:has(.events-lists-hero) .event-grid-card-1__contents {
    background: var(--sc-surface) !important;
    border-radius: 0 0 18px 18px !important;
}

main:has(.events-lists-hero) .event-grid-card-1:hover .event-grid-card-1__contents {
    background: var(--sc-surface-hover) !important;
}

main:has(.events-lists-hero) .event-grid-card-1__contents-title {
    color: #ffffff !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .text-dark,
main:has(.events-lists-hero) .event-grid-card-1 .font-weight-bold {
    color: #ffffff !important;
}

main:has(.events-lists-hero) .event-grid-card-1 span {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .text-primary {
    color: var(--sc-blue) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

main:has(.events-lists-hero) .event-grid-card-1 .icons.text-gray-500 {
    color: rgba(255,255,255,0.88) !important;
}

main:has(.events-lists-hero) .event-grid-card-1:hover a {
    color: #ffffff !important;
}

/* --- Events SEO Content Block --- */
.events-lists-filters ~ .col-12 .bg-gray-100 {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* --- Events Pagination --- */
main:has(.events-lists-hero) .js-ajax-pagination .page-link {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
}

main:has(.events-lists-hero) .js-ajax-pagination .page-item.active .page-link {
    background: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
    color: #ffffff !important;
}

main:has(.events-lists-hero) .js-ajax-pagination .page-link:hover {
    background: var(--sc-surface-focus) !important;
}

/* --- Events: Abstaende --- */
main.pb-120:has(.events-lists-hero) {
    padding-bottom: 40px !important;
}

/* --- Card View Toggle (Events) --- */
main:has(.events-lists-hero) .courses-lists-card-view label {
    color: #7c8fa6 !important;
    background: transparent !important;
    cursor: pointer !important;
}

main:has(.events-lists-hero) .courses-lists-card-view label .icons {
    color: #7c8fa6 !important;
}

main:has(.events-lists-hero) .courses-lists-card-view label:hover,
main:has(.events-lists-hero) .courses-lists-card-view label:hover .icons {
    color: var(--sc-amber) !important;
    background: transparent !important;
}

main:has(.events-lists-hero) .courses-lists-card-view input:checked + label,
main:has(.events-lists-hero) .courses-lists-card-view input:checked + label .icons,
main:has(.events-lists-hero) .courses-lists-card-view input:checked ~ label,
main:has(.events-lists-hero) .courses-lists-card-view input:checked ~ label .icons {
    color: var(--sc-amber) !important;
}


/* =========================
   §22 – Instructor Finder Page
   ========================= */

/* --- Instructor Finder Container (gleicher Abstand wie /classes) --- */
.instructor-finder.mt-80 {
    margin-top: -140px !important;
    padding-top: 200px !important;
    position: relative !important;
}

/* Navy-Hintergrund simuliert Hero-Bereich wie auf /classes (320px Hero - 140px overlap = 180px sichtbar) */
.instructor-finder.mt-80::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 200px !important;
    background: var(--sc-surface-deep, #0D1B2A) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}


/* --- Hero Box --- */
.instructor-finder > .position-relative > .bg-white.rounded-32 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.instructor-finder > .position-relative > .bg-white.rounded-32 h1 {
    color: #ffffff !important;
}

.instructor-finder > .position-relative > .bg-white.rounded-32 p,
.instructor-finder > .position-relative > .bg-white.rounded-32 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.instructor-finder > .position-relative > .bg-white.rounded-32 .bg-primary-30 {
    background: rgba(59,130,246,0.15) !important;
}

.instructor-finder__top-hero-mask {
    display: none !important;
}

/* --- Map Container --- */
.instructor-finder__map-container {
    background: var(--sc-surface-deep) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Dark Map Tiles via CSS Filter
   invert() dreht hell→dunkel, hue-rotate() korrigiert die Farben,
   saturate() gibt dezente Farbigkeit, brightness()/contrast() feinjustiert */
.instructor-finder__map-container .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) saturate(30%) brightness(85%) contrast(110%) !important;
}

/* Marker und Overlays NICHT invertieren (doppelt invertieren = normal) */
.instructor-finder__map-container .leaflet-marker-pane,
.instructor-finder__map-container .leaflet-shadow-pane,
.instructor-finder__map-container .leaflet-popup-pane,
.instructor-finder__map-container .leaflet-overlay-pane {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* Leaflet Controls dunkel stylen */
.instructor-finder__map-container .leaflet-control-zoom a {
    background: var(--sc-surface) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.instructor-finder__map-container .leaflet-control-zoom a:hover {
    background: var(--sc-surface-hover) !important;
    color: var(--sc-amber) !important;
}

.instructor-finder__map-container .leaflet-control-attribution {
    background: rgba(10,25,41,0.85) !important;
    color: rgba(255,255,255,0.58) !important;
}

.instructor-finder__map-container .leaflet-control-attribution a {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Top Filter Bar --- */
.instructor-finder__top-filters {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.instructor-finder__top-filters label {
    color: rgba(255,255,255,0.85) !important;
}

/* --- Sidebar Filter Cards --- */
.instructor-finder__filters-card {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.instructor-finder__filters-card .border-bottom-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

/* --- Accordion Titles --- */
.instructor-finder__filters-title {
    color: #ffffff !important;
}

.instructor-finder__filters-card .collapse-arrow-icon .icons {
    color: rgba(255,255,255,0.5) !important;
}

.instructor-finder__filters-card .accordion {
    background: transparent !important;
}

.instructor-finder__filters-card .accordion__title {
    background: transparent !important;
}

.instructor-finder__filters-card .accordion__collapse {
    background: transparent !important;
}

/* --- Texte in Filtern --- */
.instructor-finder__filters-card label,
.instructor-finder__filters-card .custom-control__label {
    color: rgba(255,255,255,0.85) !important;
}

.instructor-finder__filters-card h4,
.instructor-finder__filters-card h5,
.instructor-finder__filters-card .font-14,
.instructor-finder__filters-card .text-dark,
.instructor-finder__filters-card .font-weight-bold {
    color: #ffffff !important;
}

.instructor-finder__filters-card span {
    color: rgba(255,255,255,0.85) !important;
}

.instructor-finder__filters-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.instructor-finder__filters-card .text-gray-400 {
    color: rgba(255,255,255,0.88) !important;
}

.instructor-finder__filters-card .icons {
    color: rgba(255,255,255,0.5) !important;
}

.instructor-finder__filters-card .form-group-label {
    color: rgba(255,255,255,0.78) !important;
}

/* --- No Result Box --- */
.instructor-finder .no-result {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.instructor-finder .no-result h3 {
    color: #ffffff !important;
}

.instructor-finder .no-result p,
.instructor-finder .no-result .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* --- "Mehr laden" Button --- */
#loadMoreInstructors {
    background: var(--sc-surface) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
}

#loadMoreInstructors:hover {
    background: var(--sc-surface-hover) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-amber) !important;
}

/* Hover-Effekte: bereits in Shared Sections §20/§21/§22 definiert */
.instructor-finder__filters-title:hover {
    color: var(--sc-amber) !important;
}

/* --- Pointer Events (ensure clickability) --- */
.instructor-finder__top-filters input,
.instructor-finder__top-filters select,
.instructor-finder__top-filters label,
.instructor-finder__top-filters button,
.instructor-finder__top-filters .custom-control-label,
.instructor-finder__top-filters .select2-container,
.instructor-finder__filters-card input,
.instructor-finder__filters-card select,
.instructor-finder__filters-card label,
.instructor-finder__filters-card button,
.instructor-finder__filters-card .custom-control-label,
.instructor-finder__filters-card .custom-control__label,
.instructor-finder__filters-card .select2-container {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* =========================
   §23 – Pages (Über uns, etc.)
   ========================= */

/* --- Hero Section (gleiche Hoehe wie /classes und /events) --- */
.pages-hero {
    background: var(--sc-surface-deep) !important;
    margin-top: -140px !important;
}

.pages-hero__mask {
    background: linear-gradient(180deg, rgba(15,34,54,0.75) 0%, var(--sc-surface-deep) 100%) !important;
    pointer-events: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.pages-hero img {
    opacity: 0.15 !important;
}

/* --- Header Box --- */
.pages-header__mask {
    display: none !important;
}

.pages-header .bg-white.rounded-32 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.pages-header .bg-white.rounded-32 h1 {
    color: #ffffff !important;
}

.pages-header .bg-white.rounded-32 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.pages-header .bg-white.rounded-32 a.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

.pages-header .bg-white.rounded-32 a.text-gray-500:hover {
    color: var(--sc-amber) !important;
}

.pages-header .bg-white.rounded-32 .bg-gray-400-30,
.pages-header .bg-white.rounded-32 .bg-primary-30 {
    background: rgba(59,130,246,0.15) !important;
}

.pages-header .bg-white.rounded-32 .font-12 {
    color: rgba(255,255,255,0.78) !important;
}

.pages-header .bg-white.rounded-32 span {
    color: rgba(255,255,255,0.78) !important;
}

/* --- Content Box --- */
.pages-content {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.85) !important;
}

.pages-content h1,
.pages-content h2,
.pages-content h3,
.pages-content h4,
.pages-content h5,
.pages-content h6 {
    color: #ffffff !important;
}

.pages-content p {
    color: rgba(255,255,255,0.78) !important;
}

.pages-content a {
    color: var(--sc-blue-focus) !important;
}

.pages-content a:hover {
    color: var(--sc-amber) !important;
}

.pages-content .text-dark {
    color: #ffffff !important;
}

.pages-content .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.pages-content img {
    border-radius: 12px !important;
    opacity: 0.95 !important;
}

.pages-content ul,
.pages-content ol {
    color: rgba(255,255,255,0.78) !important;
}

.pages-content blockquote {
    border-left: 3px solid var(--sc-blue) !important;
    background: var(--sc-surface-input) !important;
    padding: 16px !important;
    border-radius: 0 12px 12px 0 !important;
    color: rgba(255,255,255,0.8) !important;
}

.pages-content table {
    color: rgba(255,255,255,0.85) !important;
}

.pages-content table th {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.pages-content table td {
    border-color: rgba(255,255,255,0.06) !important;
}

.pages-content hr {
    border-color: rgba(255,255,255,0.08) !important;
}


/* ==========================================================================
   §24 – PANEL / DASHBOARD (Dozenten & Studenten)
   Separates Layout: panel.blade.php (laedt schoolando.css via Template-Edit)
   Klassen-Prefix: .panel-header, .panel-sidebar, .panel-content,
   .panel-title-and-breadcrumb, .instructor-dashboard, .student-dashboard
   ========================================================================== */

/* --- 24.1 Body & Global Panel Overrides --- */
#panel_app {
    --font-family-base: 'DM Sans', sans-serif !important;
    background: var(--sc-surface-deep) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
}

#panel_app h1, #panel_app h2, #panel_app h3,
#panel_app h4, #panel_app h5, #panel_app h6,
#panel_app .font-weight-bold {
    font-family: 'Sora', sans-serif !important;
}

/* Font Sizes – groesser, einheitlich mit Frontend-Navbar */
#panel_app .font-44 { font-size: 44px !important; }
#panel_app .font-24 { font-size: 24px !important; }
#panel_app .font-16 { font-size: 16px !important; }
#panel_app .font-14 { font-size: 15px !important; }
#panel_app .font-12 { font-size: 13px !important; }

/* Panel Sidebar */
#panel_app .panel-sidebar .font-weight-bold,
#panel_app .panel-sidebar h3,
#panel_app .panel-sidebar h4,
#panel_app .panel-sidebar h5 {
    font-family: 'Sora', sans-serif !important;
    font-size: 15px !important;
}

#panel_app .panel-sidebar a,
#panel_app .panel-sidebar span,
#panel_app .panel-sidebar .text-dark {
    font-size: 14px !important;
}

/* Breadcrumb & Title Bar */
#panel_app .panel-title-and-breadcrumb h3 {
    font-size: 18px !important;
}

#panel_app .panel-title-and-breadcrumb .breadcrumb-item {
    font-size: 14px !important;
}

/* --- 24.2 Panel Header --- */
.panel-header {
    background: var(--sc-navy) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.panel-header__contents {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

.panel-header__contents-with-line {
    border-left-color: rgba(255,255,255,0.08) !important;
    border-right-color: rgba(255,255,255,0.08) !important;
}

.panel-header .bg-gray-100 {
    background-color: rgba(255,255,255,0.08) !important;
}

.panel-header .text-gray-500,
.panel-header .icons.text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.panel-header .navbar-item,
.panel-header a.navbar-item.text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

.panel-header .navbar-item:hover,
.panel-header a.navbar-item.text-gray-500:hover,
#panel_app .panel-header a.text-gray-500:hover {
    color: var(--sc-amber) !important;
    transition: color 0.2s ease !important;
}

.panel-header .theme-color-toggle {
    background-color: rgba(255,255,255,0.08) !important;
}

/* Header Notification Dropdown */
.panel-header .dropdown-menu,
.panel-header .panel-header-notification-dropdown {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.panel-header .dropdown-menu .text-dark {
    color: #ffffff !important;
}

.panel-header .dropdown-menu .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.panel-header .dropdown-menu .bg-gray-100 {
    background-color: rgba(255,255,255,0.06) !important;
}

.panel-header .dropdown-menu a:hover,
.panel-header .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255,255,255,0.04) !important;
}

/* --- 24.3 Panel Sidebar --- */
.panel-sidebar {
    background: var(--sc-navy) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.panel-sidebar .bg-white,
.panel-sidebar__contents,
.panel-sidebar__contents.bg-white {
    background: var(--sc-navy) !important;
}

.panel-sidebar__bottom-banner {
    background: var(--sc-navy) !important;
}

/* User Info */
.panel-sidebar .text-dark,
.panel-sidebar h4.text-dark {
    color: #ffffff !important;
}

.panel-sidebar .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.panel-sidebar .text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

/* User Stats Box */
.panel-sidebar .bg-gray {
    background-color: var(--sc-surface-input) !important;
}

.panel-sidebar .gray-card-divider {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Sidebar Avatar Border */
.panel-sidebar__user-avatar {
    border-color: var(--sc-surface-input) !important;
}

/* Menu Items */
.panel-sidebar__menu .text-dark,
.panel-sidebar__menu-item .text-dark,
.panel-sidebar a .text-dark {
    color: rgba(255,255,255,0.85) !important;
}

.panel-sidebar__menu .text-gray-500,
.panel-sidebar__menu-item .text-gray-500,
.panel-sidebar__menu .icons.text-gray-500,
.panel-sidebar__menu-item .icons.text-gray-500,
.panel-sidebar a.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

/* Active Menu Item */
.panel-sidebar .sidenav-item-active {
    background-color: rgba(91,141,239,0.12) !important;
}

.panel-sidebar .text-primary,
.panel-sidebar .sidenav-item-active .text-primary {
    color: var(--sc-blue-focus) !important;
}

/* Menu Hover */
.panel-sidebar__menu:hover,
.panel-sidebar__menu-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* Sub-items */
.panel-sidebar .accordion__collapse a {
    color: rgba(255,255,255,0.78) !important;
}

.panel-sidebar .accordion__collapse a:hover,
.panel-sidebar .accordion__collapse a.text-primary {
    color: var(--sc-blue-focus) !important;
}

/* Collapse Arrow */
.panel-sidebar .collapse-arrow-icon .icons {
    color: rgba(255,255,255,0.3) !important;
}

/* Scrollbar */
.panel-sidebar .simplebar-scrollbar::before {
    background: rgba(255,255,255,0.15) !important;
}

/* --- 24.4 Title & Breadcrumb Bar --- */
.panel-title-and-breadcrumb {
    background: var(--sc-surface) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.panel-title-and-breadcrumb h3,
.panel-title-and-breadcrumb .font-weight-bold {
    color: #ffffff !important;
}

.panel-title-and-breadcrumb .icons.text-dark {
    color: #ffffff !important;
}

/* Breadcrumb */
.panel-title-and-breadcrumb .breadcrumb-item,
.panel-title-and-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,0.5) !important;
}

.panel-title-and-breadcrumb .breadcrumb-item.active {
    color: rgba(255,255,255,0.8) !important;
}

.panel-title-and-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.3) !important;
}

/* --- 24.5 Panel Content Area --- */
.panel-content {
    background: var(--sc-surface-deep) !important;
}

.panel-content__scrollable {
    background: var(--sc-surface-deep) !important;
}

/* Global Card Overrides in Panel */
#panel_app .bg-white {
    background: var(--sc-surface) !important;
}

#panel_app .bg-gray-100 {
    background: rgba(255,255,255,0.05) !important;
}

#panel_app .bg-gray {
    background: var(--sc-surface-input) !important;
}

/* Text */
#panel_app .text-dark {
    color: #ffffff !important;
}

#panel_app .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

/* Borders */
#panel_app .border-gray-200,
#panel_app .border-top-gray-200,
#panel_app .border-bottom-gray-200,
#panel_app .border-top-gray-100,
#panel_app .border-bottom-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

#panel_app .border-gray-300 {
    border-color: rgba(255,255,255,0.1) !important;
}

#panel_app .border-dashed {
    border-color: rgba(255,255,255,0.12) !important;
}

/* Card Masks */
#panel_app .mask-8-white {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent) !important;
}

#panel_app .card-with-mask {
    border-radius: 16px !important;
}

/* --- 24.6 Dashboard Hello Box & Cards (Navy statt grelles Blau) --- */

/* Hello Box (Student + Instructor) */
.student-dashboard__hello-box-bg,
.instructor-dashboard__hello-box-bg {
    background-color: var(--sc-navy) !important;
    background-image: none !important;
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2D4A 100%) !important;
    opacity: 1 !important;
}

/* Subscribe/Upgrade Card */
.student-dashboard__no-subscribe-card-bg,
.student-dashboard__active-subscribe-card-bg {
    background-color: var(--sc-navy) !important;
    background-image: none !important;
    background: linear-gradient(135deg, #1B2D4A 0%, #0D1B2A 100%) !important;
}

/* Upgrade Button */
#panel_app .student-dashboard__no-subscribe-card .bg-white.text-primary {
    background: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

#panel_app .student-dashboard__no-subscribe-card .bg-white.text-primary:hover {
    background: var(--sc-amber-hover) !important;
    transform: translateY(-1px) !important;
}

/* Current Balance Box */
.dashboard-current-balance-box {
    background-color: var(--sc-navy) !important;
    background-image: none !important;
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2D4A 100%) !important;
    border-radius: 16px !important;
}

.dashboard-current-balance-box__mask {
    background: var(--sc-navy) !important;
    opacity: 0.5 !important;
}

/* Balance Footer Hover */
.dashboard-current-balance-box__footer {
    transition: background 0.2s ease !important;
}

.dashboard-current-balance-box:hover .dashboard-current-balance-box__footer,
a[href*="financial/payout"]:hover .dashboard-current-balance-box__footer {
    background: rgba(245, 158, 11, 0.25) !important;
}

a[href*="financial/payout"]:hover .dashboard-current-balance-box__footer span {
    color: var(--sc-amber) !important;
    opacity: 1 !important;
}

/* Balance Container (weiss -> dark) */
#panel_app .dashboard-current-balance-box + .d-flex .bg-white,
#panel_app .card-with-mask + .d-flex,
#panel_app a[href*="financial/payout"] > .bg-white {
    background: var(--sc-surface) !important;
}

#panel_app a[href*="financial/payout"] > .bg-white .text-dark {
    color: #ffffff !important;
}

#panel_app a[href*="financial/payout"] > .bg-white .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app a[href*="financial/payout"] > .bg-white .border-gray-200 {
    border-color: rgba(255,255,255,0.15) !important;
}

/* Hello Box Course Cards (Continue Learning) */
.student-dashboard__hello-box .bg-white,
.instructor-dashboard__hello-box .bg-white {
    background: var(--sc-surface) !important;
}

.student-dashboard__hello-box .text-dark,
.instructor-dashboard__hello-box .text-dark {
    color: #ffffff !important;
}

.student-dashboard__hello-box .text-gray-500,
.instructor-dashboard__hello-box .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.student-dashboard__hello-box .bg-gray-100,
.instructor-dashboard__hello-box .bg-gray-100 {
    background: rgba(255,255,255,0.06) !important;
}

.student-dashboard__hello-box .border-top-gray-200,
.instructor-dashboard__hello-box .border-top-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* --- 24.7 Progress Bars --- */
#panel_app .progress-card {
    background: rgba(255,255,255,0.08) !important;
}

#panel_app .progress-bar.bg-primary {
    background: var(--sc-blue) !important;
}

/* --- 24.8 Stat Icon Backgrounds (subtler in dark mode) --- */
#panel_app .bg-primary-40 {
    background: rgba(91,141,239,0.15) !important;
}

#panel_app .bg-success-40 {
    background: rgba(16,185,129,0.15) !important;
}

#panel_app .bg-warning-40 {
    background: rgba(245,158,11,0.15) !important;
}

#panel_app .bg-danger-40 {
    background: rgba(239,68,68,0.15) !important;
}

/* --- 24.9 Charts (ApexCharts) --- */
#panel_app .apexcharts-text {
    fill: rgba(255,255,255,0.5) !important;
}

#panel_app .apexcharts-gridline {
    stroke: rgba(255,255,255,0.06) !important;
}

#panel_app .apexcharts-xaxis-tick {
    stroke: rgba(255,255,255,0.06) !important;
}

#panel_app .apexcharts-legend-text {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .apexcharts-tooltip {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

#panel_app .apexcharts-tooltip-title {
    background: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

/* --- 24.10 Current Balance Box (moved to 24.6) --- */

/* --- 24.11 Forms in Panel --- */
#panel_app input.form-control,
#panel_app textarea.form-control,
#panel_app select.form-control,
#panel_app .form-control {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#panel_app .form-control::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

#panel_app .form-control:focus {
    background: var(--sc-surface-focus) !important;
    border-color: var(--sc-blue-focus) !important;
    color: #ffffff !important;
}

#panel_app .form-group-label,
#panel_app label {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .form-group-label {
    background: var(--sc-surface) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 4px !important;
}

/* Select2 in Panel */
#panel_app .select2-container .select2-selection {
    background: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#panel_app .select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

/* Panel Select2-Dropdown: nutzt globale Styles (§18 Select2 Global) */

/* --- 24.12 Buttons in Panel --- */
#panel_app .btn-primary {
    background-color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

#panel_app .btn-primary:hover {
    background-color: var(--sc-blue-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

#panel_app .bg-hover-gray-100:hover {
    background-color: rgba(255,255,255,0.08) !important;
}

/* Empty State Buttons */
#panel_app .border-dashed.border-gray-200 {
    border-color: rgba(255,255,255,0.12) !important;
}

#panel_app .btn .text-dark {
    color: #ffffff !important;
}

/* --- 24.13 Tables in Panel --- */
#panel_app table,
#panel_app .table {
    color: rgba(255,255,255,0.85) !important;
}

#panel_app table thead th,
#panel_app .table thead th {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

#panel_app table tbody td,
#panel_app .table tbody td {
    border-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.8) !important;
}

#panel_app table tbody tr:hover,
#panel_app .table tbody tr:hover {
    background-color: rgba(255,255,255,0.03) !important;
}

/* --- 24.14 Modals & Alerts in Panel --- */
#panel_app .modal-content {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

#panel_app .modal-header {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

#panel_app .modal-footer {
    border-top-color: rgba(255,255,255,0.06) !important;
}

#panel_app .modal-title {
    color: #ffffff !important;
}

/* --- 24.15 Noticeboard & Support --- */
#panel_app .noticeboard-card,
#panel_app .support-ticket-card {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Support conversation */
.support-conversation-item {
    border-color: rgba(255,255,255,0.06) !important;
}

.support-conversation-item.active,
.support-conversation-item:hover {
    background-color: rgba(91,141,239,0.08) !important;
}

/* --- 24.16 Pagination --- */
#panel_app .pagination .page-link {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

#panel_app .pagination .page-item.active .page-link {
    background: var(--sc-blue) !important;
    color: #ffffff !important;
    border-color: var(--sc-blue) !important;
}

#panel_app .pagination .page-link:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

/* --- 24.17 Panel Scrollbar --- */
#panel_app .simplebar-scrollbar::before {
    background: rgba(255,255,255,0.15) !important;
}

/* --- 24.18 Custom Checkbox/Radio in Panel --- */
#panel_app .custom-control-input ~ .custom-control__label::before {
    background: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

#panel_app .custom-control-input:checked ~ .custom-control__label::before {
    background: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

#panel_app .custom-control__label {
    color: rgba(255,255,255,0.78) !important;
}

/* Toggle Switch */
#panel_app .custom-switch .custom-control-label::before {
    background-color: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

#panel_app .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

/* --- 24.19 Calendar (Events + Persian Datepicker) --- */

/* FullCalendar */
#panel_app .fc-theme-standard td,
#panel_app .fc-theme-standard th {
    border-color: rgba(255,255,255,0.06) !important;
}

#panel_app .fc-theme-standard .fc-scrollgrid {
    border-color: rgba(255,255,255,0.06) !important;
}

#panel_app .fc-col-header-cell {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .fc-daygrid-day-number {
    color: rgba(255,255,255,0.68) !important;
}

#panel_app .fc-day-today {
    background: rgba(91,141,239,0.08) !important;
}

/* Persian Datepicker – Dark Theme */
#panel_app .datepicker-plot-area,
#panel_app .datepicker-plot-area-inline-view,
#panel_app .dashboard-events-calendar .datepicker-plot-area,
.datepicker-plot-area,
.datepicker-plot-area-inline-view {
    background-color: var(--sc-surface) !important;
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

#panel_app .datepicker-plot-area span,
#panel_app .datepicker-plot-area td,
#panel_app .datepicker-plot-area div,
#panel_app .datepicker-plot-area i,
#panel_app .datepicker-plot-area input,
#panel_app .datepicker-plot-area-inline-view span,
#panel_app .datepicker-plot-area-inline-view td,
#panel_app .datepicker-plot-area-inline-view div,
#panel_app .datepicker-plot-area-inline-view i,
#panel_app .datepicker-plot-area-inline-view input {
    color: rgba(255,255,255,0.78) !important;
    background-color: transparent !important;
}

/* Kalender-Tabelle: kein weisser Hintergrund */
#panel_app .datepicker-plot-area table,
#panel_app .datepicker-plot-area th,
#panel_app .datepicker-plot-area td,
#panel_app .datepicker-plot-area .datepicker-day-view,
#panel_app .datepicker-plot-area .datepicker-month-view,
#panel_app .datepicker-plot-area .datepicker-year-view,
#panel_app .datepicker-plot-area .month-grid-box {
    background: transparent !important;
    background-color: transparent !important;
}

/* Navigator (< 2026 March >) */
#panel_app .datepicker-navigator .pwt-btn-next,
#panel_app .datepicker-navigator .pwt-btn-prev,
#panel_app .datepicker-navigator .pwt-btn-switch {
    background-color: transparent !important;
    color: #ffffff !important;
}

#panel_app .datepicker-navigator .pwt-btn-switch {
    font-weight: 700 !important;
    font-size: 14px !important;
}

#panel_app .datepicker-navigator .pwt-btn-next:hover,
#panel_app .datepicker-navigator .pwt-btn-prev:hover,
#panel_app .datepicker-navigator .pwt-btn-switch:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--sc-amber) !important;
}

/* LTR-Fix: Montag als erster Wochentag (persian-datepicker rendert RTL) */
#panel_app .datepicker-day-view .table-days {
    direction: ltr !important;
}
#panel_app .datepicker-day-view .month-grid-box .header .header-row-cell {
    float: left !important;
}
#panel_app .datepicker-day-view .month-grid-box {
    float: left !important;
}
#panel_app .datepicker-month-view .month-item,
#panel_app .datepicker-year-view .year-item {
    float: left !important;
}

/* Wochentag-Header (Mo, Di, Mi...) */
#panel_app .datepicker-day-view .header-row-cell {
    color: var(--sc-blue-focus) !important;
    font-weight: 600 !important;
}

/* Tages-Zellen */
#panel_app .datepicker-day-view .table-days td span {
    background-color: transparent !important;
    color: rgba(255,255,255,0.78) !important;
}

/* Hover auf Tagen */
#panel_app .datepicker-day-view .table-days td span:hover {
    background-color: rgba(245,158,11,0.15) !important;
    color: var(--sc-amber) !important;
    border-radius: 8px !important;
}

/* Heutiger Tag */
#panel_app .datepicker-day-view .table-days td.today span {
    background-color: var(--sc-blue) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Ausgewaehlter Tag */
#panel_app .datepicker-day-view .table-days td.selected span {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    border-radius: 8px !important;
    text-shadow: none !important;
}

/* Andere Monate (ausgegraut) */
#panel_app .datepicker-day-view .table-days td span.other-month {
    color: rgba(255,255,255,0.2) !important;
}

/* Deaktivierte Tage */
#panel_app .datepicker-day-view .table-days td.disabled span {
    background-color: transparent !important;
    color: rgba(255,255,255,0.15) !important;
}

/* Monats-/Jahresansicht */
#panel_app .datepicker-month-view .month-item,
#panel_app .datepicker-year-view .year-item {
    background-color: transparent !important;
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .datepicker-month-view .month-item:hover,
#panel_app .datepicker-year-view .year-item:hover {
    background-color: rgba(245,158,11,0.15) !important;
    color: var(--sc-amber) !important;
}

#panel_app .datepicker-month-view .month-item.selected,
#panel_app .datepicker-year-view .year-item.selected {
    background-color: var(--sc-blue) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Tage mit Events (Punkte) */
#panel_app .datepicker-day-view .table-days td .alter-calendar-day {
    color: var(--sc-amber) !important;
}

/* Upcoming Events Cards */
#panel_app .events-calendar__upcoming-event-date-box,
#panel_app .dashboard-events-calendar__day-box {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
}

/* --- 24.20 Tabs in Panel --- */
#panel_app .custom-tabs .tab-toggle-item {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .custom-tabs .tab-toggle-item.active {
    color: var(--sc-blue) !important;
}

/* Nav tabs */
#panel_app .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

#panel_app .nav-tabs .nav-link {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--sc-blue) !important;
    border-bottom-color: var(--sc-blue) !important;
}

/* --- 24.21 Hover States --- */
#panel_app a:hover .text-dark {
    color: var(--sc-amber) !important;
}

#panel_app a:hover .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* --- 24.22 Empty State Illustrations --- */
#panel_app .border-dashed.rounded-16 {
    background: rgba(255,255,255,0.02) !important;
}

/* --- 24.23 Badges --- */
#panel_app .badge-counter {
    min-width: 16px !important;
    min-height: 16px !important;
}

/* --- 24.24 Panel Mobile Overrides --- */
@media (max-width: 991px) {
    .panel-sidebar {
        z-index: 1000 !important;
    }
}


/* --- 24.25 Panel Bottom Bar (Settings Save) --- */
.panel-bottom-bar,
#panel_app .panel-bottom-bar {
    background: var(--sc-surface) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* --- 24.26 Card with Dashed Mask (Notifications, Top-Bars) --- */
#panel_app .card-with-dashed-mask {
    border: 1px solid rgba(255,255,255,0.06) !important;
}
#panel_app .card-with-dashed-mask::before,
#panel_app .card-with-dashed-mask::after {
    border: none !important;
}

/* --- 24.27 Actions Dropdown (Table Row Actions) --- */
#panel_app .actions-dropdown__dropdown-menu {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    border-radius: 12px !important;
}

#panel_app .actions-dropdown__dropdown-menu ul {
    background: transparent !important;
}

#panel_app .actions-dropdown__dropdown-menu-item a,
#panel_app .actions-dropdown__dropdown-menu-item button {
    color: rgba(255,255,255,0.78) !important;
    background: transparent !important;
}

#panel_app .actions-dropdown__dropdown-menu-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

#panel_app .actions-dropdown__dropdown-menu-item a:hover,
#panel_app .actions-dropdown__dropdown-menu-item button:hover,
#panel_app .actions-dropdown__dropdown-menu-item:hover a,
#panel_app .actions-dropdown__dropdown-menu-item:hover button {
    color: var(--sc-amber) !important;
    background: transparent !important;
}

/* --- 24.28 Info Alert Boxes (bg-primary-20, bg-warning-20) --- */
#panel_app .bg-primary-20 {
    background: rgba(91,141,239,0.12) !important;
}

#panel_app .bg-warning-20 {
    background: rgba(245,158,11,0.12) !important;
}

#panel_app .bg-primary-30 {
    background: rgba(91,141,239,0.2) !important;
}

/* --- 24.29 Payment Channel Cards (Financial Charge) --- */
#panel_app .custom-input-button label {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .custom-input-button input:checked ~ label {
    background: var(--sc-blue) !important;
    color: #ffffff !important;
    border-color: var(--sc-blue) !important;
}

#panel_app .custom-input-button .bg-gray-100 {
    background: rgba(255,255,255,0.08) !important;
}

#panel_app .payment-channel-mask {
    background: transparent !important;
}

/* --- 24.30 Daterangepicker Dark Theme --- */
.daterangepicker {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    color: rgba(255,255,255,0.85) !important;
}

.daterangepicker .calendar-table {
    background: var(--sc-surface) !important;
    border: none !important;
}

.daterangepicker .calendar-table th {
    color: rgba(255,255,255,0.58) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.daterangepicker .calendar-table td {
    color: rgba(255,255,255,0.88) !important;
    background: transparent !important;
    font-size: 14px !important;
}

/* Monats-/Jahresheader */
.daterangepicker .calendar-table th.month {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Sora', sans-serif !important;
}

.daterangepicker td.off {
    color: rgba(255,255,255,0.25) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--sc-blue) !important;
    color: #ffffff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(91,141,239,0.15) !important;
    color: rgba(255,255,255,0.85) !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.daterangepicker .drp-buttons .btn {
    color: rgba(255,255,255,0.78) !important;
    font-size: 14px !important;
}

.daterangepicker .drp-buttons .btn-primary {
    background: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
}

.daterangepicker .drp-buttons .btn-primary:hover {
    background: var(--sc-amber-hover) !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Time Selects (Stunden:Minuten) */
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
}

/* Pfeil (Arrow) */
.daterangepicker::before,
.daterangepicker::after {
    border-bottom-color: var(--sc-surface) !important;
}

.daterangepicker::before {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Prev/Next Pfeile */
.daterangepicker th.prev span,
.daterangepicker th.next span {
    border-color: rgba(255,255,255,0.68) !important;
}

/* Hover auf Tagen */
.daterangepicker td:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* "clear" Link */
.daterangepicker .drp-buttons .cancelBtn {
    color: rgba(255,255,255,0.58) !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    color: var(--sc-amber) !important;
}

.daterangepicker .ranges li {
    color: rgba(255,255,255,0.78) !important;
}

.daterangepicker .ranges li:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--sc-amber) !important;
}

.daterangepicker .ranges li.active {
    background: var(--sc-blue) !important;
    color: #ffffff !important;
}

/* --- 24.31 Support Ticket & Conversation Lists --- */
#panel_app .support-ticket-lists,
#panel_app .support-conversation-lists {
    background: var(--sc-surface) !important;
    border-radius: 16px !important;
}

#panel_app .support-ticket-item,
#panel_app .support-conversation-item {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .support-ticket-item:hover,
#panel_app .support-conversation-item:hover {
    background: rgba(255,255,255,0.04) !important;
}

#panel_app .support-ticket-item.active,
#panel_app .support-conversation-item.active {
    background: rgba(91,141,239,0.1) !important;
    border-left: 3px solid var(--sc-blue) !important;
}

/* Support Messages Area */
#panel_app .support-messages-area,
#panel_app .conversation-messages-area {
    background: var(--sc-surface) !important;
    border-radius: 16px !important;
}

#panel_app .support-message-card {
    background: var(--sc-surface-input) !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.85) !important;
}

#panel_app .support-message-card.is-supporter {
    background: rgba(91,141,239,0.1) !important;
}

/* --- 24.32 Notification Card Refinements --- */
#panel_app .js-show-message .bg-primary {
    background: var(--sc-blue) !important;
}

#panel_app .notification-badge {
    background: var(--sc-amber) !important;
}

/* --- 24.33 Settings Step Tabs (navbar-item inside settings) --- */
#panel_app .custom-tabs .navbar-item {
    color: rgba(255,255,255,0.78) !important;
}

#panel_app .custom-tabs .navbar-item .icons {
    color: rgba(255,255,255,0.58) !important;
}

#panel_app .custom-tabs .navbar-item.active {
    color: var(--sc-blue) !important;
    border-bottom-color: var(--sc-blue) !important;
}

#panel_app .custom-tabs .navbar-item.active .icons {
    color: var(--sc-blue) !important;
}

#panel_app .custom-tabs .navbar-item:hover {
    color: var(--sc-amber) !important;
}

#panel_app .custom-tabs .navbar-item:hover .icons {
    color: var(--sc-amber) !important;
}

/* --- 24.34 Register Mobile Form Group (Phone Input) --- */
#panel_app .register-mobile-form-group {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

#panel_app .register-mobile-form-group .form-group-label {
    color: rgba(255,255,255,0.78) !important;
    background: var(--sc-surface-input) !important;
}

/* --- 24.35 Custom File Upload --- */
#panel_app .custom-file.bg-white,
#panel_app .custom-file {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

#panel_app .custom-file-label {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.5) !important;
}

#panel_app .custom-file-text {
    color: rgba(255,255,255,0.5) !important;
}

/* --- 24.36 Profile Cover & Image Settings --- */
#panel_app .user-setting-profile-cover {
    background: var(--sc-surface-input) !important;
}

#panel_app .border-dashed.cursor-pointer,
#panel_app label.border-dashed {
    border-color: rgba(255,255,255,0.15) !important;
}

/* --- 24.37 Soft Shadow Override --- */
#panel_app .soft-shadow-2 {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* --- 24.38 Filter Sections in Panel --- */
#panel_app .filters-card {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* --- 24.39 No Result Page --- */
#panel_app .no-result {
    background: var(--sc-surface) !important;
}

#panel_app .no-result h3 {
    color: #ffffff !important;
}

#panel_app .no-result .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* --- 24.40 Payout Border Box --- */
#panel_app .border-gray-200.p-16.rounded-12 {
    border-color: rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   §26 – CERTIFICATE VALIDATION (Frontend, app.blade.php Layout)
   ========================================================================== */

/* Container & Card */
.instructor-finder-wizard {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.instructor-finder-wizard__mask {
    background: var(--sc-surface-input) !important;
}

.instructor-finder-wizard .font-weight-bold {
    color: #ffffff !important;
}

.instructor-finder-wizard .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.instructor-finder-wizard .form-group-label {
    color: rgba(255,255,255,0.78) !important;
    background: var(--sc-surface) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 4px !important;
}

.instructor-finder-wizard .form-control {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
}

.instructor-finder-wizard .form-control:focus {
    border-color: var(--sc-blue-focus) !important;
}

.instructor-finder-wizard__images-card {
    background: var(--sc-surface-input) !important;
}

/* Certificate Validation Result */
.instructor-finder-wizard .border-gray-200 {
    border-color: rgba(255,255,255,0.1) !important;
}

.instructor-finder-wizard .text-ellipsis {
    color: rgba(255,255,255,0.85) !important;
}

/* ==========================================================================
   §27 – FORUM CREATE TOPIC (Frontend, app.blade.php Layout)
   ========================================================================== */

/* Forum Container Card */
body .container .bg-white.mt-24.p-16.rounded-24:has(.main-summernote),
body .container .bg-white.mt-24.rounded-24:has(.main-summernote) {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Summernote Editor */
.note-editor.note-frame {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.note-editor .note-toolbar {
    background: var(--sc-surface) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.note-editor .note-toolbar .note-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.78) !important;
}

.note-editor .note-toolbar .note-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--sc-amber) !important;
}

.note-editor .note-toolbar .note-btn.active {
    background: rgba(91,141,239,0.15) !important;
    color: var(--sc-blue-focus) !important;
}

.note-editor .note-editing-area .note-editable {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.85) !important;
}

.note-editor .note-statusbar {
    background: var(--sc-surface) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.note-editor .note-statusbar .note-resizebar {
    border-top: none !important;
}

/* Forum Hero */
.forums-create-topic-hero,
.forums-hero {
    background: linear-gradient(135deg, var(--sc-navy) 0%, #1B2D4A 100%) !important;
}

/* ==========================================================================
   §25 – BECOME INSTRUCTOR / REGISTRATION PACKAGES
   Wizard-Formular + Paket-Auswahl (benoetigt Login)
   ========================================================================== */

/* --- 25.1 Wizard Container --- */
.become-instructor-wizard {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.become-instructor-wizard__mask {
    background: var(--sc-surface-deep) !important;
    opacity: 0.5 !important;
}

/* Page Title & Hint */
.become-instructor-wizard ~ .d-flex-center h1,
.container > .d-flex-center > h1 {
    color: #ffffff !important;
}

/* --- 25.1b Spacing: weniger Abstand oben, Formular naeher am Header --- */
.container.mt-104:has(.become-instructor-wizard) {
    margin-top: 40px !important;
    padding-bottom: 60px !important;
}

/* --- 25.2 Form Card: volle Hoehe, kein internes Scrollen --- */
.become-instructor-wizard__form-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    color: rgba(255,255,255,0.85) !important;
}

.become-instructor-wizard__images-card {
    height: auto !important;
    min-height: 400px !important;
}

.become-instructor-wizard__form-card h3,
.become-instructor-wizard__form-card h5 {
    color: #ffffff !important;
}

.become-instructor-wizard__form-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.become-instructor-wizard__form-card .text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

/* Form Labels */
.become-instructor-wizard__form-card .form-group-label {
    color: rgba(255,255,255,0.78) !important;
    background: var(--sc-surface) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 4px !important;
}

.become-instructor-wizard__form-card label {
    color: rgba(255,255,255,0.78) !important;
}

/* Form Inputs */
.become-instructor-wizard__form-card .form-control,
.become-instructor-wizard__form-card input[type="text"],
.become-instructor-wizard__form-card textarea {
    background: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.become-instructor-wizard__form-card .form-control::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.become-instructor-wizard__form-card .form-control:focus {
    background: var(--sc-surface-focus) !important;
    border-color: var(--sc-blue-focus) !important;
}

/* Select2 inside wizard */
.become-instructor-wizard__form-card .select2-container .select2-selection {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.become-instructor-wizard__form-card .select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

.become-instructor-wizard__form-card .select2-container .select2-selection__placeholder {
    color: rgba(255,255,255,0.58) !important;
}

/* Multi-select Tags */
.become-instructor-wizard__form-card .select2-selection--multiple .select2-selection__choice {
    background: rgba(91,141,239,0.15) !important;
    color: var(--sc-blue-focus) !important;
    border: 1px solid rgba(91,141,239,0.25) !important;
    border-radius: 8px !important;
}

.become-instructor-wizard__form-card .select2-selection__choice__remove {
    color: rgba(255,255,255,0.5) !important;
}

/* Role Radio Buttons (Dozent/Organisation) */
.become-instructor-wizard__form-card .border-gray-300 {
    border-color: rgba(255,255,255,0.1) !important;
    background: var(--sc-surface-input) !important;
}

.become-instructor-wizard__form-card .custom-input-button label {
    color: rgba(255,255,255,0.68) !important;
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.become-instructor-wizard__form-card .custom-input-button label:hover {
    color: var(--sc-amber) !important;
    background: var(--sc-surface-hover) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.become-instructor-wizard__form-card .custom-input-button input:checked ~ label {
    background: var(--sc-blue) !important;
    color: #ffffff !important;
    border-color: var(--sc-blue) !important;
}

/* File Upload */
.become-instructor-wizard__form-card .custom-file {
    background: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.become-instructor-wizard__form-card .custom-file-text {
    color: rgba(255,255,255,0.5) !important;
}

.become-instructor-wizard__form-card .custom-file-label {
    background: transparent !important;
}

.become-instructor-wizard__form-card .custom-file-label .icons {
    color: rgba(255,255,255,0.58) !important;
}

/* Submit Button */
.become-instructor-wizard__form-card .btn-primary {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.become-instructor-wizard__form-card .btn-primary:hover {
    background-color: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

/* Scrollbar */
.become-instructor-wizard__form-card .simplebar-scrollbar::before {
    background: rgba(255,255,255,0.15) !important;
}

/* --- 25.3 Images Card --- */
.become-instructor-wizard__images-card {
    background: var(--sc-surface-input) !important;
}

/* --- 25.4 Registration Packages Page --- */

/* Package Cards */
.registration-package-label-card {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.registration-package-label-card:hover {
    border-color: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px) !important;
}

/* Selected Package */
.registration-package-radio input:checked ~ label .registration-package-label-card {
    border-color: var(--sc-amber) !important;
    box-shadow: 0 0 0 1px var(--sc-amber) !important;
}

.registration-package-label-card h3 {
    color: #ffffff !important;
}

.registration-package-label-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.registration-package-label-card .text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

.registration-package-label-card .font-44,
.registration-package-label-card .font-weight-bold {
    color: #ffffff !important;
}

.registration-package-label-card .text-decoration-line-through {
    color: rgba(255,255,255,0.58) !important;
}

/* Card Mask */
.registration-package-label-card .card-mask,
.registration-package-radio .card-mask {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent) !important;
}

/* Package Icon */
.registration-package-card__icon .bg-primary {
    background: var(--sc-blue) !important;
}

/* Feature List */
.registration-package-label-card .plan-feature .font-weight-bold {
    color: #ffffff !important;
}

.registration-package-label-card .plan-feature .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Current Package Banner */
.registration-current-package {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.registration-current-package .text-dark {
    color: #ffffff !important;
}

.registration-current-package .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Bottom Fixed Bar (Packages Page) */
.fixed-bottom.bg-white {
    background: var(--sc-navy) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.fixed-bottom .bg-gray-300 {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
}


/* ==========================================================================
   §28 – COURSE DETAIL PAGE (Dark Theme)
   Scoping via .course-hero (nur Kursdetail-Seiten haben dieses Element)
   ========================================================================== */

/* --- Seiten-Hintergrund --- */
main:has(.course-hero) {
    background: var(--sc-surface-deep) !important;
}

/* --- Hero: Navy-Uebergang vom Navbar --- */
.course-hero {
    margin-top: -140px !important;
    padding-top: 194px !important;
    background: var(--sc-surface-deep) !important;
}

.course-hero__mask {
    background: linear-gradient(90deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.3) 100%) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

/* --- Tabs-Leiste (Ueber den Kurs, Inhalt, Kommentare, Bewertungen) --- */
.course-tabs-card__mask {
    background: var(--sc-surface) !important;
    opacity: 1 !important;
}

.course-tabs-card .bg-white {
    background: var(--sc-surface) !important;
}

.course-tabs-card .navbar-item span {
    color: rgba(255,255,255,0.78) !important;
}

.course-tabs-card .navbar-item.active span {
    color: var(--sc-amber) !important;
}

.course-tabs-card .navbar-item.active {
    border-bottom-color: var(--sc-amber) !important;
}

.course-tabs-card .navbar-item:hover span {
    color: var(--sc-amber) !important;
}

.course-tabs-card .navbar-item .course-tab-counter {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.78) !important;
}

.course-tabs-card .navbar-item.active .course-tab-counter {
    background: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

/* --- Linke Seite: Content-Bereich --- */
.course-body-side .bg-white {
    background: var(--sc-surface) !important;
}

/* Kurs-Beschreibung – hoher Kontrast fuer Lesbarkeit (Lernplattform!) */
.course-show-description {
    color: rgba(255,255,255,0.88) !important;
}

.course-show-description p {
    color: rgba(255,255,255,0.88) !important;
}

.course-show-description li {
    color: rgba(255,255,255,0.88) !important;
}

.course-body-side .font-weight-bold,
.course-body-side h2,
.course-body-side h3,
.course-body-side h4 {
    color: #ffffff !important;
}

.course-body-side .text-dark {
    color: #ffffff !important;
}

.course-body-side .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.course-body-side .text-gray-400 {
    color: rgba(255,255,255,0.68) !important;
}

/* --- Instructor-Karte (Ueber den Dozenten) --- */
.course-about-instructor-card__mask {
    background: var(--sc-surface) !important;
    opacity: 1 !important;
}

.course-about-instructor-card .bg-white {
    background: var(--sc-surface) !important;
}

.course-about-instructor-card .font-weight-bold,
.course-about-instructor-card a {
    color: #ffffff !important;
}

.course-about-instructor-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.course-about-instructor-card .text-dark {
    color: #ffffff !important;
}

/* --- Kursinhalt (Accordion) --- */
.course-body-side .accordion .bg-white,
.course-body-side .accordion .bg-gray-100 {
    background: var(--sc-surface) !important;
}

.course-body-side .bg-gray-100 {
    background: rgba(255,255,255,0.05) !important;
}

.course-body-side .accordion__title {
    color: #ffffff !important;
}

.course-body-side .accordion__title .font-weight-bold {
    color: #ffffff !important;
}

.course-body-side .accordion .icons.text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.course-body-side .border-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

.course-body-side .border-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

.course-body-side .border-top-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

.course-body-side .border-bottom-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

/* Kursinhalt-Lektionen */
.course-body-side .p-16.bg-white.border-gray-200,
.course-body-side .position-relative.bg-white.border-gray-200 {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Separator-Kreise */
.course-content-separator-with-circles .circle-top,
.course-content-separator-with-circles .circle-bottom {
    background: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.course-content-separator-with-circles:after {
    border-left-color: rgba(255,255,255,0.15) !important;
}

/* --- Kommentare & Bewertungen --- */
.course-body-side .review-rate-box__mask {
    background: var(--sc-surface) !important;
    opacity: 1 !important;
}

.course-body-side .review-rate-box .bg-white {
    background: var(--sc-surface) !important;
}

.course-body-side .review-progress {
    background: rgba(255,255,255,0.08) !important;
}

.course-body-side .review-progress__bar {
    background: var(--sc-amber) !important;
}

/* Kommentar-Labels und Ueberschriften (h5, h6 ohne Farbklasse) */
.course-body-side h5,
.course-body-side h6 {
    color: #ffffff !important;
}

.course-body-side p {
    color: rgba(255,255,255,0.88) !important;
}

/* Kommentar-Eingabefeld */
.course-body-side textarea.form-control,
.course-body-side input.form-control {
    background: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

.course-body-side textarea.form-control::placeholder,
.course-body-side input.form-control::placeholder {
    color: rgba(255,255,255,0.88) !important;
}

/* Kommentar/Bewertung Buttons */
.course-body-side .btn-primary {
    background: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

.course-body-side .btn-primary:hover {
    background: var(--sc-blue-hover) !important;
    border-color: var(--sc-blue-hover) !important;
}

.course-body-side .bg-gray-400 {
    background: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.78) !important;
}

/* Sterne-Bewertung */
.course-body-side .rating-stars .icons,
.course-body-side .review-rate-box .icons.text-warning {
    color: var(--sc-amber) !important;
}

/* --- Rechte Sidebar --- */
.course-right-side-section__mask {
    background: var(--sc-surface) !important;
    opacity: 1 !important;
}

.course-right-side .bg-white {
    background: var(--sc-surface) !important;
}

.course-right-side .font-24.font-weight-bold {
    color: #ffffff !important;
}

/* Einschreiben/Kaufen Button: Amber CTA */
.course-right-side .btn-primary.btn-block {
    background: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.course-right-side .btn-primary.btn-block:hover {
    background: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
    transform: translateY(-1px) !important;
}

/* Kursspezifikationen */
.course-right-side .font-12.font-weight-bold {
    color: #ffffff !important;
}

.course-right-side .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.course-right-side .icons.text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.course-right-side .text-dark {
    color: #ffffff !important;
}

.course-right-side .font-weight-bold {
    color: #ffffff !important;
}

/* Favorit/Teilen-Bereich */
.course-right-side .border-dashed.border-gray-200 {
    border-color: rgba(255,255,255,0.1) !important;
}

.course-right-side .border-dashed .text-gray-500,
.course-right-side .border-dashed .icons.text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.course-right-side .border-dashed a:hover .icons,
.course-right-side .border-dashed a:hover span,
.course-right-side .border-dashed .cursor-pointer:hover .icons,
.course-right-side .border-dashed .cursor-pointer:hover span {
    color: var(--sc-amber) !important;
}

/* Spezifikations-Werte (Spans ohne Klasse) */
.course-right-side-section span {
    color: #ffffff !important;
}

/* Inhalt melden Link */
.course-right-side .text-center .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.course-right-side .text-center .text-gray-500:hover {
    color: var(--sc-amber) !important;
}

/* Dozenten-Rating-Karte */
.course-right-side__teacher-rate-card.bg-gray-100 {
    background: rgba(255,255,255,0.05) !important;
}

.course-right-side .border-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

.course-right-side .bg-gray-100 {
    background: rgba(255,255,255,0.05) !important;
}

/* Dozenten-Profil-Button: Amber */
.course-right-side .btn-primary.btn-lg {
    background: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.course-right-side .btn-primary.btn-lg:hover {
    background: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

/* --- Bottom Fixed Bar (Scrollbar am unteren Rand) --- */
.course-bottom-fixed-card.bg-white {
    background: var(--sc-surface) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
}

.course-bottom-fixed-card .text-dark,
.course-bottom-fixed-card .font-weight-bold {
    color: #ffffff !important;
}

.course-bottom-fixed-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.course-bottom-fixed-card .btn-primary {
    background: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.course-bottom-fixed-card .btn-primary:hover {
    background: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

.course-bottom-fixed-card__progress .progress-line {
    background: var(--sc-amber) !important;
}

/* --- Voraussetzungen-Karten --- */
.course-prerequisite-card__mask {
    background: linear-gradient(1deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0) 100%) !important;
}

.course-prerequisite-card__required {
    background: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

/* --- Breadcrumb im Hero --- */
.course-hero__content .text-white.opacity-50 a {
    color: rgba(255,255,255,0.78) !important;
}

.course-hero__content .text-white.opacity-50 a:hover {
    color: var(--sc-amber) !important;
}

/* --- Gift Card --- */
.course-show__gift-card-box {
    background: var(--sc-surface) !important;
}

.course-show__gift-card-title {
    color: #ffffff !important;
}

.course-show__gift-card-subtitle {
    color: rgba(255,255,255,0.78) !important;
}

/* --- Schriftgroessen: font-12 → 14px, font-14 → 16px (bessere Lesbarkeit auf Dark) --- */
.course-body-side .font-12,
.course-body-side .font-12 span {
    font-size: 14px !important;
}

.course-body-side .font-14 {
    font-size: 16px !important;
}

.course-body-side .font-16 {
    font-size: 17px !important;
}

/* Kurs-Beschreibung Body-Text groesser */
.course-show-description,
.course-show-description p,
.course-show-description li {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Tabs groesser */
.course-tabs-card .navbar-item span {
    font-size: 16px !important;
}

/* Accordion-Titel (Lehrplan, Sektionen) */
.course-body-side .accordion__title .font-weight-bold,
.course-body-side .accordion__title span {
    font-size: 16px !important;
}

/* Lektionen-Text */
.course-body-side .accordion .font-14,
.course-body-side .accordion .font-12 {
    font-size: 15px !important;
}

/* Kommentar-Bereich */
.course-body-side textarea.form-control {
    font-size: 15px !important;
}

.course-body-side .font-weight-bold {
    font-size: 16px !important;
}

/* Bewertungs-Labels */
.course-body-side .review-rate-box .font-14,
.course-body-side .review-rate-box span {
    font-size: 15px !important;
}

/* Bewertungs-Score gross */
.course-body-side .review-rate-box .font-36 {
    font-size: 40px !important;
}

/* Dozenten-Karte Text groesser */
.course-about-instructor-card .font-14 {
    font-size: 16px !important;
}

.course-about-instructor-card .font-12 {
    font-size: 14px !important;
}

/* Rechte Sidebar Schriftgroessen */
.course-right-side .font-12 {
    font-size: 14px !important;
}

.course-right-side .font-14 {
    font-size: 15px !important;
}

/* Sidebar Preis */
.course-right-side .font-24 {
    font-size: 26px !important;
}

/* Sidebar Kursspezifikationen */
.course-right-side-section .font-14 {
    font-size: 15px !important;
}

/* --- Kurs-Abstaende --- */
main:has(.course-hero) .pb-120 {
    padding-bottom: 40px !important;
}


/* ==========================================================================
   §29 – USER PROFILE PAGE (Dark Theme)
   Scoping via .profile-container
   ========================================================================== */

/* --- Seiten-Hintergrund --- */
main:has(.profile-container) {
    background: var(--sc-surface-deep) !important;
}

/* --- Cover: Navy-Uebergang --- */
.profile-cover-card {
    margin-top: -140px !important;
    padding-top: 140px !important;
}

.profile-cover-card:after {
    background: linear-gradient(1deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.2) 100%) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* --- Profil-Karte links --- */
.profile-card-has-mask.bg-white {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.profile-card-has-mask:after {
    background: var(--sc-surface) !important;
    opacity: 0.6 !important;
}

/* Name */
.profile-card-has-mask h4 {
    color: #ffffff !important;
}

/* Sterne */
.profile-card-has-mask .stars-card__item.active {
    color: var(--sc-amber) !important;
}

.profile-card-has-mask .stars-card__item:not(.active) {
    color: rgba(255,255,255,0.2) !important;
}

.profile-card-has-mask .stars-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Follower-Zahlen */
.profile-followers-card .font-weight-bold {
    color: #ffffff !important;
}

.profile-followers-card .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Folgen-Button: Amber CTA */
.profile-card-has-mask .btn-primary {
    background: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.profile-card-has-mask .btn-primary:hover {
    background: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

/* Mitglied seit */
.profile-card-has-mask .border-top-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

.profile-card-has-mask .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* --- Tabs-Bereich rechts --- */
.profile-tabs-items {
    border-color: rgba(255,255,255,0.08) !important;
}

.profile-tabs-items .navbar-item {
    color: rgba(255,255,255,0.78) !important;
}

.profile-tabs-items .navbar-item .icons {
    color: rgba(255,255,255,0.68) !important;
}

.profile-tabs-items .navbar-item span {
    color: rgba(255,255,255,0.78) !important;
}

.profile-tabs-items .navbar-item.active span,
.profile-tabs-items .navbar-item.active .icons {
    color: var(--sc-amber) !important;
}

.profile-tabs-items .navbar-item.active {
    border-bottom-color: var(--sc-amber) !important;
    color: var(--sc-amber) !important;
}

.profile-tabs-items .navbar-item:hover span,
.profile-tabs-items .navbar-item:hover .icons {
    color: var(--sc-amber) !important;
}

/* --- Tab-Inhalte: Hintergrund & Text --- */
.profile-container .custom-tabs-content {
    color: rgba(255,255,255,0.88) !important;
}

/* Statistik-Karten (Teilnehmer, Kurse, Artikel, Meetings) */
.profile-container .custom-tabs-content .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.profile-container .custom-tabs-content .font-weight-bold {
    color: #ffffff !important;
}

.profile-container .custom-tabs-content .text-dark {
    color: #ffffff !important;
}

/* Ueber mich Text */
.profile-container .custom-tabs-content h4,
.profile-container .custom-tabs-content h5,
.profile-container .custom-tabs-content h6 {
    color: #ffffff !important;
}

.profile-container .custom-tabs-content p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* --- Kurs-Karten im Profil (Tab "Kurse") --- */
.profile-container .course-grid-card-1 {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.profile-container .course-grid-card-1:hover {
    background: var(--sc-surface-hover) !important;
    transform: translateY(-4px) !important;
    border-color: var(--sc-amber) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
}

.profile-container .course-grid-card-1__mask {
    display: none !important;
}

.profile-container .course-grid-card-1__body {
    background: var(--sc-surface) !important;
}

.profile-container .course-grid-card-1:hover .course-grid-card-1__body {
    background: var(--sc-surface-hover) !important;
}

.profile-container .course-grid-card-1 .course-title,
.profile-container .course-grid-card-1 h3 {
    color: #ffffff !important;
}

.profile-container .course-grid-card-1 .text-dark,
.profile-container .course-grid-card-1 .font-weight-bold {
    color: #ffffff !important;
}

.profile-container .course-grid-card-1 span {
    color: rgba(255,255,255,0.88) !important;
}

.profile-container .course-grid-card-1 .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.profile-container .course-grid-card-1 .text-primary {
    color: var(--sc-blue) !important;
}

.profile-container .course-grid-card-1 .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

.profile-container .course-grid-card-1 .icons.text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Sterne in Kurs-Karten */
.profile-container .course-grid-card-1 .stars-card__item.active {
    color: var(--sc-amber) !important;
}

.profile-container .course-grid-card-1 .stars-card__item:not(.active) {
    color: rgba(255,255,255,0.2) !important;
}

/* --- Borders & Trenner --- */
.profile-container .border-bottom-gray-200,
.profile-container .border-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

.profile-container .border-top-gray-100,
.profile-container .border-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

/* --- Hintergrund-Elemente --- */
.profile-container .bg-white {
    background: var(--sc-surface) !important;
}

.profile-container .bg-gray-100 {
    background: rgba(255,255,255,0.05) !important;
}

/* --- Leere Tabs (keine Eintraege) --- */
.profile-container .no-result .text-gray-500,
.profile-container .no-result p {
    color: rgba(255,255,255,0.78) !important;
}

.profile-container .no-result .font-weight-bold {
    color: #ffffff !important;
}

/* --- Meeting reservieren Button --- */
.profile-container .btn-primary {
    background: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
}

.profile-container .btn-primary:hover {
    background: var(--sc-amber-hover) !important;
    border-color: var(--sc-amber-hover) !important;
}

/* --- Schriftgroessen (analog zu §28) --- */
.profile-container .font-12 {
    font-size: 14px !important;
}

.profile-container .font-14 {
    font-size: 16px !important;
}


/* ==========================================================================
   §30 Share/Teilen Modal (SweetAlert2)
   - Dark Theme fuer den Teilen-Dialog auf Kursseiten
   - Struktur: .swal2-popup > .swal2-html-container > .js-custom-modal
   - js-custom-modal ist ein Kind von swal2-popup, NICHT auf dem popup selbst
   ========================================================================== */

/* Modal-Hintergrund: swal2-popup das js-custom-modal enthaelt */
.swal2-popup:has(.js-custom-modal) {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 0 !important;
}

/* SweetAlert HTML-Container Reset */
.swal2-popup:has(.js-custom-modal) .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* SweetAlert Overlay */
.swal2-container:has(.js-custom-modal) {
    background: rgba(0,0,0,0.6) !important;
}

/* Modal Header: Titel "Teilen" (h3.text-black) */
.js-custom-modal h3.text-black,
.js-custom-modal h3 {
    color: #ffffff !important;
}

/* Close Button (X oben rechts) */
.js-custom-modal .modal-close-btn,
.js-custom-modal .close-swl {
    color: rgba(255,255,255,0.58) !important;
    background: transparent !important;
    border: none !important;
}

.js-custom-modal .modal-close-btn:hover,
.js-custom-modal .close-swl:hover {
    color: var(--sc-amber) !important;
}

.js-custom-modal .close-icon {
    color: rgba(255,255,255,0.58) !important;
}

.js-custom-modal .modal-close-btn:hover .close-icon {
    color: var(--sc-amber) !important;
}

/* Inhalt-Titel: "Teile diesen Inhalt mit deinen Freunden" */
.js-custom-modal .text-dark,
.js-custom-modal h4 {
    color: #ffffff !important;
}

/* Beschreibung */
.js-custom-modal .basic-modal-body .text-gray-500,
.js-custom-modal .basic-modal-body p {
    color: rgba(255,255,255,0.78) !important;
}

/* Social Media Buttons - dunkler Hintergrund */
.js-custom-modal .bg-whatsapp-50,
.js-custom-modal .bg-twitter-50,
.js-custom-modal .bg-telegram-50,
.js-custom-modal .bg-facebook-50,
.js-custom-modal .bg-linkedin-50 {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    transition: all 0.2s ease !important;
}

.js-custom-modal .bg-whatsapp-50:hover,
.js-custom-modal .bg-twitter-50:hover,
.js-custom-modal .bg-telegram-50:hover,
.js-custom-modal .bg-facebook-50:hover,
.js-custom-modal .bg-linkedin-50:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: var(--sc-amber) !important;
}

/* Social Media Icons - Originalfarben beibehalten */
.js-custom-modal .text-whatsapp {
    color: #25D366 !important;
}

.js-custom-modal .text-twitter {
    color: #1DA1F2 !important;
}

.js-custom-modal .text-telegram {
    color: #0088cc !important;
}

.js-custom-modal .text-facebook {
    color: #1877F2 !important;
}

.js-custom-modal .text-linkedin {
    color: #0A66C2 !important;
}

/* URL-Kopierfeld */
.js-custom-modal .form-group.bg-white,
.js-custom-modal .bg-white.border-gray-200 {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* URL Text */
.js-custom-modal .form-group .text-gray-500,
.js-custom-modal .form-group > span {
    color: rgba(255,255,255,0.68) !important;
}

/* Kopier-Icon */
.js-custom-modal .icons.text-gray-400 {
    color: rgba(255,255,255,0.58) !important;
}

.js-custom-modal .icons.text-gray-400:hover {
    color: var(--sc-amber) !important;
}

/* Modal Footer */
.js-custom-modal .custom-modal-footer,
.js-custom-modal .custom-modal-footer.bg-gray-100 {
    background: rgba(255,255,255,0.04) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.js-custom-modal .custom-modal-footer span,
.js-custom-modal .custom-modal-footer a {
    color: rgba(255,255,255,0.68) !important;
}

.js-custom-modal .custom-modal-footer a:hover {
    color: var(--sc-amber) !important;
}


/* ==========================================================================
   §31 Learning Page (/course/learning/*)
   - Dark Theme fuer die Lernseite (Vollbild-Layout ohne Header/Footer)
   - Struktur: .learning-page > .learning-page__main + .learning-page__sidebar
   ========================================================================== */

/* --- Gesamtseite --- */
.learning-page {
    background: var(--sc-surface-deep) !important;
}

/* bg-primary nutzt var(--primary) !important -> wir muessen background-color nutzen */

/* --- Top Header (Kursname, Breadcrumb, Tools) --- */
.learning-page__top-header,
.learning-page__top-header.bg-white {
    background: var(--sc-surface) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.learning-page__top-header .text-dark,
.learning-page__top-header h3,
.learning-page__top-header h4 {
    color: #ffffff !important;
}

.learning-page__top-header .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.learning-page__top-header .icons.text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* Breadcrumb Trenner */
.learning-page__top-header .text-gray-300 {
    color: rgba(255,255,255,0.3) !important;
}

/* Linie zwischen Tools und Notification */
.learning-page__line-separator {
    background: rgba(255,255,255,0.12) !important;
}

/* --- Course Tools Button (im Header) --- */
.learning-page__dropdown .bg-gray-100 {
    background-color: rgba(255,255,255,0.08) !important;
}

.learning-page .learning-page__dropdown .bg-primary {
    background-color: var(--sc-amber) !important;
}

.learning-page__dropdown .bg-primary .icons.text-white {
    color: var(--sc-navy) !important;
}

.learning-page__dropdown .text-dark {
    color: #ffffff !important;
}

.learning-page__dropdown .text-gray-400 {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Notification Button (im Header) --- */
.learning-page .learning-page__top-header .bg-primary-20 {
    background-color: rgba(245,158,11,0.15) !important;
}

.learning-page .learning-page__top-header .bg-primary {
    background-color: var(--sc-amber) !important;
}

.learning-page__top-header .bg-gray-100 {
    background-color: rgba(255,255,255,0.06) !important;
}

.learning-page__top-header .bg-gray-200 {
    background-color: rgba(255,255,255,0.1) !important;
}

/* --- Course Tools Dropdown --- */
.learning-page__dropdown-menu {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.learning-page__dropdown-menu__item {
    color: rgba(255,255,255,0.88) !important;
}

.learning-page__dropdown-menu__item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--sc-amber) !important;
}

.learning-page__dropdown-menu__item .icons {
    color: rgba(255,255,255,0.58) !important;
}

.learning-page__dropdown-menu__item:hover .icons {
    color: var(--sc-amber) !important;
}

/* --- Main Content Area --- */
.learning-page__main-content {
    background: var(--sc-surface-deep) !important;
}

/* Content Info-Bar (Titel, Typ, Dauer, Download, Notiz) */
.learning-page__main-content .bg-gray-100 {
    background: var(--sc-surface) !important;
}

.learning-page__main-content h2 {
    color: #ffffff !important;
}

.learning-page__main-content .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.learning-page__main-content .icons.text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

.learning-page__main-content .text-dark {
    color: #ffffff !important;
}

/* Download/Notiz Buttons (runde bg-white Kreise) */
.learning-page__main-content .bg-white {
    background: rgba(255,255,255,0.08) !important;
}

.learning-page__main-content .bg-white:hover {
    background: rgba(255,255,255,0.14) !important;
}

/* Attachment-Karten */
.learning-page__main-content a.bg-white.text-dark {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.learning-page__main-content .bg-gray-200 {
    background: rgba(255,255,255,0.1) !important;
}

/* Text Lesson / Description Content */
.learning-page__main-content .text-gray-500 p,
.learning-page__main-content .text-gray-500 li {
    color: rgba(255,255,255,0.88) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Lektion bestanden Toggle */
.learning-page__main-content .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

.learning-page__main-content label.text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

/* Vorherige/Naechste Lektion Buttons */
.learning-page__main-content .bg-hover-gray-100 {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

.learning-page__main-content .bg-hover-gray-100:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* File Player Card */
.learning-page__file-player-card {
    background: var(--sc-surface) !important;
}

/* Dark Blue Text (empty state) */
.learning-page__main-content .text-dark-blue {
    color: #ffffff !important;
}

.learning-page__main-content .text-gray {
    color: rgba(255,255,255,0.68) !important;
}

/* --- Sidebar --- */
.learning-page__sidebar {
    background: var(--sc-surface) !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* Sidebar Header (Mobile) */
.learning-page__sidebar-header {
    background: var(--sc-surface) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* User Card im Sidebar */
.learning-page__sidebar .text-dark,
.learning-page__sidebar .font-weight-bold {
    color: #ffffff !important;
}

.learning-page__sidebar .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* --- User Card: Navy-Gradient statt grelles Blau --- */
.learning-page .learning-page__sidebar .card-with-mask .bg-primary {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2D4A 100%) !important;
    background-color: #0D1B2A !important;
}

/* Mask hinter der User Card */
.learning-page__sidebar .mask-8-white {
    opacity: 0 !important;
}

.learning-page .learning-page__sidebar .card-with-mask .bg-primary-20 {
    background-color: rgba(245,158,11,0.1) !important;
}

/* User Card inneres Div (Name, Rolle) */
.learning-page__sidebar .card-with-mask .bg-white {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.learning-page__sidebar .card-with-mask .bg-white .text-dark {
    color: #ffffff !important;
}

.learning-page__sidebar .card-with-mask .bg-white .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Teacher Icon in User Card */
.learning-page__sidebar .card-with-mask .sidebar-teacher-icon {
    color: var(--sc-amber) !important;
    opacity: 0.6 !important;
}

/* Progress Bar Container */
.learning-page .learning-page__sidebar .learning-progress.bg-gray-100,
.learning-page .learning-page__sidebar .learning-progress {
    background-color: rgba(255,255,255,0.15) !important;
}

/* Progress Bar Balken: Amber statt Primary */
.learning-page .learning-page__sidebar .learning-progress__bar.bg-primary {
    background-color: var(--sc-amber) !important;
}

/* "0% Lernfortschritt" Text */
.learning-page__sidebar .card-with-mask .text-white {
    color: rgba(255,255,255,0.85) !important;
}

/* --- General bg-primary-20 in Sidebar (Chapter Icons etc.) --- */
.learning-page .learning-page__sidebar .bg-primary-20 {
    background-color: rgba(91,141,239,0.15) !important;
}

/* Chapter/Quiz Icons */
.learning-page__sidebar .icons.text-primary {
    color: var(--sc-blue) !important;
}

/* --- Sidebar Tabs (Inhalt | Quizze | Zertifikate) --- */
.learning-page .learning-page__sidebar .sidebar-tabs,
.learning-page .learning-page__sidebar .sidebar-tabs.bg-gray-100 {
    background-color: rgba(255,255,255,0.04) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item {
    color: rgba(255,255,255,0.68) !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item span {
    color: inherit !important;
}

.learning-page .learning-page__sidebar .sidebar-tabs .navbar-item.active {
    background-color: transparent !important;
    color: var(--sc-amber) !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item:hover {
    border: 1px solid var(--sc-amber) !important;
    background-color: transparent !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item.active span {
    color: var(--sc-amber) !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item:hover {
    color: var(--sc-amber) !important;
}

.learning-page__sidebar .sidebar-tabs .navbar-item:hover span {
    color: var(--sc-amber) !important;
}

/* --- Content Items (Session, Text Lesson, File) --- */
.learning-page .learning-page__sidebar .sidebar-content-item {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.learning-page .learning-page__sidebar .sidebar-content-item:hover {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

.learning-page .learning-page__sidebar .sidebar-content-item.active {
    background-color: rgba(245,158,11,0.1) !important;
    border-color: var(--sc-amber) !important;
}

.learning-page__sidebar .sidebar-content-item .text-dark,
.learning-page__sidebar .sidebar-content-item .font-weight-bold {
    color: #ffffff !important;
}

.learning-page__sidebar .sidebar-content-item .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* Content Item Icons */
.learning-page .learning-page__sidebar .sidebar-content-item .bg-gray-200 {
    background-color: rgba(255,255,255,0.08) !important;
}

.learning-page__sidebar .sidebar-content-item .icons.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

/* Passed Checkmark */
.learning-page__sidebar .sidebar-content-item .text-success,
.learning-page__sidebar .sidebar-content-item .icons.text-success {
    color: var(--sc-emerald) !important;
}

/* Dot Separator */
.learning-page__sidebar .sidebar-item-dot-separator {
    background-color: rgba(255,255,255,0.2) !important;
}

/* --- Chapter Accordion --- */
.learning-page .learning-page__sidebar .accordion.bg-gray-100 {
    background-color: rgba(255,255,255,0.06) !important;
}

.learning-page__sidebar .accordion .font-weight-bold {
    color: #ffffff !important;
}

.learning-page__sidebar .accordion .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

.learning-page__sidebar .accordion .text-gray-400 {
    color: rgba(255,255,255,0.4) !important;
}

/* --- Quiz Status Badges --- */
.learning-page .learning-page__sidebar .bg-success-30 {
    background-color: rgba(16,185,129,0.15) !important;
}

.learning-page .learning-page__sidebar .bg-danger-30 {
    background-color: rgba(239,68,68,0.15) !important;
}

.learning-page .learning-page__sidebar .bg-warning-30 {
    background-color: rgba(245,158,11,0.15) !important;
}

.learning-page .learning-page__sidebar .bg-gray-200.text-gray-500 {
    background-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.58) !important;
}

/* --- Certificate/Download Buttons (runder bg-white Kreis) --- */
.learning-page .learning-page__sidebar .bg-white {
    background-color: rgba(255,255,255,0.08) !important;
}

.learning-page .learning-page__sidebar .bg-white:hover {
    background-color: rgba(255,255,255,0.14) !important;
}

/* --- Sidebar Borders --- */
.learning-page__sidebar .border-bottom-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

.learning-page__sidebar .border-top-gray-100 {
    border-color: rgba(255,255,255,0.06) !important;
}

.learning-page__sidebar .border-gray-300 {
    border-color: rgba(255,255,255,0.12) !important;
}

/* --- Alert Boxen (Kurs starten, Ablauf) --- */
.learning-page__sidebar .border-warning {
    border-color: var(--sc-amber) !important;
    background-color: rgba(245,158,11,0.08) !important;
}

/* --- Notification Bell --- */
.learning-page .learning-page-notify-counter {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

/* --- Schriftgroessen (analog zum restlichen Portal) --- */
.learning-page .font-12 {
    font-size: 13px !important;
}

.learning-page .font-14 {
    font-size: 15px !important;
}

/* --- Forum Cards in Learning Page --- */
.learning-page .learning-page__forum-card {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.learning-page__forum-card .text-dark {
    color: #ffffff !important;
}

.learning-page__forum-card .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

.learning-page .learning-page__forum-card .bg-gray-100 {
    background-color: rgba(255,255,255,0.06) !important;
}

/* --- Content Info-Bar unter Video (Titel, Typ, Dauer) --- */
.learning-page .learning-page__main-content .bg-gray-100 {
    background-color: var(--sc-surface) !important;
}

.learning-page__main-content h2,
.learning-page__main-content h3,
.learning-page__main-content h4,
.learning-page__main-content h5 {
    color: #ffffff !important;
}

/* Download/Notiz Buttons im Content-Bereich */
.learning-page .learning-page__main-content .bg-white {
    background-color: rgba(255,255,255,0.08) !important;
}

.learning-page .learning-page__main-content .bg-white:hover {
    background-color: rgba(255,255,255,0.14) !important;
}

.learning-page .learning-page__main-content .bg-gray-200 {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Attachment-Karten */
.learning-page .learning-page__main-content a.text-dark {
    color: #ffffff !important;
}

/* --- Custom Switch (Lektion abgeschlossen) --- */
.learning-page .custom-switch .custom-control-label::before {
    background-color: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.learning-page .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sc-emerald) !important;
    border-color: var(--sc-emerald) !important;
}

/* Toggle Label Text */
.learning-page__main-content label.text-gray-500,
.learning-page__main-content .text-gray-500 {
    color: rgba(255,255,255,0.78) !important;
}

.learning-page__main-content .icons.text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* Beschreibungstext im Content-Bereich */
.learning-page__main-content .mt-16.text-gray-500,
.learning-page__main-content .mt-16.text-gray-500 p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Vorherige/Naechste Lektion Buttons */
.learning-page .learning-page__main-content .border-gray-200 {
    border-color: rgba(255,255,255,0.12) !important;
}

.learning-page .learning-page__main-content .bg-hover-gray-100:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Border unten (Lektion bestanden Trenner) */
.learning-page__main-content .border-top-gray-100 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* --- File Player Card --- */
.learning-page .learning-page__file-player-card {
    background-color: var(--sc-surface) !important;
}

/* Empty State */
.learning-page__main-content .text-dark-blue {
    color: #ffffff !important;
}

.learning-page__main-content .text-gray {
    color: rgba(255,255,255,0.68) !important;
}

/* --- Video Player Seekbar Farbe (Amber) --- */
.learning-page video::-webkit-media-controls-timeline {
    accent-color: var(--sc-amber) !important;
}

/* --- Scrollbar im Sidebar --- */
.learning-page__sidebar .simplebar-scrollbar::before {
    background-color: rgba(255,255,255,0.2) !important;
}


/* ==========================================================================
   §32 Profil-Dropdown (Navbar, Panel & Frontend)
   - Dark Theme fuer das Benutzer-Dropdown-Menue oben rechts
   ========================================================================== */

/* Dropdown-Container */
.navbar-auth-user__dropdown {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* User-Info Header im Dropdown */
.navbar-auth-user__dropdown .bg-gray {
    background-color: rgba(255,255,255,0.06) !important;
}

.navbar-auth-user__dropdown .text-dark,
.navbar-auth-user__dropdown .font-weight-bold {
    color: #ffffff !important;
}

.navbar-auth-user__dropdown .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Verified Badge */
.navbar-auth-user__dropdown .bg-primary {
    background-color: var(--sc-blue) !important;
}

/* Menuepunkte */
.navbar-auth-user__dropdown-item a {
    color: rgba(255,255,255,0.88) !important;
}

.navbar-auth-user__dropdown-item a span {
    color: rgba(255,255,255,0.88) !important;
}

.navbar-auth-user__dropdown-item .icons {
    color: rgba(255,255,255,0.58) !important;
}

.navbar-auth-user__dropdown-item:hover {
    background-color: transparent !important;
}

.navbar-auth-user__dropdown-item:hover,
.navbar-auth-user__dropdown-item:hover > a,
.navbar-auth-user__dropdown-item:hover > a span,
.navbar-auth-user__dropdown-item:hover > a .icons {
    color: var(--sc-amber) !important;
}

/* Notification Badge */
.navbar-auth-user__dropdown-item .count-badge {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

/* Abmelden (rot beibehalten) */
.navbar-auth-user__dropdown-item .text-danger {
    color: #ef4444 !important;
}

.navbar-auth-user__dropdown-item a:hover .text-danger {
    color: #f87171 !important;
}


/* ==========================================================================
   §33 Panel Notifications (/panel/notifications)
   - Dark Theme fuer Benachrichtigungsseite
   ========================================================================== */

/* Seiten-Scope: #panel_app als Panel-Container */

/* --- Header-Leiste (Benachrichtigungen verwalten) --- */
#panel_app .card-with-dashed-mask.bg-white {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

#panel_app .card-with-dashed-mask .font-weight-bold {
    color: #ffffff !important;
}

#panel_app .card-with-dashed-mask .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* "Alle als gelesen markieren" Link */
#panel_app .card-with-dashed-mask .text-primary {
    color: var(--sc-amber) !important;
}

#panel_app .card-with-dashed-mask .text-primary:hover {
    color: var(--sc-amber-hover) !important;
}

/* --- Notification Cards --- */
#panel_app .js-show-message.bg-white {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: all 0.2s ease !important;
}

#panel_app .js-show-message.bg-white:hover {
    background-color: var(--sc-surface-hover, rgba(255,255,255,0.04)) !important;
    border-color: var(--sc-amber) !important;
}

/* Ungelesene Notification (ohne js-seen-at) */
#panel_app .js-show-message:not(.js-seen-at) {
    border-left: 3px solid var(--sc-amber) !important;
}

/* Notification Icon */
#panel_app .js-show-message .bg-primary {
    background-color: var(--sc-amber) !important;
}

#panel_app .js-show-message .bg-primary .icons.text-white {
    color: var(--sc-navy) !important;
}

/* Notification Titel */
#panel_app .js-show-message h6,
#panel_app .js-show-message .font-weight-bold {
    color: #ffffff !important;
}

/* Notification Text */
#panel_app .js-show-message p,
#panel_app .js-show-message .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Notification Datum */
#panel_app .js-show-message > span.text-gray-500 {
    color: rgba(255,255,255,0.5) !important;
}

/* Ungelesen-Badge (roter Punkt) */
#panel_app .js-show-message .notification-badge {
    background-color: var(--sc-amber) !important;
}

/* --- Pagination --- */
#panel_app #pagination .page-item .page-link {
    background-color: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.78) !important;
}

#panel_app #pagination .page-item.active .page-link {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

#panel_app #pagination .page-item .page-link:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--sc-amber) !important;
}

/* --- Notification Detail Modal (SweetAlert) --- */
.swal2-popup:has(.js-notification-message) .swal2-html-container,
.js-custom-modal .js-notification-message-body {
    color: rgba(255,255,255,0.88) !important;
}

/* --- §33.5 SweetAlert2 Global Dark Theme (Panel) --- */
.swal2-popup {
    background-color: var(--sc-surface, #1B2D4A) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,0.88) !important;
}
.swal2-popup .swal2-title {
    color: #ffffff !important;
}
.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content {
    color: rgba(255,255,255,0.78) !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--sc-emerald) !important;
}
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--sc-emerald) !important;
}
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
    background-color: var(--sc-amber-hover) !important;
}
.swal2-popup .swal2-styled.swal2-cancel {
    background-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.78) !important;
    border-radius: 8px !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
    background-color: rgba(255,255,255,0.15) !important;
}


/* ==========================================================================
   §34 PANEL COURSES (/panel/courses, /panel/webinars)
   ========================================================================== */

/* --- 34.1 Stat-Karten (Kurse gesamt, Stunden, Live-Kurs-Verkaeufe, Kurs-Verkaeufe) --- */
#panel_app .panel-course-card-1 ~ .row .bg-white.p-16.rounded-24,
#panel_app .section-title ~ .row .bg-white.p-16.rounded-24,
#panel_app .col-6.col-lg-3 > .bg-white.rounded-24 {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Stat-Karten Labels */
#panel_app .col-6.col-lg-3 .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Stat-Karten Werte */
#panel_app .col-6.col-lg-3 .font-24 {
    color: #ffffff !important;
}

/* Stat-Karten Icon-Hintergruende */
#panel_app .bg-primary-30 {
    background-color: rgba(91,141,239,0.15) !important;
}
#panel_app .bg-success-30 {
    background-color: rgba(16,185,129,0.15) !important;
}
#panel_app .bg-warning-30 {
    background-color: rgba(245,158,11,0.15) !important;
}
#panel_app .bg-secondary-30 {
    background-color: rgba(148,163,184,0.15) !important;
}

/* --- 34.2 Kurs-Karte (Row View) --- */

/* Karten-Container mit Hover-Transition */
#panel_app .panel-course-card-1 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 20px !important;
}

#panel_app .panel-course-card-1 .bg-white {
    background-color: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover: Karte hebt sich, Rahmen leuchtet, Glow */
#panel_app .panel-course-card-1:hover .bg-white {
    border-color: rgba(91,141,239,0.2) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(91,141,239,0.08) !important;
    transform: translateY(-3px) !important;
    background-color: rgba(255,255,255,0.05) !important;
}

/* Card Mask ausblenden (dashed border weg) */
#panel_app .panel-course-card-1 .card-mask {
    display: none !important;
}

/* Thumbnail groesser und ansprechender */
#panel_app .panel-course-card-1__image {
    width: 190px !important;
    min-width: 190px !important;
    height: 130px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-color: rgba(255,255,255,0.05) !important;
}

/* Bild: Cover + sanfte Skalierung beim Hover */
#panel_app .panel-course-card-1__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#panel_app .panel-course-card-1:hover .panel-course-card-1__image {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

#panel_app .panel-course-card-1:hover .panel-course-card-1__image img {
    transform: scale(1.08) !important;
}

/* Kurs-Titel */
#panel_app .panel-course-card-1 .text-dark {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
}

#panel_app .panel-course-card-1:hover .text-dark {
    color: var(--sc-blue-focus) !important;
}

/* Kurs-Stats Hintergrund (bg-gray-100) */
#panel_app .panel-course-card-1 .bg-gray-100 {
    background-color: rgba(255,255,255,0.025) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Stats-Icons Kreis */
#panel_app .panel-course-card-1 .bg-white.rounded-circle {
    background-color: rgba(255,255,255,0.08) !important;
}

/* Stats-Text */
#panel_app .panel-course-card-1 .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

#panel_app .panel-course-card-1 .font-14.font-weight-bold {
    color: rgba(255,255,255,0.88) !important;
}

/* Progress Bar Hintergrund */
#panel_app .panel-course-card-1 .progress-bar.bg-gray-100 {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Progress Bar Fortschritt */
#panel_app .panel-course-card-1 .progress-bar .bg-success {
    background-color: var(--sc-emerald) !important;
}

/* Preis: Soft Blue fuer Kostenlos, Amber fuer kostenpflichtig */
#panel_app .panel-course-card-1 .col-2.text-primary,
#panel_app .panel-course-card-1 .text-primary.font-16,
#panel_app .panel-course-card-1 div.text-primary {
    --primary: #5B8DEF !important;
    color: #5B8DEF !important;
    font-weight: 600 !important;
}

/* Kostenpflichtig: Amber (wenn Durchstreich-Preis vorhanden = 2 spans) */
#panel_app .panel-course-card-1 .text-primary .text-decoration-line-through {
    color: rgba(255,255,255,0.4) !important;
}

#panel_app .panel-course-card-1 .text-primary .text-decoration-line-through ~ span,
#panel_app .panel-course-card-1 .text-primary span + .text-decoration-line-through {
    color: var(--sc-amber) !important;
}

/* "Gratis" / Status-Text */
#panel_app .panel-course-card-1 .text-gray-300 {
    color: rgba(255,255,255,0.50) !important;
}

/* Live/On-Demand Badges auf Bild */
#panel_app .panel-course-card-1__badges .badge,
#panel_app .panel-course-card-1__badges span {
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}

/* Live-Icon Kreis auf Bild */
#panel_app .panel-course-card-1__image .is-live-course-icon {
    background-color: rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(8px) !important;
}

/* --- 34.3 Actions-Dropdown Trigger Button --- */
#panel_app .actions-dropdown > .bg-white {
    background-color: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#panel_app .actions-dropdown > .bg-white .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* --- 34.4 Actions-Dropdown "Lernseite" Button (erster Link, primaer) --- */
#panel_app .actions-dropdown__dropdown-menu {
    overflow: hidden !important;
}

#panel_app .actions-dropdown__dropdown-menu-item:first-child {
    padding: 4px 12px !important;
}

#panel_app .actions-dropdown__dropdown-menu-item:first-child a {
    color: var(--sc-amber) !important;
    border: 1px solid var(--sc-amber) !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    text-align: center !important;
    justify-content: center !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#panel_app .actions-dropdown__dropdown-menu-item:first-child:hover {
    background-color: transparent !important;
}

#panel_app .actions-dropdown__dropdown-menu-item:first-child:hover a {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    transform: none !important;
}

/* "Loeschen" Link rot */
#panel_app .actions-dropdown__dropdown-menu-item .text-danger {
    color: #ef4444 !important;
}

#panel_app .actions-dropdown__dropdown-menu-item .text-danger:hover {
    color: #dc2626 !important;
    background-color: rgba(239,68,68,0.08) !important;
}

/* --- 34.5 Kurs-Karte Grid View --- */
#panel_app .panel-course-grid-card .bg-white {
    background-color: var(--sc-surface) !important;
}

#panel_app .panel-course-grid-card .text-dark {
    color: #ffffff !important;
}

#panel_app .panel-course-grid-card .border-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}

#panel_app .panel-course-grid-card .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* --- 34.6 Badges auf Kurs-Karten --- */
#panel_app .panel-course-card-1 .badge.bg-warning {
    background-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
}

/* --- 34.7 Lernfortschritt-Text --- */
#panel_app .panel-course-card-1 .font-12.text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}


/* ==========================================================================
   §35 KURS-EDITOR (/panel/courses/*/edit, /panel/courses/create)
   ACHTUNG: Nutzt Frontend-Layout (app.blade.php), NICHT Panel-Layout!
   Scope: #webinarForm als Formular-Container
   Gilt fuer alle Kurse (generische Selektoren ohne Kurs-ID)
   ========================================================================== */

/* --- 35.1 Content-Bereich Hintergrund --- */
#webinarForm .container {
    color: rgba(255,255,255,0.88) !important;
}

/* --- 35.2 Step-Fortschrittsleiste --- */
#webinarForm .webinar-progress-mask {
    background: var(--sc-surface) !important;
    opacity: 0.4 !important;
}

#webinarForm .bg-white {
    background-color: var(--sc-surface) !important;
    color: rgba(255,255,255,0.88) !important;
}

#webinarForm .soft-shadow-2 {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Inaktive Steps */
#webinarForm .js-get-next-step .bg-gray-100 {
    background-color: rgba(255,255,255,0.08) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Inaktive Steps Hover */
#webinarForm .js-get-next-step:hover .bg-gray-100 {
    background-color: rgba(245,158,11,0.15) !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.3) !important;
    border-radius: 50% !important;
}

#webinarForm .js-get-next-step:hover .text-gray-400 {
    color: var(--sc-amber) !important;
}

/* Step-Labels */
#webinarForm .js-get-next-step .text-gray-400 {
    color: rgba(255,255,255,0.50) !important;
    transition: color 0.2s ease !important;
}

/* Aktive Steps */
#webinarForm .js-get-next-step .bg-primary {
    background-color: var(--sc-blue) !important;
}

/* Step-Verbindungslinien */
#webinarForm .bg-gray-200 {
    background-color: rgba(255,255,255,0.1) !important;
}

/* --- 35.3 Kurstyp-Auswahl (Kurs, Live-Kurs, Text-Kurs) --- */
#webinarForm .create-webinar-course-types label {
    background-color: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.78) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#webinarForm .create-webinar-course-types__icon-box {
    background-color: rgba(255,255,255,0.08) !important;
    transition: background-color 0.2s ease !important;
}

/* Hover: Amber-Akzent */
#webinarForm .create-webinar-course-types:hover input:not(:checked) + label {
    border-color: var(--sc-amber) !important;
    box-shadow: 0 0 0 1px var(--sc-amber) !important;
}

#webinarForm .create-webinar-course-types:hover input:not(:checked) + label .create-webinar-course-types__icon-box {
    background-color: rgba(245,158,11,0.2) !important;
}

#webinarForm .create-webinar-course-types:hover input:not(:checked) + label .font-14.font-weight-bold {
    color: var(--sc-amber) !important;
}

#webinarForm .create-webinar-course-types:hover input:not(:checked) + label .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

/* Ausgewaehlt: Blue */
#webinarForm .create-webinar-course-types input:checked + label {
    border-color: var(--sc-blue) !important;
    box-shadow: 0 0 0 1px var(--sc-blue) !important;
}

#webinarForm .create-webinar-course-types input:checked + label .create-webinar-course-types__icon-box {
    background-color: var(--sc-blue) !important;
}

#webinarForm .create-webinar-course-types input:checked + label .create-webinar-course-types__icon-box svg,
#webinarForm .create-webinar-course-types input:checked + label .create-webinar-course-types__icon-box svg * {
    color: #ffffff !important;
}

#webinarForm .create-webinar-course-types input:checked + label .font-14.font-weight-bold {
    color: var(--sc-blue) !important;
}

#webinarForm .create-webinar-course-types input:checked + label .text-gray-500 {
    color: var(--sc-blue) !important;
    opacity: 0.8 !important;
}

/* Beschreibungstext in Kurstyp-Karten (Normalzustand) */
#webinarForm .create-webinar-course-types .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* --- 35.4 Formulare --- */
#webinarForm .form-control {
    background-color: var(--sc-surface-input) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#webinarForm .form-control::placeholder {
    color: rgba(255,255,255,0.50) !important;
}

#webinarForm .form-control:focus {
    background-color: var(--sc-surface-focus) !important;
    border-color: var(--sc-blue-focus) !important;
    color: #ffffff !important;
}

#webinarForm .form-group-label,
#webinarForm label {
    color: rgba(255,255,255,0.78) !important;
}

#webinarForm .form-group-label {
    background: var(--sc-surface) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 4px !important;
}

/* Ueberschriften */
#webinarForm .font-weight-bold,
#webinarForm h2,
#webinarForm h3,
#webinarForm h4 {
    color: #ffffff !important;
}

/* Text-Klassen */
#webinarForm .text-dark {
    color: #ffffff !important;
}

#webinarForm .text-gray-500 {
    color: rgba(255,255,255,0.68) !important;
}

#webinarForm .text-gray-400 {
    color: rgba(255,255,255,0.50) !important;
}

/* Borders */
#webinarForm .border-gray-200 {
    border-color: rgba(255,255,255,0.06) !important;
}

#webinarForm .border-gray-300 {
    border-color: rgba(255,255,255,0.1) !important;
}

/* --- 35.5 Select2 im Editor --- */
#webinarForm .select2-container .select2-selection {
    background-color: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#webinarForm .select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

#webinarForm .select2-container .select2-selection__placeholder {
    color: rgba(255,255,255,0.50) !important;
}

/* --- 35.6 Kategorie-Filter-Karten --- */
#webinarForm .create-course-filter-card {
    background-color: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

#webinarForm .create-course-filter-card:before {
    background-color: var(--sc-amber) !important;
}

/* --- 35.7 Media Upload / Bild-Upload-Karten --- */
#webinarForm .create-media-just-image-card__label {
    background-color: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#webinarForm .create-media-just-image-card__circle {
    background-color: rgba(91,141,239,0.15) !important;
}

#webinarForm .create-media-just-image-card__delete-btn {
    background-color: rgba(239,68,68,0.15) !important;
    color: #ef4444 !important;
}

/* Custom File Input */
#webinarForm .custom-file {
    background-color: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.78) !important;
}

#webinarForm .custom-file .custom-file-text {
    color: rgba(255,255,255,0.78) !important;
}

#webinarForm .custom-file .custom-file-label {
    background-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
}

/* Upload-Icon (Pfeil) neben File-Input */
#webinarForm .has-translation.bg-transparent {
    color: rgba(255,255,255,0.50) !important;
}

#webinarForm .has-translation.bg-transparent .icons {
    color: rgba(255,255,255,0.50) !important;
}

/* --- 35.8 Akkordeons (Kapitel, Inhalte) --- */
#webinarForm .accordion__title {
    color: #ffffff !important;
}

#webinarForm .accordion .border-gray-200 {
    border-color: rgba(255,255,255,0.06) !important;
}

/* Drag Handle */
#webinarForm .move-icon {
    color: rgba(255,255,255,0.38) !important;
}

/* Collapse Arrow */
#webinarForm .collapse-arrow-icon {
    color: rgba(255,255,255,0.58) !important;
}

/* --- 35.9 Bottom Action Bar (Speichern, Entwurf, Fortschritt) --- */
#webinarForm .position-fixed.position-bottom-0 {
    background-color: var(--sc-surface) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3) !important;
}

#webinarForm .create-course-bottom-progress__process {
    background-color: var(--sc-amber) !important;
}

/* Zurueck/Weiter Buttons (runde Pfeile) */
#webinarForm .position-fixed.position-bottom-0 .bg-gray-100.rounded-circle {
    background-color: rgba(255,255,255,0.08) !important;
}

#webinarForm .position-fixed.position-bottom-0 .bg-gray-100.rounded-circle svg,
#webinarForm .position-fixed.position-bottom-0 .bg-gray-100.rounded-circle .icons {
    color: rgba(255,255,255,0.68) !important;
}

/* Entwurf/Ghost Button - "Als Entwurf speichern" */
#webinarForm .btn-transparent,
#webinarForm #saveAsDraft {
    color: rgba(255,255,255,0.68) !important;
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#webinarForm .btn-transparent:hover,
#webinarForm #saveAsDraft:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.35) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05) !important;
    transform: translateY(-1px) !important;
}

/* "Loeschen" Link */
#webinarForm .text-danger,
#webinarForm .delete-webinar {
    color: #ef4444 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#webinarForm .text-danger:hover,
#webinarForm .delete-webinar:hover {
    color: #ffffff !important;
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important;
    transform: translateY(-1px) !important;
}

/* "Zur Pruefung einreichen" / Primaer-Button */
#webinarForm .btn-primary,
#webinarForm #sendForReview {
    background-color: var(--sc-amber) !important;
    border-color: var(--sc-amber) !important;
    color: var(--sc-navy) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 10px 28px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#webinarForm .btn-primary:hover,
#webinarForm #sendForReview:hover {
    background-color: #e8920a !important;
    border-color: #e8920a !important;
    color: var(--sc-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(245,158,11,0.4), 0 0 0 3px rgba(245,158,11,0.15) !important;
}

/* --- 35.10 Toggle/Custom Switch --- */
#webinarForm .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

#webinarForm .custom-switch .custom-control-label::before {
    background-color: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* --- 35.11 Summernote Editor (Rich Text) --- */
#webinarForm .note-editor {
    background-color: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#webinarForm .note-editor .note-toolbar {
    background-color: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

#webinarForm .note-editor .note-toolbar .btn {
    color: rgba(255,255,255,0.68) !important;
    background: transparent !important;
}

#webinarForm .note-editor .note-toolbar .btn:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.08) !important;
}

#webinarForm .note-editor .note-editing-area .note-editable {
    background-color: var(--sc-surface-input) !important;
    color: rgba(255,255,255,0.88) !important;
    cursor: text !important;
}

#webinarForm .note-editor .note-editing-area .note-editable p,
#webinarForm .note-editor .note-editing-area .note-editable span,
#webinarForm .note-editor .note-editing-area .note-editable div,
#webinarForm .note-editor .note-editing-area .note-editable li,
#webinarForm .note-editor .note-editing-area .note-editable td,
#webinarForm .note-editor .note-editing-area .note-editable h1,
#webinarForm .note-editor .note-editing-area .note-editable h2,
#webinarForm .note-editor .note-editing-area .note-editable h3,
#webinarForm .note-editor .note-editing-area .note-editable h4,
#webinarForm .note-editor .note-editing-area .note-editable h5,
#webinarForm .note-editor .note-editing-area .note-editable h6 {
    color: rgba(255,255,255,0.88) !important;
    background-color: transparent !important;
}

#webinarForm .note-editor .note-editing-area .note-editable .note-placeholder {
    color: rgba(255,255,255,0.50) !important;
}

#webinarForm .note-editor .note-editing-area {
    cursor: text !important;
}

#webinarForm .note-editor .note-statusbar {
    background-color: var(--sc-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* --- 35.12 Info/Hint Boxen --- */
#webinarForm .border-dashed {
    border-color: rgba(255,255,255,0.12) !important;
}

#webinarForm .border-dashed.rounded-16 {
    background-color: rgba(255,255,255,0.02) !important;
}

/* "Inhalt hinzufuegen" Buttons */
#webinarForm .js-add-course-content-btn {
    color: var(--sc-blue) !important;
}

#webinarForm .js-add-course-content-btn:hover {
    color: var(--sc-amber) !important;
}

/* --- 35.13 Icon-Boxen --- */
#webinarForm .bg-primary-20 {
    background-color: rgba(91,141,239,0.12) !important;
}

#webinarForm .bg-gray-100 {
    background-color: rgba(255,255,255,0.05) !important;
}

#webinarForm .bg-gray-300 {
    background-color: rgba(255,255,255,0.08) !important;
}

/* --- 35.14 Checkboxen & Radio-Buttons --- */
#webinarForm .custom-control__label,
#webinarForm .custom-control-label {
    color: rgba(255,255,255,0.78) !important;
}

#webinarForm .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
#webinarForm .custom-checkbox .custom-control-input:checked ~ .custom-control__label::before {
    background-color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

/* --- 35.15 Translation Icon --- */
#webinarForm .has-translation .bg-gray-300 {
    background-color: rgba(255,255,255,0.08) !important;
}

/* --- 35.16 Badges --- */
#webinarForm .bg-danger-20 {
    background-color: rgba(239,68,68,0.12) !important;
}

#webinarForm .bg-danger-30 {
    background-color: rgba(239,68,68,0.18) !important;
}

/* --- 35.17 Actions-Dropdown im Editor --- */
#webinarForm .actions-dropdown__dropdown-menu {
    background: var(--sc-surface) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

#webinarForm .actions-dropdown__dropdown-menu-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

#webinarForm .actions-dropdown__dropdown-menu-item a,
#webinarForm .actions-dropdown__dropdown-menu-item button {
    color: rgba(255,255,255,0.78) !important;
}

#webinarForm .actions-dropdown__dropdown-menu-item:hover a,
#webinarForm .actions-dropdown__dropdown-menu-item:hover button {
    color: var(--sc-amber) !important;
}

/* --- 35.17b Status-Button (Kurs in Erstellung / Bearbeitung) --- */
.schoolando-status-btn {
    background-color: var(--sc-blue) !important;
    color: var(--sc-navy) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.92 !important;
}

.schoolando-status-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.25) 50%,
        transparent 100%
    ) !important;
    animation: schoolando-shimmer 2.5s ease-in-out infinite !important;
}

@keyframes schoolando-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* --- 35.18 is-required Sternchen (nur ::after, nicht Label-Text) --- */
#webinarForm .form-group .is-required:after,
#webinarForm h3.is-required:after {
    content: " *" !important;
    color: var(--sc-amber) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    position: relative !important;
    top: 2px !important;
    right: auto !important;
    left: auto !important;
    display: inline !important;
    line-height: 1 !important;
}

/* Padding-right nicht mehr noetig bei inline-Sternchen */
#webinarForm .form-group .is-required {
    padding-right: 0 !important;
}

/* --- 35.19 Typografie & Schriftgroessen --- */

/* Alle Texte im Editor auf DM Sans */
#webinarForm {
    font-family: 'DM Sans', sans-serif !important;
}

/* Schriftgroessen (angepasst an Panel-Standard) */
#webinarForm .font-14 {
    font-size: 15px !important;
}

#webinarForm .font-12 {
    font-size: 13px !important;
}

#webinarForm .font-16 {
    font-size: 16px !important;
}

/* Abschnitts-Ueberschriften (h3) -> Sora, groesser */
#webinarForm h3.font-14.font-weight-bold {
    font-family: 'Sora', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

/* Step-Fortschritt Titel */
#webinarForm .js-get-next-step h6.font-14 {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Step "Schritt X von Y" */
#webinarForm .js-get-next-step .font-12.text-gray-500 {
    font-size: 12px !important;
    color: rgba(255,255,255,0.58) !important;
}

/* Form Labels (Titel, SEO-Meta-Beschreibung etc.) */
#webinarForm .form-group-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* Form Inputs */
#webinarForm .form-control {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#webinarForm .form-control::placeholder {
    font-size: 14px !important;
}

/* Kurstyp-Karten Titel */
#webinarForm .create-webinar-course-types .font-14.font-weight-bold {
    font-family: 'Sora', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Kurstyp-Karten Beschreibung */
#webinarForm .create-webinar-course-types .font-12.text-gray-500 {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Bottom Bar Buttons */
#webinarForm .btn-primary {
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
}

#webinarForm .btn-transparent {
    font-size: 14px !important;
}

/* Akkordeon-Titel */
#webinarForm .accordion__title {
    font-family: 'Sora', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Select2 */
#webinarForm .select2-container .select2-selection__rendered {
    font-size: 15px !important;
}

#webinarForm .select2-container .select2-selection__placeholder {
    font-size: 14px !important;
}

/* Custom File Text */
#webinarForm .custom-file-text {
    font-size: 14px !important;
}

#webinarForm .custom-file-label {
    font-size: 14px !important;
}

/* Links (Vorschau, Entfernen) */
#webinarForm a.text-warning {
    color: var(--sc-amber) !important;
    font-size: 13px !important;
}

#webinarForm a.text-danger {
    font-size: 13px !important;
}

/* Checkbox/Switch Labels */
#webinarForm .custom-control-label,
#webinarForm .custom-control__label {
    font-size: 15px !important;
}

/* Hint-Texte */
#webinarForm p.text-gray-500.font-12 {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* --- 35.20 Validation: Ungueltige Felder hervorheben --- */
#webinarForm .form-control.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.2) !important;
}

/* Validation Warning Icon im SweetAlert */
.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--sc-amber) !important;
    color: var(--sc-amber) !important;
}

/* Validation Popup: Mehr Abstand unten fuer Button */
.swal2-popup .swal2-actions {
    margin-top: 20px !important;
    padding-bottom: 8px !important;
}

/* --- 35.21 Tags-Input (Bootstrap Tagsinput) --- */
#webinarForm .bootstrap-tagsinput {
    background-color: var(--sc-surface-input) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.88) !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    padding: 6px 8px !important;
}

#webinarForm .bootstrap-tagsinput input {
    color: rgba(255,255,255,0.88) !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}

#webinarForm .bootstrap-tagsinput input::placeholder {
    color: rgba(255,255,255,0.50) !important;
    text-overflow: ellipsis !important;
}

#webinarForm .bootstrap-tagsinput .tag,
#webinarForm .bootstrap-tagsinput .badge {
    background-color: var(--sc-blue) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    margin: 2px !important;
}

#webinarForm .bootstrap-tagsinput .tag [data-role="remove"]::after {
    color: rgba(255,255,255,0.7) !important;
}

/* "Minuten" Badge neben Duration-Feld */
#webinarForm .has-translation.bg-gray-100 {
    background-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.68) !important;
}

#webinarForm .has-translation .text-gray-500 {
    color: rgba(255,255,255,0.58) !important;
}

/* Searchable Select (Partner-Dozent) */
#webinarForm .searchable-select + .select2-container .select2-selection--multiple {
    background-color: var(--sc-surface-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

#webinarForm .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--sc-blue) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
}

#webinarForm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,0.7) !important;
}