/* ==========================================================================
   1. GLOBAL & BODY (WELTRAUM-BASIS) MIT PARALLAX-BLUR-HINTERGRUND
   ========================================================================== */
body {
    background-color: #06080a !important;
    color: #cbd5e1 !important;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    padding-top: 110px !important; /* Platz für fixierten Header */
    position: relative;
    min-height: 100vh;
}

/* Der magische RPG-Hintergrund-Layer */
body::before {
    content: '';
    position: fixed; /* Klebt im Hintergrund fest */
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: -2; /* Liegt ganz unten unter dem gesamten Inhalt */
    
    /* HIER RECHTS DIE KORREKTE URL ZUM BILD EINTRAGEN */
    background-image: url('https://northern-outpost.de/images/banners/NorthernOutpost/Logo%2020cm%20300dpi.png') !important;
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important; /* Bild füllt den Bildschirm perfekt aus */
    
    /* Der Parallax-Effekt für flüssige RPG-Bewegung */
    background-attachment: fixed !important; 
    
    /* Das Bild sanft weichzeichnen (Blur) */
    filter: blur(8px) !important; 
    
    transform: scale(1.05); /* Verhindert hässliche weiße Ränder durch den Blur-Effekt */
}

/* Der Abdunkelungs-Filter, damit das Bild nicht zu hell ist und die Texte perfekt lesbar sind */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: -1; /* Liegt genau zwischen dem Bild und eurem Text */
    background-color: rgba(6, 8, 10, 0.75) !important; /* Dunkelt das Bild um 75% ab */
    pointer-events: none;
}

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 */
}

/* --- Globale Überschriften in klarem, mächtigem Signal-Weiß --- */
h1, h2, h3, h4, h5, h6, 
.page-header h1, 
.page-header h2,
.card-header,
header.header h1 {
    color: #f8fafc !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    border-bottom: none !important;
}

/* --- Globale Link-Zähmung (E-Mails, Textlinks, Beitragslinks) --- */
a, 
main a, 
.contact-address a, 
.mailto a,
a:link, 
a:visited {
    color: #ef4444 !important; /* Euer edles Imperiums-Rot */
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover-Effekt: Links glimmen weiß auf beim Drüberfahren */
a:hover, 
main a:hover, 
.contact-address a:hover, 
.mailto a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
    text-decoration: underline !important;
}
/* ==========================================================================
   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 .item-115 a,
header .item-115 .nav-link,
header [class*="logout"] a,
header [class*="logout"] .nav-link,
header li[class*="logout"] a,
header .navbar-nav .nav-item:last-child a,
.navbar-nav li: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;
    box-shadow: none !important;
}

/* Hover-Effekt für die roten Knöpfe (Login & Abmelden) */
header .item-114 a:hover,
header .item-115 a:hover,
header [class*="logout"] a:hover,
header .navbar-nav .nav-item:last-child a:hover,
.navbar-nav li: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 .item-115 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; }
}

/* --- Globale Verbotszone für alle Joomla- & Bootstrap-Tooltips --- */
.tooltip,
.tooltip-inner,
.bs-tooltip-auto,
.joomla-tooltip,
.hasTooltip,
div[class*="tooltip"],
div[id*="tooltip"],
.popover,
.popover-body {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* --- REAKTIVIERUNG: Die Hauptüberschriften (wie HOME) stilvoll einblenden --- */
.page-header h1,
.page-heading,
main h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #f8fafc !important; /* Schneeweiß */
    font-size: 1.75rem !important;
    text-transform: uppercase !important; /* GROSSBUCHSTABEN */
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 2px solid #ef4444 !important; /* Rote Lichtschwert-Trennlinie unter HOME */
    padding-bottom: 8px !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;
}

/* ==========================================================================
   5. TERMINALS, KONTAKTFORMULAR & CAPTCHA (HALBTRANSPARENTES GLAS-DESIGN)
   ========================================================================== */

/* --- A) Joomla-Standardwände restlos transparent machen --- */
.site-grid,
.container-component,
main,
.body,
#top,
.wrapper-static,
.main-and-sidebar,
.grid-child,
div[class*="container"],
div[class*="wrapper"],
.contact-form,
#system-message-container + div {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- B) Module & Karten in echte, matte RPG-Glas-Panels verwandeln --- */
.card, 
.moduletable,
.well,
.blog-featured,
.sidebar-right {
    background-color: rgba(22, 26, 31, 0.75) !important; /* 75% deckendes Terminal-Grau */
    border: 1px solid #374151 !important;
    border-left: 4px solid #ef4444 !important; /* Roter Akzentstreifen links (Sith-Rot) */
    border-radius: 6px !important; 
    padding: 22px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
    
    /* Aktiviert den echten, matten Frosted-Glass-Effekt */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* Fix für Apple Safari & iOS */
}

/* --- C) Die Eingabefelder (Name, E-Mail, Text) anpassen --- */
.contact-form input,
.contact-form textarea,
.form-control {
    background-color: rgba(13, 16, 19, 0.8) !important; /* Sehr dunkles, leicht transparentes Anthrazit */
    border: 1px solid #4b5563 !important; /* Sichtbarer grauer Rahmen */
    color: #ffffff !important; /* Schneeweißer Text beim Tippen */
    border-radius: 4px !important;
    padding: 10px 15px !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Fokus-Effekt: Wenn man in ein Feld klickt, glimmt es rot auf */
.contact-form input:focus,
.contact-form textarea:focus,
.form-control:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
    background-color: #0d1013 !important;
}

/* Pflichtfeld-Sterne in leuchtendem Sith-Rot einfärben */
.star, .text-danger, .required {
    color: #ef4444 !important;
    font-weight: bold !important;
}

/* Das Kontrollkästchen für "Kopie an Absender" anpassen */
.contact-form .form-check-input {
    background-color: #0d1013 !important;
    border: 1px solid #4b5563 !important;
}
.contact-form .form-check-input:checked {
    background-color: #991b1b !important;
    border-color: #ef4444 !important;
}

/* Anpassung für das Proof-of-Work CAPTCHA-Widget (Altcha/Friendly) */
altcha-widget, .frc-captcha {
    margin: 15px 0 !important;
    --altcha-bg: #161a1f !important;
    --altcha-border: #374151 !important;
    --altcha-text: #ffffff !important;
}

/* ==========================================================================
   6. FOOTER-MENÜ (MICRO-BAND MIT GROSSEN GELBEN SCHALTFLÄCHEN)
   ========================================================================== */

/* Hauchdünnes Band am Seitenende - nutzt das exakte Farb-Layout */
footer, .footer {
    background: linear-gradient(180deg, #161a1f 0%, #0d0f12 100%) !important;
    border-top: 1px solid #374151 !important;
    padding: 0 !important; /* Kein eigener Abstand mehr, die Box wird rein vom Inhalt diktiert */
    height: 42px !important; /* Erzwingt eine extrem flache Gesamt-Leiste */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Erlaubt den Quadern, die Box optisch zu füllen */
}

/* Horizontale Reihe für die Einträge */
footer ul, 
footer .mod-menu,
.footer ul,
footer .nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

footer ul li,
.footer ul li,
footer .nav-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Die rechtlichen Links werden wieder groß und markant (exakt wie oben im Hauptmenü) */
footer .nav-link,
footer ul li a,
.footer ul li a {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 18px !important; /* Gibt den Quadern ihre volle, stolze Höhe zurück! */
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* MOUSEOVER-EFFEKT: Der mächtige, leuchtende GELBE Quader */
footer .nav-link:hover,
footer ul li a:hover,
.footer ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(234, 179, 8, 0.15) !important;
    border: 1px solid #eab308 !important;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.4) !important;
}
/* --- Finaler Feinschliff: Unterstreichungs-Effekt für den Footer --- */
footer .nav-link:hover,
footer ul li a:hover,
.footer ul li a:hover {
    text-decoration: underline !important; /* Fügt das fehlende Underline bei den gelben Quadern hinzu */
    text-underline-offset: 3px !important;
}


/* ==========================================================================
   7. MITGLIEDER-PROFILE (DISCORD-STYLE MIT AVATAR & BANNER-CONTAINER)
   ========================================================================== */

/* Die Joomla-Profilseite komplett in den Glas-Look zwingen */
.profile, 
.profile-edit,
#member-profile-form {
    background: transparent !important;
}

/* Das breite Kopf-Rechteck, in dem das Raumschiff-Banner sitzt */
.profile-banner-container,
fieldset[id*="profile"] {
    position: relative !important;
    width: 100% !important;
    height: 180px !important; /* Perfekte Höhe für das Raumschiff */
    background-color: rgba(22, 26, 31, 0.6) !important;
    border: 1px solid #374151 !important;
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: 60px !important; /* Platzhalter für den heraufragenden Kreis */
    overflow: visible !important; /* Erlaubt dem runden Bild das Herausragen */
}

/* Das Profilbild vollautomatisch zum runden Discord-Kreis formieren */
.profile-avatar-circle,
fieldset[id*="profile"] img,
.media-preview img {
    position: absolute !important;
    bottom: -45px !important; /* Schiebt das Bild zur Hälfte aus dem Rechteck */
    left: 30px !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important; /* Erzwingt den perfekten Kreis */
    border: 4px solid #161a1f !important; /* Dicker, edler Rahmen um den Kreis */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    object-fit: cover !important;
    z-index: 99 !important;
}

/* Die Eingabefelder und Medien-Knöpfe im Profil anpassen */
.profile-edit .btn,
.profile-edit input,
.profile-edit select {
    background-color: rgba(13, 16, 19, 0.8) !important;
    border: 1px solid #4b5563 !important;
    color: #ffffff !important;
}

.profile-edit .btn:hover {
    background-color: #991b1b !important; /* Rotes Aufglimmen bei Profil-Buttons */
    border-color: #ef4444 !important;
}

/* ==========================================================================
   8. SIDEBAR-SOCIAL-MEDIA (DEZENTER COMPACT-STYLE)
   ========================================================================== */

/* Zwingt die Box in eine engere, aufgeräumte Spalte */
.sidebar-social-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Engerer Abstand zwischen den Kanälen */
    padding: 5px 0 !important;
}

/* HOCHPRÄZISE ZUWEISUNG: Überschreibt die globalen Riesenschriften aus Abschnitt 1 */
.sidebar-social-box a,
.sidebar-social-box .social-link-item,
main .sidebar-right .social-link-item {
    font-size: 0.88rem !important; /* Spürbar kleinere, edlere Schriftgröße */
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease-in-out !important;
}

/* Inaktive Kanäle (Instagram/YouTube) dezent abdunkeln */
.sidebar-social-box .disabled-link {
    color: #4b5563 !important; /* Dunkles Anthrazit-Grau */
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.sidebar-social-box .disabled-link .social-icon {
    filter: grayscale(1) opacity(0.4) !important;
}

/* ==========================================================================
   9. LOGIN-OBERFLÄCHE (COMPACT GLASS TERMINAL MIT TITEL-FIX)
   ========================================================================== */

/* 1. Vernichtet das falsche, verirrte "HOME" auf der Login-Systemseite */
.com-users-login .page-header,
.com-users-login h1:first-of-type,
.login h1:first-of-type {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. Zwingt das gesamte Login-Formular in ein edles Glas-Terminal */
.com-users-login,
.login,
#com-form-login {
    background-color: rgba(22, 26, 31, 0.75) !important; /* 75% deckendes Terminal-Grau wie die Module */
    border: 1px solid #374151 !important;
    border-left: 4px solid #ef4444 !important; /* Roter Sith-Akzentstreifen links */
    border-radius: 6px !important; 
    padding: 25px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important;
    margin-top: 40px !important;
    position: relative !important;
}

/* 3. INJEKTION: Erzeugt das echte, schneeweiße "LOGIN" direkt in der Box */
.com-users-login::before,
.login::before {
    content: 'LOGIN' !important; /* Das echte Wort unhackbar fixiert */
    display: block !important;
    color: #f8fafc !important; /* Schneeweiß */
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 2px solid #ef4444 !important; /* Der hübsche rote Lichtschwert-Strich */
    padding-bottom: 8px !important;
    width: 100% !important;
}

/* ==========================================================================
   10. KONTAKT-DETAILS (REINIGUNG & ICON-VERBOT)
   ========================================================================== */

/* Vernichtet das Google-Maps-artige Positions-Icon im Kontaktbereich */
.contact-address .icon-location,
.contact-address [class*="icon-"],
span.icon-location,
.icon-location::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Schiebt den Text nach dem Löschen des Icons wieder bündig nach links */
.contact-address {
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* ==========================================================================
   11. SYSTEM-MELDUNGEN (WARNUNGS- & ALARM-SIDERALL-SPERRE)
   ========================================================================== */

/* Blendet die roten System-Warnmeldungen und Berechtigungs-Hinweise komplett aus */
#system-message-container,
.system-messages,
div[id*="system-message"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}


/* ==========================================================================
   12. NEWS-KACHELN (EINZELNE BLOG-BEITRÄGE IM GLAS-LOOK)
   ========================================================================== */

/* Verwandelt jeden einzelnen News-Beitrag in ein separates Glas-Terminal */
.blog-item,
article.item,
.com-content-category-blog__item {
    background-color: rgba(22, 26, 31, 0.75) !important; /* 75% deckendes Terminal-Grau */
    border: 1px solid #374151 !important;
    border-left: 4px solid #ef4444 !important; /* Roter Lichtschwert-Akzentstreifen links */
    border-radius: 6px !important; 
    padding: 25px !important;
    margin-bottom: 30px !important; /* Deutlicher Abstand zwischen den einzelnen Beiträgen */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Sorgt dafür, dass die Überschriften in den News-Kacheln perfekt matchen */
.blog-item h2,
.blog-item .page-header h2 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 1.4rem !important;
}

/* Der Bearbeiten-Button für dich als Admin innerhalb der Kachel */
.blog-item .btn-group {
    margin-bottom: 15px !important;
}
/* ==========================================================================
   13. CHATROOM-MINIMALISMUS (AVATAR-DEAKTIVIERUNG)
   ========================================================================== */

/* Blendete alle Avatare und Platzhalter-Bilder im Chatroom komplett aus */
.chat-avatar,
.chat-message img.avatar,
div[class*="avatar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Schiebt den Benutzernamen und den Text bündig an den Rand */
.chat-message-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* ==========================================================================
   14. NEXTCLOUD-STYLE DASHBOARD GRID
   ========================================================================== */
/* --- NEXTCLOUD DASHBOARD FINE-TUNING --- */
.nextcloud-dashboard-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
}

.dashboard-tile {
    background-color: rgba(22, 26, 31, 0.6) !important;
    border: 1px solid #374151;
    border-radius: 6px;
    backdrop-filter: blur(12px);
    height: 320px; /* Leicht erhöht für mehr Inhalt */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Event-Zeilen im Widget */
.db-event-row {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.db-event-row:hover {
    background: rgba(239, 68, 68, 0.08);
    transform: translateX(2px);
}
.db-event-title {
    font-weight: bold;
    color: #ffffff;
    font-size: 0.95rem;
    padding-right: 110px; /* Platz für das Badge lassen */
}
.db-event-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* Status-Abzeichen rechts bündig */
.db-status-badge {
    float: right;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* --- DRUCK-/DETAIL-POPUP (MODAL WINDOW) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 16, 19, 0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}
.modal-content {
    background: #1e252b;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 25px;
    width: 650px; /* Breiter für bessere Lesbarkeit von Listen */
    max-width: 95%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}
.modal-body-text {
    background: #0d1013;
    padding: 18px;
    border-radius: 6px;
    height: 250px; /* Erhöht für die langen Texte der Kinderstationen */
    overflow-y: auto;
    margin-bottom: 20px;
    color: #e2e8f0;
    line-height: 1.5;
    border: 1px solid #374151;
}

/* HTML-Elemente INNERHALB des Popups sauber formatieren */
.modal-body-text p { margin-bottom: 12px; }
.modal-body-text ul, .modal-body-text ol { margin-left: 20px !important; margin-bottom: 12px; padding-left: 5px; }
.modal-body-text li { margin-bottom: 6px; color: #cbd5e1; }
.modal-body-text strong { color: #ffffff; }
.modal-body-text a { color: #ef4444; font-weight: bold; text-decoration: none; }
.modal-body-text a:hover { text-decoration: underline; }

/* ==========================================================================
   15. IMPERIALES TROOP-POPUP FINE-TUNING
   ========================================================================== */

/* Das gesamte Overlay (Hintergrund-Milchglas) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 12, 16, 0.9);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

/* Der Haupt-Kasten (Schmalere Ränder: Padding von 25px auf 15px verringert) */
.modal-content {
    background: #161a1f;
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 15px !important; 
    width: 700px;
    max-width: 95%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
}

/* Kleinere Überschrift (Schriftgröße auf 1.1rem gestutzt) */
.modal-content h3 { 
    margin-top: 0; 
    margin-bottom: 5px;
    color: #ffffff; 
    font-size: 1.1rem !important; 
    letter-spacing: 0.5px;
}

/* Schmalere Meta-Zeile (Datum / Ort) */
.modal-meta { 
    font-size: 0.78rem !important; 
    color: #94a3b8; 
    margin-bottom: 10px !important; 
    border-bottom: 1px solid rgba(55, 65, 81, 0.6); 
    padding-bottom: 6px; 
}

/* DAS RIESIGE TEXTFELD (Höhe von 250px auf 380px erweitert!) */
.modal-body-text {
    background: #0d1013;
    padding: 12px !important; /* Schmalerer Innenrand */
    border-radius: 4px;
    height: 380px !important; 
    overflow-y: auto;
    margin-bottom: 15px !important;
    color: #e2e8f0;
    line-height: 1.4;
    border: 1px solid #374151;
    font-size: 0.85rem !important; /* Kleinere, scharfe Schriftgröße */
}

/* HTML-Elemente INNERHALB der Textbox (Kompaktere Abstände) */
.modal-body-text p { margin-bottom: 8px; }
.modal-body-text ul, .modal-body-text ol { margin-left: 15px !important; margin-bottom: 8px; padding-left: 0; }
.modal-body-text li { margin-bottom: 4px; color: #cbd5e1; }
.modal-body-text strong { color: #ffffff; }

/* Die Button-Leiste ganz unten */
.modal-buttons { 
    display: flex; 
    gap: 6px; 
}

/* SITH-ROTER IMPERIUM-STYLE FÜR DIE VOTE-BUTTONS (Analog zu eurem Menü-Rot) */
.vote-btn { 
    padding: 6px 14px !important; 
    border-radius: 4px !important; 
    font-weight: bold !important; 
    font-size: 0.82rem !important;
    cursor: pointer; 
    transition: all 0.2s ease;
    border: 1px solid #7f1d1d !important;
    color: #ffffff !important;
}

/* Zusage-Button (Sith-Rot) */
.btn-yes { 
    background-color: #991b1b !important; 
}
.btn-yes:hover { 
    background-color: #dc2626 !important; 
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* Vielleicht-Button (Dunkles, edles Anthrazit-Grau) */
.btn-maybe { 
    background-color: #374151 !important; 
    border: 1px solid #4b5563 !important;
}
.btn-maybe:hover { 
    background-color: #4b5563 !important; 
    color: #ffffff !important;
}

/* Absage-Button (Sehr dunkles Rot-Schwarz, um nicht zu dominieren) */
.btn-no { 
    background-color: #450a0a !important; 
    border: 1px solid #7f1d1d !important;
}
.btn-no:hover { 
    background-color: #7f1d1d !important; 
}

/* Schließen-Button (Klassischer, unauffälliger Rumpf-Grauton) */
.btn-close { 
    background-color: #1f2937 !important; 
    border: 1px solid #374151 !important;
    margin-left: auto; 
}
.btn-close:hover { 
    background-color: #374151 !important; 
}

/* ==========================================================================
   16. IMPERIAL VOTE-BUTTONS - UNIFORM DESIGN WITH HOVER HIGHLIGHTS
   ========================================================================== */

/* Basis-Design: Alle Buttons sind jetzt exakt gleich groß, edel und dunkel wie der Vielleicht-Button */
.vote-btn { 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    
    /* Einheitsgröße & Symmetrie */
    width: 140px !important; /* Alle Buttons haben jetzt dieselbe stolze, breite Basis! */
    height: 38px !important;  /* Perfekt aufeinander ausgerichtete Höhe */
    padding: 0 10px !important; 
    border-radius: 4px !important; 
    
    font-weight: bold !important; 
    font-size: 0.85rem !important;
    cursor: pointer; 
    color: #ffffff !important;
    
    /* Der edle, dezente Standard-Look des Vielleicht-Buttons für ALLE */
    background-color: #374151 !important; 
    border: 1px solid #4b5563 !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: none !important;
}

/* 🟩 1. ZUSAGE-HIGHLIGHT (Im Fokus ruhig, leuchtet grün beim Drüberfahren) */
.btn-yes:hover { 
    background-color: #16a34a !important; /* Leuchtend Grün */
    border-color: #4ade80 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6) !important; /* Grünes Glühen */
}

/* 🟨 2. VIELLEICHT-HIGHLIGHT (Bleibt im Standard-Look, glüht gelb beim Hovern) */
.btn-maybe:hover { 
    background-color: #ca8a04 !important; /* Leuchtend Gelb */
    border-color: #fde047 !important;
    color: #000000 !important; /* Schwarzer Text für perfekten Kontrast */
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.6) !important; /* Gelbes Glühen */
}

/* 🟥 3. ABSAGE-HIGHLIGHT (Im Fokus ruhig, leuchtet rot beim Drüberfahren) */
.btn-no:hover { 
    background-color: #dc2626 !important; /* Leuchtend Rot */
    border-color: #fca5a5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.6) !important; /* Rotes Glühen */
}

/* 🪙 4. SCHLIESSEN-HIGHLIGHT (Gleiche Breite, rückt nach rechts, leuchtet silber-grau) */
.btn-close { 
    margin-left: auto !important; /* Schiebt den Button elegant ganz nach rechts außen */
}
.btn-close:hover { 
    background-color: #94a3b8 !important; /* Edles Silber-Grau */
    border-color: #cbd5e1 !important;
    color: #0f172a !important; /* Dunkler Text auf Silber */
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.5) !important; /* Silbernes Glühen */
}

/* ==========================================================================
   17. DASHBOARD ASYMMETRIE & VERTICAL SCROLL EXTENSION
   ========================================================================== */

/* Das Haupt-Grid: Erlaubt den Kacheln jetzt, sich völlig frei in der Höhe zu entfalten */
.nextcloud-dashboard-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    align-items: start; /* Zwingt Kacheln nicht, alle krampfhaft gleich hoch zu sein */
}

/* Standard-Höhe für die normalen Kacheln (Schmiede, Pings, Notizen) */
.dashboard-tile {
    background-color: rgba(22, 26, 31, 0.6) !important;
    border: 1px solid #374151;
    border-radius: 6px;
    backdrop-filter: blur(12px);
    height: 280px; /* Kompakte Nextcloud-Standardgröße */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 📅 CHIRURGISCHER GRIFF: Erweitert NUR die Kalender-Kachel um das Doppelte! */
.tile-events {
    height: 580px !important; /* Exakt um das Doppelte Vertikal verlängert! */
}

/* Macht das Innere der Kalender-Kachel unfehlbar vertikal scrollbar */
.tile-events .tile-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto !important; /* Aktiviert das vertikale Scrollen */
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
}

/* 🎨 OPTIONAL: Verschönert die Scrollbar im Kalender (Schlanker Sci-Fi-Look) */
.tile-events .tile-body::-webkit-scrollbar {
    width: 6px;
}
.tile-events .tile-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
.tile-events .tile-body::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 10px;
}
.tile-events .tile-body::-webkit-scrollbar-thumb:hover {
    background: #ef4444; /* Leuchtet imperial rot beim Scrollen */
}
/* ==========================================================================
   18. UNBLOCKIERBARE SCROLLBAR FÜR DIE KALENDER-KACHEL
   ========================================================================== */

/* Zwingt die Kalender-Kachel auf die doppelte Höhe */
.tile-events {
    height: 580px !important; 
    overflow: visible !important; /* Erlaubt dem inneren Bereich, Scrollbalken zu zeigen */
}

/* ZWINGT das innere Fenster zur vertikalen Scrollbar */
.tile-events .tile-body {
    flex-grow: 1 !important;
    height: calc(100% - 45px) !important; /* Zwingt den Body, innerhalb der Kachel zu bleiben */
    overflow-y: scroll !important; /* ÄNDERUNG: "scroll" erzwingt die Leiste, auch wenn sie leer wäre! */
    overflow-x: hidden !important;
    padding: 15px !important;
}

/* --- FORCE-STYLING: Macht die Scrollbar in JEDEM Browser sichtbar --- */
.tile-events .tile-body::-webkit-scrollbar {
    width: 10px !important; /* Etwas breiter, damit man sie gut sieht */
    display: block !important;
}

.tile-events .tile-body::-webkit-scrollbar-track {
    background: rgba(13, 16, 19, 0.6) !important; /* Dunkler Hintergrund für die Spur */
    border-radius: 4px !important;
}

.tile-events .tile-body::-webkit-scrollbar-thumb {
    background-color: #4b5563 !important; /* Sichtbares Grausilber für den Schieber */
    border: 2px solid #161a1f !important; /* Schafft Abstand zum Rand */
    border-radius: 10px !important;
}

/* Hover-Effekt: Der Schieber leuchtet im Sith-Rot eures Menüs auf, wenn man drübergeht */
.tile-events .tile-body::-webkit-scrollbar-thumb:hover {
    background-color: #991b1b !important; 
    border-color: #0d1013 !important;
}

/* Für Firefox (Erzwingt die Scrollbar-Farben im alternativen Browser) */
.tile-events .tile-body {
    scrollbar-width: thin !important;
    scrollbar-color: #4b5563 rgba(13, 16, 19, 0.6) !important;
}
/* ==========================================================================
   19. MOBILE OPTIMIERUNG FÜR SMARTPHONES (AUTOMATISCHER HANDY-SENSOR)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Wände dünner: Schaltet das Raster stur auf UNTEREINANDER um */
    .nextcloud-dashboard-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important; /* Schmalere Abstände zwischen den Kacheln */
        padding: 5px !important;
    }
    
    /* 2. Kacheln kompakter machen */
    .dashboard-tile {
        height: 240px !important; /* Schmälert die Standard-Kacheln fürs Handy */
    }
    
    /* 📅 Die Kalender-Kachel bleibt mobil erhöht, aber statt 580px reichen 420px */
    .tile-events {
        height: 420px !important; 
    }
    
    /* 3. Event-Zeilen schmaler & Texte leserlicher (Weniger Umbrüche!) */
    .db-event-row {
        padding: 8px !important; /* Weniger Platzverschwendung */
        margin-bottom: 6px !important;
    }
    
    .db-event-title {
        font-size: 0.88rem !important; /* Leicht kleinere Schrift verhindert Umbrüche */
        padding-right: 90px !important; /* Platz für das kleinere Badge */
    }
    
    .db-event-meta {
        font-size: 0.75rem !important;
    }
    
    .db-status-badge {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }
    
    /* 4. Das Zusage-Popup (Modal) fürs Handy optimieren */
    .modal-content {
        width: 95% !important;
        padding: 10px !important; /* Schmale Ränder im Popup */
    }
    
    .modal-body-text {
        height: 280px !important; /* Optimal ausgenutzte Höhe auf dem Smartphone */
        font-size: 0.8rem !important; /* Knackig scharfe, lesbare Schrift */
        padding: 10px !important;
    }
    
    /* Die 4 Sith-Buttons am Handy perfekt aufteilen (2x2 oder flüssig) */
    .modal-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Macht zwei saubere Zweier-Reihen */
        gap: 6px !important;
    }
    
    .vote-btn {
        width: 100% !important; /* Nutzen die volle Breite ihrer Rasterzelle */
        height: 34px !important;
        font-size: 0.8rem !important;
    }
    
    .btn-close {
        grid-column: span 2 !important; /* Der Schließen-Button streckt sich edel über die volle Breite unten */
        margin-left: 0 !important;
    }
}
/* Hover-Effekte für die Dashboard Blätter-Buttons */
.page-nav-btn {
    transition: all 0.2s ease-in-out !important;
}
.page-nav-btn:hover:not([disabled]) {
    background-color: #991b1b !important; /* Sith-Rot beim Hovern! */
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
}
/* ==========================================================================
   21. AUTARKER FORUM-SEKTOR: COLOR-SHIFT VON ROT AUF BLAU
   ========================================================================== */

/* Ändert die rote Login-Karte und Buttons im Forum auf tiefes Blau */
.forum-sector-blue .login-card {
    border-color: #1e3a8a !important;
    background: rgba(30, 58, 138, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.forum-sector-blue .entry-btn {
    background: #1d4ed8 !important;
    border-color: #3b82f6 !important;
}

.forum-sector-blue .entry-btn:hover {
    background: #2563eb !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important;
}

/* Sicherheits-Badge im Forum blau akzentuieren */
.forum-sector-blue .security-badge {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* Die Beitrags-Karten im Forum erhalten einen blauen Signal-Rand */
.forum-sector-blue .post-card {
    border-left-color: #2563eb !important;
    background: rgba(30, 41, 59, 0.3) !important;
}