/* ============================================
   ABESOBJECTS MODULE STYLES
   Version: 2.0
   Description: Consolidated styles for all AbesObjects DNN modules
   Modules: List, Detail, Filter, Contact Person
   ============================================ */

/* ============================================
   1. CSS VARIABLES & DEFAULTS
   ============================================ */
:root {
    /* Default-Farben (werden von StylePartial überschrieben) */
    --course-base-color: #0d6efd;
    --course-base-hover: #0b5ed7;
    --course-base-dark: #0a58ca;
    --course-base-light: rgba(13, 110, 253, 0.1);
    --course-base-text: white;
    
    /* Weitere gemeinsame Variablen */
    --course-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --course-border-radius: 0.375rem;
    --course-transition: all 0.2s ease-in-out;
}

/* ============================================
   2. COMMON COMPONENTS (Alle Module)
   ============================================ */

/* Cursor & Basis-Interaktionen */
.cursor-pointer {
    cursor: pointer;
}

/* Buttons - Gemeinsam für alle Module */
.course-btn-primary,
.course-filter-submit {
    background-color: var(--course-base-color) !important;
    border-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
    transition: var(--course-transition);
}

.course-btn-primary:hover,
.course-filter-submit:hover {
    background-color: var(--course-base-dark) !important;
    border-color: var(--course-base-dark) !important;
}

.course-btn-outline {
    color: var(--course-base-color) !important;
    border-color: var(--course-base-color) !important;
    background-color: transparent !important;
}

.course-btn-outline:hover {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

/* Dezent gefüllte Variante für sekundäre Aktionen (z. B. Kurs drucken).
   Neutrales Dunkelgrau statt der Basisfarbe: Die Fläche ist base-color auf 15 %
   aufgehellt — die Basisfarbe darauf ergäbe zu wenig Kontrast (bei Orange nur 3.7:1,
   WCAG verlangt 4.5:1). #333 erreicht rund 10:1, unabhängig von der Portalfarbe.
   font-weight kräftiger als bei primary/outline: ohne Rahmen und mit heller Fläche
   braucht die Beschriftung mehr Gewicht. */
.course-btn-fade {
    background-color: var(--course-base-light) !important;
    color: #333 !important;
    border-color: transparent !important;
    font-weight: 600;
    transition: var(--course-transition);
}

.course-btn-fade:hover,
.course-btn-fade:focus {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

/* Titel - Gemeinsam */
.course-main-title,
.course-title,
.course-count-title,
.course-detail-title,
.course-filter-title {
    color: var(--course-base-color) !important;
}

/* Badges */
.course-active-filter-badge {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
    position: relative !important;
    padding-right: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.course-active-filter-badge .btn-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
    margin: 0 0 0 0.5rem !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.8 !important;
}

.course-active-filter-badge .btn-close:before {
    content: "x" !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
}

.course-active-filter-badge .btn-close:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
}

/* Gruppen-Badges mit Module BaseColor */
.course-card .badge.course-group-badge {
    background-color: var(--course-base-color) !important;
    transition: transform 0.2s ease;
}

.course-card .badge.course-group-badge:hover,
.course-card .badge.course-group-badge:focus {
    background-color: var(--course-base-hover) !important;
    transform: scale(1.02);
}

/* Pagination */
.course-pagination .page-link,
.pagination .page-link {
    color: var(--course-base-color) !important;
    transition: var(--course-transition);
}

.course-pagination .page-link:hover,
.pagination .page-link:hover {
    color: var(--course-base-color) !important;
    border-color: var(--course-base-hover) !important;
    transform: translateY(-1px);
}

.course-pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: var(--course-base-color) !important;
    border-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

/* Filter Items - Gemeinsam für List & Filter Module */
.filter-item {
    transition: var(--course-transition);
    border-radius: 0.25rem;
    user-select: none;
}

.filter-item:hover {
    background-color: var(--bs-gray-100) !important;
    transform: translateX(5px);
}

.filter-item.active {
    background-color: var(--bs-gray-100) !important;
    font-weight: 600;
    color: var(--bs-dark, #212529) !important;
    border-left: 4px solid var(--course-base-color) !important;
}

.filter-item:last-child {
    border-bottom: none !important;
}

/* Filterzeile: Text links, Haken rechtsbündig.
   Bewusst auf die beiden Filter-Container eingegrenzt — .filter-item wird auch
   vom Stellenangebote-Modul verwendet (Views/JobListing/_ListStylePartial.cshtml). */
.course-list-filter-body .filter-item,
.course-filter-body .filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.course-list-filter-body .filter-item-label,
.course-filter-body .filter-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.course-list-filter-body .filter-item-check,
.course-filter-body .filter-item-check {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Loading Spinner */
.course-loading {
    min-height: 200px;
}

.course-loading .spinner-border {
    color: var(--course-base-color) !important;
}

/* ============================================
   3. LIST MODULE SPECIFIC STYLES
   ============================================ */

/* List spezifische Filter-Header */
.course-filter-header {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

.course-filter-header:hover {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

.course-filter-header .card-title {
    color: var(--course-base-text) !important;
}

/* List Karten */
.course-list-content .card {
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--bs-border-color);
    animation: slideIn 0.3s ease-out;
}

.course-list-content .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--course-base-color) !important;
}

.course-list-content .card:focus-within {
    border-color: var(--course-base-color) !important;
    outline: 2px solid var(--course-base-color);
    outline-offset: 2px;
}

.course-list-content .card a {
    color: var(--course-base-color);
}

.course-list-content .card a:hover {
    color: var(--course-base-dark);
}

/* Card Title Styling */
.card-title {
    color: var(--course-base-color) !important;
    font-weight: 600;
}

/* Suchfeld Container mit BaseColor-Integration */
.course-search-group {
    transition: var(--course-transition);
    border-radius: var(--course-border-radius);
    overflow: hidden;
}

.course-search-group.course-search-focused {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-base-color) 25%, transparent);
    border-color: var(--course-base-color);
}

.course-search-group:hover:not(.course-search-focused) {
    border-color: var(--course-base-color);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}

/* Such-Icon mit BaseColor */
.course-search-icon {
    background-color: var(--course-base-color);
    border-color: var(--course-base-color);
    color: white;
    transition: var(--course-transition);
    position: relative;
}

.course-search-icon.course-search-loading-state {
    background-color: var(--course-base-dark);
}

.course-search-focused .course-search-icon {
    background-color: var(--course-base-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Suchfeld Input */
.course-search-input {
    border-left: none;
    font-size: 0.95rem;
    padding: 0.625rem 0.75rem;
    transition: var(--course-transition);
}

.course-search-input::placeholder {
    color: #6c757d;
    opacity: 0.8;
    font-style: italic;
    font-size: 0.9rem;
}

.course-search-input:focus {
    border-color: var(--course-base-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-base-color) 25%, transparent);
    outline: none;
}

/* Clear Button */
.course-search-clear {
    border-left: none;
    border-color: var(--bs-border-color);
    color: #6c757d;
    transition: var(--course-transition);
    padding: 0.625rem 0.75rem;
}

.course-search-clear:hover {
    background-color: var(--course-base-color);
    border-color: var(--course-base-color);
    color: white;
    transform: scale(1.05);
}

.course-search-clear:focus {
    outline: 2px solid var(--course-base-color);
    outline-offset: 2px;
    background-color: var(--course-base-color);
    border-color: var(--course-base-color);
    color: white;
}

.course-search-clear:active {
    transform: scale(0.95);
}

/* Such-Hilfe Text */
.course-search-help {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.course-search-group.course-search-focused + .course-search-help {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================
   4. DETAIL MODULE SPECIFIC STYLES
   ============================================ */

/* Detail Container */
.course-detail-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Print-Button: rechtsbündig mit Abstand zum folgenden Block (z. B. Ansprechpartner).
   Lag bisher nur im garp-Theme — auf anderen Portalen klebte der Button linksbündig
   am Ansprechpartner. Gleiche Werte wie garp, damit sich dort nichts ändert. */
.course-detail-print {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    padding-bottom: 35px;
}

.course-detail-header {
    margin-bottom: 2rem;
}

.course-detail-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.course-detail-subtitle {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.course-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 2rem;
}

/* Register Button */
.course-register-main-btn {
    background-color: var(--course-base-color);
    color: var(--course-base-text) !important;
    padding: 0.75rem 2rem;
    border-radius: var(--course-border-radius);
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 2rem;
    transition: var(--course-transition);
}

.course-register-main-btn:hover,
.course-register-main-btn:focus {
    background-color: color-mix(in srgb, var(--course-base-color) 90%, black);
    color: var(--course-base-text) !important;
    text-decoration: none;
}

/* Contact Person Card */
.contact-person-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.contact-person-header,
.contact-person-header.theme-color {
    color: var(--course-base-color) !important;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.contact-person-image {
    width: 120px;
    height: 120px;
    border-radius: 0.5rem;
    object-fit: cover;
    margin-bottom: 1rem;
}

.contact-person-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.contact-person-title {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.contact-info i {
    color: var(--course-base-color);
    width: 16px;
}

.contact-info i.theme-bg-color {
    background-color: var(--course-base-color) !important;
}

.contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-info a:hover,
.contact-info a:focus {
    color: var(--course-base-color);
}

/* Expandable Sections */
.expandable-section {
    margin-bottom: 1rem;
}

.expandable-header {
    background-color: var(--course-base-color);
    color: var(--course-base-text);
    padding: 1rem 1.5rem;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: var(--course-border-radius);
    transition: var(--course-transition);
}

.expandable-header:hover,
.expandable-header:focus {
    background-color: color-mix(in srgb, var(--course-base-color) 90%, black);
}

.expandable-header.collapsed::before {
    content: "+";
    font-size: 1.2rem;
    font-weight: 900;
    margin-right: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.expandable-header:not(.collapsed)::before {
    content: "-";
    font-size: 1.2rem;
    font-weight: 900;
    margin-right: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.expandable-content {
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 var(--course-border-radius) var(--course-border-radius);
}

.expandable-content h5,
.course-section-content h5 {
    color: var(--course-base-color) !important;
}

.expandable-content ul,
.course-section-content ul {
    list-style: none;
    padding-left: 0;
    column-count: 2;
    column-gap: 2rem;
}

.expandable-content ul li,
.course-section-content ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.5rem;
    break-inside: avoid;
}

.expandable-content ul li::before,
.course-section-content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: var(--course-base-color);
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
}

/* Ordered Lists - Nummerierte Kreise in Base Color */
.expandable-content ol,
.course-section-content ol {
    list-style: none;
    padding-left: 0;
    counter-reset: custom-counter;
    column-count: 2;
    column-gap: 2rem;
}

.expandable-content ol li,
.course-section-content ol li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.5rem;
    counter-increment: custom-counter;
    break-inside: avoid;
}

.expandable-content ol li::before,
.course-section-content ol li::before {
    content: counter(custom-counter);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 50%;
    background-color: var(--course-base-color);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
}

.content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

.content-list li:last-child {
    border-bottom: none;
}

.content-list li::before {
    content: "●";
    color: var(--course-base-color);
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0.5rem;
}

/* Course Info Sidebar */
.course-info-sidebar {
    background: linear-gradient(135deg, var(--course-base-color), color-mix(in srgb, var(--course-base-color) 80%, orange));
    color: var(--course-base-text);
    padding: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.course-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.course-info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.course-info-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.course-info-content {
    flex-grow: 1;
}

.course-info-label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.course-info-value {
    font-weight: bold;
    font-size: 1rem;
}

/* Course Badge (neues Design) */
.course-badge {
    border: 3px solid var(--course-base-color);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.course-badge-header {
    background: #f8f9fa;
    padding: 0.8rem 1.2rem;
    text-align: center;
}

.course-badge-title {
    color: var(--course-base-color) !important;
    font-size: 1.3rem !important;
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.course-badge-text {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    line-height: 1.2 !important;
}

.course-badge-btn {
    display: inline-block;
    background-color: var(--course-base-color);
    color: white !important;
    padding: 0.5rem 1.2rem;
    border-radius: 0.4rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.course-badge-btn:hover,
.course-badge-btn:focus {
    background-color: var(--course-base-hover);
    text-decoration: none;
}

.course-badge-body {
    background-color: var(--course-base-color);
    padding: 1.5rem;
}

.course-badge-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.course-badge-item:last-child {
    margin-bottom: 0;
}

.course-badge-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.course-badge-icon i {
    color: var(--course-base-color);
    font-size: 1.9rem;
}

.course-badge-content {
    flex-grow: 1;
    color: white;
}

.course-badge-label {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.course-badge-value {
    font-size: 0.9rem;
    opacity: 0.95;
    line-height: 1.3;
}

/* Contact Form Section (Kurse ohne aktive Termine) */
.course-contact-section {
    margin: 40px 0;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.course-contact-section .alert-info {
    background-color: var(--course-base-light, #cfe2ff);
    border-color: var(--course-base-color, #0d6efd);
    color: var(--course-base-dark, #084298);
}

.course-contact-section .alert-info i.fa-info-circle {
    color: var(--course-base-color, #0d6efd);
}

.course-contact-form .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.course-contact-form .btn-primary {
    padding: 12px 30px;
    font-size: 16px;
    background-color: var(--course-base-color, #0d6efd);
    border-color: var(--course-base-color, #0d6efd);
}

.course-contact-form .btn-primary:hover {
    background-color: var(--course-base-hover, #0b5ed7);
    border-color: var(--course-base-hover, #0b5ed7);
}

.course-contact-form .btn-primary:focus,
.course-contact-form .btn-primary:active {
    background-color: var(--course-base-hover, #0b5ed7);
    border-color: var(--course-base-hover, #0b5ed7);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--course-base-color, #0d6efd) 25%, transparent);
}

/* Waitlist Form Section (ausgebuchte Termine) */
.course-waitlist-section {
    margin: 40px 0;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.course-waitlist-section .alert-info {
    background-color: var(--course-base-light, #cfe2ff);
    border-color: var(--course-base-color, #0d6efd);
    color: var(--course-base-dark, #084298);
}

.course-waitlist-section .alert-info i.fa-info-circle {
    color: var(--course-base-color, #0d6efd);
}

.course-waitlist-form .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.course-waitlist-form .btn-primary {
    padding: 12px 30px;
    font-size: 16px;
    background-color: var(--course-base-color, #0d6efd);
    border-color: var(--course-base-color, #0d6efd);
}

.course-waitlist-form .btn-primary:hover {
    background-color: var(--course-base-hover, #0b5ed7);
    border-color: var(--course-base-hover, #0b5ed7);
}

.course-waitlist-form .btn-primary:focus,
.course-waitlist-form .btn-primary:active {
    background-color: var(--course-base-hover, #0b5ed7);
    border-color: var(--course-base-hover, #0b5ed7);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--course-base-color, #0d6efd) 25%, transparent);
}

/* Course Dates Section */
.course-dates-section {
    margin-top: 2rem;
}

.course-dates-title {
    color: var(--course-base-color);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.course-date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: var(--course-border-radius);
    margin-bottom: 0.5rem;
    background: white;
    cursor: pointer;
    transition: var(--course-transition);
}

.course-date-item.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    margin-bottom: 1px;
}

.course-date-item:hover,
.course-date-item:focus {
    background-color: #f8f9fa;
}

.course-date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.course-date-icon {
    width: 40px;
    height: 40px;
    background: var(--course-base-color);
    color: white;
    border-radius: var(--course-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-date-text {
    font-weight: 500;
}

.course-booking-btn {
    background-color: var(--course-base-color);
    color: white !important;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: var(--course-border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--course-transition);
    text-decoration: none;
    min-width: 13rem;
    text-align: center;
    flex-shrink: 0;
}

.course-booking-btn:hover,
.course-booking-btn:focus {
    background-color: color-mix(in srgb, var(--course-base-color) 90%, black);
    text-decoration: underline;
}


/* Verfügbarkeitsstatus im Akkordeon-Header */
.course-availability-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 1rem;
    white-space: nowrap;
    flex: 1;
}

.course-availability-status i {
    font-size: 1rem;
}

.course-availability-available {
    color: #198754;
}

.course-availability-warning {
    color: #e8a317;
}

.course-availability-soldout {
    color: #dc3545;
}

.course-more-info-btn {
    background-color: var(--course-base-color);
    color: var(--course-base-text) !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--course-border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--course-transition);
    width: 100%;
    margin-top: 0.5rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 0.9rem;
}

.course-more-info-btn:hover,
.course-more-info-btn:focus {
    background-color: color-mix(in srgb, var(--course-base-color) 90%, black);
    color: var(--course-base-text) !important;
    text-decoration: none;
}

.course-date-details {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1rem;
    border-radius: 0 0 var(--course-border-radius) var(--course-border-radius);
    display: none;
    margin-bottom: 0.5rem;
}

.course-date-details.show {
    display: block;
}

/* Course Features Grid – 2-Reihen-Layout */
.course-features-grid {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.course-features-row {
    display: grid;
    gap: 1.5rem;
    text-align: center;
}

.course-features-row + .course-features-row {
    margin-top: 1.5rem;
}

.course-features-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.course-features-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

.course-feature {
    text-align: center;
    padding: 0.5rem;
}

.course-feature-icon {
    width: 60px;
    height: 60px;
    background: white;
    color: var(--course-base-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem;
}


.course-feature-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

.course-feature-description {
    font-size: 0.9rem;
    color: #666;
}

/* Contact CTA */
.contact-cta {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    margin-top: 2rem;
}

.contact-cta-title {
    color: var(--course-base-color);
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.contact-cta-phone {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--course-base-color) !important;
    text-decoration: none;
}

.contact-cta-phone:hover,
.contact-cta-phone:focus {
    color: color-mix(in srgb, var(--course-base-color) 80%, black) !important;
}

/* Funding Tables (Fördermöglichkeiten) */
.funding-example-title {
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.table.funding-table thead {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

.table.funding-table thead tr {
    background-color: var(--course-base-color) !important;
}

.table.funding-table thead th {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
    font-weight: 600;
    border-color: var(--course-base-color) !important;
}

.table.funding-table thead tr th {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

/* ============================================
   5. FILTER MODULE SPECIFIC STYLES
   ============================================ */

/* Filter-Wrapper - Main Container */
.course-filter-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Filter-Titel Styling */
.course-filter-title {
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--course-base-light);
    padding-bottom: 0.5rem;
}

.course-filter-title i {
    color: var(--course-base-color);
}

/* Suchfeld Styling */
.course-filter-search .input-group-text {
    background-color: var(--course-base-color);
    border-color: var(--course-base-color);
    color: var(--course-base-text);
}

.course-filter-search .form-control:focus {
    border-color: var(--course-base-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--course-base-color) 25%, transparent);
}

/* Filter-Cards */
.course-filter-card {
    border: 1px solid var(--course-base-light);
    border-radius: var(--course-border-radius);
    box-shadow: var(--course-shadow);
    transition: var(--course-transition);
    overflow: hidden;
}

.course-filter-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Filter-Karten Header */
.course-filter-header {
    border: none;
    border-radius: var(--course-border-radius) var(--course-border-radius) 0 0;
    transition: var(--course-transition);
}

.course-filter-header:hover {
    transform: translateY(-1px);
    box-shadow: var(--course-shadow);
}

.course-filter-header .fas {
    color: var(--course-base-text) !important;
}

/* Filter-Karten Körper */
.course-filter-card .card-body {
    padding: 1rem;
    background: white;
}

/* Filter-Items für Filter-Modul */
#filter-[data-module-id] .filter-item {
    transition: var(--course-transition);
    border-bottom-color: var(--course-base-light) !important;
    position: relative;
}

#filter-[data-module-id] .filter-item:hover {
    background-color: var(--course-base-light) !important;
    color: var(--course-base-color) !important;
    padding-left: 1rem !important;
}

#filter-[data-module-id] .filter-item:focus {
    outline: 2px solid var(--course-base-color);
    outline-offset: -2px;
    background-color: var(--course-base-light) !important;
}

#filter-[data-module-id] .filter-item.active {
    background-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
    border-left: 4px solid var(--course-base-hover) !important;
    font-weight: 500;
}

#filter-[data-module-id] .filter-item.active .fas {
    color: var(--course-base-text) !important;
}

/* Filter-Aktionen (Buttons) */
.course-filter-submit {
    border-radius: var(--course-border-radius);
    transition: var(--course-transition);
    font-weight: 500;
}

.course-filter-submit:hover {
    transform: translateY(-1px);
    box-shadow: var(--course-shadow);
}

.course-filter-reset {
    border-color: var(--course-base-color) !important;
    color: var(--course-base-color) !important;
    border-radius: var(--course-border-radius);
    transition: var(--course-transition);
}

/* ============================================
   EXTERNAL FILTER DETECTION STATES          
   ============================================ */

/* External Filter Detection Container */
.course-list-external-filter-detector {
    position: relative;
    min-height: 50px;
}

/* Hide internal filters when external detected */
.course-list-external-filter-detector[data-external-detected="true"] .course-list-internal-filters {
    display: none !important;
    opacity: 0;
    transform: translateY(-10px);
}

/* Show external info when external detected */
.course-list-external-filter-detector[data-external-detected="true"] .course-list-external-filter-info {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* Transition for filter switching */
.course-list-internal-filters {
    transition: all 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.course-list-internal-filters.fading {
    opacity: 0.5;
    transform: translateY(-5px);
}

.course-filter-reset:hover {
    background-color: var(--course-base-color) !important;
    border-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
}

/* ============================================
   SUB-THEMENFILTER (SCHNELLFILTER) STYLES
   ============================================ */

/* Sub-Themenfilter Container */
.course-list-subthemen-filter {
    border: 2px solid var(--course-base-color) !important;
    border-radius: var(--course-border-radius);
    overflow: hidden;
}

.course-list-subthemen-filter .card-header {
    background: linear-gradient(135deg, var(--course-base-color), var(--course-base-dark)) !important;
    border-bottom: none;
}

.course-list-subthemen-filter .card-header h3 {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Sub-Themenfilter Buttons */
.subthemen-filter-btn {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--bs-gray-300) !important;
    border-radius: var(--course-border-radius) !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--course-transition);
    background-color: #fff !important;
    color: var(--bs-gray-700) !important;
}

.subthemen-filter-btn i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    transition: var(--course-transition);
}

.subthemen-filter-btn span {
    flex-grow: 1;
}

/* Hover State */
.subthemen-filter-btn:hover:not(.active) {
    border-color: var(--course-base-color) !important;
    background-color: var(--course-base-light) !important;
    color: var(--course-base-color) !important;
    transform: translateX(3px);
}

.subthemen-filter-btn:hover:not(.active) i {
    color: var(--course-base-color) !important;
}

/* Active State */
.subthemen-filter-btn.active {
    background-color: var(--course-base-color) !important;
    border-color: var(--course-base-color) !important;
    color: var(--course-base-text) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.subthemen-filter-btn.active i {
    color: var(--course-base-text) !important;
}

.subthemen-filter-btn.active:hover {
    background-color: var(--course-base-dark) !important;
    border-color: var(--course-base-dark) !important;
}

/* Focus State (Accessibility) */
.subthemen-filter-btn:focus {
    outline: 3px solid var(--course-base-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--course-base-color) !important;
}

.subthemen-filter-btn.active:focus {
    outline-color: var(--course-base-dark) !important;
}

/* Button Container Layout */
.subthemen-filter-buttons {
    padding: 0.5rem;
}

/* Icon-Only Modus - kompaktere Buttons */
.subthemen-filter-icon-only {
    padding: 0 !important;
}

.subthemen-filter-icon-only .subthemen-filter-btn {
    padding: 0.5rem !important;
    justify-content: center;
    border-width: 1px !important;
    border-color: var(--course-base-color) !important;
    color: var(--course-base-color) !important;
}

.subthemen-filter-icon-only .subthemen-filter-btn i {
    color: var(--course-base-color) !important;
}

.subthemen-filter-icon-only .subthemen-filter-btn:hover:not(.active) {
    transform: none;
    background-color: var(--course-base-light) !important;
}

.subthemen-filter-icon-only .subthemen-filter-btn.active,
.subthemen-filter-icon-only .subthemen-filter-btn.active i {
    color: var(--course-base-text) !important;
}

.subthemen-filter-icon-only .subthemen-filter-btn:focus {
    outline-width: 2px !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* Mittel-Modus - 2er Grid mit Text */
.subthemen-filter-medium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0 !important;
    overflow: hidden;
}

.subthemen-filter-medium .subthemen-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.6rem !important;
    text-align: center;
    border-width: 1.5px !important;
    border-color: var(--bs-gray-300) !important;
    color: #000000 !important;
    font-size: 1rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: 5rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.subthemen-filter-medium .subthemen-filter-btn i {
    color: var(--course-base-color) !important;
    flex-shrink: 0;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.subthemen-filter-medium .subthemen-filter-btn span {
    line-height: 1.2;
    overflow: hidden;
    min-width: 0;
    color: #000000;
}

.subthemen-filter-medium .subthemen-filter-btn:hover:not(.active) {
    transform: none;
    background-color: var(--course-base-light) !important;
    border-color: var(--course-base-color) !important;
}

.subthemen-filter-medium .subthemen-filter-btn.active,
.subthemen-filter-medium .subthemen-filter-btn.active i,
.subthemen-filter-medium .subthemen-filter-btn.active span {
    color: var(--course-base-text) !important;
}

.subthemen-filter-medium .subthemen-filter-btn:focus {
    outline-width: 2px !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* "Alle Kurse anzeigen" Button im Mittel-Modus - volle Breite, halbe Hoehe */
.subthemen-filter-medium .subthemen-filter-btn[data-subthemen-filter=""] {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 2.5rem;
    padding: 0.4rem 1rem !important;
}

.subthemen-filter-medium .subthemen-filter-btn[data-subthemen-filter=""] i {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-right: 0.5rem;
}

/* "Alle anzeigen" Button - Etwas dezenter wenn nicht aktiv */
.subthemen-filter-btn[data-subthemen-filter=""]:not(.active) {
    border-style: dashed;
    background-color: #f8f9fa !important;
}

.subthemen-filter-btn[data-subthemen-filter=""]:not(.active):hover {
    border-style: solid;
    background-color: var(--course-base-light) !important;
}

/* Aktive Filter Anzeige */
.course-active-filters .h6 {
    color: var(--course-base-color) !important;
    font-weight: 600;
}

/* Collapse-Animationen verbessern */
.course-filter-header[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.course-filter-header[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

/* ============================================
   6. CONTACT PERSON MODULE SPECIFIC
   ============================================ */

/* Ansprechpartner nutzt Detail-Styles - keine zusätzlichen Styles nötig */
/* Alle contact-person Styles sind bereits in Detail-Section definiert */

/* ============================================
   7. ANIMATIONS
   ============================================ */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Loading Animation für Such-Icon */
.course-search-icon-loading {
    animation: spin 1s linear infinite;
}

/* ============================================
   8. RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 991.98px) {
    /* Filter-Cards auf mobilen Geräten kompakter */
    .course-list-filter .card-body {
        padding: 0.75rem;
    }

    .filter-item {
        padding: 0.5rem !important;
        font-size: 0.9rem;
    }

    /* Sub-Themenfilter Responsive */
    .subthemen-filter-btn {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.9rem;
    }

    .subthemen-filter-btn i {
        font-size: 1rem;
        width: 20px;
    }
}

@media (max-width: 768px) {
    .course-detail-title {
        font-size: 2rem;
    }
    
    .course-date-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
    }

    .course-date-item .course-booking-btn {
        align-self: center;
    }
    
    .course-features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .course-features-row {
        display: contents;
    }

    .course-features-row + .course-features-row {
        margin-top: 0;
    }

    .course-availability-status {
        flex: 0 0 auto;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .course-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Listen einspaltig auf kleinen Bildschirmen */
    .expandable-content ul,
    .course-section-content ul,
    .expandable-content ol,
    .course-section-content ol {
        column-count: 1;
    }

    .course-filter-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .course-filter-actions .btn {
        width: 100%;
        margin: 0 !important;
    }
    
    .course-filter-title {
        font-size: 1.1rem;
        text-align: center;
    }
    
    .course-filter-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    .display-6 {
        font-size: 1.5rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    .course-search-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }

    .course-search-input::placeholder {
        font-size: 0.85rem;
    }

    .course-search-help {
        font-size: 0.75rem;
    }
    
    .filter-item {
        padding: 0.75rem !important;
        font-size: 0.9rem;
    }

    .course-filter-header {
        padding: 0.75rem;
    }

    .course-filter-header .card-title {
        font-size: 0.95rem;
    }

    /* Sub-Themenfilter Mobile */
    .subthemen-filter-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem;
    }

    .subthemen-filter-btn i {
        font-size: 0.95rem;
        width: 18px;
        margin-right: 0.375rem !important;
    }

    .course-list-subthemen-filter .card-header h3 {
        font-size: 0.9rem;
    }

    .subthemen-filter-buttons {
        gap: 0.375rem !important;
    }
}

/* ============================================
   9. ACCESSIBILITY
   ============================================ */

/* Screen Reader Only Content */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Fokus-Indikatoren für Tastatur-Navigation */
.filter-item:focus,
.card-header[role="button"]:focus,
.page-link:focus,
.btn:focus,
.expandable-header:focus,
.course-register-main-btn:focus,
.course-booking-btn:focus,
.course-more-info-btn:focus,
.course-badge-btn:focus,
.course-date-item:focus,
.contact-info a:focus,
.contact-cta-phone:focus,
.garp-events-load-more-btn:focus,
.garp-events-show-all-link:focus,
.ao-filter-btn:focus,
.course-card .badge.course-group-badge:focus {
    outline: 3px solid var(--course-base-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--course-base-color) !important;
}

.filter-item:focus.active {
    outline-color: var(--course-base-color) !important;
}

/* Programmatisch fokussierte Container: Fokus-Ring nur bei Tastatur zeigen */
.course-list-content[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* Skip Links für Tastatur-Navigation */
.skip-link {
    position: absolute;
    left: -10000px;
    background: var(--course-base-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    left: 6px;
    top: 6px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .filter-item:hover {
        transform: none !important;
    }

    .course-list-content .card:hover {
        transform: none !important;
    }

    .page-link:hover {
        transform: none !important;
    }
    
    .course-filter-card:hover,
    .course-filter-submit:hover,
    .course-search-clear:hover,
    .subthemen-filter-btn:hover {
        transform: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .filter-item:focus,
    .card-header[role="button"]:focus {
        outline: 3px solid !important;
        outline-color: HighlightText !important;
    }

    .filter-item[aria-checked="true"],
    .filter-item.active {
        border-left-width: 6px !important;
        border-left-color: HighlightText !important;
    }
    
    .course-filter-card {
        border-width: 2px;
    }
    
    .course-search-group.course-search-focused {
        outline: 3px solid HighlightText;
        box-shadow: none;
    }

    .subthemen-filter-btn:focus {
        outline: 3px solid HighlightText !important;
    }

    .subthemen-filter-btn.active {
        border-width: 3px !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .course-search-input::placeholder {
        color: #adb5bd;
        opacity: 1;
    }

    .course-search-help {
        color: #adb5bd;
    }

    .course-search-help kbd {
        background-color: #495057;
        border-color: #6c757d;
        color: #adb5bd;
    }
    
    .course-filter-wrapper {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .course-filter-card {
        background: #4a5568;
        border-color: #718096;
    }
    
    .course-filter-card .card-body {
        background: #4a5568;
        color: #e2e8f0;
    }
}

/* ============================================
   10. PRINT STYLES
   ============================================ */

@media print {
    .course-list-leftpanel,
    .course-list-pager,
    .btn,
    .course-filter-wrapper,
    .course-search-group,
    .course-pagination {
        display: none !important;
    }

    .course-list-content .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* ============================================
   11. UTILITY CLASSES
   ============================================ */

/* Smooth Scrolling */
* {
    scroll-behavior: smooth;
}

/* Collapse-Animationen für Filter */
.collapse {
    transition: height 0.35s ease;
}

.card-header[data-bs-toggle="collapse"] {
    transition: background-color 0.2s ease;
}

.card-header[data-bs-toggle="collapse"]:hover {
    background-color: var(--course-base-color) !important;
    color: white !important;
}

.card-header[data-bs-toggle="collapse"] .card-title,
.card-header[data-bs-toggle="collapse"]:hover .card-title {
    color: white !important;
}

/* Chevron-Icons Animation */
.card-header .fa-chevron-down,
.card-header .fa-chevron-up {
    transition: transform 0.3s ease;
}

/* Custom Color Variables für DNN Integration */
.course-list-wrapper {
    --course-primary: var(--bs-primary, #0d6efd);
    --course-success: var(--bs-success, #198754);
    --course-info: var(--bs-info, #0dcaf0);
    --course-warning: var(--bs-warning, #ffc107);
    --course-danger: var(--bs-danger, #dc3545);
}

/* Filter-Überschriften mit besserer Typografie */
.card-header .card-title {
    font-size: 0.9rem !important;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* Main Title Icons */
.course-main-title i,
.course-count-title i {
    color: var(--course-base-color);
}

/* Verfügbarkeits-Badges */
.badge.bg-success {
    --bs-badge-color: #fff;
}

.badge.bg-warning {
    --bs-badge-color: #000;
}

.badge.bg-danger {
    --bs-badge-color: #fff;
}

/* Info-Badges in Kurskarten */
.course-list-content .badge.bg-light {
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
}

/* ============================================
   12. DNN SETTINGS COMPATIBILITY
   ============================================ */

/* Stelle sicher, dass input[type="number"] in DNN-Settings wie normale Textfelder aussieht */
.dnnFormItem input[type="number"] {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    box-sizing: border-box;
}

.dnnFormItem input[type="number"]:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* Entferne Browser-Default Spinner bei Bedarf (optional) */
.dnnFormItem input[type="number"]::-webkit-inner-spin-button,
.dnnFormItem input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

/* ============================================
   13. TERMINE MODULE STYLES
   ============================================ */

/* Link-Text im Termine-Modul: BaseColor statt skin theme-color */
.garp-events-list-event-title a.theme-color {
    color: var(--course-base-color) !important;
}

.garp-events-list-event-title a h3 {
    color: inherit !important;
}

/* Title-Inner: Spalten-Layout damit Details unter dem Titel erscheinen */
.garp-events-list-event-title-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.garp-events-list-event-title-inner h3 {
    color: inherit !important;
}

/* ============================================
   14. LOAD MORE BUTTON
   ============================================ */

.garp-events-load-more-wrapper {
    padding: 1rem 0;
}

.garp-events-load-more-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: transparent;
    color: var(--course-base-color, #4c4c4c);
    border: 2px solid var(--course-base-color, #4c4c4c);
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.garp-events-load-more-btn:hover,
.garp-events-load-more-btn:focus {
    background-color: var(--course-base-color, #4c4c4c);
    color: #fff;
}

.garp-events-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Termine: Kursdetails-Zeile ===== */
.garp-events-list-event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    padding: 4px 0 0 0;
    font-size: 0.73em;
    color: #666;
    width: 100%;
}

.garp-event-detail-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 33.33%;
    min-width: 0;
}

.garp-event-detail-item:last-child {
    flex-grow: 0;
    margin-left: auto;
}

.garp-event-detail-item i {
    font-size: 0.9em;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.garp-event-detail-available,
a.garp-event-detail-available,
a.garp-event-detail-available:link,
a.garp-event-detail-available:visited,
a.garp-event-detail-available:active {
    color: #28a745 !important;
}

.garp-event-detail-notavailable,
a.garp-event-detail-notavailable,
a.garp-event-detail-notavailable:link,
a.garp-event-detail-notavailable:visited,
a.garp-event-detail-notavailable:active {
    color: #dc3545 !important;
}

.garp-event-detail-warning,
a.garp-event-detail-warning,
a.garp-event-detail-warning:link,
a.garp-event-detail-warning:visited,
a.garp-event-detail-warning:active {
    color: #ffc107 !important;
}

a.garp-event-detail-item {
    text-decoration: none;
}

a.garp-event-detail-item:hover {
    text-decoration: underline;
}

/* ===== Termine: Kursdetails-Zeile (mobil) ===== */
@media (max-width: 767.98px) {
    .garp-events-list-event-details {
        flex-direction: column;
        gap: 2px 0;
    }

    .garp-event-detail-item {
        flex: none;
    }

    .garp-event-detail-item:last-child {
        margin-left: 0;
    }
}

/* ===== Termine: "Alle anzeigen" Link ===== */
.garp-events-show-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--course-base-color, #4c4c4c);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.garp-events-show-all-link:hover,
.garp-events-show-all-link:focus {
    color: var(--course-base-color, #4c4c4c);
    text-decoration: underline;
}

.garp-events-show-all-link i {
    transition: transform 0.2s ease;
}

.garp-events-show-all-link:hover i,
.garp-events-show-all-link:focus i {
    transform: translateX(3px);
}

/* ============================================
   ADMIN-DASHBOARD (Mintblau.aoKurse.Admin)
   Werkzeug-Oberfläche, kein Besucher-Frontend: ruhige Flächen, klare Trennung
   der vier Abschnitte, Zustände auf einen Blick erkennbar.
   ============================================ */

/* Neutrale Tonleiter, bewusst unabhängig von der Portalfarbe: Das Dashboard ist ein Werkzeug,
   keine Kundenseite. Farbe bleibt hier den Zuständen vorbehalten und wirkt dadurch stärker.
   Feste Werte statt --bs-*: Die Skins der Portale belegen diese Variablen unterschiedlich,
   und dann steht das Dashboard bei jedem Kunden anders da. */
.ao-admin-dashboard {
    --ao-admin-ink: #212529;
    --ao-admin-muted: #6c757d;
    --ao-admin-border: #e3e6ea;
    --ao-admin-rule: #ced4da;
    --ao-admin-surface: #fff;
    --ao-admin-head: #f1f3f5;
    --ao-admin-inset: #f8f9fa;
    --ao-admin-panel: #edf0f3;
}

.ao-admin-dashboard > h2 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

/* Jeder Abschnitt als abgesetzte Fläche. Der Seitenhintergrund ist in aller Regel ebenfalls
   weiß — ohne Schatten und kräftigeren Kopf verschwimmen die Abschnitte mit der Seite. */
.ao-admin-section {
    border: 1px solid var(--ao-admin-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background-color: var(--ao-admin-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Der Kopf zieht sich als getönte Kappe über die volle Breite: Damit ist auf einen Blick
   erkennbar, wo ein Abschnitt beginnt. Die negativen Ränder heben das Polster des
   Abschnitts genau um dessen eigenen Wert auf. */
.ao-admin-section > h3 {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 0.7rem 1.25rem;
    background-color: var(--ao-admin-head);
    border-bottom: 1px solid var(--ao-admin-rule);
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ao-admin-ink);
}

/* Erläuternder Text unter den Überschriften */
.ao-admin-hint {
    color: var(--ao-admin-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Fehlermeldung des Dashboards selbst (nicht die einzelner Vorgänge) */
.ao-admin-error {
    border: 1px solid var(--bs-danger, #dc3545);
    border-left-width: 4px;
    border-radius: var(--course-border-radius, 0.375rem);
    background-color: rgba(220, 53, 69, 0.08);
    color: var(--bs-danger-text-emphasis, #842029);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

/* Tabellen sitzen bündig in der Abschnittsfläche */
.ao-admin-section .table {
    margin-bottom: 0;
}

.ao-admin-section .table > thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ao-admin-muted);
    border-bottom-width: 2px;
}

/* --- Aufgabenübersicht: Sammel-Läufe mit aufklappbaren Bereichen --- */

.ao-admin-mainrun {
    border-top: 1px solid var(--ao-admin-border);
    padding: 0.5rem 0;
}

.ao-admin-mainrun:first-of-type {
    border-top: none;
}

/* Der Aufklappschalter soll wie eine Beschriftung wirken, nicht wie ein Verweis */
.ao-admin-mainrun-toggle {
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.ao-admin-mainrun-toggle:hover,
.ao-admin-mainrun-toggle:focus {
    text-decoration: none;
    color: inherit;
}

.ao-admin-toggle-sign {
    display: inline-block;
    width: 1rem;
    color: var(--ao-admin-muted);
}

/* Dezente Schaltfläche ohne Verweis-Anmutung — btn-link unterstreicht sonst */
.ao-admin-own-schedule-btn,
.ao-admin-own-schedule-btn:hover,
.ao-admin-own-schedule-btn:focus {
    text-decoration: none;
}

/* Die Bereiche gehören sichtbar zu ihrem Sammel-Lauf: eingelassene Fläche mit Führungslinie.
   Heller getönt als der Taktungsblock darüber — beide liegen direkt untereinander und wären
   in gleicher Tönung nicht auseinanderzuhalten. */
.ao-admin-area-list {
    margin: 0.35rem 1.25rem 0.5rem 1.25rem;
    background-color: var(--ao-admin-inset);
    border-left: 2px solid var(--ao-admin-rule);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.4rem 0.75rem;
}

.ao-admin-area-row {
    padding: 0.35rem 0;
}

/* Feste Breite, damit die Namen trotz ein- und zweistelliger Nummern bündig stehen */
.ao-admin-area-position {
    display: inline-block;
    width: 1.5rem;
    text-align: right;
}

.ao-admin-own-heading {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.ao-admin-own-row {
    padding: 0.35rem 0;
    border-top: 1px solid var(--ao-admin-border);
}

/* Warnungen: die einzige Stelle der Übersicht, die Aufmerksamkeit verlangt */
.ao-admin-uncovered {
    color: var(--bs-danger-text-emphasis, #842029);
    background-color: rgba(220, 53, 69, 0.08);
    border-left: 3px solid var(--bs-danger, #dc3545);
    border-radius: var(--course-border-radius, 0.375rem);
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

/* --- Beschreibungen und Taktungsblock --- */

/* Bündig unter dem Namen, den sie erklärt: Die Einrückung entspricht genau der Breite der
   davorstehenden Elemente — beim Sammel-Lauf dem Aufklappzeichen, in der Bereichszeile der
   Nummer samt Zustandszeichen. */
.ao-admin-task-desc {
    display: block;
    margin: 0.15rem 0 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ao-admin-muted);
}

/* --- Bereichszeile: Name und Aktion oben, Erklärung und Zustand darunter ---
   Zuvor hing das Datenalter unmittelbar hinter dem Namen und stand dadurch je nach dessen
   Länge an wechselnder Stelle. Der Umbruch trennt beides; die Reihenfolge muss ausdrücklich
   gesetzt sein, sonst rutscht auch die Knopfgruppe in die zweite Zeile. */
/* Spaltenabstand wie bei gap-2, aber ohne Zeilenabstand: Die Erklärung soll unmittelbar unter
   dem Namen sitzen, nicht eine halbe Zeile darunter. */
.ao-admin-area-row {
    padding: 0.3rem 0;
    column-gap: 0.5rem;
    row-gap: 0;
}

.ao-admin-area-row .ao-admin-area-position {
    order: 1;
}

.ao-admin-area-row .ao-admin-area-state {
    order: 2;
}

.ao-admin-area-row .ao-admin-area-name {
    order: 3;
}

/* Das Datenalter als Pille, rechts angeschlagen vor der Knopfgruppe. Hinter dem Namen stand es
   je nach dessen Länge woanders, hinter der Erklärung ebenso; der rechte Anschlag stellt alle
   Angaben untereinander, und die geschlossene Form nimmt der wechselnden Textlänge die Unruhe.
   Die Beschriftung "Stand:" entfällt — sie wiederholte sich in jeder Zeile, der Titel des
   Elements erklärt es. */
.ao-admin-area-row .ao-admin-area-age,
.ao-admin-area-row .ao-admin-area-duration {
    order: 5;
    margin: 0 0 0 auto;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--ao-admin-panel);
    border: 1px solid #dcdfe3;
    color: #495057;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Ein laufender Bereich hebt sich von den ruhenden ab */
.ao-admin-area-row .ao-admin-area-duration {
    background-color: #e7eef7;
    border-color: #c6d8ec;
}

/* Die negativen Ränder nehmen der Gruppe die überschüssige Höhe: Sonst bestimmt die Knopfhöhe
   den Abstand zwischen Name und Erklärung und reißt beide auseinander. */
.ao-admin-area-actions {
    order: 10;
    margin-left: auto;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
}

/* Steht das Datenalter davor, hat dieses den rechten Anschlag und die Gruppe folgt mit festem
   Abstand. Hätten beide auto, teilten sie sich den freien Raum je zur Hälfte und die Pille
   stünde mitten in der Zeile. */
.ao-admin-area-age + .ao-admin-area-actions,
.ao-admin-area-duration + .ao-admin-area-actions {
    margin-left: 0.75rem;
}

.ao-admin-row-break {
    order: 50;
    flex: 0 0 100%;
    height: 0;
    margin: 0;
}

.ao-admin-area-row .ao-admin-task-desc {
    order: 90;
    flex: 0 1 auto;
    margin: 0 0 0 3.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Die Fehlermeldung steht bei der Erklärung: Sie ist unterschiedlich lang und taugt nicht
   für eine Spalte. */
.ao-admin-area-row .ao-admin-area-message {
    order: 91;
    margin: 0;
    line-height: 1.3;
}

.ao-admin-area-row .ao-admin-area-message::before {
    content: "·";
    margin-right: 0.4rem;
    color: #adb5bd;
}

/* Die eigene Taktung sitzt in der Knopfgruppe an der Stelle, an der sonst "Eigene Taktung"
   steht. Dieselbe Mindestbreite wie dieser Knopf hält die Kante gerade — der frühere
   unsichtbare Platzhalter wird dadurch überflüssig. */
.ao-admin-area-row .ao-admin-area-own {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 7.25rem;
    color: var(--ao-admin-muted);
    white-space: nowrap;
}

.ao-admin-own-task .ao-admin-task-desc {
    margin-left: 0;
}

.ao-admin-own-task {
    border-top: 1px solid var(--ao-admin-border);
    padding-top: 0.35rem;
}

.ao-admin-own-task .ao-admin-own-row {
    border-top: none;
    padding-top: 0;
}

/* Taktung als eigener Block statt als Feldreihe in der Kopfzeile. Kräftiger getönt als die
   Bereichsliste, damit beide Blöcke nicht ineinanderlaufen. */
.ao-admin-schedule-box {
    margin: 0.6rem 1.25rem 0.5rem 1.25rem;
    padding: 0.6rem 0.85rem;
    background-color: var(--ao-admin-panel);
    border: 1px solid var(--ao-admin-border);
    border-radius: 0.375rem;
}

.ao-admin-schedule-title {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ao-admin-muted);
}

/* Der Satz trägt die Eingabefelder — dadurch ist beim Lesen klar, wofür Zahl und Einheit
   stehen. Als nackte Feldreihe war das nicht erkennbar. */
.ao-admin-schedule-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    row-gap: 0.5rem;
    font-size: 0.9rem;
    color: #495057;
}

.ao-admin-schedule-sentence .ao-admin-interval-value {
    width: 4.5rem;
}

.ao-admin-schedule-sentence .ao-admin-interval-unit {
    width: 7rem;
}

.ao-admin-schedule-text {
    margin: 0;
}

/* Zeigt die Folge der Einstellung, statt sie nur entgegenzunehmen */
.ao-admin-schedule-next {
    margin-left: 0.35rem;
    font-size: 0.85rem;
    color: var(--ao-admin-muted);
}

.ao-admin-schedule-next strong {
    font-weight: 600;
    color: #495057;
}

.ao-admin-schedule-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Schaltflächen: neutral, Farbe nur wo sie etwas bedeutet --- */

/* Betonung durch Gewicht statt durch Farbe: der einzige gefüllte Knopf der Übersicht */
.ao-admin-btn-strong {
    background-color: #343a40;
    border: 1px solid #343a40;
    color: #fff;
}

.ao-admin-btn-strong:hover,
.ao-admin-btn-strong:focus {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

/* Entfernen bleibt still wie die übrigen; die Warnfarbe erscheint erst beim Überfahren */
.ao-admin-uninstall-btn:hover,
.ao-admin-uninstall-btn:focus {
    background-color: #b02a37;
    border-color: #b02a37;
    color: #fff;
}

.ao-admin-mainrun-toggle:hover {
    background-color: var(--ao-admin-head);
}

/* --- Fokus ---

   Für die Kurs-Module legt diese Datei weiter oben allen Schaltflächen einen kräftigen
   Fokusring in der Portalfarbe an (Abschnitt "Fokus-Indikatoren für Tastatur-Navigation",
   dort mit !important). Auf einer Kundenseite ist das richtig; im Dashboard ist es der
   einzige farbige Punkt und bleibt nach jedem Mausklick stehen. Hier deshalb neutral und
   nur noch bei Tastaturbedienung, wo der Ring tatsächlich gebraucht wird. Das !important
   ist nötig, um die Regel von oben zu erreichen. */
.ao-admin-dashboard .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.ao-admin-dashboard .btn:focus-visible {
    outline: 2px solid var(--ao-admin-ink) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Die Eingabefelder der Taktung tragen ihren Fokus dagegen sichtbar — nur ruhiger als das
   Bootstrap-Blau. */
.ao-admin-dashboard .form-control:focus,
.ao-admin-dashboard .form-select:focus {
    border-color: #868e96;
    box-shadow: 0 0 0 0.2rem rgba(73, 80, 87, 0.15);
}

/* --- Zustandszeichen in den Bereichszeilen --- */

.ao-admin-state-waiting {
    color: var(--ao-admin-rule);
    font-size: 0.45em;
}

.ao-admin-state-running {
    color: #495057;
}

.ao-admin-state-succeeded {
    color: #198754;
}

.ao-admin-state-failed {
    color: #dc3545;
}

.ao-admin-state-skipped {
    color: #adb5bd;
}

/* --- Zustandsabzeichen --- */

/* Getönte Fläche mit dunkler Schrift statt vollflächiger Farbe: Die Abzeichen bleiben die
   einzigen farbigen Stellen der Übersicht, überstrahlen aber nicht mehr alles Übrige.
   Nebeneffekt: Der Kontrast steigt von rund 3,9:1 (Weiß auf Grün) auf über 6:1.
   !important ist nötig, weil Bootstrap die bg-*-Klassen selbst so setzt. */
.ao-admin-dashboard .badge.bg-success {
    background-color: #e6f4ea !important;
    color: #14622c !important;
    border: 1px solid #b7dfc4;
}

.ao-admin-dashboard .badge.bg-danger {
    background-color: #fdecec !important;
    color: #a02128 !important;
    border: 1px solid #f2c2c4;
}

.ao-admin-dashboard .badge.bg-warning {
    background-color: #fff4e0 !important;
    color: #8a5300 !important;
    border: 1px solid #f3d9a8;
}

.ao-admin-dashboard .badge.bg-secondary {
    background-color: #eef0f2 !important;
    color: #495057 !important;
    border: 1px solid #dcdfe3;
}

/* --- Laufzeile über der Aufgabenübersicht --- */

.ao-admin-runbanner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: var(--course-border-radius, 0.375rem);
    border-left: 3px solid transparent;
}

.ao-admin-runbanner-running {
    background-color: rgba(13, 110, 253, 0.08);
    border-left-color: var(--bs-primary, #0d6efd);
}

.ao-admin-runbanner-failed {
    background-color: rgba(220, 53, 69, 0.08);
    border-left-color: var(--bs-danger, #dc3545);
    color: var(--bs-danger-text-emphasis, #842029);
}

.ao-admin-runbanner-symbol {
    font-size: 1rem;
    line-height: 1;
}

/* Beide Zeichen stehen im Markup, sichtbar ist immer nur das zum Zustand passende. So muss
   das Skript beim Umschalten nur die Zustandsklasse setzen und nichts nachzeichnen. */
.ao-admin-runbanner-icon-running,
.ao-admin-runbanner-icon-failed {
    display: none;
}

.ao-admin-runbanner-running .ao-admin-runbanner-icon-running {
    display: inline-block;
    color: var(--bs-primary, #0d6efd);
}

.ao-admin-runbanner-failed .ao-admin-runbanner-icon-failed {
    display: inline-block;
    color: var(--bs-danger, #dc3545);
}

/* --- Zustände in den Bereichszeilen --- */

/* Feste Breite, sonst rücken die Namen je nach Zeichen unterschiedlich ein */
.ao-admin-area-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    line-height: 1;
}

.ao-admin-area-message {
    color: var(--bs-danger-text-emphasis, #842029);
}

/* Die Dauer eines laufenden Bereichs tritt an die Stelle des Datenalters */
.ao-admin-area-duration {
    font-variant-numeric: tabular-nums;
}

/* Wer Bewegung abgeschaltet hat, bekommt die laufenden Symbole ruhig gestellt. Font Awesome
   dreht fa-spin von sich aus weiter, deshalb hier ausdrücklich angehalten. */
@media (prefers-reduced-motion: reduce) {
    .ao-admin-dashboard .fa-spin {
        animation: none;
    }
}

/* --- Warteschlangen ---------------------------------------------------- */

.ao-admin-queue-failed-heading {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}