/* ==========================================================================
   1. GLOBAL & HEADER (WELTRAUM-BASIS & SCHRUMPF-EFFEKT)
   ========================================================================== */
body {
    background-color: #06080a !important;
    color: #cbd5e1 !important;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    padding-top: 110px !important; /* Platz für fixierten Header */
}

h1, h2, h3, h4, .page-header h1 {
    color: #f8fafc !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header, .header {
    position: fixed !important;
    top: 0; left: 0; width: 100%; z-index: 9999;
    height: 95px;
    display: flex; align-items: center;
    background: linear-gradient(180deg, #161a1f 0%, #0d0f12 100%) !important;
    border-bottom: 2px solid #374151 !important;
    transition: all 0.4s ease-in-out !important;
}

header.header.scrolled {
    height: 65px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid #ef4444 !important; /* Rotes Glimmen beim Scrollen */
}

/* ==========================================================================
   2. FIXED HEADER & UNBRECHBARES MENÜ-KARUSSELL (SICHTBAR-FIX)
   ========================================================================== */

/* Der Haupt-Header bleibt starr und bricht niemals um */
header, .header, header.header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Logo links fixieren */
    padding: 0 30px !important;
    gap: 30px !important; /* Abstand zum Menü */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Das Logo wird komplett isoliert und darf sich nicht verändern */
header .grid-child:first-child,
.navbar-brand,
.brand-logo {
    display: flex !important;
    flex-shrink: 0 !important; /* Verhindert Stauchung */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

header img, 
.navbar-brand img, 
.brand-logo img {
    height: 65px !important;
    max-height: 65px !important;
    width: auto !important;
    display: block !important;
    filter: drop-shadow(0px 0px 8px rgba(239, 68, 68, 0.6));
}

/* --- DIE NEUE SICHTBARE SCHNITTSTELLE (Für Joomla-Zwischenboxen) --- */
header .container-nav,
header .navbar,
header .navbar-collapse {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- DAS SAUBERE INTERNE KARUSSELL (Direkt auf der echten Liste) --- */
header ul, 
header .mod-menu, 
header .nav,
#mod-menu1 {
    display: flex !important;
    flex-direction: row !important; /* Knallhart in einer Reihe */
    flex-wrap: nowrap !important; /* Niemals untereinander brechen! */
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 10px 5px !important;
    list-style: none !important;
    
    /* Aktiviert das Scrollen/Wischen nur, wenn das Fenster zu klein wird */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
}

/* Versteckt die hässliche Desktop-Scrollbar, damit es wie eine App aussieht */
header ul::-webkit-scrollbar, 
header .mod-menu::-webkit-scrollbar, 
#mod-menu1::-webkit-scrollbar {
    display: none !important;
    height: 0px !important;
}

header ul li, 
header .nav-item {
    display: block !important;
    flex-shrink: 0 !important; /* Verhindert, dass die Schrift gestaucht wird */
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   3. NAVIGATIONSEFFEKTE (MIT MOUSEOVER-QUADER) & OVERRIDES
   ========================================================================== */

/* Die Menülinks als imperiale, leuchtende Quader stylen */
header .nav-link,
header ul li a {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    padding: 10px 18px !important; /* Erzeugt den inneren Platz für den Quader */
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    transition: all 0.25s ease-in-out !important;
    display: block !important;
    text-decoration: none !important;
}

/* MOUSEOVER-EFFEKT: Der leuchtende rote Quader */
header .nav-link:hover,
header ul li a:hover,
header .nav-item.active .nav-link {
    color: #ffffff !important;
    background-color: rgba(153, 27, 27, 0.3) !important; /* Transparentes Imperiums-Rot im Hintergrund */
    border: 1px solid #ef4444 !important; /* Knallroter Rahmen (Lichtschwert-Effekt) */
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important; /* Rotes Glimmen nach außen */
}

/* --- Roter Button-Look (Exakt zugewiesen an Login & Abmelden) --- */
header .item-114 a,
header .item-114 .nav-link,
header [class*="logout"] a,
header [class*="logout"] .nav-link,
header .navbar-nav .nav-item:last-child a {
    background-color: #991b1b !important; 
    color: #ffffff !important;
    padding: 6px 15px !important; 
    border-radius: 4px !important; 
    border: 1px solid #7f1d1d !important;
    transition: all 0.3s ease !important;
}

/* Hover-Effekt für die roten Knöpfe */
header .item-114 a:hover,
header [class*="logout"] a:hover,
header .navbar-nav .nav-item:last-child a:hover {
    background-color: #dc2626 !important; 
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6) !important;
}

/* Entfernt den Standard-Unterstrich-Effekt für die roten Buttons */
header .item-114 a::after,
header [class*="logout"] a::after,
header .navbar-nav .nav-item:last-child a::after { 
    display: none !important; 
}

/* Stellt sicher, dass "Mitglied werden" (ID 102) ein ganz normaler Quader bleibt */
header .item-102 a {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

/* --- Module, Terminals & Text-Overrides (Aus dem alten Code gesichert) --- */
.card, .moduletable {
    background-color: #1e252b !important; border: 1px solid #374151 !important;
    border-left: 4px solid #ef4444 !important; border-radius: 4px !important; padding: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
.btn-primary, .button { background-color: #991b1b !important; border-color: #7f1d1d !important; color: #ffffff !important; }
.btn-primary:hover, .button:hover { background-color: #dc2626 !important; }
.com_content .blog-item img, .com_content .item-image img { width: 100% !important; height: auto !important; max-height: 400px; object-fit: cover; border-radius: 4px; border-bottom: 2px solid #ef4444; margin-bottom: 20px; }
.article-info, .aside.article-info { display: none !important; }
.form-check-label, #form-login-remember label, .mod-login__remember label { color: #ffffff !important; font-weight: 500; }
.mod-login-links a, .mod-login__links a, .moduletable a { color: #f87171 !important; font-weight: bold; text-decoration: none; transition: color 0.2s ease; }
.mod-login-links a:hover, .mod-login__links a:hover, .moduletable a:hover { color: #ffffff !important; }
.mod-custom, .mod-custom p, .mod-custom span, .mod-custom div, main #system-message-container + div p, header.header + div + main p { color: #ffffff !important; font-size: 1.15rem !important; line-height: 1.7 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
.mod-custom a, main #system-message-container + div p a, header.header + div + main p a { color: #f87171 !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 4px !important; transition: color 0.2s ease-in-out !important; }
.mod-custom a:hover, main #system-message-container + div p a:hover, header.header + div + main p a:hover { color: #ffffff !important; }

/* --- Mobiler Schutz für Smartphones --- */
@media (max-width: 991.98px) {
    header, .header, header.header { justify-content: space-between !important; padding: 0 15px !important; }
    header .grid-child, header .container-nav { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
    header ul, header .mod-menu { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 10px !important; }
    header .nav-link, header ul li a { width: 100% !important; }
}

/* ==========================================================================
   4. DPCALENDAR TERMINAL-LOOK (REPARATUR & KONTRAST-TUNING)
   ========================================================================== */

/* Hintergrund-Kasten: Dunkelgraues Terminal statt tiefem Schwarz */
.dp-calendar, 
.fc, 
.fc-view-harness {
    background-color: #161a1f !important;
    border-radius: 6px !important;
    padding: 10px !important;
}

/* Kalender-Gitterzellen: Knackiges #242424 für perfekten Kontrast */
.fc-theme-standard td, 
.fc-theme-standard th, 
.fc-scrollgrid {
    border: 1px solid #374151 !important;
    background-color: #242424 !important; /* Eure Wunschfarbe für die Zellen */
}

/* Spezial-Fix für schattierte Zellen (z.B. inaktive Tage am Rand) */
.fc-cell-shaded {
    background-color: #1a1a1a !important; /* Minimal dunkler für die Abgrenzung */
    border: 1px solid #374151 !important;
}

/* Wochentage (Mo, Di, Mi...) oben als feste Leiste hervorheben */
.fc-col-header-cell,
.fc-col-header-cell-cushion {
    background-color: #1e252b !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    padding: 8px 0 !important;
}

/* Die Zahlen der Tage schneeweiß und gut lesbar färben */
.fc-daygrid-day-number,
.fc-daygrid-mon {
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    padding: 6px !important;
    text-decoration: none !important;
}

/* Ausgegraute Tage des Vor- oder Folgemonats dezenter darstellen */
.fc-day-other .fc-daygrid-day-number {
    color: #555555 !important; /* Gut lesbar, aber optisch im Hintergrund */
}

/* Der aktuelle Tag bekommt einen roten Lichtschwert-Rahmen (Fokus) */
.fc-day-today {
    background-color: rgba(153, 27, 27, 0.25) !important;
    border: 2px solid #ef4444 !important;
}

/* Links innerhalb des Kalenders (z. B. Event-Titel) leuchtend rot färben */
.fc-event,
.fc-daygrid-event,
.fc-event-title {
    color: #ffffff !important;
    background-color: #991b1b !important; /* Rote Event-Balken */
    border: 1px solid #7f1d1d !important;
    border-radius: 3px !important;
    padding: 2px 5px !important;
    font-size: 0.85rem !important;
}

.fc-event:hover {
    background-color: #dc2626 !important; /* Helleres Rot beim Drüberfahren */
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.6) !important;
}