/* ============================================================
   KANTONSPOLIZEI ZUERICH – MOODLE BOOST UNION DESIGN
   Moodle 4.5.10 | Boost Union 2024100767
   Version: 2026-03-10
   ============================================================
   IMPORTANT: Do not use non-ASCII characters in comments.
   Font loading: Add the following in Boost Union > Additional HTML > Within HEAD:
   <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS & TYPOGRAPHY
   ============================================================ */

:root {
    --kapo-navy: #003366;
    --kapo-navy-dark: #002855;
    --kapo-navy-mid: #005fa3;
    --kapo-navy-light: #e8eef4;
    --kapo-navy-glow: rgba(0, 51, 102, 0.12);
    --kapo-offwhite: #f0f2f5;
    --kapo-border: #dee2e6;
    --kapo-text: #1d2125;
    --kapo-text-muted: #6c757d;
    --kapo-white: #f0f2f5;
    --kapo-white-2: #ffffff;
    --kapo-orange: #e07b00;
    --kapo-green: #197a3e;
    --kapo-success: #198754;
    --kapo-danger: #dc3545;
    --kapo-shadow-sm: 0 1px 4px rgba(0, 32, 80, 0.07);
    --kapo-shadow-md: 0 4px 14px rgba(0, 51, 102, 0.12);
    --kapo-shadow-lg: 0 8px 30px rgba(0, 51, 102, 0.18);
    --kapo-radius: 0;
    --kapo-radius-lg: 0;
    --kapo-transition: 0.22s ease;
}

body {
    font-family: 'interRegular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--kapo-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(#page-login-index):not(.pagelayout-login):not(.loginbackgroundimage) {
    background-color: #f0f2f5;
}

/* ============================================================
   GLOBAL WIDTH FIX: Override Moodle's limitedwidth restriction
   Ensures all pages use the same max-width (1400px) as the
   course view page. Moodle's body.limitedwidth limits content
   to ~1170px; we override this globally for all non-login pages.
   ============================================================ */
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) #page,
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) #page-wrapper,
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) #page-content,
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) .main-inner,
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) #region-main,
body.limitedwidth:not(.pagelayout-login):not(#page-login-index) #region-main-box {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}


#page.drawers,
#page-header,
#page-my-index #page-header,
.pagelayout-mydashboard #page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#page.drawers .main-inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#page.drawers div[role="main"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



#page {
    margin-top: 1rem !important;
}

.main-inner {
    padding-top: 0.5rem !important;
}

.main-inner-wrapper {
    padding: 1rem !important;
}

@media (max-width: 767.98px) {
    .fc-contact-block {
        display: none !important;
    }
}

#region-main {
    padding: 15px !important;
}

html,
#page,
#page-wrapper,
#page-content,
#page-my-index,
#page-my-index #page,
#page-my-index #page-wrapper,
.pagelayout-standard,
.pagelayout-coursepage,
.pagelayout-incourse,
.pagelayout-admin,
.pagelayout-base {
    background-color: var(--kapo-white) !important;
}

/* Login-Seite: alle Wrapper transparent – Moodle/Boost Union setzt Bild per Inline-Style auf body */
body#page-login-index #page,
body#page-login-index #page-wrapper,
body#page-login-index #page-content,
body.pagelayout-login #page,
body.pagelayout-login #page-wrapper,
body.pagelayout-login #page-content,
body.loginbackgroundimage #page,
body.loginbackgroundimage #page-wrapper,
body.loginbackgroundimage #page-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Globaler Seiten-Hintergrund: ueberall #f0f2f5 (Login-Seite ausgenommen) */
body:not(#page-login-index):not(.pagelayout-login),
body:not(#page-login-index):not(.pagelayout-login)>*:not(nav):not(.navbar):not(.drawer):not(.modal):not(.popover):not([class*="message-drawer"]) {
    background-color: var(--kapo-white) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'interBlack', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    color: var(--kapo-text);
}

a {
    color: var(--kapo-navy);
    transition: color var(--kapo-transition);
}

a:hover {
    color: var(--kapo-navy-dark);
}

/* Global: keine Rundungen */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Spezifisch: Theme-Klassen mit hoeherer Spezifitaet ueberschreiben */
.rounded,
.rounded-circle,
.rounded-pill,
.form-control,
.form-select,
.btn,
.dropdown-toggle,
.card,
.input-group>*,
.custom-select {
    border-radius: 0 !important;
}

/* Selection */
::selection {
    background-color: var(--kapo-navy);
    color: white;
}


/* ============================================================
   2. HEADER & NAVIGATION
   ============================================================ */

/* -- Main Navbar (nicht Login-Seite): weisser Hintergrund -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar.fixed-top,
body:not(#page-login-index):not(.pagelayout-login) nav.navbar,
body:not(#page-login-index):not(.pagelayout-login) #page-header .navbar {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-height: 60px;
    padding: 0 1.5rem;
    position: relative;
}

/* Vertikaler Divider vor Bearbeiten-Button: kein Border */
body:not(#page-login-index):not(.pagelayout-login) .navbar .divider.border-start {
    height: 100% !important;
    align-self: stretch !important;
    border: none !important;
    border-color: transparent !important;
}

/* -- Logo: Navy-Blau per CSS-Filter -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar-brand img,
body:not(#page-login-index):not(.pagelayout-login) .navbar .logo img {
    max-height: 48px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(13%) sepia(74%) saturate(2357%) hue-rotate(198deg) brightness(82%) contrast(135%);
}

/* -- Nav Links: Anthrazit -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link {
    font-weight: 600;
    color: #343a40 !important;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem;
    position: relative;
    transition: color var(--kapo-transition);
    letter-spacing: 0.01em;
    text-decoration: none !important;
    border: none !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link:hover,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link:hover {
    color: var(--kapo-navy) !important;
    background-color: rgba(0, 51, 102, 0.06) !important;
    text-decoration: none !important;
}

/* -- Aktiver Nav-Link: Navy-Blau -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link.active,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link.active {
    color: var(--kapo-navy) !important;
    font-weight: 700;
    background-color: rgba(0, 51, 102, 0.08) !important;
}

/* Kein Unterstrich bei aktiver Navigation */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link.active::after,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link.active::after {
    display: none !important;
}

/* -- Icons: Anthrazit -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .icon,
body:not(#page-login-index):not(.pagelayout-login) .navbar .fa,
body:not(#page-login-index):not(.pagelayout-login) .navbar i.icon {
    color: #343a40 !important;
}

/* -- Icon-Buttons im Navbar: kein Hintergrund / kein Schatten -- */
/* Wichtig: .dropdown-item ausschliessen, damit der Hover funktioniert */
body:not(#page-login-index):not(.pagelayout-login) .navbar #usernavigation .nav-link:not(.dropdown-item),
body:not(#page-login-index):not(.pagelayout-login) .navbar #usernavigation .btn:not(.dropdown-item),
body:not(#page-login-index):not(.pagelayout-login) .navbar #usernavigation a:not(.dropdown-item),
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover-region-toggle,
body:not(#page-login-index):not(.pagelayout-login) .navbar .usermenu .btn.dropdown-toggle {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* -- User Menu: Anthrazit -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .usermenu .usertext {
    font-weight: 600;
    color: #343a40;
}

/* Alle Navbar-Links anthrazit (nicht in Dropdowns) */
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu) a,
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu) .btn-link,
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu)>span {
    color: #343a40 !important;
}

/* -- Bearbeiten-Toggle: Anthrazit -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .editmode-switch-form label,
body:not(#page-login-index):not(.pagelayout-login) .navbar .editmode-switch-form .custom-control-label,
body:not(#page-login-index):not(.pagelayout-login) .navbar [data-region="editmode"] label,
body:not(#page-login-index):not(.pagelayout-login) .navbar .editing-toggle label {
    color: #343a40 !important;
    border-color: transparent !important;
    border: none !important;
}

/* -- Dropdown / Popover: weiss (Override dritter alter Block) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
    box-shadow: 0 4px 16px rgba(0, 20, 50, 0.12);
    padding: 0.5rem 0;
    margin-top: 0 !important;
    top: 100% !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu a,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu span,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover a,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover span,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container a,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container span {
    color: #343a40 !important;
    font-size: 0.875rem;
    padding: 0.5rem 1.1rem !important;
    display: block;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover: alle Links im Dropdown (nicht nur .dropdown-item) */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item:hover,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu a:hover {
    background-color: #dce6f0 !important;
    color: var(--kapo-navy) !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item.active,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item:active,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu a.active {
    background-color: rgba(0, 51, 102, 0.09) !important;
    color: var(--kapo-navy) !important;
    font-weight: 600;
}

/* Trennlinien im Dropdown */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--kapo-border) !important;
    margin: 0.25rem 0;
}

/* User-Menu Hover: ultra-spezifisch per ID (Moodle carousel-Struktur) */
#user-action-menu .dropdown-item:hover,
#user-action-menu .carousel-item .dropdown-item:hover,
#user-action-menu a.dropdown-item:hover {
    background-color: #dce6f0 !important;
    color: var(--kapo-navy) !important;
}

#user-action-menu .dropdown-item.active,
#user-action-menu .carousel-item .dropdown-item.active {
    background-color: #dce6f0 !important;
    color: var(--kapo-navy) !important;
    font-weight: 600 !important;
}

/* Submenu Header (Sprachwahl etc.) */
.dropdown-menu .carousel-item .header {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    background-color: transparent !important;
}

/* In LTR nur den Links-Pfeil anzeigen, Rechts-Pfeil verstecken */
.dropdown-menu .carousel-item .header .dir-ltr-hide {
    display: none !important;
}



/* Zurueck-Button */
.dropdown-menu .carousel-item .header .carousel-navigation-link {
    color: #343a40 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.2rem !important;
    margin: 0 0.35rem 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

.dropdown-menu .carousel-item .header .carousel-navigation-link:hover {
    background: rgba(0, 51, 102, 0.06) !important;
}

/* Pfeil-Icon: anthrazit */
.dropdown-menu .carousel-item .header .carousel-navigation-link img,
.dropdown-menu .carousel-item .header .carousel-navigation-link .icon {
    filter: none !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.7;
}

/* Titel im Submenu Header */
.dropdown-menu .carousel-item .header span,
.dropdown-menu .carousel-item .header .text-body {
    color: #343a40 !important;
    font-weight: 600;
    font-size: 0.85rem;
}

/* -- Systemnachrichten Panel -- */
.popover-region-container .popover-region-header-container {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    padding: 0.75rem 1rem !important;
}

.popover-region-container .popover-region-header-text {
    color: #343a40 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.popover-region-container .popover-region-header-actions .btn-link,
.popover-region-container .popover-region-header-actions a,
.popover-region-container .popover-region-header-actions .icon,
.popover-region-container .popover-region-header-actions i {
    color: #343a40 !important;
}

.popover-region-container .popover-region-content-container {
    background-color: white !important;
}

.popover-region-container .popover-region-content {
    background-color: white !important;
}

/* Notification-Eintraege */
.popover-region-container .notification,
.popover-region-container [data-region="notification"] {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    color: #343a40 !important;
}

.popover-region-container .notification:hover,
.popover-region-container [data-region="notification"]:hover {
    background-color: rgba(0, 51, 102, 0.05) !important;
}

/* Alle Texte im Notification-Bereich: anthrazit */
.popover-region-container .notification *,
.popover-region-container [data-region="notification"] *,
.popover-region-container .all-notifications *,
.popover-region-container .popover-region-content *:not(.count-container) {
    color: #343a40 !important;
}

/* Datum/Zeit: gedimmt */
.popover-region-container .notification .text-muted,
.popover-region-container .notification small,
.popover-region-container .notification time {
    color: var(--kapo-text-muted) !important;
}

/* "Alle anzeigen" Footer */
.popover-region-container .popover-region-footer-container {
    background-color: var(--kapo-offwhite) !important;
    border-top: 1px solid var(--kapo-border) !important;
    padding: 0.6rem 1rem !important;
}

.popover-region-container .popover-region-seeall-text {
    color: var(--kapo-navy) !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Leer-Nachricht */
.popover-region-container .empty-message {
    color: var(--kapo-text-muted) !important;
    padding: 1rem !important;
    text-align: center !important;
}




/* Vertikaler Divider vor Bearbeiten-Button: kein Border */
body:not(#page-login-index):not(.pagelayout-login) .navbar .divider.border-start {
    height: 100% !important;
    align-self: stretch !important;
    border: none !important;
    border-color: transparent !important;
}



/* -- Logo: Navy-Blau (Override alter Regel) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar-brand img,
body:not(#page-login-index):not(.pagelayout-login) .navbar .logo img {
    max-height: 48px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(90%) contrast(95%) !important;
}

/* -- Nav Links: Anthrazit (Override alter Regel) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link {
    font-weight: 600;
    color: #343a40 !important;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem;
    position: relative;
    transition: color var(--kapo-transition);
    letter-spacing: 0.01em;
    text-decoration: none !important;
    border: none !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link:hover,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link:hover {
    color: var(--kapo-navy) !important;
    background-color: rgba(0, 51, 102, 0.06) !important;
    text-decoration: none !important;
}

/* -- Aktiver Nav-Link: Navy-Blau (Override alter Regel) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link.active,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link.active {
    color: var(--kapo-navy) !important;
    font-weight: 700;
    background-color: rgba(0, 51, 102, 0.08) !important;
}

/* Kein Unterstrich bei aktiver Navigation */
body:not(#page-login-index):not(.pagelayout-login) .navbar .nav-link.active::after,
body:not(#page-login-index):not(.pagelayout-login) .primary-navigation .nav-link.active::after {
    display: none !important;
}

/* -- Search Field (nicht Login) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .simplesearchform .input-group input,
body:not(#page-login-index):not(.pagelayout-login) .navbar input[type="text"].form-control {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    transition: border-color var(--kapo-transition), box-shadow var(--kapo-transition);
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .simplesearchform .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .simplesearchform .input-group input:focus,
body:not(#page-login-index):not(.pagelayout-login) .navbar input[type="text"].form-control:focus {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    outline: none;
}

/* -- User Menu (nicht Login) -- */
body:not(#page-login-index):not(.pagelayout-login) .navbar .usermenu .userbutton .avatars .avatar {
    border: none !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .usermenu .usertext {
    font-weight: 600;
    color: #343a40;
}

/* Icons in Navbar: Anthrazit */
body:not(#page-login-index):not(.pagelayout-login) .navbar .icon,
body:not(#page-login-index):not(.pagelayout-login) .navbar .fa,
body:not(#page-login-index):not(.pagelayout-login) .navbar i.icon {
    color: #343a40 !important;
}

/* Bearbeiten-Button / Editmode Toggle: Anthrazit */
body:not(#page-login-index):not(.pagelayout-login) .navbar .editmode-switch-form label,
body:not(#page-login-index):not(.pagelayout-login) .navbar .editmode-switch-form .custom-control-label,
body:not(#page-login-index):not(.pagelayout-login) .navbar .btn-outline-secondary,
body:not(#page-login-index):not(.pagelayout-login) .navbar .btn-outline-info,
body:not(#page-login-index):not(.pagelayout-login) .navbar [data-region="editmode"] label,
body:not(#page-login-index):not(.pagelayout-login) .navbar .editing-toggle label {
    color: #343a40 !important;
    border-color: transparent !important;
    border: none !important;
}

/* Profil-Avatar eckig (nicht rund) */
body:not(#page-login-index):not(.pagelayout-login) .navbar .userpicture,
body:not(#page-login-index):not(.pagelayout-login) .navbar .userbutton .avatars img,
body:not(#page-login-index):not(.pagelayout-login) .navbar .userbutton .avatars .avatar {
    border-radius: 0 !important;
    border: none !important;
}

/* Alle Navbar-Links anthrazit (aber nicht in Dropdowns) */
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu) a,
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu) .btn-link,
body:not(#page-login-index):not(.pagelayout-login) .navbar>*:not(.dropdown-menu)>span {
    color: #343a40 !important;
}

/* Dropdown / Popover Menues: Navy mit weissem Text */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
    box-shadow: 0 4px 16px rgba(0, 20, 50, 0.12);
    padding: 0.5rem 0;
    margin-top: 0 !important;
    top: 100% !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu a,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu span,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover a,
body:not(#page-login-index):not(.pagelayout-login) .navbar .popover span,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container a,
body:not(#page-login-index):not(.pagelayout-login) .popover-region-container span {
    color: #343a40 !important;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    transition: background-color 0.15s ease;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item:hover,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .carousel-item .dropdown-item:hover,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu a:hover {
    background-color: #dce6f0 !important;
    color: var(--kapo-navy) !important;
}

body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item.active,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .carousel-item .dropdown-item.active,
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item:active {
    background-color: #dce6f0 !important;
    color: var(--kapo-navy) !important;
    font-weight: 600;
}

/* Trennlinien im Dropdown */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-divider {
    border-top-color: var(--kapo-border) !important;
    margin: 0.3rem 0;
}

/* Submenu Header (Sprachwahl etc.) */
.dropdown-menu .carousel-item .header {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    background-color: transparent !important;
}

/* Zurueck-Button */
.dropdown-menu .carousel-item .header .carousel-navigation-link {
    color: #343a40 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.2rem !important;
    margin: 0 0.35rem 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

.dropdown-menu .carousel-item .header .carousel-navigation-link:hover {
    background: rgba(0, 51, 102, 0.06) !important;
}

/* Pfeil-Icon anthrazit */
.dropdown-menu .carousel-item .header .carousel-navigation-link img,
.dropdown-menu .carousel-item .header .carousel-navigation-link .icon {
    filter: none !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.7;
}

/* Titel im Submenu Header */
.dropdown-menu .carousel-item .header span,
.dropdown-menu .carousel-item .header .text-body {
    color: #343a40 !important;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Dropdown-Pfeil / Caret */
body:not(#page-login-index):not(.pagelayout-login) .navbar .dropdown-menu .dropdown-item::after {
    color: #343a40;
}

/* -- Breadcrumb -- */
.breadcrumb {
    background-color: transparent;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--kapo-text-muted);
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    color: var(--kapo-border, #ccc);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.35rem;
}

.breadcrumb-item a {
    color: var(--kapo-navy-mid);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--kapo-navy);
    text-decoration: underline;
}

.breadcrumb-item span,
.breadcrumb-item.active {
    color: var(--kapo-text-muted);
    font-weight: 400;
}


/* ============================================================
   3. LOGIN PAGE
   ============================================================ */

/* Login-Hintergrund: Bild wird von Moodle/Boost Union per Inline-Style gesetzt.
   Nur sicherstellen, dass es sichtbar bleibt und kein Override drueber liegt. */
body#page-login-index,
body.pagelayout-login,
body.loginbackgroundimage {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--kapo-navy) !important;
}

@media (min-width: 992px) {
    body.loginbackgroundimage::after {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -200px !important;
        width: calc(100vw + 200px) !important;
        height: 100vh !important;
        background-image: inherit !important;
        background-size: cover !important;
        background-position: left center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
    }
}

/* Overlay deaktiviert – Bild ohne Farbfilter */
body#page-login-index::before,
body.pagelayout-login::before {
    display: none !important;
}

body#page-login-index #page,
body.pagelayout-login #page {
    position: relative;
    z-index: 1;
}

/* Login Card */
body#page-login-index .login-wrapper .login-container,
body.pagelayout-login .login-container,
body#page-login-index #region-main .card,
body.pagelayout-login #region-main .card {
    background: white;
    border-radius: var(--kapo-radius-lg);
    box-shadow: var(--kapo-shadow-lg);
    border: none;
    padding: 2.5rem;
    max-width: 540px;
    margin: 2rem auto;
    /* Default centered for mobile and tablet */
}

@media (min-width: 992px) {

    body#page-login-index .login-wrapper .login-container,
    body.pagelayout-login .login-container,
    body#page-login-index #region-main .card,
    body.pagelayout-login #region-main .card {
        margin: 0 5% 0 auto;
        /* Right-aligned on desktop */
    }
}

/* Login form: Labels nicht umbrechen, Inputs gleich breit */
body#page-login-index label,
body.pagelayout-login label {
    white-space: nowrap;
    font-weight: 600;
}

body#page-login-index .form-control,
body.pagelayout-login .form-control,
body#page-login-index input[type="text"],
body.pagelayout-login input[type="text"] {
    width: 100%;
}

/* Passwort-Auge ausblenden */
body#page-login-index .toggle-sensitive-btn,
body.pagelayout-login .toggle-sensitive-btn,
.toggle-sensitive-btn {
    display: none !important;
}

body#page-login-index .fitem,
body.pagelayout-login .fitem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

body#page-login-index .login-container .fitem .col-md-3,
body.pagelayout-login .login-container .fitem .col-md-3,
body#page-login-index .login-container .fitem .col-md-9,
body.pagelayout-login .login-container .fitem .col-md-9,
body#page-login-index .login-container .fitem .felement,
body.pagelayout-login .login-container .fitem .felement {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

body#page-login-index .login-heading,
body.pagelayout-login .login-heading {
    color: var(--kapo-navy);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Login Logo verkleinern + linksbuendig */
body#page-login-index .login-logo,
body.pagelayout-login .login-logo,
body#page-login-index .login-heading,
body.pagelayout-login .login-heading {
    text-align: left !important;
    display: block !important;
}

body#page-login-index .login-logo img,
body.pagelayout-login .login-logo img,
body#page-login-index .login-heading img,
body.pagelayout-login .login-heading img,
body#page-login-index .logo img,
body.pagelayout-login .logo img {
    max-width: 200px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

body#page-login-index .login-form .btn-primary,
body.pagelayout-login .login-form .btn-primary {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: var(--kapo-radius);
    width: 100%;
    font-size: 1rem;
    transition: background-color var(--kapo-transition), transform var(--kapo-transition);
}

body#page-login-index .login-form .btn-primary:hover,
body.pagelayout-login .login-form .btn-primary:hover {
    background-color: var(--kapo-navy-dark);
    border-color: var(--kapo-navy-dark);
    transform: translateY(-1px);
}

/* Hide navbar on login */
body#page-login-index .navbar,
body.pagelayout-login .navbar {
    background: transparent !important;
    border-bottom: none;
    box-shadow: none;
}

body#page-login-index .navbar .nav-link,
body.pagelayout-login .navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

body#page-login-index footer,
body#page-login-index #page-footer,
body.pagelayout-login footer,
body.pagelayout-login #page-footer {
    display: none !important;
}


/* ============================================================
   4. BUTTONS (Global)
   ============================================================ */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    font-weight: 600;
    border-radius: var(--kapo-radius);
    transition: all var(--kapo-transition);
    letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--kapo-navy-dark);
    border-color: var(--kapo-navy-dark);
    transform: translateY(-1px);
    box-shadow: var(--kapo-shadow-md);
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):focus {
    box-shadow: 0 0 0 3px var(--kapo-navy-glow);
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--kapo-navy-dark);
    transform: translateY(0);
}

.btn-secondary {
    background-color: white;
    border: 2px solid var(--kapo-navy);
    color: var(--kapo-navy);
    font-weight: 600;
    border-radius: var(--kapo-radius);
    transition: all var(--kapo-transition);
}

.btn-secondary:hover {
    background-color: var(--kapo-navy);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--kapo-shadow-md);
}

.btn-outline-primary {
    color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    font-weight: 600;
    border-radius: var(--kapo-radius);
    transition: all var(--kapo-transition);
}

.btn-outline-primary:hover {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    color: white;
}

.btn-outline-secondary {
    color: var(--kapo-text-muted);
    border-color: var(--kapo-border);
    font-weight: 600;
    border-radius: var(--kapo-radius);
    transition: all var(--kapo-transition);
}

.btn-outline-secondary:hover {
    background-color: var(--kapo-navy-light);
    border-color: var(--kapo-navy);
    color: var(--kapo-navy);
}

/* Success button for certificates etc. */
.btn-success {
    background-color: var(--kapo-success);
    border-color: var(--kapo-success);
    font-weight: 600;
    border-radius: var(--kapo-radius);
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}


/* ============================================================
   5. DASHBOARD & COURSE TILES
   ============================================================ */

/* Dashboard & Meine Kurse: Page-Header buendig mit Cards ausrichten */
#page-my-index #page-header,
.pagelayout-mydashboard #page-header,
.pagelayout-mycourses #page-header {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Seitentitel (H1 mit Klasse .h2) global verkleinern – analoger Stil zu Kursseiten */
/* Dashboard, Meine Kurse und alle Seiten nutzen h1.h2 als Seitentitel */
html body h1.h2 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
}

/* -- Page Background -- */
#page-my-index,
#page-my-index #page-content,
#page-my-index #page-wrapper,
#page-my-index #page,
#page-my-index #topofscroll {
    background-color: var(--kapo-white) !important;
    padding-bottom: 0 !important;
}

/* -- Page Background -- */
#page-site-index #page-content {
    background-color: var(--kapo-white-2) !important;
    padding-bottom: 0 !important;
}

/* Dashboard & Meine Kurse: .main-inner Wrapper transparent, breites Layout */
#page-my-index .main-inner,
.pagelayout-mydashboard .main-inner,
.pagelayout-mycourses .main-inner {
    background: transparent !important;
    padding: 0 0.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Dashboard & Meine Kurse: Flex-Stretch verhindern */
#page-my-index .main-inner-wrapper,
.pagelayout-mydashboard .main-inner-wrapper,
.pagelayout-mycourses .main-inner-wrapper {
    flex-grow: 0 !important;
    width: 100% !important;
}

/* Meine Kurse: Region-Main volle Breite */
.pagelayout-mycourses #region-main,
.pagelayout-mycourses #region-main-box {
    max-width: 1400px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Konsistenter Abstand zwischen Dashboard-Bloecken */
#page-my-index .block_myoverview {
    margin-bottom: 1.5rem !important;
}

/* Dashboard: Block wrapping Cards entfernen */
#page-my-index .block.card,
#page-my-index section.block {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#page-my-index #region-main {
    background-color: transparent !important;
    padding: 0 !important;
}

#page-my-index #region-main-box {
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Kursübersicht Titel ausblenden */
#page-my-index .block_myoverview .card-title {
    display: none !important;
}

/* Kursübersicht Content bündig mit dem Titel */
#page-my-index .block_myoverview .card-text.content,
#page-my-index .block .content {
    padding: 0 !important;
}

#page-my-index .block.card>.card-body {
    padding: 0.5rem 0 !important;
}

/* -- Section Headings -- */
.block h5,
.block .card-title,
#region-main h2,
#region-main .h2 {
    font-weight: 700;
    color: var(--kapo-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.1rem;
}

/* -- Course Overview Block -- */

/* Card Grid: 3 Spalten auf Desktop */
.block_myoverview .card-deck,
.block_myoverview .card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

/* Bootstrap Column Reset fuer Grid */
.block_myoverview .card-grid>.col {
    max-width: 100% !important;
    width: auto !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.block_myoverview .card-grid .course-card {
    margin: 0 !important;
}

/* Course Card */
.block_myoverview .card.course-card,
.card.course-card {
    border: 2px solid var(--kapo-border);
    background-color: white;
    overflow: visible;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: none;
}

/* Kurs-Card Dropdown sichtbar ueber allem */
.card.course-card .dropdown-menu {
    z-index: 1050 !important;
}

/* Karte mit offenem Dropdown über Nachbarkarten anheben */
.card.course-card:has(.dropdown.show),
.card.course-card:has(.dropdown-menu.show) {
    z-index: 100 !important;
}

/* Kurs Sub-Navigation "Mehr" Dropdown sichtbar */
.secondary-navigation .dropdown-menu,
.tertiary-navigation .dropdown-menu,
[data-region="secondary-navigation"] .dropdown-menu,
.moremenu .dropdown-menu {
    z-index: 1060 !important;
    position: absolute !important;
}

/* position:relative entfernen damit Dropdown aus dem geклippten Container entkommt */
.moremenu .dropdown,
.secondary-navigation .moremenu .dropdown {
    position: static !important;
}

/* Moremenu selber darf nicht clipping verursachen */
.moremenu.navigation,
nav.moremenu,
.secondary-navigation,
[data-region="moremenu"] {
    overflow: visible !important;
}

/* Eltern-Block darf nicht clippen */
.block_myoverview.block.card,
#region-main .block.card {
    overflow: visible !important;
}

.block_myoverview .card.course-card:hover,
.card.course-card:hover {
    box-shadow: none;
    transform: none;
}

/* Course card image – wie in Vorlage */
.card.course-card .card-img-top,
.card.course-card .courseimagecontent {
    min-height: 200px;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

/* Course card body */
.card.course-card .card-body {
    padding: 1rem 1.25rem 0.5rem;
}

/* Course card title – fett, navy wie Vorlage */
.card.course-card .coursename,
.card.course-card .card-title a {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--kapo-navy);
    line-height: 1.35;
    transition: color 0.2s ease;
    text-decoration: none;
}

.card.course-card .coursename:hover,
.card.course-card .card-title a:hover {
    color: var(--kapo-text);
    text-decoration: none;
}

/* Course card description / category – dezent */
.card.course-card .card-text {
    color: var(--kapo-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 0.3rem;
}

/* Category Badge – oben links auf dem Bild */
.card.course-card .categoryname {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--kapo-navy) !important;
    color: white !important;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    z-index: 2;
    line-height: 1.3;
    opacity: 1;
    margin: 0 !important;
}

/* Course card footer – kompakt */
.card.course-card .card-footer {
    background-color: transparent;
    border-top: 1px solid rgba(0, 20, 50, 0.06);
    padding: 0.4rem 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: auto;
}

/* Drei-Punkte Menue im Card Footer */
.card.course-card .card-footer .dropdown .btn,
.card.course-card .card-footer .gotobutton .btn {
    color: var(--kapo-text-muted);
    border: none;
    background: transparent;
    padding: 0.2rem;
    font-size: 0.9rem;
}

.card.course-card .card-footer .dropdown .btn:hover {
    color: var(--kapo-navy);
}

/* -- Progress Bar -- */
.progress {
    height: 4px;
    background-color: var(--kapo-navy-light);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--kapo-navy);
    transition: width 0.6s ease;
}

/* Progress text */
.card.course-card .progress-text,
.card.course-card .text-muted {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kapo-navy) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* -- Dashboard Widgets / Blocks -- */
.block {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    box-shadow: var(--kapo-shadow-sm);
    overflow: visible;
}

.block .card-body,
.block .content {
    padding: 1.25rem;
}

/* -- Block Header -- */
.block .card-title,
.block .header .title h2 {
    border-bottom: 1px solid var(--kapo-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* Calendar today highlight */
.block_calendar_month .today a,
.block_calendar_month td.today {
    background-color: var(--kapo-navy) !important;
    color: white !important;
    border-radius: 50%;
}

/* -- Course Overview Filter Bar -- */
.block_myoverview [data-region="filter"] {
    margin-bottom: 1.5rem !important;
}

/* -- Course Overview Filter Pills -- */
.block_myoverview [data-region="filter-selector"] .btn,
.block_myoverview [data-region="filter-selector"] a {
    border-radius: 0;
    font-size: 0.825rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--kapo-border);
    color: var(--kapo-text-muted);
    background: white;
    transition: all var(--kapo-transition);
    margin-right: 0.3rem;
}

.block_myoverview [data-region="filter-selector"] .btn.active,
.block_myoverview [data-region="filter-selector"] .btn[aria-current="true"],
.block_myoverview [data-region="filter-selector"] a.active {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    color: white;
}


/* ============================================================
   5b. DASHBOARD FOOTER BLOCKS (Termine, Schnellzugriff)
   ============================================================ */

/* Footer-Container: Zentrierung */
html body#page-my-index #theme-block-region-footer,
html body#page-my-index #theme-block-region-footer-fullwidth {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

@media (max-width: 1399.98px) {

    html body#page-my-index #theme-block-region-footer,
    html body#page-my-index #theme-block-region-footer-fullwidth {
        padding: 1rem !important;
    }
}

/* Grid 2-Spalten ab 1000px – darunter Bootstrap col-xl-6 übernimmt Stack */
@media (min-width: 1000px) {

    html body#page-my-index #theme-block-region-footer .row,
    html body#page-my-index #theme-block-region-footer-fullwidth .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

/* Unter 1000px: sections werden volle Breite (Bootstrap col-xl-6 natürliches Stacking) */
@media (max-width: 999.98px) {

    /* Bootstrap .row hat negative Margins – auf 0 setzen damit das Footer-Padding greift */
    html body#page-my-index #theme-block-region-footer .row,
    html body#page-my-index #theme-block-region-footer-fullwidth .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body#page-my-index #theme-block-region-footer .row>section,
    html body#page-my-index #theme-block-region-footer-fullwidth .row>section {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Erste Col: linke 2/3 */
html body#page-my-index #theme-block-region-footer .row>[class*="col"]:first-child,
html body#page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:first-child {
    grid-column: 1 / 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Zweite Col: rechte 1/3 */
html body#page-my-index #theme-block-region-footer .row>[class*="col"]:last-child,
html body#page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:last-child {
    grid-column: 2 / 3 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* ============================================================
   5c. KOMMENDE TERMINE BLOCK
   ============================================================ */

/* Block Container – Weisser Hintergrund, Navy Top-Border */
.upcoming-courses-list {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
    border-top: 4px solid var(--kapo-navy) !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
    color: var(--kapo-text) !important;
}

/* Eltern-Block transparent (card wrapper) */
#page-my-index .block_coder.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#page-my-index .block_coder .card-body {
    padding: 0 !important;
}

#page-my-index .block_coder .card-text.content {
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Titel – navy, fett, uppercase */
.upcoming-courses-list h3 {
    color: var(--kapo-navy) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 1.25rem !important;
}

/* Event-Liste */
.upcoming-courses-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Einzelne Events */
.upcoming-courses-list li {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.upcoming-courses-list li:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Event-Row: Datum links, Info rechts */
.upcoming-courses-list .event-row {
    display: flex !important;
    align-items: stretch !important;
}

/* Datum-Box – Navy Hintergrund */
.upcoming-courses-list .event-date {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 65px !important;
    padding: 0.6rem 0.5rem !important;
    background-color: var(--kapo-navy) !important;
}

.upcoming-courses-list .event-month {
    color: white !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
}

.upcoming-courses-list .event-day {
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Event-Info rechts */
.upcoming-courses-list .event-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0.6rem 1rem !important;
}

.upcoming-courses-list .event-title {
    color: var(--kapo-navy) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.upcoming-courses-list .event-title:hover {
    color: var(--kapo-navy-dark) !important;
    text-decoration: underline !important;
}

.upcoming-courses-list .event-desc {
    color: var(--kapo-text-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    margin-top: 0.15rem !important;
    line-height: 1.3 !important;
}

/* ============================================================
   5d. SCHNELLZUGRIFF BLOCK
   ============================================================ */

/* Container – weisser Hintergrund, dünne Border, Navy Top-Border */
.schnellzugriff-container {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
    border-top: 4px solid var(--kapo-navy) !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
}

/* Titel – navy, fett, uppercase */
.schnellzugriff-container h3 {
    color: var(--kapo-navy) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 1.25rem !important;
}

/* Link-Liste */
.schnellzugriff-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Einzelne Links */
.schnellzugriff-container li {
    padding: 0.75rem 0.5rem !important;
    border-bottom: 1px solid rgba(0, 20, 50, 0.08) !important;
    margin: 0 !important;
    background: transparent !important;
    transition: padding-left 0.2s ease, background-color 0.2s ease !important;
    border-radius: 2px !important;
}

.schnellzugriff-container li:last-child {
    border-bottom: none !important;
}

.schnellzugriff-container li:hover {
    padding-left: 0.75rem !important;
    background-color: #f8f9fa !important;
}

/* Links – navy, dezent */
.schnellzugriff-container li a {
    color: var(--kapo-navy) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease !important;
    display: block !important;
}

.schnellzugriff-container li a:hover {
    color: var(--kapo-navy-dark) !important;
    text-decoration: none !important;
}

/* Icons – grau und Abstand */
.schnellzugriff-container .sq-icon {
    filter: grayscale(1) !important;
    opacity: 0.5 !important;
    margin-right: 0.75rem !important;
    font-size: 1.1rem !important;
    transition: opacity 0.2s ease !important;
}

.schnellzugriff-container li:hover .sq-icon {
    opacity: 0.8 !important;
}

/* ============================================================
   6. COURSE CATALOG & CATEGORY BADGES
   ============================================================ */

/* -- Category Filter Bar -- */
.course-filter-bar .btn,
#category-filter .btn {
    border-radius: 20px;
    font-size: 0.825rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    border: 1px solid var(--kapo-border);
    color: var(--kapo-text-muted);
    background: white;
    transition: all var(--kapo-transition);
}

.course-filter-bar .btn.active,
#category-filter .btn.active {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    color: white;
}

/* -- Category Badge Base -- */
.badge,
.tag,
span.badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3em 0.7em;
    border-radius: 3px;
}

/* Category-specific badge colors */
/* GRUNDAUSBILDUNG */
.badge-category-1,
[data-coursecategoryid="1"] .badge,
[data-coursecategoryid="1"] .categoryname {
    background-color: var(--kapo-navy) !important;
    color: white !important;
}

/* EINSATZTRAINING */
.badge-category-2,
[data-coursecategoryid="2"] .badge,
[data-coursecategoryid="2"] .categoryname {
    background-color: var(--kapo-orange) !important;
    color: white !important;
}

/* WEITERBILDUNG */
.badge-category-3,
[data-coursecategoryid="3"] .badge,
[data-coursecategoryid="3"] .categoryname {
    background-color: var(--kapo-navy-mid) !important;
    color: white !important;
}

/* FUEHRUNG */
.badge-category-4,
[data-coursecategoryid="4"] .badge,
[data-coursecategoryid="4"] .categoryname {
    background-color: var(--kapo-green) !important;
    color: white !important;
}

/* -- Course List Cards (catalog view) -- */
.coursebox {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: box-shadow var(--kapo-transition), transform var(--kapo-transition);
}

.coursebox:hover {
    box-shadow: var(--kapo-shadow-md);
    transform: translateY(-2px);
}

.coursebox .info .coursename a {
    font-weight: 700;
    color: var(--kapo-text);
    font-size: 1.05rem;
}

.coursebox .info .coursename a:hover {
    color: var(--kapo-navy);
}

/* -- Pagination -- */
.pagination .page-item .page-link {
    color: var(--kapo-navy);
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    margin: 0 0.15rem;
    font-weight: 600;
    transition: all var(--kapo-transition);
}

.pagination .page-item.active .page-link {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    color: white;
}

.pagination .page-item .page-link:hover {
    background-color: var(--kapo-navy-light);
    border-color: var(--kapo-navy);
    color: var(--kapo-navy);
}


/* ============================================================
   7. [ENTFERNT – Course View Styles wurden bereinigt]
   ============================================================ */


/* ============================================================
   8. QUIZ UI
   ============================================================ */

/* -- Quiz Timer -- */
#quiz-timer,
.quiz-timer-panel {
    background-color: var(--kapo-navy);
    color: white;
    border-radius: var(--kapo-radius);
    padding: 1.25rem;
    text-align: center;
}

#quiz-timer .timeinfo,
.quiz-timer-panel .timer-value {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#quiz-timer .timer-label,
.quiz-timer-panel .timer-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
}

/* -- Quiz Navigation Blocks -- */
.qn_buttons .qnbutton,
.quiz-navigation-panel .qnbutton {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0.15rem;
    transition: all var(--kapo-transition);
    background: white;
    color: var(--kapo-text);
}

.qn_buttons .qnbutton.thispage,
.qn_buttons .qnbutton:hover {
    background-color: var(--kapo-navy);
    color: white;
    border-color: var(--kapo-navy);
}

.qn_buttons .qnbutton.answersaved,
.qn_buttons .qnbutton.complete {
    background-color: var(--kapo-navy-light);
    border-color: var(--kapo-navy);
    color: var(--kapo-navy);
}

/* -- Quiz Question Card -- */
.que .formulation {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    padding: 1.5rem;
}

.que .answer label {
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--kapo-radius);
    margin-bottom: 0.5rem;
    transition: all var(--kapo-transition);
    cursor: pointer;
    display: block;
}

.que .answer label:hover {
    background-color: var(--kapo-navy-light);
    border-color: var(--kapo-navy-light);
}

.que .answer input[type="radio"]:checked+label,
.que .answer .checked,
.que .answer label.checked {
    border-color: var(--kapo-navy);
    background-color: var(--kapo-navy-light);
}

/* -- Quiz Submit / Next -- */
.submitbtns .btn-primary,
.mod_quiz-next-nav .btn-primary {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
    font-weight: 700;
    padding: 0.7rem 2rem;
    font-size: 1rem;
    border-radius: var(--kapo-radius);
    transition: all var(--kapo-transition);
}

.submitbtns .btn-primary:hover,
.mod_quiz-next-nav .btn-primary:hover {
    background-color: var(--kapo-navy-dark);
    transform: translateY(-1px);
    box-shadow: var(--kapo-shadow-md);
}

/* -- Quiz Results -- */

/* Passed badge */
.quiz-results .badge-success,
.que .state.correct,
.badge-success {
    background-color: var(--kapo-success);
    color: white;
    font-weight: 700;
    padding: 0.3em 0.8em;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

/* Wrong answer */
.que .state.incorrect,
.badge-danger {
    background-color: var(--kapo-danger);
    color: white;
}

/* Result detail cards */
.quiz-results .que,
.quiz-review .que {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    margin-bottom: 1rem;
    padding: 1.25rem;
}

/* Correct question */
.quiz-results .que.correct,
.quiz-review .que.correct {
    border-left: 4px solid var(--kapo-success);
}

/* Wrong question */
.quiz-results .que.incorrect,
.quiz-review .que.incorrect {
    border-left: 4px solid var(--kapo-danger);
}

/* Feedback box */
.generalfeedback,
.quiz-feedback {
    background-color: var(--kapo-navy-light);
    border-left: 4px solid var(--kapo-navy);
    border-radius: 0 var(--kapo-radius) var(--kapo-radius) 0;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    color: var(--kapo-text);
}

/* Meta pills (points, time, date) */
.quiz-results .quiz-info-pill,
.quiz-attempt-summary .cell {
    display: inline-flex;
    align-items: center;
    background-color: var(--kapo-navy-light);
    color: var(--kapo-navy);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.4rem;
}

/* Result circle (percentage) */
.chart-doughnut .doughnut-value,
.progress-circle .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kapo-navy);
}


/* ============================================================
   9. PROFILE & MANDATORY TRAINING TABLE
   ============================================================ */

/* -- Profile Header Card -- */
.userprofile .profile-card,
#page-user-profile .card,
.user-profile-card {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    padding: 2rem;
    box-shadow: var(--kapo-shadow-sm);
}

.userprofile .userpicture,
.user-profile-card .userpicture {
    border: 3px solid var(--kapo-navy);
    border-radius: 50%;
}

.userprofile h2,
.user-profile-card h2 {
    font-weight: 700;
    color: var(--kapo-text);
    margin-bottom: 0.25rem;
}

.userprofile .profile-field,
.user-profile-card .profile-meta {
    color: var(--kapo-text-muted);
    font-size: 0.9rem;
}

/* Edit profile button */
.userprofile .btn-outline-primary {
    border: 2px solid var(--kapo-navy);
    color: var(--kapo-navy);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.825rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--kapo-radius);
}

.userprofile .btn-outline-primary:hover {
    background-color: var(--kapo-navy);
    color: white;
}

/* -- Certificate / Achievement Cards -- */
.achievement-card,
.certificate-card {
    background-color: white;
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow var(--kapo-transition), transform var(--kapo-transition);
}

.achievement-card:hover,
.certificate-card:hover {
    box-shadow: var(--kapo-shadow-md);
    transform: translateY(-2px);
}

/* Valid badge */
.badge-valid,
.badge-outline-success {
    background-color: transparent;
    border: 1px solid var(--kapo-success);
    color: var(--kapo-success);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2em 0.6em;
    border-radius: 3px;
}

/* -- Mandatory Training Table (Pflichtschulungen) -- */
.generaltable,
.table,
table.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background-color: white;
    border-radius: var(--kapo-radius);
    overflow: hidden;
    border: 1px solid var(--kapo-border);
}

.generaltable thead th,
.table thead th {
    background-color: var(--kapo-offwhite);
    color: var(--kapo-text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--kapo-border);
    white-space: nowrap;
}

.generaltable tbody td,
.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--kapo-border);
    vertical-align: middle;
    font-size: 0.9rem;
}

.generaltable tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
    background-color: rgba(240, 242, 245, 0.5);
}

.generaltable tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--kapo-navy-light);
}

/* Status badges in table */
.status-completed,
.status-abgeschlossen {
    color: var(--kapo-success);
    font-weight: 700;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-renewal,
.status-erneuerung {
    color: var(--kapo-danger);
    font-weight: 700;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ============================================================
   10. FOOTER
   ============================================================ */

/* Moodle-eigenen Footer und Fussnote ausblenden */
#page-footer,
.footer-content-wrapper,
#footnote {
    display: none !important;
}

#footnote .footer-container {
    padding: 2rem 1.5rem !important;
}

/* Footer links */
#page-footer a,
footer a,
.footer-content-wrapper a {
    color: #555 !important;
    transition: color var(--kapo-transition);
    text-decoration: none;
}

#page-footer a:hover,
footer a:hover,
.footer-content-wrapper a:hover {
    color: var(--kapo-navy) !important;
    text-decoration: none;
}

/* Footer headings */
#page-footer h3,
#page-footer h4,
#page-footer .footer-heading,
footer h3,
footer h4,
.footer-container h3 {
    color: var(--kapo-navy) !important;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

/* Footer 4-Spalten Layout */
.footer-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem 2rem !important;
}

/* Footer responsive: iPad (< 992px) = 2x2, Mobile (< 576px) = 1 Spalte */
@media (max-width: 991.98px) {
    .footer-container {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .footer-container {
        grid-template-columns: 1fr !important;
    }
}

.footer-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

/* Footer Logo */
.footer-logo {
    margin-bottom: 0.75rem;
}

.footer-logo strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kapo-navy) !important;
}

.footer-logo img {
    max-height: 40px;
    margin-bottom: 0.5rem;
}

/* Footer Adresse */
.footer-address {
    font-size: 0.8rem;
    color: #666 !important;
    line-height: 1.6;
}

/* Footer Nav-Listen */
.footer-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-column ul li {
    margin-bottom: 0.4rem;
}

.footer-column ul li a {
    font-size: 0.85rem;
    color: #555 !important;
}

.footer-column ul li a:hover {
    color: var(--kapo-navy) !important;
}

/* Support-Infos */
.support-info {
    font-size: 0.85rem;
    color: #555 !important;
    margin-bottom: 0.4rem;
}

/* Footer: columns */
.footer-columns,
#page-footer .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--kapo-border);
}

/* Footer logo (Moodle standard) */
#page-footer .footer-logo img,
footer .footer-logo img {
    max-height: 40px;
    opacity: 1;
    margin-bottom: 0.75rem;
}

/* Copyright */
#page-footer .footer-copyright,
.footer-bottom,
footer .logininfo {
    font-size: 0.72rem;
    color: #aaa !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-top: 1px solid var(--kapo-border);
    margin-top: 0;
}

/* Footer popover */
.footer-popover {
    background-color: white !important;
    border-color: var(--kapo-border) !important;
}

.footer-popover .popover-body {
    color: var(--kapo-text) !important;
}


/* ============================================================
   11. FORMS & INPUTS
   ============================================================ */

.form-control,
select.form-control,
textarea.form-control {
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    color: var(--kapo-text);
    transition: border-color var(--kapo-transition), box-shadow var(--kapo-transition);
}

.form-control:focus {
    border-color: var(--kapo-navy);
    box-shadow: 0 0 0 3px var(--kapo-navy-glow);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--kapo-offwhite);
}

/* Custom select */
.custom-select,
select.custom-select {
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    font-size: 0.9rem;
}

/* Checkbox / Radio custom */
.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 3px var(--kapo-navy-glow);
}

/* Toggle switch */
.custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--kapo-navy);
    border-color: var(--kapo-navy);
}


/* ============================================================
   12. CARDS & PANELS (Generic)
   ============================================================ */

.card {
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    box-shadow: var(--kapo-shadow-sm);
    background-color: white;
}

.card-header {
    background-color: var(--kapo-offwhite);
    border-bottom: 1px solid var(--kapo-border);
    font-weight: 700;
    padding: 0.85rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* Alert boxes */
.alert-info {
    background-color: var(--kapo-navy-light);
    border-color: var(--kapo-navy);
    color: var(--kapo-navy-dark);
}

.alert-success {
    border-color: var(--kapo-success);
}

.alert-warning {
    border-color: var(--kapo-orange);
}

.alert-danger {
    border-color: var(--kapo-danger);
}


/* ============================================================
   13. DROPDOWNS & MODALS
   ============================================================ */

.dropdown-menu {
    border: 1px solid var(--kapo-border);
    border-radius: var(--kapo-radius);
    box-shadow: var(--kapo-shadow-md);
    padding: 0.5rem 0;
}

.dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    color: var(--kapo-text);
    transition: background-color var(--kapo-transition);
}

.dropdown-item:hover {
    background-color: var(--kapo-navy-light);
    color: var(--kapo-navy);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--kapo-navy);
    color: white;
}

/* Modal */
.modal-content {
    border: none;
    border-radius: var(--kapo-radius-lg);
    box-shadow: var(--kapo-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--kapo-border);
    padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 700;
    color: var(--kapo-navy);
}

.modal-footer {
    border-top: 1px solid var(--kapo-border);
    padding: 1rem 1.5rem;
}


/* ============================================================
   14. NOTIFICATIONS & MESSAGING
   ============================================================ */

/* --- Container --- */
.popover-region-container {
    background-color: var(--kapo-navy) !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 20, 50, 0.5) !important;
    min-width: 340px;
    max-width: 380px;
    overflow: hidden;
    padding: 0 !important;
    height: auto !important;
}

/* --- Pfeil ausblenden --- */
.popover-region-toggle::after,
.popover-region-toggle::before {
    display: none !important;
}

/* --- Header: Titel links, Icons rechts --- */
.popover-region-header-container {
    background-color: rgba(0, 25, 55, 0.8) !important;
    border-bottom: 1px solid rgba(0, 40, 80, 1) !important;
    padding: 0.5rem 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    min-height: 36px;
}

.popover-region-header-text {
    color: white !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.popover-region-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    margin-left: auto !important;
}

.popover-region-header-actions a,
.popover-region-header-actions button {
    color: rgba(255, 255, 255, 0.4) !important;
    padding: 0.25rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease;
}

.popover-region-header-actions a:hover,
.popover-region-header-actions button:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.popover-region-header-actions .icon {
    font-size: 0.72rem !important;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
}



/* --- Content Area --- */
.popover-region-content-container {
    background-color: var(--kapo-navy) !important;
    max-height: 360px;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
}

.popover-region-content {
    padding: 0 !important;
    margin: 0 !important;
}

.all-notifications {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Einzelne Notification --- */
.content-item-container.notification {
    border-bottom: 1px solid rgba(0, 40, 80, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

.content-item-container.notification:last-child {
    border-bottom: none !important;
}

/* Context Link (der ganze klickbare Bereich) */
.content-item-container .context-link {
    display: block !important;
    padding: 0.7rem 0.65rem 0.45rem !important;
    text-decoration: none !important;
    color: white !important;
    transition: background-color 0.15s ease;
}

.content-item-container .context-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Content Body: Icon links, Text rechts auf gleicher Hoehe */
.content-item-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}

/* Notification Icon */
.notification-image {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    padding-top: 1px;
}

.notification-image .icon {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.75rem !important;
}

/* Notification Text */
.content-item-container .notification-message {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.78rem !important;
    font-weight: 500;
    line-height: 1.35;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Footer mit Timestamp */
.content-item-footer {
    padding: 0.15rem 0 0 1.65rem !important;
}

.content-item-footer .timestamp {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
}

/* "Mitteilung vollstaendig anzeigen" */
.content-item-container .view-more {
    display: block !important;
    padding: 0.15rem 0.65rem 0.45rem 1.85rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
}

.content-item-container .view-more:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Empty Message - nur sichtbar wenn keine Notifications */
.popover-region-content .empty-message {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.78rem;
    text-align: center;
    padding: 1.5rem 1rem !important;
    display: none;
}

/* Empty message nur zeigen wenn all-notifications leer */
.all-notifications:empty~.empty-message {
    display: block;
}

/* Loading icon im Content verstecken */
.popover-region-content-container>.loading-icon {
    display: none !important;
}

/* Content Container: keine fixe Hoehe */
.popover-region-content-container {
    max-height: none !important;
    height: auto !important;
}

.popover-region-content {
    height: auto !important;
}

.all-notifications {
    height: auto !important;
}

/* --- Footer: "Alle anzeigen" --- */
.popover-region-container>.see-all-link {
    display: block !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.popover-region-footer-container {
    background-color: rgba(0, 25, 55, 0.6) !important;
    border-top: 1px solid rgba(0, 40, 80, 1) !important;
    padding: 0.4rem 0.65rem !important;
    margin: 0 !important;
    text-align: center;
}

/* Abstand unter Footer entfernen */
.popover-region-container {
    padding-bottom: 0 !important;
}

.popover-region-seeall-text {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72rem !important;
    font-weight: 600;
}

.see-all-link:hover .popover-region-seeall-text {
    color: white !important;
}

/* --- Badge Counter --- */
.popover-region-notifications .count-container {
    background-color: var(--kapo-danger);
    color: white !important;
    font-weight: 700;
    font-size: 0.7rem;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Scrollbar --- */
.popover-region-content-container::-webkit-scrollbar {
    width: 3px;
}

.popover-region-content-container::-webkit-scrollbar-track {
    background: transparent;
}

.popover-region-content-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   14b. DRAWER / OFFCANVAS NAVIGATION (global)
   ============================================================ */

/* Drawer Container */
body:not(#page-login-index):not(.pagelayout-login) .drawer,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer,
body:not(#page-login-index):not(.pagelayout-login) .offcanvas,
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] {
    background-color: white !important;
    border-left: 1px solid var(--kapo-border) !important;
    border-right: none !important;
    box-shadow: -2px 0 12px rgba(0, 20, 50, 0.08) !important;
    color: #343a40 !important;
}

/* Drawer: nur Textfarbe setzen, KEIN background transparent (wuerde alles unsichtbar machen) */
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] *,
body:not(#page-login-index):not(.pagelayout-login) .drawer *,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer * {
    color: #343a40 !important;
}

/* Abschnitt-Header (Favoriten, Gruppe, Persönlich): leichtes Grau */
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] [data-region="view-overview"] .list-group,
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] [data-region="group-messages-container"],
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] [data-action="view-group-messages"],
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] [data-action="view-contacts"] {
    background-color: white !important;
}

/* Sektion-Trennzeilen */
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] [data-region="empty-message-container"],
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] .border-top {
    border-color: var(--kapo-border) !important;
}

/* Suchfeld Hintergrund sichtbar machen */
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] input,
body:not(#page-login-index):not(.pagelayout-login) [data-region="right-hand-drawer"] .form-control {
    background-color: #f0f2f5 !important;
    border: 1px solid var(--kapo-border) !important;
    color: #343a40 !important;
}

/* Drawer Header */
body:not(#page-login-index):not(.pagelayout-login) .drawer .drawerheader,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .drawerheader {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
}

/* Drawer Close Button */
body:not(#page-login-index):not(.pagelayout-login) .drawer .btn-close,
body:not(#page-login-index):not(.pagelayout-login) .drawer .close,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .btn-close,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .close {
    filter: none !important;
    opacity: 0.6;
}

/* ---- Messaging Drawer (Mitteilungen rechts) ---- */

/* Close Drawer Button [X] */
[data-region="right-hand-drawer"] [data-action="closedrawer"],
[data-region="right-hand-drawer"] .closewidget a {
    color: #343a40 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.2rem;
    padding: 0.3rem !important;
    text-decoration: none !important;
}

[data-region="right-hand-drawer"] [data-action="closedrawer"]:hover {
    color: var(--kapo-navy) !important;
}

/* Back Arrow */
[data-region="right-hand-drawer"] [data-route-back] {
    color: #343a40 !important;
    text-decoration: none !important;
}

[data-region="right-hand-drawer"] [data-route-back] .icon {
    color: #343a40 !important;
    filter: none !important;
}

[data-region="right-hand-drawer"] [data-route-back]:hover {
    color: var(--kapo-navy) !important;
}

/* Three Dots / Icons */
[data-region="right-hand-drawer"] .btn-icon,
[data-region="right-hand-drawer"] [data-toggle="dropdown"] {
    color: #343a40 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-region="right-hand-drawer"] .btn-icon:hover {
    color: var(--kapo-navy) !important;
    background: rgba(0, 51, 102, 0.06) !important;
}

/* Profile Header */
[data-region="right-hand-drawer"] [data-region="header-content"] {
    border-bottom: 1px solid var(--kapo-border) !important;
    padding: 0.75rem !important;
    background-color: white !important;
}

[data-region="right-hand-drawer"] [data-region="header-content"] strong,
[data-region="right-hand-drawer"] [data-region="header-content"] .text-truncate {
    color: #343a40 !important;
}

[data-region="right-hand-drawer"] [data-region="header-content"] p,
[data-region="right-hand-drawer"] [data-region="header-content"] .font-weight-light {
    color: var(--kapo-text-muted) !important;
}

/* Avatar */
[data-region="right-hand-drawer"] .rounded-circle {
    border: 2px solid var(--kapo-border) !important;
}

/* Icons */
[data-region="right-hand-drawer"] .icon {
    color: #343a40 !important;
}

/* Persoenlicher Bereich */
[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] {
    border-top: 1px solid var(--kapo-border) !important;
    padding: 1.5rem 1rem !important;
    text-align: center;
}

[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] p {
    color: var(--kapo-text-muted) !important;
}

[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] .font-italic {
    color: var(--kapo-text-muted) !important;
    font-size: 0.82rem;
}

/* Alle Texte im Drawer */
[data-region="right-hand-drawer"] .message-app * {
    color: #343a40 !important;
}

/* Links im Drawer */
[data-region="right-hand-drawer"] a {
    color: #343a40 !important;
    text-decoration: none !important;
}

[data-region="right-hand-drawer"] a:hover {
    color: var(--kapo-navy) !important;
}

/* Drawer Dropdowns */
[data-region="right-hand-drawer"] .dropdown-menu {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
}

/* Drawer Logo */
body:not(#page-login-index):not(.pagelayout-login) .drawer img,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer img {
    filter: none !important;
}

/* Drawer: Alle Links anthrazit */
body:not(#page-login-index):not(.pagelayout-login) .drawer a,
body:not(#page-login-index):not(.pagelayout-login) .drawer span,
body:not(#page-login-index):not(.pagelayout-login) .drawer .nav-link,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer span,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .nav-link,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item {
    color: #343a40 !important;
    font-weight: 600;
}

/* Drawer: List Items */
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item {
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--kapo-border) !important;
}

/* Drawer: Hover */
body:not(#page-login-index):not(.pagelayout-login) .drawer a:hover,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item:hover,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a:hover,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item:hover {
    background-color: rgba(0, 51, 102, 0.05) !important;
    color: var(--kapo-navy) !important;
}

/* Drawer: Aktiver Link */
body:not(#page-login-index):not(.pagelayout-login) .drawer a.active,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item.active,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a.active,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item.active {
    background-color: rgba(0, 51, 102, 0.08) !important;
    color: var(--kapo-navy) !important;
    font-weight: 700;
}

/* Drawer: Icons */
body:not(#page-login-index):not(.pagelayout-login) .drawer .icon,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .icon {
    color: #343a40 !important;
}

/* Drawer: Hintergrund-Overlay */
.drawer-background {
    background-color: rgba(0, 20, 50, 0.3) !important;
}

/* Alt-Block (navy) entfernt — ersetzt durch weisses Theme oben */

/* Drawer: Alle Links und Texte anthrazit */
body:not(#page-login-index):not(.pagelayout-login) .drawer a,
body:not(#page-login-index):not(.pagelayout-login) .drawer span,
body:not(#page-login-index):not(.pagelayout-login) .drawer .nav-link,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer span,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .nav-link,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item {
    color: #343a40 !important;
}

/* Drawer: List Items */
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item {
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--kapo-border) !important;
}

/* Drawer: Hover */
body:not(#page-login-index):not(.pagelayout-login) .drawer a:hover,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item:hover,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a:hover,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item:hover {
    background-color: rgba(0, 51, 102, 0.05) !important;
    color: var(--kapo-navy) !important;
}

/* Drawer: Aktiver Link */
body:not(#page-login-index):not(.pagelayout-login) .drawer a.active,
body:not(#page-login-index):not(.pagelayout-login) .drawer .list-group-item.active,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a.active,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .list-group-item.active {
    background-color: rgba(0, 51, 102, 0.08) !important;
    color: var(--kapo-navy) !important;
    font-weight: 700;
}

/* Drawer: Icons */
body:not(#page-login-index):not(.pagelayout-login) .drawer .icon,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .icon {
    color: #343a40 !important;
}

/* Drawer: Logo kein Filter mehr */
body:not(#page-login-index):not(.pagelayout-login) .drawer img,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer img {
    filter: none !important;
}

/* Drawer: Close Button */
body:not(#page-login-index):not(.pagelayout-login) .drawer .btn-close,
body:not(#page-login-index):not(.pagelayout-login) .drawer .close,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .btn-close,
body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .close {
    filter: none !important;
    opacity: 0.6;
}

/* Drawer: right-hand message-app alle Texte anthrazit */
[data-region="right-hand-drawer"] .message-app *,
[data-region="right-hand-drawer"] a,
[data-region="right-hand-drawer"] span,
[data-region="right-hand-drawer"] .icon,
[data-region="right-hand-drawer"] [data-action="closedrawer"],
[data-region="right-hand-drawer"] [data-route-back],
[data-region="right-hand-drawer"] .btn-icon,
[data-region="right-hand-drawer"] [data-toggle="dropdown"],
[data-region="right-hand-drawer"] [data-region="header-content"] strong,
[data-region="right-hand-drawer"] [data-region="header-content"] .text-truncate {
    color: #343a40 !important;
    filter: none !important;
}

/* Drawer: gedimmter Text */
[data-region="right-hand-drawer"] [data-region="header-content"] p,
[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] p,
[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] .font-italic,
[data-region="right-hand-drawer"] .text-muted {
    color: var(--kapo-text-muted) !important;
}

/* Drawer: Hover */
[data-region="right-hand-drawer"] a:hover,
[data-region="right-hand-drawer"] [data-action="closedrawer"]:hover,
[data-region="right-hand-drawer"] [data-route-back]:hover,
[data-region="right-hand-drawer"] .btn-icon:hover {
    color: var(--kapo-navy) !important;
    background: rgba(0, 51, 102, 0.06) !important;
}

/* Drawer: Dropdowns weiss */
[data-region="right-hand-drawer"] .dropdown-menu {
    background-color: white !important;
    border: 1px solid var(--kapo-border) !important;
}

/* Drawer: Avatar-Border */
[data-region="right-hand-drawer"] .rounded-circle {
    border: 2px solid var(--kapo-border) !important;
}

/* Drawer: Trennlinien */
[data-region="right-hand-drawer"] [data-region="header-content"],
[data-region="right-hand-drawer"] [data-region="self-conversation-message-container"] {
    border-color: var(--kapo-border) !important;
}

/* Drawer-Overlay */
.drawer-background {
    background-color: rgba(0, 20, 50, 0.3) !important;
}


/* ============================================================
   15. RESPONSIVE & POLISH
   ============================================================ */

/* -- Smooth transitions globally -- */
*,
*::before,
*::after {
    transition-property: none;
}

a,
.btn,
.card,
.nav-link,
.dropdown-item,
.form-control,
.activity-item,
.coursebox,
input,
select,
textarea {
    transition-duration: var(--kapo-transition);
}

/* -- Focus States: blaue Umrandung entfernen -- */
*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Keyboard-Navigation: dezenter Indicator */
*:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 1px;
    box-shadow: none !important;
}

/* -- Tablet (768px - 1024px) -- */
@media (max-width: 1024px) {

    .block_myoverview .card-deck,
    .block_myoverview .card-grid,
    .course-cards-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Footer-Blocks auf Tablet untereinander */
    #page-my-index #theme-block-region-footer .row,
    #page-my-index #theme-block-region-footer-fullwidth .row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    #page-my-index #theme-block-region-footer .row>[class*="col"]:first-child,
    #page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:first-child {
        grid-column: span 1 !important;
    }


}

/* -- Mobile (< 768px) -- */
@media (max-width: 767px) {

    /* Cards auf Mobile: 1 Spalte */
    .block_myoverview .card-deck,
    .block_myoverview .card-grid,
    .course-cards-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Footer-Blocks auf Mobile: 1 Spalte */
    #page-my-index #theme-block-region-footer .row,
    #page-my-index #theme-block-region-footer-fullwidth .row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #page-my-index #theme-block-region-footer .row>[class*="col"]:first-child,
    #page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:first-child {
        grid-column: span 1 !important;
    }

    #page-my-index #theme-block-region-footer,
    #page-my-index #theme-block-region-footer-fullwidth {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Mobile Navigation Drawer: Navy passend zum Header */
    body:not(#page-login-index):not(.pagelayout-login) .drawer,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas,
    body:not(#page-login-index):not(.pagelayout-login) .navbar-collapse {
        background-color: var(--kapo-navy) !important;
        border-right: none !important;
        box-shadow: 4px 0 20px rgba(0, 20, 50, 0.3);
    }

    /* Drawer: Schliessen-Button weiss */
    body:not(#page-login-index):not(.pagelayout-login) .drawer .close,
    body:not(#page-login-index):not(.pagelayout-login) .drawer .btn-close,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .close,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.8;
    }

    /* Drawer: Logo weiss */
    body:not(#page-login-index):not(.pagelayout-login) .drawer .navbar-brand img,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .navbar-brand img,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas .navbar-brand img {
        filter: brightness(0) invert(1);
    }

    /* Drawer: Links weiss */
    body:not(#page-login-index):not(.pagelayout-login) .drawer a,
    body:not(#page-login-index):not(.pagelayout-login) .drawer .nav-link,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .nav-link,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas a,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas .nav-link,
    body:not(#page-login-index):not(.pagelayout-login) .navbar-collapse .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 600;
        padding: 0.7rem 1.2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Drawer: Hover */
    body:not(#page-login-index):not(.pagelayout-login) .drawer a:hover,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a:hover,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas a:hover,
    body:not(#page-login-index):not(.pagelayout-login) .navbar-collapse .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: white !important;
    }

    /* Drawer: Aktiver Link */
    body:not(#page-login-index):not(.pagelayout-login) .drawer a.active,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer a.active,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas .nav-link.active,
    body:not(#page-login-index):not(.pagelayout-login) .navbar-collapse .nav-link.active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        font-weight: 700;
    }

    /* Drawer: Icons navy (Drawer-Hintergrund ist weiss) */
    body:not(#page-login-index):not(.pagelayout-login) .drawer .icon,
    body:not(#page-login-index):not(.pagelayout-login) #nav-drawer .icon,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas .icon {
        color: var(--kapo-navy) !important;
    }

    /* Drawer: Hintergrund Overlay */
    body:not(#page-login-index):not(.pagelayout-login) .drawer-background,
    body:not(#page-login-index):not(.pagelayout-login) .offcanvas-backdrop {
        background-color: rgba(0, 20, 50, 0.5) !important;
    }

    .navbar.fixed-top,
    nav.navbar {
        padding: 0 0.75rem;
        min-height: 52px;
    }

    .navbar-brand img,
    .navbar .logo img {
        max-height: 36px;
    }

    /* Hamburger Icon: dunkel (navbar Hintergrund ist weiss) */
    body:not(#page-login-index):not(.pagelayout-login) .navbar-toggler {
        border-color: var(--kapo-navy) !important;
    }

    body:not(#page-login-index):not(.pagelayout-login) .navbar-toggler-icon {
        filter: brightness(0) !important;
    }

    body:not(#page-login-index):not(.pagelayout-login) .navbar-toggler .icon,
    body:not(#page-login-index):not(.pagelayout-login) .navbar .btn[data-toggler] .icon {
        color: var(--kapo-navy) !important;
    }

    .navbar .nav-link,
    .primary-navigation .nav-link {
        font-size: 0.875rem;
        padding: 0.4rem 0.6rem;
    }

    .block_myoverview .card-deck,
    .course-cards-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .card.course-card .card-img-top,
    .card.course-card .courseimagecontent {
        min-height: 120px;
    }



    /* Quiz timer smaller */
    #quiz-timer .timeinfo,
    .quiz-timer-panel .timer-value {
        font-size: 1.8rem;
    }

    .qn_buttons .qnbutton {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    /* Footer single column */
    .footer-columns,
    #page-footer .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Tables scroll horizontally */
    .generaltable,
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Login-Fenster auf Mobile zentrieren + breiter */
    body#page-login-index .login-wrapper .login-container,
    body.pagelayout-login .login-container,
    body#page-login-index #region-main .card,
    body.pagelayout-login #region-main .card {
        margin: 0 auto !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
    }

    /* Hintergrundbild verwaschen auf Mobile */
    body#page-login-index::before,
    body.pagelayout-login::before {
        content: '' !important;
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        background: rgba(255, 255, 255, 0.15);
        z-index: 0;
    }
}

/* -- Large Desktop (> 1400px) -- */
@media (min-width: 1400px) {

    .block_myoverview .card-deck,
    .course-cards-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    #region-main {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* -- Print Styles -- */
@media print {

    .navbar,
    .primary-navigation,
    #page-footer,
    footer,
    .block_navigation,
    .block_settings,
    .drawer,
    #nav-drawer {
        display: none !important;
    }

    body {
        background: white;
        font-size: 12pt;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}


/* ============================================================
   14b. GLOBALE LAYOUT-REGELN (alle Seiten ausser Login)
   Zentriert + gleiche Breite wie Kursansicht (max 1400px)
   Ausnahmen werden weiter unten per spezifischem Selektor überschrieben
   ============================================================ */

body:not(.pagelayout-login) #page,
body:not(.pagelayout-login) #page-wrapper,
body:not(.pagelayout-login) #page-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body:not(.pagelayout-login) .main-inner,
body:not(.pagelayout-login) #region-main-box,
body:not(.pagelayout-login) #region-main {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

body:not(.pagelayout-login) #region-main-box {
    background-color: white !important;
}

body:not(.pagelayout-login) #topofscroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body:not(.pagelayout-login) #page-header {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
}

body:not(.pagelayout-login) .secondary-navigation .navigation {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}


/* ============================================================
   Banner: fc-header-banner – Styling nach Vorlage
   (navy Hintergrund, abgerundete Ecken, weisser Text, Icon rechts)
   ============================================================ */

body#page-course-view-compact .fc-header-banner {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    background-color: var(--kapo-navy) !important;
    border-radius: 0 !important;
    padding: 2rem 2.5rem !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: unset !important;
}

body#page-course-view-compact .format-compact-wrapper {
    min-height: unset !important;
}

body#page-course-view-compact #region-main {
    padding-bottom: 2rem !important;
}

body#page-course-view-compact .format-compact-sidebar {
    gap: 2rem !important;
    padding: 1.5rem 1.5rem 0 0 !important;
}

@media (max-width: 767.98px) {

    /* Kursfortschritt-Block: zentriert auf Mobile */
    body#page-course-view-compact .format-compact-sidebar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
        gap: 1rem !important;
    }

    body#page-course-view-compact .fc-progress-label,
    body#page-course-view-compact .fc-sidebar-progress-label {
        text-align: center !important;
    }

    /* Trennlinie nach Kursfortschritt: ausblenden */
    body#page-course-view-compact .fc-progress-block {
        border-bottom-color: transparent !important;
    }

    body#page-course-view-compact .format-compact-sidebar::after,
    body#page-course-view-compact .fc-progress-separator,
    body#page-course-view-compact .fc-sidebar-divider,
    body#page-course-view-compact .format-compact-sidebar hr {
        display: none !important;
        border: none !important;
    }
}

/* Inhalt: Kategorie + Titel + Beschreibung (linke Seite) */
body#page-course-view-compact .fc-header-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    z-index: 1 !important;
}

/* Kategorie-Breadcrumb (kleine Uppercase-Zeile) */
body#page-course-view-compact .fc-header-category {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 0.5rem !important;
}

/* Modul-Titel (grosser, fetter Heading) */
body#page-course-view-compact .fc-header-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: white !important;
    line-height: 1.2 !important;
}

/* Zusammenfassung / Beschreibungstext */
body#page-course-view-compact .fc-header-summary {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.5 !important;
    max-width: 70% !important;
}

body#page-course-view-compact .fc-header-summary p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Wasserzeichen / Icon rechts */
body#page-course-view-compact .fc-header-watermark {
    position: absolute !important;
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.25 !important;
    width: 130px !important;
    height: 130px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body#page-course-view-compact .fc-header-watermark img,
body#page-course-view-compact .fc-course-img-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}


/* Cards-Zeile: transparenter Hintergrund, kein gemeinsamer Rahmen */
body#page-course-view-compact .fc-content-row {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Spalten: gleiche Breite, kein extra Padding */
body#page-course-view-compact .fc-content-row>[class*="col"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: auto !important;
}

body#page-course-view-compact .fc-content-row>[class*="col"]:first-child {
    padding-left: 0 !important;
}

body#page-course-view-compact .fc-content-row>[class*="col"]:last-child {
    padding-right: 0 !important;
}

/* Mobile: Lernziele und Interaktive Uebung untereinander */
@media (max-width: 767.98px) {
    body#page-course-view-compact .fc-content-row {
        flex-direction: column !important;
    }

    body#page-course-view-compact .fc-content-row>[class*="col"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Lernmaterialien: volle Breite, 1rem Abstand nach oben */
body#page-course-view-compact .fc-materials-card,
body#page-course-view-compact .section.main,
body#page-course-view-compact [data-for="section"] {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* -- Forum-Bar: Styling nach Vorlage -- */
body#page-course-view-compact .fc-forum-bar {
    width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #eef2f8 !important;
    border: 1.5px dashed #b0bfcf !important;
    border-radius: var(--kapo-radius) !important;
    padding: 1rem 1.25rem !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* Karten innerhalb fc-content-row: kein nativer margin-top */
body#page-course-view-compact .fc-content-row .card,
body#page-course-view-compact .fc-content-row .fc-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Forum-Bar: fc-forum-inner = Icon + Info-Block nebeneinander (row) */
body#page-course-view-compact .fc-forum-bar .fc-forum-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Forum-Bar: fc-forum-info = Title + Desc übereinander (column) */
body#page-course-view-compact .fc-forum-bar .fc-forum-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
}



/* Forum-Titel */
body#page-course-view-compact .fc-forum-bar .fc-forum-title,
body#page-course-view-compact .fc-forum-bar strong,
body#page-course-view-compact .fc-forum-bar b {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--kapo-text) !important;
    display: block !important;
}

/* Forum-Beschreibung – neue Zeile */
body#page-course-view-compact .fc-forum-bar .fc-forum-desc,
body#page-course-view-compact .fc-forum-bar p,
body#page-course-view-compact .fc-forum-bar small {
    display: block !important;
    font-size: 0.83rem !important;
    color: var(--kapo-text-muted, #6c757d) !important;
    margin: 0.1rem 0 0 0 !important;
}

/* Forum-Bar: Buttons-Bereich rechts */
body#page-course-view-compact .fc-forum-bar .fc-forum-actions,
body#page-course-view-compact .fc-forum-bar>div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* "Themen anzeigen" – Button mit weissem Hintergrund, gleiche Höhe */
body#page-course-view-compact .fc-forum-bar .fc-forum-btn-outline,
body#page-course-view-compact .fc-forum-bar a:first-of-type {
    display: inline-flex !important;
    align-items: center !important;
    height: 2.2rem !important;
    padding: 0 1rem !important;
    border: 1.5px solid var(--kapo-border) !important;
    border-radius: var(--kapo-radius) !important;
    color: var(--kapo-navy) !important;
    background: white !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all var(--kapo-transition) !important;
    white-space: nowrap !important;
}

body#page-course-view-compact .fc-forum-bar .fc-forum-btn-outline:hover,
body#page-course-view-compact .fc-forum-bar a:first-of-type:hover {
    background: var(--kapo-navy-light, #eef2f8) !important;
    text-decoration: none !important;
}

/* "Beitrag verfassen" – Navy-Filled-Button, gleiche Höhe */
body#page-course-view-compact .fc-forum-bar .fc-forum-btn-primary,
body#page-course-view-compact .fc-forum-bar a:last-of-type {
    display: inline-flex !important;
    align-items: center !important;
    height: 2.2rem !important;
    padding: 0 1rem !important;
    border: 1.5px solid var(--kapo-navy) !important;
    border-radius: var(--kapo-radius) !important;
    color: white !important;
    background: var(--kapo-navy) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all var(--kapo-transition) !important;
    white-space: nowrap !important;
}

body#page-course-view-compact .fc-forum-bar .fc-forum-btn-primary:hover,
body#page-course-view-compact .fc-forum-bar a:last-of-type:hover {
    background: var(--kapo-navy-dark) !important;
    border-color: var(--kapo-navy-dark) !important;
}


body#page-course-view-compact #theme-block-region-outside-left {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body#page-course-view-compact .fc-forum-bar .card,
body#page-course-view-compact .fc-forum-bar .activity-card,
body#page-course-view-compact .fc-forum-bar [class*="card"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* .fc-forum-inner: Umrandung und Schatten entfernen */
body#page-course-view-compact .fc-forum-inner {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Beschreibungstext: neue Zeile */
body#page-course-view-compact .fc-forum-desc {
    display: block !important;
    font-size: 0.83rem !important;
    color: var(--kapo-text-muted, #6c757d) !important;
    margin: 0.1rem 0 0 0 !important;
}

/* Exakte Button-Klassen: gleiche Höhe */
body#page-course-view-compact .fc-btn-forum-outline {
    display: inline-flex !important;
    align-items: center !important;
    height: 2.2rem !important;
    padding: 0 1rem !important;
    border: 1.5px solid var(--kapo-border) !important;
    border-radius: var(--kapo-radius) !important;
    color: var(--kapo-navy) !important;
    background: white !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body#page-course-view-compact .fc-btn-forum-primary {
    display: inline-flex !important;
    align-items: center !important;
    height: 2.2rem !important;
    padding: 0 1rem !important;
    border: 1.5px solid var(--kapo-navy) !important;
    border-radius: var(--kapo-radius) !important;
    color: white !important;
    background: var(--kapo-navy) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}




/* -- Forum-Bar: Mobile – Text volle Breite, Buttons darunter (ab 990px) -- */
@media (max-width: 990px) {
    body#page-course-view-compact .fc-forum-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.85rem 1rem !important;
        gap: 0.75rem !important;
    }

    body#page-course-view-compact .fc-forum-bar .fc-forum-inner,
    body#page-course-view-compact .fc-forum-inner {
        width: 100% !important;
    }

    body#page-course-view-compact .fc-forum-bar .fc-forum-actions,
    body#page-course-view-compact .fc-forum-bar>div:last-child {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    body#page-course-view-compact .fc-forum-bar .fc-forum-btn-outline,
    body#page-course-view-compact .fc-forum-bar a:first-of-type,
    body#page-course-view-compact .fc-forum-bar .fc-forum-btn-primary,
    body#page-course-view-compact .fc-forum-bar a:last-of-type,
    body#page-course-view-compact .fc-btn-forum-outline,
    body#page-course-view-compact .fc-btn-forum-primary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* -- Kursfortschritt-Titel -- */
body#page-course-view-compact .fc-sidebar-progress-label,
body#page-course-view-compact .fc-progress-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--kapo-text-muted) !important;
    margin-bottom: 0.5rem !important;
}

/* -- Modul-Liste in Sidebar -- */

/* Liste selbst: kein Padding/Margin */
body#page-course-view-compact .fc-module-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Modul-Links: Basis-Style */
body#page-course-view-compact .fc-module-list .fc-module-link,
body#page-course-view-compact .fc-module-list a {
    color: var(--kapo-text) !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0.6rem !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 var(--kapo-radius) var(--kapo-radius) 0 !important;
    transition: all var(--kapo-transition) !important;
}

/* Hover */
body#page-course-view-compact .fc-module-list .fc-module-link:hover,
body#page-course-view-compact .fc-module-list a:hover {
    background-color: var(--kapo-navy-light) !important;
    border-left-color: var(--kapo-navy) !important;
    color: var(--kapo-navy) !important;
}

/* Aktives Modul (.fc-module-active) */
body#page-course-view-compact .fc-module-list .fc-module-active .fc-module-link,
body#page-course-view-compact .fc-module-list .fc-module-active a,
body#page-course-view-compact .fc-module-list a.active,
body#page-course-view-compact .fc-module-list .active a {
    background-color: var(--kapo-navy-light) !important;
    border-left-color: var(--kapo-navy) !important;
    color: var(--kapo-navy) !important;
    font-weight: 700 !important;
}

/* Bullet-Icons: Größe und Farbe */
body#page-course-view-compact .fc-module-bullet {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    flex-shrink: 0 !important;
    font-size: 0.9rem !important;
}

/* Aktiv: navy Icon */
body#page-course-view-compact .fc-module-active .fc-module-bullet {
    color: var(--kapo-navy) !important;
}

/* Abgeschlossen: grün */
body#page-course-view-compact .fc-module-done .fc-module-bullet {
    color: #28a745 !important;
}

/* Gesperrt: grau */
body#page-course-view-compact .fc-module-locked .fc-module-bullet,
body#page-course-view-compact .fc-module-locked .fc-module-link {
    color: #a0a8b4 !important;
}

/* Modul-Name */
body#page-course-view-compact .fc-module-name {
    flex: 1 !important;
    min-width: 0 !important;
}


/* -- Content Cards (Lernziele, Interaktive Uebung, Lernmaterialien) -- */
body#page-course-view-compact .fc-content-card,
body#page-course-view-compact .format-compact-main .card {
    background: white !important;
    border: 1px solid var(--kapo-border) !important;
    box-shadow: none !important;
    border-radius: var(--kapo-radius) !important;
}

/* Jede Karte in fc-content-row: eigener weisser Container mit Border */
body#page-course-view-compact .fc-objectives-card,
body#page-course-view-compact .fc-exercise-card {
    background: white !important;
    border: 1px solid var(--kapo-border) !important;
    box-shadow: none !important;
    height: 100% !important;
}

/* ---- Lernziele Card (.fc-card.fc-objectives-card) ---- */

/* Karten-Header: Flex, Trennlinie unten */
body#page-course-view-compact .fc-objectives-card .fc-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.75rem 1.25rem !important;
    background: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
}

/* Icon-Wrapper: hellblauer Hintergrund (hohe Spezifitaet) */
body#page-course-view-compact .fc-card.fc-objectives-card .fc-card-icon-wrap,
body#page-course-view-compact .fc-objectives-card .fc-card-header .fc-card-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    background-color: #dce8f5 !important;
    border: 1.5px solid #a8c5e8 !important;
    color: var(--kapo-navy) !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
    background: #dce8f5 !important;
}

body#page-course-view-compact .fc-objectives-card .fc-card-icon-wrap .fa {
    color: var(--kapo-navy) !important;
    font-size: 1rem !important;
}

/* Titel */
body#page-course-view-compact .fc-objectives-card h2.fc-card-title {
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    color: var(--kapo-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
}

/* Body */
body#page-course-view-compact .fc-objectives-card .fc-card-body {
    padding: 0.5rem 1.25rem 0.85rem !important;
}

/* Checklist: Listeneintraege */
body#page-course-view-compact .fc-objectives-card .fc-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#page-course-view-compact .fc-objectives-card li.fc-checklist-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0 !important;
    border: none !important;
    font-size: 0.875rem !important;
    color: var(--kapo-text) !important;
    line-height: 1.45 !important;
    list-style: none !important;
}

/* ::before entfernen – Plugin liefert bereits i.fa-check */
body#page-course-view-compact .fc-objectives-card li.fc-checklist-item::before {
    display: none !important;
    content: none !important;
}

/* Icon i.fa-check: grau, oben ausrichten */
body#page-course-view-compact .fc-objectives-card li.fc-checklist-item .fc-check-icon,
body#page-course-view-compact .fc-objectives-card li.fc-checklist-item i.fa-check {
    color: var(--kapo-text-muted) !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
    margin-top: 0.2rem !important;
}


/* ---- Interaktive Uebung Card (.fc-card.fc-exercise-card) ---- */

/* Karte: Flex-Column damit Body wachsen kann */
body#page-course-view-compact .fc-exercise-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Karten-Header */
body#page-course-view-compact .fc-exercise-card .fc-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.75rem 1.25rem !important;
    background: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
}

/* Icon-Wrapper: Amber-Hintergrund (hohe Spezifitaet) */
body#page-course-view-compact .fc-card.fc-exercise-card .fc-card-icon-wrap,
body#page-course-view-compact .fc-exercise-card .fc-card-header .fc-card-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    background-color: #fdefd8 !important;
    border: 1.5px solid #f5c07a !important;
    color: var(--kapo-orange) !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
    background: #fdefd8 !important;
}

body#page-course-view-compact .fc-exercise-card .fc-card-icon-wrap .fa {
    color: var(--kapo-orange) !important;
    font-size: 1rem !important;
}

/* Titel */
body#page-course-view-compact .fc-exercise-card h2.fc-card-title {
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    color: var(--kapo-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
}

/* Body: Flex-Column, Button haftet unten */
body#page-course-view-compact .fc-exercise-card .fc-card-body {
    padding: 0.85rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0.5rem !important;
}

/* Beschreibungstext */
body#page-course-view-compact .fc-exercise-card .fc-exercise-desc,
body#page-course-view-compact .fc-exercise-card .fc-card-body>p {
    font-size: 0.875rem !important;
    color: var(--kapo-text) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Status-Zeile */
body#page-course-view-compact .fc-exercise-card .fc-exercise-status {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--kapo-text) !important;
    margin: 0 !important;
}

/* "Uebung starten" Button */
body#page-course-view-compact .fc-exercise-card .fc-exercise-btn,
body#page-course-view-compact .fc-exercise-card .fc-start-btn,
body#page-course-view-compact .fc-exercise-card a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    margin-top: auto !important;
    padding: 0.6rem 1.25rem !important;
    background-color: var(--kapo-navy) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color var(--kapo-transition) !important;
    width: 100% !important;
}

body#page-course-view-compact .fc-exercise-card .fc-exercise-btn:hover,
body#page-course-view-compact .fc-exercise-card a.btn:hover {
    background-color: var(--kapo-navy-dark) !important;
    color: white !important;
    text-decoration: none !important;
}

/* "Uebung starten" Button: volle Breite, Navy, am Ende der Card */
body#page-course-view-compact .fc-interactive-card .fc-exercise-btn,
body#page-course-view-compact .fc-exercise-card .fc-exercise-btn,
body#page-course-view-compact [class*="interaktiv"] .fc-exercise-btn,
body#page-course-view-compact .fc-interactive-card .fc-start-btn,
body#page-course-view-compact [class*="interaktiv"] .fc-start-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    margin-top: auto !important;
    padding: 0.6rem 1.25rem !important;
    background-color: var(--kapo-navy) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color var(--kapo-transition) !important;
    width: 100% !important;
}

body#page-course-view-compact .fc-interactive-card .fc-exercise-btn:hover,
body#page-course-view-compact [class*="interaktiv"] .fc-exercise-btn:hover,
body#page-course-view-compact .fc-interactive-card .fc-start-btn:hover {
    background-color: var(--kapo-navy-dark) !important;
    color: white !important;
    text-decoration: none !important;
}


/* ---- Lernmaterialien Card ---- */

/* Gesamte Karte: weisser Hintergrund, äusserer Border */
body#page-course-view-compact .fc-materials-card,
body#page-course-view-compact .fc-lernmaterialien,
body#page-course-view-compact [class*="lernmaterial"] {
    background: white !important;
    border: 1px solid var(--kapo-border) !important;
    box-shadow: none !important;
}

/* Karten-Header: Icon + Titel links, Fortschrittstext rechts */
body#page-course-view-compact .fc-materials-card .card-header,
body#page-course-view-compact .fc-lernmaterialien .card-header,
body#page-course-view-compact [class*="lernmaterial"] .card-header,
body#page-course-view-compact .fc-materials-card .fc-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.85rem 1.25rem !important;
    background: white !important;
    border-bottom: none !important;
}

/* Linke Seite des Headers: Icon-Box + Titel */
body#page-course-view-compact .fc-materials-card .fc-card-header-left,
body#page-course-view-compact .fc-materials-card .fc-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

/* Lernmaterialien Icon-Wrapper: Violett/Lila */
body#page-course-view-compact .fc-materials-card .fc-card-icon,
body#page-course-view-compact .fc-lernmaterialien .fc-card-icon,
body#page-course-view-compact [class*="lernmaterial"] .fc-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border: 2px solid #7c5cbf !important;
    color: #7c5cbf !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
}

/* Lernmaterialien Titel */
body#page-course-view-compact .fc-materials-card .fc-card-title,
body#page-course-view-compact .fc-lernmaterialien .fc-card-title,
body#page-course-view-compact [class*="lernmaterial"] .fc-card-title,
body#page-course-view-compact .fc-materials-card h5,
body#page-course-view-compact .fc-materials-card h4 {
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    color: var(--kapo-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
}

/* Fortschrittsanzeige rechts: "2 von 3 abgeschlossen" */
body#page-course-view-compact .fc-materials-card .fc-progress-label,
body#page-course-view-compact .fc-materials-card .fc-completion-count,
body#page-course-view-compact .fc-materials-card .fc-materials-count,
body#page-course-view-compact .fc-lernmaterialien .fc-progress-label,
body#page-course-view-compact .fc-module-nav-title {
    font-size: 0.7rem !important;
    color: var(--kapo-text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}

body#page-course-view-compact .fc-module-nav-title {
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
}

/* Body der Karte: kein zusaetzliches Padding — wird durch Listeneintraege geregelt */
body#page-course-view-compact .fc-materials-card .card-body,
body#page-course-view-compact .fc-lernmaterialien .card-body {
    padding: 0.5rem !important;
}

/* Einzelner Material-Eintrag */
body#page-course-view-compact .fc-materials-card .fc-material-item,
body#page-course-view-compact .fc-lernmaterialien .fc-material-item,
body#page-course-view-compact [class*="lernmaterial"] .fc-activity-item,
body#page-course-view-compact .fc-materials-card li.activity,
body#page-course-view-compact .fc-materials-card .activity {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.75rem 1.25rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f9f9fb !important;
    margin: 0 0.5rem 0.5rem 0.5rem !important;
    text-decoration: none !important;
    transition: background var(--kapo-transition) !important;
    width: auto !important;
}

/* fc-material-link: Anker erstreckt sich auf die volle Breite */
body#page-course-view-compact .fc-materials-card .fc-material-link,
body#page-course-view-compact .fc-materials-card a.fc-material-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* fc-material-status rechtsbuendig via margin-left: auto */
body#page-course-view-compact .fc-materials-card .fc-material-status {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body#page-course-view-compact .fc-materials-card .fc-material-item:last-child,
body#page-course-view-compact .fc-materials-card li.activity:last-child,
body#page-course-view-compact .fc-materials-card .activity:last-child {
    border-bottom: none !important;
}

body#page-course-view-compact .fc-materials-card .fc-material-item:hover,
body#page-course-view-compact .fc-materials-card .activity:hover {
    background: var(--kapo-navy-light) !important;
}

/* Material-Icon (PDF=rot, Video=blau, SCORM=orange) — Quadratischer Thumbnail */
body#page-course-view-compact .fc-materials-card .fc-material-icon,
body#page-course-view-compact .fc-materials-card .activityiconcontainer,
body#page-course-view-compact .fc-materials-card .activityicon {
    width: 2.2rem !important;
    height: 2.2rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

/* Moodle Aktivitaets-Icons: Groesse anpassen */
body#page-course-view-compact .fc-materials-card .activityiconcontainer img,
body#page-course-view-compact .fc-materials-card .activityicon img {
    width: 2.2rem !important;
    height: 2.2rem !important;
    object-fit: contain !important;
}

/* Farb-Icons als Hintergrund (falls via CSS class gesetzt) */
body#page-course-view-compact .fc-material-icon--pdf,
body#page-course-view-compact .fc-materials-card [data-type="pdf"] .fc-material-icon {
    background-color: #dc3545 !important;
    color: white !important;
}

body#page-course-view-compact .fc-material-icon--video,
body#page-course-view-compact .fc-materials-card [data-type="video"] .fc-material-icon {
    background-color: #2563eb !important;
    color: white !important;
}

body#page-course-view-compact .fc-material-icon--scorm,
body#page-course-view-compact .fc-materials-card [data-type="scorm"] .fc-material-icon {
    background-color: var(--kapo-orange) !important;
    color: white !important;
}

/* Textinformationen: Titel + Untertitel uebereinander */
body#page-course-view-compact .fc-materials-card .fc-material-info,
body#page-course-view-compact .fc-materials-card .fc-activity-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 0.1rem !important;
}

/* Material-Titel: fett, navy, ein-zeilig mit Ellipsis */
body#page-course-view-compact .fc-materials-card .fc-material-title,
body#page-course-view-compact .fc-materials-card .instancename,
body#page-course-view-compact .fc-materials-card .activity .instancename,
body#page-course-view-compact .fc-materials-card .aalink {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--kapo-navy) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

body#page-course-view-compact .fc-materials-card .fc-material-title:hover,
body#page-course-view-compact .fc-materials-card .aalink:hover {
    color: var(--kapo-navy-dark) !important;
    text-decoration: underline !important;
}

/* Material-Untertitel: Typ / Groesse / Datum — dezent */
body#page-course-view-compact .fc-materials-card .fc-material-meta,
body#page-course-view-compact .fc-materials-card .fc-activity-meta,
body#page-course-view-compact .fc-materials-card .activity-meta {
    font-size: 0.75rem !important;
    color: var(--kapo-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Completion-Icon: immer rechtsbuendig am Ende der Flex-Zeile */
body#page-course-view-compact .fc-materials-card .fc-completion-icon,
body#page-course-view-compact .fc-materials-card .completion-icon,
body#page-course-view-compact .fc-materials-card .auto-completion-icon-container,
body#page-course-view-compact .fc-materials-card .completioncheckbox,
body#page-course-view-compact .fc-materials-card .fc-material-status {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Moodle 4.x: activity-item Wrapper muss flex:1 bekommen damit Completion nach rechts rueckt */
body#page-course-view-compact .fc-materials-card .activity-item,
body#page-course-view-compact .fc-materials-card li.activity>.activity-item {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 0.85rem !important;
}

/* Moodle 4.x: activity-instance (Titel-Block) muss wachsen */
body#page-course-view-compact .fc-materials-card .activity-instance {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Moodle 4.x Completion: alle bekannten Varianten rechtsbuendig */
body#page-course-view-compact .fc-materials-card .auto-completion-icon-container,
body#page-course-view-compact .fc-materials-card .completioncheckbox,
body#page-course-view-compact .fc-materials-card .activity-item>.completioncheckbox,
body#page-course-view-compact .fc-materials-card .activity-item>.auto-completion-icon-container,
body#page-course-view-compact .fc-materials-card [data-region="completion-info"],
body#page-course-view-compact .fc-materials-card .complete {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Leerer Kreis = noch nicht abgeschlossen */
body#page-course-view-compact .fc-materials-card .completion-incomplete,
body#page-course-view-compact .fc-materials-card .fc-completion-open {
    width: 1.3rem !important;
    height: 1.3rem !important;
    border: 2px solid var(--kapo-border) !important;
    background: transparent !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Gruener Haken = abgeschlossen */
body#page-course-view-compact .fc-materials-card .completion-complete,
body#page-course-view-compact .fc-materials-card .fc-completion-done,
body#page-course-view-compact .fc-materials-card .completion-complete-pass {
    color: var(--kapo-success) !important;
    font-size: 1.3rem !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Moodle Standard-Completion Icons (fa-check-circle etc.) */
body#page-course-view-compact .fc-materials-card .completion-complete .icon,
body#page-course-view-compact .fc-materials-card .fa-check-circle {
    color: var(--kapo-success) !important;
}

body#page-course-view-compact .fc-materials-card .completion-incomplete .icon,
body#page-course-view-compact .fc-materials-card .fa-circle-o {
    color: var(--kapo-border) !important;
}


/* -- Kursleiter-Kontakt Button -- */
body#page-course-view-compact .fc-contact-btn,
body#page-course-view-compact .fc-sidebar-contact a,
body#page-course-view-compact .fc-btn-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.55rem 1rem !important;
    background-color: white !important;
    border: 1.5px solid var(--kapo-navy) !important;
    border-radius: var(--kapo-radius) !important;
    color: var(--kapo-navy) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: all var(--kapo-transition) !important;
    box-shadow: none !important;
}

body#page-course-view-compact .fc-contact-btn:hover,
body#page-course-view-compact .fc-sidebar-contact a:hover,
body#page-course-view-compact .fc-btn-contact:hover {
    background-color: var(--kapo-navy) !important;
    color: white !important;
    border-color: var(--kapo-navy) !important;
}





/* ============================================================
   END OF STYLESHEET
   ============================================================ */

/* CRITICAL OVERRIDE – muss am Ende stehen damit grid-column gewinnt */
/* Erste Col (Kommende Termine): nur Spalte 1 in 2fr 1fr Grid */
html body#page-my-index #theme-block-region-footer .row>[class*="col"]:first-child,
html body#page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:first-child,
html body#page-my-index #theme-block-region-footer section:first-child,
html body#page-my-index #theme-block-region-footer-fullwidth section:first-child {
    grid-column: 1 / 2 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Zweite Col (Schnellzugriff): Spalte 2 */
html body#page-my-index #theme-block-region-footer .row>[class*="col"]:last-child,
html body#page-my-index #theme-block-region-footer-fullwidth .row>[class*="col"]:last-child,
html body#page-my-index #theme-block-region-footer section:last-child,
html body#page-my-index #theme-block-region-footer-fullwidth section:last-child {
    grid-column: 2 / 3 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* -- Kurs-Navigation Tab Hover Fix -- */
body#page-course-view-compact .nav.more-nav.nav-tabs .nav-item .nav-link,
body#page-course-view-compact .more-nav .nav-link {
    margin-bottom: 0 !important;
}

/* Drawer-Toggle-Button (linke Seitenleiste) permanent ausblenden */
.drawer-toggler.drawer-left-toggle,
button.drawer-toggler.open-nav {
    display: none !important;
}

/* overflow: visible damit der Parent-Border nicht verdeckt wird */
body#page-course-view-compact .nav.more-nav.nav-tabs {
    overflow: visible !important;
}

/* Parent (.moremenu.navigation): kein Border-Bottom */
body#page-course-view-compact .moremenu.navigation {
    border-bottom: none !important;
    overflow: hidden !important;
}


/* ============================================================
   DRAWER (rechts) – Stil angepasst an Navigation
   ============================================================ */

/* Haupt-Drawer-Container */
#theme_boost-drawers-primary,
#theme_boost-drawers-secondary,
.message-app,
[id*="message-drawer"],
.drawer {
    background-color: white !important;
    border-left: 1px solid var(--kapo-border) !important;
    box-shadow: -2px 0 12px rgba(0, 20, 50, 0.08) !important;
    color: #343a40 !important;
}

/* Format-Compact Plugin blendet .drawer-left aus – Primary-Drawer (Navigation) immer sichtbar lassen */
body.format-compact .drawer.drawer-primary,
body.format-compact #theme_boost-drawers-primary {
    display: block !important;
    visibility: visible !important;
}

/* Alle Drawer-Bereiche weiss – auch auf format-compact Seiten */
body.format-compact .drawer.drawer-primary,
body.format-compact #theme_boost-drawers-primary,
body.format-compact .drawer.drawer-primary .drawercontent,
body.format-compact .drawer.drawer-primary .drag-container,
body.format-compact #theme_boost-drawers-primary .drawercontent,
body.format-compact #theme_boost-drawers-primary .drag-container {
    background-color: white !important;
    color: var(--kapo-navy) !important;
}

/* Drawer Nav-Links: wie Subnavigation */
.drawer.drawer-primary .list-group-item,
#theme_boost-drawers-primary .list-group-item {
    background-color: white !important;
    color: var(--kapo-navy) !important;
    border: none !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 0.75rem 1rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.drawer.drawer-primary .list-group-item:hover,
#theme_boost-drawers-primary .list-group-item:hover {
    background-color: var(--kapo-offwhite) !important;
    color: var(--kapo-navy) !important;
}

.drawer.drawer-primary .list-group-item.active,
#theme_boost-drawers-primary .list-group-item.active {
    background-color: white !important;
    color: var(--kapo-navy) !important;
    border-left: 3px solid var(--kapo-navy) !important;
    font-weight: 700 !important;
}

/* Primary Drawer (Hauptnavigation Mobile): weiss mit navy Text */
.drawer.drawer-primary,
#theme_boost-drawers-primary,
.drawer.drawer-primary .drawercontent,
.drawer.drawer-primary .drag-container,
#theme_boost-drawers-primary .drawercontent,
#theme_boost-drawers-primary .drag-container {
    background-color: white !important;
    color: var(--kapo-navy) !important;
}

.drawer.drawer-primary .drawerheader,
#theme_boost-drawers-primary .drawerheader {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
}

.drawer.drawer-primary .list-group-item,
#theme_boost-drawers-primary .list-group-item {
    background-color: white !important;
    color: var(--kapo-navy) !important;
    border-color: var(--kapo-border) !important;
    font-weight: 500;
}

.drawer.drawer-primary .list-group-item:hover,
#theme_boost-drawers-primary .list-group-item:hover {
    background-color: var(--kapo-offwhite) !important;
    color: var(--kapo-navy) !important;
}

.drawer.drawer-primary .list-group-item.active,
#theme_boost-drawers-primary .list-group-item.active {
    background-color: var(--kapo-navy) !important;
    color: white !important;
    border-color: var(--kapo-navy) !important;
}

.drawer.drawer-primary .btn,
#theme_boost-drawers-primary .btn,
.drawer.drawer-primary .drawertoggle {
    color: var(--kapo-navy) !important;
}

/* Drawer Header */
.message-app .header-container,
[id*="message-drawer"] .header-container,
.drawer .card-header,
.drawer header {
    background-color: white !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    color: #343a40 !important;
}

/* Drawer Titel */
.message-app .header-container h5,
[id*="message-drawer"] .header-container h5,
.drawer h5,
.drawer .card-title {
    color: #343a40 !important;
    font-weight: 700 !important;
}

/* Alle Texte im Drawer */
.message-app *,
[id*="message-drawer"] *,
.drawer * {
    color: #343a40 !important;
}

/* Gedimmte Texte beibehalten */
.message-app .text-muted,
[id*="message-drawer"] .text-muted,
.drawer .text-muted {
    color: var(--kapo-text-muted) !important;
}

/* Suchfeld */
.message-app input[type="text"],
.message-app input[type="search"],
[id*="message-drawer"] input {
    background-color: var(--kapo-offwhite) !important;
    border: 1px solid var(--kapo-border) !important;
    color: #343a40 !important;
}

/* Konversations-/Kontakt-Eintraege */
.message-app .list-group-item,
[id*="message-drawer"] .list-group-item,
.drawer .list-group-item {
    background-color: white !important;
    border-color: var(--kapo-border) !important;
    color: #343a40 !important;
}

.message-app .list-group-item:hover,
[id*="message-drawer"] .list-group-item:hover,
.drawer .list-group-item:hover {
    background-color: rgba(0, 51, 102, 0.05) !important;
}

/* Aktiver/selektierter Eintrag */
.message-app .list-group-item.active,
[id*="message-drawer"] .list-group-item.active,
.drawer .list-group-item.active {
    background-color: rgba(0, 51, 102, 0.08) !important;
    border-color: rgba(0, 51, 102, 0.15) !important;
    color: var(--kapo-navy) !important;
}

/* Icons im Drawer */
.message-app .fa,
.message-app i,
[id*="message-drawer"] .fa,
[id*="message-drawer"] i {
    color: #343a40 !important;
}

/* "Alle anzeigen" Link */
.message-app .see-all-link,
[id*="message-drawer"] .see-all-link {
    color: var(--kapo-navy) !important;
    font-weight: 600 !important;
}

/* Drawer Schliessen-Button */
.message-app .btn-close,
[id*="message-drawer"] .btn-close,
.drawer .btn-close {
    filter: none !important;
    color: #343a40 !important;
    opacity: 0.6;
}

/* Abschnitt-Ueberschriften (z.B. "Favoriten") */
.message-app .section-header,
[id*="message-drawer"] .section-header {
    background-color: var(--kapo-offwhite) !important;
    border-bottom: 1px solid var(--kapo-border) !important;
    color: var(--kapo-text-muted) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Kurs-Icon im navy Banner: weiss (kein Farbstich) */
.fc-header-banner img.fc-course-img-icon,
.fc-header-watermark img {
    filter: brightness(0) invert(1) !important;
}

/* Dashboard Welcome Banner */
#page-my-index #region-main::before {
    content: "LERNPORTAL KANTONSPOLIZEI ZÜRICH\a Willkommen in Ihrer persönlichen Lernumgebung." !important;
    white-space: pre-wrap !important;
    display: block !important;
    background: linear-gradient(135deg, var(--kapo-navy) 0%, #002855 100%) !important;
    color: white !important;
    padding: 2rem 2.5rem !important;
    border-radius: 4px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 2px 8px rgba(0, 32, 80, 0.08) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.02em !important;
    font-family: 'Source Sans Pro', sans-serif !important;
}


.schnellzugriff-container {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 24px;
    font-family: Arial, sans-serif;
}

.schnellzugriff-container h2 {
    color: #002d62;
    /* Dunkelblau aus dem Screenshot */
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 20px;
}

.schnellzugriff-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.schnellzugriff-container li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
    /* Die feinen Trennlinien */
}

.schnellzugriff-container li:last-child {
    border-bottom: none;
    /* Keine Linie beim letzten Element */
}

.schnellzugriff-container .sq-icon {
    font-size: 1.2rem;
    margin-right: 16px;
    display: flex;
    align-items: center;
    opacity: 0.6;
    /* Macht die Standard-Emojis etwas dezenter, passend zur Vorlage */
}

.schnellzugriff-container a {
    color: #002d62;
    text-decoration: none;
    font-size: 1rem;
}

.schnellzugriff-container a:hover {
    text-decoration: underline;
}