/* GSI_RC_HELI - FINAL SYSTEM STYLE 
    Struktur: LG-Zentriert (1140px) | Content Links | Sidebar Rechts
*/

:root {
    --rc-blue: #00a8ff;
    --gsi-dark: #0f1419;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --container-lg: 1140px; /* Der LG Mittelpunkt */
}

/* --- BASIS --- */
body {
    background-color: #f0f7ff;
    font-family: 'Lexend Exa', sans-serif;
    color: #2f3542;
    margin: 0;
    font-size: 13px;
    background-attachment: fixed;
}

/* HINTERGRUND-GITTER */
body::before {
    content: ""; position: fixed; inset: 0;
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px; z-index: -1;
}

/* --- CONTAINER & MITTELPUNKT --- */
.container {
    max-width: var(--container-lg) !important;
    margin: 0 auto !important;
}

/* --- NAVIGATION (GSI STYLE) --- */
.main-nav {
    background: rgba(15, 20, 25, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--rc-blue);
    padding: 15px 0;
}

.logo { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 1px; }
.logo span { color: var(--rc-blue); }

/* --- CONTENT AREA (9 SPALTEN) --- */
.glass-main-box {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 25px;
    border-left: 6px solid var(--rc-blue);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    /* Der dezente "Angefressen"-Effekt unten links */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 3% 100%, 0% 96%);
    margin-bottom: 20px;
}

.tech-id {
    font-size: 9px; color: var(--rc-blue); font-weight: 900;
    letter-spacing: 1px; display: block; margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

/* --- SIDEBAR AREA (3 SPALTEN) --- */
.gsi-sidebar-box {
    background: var(--gsi-dark);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    color: #fff;
}

.gsi-box-header {
    background: linear-gradient(90deg, var(--rc-blue), #00d2ff);
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.gsi-menu-wrapper { padding: 12px; }

.gsi-menu-wrapper ul { list-style: none; padding: 0; margin: 0; }
.gsi-menu-wrapper ul li a {
    color: #ccc; text-decoration: none; display: block;
    padding: 5px 0; font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: 0.3s;
}
.gsi-menu-wrapper ul li a:hover { color: var(--rc-blue); padding-left: 5px; }

/* --- SYSTEM ELEMENTE --- */
.pulse-led {
    height: 8px; width: 8px; background: #00ff00; border-radius: 50%;
    display: inline-block; margin-right: 8px;
    box-shadow: 0 0 8px #00ff00; animation: pulse 1.5s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }

/* --- FOOTER --- */
.rc-footer-modern {
    background: var(--gsi-dark);
    color: #fff;
    padding: 40px 0;
    font-size: 12px;
}

.neon-divider { height: 3px; background: var(--rc-blue); margin-bottom: 25px; box-shadow: 0 0 10px var(--rc-blue); }

/* Sticky Navigation Fix */
.main-nav {
    z-index: 1050;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Der Platzhalter zwischen Content und Footer */
.footer-spacer {
    background: transparent;
}

/* Footer Links Styling */
.footer-nav a {
    color: #666;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: var(--rc-blue);
}

.footer-logo {
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
}

.footer-logo span {
    color: var(--rc-blue);
}/* Sticky Navigation Fix */
.main-nav {
    z-index: 1050;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Der Platzhalter zwischen Content und Footer */
.footer-spacer {
    background: transparent;
}

/* Footer Links Styling */
.footer-nav a {
    color: #666;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: var(--rc-blue);
}

.footer-logo {
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
}

.footer-logo span {
    color: var(--rc-blue);
}

/* --- NAVIGATION (MENÜ ID 2) --- */
.main-nav .nav-links ul {
    margin: 0;
    padding: 0;
}

.main-nav .nav-links li a {
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 4px;
}

.main-nav .nav-links li a:hover {
    color: var(--rc-blue);
    background: rgba(0, 168, 255, 0.1);
    text-shadow: 0 0 8px var(--rc-blue);
}

/* --- SIDEBAR BOXEN (MENÜ ID 1) --- */
.gsi-sidebar-box {
    background: #0f1419;
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.gsi-box-header {
    background: linear-gradient(90deg, var(--rc-blue), #00d2ff);
    color: #fff;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gsi-menu-wrapper {
    padding: 12px;
}

.gsi-menu-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-menu-wrapper li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gsi-menu-wrapper li:last-child {
    border-bottom: none;
}

.gsi-menu-wrapper li a {
    color: #ccc;
    text-decoration: none;
    font-size: 11px;
    display: block;
    padding: 8px 5px;
    transition: all 0.3s;
}

.gsi-menu-wrapper li a:hover {
    color: var(--rc-blue);
    padding-left: 12px;
    background: rgba(0, 168, 255, 0.05);
}

/* --- FOOTER LINKS --- */
.footer-nav a {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: var(--rc-blue);
}/* --- NAVIGATION (MENÜ ID 2) --- */
.main-nav .nav-links ul {
    margin: 0;
    padding: 0;
}

.main-nav .nav-links li a {
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 4px;
}

.main-nav .nav-links li a:hover {
    color: var(--rc-blue);
    background: rgba(0, 168, 255, 0.1);
    text-shadow: 0 0 8px var(--rc-blue);
}

/* --- SIDEBAR BOXEN (MENÜ ID 1) --- */
.gsi-sidebar-box {
    background: #0f1419;
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.gsi-box-header {
    background: linear-gradient(90deg, var(--rc-blue), #00d2ff);
    color: #fff;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gsi-menu-wrapper {
    padding: 12px;
}

.gsi-menu-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-menu-wrapper li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gsi-menu-wrapper li:last-child {
    border-bottom: none;
}

.gsi-menu-wrapper li a {
    color: #ccc;
    text-decoration: none;
    font-size: 11px;
    display: block;
    padding: 8px 5px;
    transition: all 0.3s;
}

.gsi-menu-wrapper li a:hover {
    color: var(--rc-blue);
    padding-left: 12px;
    background: rgba(0, 168, 255, 0.05);
}

/* --- FOOTER LINKS --- */
.footer-nav a {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: var(--rc-blue);
}
/* --- HINTERGRUND & SYSTEM-GITTER --- */
body {
    /* Ein sehr helles, kühles Blau als Basis */
    background-color: #eef5fc; 
    color: #2f3542;
    font-family: 'Lexend Exa', sans-serif;
    margin: 0;
    background-attachment: fixed;
    position: relative;
}

/* DAS TECHNISCHE GITTER (GRID) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Blaues Gitter mit 40px Kantenlänge */
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
}

/* ZUSÄTZLICHER DISKRETER VERLAUF FÜR TIEFE */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 168, 255, 0.03) 100%);
    z-index: -1;
    pointer-events: none;
}

/* --- CONTENT-BOX (WEISS MIT BLAUEM AKZENT) --- */
.glass-main-box {
    /* Sattes Weiß mit hoher Deckkraft für Lesbarkeit */
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 35px;
    /* Der markante blaue GSI-Balken links */
    border-left: 8px solid var(--rc-blue);
    border-top: 1px solid rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(0, 168, 255, 0.1);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    
    box-shadow: 0 15px 35px rgba(0, 168, 255, 0.05);
    margin-bottom: 25px;
    
    /* Der technische Ecken-Schnitt (Angefressen) */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 30px 100%, 0% calc(100% - 30px));
}

/* VERFEINERUNG DER CONTENT-SCHRIFT */
.ilch-content {
    line-height: 1.7;
    font-size: 14px;
}

.ilch-content h1, .ilch-content h2 {
    color: var(--gsi-dark);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--rc-blue);
    display: inline-block;
}
/* --- ANIMIERTER GSI-HINTERGRUND --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend Exa', sans-serif;
    color: #2f3542;
    /* Fließender Verlauf */
    background: linear-gradient(-45deg, #eef5fc, #ffffff, #d9e9ff, #ffffff);
    background-size: 400% 400%;
    animation: flowBackground 15s ease infinite;
    background-attachment: fixed;
    min-height: 100vh;
}

@keyframes flowBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* DAS FIXIERTE GITTER (DRÜBERGELEGT) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}

/* --- ANIMIERTER GSI-HINTERGRUND --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend Exa', sans-serif;
    color: #2f3542;
    /* Fließender Verlauf */
    background: linear-gradient(-45deg, #eef5fc, #ffffff, #d9e9ff, #ffffff);
    background-size: 400% 400%;
    animation: flowBackground 15s ease infinite;
    background-attachment: fixed;
    min-height: 100vh;
}

@keyframes flowBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* DAS FIXIERTE GITTER (DRÜBERGELEGT) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}

/* --- CONTENT-BOX (AUTOMATISCH VERLÄNGERND) --- */
.glass-main-box {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 40px;
    border-left: 8px solid var(--rc-blue);
    box-shadow: 0 20px 40px rgba(0, 168, 255, 0.08);
    /* Wichtig: Höhe auf auto, damit News nach unten schieben */
    height: auto; 
    min-height: 500px;
    margin-bottom: 40px;
    display: block;
    overflow: visible; /* Verhindert das Abschneiden der Pagination */
}

/* PAGINATION (SEITENWECHSEL) STYLING */
.pagination {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px dashed rgba(0, 168, 255, 0.2);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination .page-item .page-link {
    background: var(--gsi-dark);
    color: var(--rc-blue);
    border: 1px solid var(--rc-blue);
    border-radius: 4px;
    padding: 8px 16px;
    transition: 0.3s;
}

.pagination .page-item.active .page-link {
    background: var(--rc-blue);
    color: #fff;
}

/* --- NEUER HOVER FÜR SIDEBAR-MENÜ (RECHTS) --- */
.gsi-menu-wrapper li a {
    position: relative;
    padding: 10px 15px;
    color: #ccc;
    text-decoration: none;
    display: block;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    z-index: 1;
}

.gsi-menu-wrapper li a::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 0;
    background: rgba(0, 168, 255, 0.1);
    border-left: 3px solid var(--rc-blue);
    transition: 0.3s;
    z-index: -1;
}

.gsi-menu-wrapper li a:hover {
    color: #fff;
    padding-left: 20px;
    text-shadow: 0 0 10px var(--rc-blue);
}

.gsi-menu-wrapper li a:hover::before {
    width: 100%;
}

/* --- LILA-FIX & NAVIGATION (OBEN) --- */
.main-nav {
    background: rgba(15, 20, 25, 0.95) !important; /* Tiefes GSI-Dunkel statt Lila */
    border-bottom: 3px solid var(--rc-blue);
    box-shadow: 0 4px 20px rgba(0, 168, 255, 0.2);
}

/* --- SIDEBAR (ZEITBAR) FARBANPASSUNG --- */
.rc-sidebar-right {
    gap: 20px;
}

.gsi-sidebar-box {
    background: #0f1419; /* Tiefes Schwarz-Blau */
    border: 1px solid rgba(0, 168, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.1);
}

.gsi-box-header {
    /* Verlauf von GSI-Blau zu einem dunkleren Ton */
    background: linear-gradient(90deg, var(--rc-blue) 0%, #0077b3 100%);
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* --- NEWS-STABILITÄT (MEHRERE NEWS) --- */
.ilch-content {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den einzelnen News-Beiträgen */
}

/* Falls jede News eine eigene Card/Box im Ilch hat */
.news-article, .ilch-news-entry {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(0, 168, 255, 0.1);
    transition: transform 0.3s ease;
}

.news-article:hover {
    transform: translateY(-5px);
    border-color: var(--rc-blue);
}

/* --- CONTENT-BOX FIX (KEIN ZERREISSEN) --- */
.glass-main-box {
    height: auto !important; /* Zwingt die Box mit dem Inhalt zu wachsen */
    overflow: visible;
    display: block;
    padding-bottom: 60px; /* Genug Platz für die Pagination unten */
}

/* PAGINATION (SEITENZAHLEN) OPTIMIERUNG */
.pagination {
    margin-top: 50px;
    background: rgba(15, 20, 25, 0.05);
    padding: 15px;
    border-radius: 50px;
}

/* --- DER NEUE GSI-GRADIENT HINTERGRUND --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend Exa', sans-serif;
    /* Der Gimmick-Verlauf: Von hellem Weiß-Blau in ein sattes Royal-Blau */
    background: radial-gradient(circle at 10% 10%, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(220, 235, 255, 1) 30%, 
                rgba(0, 120, 215, 1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #2f3542;
}

/* DAS GITTER - JETZT MIT KONTRAST-MODUS */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Dunkleres Blau für das Gitter, damit man es auf dem Verlauf überall sieht */
    background-image: 
        linear-gradient(rgba(0, 80, 150, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 80, 150, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

/* --- SIDEBAR BOXEN (WEISSE HEADER) --- */
.gsi-sidebar-box {
    background: rgba(15, 20, 25, 0.9); /* Box-Inhalt bleibt dunkel für den Kontrast */
    border: 2px solid #fff; /* Starker weißer Rahmen */
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gsi-box-header {
    /* Header jetzt Weiß mit technischem Glanz */
    background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
    color: #0f1419 !important; /* Schwarze Schrift auf weißem Grund */
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--rc-blue);
}

/* --- DER CONTENT-BEREICH --- */
.glass-main-box {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    padding: 40px;
    /* Blau-Weiß Akzent an der Kante */
    border-left: 10px solid var(--rc-blue);
    border-top: 2px solid #fff;
    box-shadow: 0 20px 50px rgba(0, 50, 100, 0.2);
}

/* NAVIGATION ANPASSEN */
.main-nav {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid #fff;
}

/* --- DER VERFEINERTE GSI-GRADIENT --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend Exa', sans-serif;
    /* Weicherer Verlauf: Weiß oben links zu einem dezenten Tech-Blau rechts */
    background: radial-gradient(circle at 10% 10%, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(235, 245, 255, 1) 40%, 
                rgba(160, 200, 255, 1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #2f3542;
}

/* DAS FEINERE GITTER (SMALLER GRID) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Gittergröße von 50px auf 25px reduziert (feiner) */
    /* Farbe auf der linken Seite extrem dezent (0.05 Deckkraft) */
    background-image: 
        linear-gradient(rgba(0, 100, 200, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 100, 200, 0.08) 1px, transparent 1px);
    background-size: 25px 25px; 
    z-index: -1;
    pointer-events: none;
}

/* --- OPTIMIERTE SIDEBAR BOXEN (WEISSE HEADER) --- */
.gsi-sidebar-box {
    background: rgba(15, 20, 25, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 40, 80, 0.2);
}

.gsi-box-header {
    /* Cleaner weißer Header ohne harten Verlauf */
    background: #ffffff;
    color: #0f1419 !important;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 3px solid var(--rc-blue); /* Blauer Akzent unter dem Weiß */
}

/* --- CONTENT BOX ANPASSUNG --- */
.glass-main-box {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 15px;
    padding: 30px;
    /* Dünnere, elegantere Linie links */
    border-left: 6px solid var(--rc-blue);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* NAVIGATION (TRANSPARENTER FÜR DEN LOOK) */
.main-nav {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- BASIS & SCHRIFTEN --- */
body {
    font-size: 15px; /* Von 13px auf 15px für bessere Lesbarkeit */
    line-height: 1.6;
}

/* NAVIGATION CLEANER (Kein Hintergrund beim Hover) */
.main-nav .nav-links li a {
    font-size: 13px;
    padding: 10px 15px;
    background: transparent !important; /* Hover-Fläche weg */
    position: relative;
}

.main-nav .nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--rc-blue);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-nav .nav-links li a:hover::after {
    width: 80%; /* Nur ein smarter Strich beim Hover */
}

/* CONTENT BOX ANIMATION (Dezenter Flow-Rahmen) */
@keyframes borderFlow {
    0% { border-left-color: var(--rc-blue); }
    50% { border-left-color: #ffffff; }
    100% { border-left-color: var(--rc-blue); }
}

.glass-main-box {
    background: rgba(255, 255, 255, 0.98);
    padding: 40px; /* Mehr Platz innen (kein Quetschen mehr) */
    border-left: 8px solid var(--rc-blue);
    animation: borderFlow 4s infinite ease-in-out; /* Der Balken "atmet" */
    box-shadow: 0 15px 45px rgba(0,0,0,0.03);
}

/* SIDEBAR BOXEN (Stylischer & weniger massiv) */
.gsi-sidebar-box {
    background: #fff; /* Boxen jetzt auch hell für den Flow */
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: 12px;
}

.gsi-box-header {
    background: #f8fafd;
    color: var(--gsi-dark) !important;
    border-bottom: 2px solid var(--rc-blue);
    font-size: 12px;
}
/* SLIDER OVERLAY LOOK */
.gaming-slider-wrapper {
    position: relative;
    border: 5px solid #fff;
    border-radius: 20px;
    overflow: hidden;
}

.slider-content-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(15, 20, 25, 0.8);
    padding: 20px;
    border-left: 5px solid var(--rc-blue);
    color: #fff;
    backdrop-filter: blur(5px);
}

/* CONTENT SPACING */
.ilch-content-body {
    font-size: 1.05rem; /* Etwas größere Schrift für den Content */
    line-height: 1.8;
}

/* Erzwungene 1200px Breite für XL Bildschirme */
@media (min-width: 1200px) {
    .container-xl {
        max-width: 1200px !important;
    }
}

/* Sidebar Boxen verfeinern */
.gsi-sidebar-box {
    background: #fff;
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.gsi-box-header {
    background: #f8fafd;
    color: #0f1419;
    border-bottom: 2px solid var(--rc-blue);
    padding: 12px 15px;
    font-weight: 900;
}

/* --- SIDEBAR MENÜ (GRÖSSER & STYLISCHER) --- */
.gsi-menu-wrapper ul li a {
    font-size: 15px; /* Größer wie gewünscht */
    font-weight: 700;
    color: #333;
    padding: 12px 15px;
    display: block;
    text-decoration: none;
    transition: 0.4s all;
    border-left: 0 solid var(--rc-blue);
}

/* NEUER HOVER-EFFEKT RECHTS */
.gsi-menu-wrapper ul li a:hover {
    background: rgba(0, 168, 255, 0.05);
    color: var(--rc-blue);
    padding-left: 25px;
    border-left: 5px solid var(--rc-blue);
    box-shadow: inset 10px 0 15px -10px var(--rc-blue);
}

/* --- SCANNER EFFEKT IM CONTENT --- */
.glass-main-box {
    position: relative;
    overflow: hidden; /* Wichtig für die Scanner-Linien */
}

.scanner-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rc-blue), transparent);
    opacity: 0.3;
    z-index: 10;
}

.line-up {
    top: 0;
    animation: scanUp 4s infinite linear;
}

.line-down {
    bottom: 0;
    animation: scanDown 4s infinite linear;
}

@keyframes scanUp {
    0% { top: 100%; }
    100% { top: 0%; }
}

@keyframes scanDown {
    0% { bottom: 100%; }
    100% { bottom: 0%; }
}

/* --- SLIDER CLEANUP --- */
.gaming-slider-wrapper {
    border: 6px solid #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* --- BREADCRUMB (PFAD-SÄTZE) --- */
.gsi-breadcrumb-area {
    background: rgba(15, 20, 25, 0.85);
    padding: 10px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--rc-blue);
    font-family: monospace;
}

.tech-id-label {
    color: var(--rc-blue);
    font-weight: 900;
    font-size: 11px;
}

.gsi-path ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.gsi-path li {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
}

.gsi-path li::after {
    content: " > ";
    color: var(--rc-blue);
    margin-left: 10px;
}

.gsi-path li:last-child::after {
    content: "";
}

.gsi-path a {
    color: #00d2ff;
    text-decoration: none;
    transition: 0.3s;
}

.gsi-path a:hover {
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* --- SLIDER BASE-FIX CSS --- */
.gaming-slider-wrapper {
    min-height: 350px;
    background: #000;
    border: 5px solid #fff;
    border-radius: 20px;
    overflow: hidden;
}

/* --- SLIDER STABILISIERUNG --- */
.gsi-slider-frame {
    background: #000;
    border: 5px solid #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    min-height: 300px;
}

/* --- NAVIGATION OPTIMIERUNG --- */
.main-nav {
    background: rgba(15, 20, 25, 0.95);
    border-bottom: 2px solid var(--rc-blue);
}

.main-nav .nav-links li a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    transition: 0.3s;
}

.main-nav .nav-links li a:hover {
    color: var(--rc-blue);
}

/* --- BREADCRUMB BAR (PFAD) --- */
.gsi-breadcrumb-bar {
    background: #1e272e;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 5px solid var(--rc-blue);
}

.path-label {
    color: var(--rc-blue);
    font-family: monospace;
    font-weight: 900;
    font-size: 11px;
}

.path-content ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; gap: 8px;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
}

/* --- CONTENT CLEANUP --- */
.glass-main-box {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    /* Streifen-Animationen entfernt */
    border-left: 8px solid var(--rc-blue);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* --- SCHRIFTFARBEN & BASIS --- */
body {
    color: #1a1a1a; /* Sattes Dunkelgrau für bessere Lesbarkeit */
}

.tech-id { color: var(--rc-blue); font-weight: 900; }

/* --- NAVIGATION REFINEMENT --- */
.main-nav {
    padding: 10px 0;
    background: rgba(15, 20, 25, 0.98) !important;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--rc-blue) !important;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {
    .container-xl { width: 100%; padding: 0 20px; }
    
    .rc-layout-grid, .row { 
        display: flex; 
        flex-direction: column; 
    }
    
    .col-lg-9, .col-lg-3 { 
        width: 100% !important; 
    }
    
    .glass-main-box {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .gaming-slider-wrapper {
        border-width: 3px;
        margin-top: 10px;
    }
}

/* --- FOOTER FINISH --- */
.rc-footer-modern {
    background: #0f1419;
    color: #fff;
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.footer-logo { font-size: 20px; font-weight: 900; }
.footer-logo span { color: var(--rc-blue); }

.footer-nav a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
}

.footer-nav a:hover { color: var(--rc-blue); }

.footer-status {
    font-family: monospace;
    font-size: 10px;
    color: #00ff00;
    letter-spacing: 2px;
}

/* --- TOP BAR --- */
.header-top-bar {
    background: #0a0e12;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: monospace;
}

/* --- NAVIGATION REFINEMENT --- */
.main-nav {
    background: rgba(15, 20, 25, 0.98) !important;
    padding: 5px 0;
}

/* Verhindert vertikales Stapeln in der Nav */
.navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 10px !important;
    position: relative;
    transition: 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--rc-blue) !important;
}

/* Der waagerechte Unterstrich beim Hover */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 50%;
    width: 0; height: 2px;
    background: var(--rc-blue);
    transition: 0.3s;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 70%;
}

/* PILOT LOGIN BUTTON */
.pilot-btn {
    background: transparent;
    border: 2px solid var(--rc-blue);
    color: #fff;
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.pilot-btn:hover {
    background: var(--rc-blue);
    color: #000;
    box-shadow: 0 0 15px var(--rc-blue);
}

/* --- SIDEBAR EVENT-STYLE --- */
.gsi-sidebar-box.event-style {
    background: #ffffff;
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: 0 15px 0 15px; /* "Ticket" Schnitt */
    box-shadow: 10px 10px 0px rgba(0, 168, 255, 0.05);
    transition: 0.3s ease;
}

.gsi-sidebar-box.event-style:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0px rgba(0, 168, 255, 0.1);
}

.gsi-box-header {
    background: #1a1a1a; /* Dunkler Header für Sidebar Boxen */
    color: var(--rc-blue) !important;
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 3px solid var(--rc-blue);
}

.gsi-box-header span {
    color: #fff;
    margin-right: 5px;
}

/* --- FOOTER NAVIGATION --- */
.footer-secondary-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

.footer-secondary-nav a:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #000;
}

/* --- TECH FONT --- */
.tech-font {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Sidebar Boxen */
.gsi-sidebar-box {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 168, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gsi-box-header {
    background: #0f1419;
    color: var(--rc-blue) !important;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rc-blue);
}

/* Waagerechte Navigation Fix */
.navbar-nav {
    flex-direction: row !important;
}

.navbar-nav .nav-link {
    padding: 15px 15px !important;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
}

.navbar-nav .nav-link:hover {
    color: var(--rc-blue) !important;
}
/* WAAGERECHTE NAVIGATION */
.navbar-nav {
    flex-direction: row !important; /* Erzwingt Waagerecht auf Desktop */
    gap: 10px;
}

.navbar-nav .nav-item .nav-link {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 15px !important;
    transition: 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    color: var(--rc-blue) !important;
}

/* SIDEBAR FARBANPASSUNG */
.gsi-sidebar-box {
    background: #fff; /* Boxen weiß */
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.gsi-box-header {
    background: #0f1419; /* Header Schwarz */
    color: var(--rc-blue) !important;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rc-blue);
}

.gsi-menu-wrapper ul li a {
    color: #333; /* Dunkle Schrift in weißer Sidebar */
    font-weight: 700;
    font-size: 14px;
}
/* Erzwungene horizontale Ausrichtung für das Top-Menü */
.navbar-nav {
    flex-direction: row !important;
    flex-wrap: wrap;
}

.navbar-nav .nav-link {
    padding: 15px 15px !important;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
}

/* Sidebar Styling */
.gsi-sidebar-box {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 168, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gsi-box-header {
    background: #0f1419;
    color: var(--rc-blue) !important;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rc-blue);
}
/* --- TOP MENU HORIZONTAL FIX --- */
.top-menu-list ul {
    display: flex;          /* Macht die Liste quer */
    list-style: none;       /* Entfernt die Aufzählungspunkte */
    margin: 0;
    padding: 0;
    gap: 25px;              /* Abstand zwischen den Menüpunkten */
    justify-content: center; /* Zentriert die Punkte innerhalb der mx-auto Div */
}

.top-menu-list ul li {
    display: inline-block;
}

.top-menu-list ul li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 0;
    transition: 0.3s;
    position: relative;
}

/* Hover-Gimmick: Ein feiner Strich der von der Mitte kommt */
.top-menu-list ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--rc-blue);
    transition: 0.3s;
    transform: translateX(-50%);
}

.top-menu-list ul li a:hover {
    color: var(--rc-blue);
}

.top-menu-list ul li a:hover::after {
    width: 100%;
}

/* Responsive: Auf dem Handy wieder untereinander */
@media (max-width: 991px) {
    .top-menu-list ul {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 20px 0;
    }
}
/* --- NAVIGATION QUER-FIX --- */
.top-menu-list ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.top-menu-list ul li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: 0.3s;
    position: relative;
    padding: 10px 0;
}

.top-menu-list ul li a:hover { color: var(--rc-blue); }

.top-menu-list ul li a::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    width: 0; height: 2px; background: var(--rc-blue);
    transition: 0.3s; transform: translateX(-50%);
}

.top-menu-list ul li a:hover::after { width: 100%; }

/* --- SIDEBAR REFINEMENT --- */
.gsi-sidebar-box {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 168, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gsi-box-header {
    background: #0f1419;
    color: var(--rc-blue) !important;
    padding: 12px 15px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rc-blue);
}

.gsi-menu-wrapper ul { list-style: none; padding: 0; }
.gsi-menu-wrapper ul li a {
    color: #333; font-weight: 700; display: block; padding: 8px 0;
    text-decoration: none; border-bottom: 1px solid #f0f0f0;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .top-menu-list ul { flex-direction: column; text-align: center; padding: 20px 0; }
}

/* --- LCL UHRZEIT STYLE --- */
.lcl-clock {
    background: rgba(0, 168, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* --- SIDEBAR BOXEN (DARK-LIGHT) --- */
.gsi-sidebar-box.dark-light-style {
    background: #ffffff; /* Heller Body */
    border-radius: 0 12px 0 12px;
    border: 1px solid rgba(0, 168, 255, 0.2);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.gsi-sidebar-box .gsi-box-header {
    background: #0f1419; /* Dunkler Header */
    color: var(--rc-blue) !important;
    font-size: 11px;
    font-weight: 900;
    padding: 12px;
    border-bottom: 3px solid var(--rc-blue);
    text-transform: uppercase;
}

.gsi-menu-wrapper ul li a {
    color: #333; /* Dunkle Schrift auf hellem Grund */
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
    transition: 0.2s;
}

.gsi-menu-wrapper ul li a:hover {
    color: var(--rc-blue);
    padding-left: 8px;
    background: #fafafa;
}

/* --- PATCH-NAVI (PAGINATION) FIX --- */
.pagination, .ilch-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    padding: 20px;
    background: #f8fafd;
    border-radius: 10px;
}

.pagination li a, .page-link {
    background: #fff;
    border: 1px solid var(--rc-blue);
    color: var(--rc-blue);
    font-weight: 900;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
}

.pagination li.active a, .page-item.active .page-link {
    background: var(--rc-blue);
    color: #fff;
}

/* --- HOVER REPARATUR (RUWA FIX) --- */
.top-menu-list ul li a::after {
    left: 0;
    transform: none; /* Verhindert das Verrutschen */
}

/* --- GLOW-EFFEKT FÜR BREADCRUMB & CONTENT --- */
.glow-border {
    border-left: 8px solid var(--rc-blue);
    box-shadow: -5px 0 15px rgba(0, 168, 255, 0.3); /* Dezentes blaues Leuchten nach links */
    position: relative;
}

/* Der leuchtende Breadcrumb-Balken */
.gsi-breadcrumb-bar {
    background: #0f1419; /* Tiefdunkel für maximalen Kontrast */
    padding: 12px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.path-label {
    color: var(--rc-blue);
    font-family: monospace;
    font-weight: 900;
    text-shadow: 0 0 8px var(--rc-blue); /* Text-Glow */
}

.path-content ol li a {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
}

/* --- SIDEBAR ANPASSUNG (ONLINE & BOXEN) --- */
.gsi-sidebar-box.dark-light-style {
    background: #ffffff;
    border: 1px solid rgba(0, 168, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Online-Status spezifisch hervorheben */
.gsi-sidebar-box .gsi-box-header {
    background: linear-gradient(90deg, #0f1419 0%, #1e272e 100%);
    color: var(--rc-blue) !important;
    text-shadow: 0 0 10px var(--rc-blue); /* Header leuchtet jetzt auch */
    letter-spacing: 1px;
}

/* Menüpunkte in der Sidebar */
.gsi-menu-wrapper ul li a {
    color: #2f3542;
    font-weight: 700;
    padding: 10px 5px;
    border-bottom: 1px dotted rgba(0, 168, 255, 0.1);
}

.gsi-menu-wrapper ul li a:hover {
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.05), transparent);
    color: var(--rc-blue);
    padding-left: 10px;
}
/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0f1419;
}
::-webkit-scrollbar-thumb {
    background: var(--rc-blue);
    border: 2px solid #0f1419;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #fff;
    box-shadow: 0 0 10px var(--rc-blue);
}

/* --- BREADCRUMB GLOW & BLINK --- */
.gsi-breadcrumb-bar {
    background: #0f1419;
    border-left: 5px solid var(--rc-blue);
    box-shadow: -5px 0 15px rgba(0, 168, 255, 0.4);
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.path-status-led {
    width: 8px;
    height: 8px;
    background: var(--rc-blue);
    border-radius: 50%;
    margin-right: 12px;
    animation: blinkGlow 1.5s infinite;
}

@keyframes blinkGlow {
    0% { opacity: 1; box-shadow: 0 0 2px var(--rc-blue); }
    50% { opacity: 0.3; box-shadow: 0 0 10px var(--rc-blue); }
    100% { opacity: 1; box-shadow: 0 0 2px var(--rc-blue); }
}

/* --- SIDEBAR BOXEN COLORS --- */
.dark-light-style {
    background: #fff;
    border: 1px solid rgba(0, 168, 255, 0.2);
}

.header-led {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--rc-blue);
    margin-right: 8px;
    vertical-align: middle;
}

/* --- SCHRIFTEN REFINEMENT --- */
.ilch-content-body h1, .ilch-content-body h2
 {
    font-family: 'Lexend Exa', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--gsi-dark);
    /* border-bottom: 2px solid var(--rc-blue); */
    /* display: inline-block; */
    padding-bottom: px;
    /* margin-bottom: 20px; */
}

.ilch-content-body p {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* --- SIDEBAR LED MENÜS --- */
.gsi-led-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-led-list ul li {
    position: relative;
    padding-left: 20px;
}

/* Der blaue leuchtende Punkt vor jedem Menülink */
.gsi-led-list ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--rc-blue);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--rc-blue);
}

.gsi-led-list ul li a {
    display: block;
    padding: 10px 5px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* HOVER NACH LINKS ÜBERSTEHEND */
.gsi-led-list ul li a:hover {
    color: var(--rc-blue);
    padding-left: 15px;
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.1) 0%, transparent 100%);
    margin-left: -20px; /* Schiebt den Hintergrund nach links über den Punkt */
    padding-left: 35px; /* Gleicht den Versatz aus */
}

/* --- BOX CONTAINER STYLING --- */
.gsi-dynamic-boxes .box-header {
    background: #0f1419;
    color: var(--rc-blue);
    padding: 10px;
    font-weight: 900;
    text-transform: uppercase;
    border-left: 4px solid var(--rc-blue);
    margin-bottom: 10px;
}

/* --- SIDEBAR LED-PUNKTE & ABSTÄNDE --- */
.gsi-led-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-led-list ul li {
    position: relative;
    padding-left: 30px; /* Mehr Platz nach links geschaffen */
    overflow: hidden;   /* Damit der Hover-Effekt sauber abschließt */
}

/* Die blauen Punkte - jetzt mit permanentem sanften Glühen */
.gsi-led-list ul li::before {
    content: '';
    position: absolute;
    left: 10px;        /* Punkt weiter vom Text weggerückt */
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--rc-blue);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--rc-blue); /* Sanftes Grund-Leuchten */
    z-index: 2;
}

.gsi-led-list ul li a {
    display: block;
    padding: 12px 10px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    position: relative;
    z-index: 1;
}

/* HOVER-EFFEKT: Zieht jetzt weit von links nach rechts */
.gsi-led-list ul li a:hover {
    color: var(--rc-blue);
    padding-left: 25px; /* Text rückt beim Hover leicht ein */
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.15) 0%, transparent 80%);
    margin-left: -30px; /* Der Hintergrund-Effekt startet ganz links außen */
    padding-left: 55px; /* Ausgleich für den negativen Margin */
}

/* Wenn man drüberfährt, leuchtet der Punkt stärker */
.gsi-led-list ul li:hover::before {
    box-shadow: 0 0 12px var(--rc-blue);
    background: #fff; /* Punkt wird im Kern hell beim Hover */
}

/* --- BOX CONTAINER FIX --- */
.gsi-dynamic-boxes {
    margin-top: 20px;
}

/* --- SIDEBAR REFINEMENT (Punkte weg, Hover scharf) --- */
.gsi-clean-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-clean-nav ul li {
    position: relative;
    overflow: hidden; /* Wichtig für den sauberen Hover-Abschluss */
}

/* Punkte komplett entfernt */
.gsi-clean-nav ul li::before {
    display: none !important;
}

.gsi-clean-nav ul li a {
    display: block;
    padding: 12px 20px; /* Standard-Padding links */
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    z-index: 1;
    position: relative;
}

/* HOVER-EFFEKT: Zieht jetzt weit von links rein */
.gsi-clean-nav ul li a:hover {
    color: var(--rc-blue);
    padding-left: 35px; /* Text schiebt sich dezent nach rechts */
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.12) 0%, transparent 100%);
    /* Der Effekt "überlappt" jetzt links den Box-Rand */
    margin-left: -10px; 
    padding-left: 45px;
}

/* --- FARBEN DER SIDEBAR-BOXEN --- */
.dark-light-style {
    background: #ffffff;
    border: 1px solid rgba(0, 168, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gsi-box-header {
    background: #0f1419;
    color: var(--rc-blue) !important;
    text-shadow: 0 0 8px var(--rc-blue);
    font-size: 11px;
    font-weight: 900;
    padding: 12px 15px;
    border-bottom: 3px solid var(--rc-blue);
}

/* Dynamische Ilch-Boxen Styling */
.gsi-dynamic-boxes .box {
    background: #fff;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.gsi-dynamic-boxes .box-header {
    background: #f8fafd;
    padding: 10px;
    font-weight: 900;
    border-left: 5px solid var(--rc-blue);
}/* --- SIDEBAR REFINEMENT (Punkte weg, Hover scharf) --- */
.gsi-clean-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-clean-nav ul li {
    position: relative;
    overflow: hidden; /* Wichtig für den sauberen Hover-Abschluss */
}

/* Punkte komplett entfernt */
.gsi-clean-nav ul li::before {
    display: none !important;
}

.gsi-clean-nav ul li a {
    display: block;
    padding: 12px 20px; /* Standard-Padding links */
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    z-index: 1;
    position: relative;
}

/* HOVER-EFFEKT: Zieht jetzt weit von links rein */
.gsi-clean-nav ul li a:hover {
    color: var(--rc-blue);
    padding-left: 35px; /* Text schiebt sich dezent nach rechts */
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.12) 0%, transparent 100%);
    /* Der Effekt "überlappt" jetzt links den Box-Rand */
    margin-left: -10px; 
    padding-left: 45px;
}

/* --- FARBEN DER SIDEBAR-BOXEN --- */
.dark-light-style {
    background: #ffffff;
    border: 1px solid rgba(0, 168, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gsi-box-header {
    background: #0f1419;
    color: var(--rc-blue) !important;
    text-shadow: 0 0 8px var(--rc-blue);
    font-size: 11px;
    font-weight: 900;
    padding: 12px 15px;
    border-bottom: 3px solid var(--rc-blue);
}

/* Dynamische Ilch-Boxen Styling */
.gsi-dynamic-boxes .box {
    background: #fff;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.gsi-dynamic-boxes .box-header {
    background: #f8fafd;
    padding: 10px;
    font-weight: 900;
    border-left: 5px solid var(--rc-blue);
}
/* --- GLOBAL SIDEBAR BOX OVERRIDE --- */
/* Dies betrifft alle Boxen in der Sidebar, auch die dynamischen */

.rc-sidebar-right .box, 
.gsi-sidebar-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 168, 255, 0.15) !important;
    border-radius: 0 12px 0 12px !important;
    margin-bottom: 25px !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Header für alle Boxen (Online, Statistik etc.) */
.rc-sidebar-right .box-header,
.gsi-box-header {
    background: #0f1419 !important;
    color: var(--rc-blue) !important;
    text-shadow: 0 0 8px var(--rc-blue);
    font-family: 'Lexend Exa', sans-serif;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 12px 15px !important;
    border-bottom: 3px solid var(--rc-blue) !important;
    text-transform: uppercase;
}

/* Inhalt der Boxen (z.B. die Liste der Online-User) */
.rc-sidebar-right .box-content,
.gsi-menu-wrapper {
    padding: 15px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 700;
}

/* Spezial-Fix für Listen in den Boxen (Online-Modul) */
.rc-sidebar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rc-sidebar-right ul li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

/* Dein gewünschter scharfer Hover-Effekt ohne Punkte */
.gsi-clean-nav ul li a {
    display: block;
    padding: 10px 15px;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-left: 0;
}

.gsi-clean-nav ul li a:hover {
    color: var(--rc-blue);
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.12) 0%, transparent 100%);
    margin-left: -15px; /* Schiebt den Schimmer nach links */
    padding-left: 30px; /* Hält den Text stabil */
}

/* Falls Text in Boxen (wie Statistik) weiß ist -> Fix auf Dunkel */
.box-content, .box-content span {
    color: #333 !important;
}

/* --- PAGINATION (PATCH NAVIGATION) TECH-STYLE --- */
.pagination, .ilch-pagination {
    display: flex !important;
    list-style: none;
    padding: 20px;
    margin-top: 30px;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: 0 0 15px 15px;
}

.pagination li a, 
.pagination li span,
.page-link {
    background: #fff !important;
    border: 1px solid rgba(0, 168, 255, 0.2) !important;
    color: #333 !important;
    font-family: 'Lexend Exa', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px !important;
    text-decoration: none;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    z-index: 1;
    overflow: hidden;
}

/* ANIMIERTER HOVER EFFEKT */
.pagination li a:hover,
.page-link:hover {
    color: #fff !important;
    border-color: var(--rc-blue) !important;
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.4);
    transform: translateY(-2px);
}

/* Der animierte Hintergrund-Füller beim Hover */
.pagination li a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rc-blue);
    transition: all 0.3s ease;
    z-index: -1;
}

.pagination li a:hover::before {
    top: 0;
}

/* AKTIVE SEITE */
.pagination li.active span,
.pagination li.active a,
.page-item.active .page-link {
    background: var(--rc-blue) !important;
    color: #fff !important;
    border-color: var(--rc-blue) !important;
    box-shadow: 0 0 10px var(--rc-blue);
}

/* Deaktivierte Buttons (z.B. "Zurück" wenn auf Seite 1) */
.pagination li.disabled span {
    opacity: 0.5;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    cursor: not-allowed;
}

/* --- RESPONSIVE BASICS --- */

/* Bilder passen sich immer der Breite an */
img {
    max-width: 100%;
    height: auto;
}

/* Slider-Frame auf Mobile etwas flacher */
@media (max-width: 768px) {
    .gsi-slider-frame {
        border-radius: 0;
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .top-menu-list ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* --- BOX-CONTAINER FIX FÜR BILDER --- */
.gsi-dynamic-box-wrapper img, 
.ilch-content-body img {
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Patch-Navi auf Mobile zentrieren */
@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        padding: 10px;
    }
    
    .tech-id {
        font-size: 10px;
    }
}

/* --- BASIS & SCHRIFTEN --- */
:root {
    --gsi-dark: #0f1419;
    --gsi-glass: rgba(255, 255, 255, 0.95);
    --rc-blue: #00a8ff; /* Fallback */
}

body {
    background-color: #f4f7f9;
    font-family: 'Lexend Exa', sans-serif;
    color: #333;
    overflow-x: hidden;
}

/* --- NAVIGATION --- */
.main-nav {
    background: var(--gsi-dark);
    padding: 15px 0;
    border-bottom: 3px solid var(--rc-blue);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.navbar-brand.logo {
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff !important;
}

.navbar-brand.logo span {
    color: var(--rc-blue);
}

.top-menu-list ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.top-menu-list ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: 0.3s;
}

.top-menu-list ul li a:hover {
    color: var(--rc-blue);
    text-shadow: 0 0 10px var(--rc-blue);
}

/* --- PILOT LOGIN BUTTON --- */
.pilot-btn {
    background: #1a222a;
    border: 1px solid var(--rc-blue);
    color: #fff !important;
    padding: 8px 20px;
    font-weight: 900;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}

.pilot-btn:hover {
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
}

/* --- CUSTOM SLIDER --- */
.slider-area {
    position: relative;
    height: 500px;
    background: #000;
}

.slide-item {
    height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 60%);
}

.slider-content {
    position: relative;
    z-index: 10;
}

/* --- CONTENT BOXEN --- */
.glass-main-box {
    background: var(--gsi-glass);
    border: 1px solid #e0e6ed;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.glow-border {
    border-left: 4px solid var(--rc-blue) !important;
}

.gsi-breadcrumb-bar {
    background: var(--gsi-dark);
    color: #fff;
    padding: 10px 20px;
    font-size: 11px;
}

.path-label {
    color: var(--rc-blue);
    font-weight: 900;
    margin-right: 10px;
}

/* --- SIDEBAR --- */
.gsi-sidebar-box {
    background: #fff;
    border: 1px solid #e0e6ed;
}

.gsi-box-header {
    background: var(--gsi-dark);
    color: var(--rc-blue);
    padding: 12px 15px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--rc-blue);
}

.gsi-clean-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-clean-nav ul li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.gsi-clean-nav ul li a:hover {
    background: linear-gradient(90deg, rgba(0, 168, 255, 0.1) 0%, transparent 100%);
    color: var(--rc-blue);
    padding-left: 25px;
}

/* --- TECH DETAILS --- */
.tech-id {
    font-size: 10px;
    color: #999;
    letter-spacing: 1px;
}

.lcl-clock {
    color: var(--rc-blue);
    font-weight: 900;
}

/* --- FOOTER --- */
.rc-footer-modern {
    background: var(--gsi-dark);
    color: #fff;
}

.footer-logo {
    font-weight: 900;
    font-size: 18px;
}

.footer-logo span {
    color: var(--rc-blue);
}

.neon-divider {
    height: 2px;
    background: var(--rc-blue);
    box-shadow: 0 0 10px var(--rc-blue);
}

/* --- FULL-WIDTH SLIDER REFINEMENT --- */
.slider-area {
    width: 100%;
    height: 550px; /* Hier kannst du die Höhe anpassen */
    background: #000;
    position: relative;
    border-bottom: 1px solid rgba(0, 168, 255, 0.3);
}

.slide-item {
    width: 100%;
    height: 550px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* Dunkler Verlauf von links nach rechts, damit die Schrift immer knallt */
.slide-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.slider-content {
    position: relative;
    z-index: 5;
    max-width: 800px;
}

.slider-content h2 {
    text-shadow: 0 0 20px rgba(0, 168, 255, 0.6);
    margin-bottom: 15px;
    font-weight: 900;
}

/* Animierte Trennlinie unter dem Slider */
.neon-divider-slider {
    height: 3px;
    width: 100%;
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
    position: absolute;
    bottom: 0;
    z-index: 10;
}

/* Slider-Animation (einfaches Einblenden für den Start) */
.slide-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.slide-item.active {
    opacity: 1;
}
/* --- GSI HERO VIEWPORT --- */
.gsi-hero-viewport {
    height: 600px; /* Schön tief wie am Sonntag */
    width: 100%;
    background: #000;
    position: relative;
    border-bottom: 4px solid var(--rc-blue);
}

.gsi-slide-item {
    height: 600px;
    background-size: cover;
    background-position: center;
    display: none;
}

.gsi-slide-item.active {
    display: block;
}

.gsi-overlay-tech {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 2;
}

.hero-title {
    font-weight: 900;
    font-size: 3.5rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 168, 255, 0.5);
}

.hero-divider {
    width: 100px;
    height: 5px;
    background: var(--rc-blue);
    margin: 20px 0;
}

.hero-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
}

.tech-tag {
    color: var(--rc-blue);
    font-weight: 700;
    letter-spacing: 2px;
}

.gsi-bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 168, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--rc-blue);
    font-size: 10px;
    font-weight: 900;
    z-index: 10;
}


/* --- SLIDER NAVIGATION --- */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 168, 255, 0.2);
    border: 1px solid var(--rc-blue);
    color: white;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}
.slider-nav:hover { background: var(--rc-blue); box-shadow: 0 0 15px var(--rc-blue); }
.slider-nav.prev { left: 20px; }
.slider-nav.next { right: 20px; }

/* --- ANIMIERTES SCANNING --- */
.tech-scan-line {
    position: relative;
    overflow: hidden;
}
.scanning-dots::after {
    content: '...';
    display: inline-block;
    width: 0;
    animation: dots 2s infinite;
    vertical-align: bottom;
}
@keyframes dots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}


/* --- MOBILE NAVIGATION (HAMBURGER) --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(11, 15, 19, 0.98); /* Dunkler Hintergrund für das Menü */
        backdrop-filter: blur(15px);
        margin-top: 10px;
        padding: 20px;
        border: 1px solid var(--rc-blue);
        border-radius: 8px;
    }

    .top-menu-list ul {
        flex-direction: column; /* Menüpunkte untereinander */
        gap: 10px;
        text-align: center;
    }

    .top-menu-list ul li a {
        font-size: 16px; /* Größer zum Tippen */
        padding: 10px;
        display: block;
        border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    }

    .nav-actions {
        margin-top: 20px;
    }
}

/* --- SLIDER MOBIL ANPASSUNG --- */
@media (max-width: 768px) {
    .gsi-hero-viewport {
        height: 350px !important; /* Slider auf Handy flacher machen */
    }

    .gsi-slide-item {
        height: 350px !important;
    }

    .hero-title {
        font-size: 1.8rem !important; /* Schrift kleiner, damit sie nicht bricht */
    }

    .hero-text {
        font-size: 0.9rem !important;
    }

    .slider-nav {
        display: none !important; /* Pfeile auf Mobile ausblenden (man wischt eher) */
    }
}

/* --- FOOTER MOBIL ANPASSUNG --- */
@media (max-width: 576px) {
    .footer-logo {
        font-size: 1.2rem;
    }
    
    .footer-status {
        margin: 15px 0;
    }
}
/* --- 1. FIX: HAMBURGER MENÜ (HANDY) --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(11, 15, 19, 0.98);
        backdrop-filter: blur(15px);
        border: 1px solid var(--rc-blue);
        border-radius: 4px;
        margin-top: 15px;
        padding: 20px;
    }

    .top-menu-list ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .top-menu-list ul li a {
        font-size: 14px;
        display: block;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    }

    .nav-actions {
        margin-top: 25px;
        text-align: center;
    }
}

/* --- 2. FINALE: FOOTER DESIGN --- */
.rc-footer-modern {
    background: #050709;
    border-top: 2px solid var(--rc-blue);
    position: relative;
    padding: 0; /* Padding kommt über den Container */
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.footer-logo span { color: var(--rc-blue); }

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    margin-left: 15px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--rc-blue);
    text-shadow: 0 0 5px var(--rc-blue);
}

/* --- 3. FIX: SIDEBAR NAVIGATION (RECHTS) --- */
.gsi-clean-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gsi-clean-nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gsi-clean-nav ul li:last-child { border-bottom: none; }

.gsi-clean-nav ul li a {
    display: block;
    padding: 12px 15px;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
}

.gsi-clean-nav ul li a:hover {
    color: var(--rc-blue);
    background: rgba(0, 168, 255, 0.05);
    padding-left: 20px; /* Der sanfte Einrück-Effekt */
    box-shadow: inset 3px 0 0 var(--rc-blue);
}

/* --- 4. FORUM / CONTENT ANPASSUNG --- */
.ilch-content-body table {
    width: 100% !important;
    background: rgba(255,255,255,0.02);
    border-collapse: separate;
    border-spacing: 0 5px;
}

.ilch-content-body td, .ilch-content-body th {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* --- HAMBURGER MENU FIX --- */
@media (max-width: 991px) {
    #gsiNav {
        background: rgba(10, 15, 20, 0.98);
        border: 1px solid var(--rc-blue);
        padding: 20px;
        margin-top: 10px;
        border-radius: 4px;
        backdrop-filter: blur(10px);
    }
    .top-menu-list ul { flex-direction: column; gap: 10px; text-align: center; }
}

/* --- FORUM ANPASSUNG --- */
#forum_thread_table, .table-responsive {
    border: 1px solid rgba(0, 168, 255, 0.1);
    background: rgba(255, 255, 255, 0.02) !important;
}
.ilch-content-body .table thead th {
    background: var(--rc-blue);
    color: #000;
    text-transform: uppercase;
    font-size: 11px;
}
.ilch-content-body .table td {
    vertical-align: middle;
    border-color: rgba(255, 255, 255, 0.05);
}

/* --- FOOTER CLEANUP --- */
.rc-footer-modern { border-top: 2px solid var(--rc-blue); }
.footer-logo { font-weight: 900; letter-spacing: 2px; }

/* Animation für den grünen System-Punkt (Pilot Login / Status) */
.pulse-led-green {
    width: 10px;
    height: 10px;
    background-color: #00ff00;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 10px #00ff00, 0 0 5px #fff;
    animation: led-pulse-sys 1.5s infinite;
}

@keyframes led-pulse-sys {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px #00ff00; }
    50% { transform: scale(1.2); opacity: 0.5; box-shadow: 0 0 15px #00ff00; }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px #00ff00; }
}

/* Die animierte Scan-Linie links im Content & Broadcamp */
.glow-border {
    position: relative;
    border-left: 3px solid var(--rc-blue) !important;
}

.glow-border::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #fff, var(--rc-blue), transparent);
    animation: content-scan 3s linear infinite;
    z-index: 5;
}

@keyframes content-scan {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Footer Neon-Linie mit Sweep-Effekt */
.footer-neon-line {
    height: 2px;
    width: 100%;
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.footer-neon-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: footer-flash 4s infinite;
}

@keyframes footer-flash {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Broadcamp: Blaue Schiene links, Rest bleibt weiß/hell */
.gsi-breadcrumb-bar {
    border-left: 3px solid var(--rc-blue) !important; /* Die blaue Kante */
    padding-left: 15px !important;
    display: flex;
    align-items: center;
    min-height: 48px;
}



/* Entfernt Animationen, falls noch Reste da sind */
.gsi-breadcrumb-bar::after {
    display: none !important;
    content: none !important;
}
.rc-footer-modern .footer-links a, 
.rc-footer-modern .footer-nav-links a {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: 0.3s;
}

.rc-footer-modern .footer-links a:hover {
    color: var(--rc-blue) !important;
    text-shadow: 0 0 5px var(--rc-blue);
}

.rc-footer-modern .footer-logo {
    color: #ffffff;
}

/* Der Neon-Abschluss für den Footer */
.footer-neon-line {
    height: 2px;
    width: 100%;
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
    position: relative;
    overflow: hidden;
}

.footer-neon-line::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: footer-sweep 4s infinite linear;
}

@keyframes footer-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Saubere Links im Footer */
.footer-nav-clean a, .footer-legal-clean a {
    text-decoration: none !important;
    transition: 0.3s;
}

.footer-nav-clean a:hover, .footer-legal-clean a:hover {
    color: var(--rc-blue) !important;
    text-shadow: 0 0 5px var(--rc-blue);
}

/* --- ANIMATIONEN CONTENT & STATUS (Wiederherstellung) --- */

/* Der pulsierende grüne Punkt (System Stable) */
.pulse-led-green {
    width: 10px; height: 10px;
    background-color: #00ff00;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px #00ff00;
    animation: pulse-green-sys 1.5s infinite;
}
@keyframes pulse-green-sys {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Die Scan-Linie an der blauen Seitenkante */
.glow-border::after {
    content: "";
    position: absolute;
    top: -100%; left: 0;
    width: 3px; height: 100px;
    background: linear-gradient(to bottom, transparent, #fff, var(--rc-blue), transparent);
    animation: side-scan-move 3s linear infinite;
}
@keyframes side-scan-move {
    0% { top: -100%; }
    100% { top: 200%; }
}

/* --- DER NEUE FOOTER LOOK --- */

.footer-neon-line {
    height: 2px;
    width: 100%;
    background: var(--rc-blue);
    box-shadow: 0 0 20px var(--rc-blue), 0 0 5px #fff;
    position: relative;
    overflow: hidden;
}

.footer-neon-line::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: footer-flash-sweep 4s infinite linear;
}

@keyframes footer-flash-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Footer Schriften & Links */
.footer-logo { color: #fff; font-family: 'Orbitron', sans-serif; } /* Falls Orbitron geladen ist, sonst Sans-Serif */
.footer-nav-clean a {
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: 0.3s ease;
}
.footer-nav-clean a:hover {
    color: var(--rc-blue) !important;
    text-shadow: 0 0 10px var(--rc-blue);
}

/* --- SYSTEM STATUS PUNKT OBEN --- */
.pulse-led-green {
    width: 10px;
    height: 10px;
    background-color: #00ff00;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 10px #00ff00;
    animation: led-blink-sys 1.5s infinite ease-in-out;
    vertical-align: middle;
}

@keyframes led-blink-sys {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- CONTENT SEITENLINIE SCANNER --- */
.glow-border {
    position: relative;
    border-left: 3px solid var(--rc-blue) !important;
}

.glow-border::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 3px;
    height: 120px; /* Länge des Lichtstrahls */
    background: linear-gradient(to bottom, transparent, #fff, var(--rc-blue), transparent);
    animation: scan-line-run 3.5s linear infinite;
    z-index: 10;
}

@keyframes scan-line-run {
    0% { top: -100%; }
    100% { top: 250%; } /* Läuft weit genug durch */
}

/* Den wandernden Streifen komplett entfernen */
.glow-border::after, 
.gsi-breadcrumb-bar::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* Dafür das saubere Aufblinken der linken Kante (wie du es wolltest) */
.glow-border, 
.gsi-breadcrumb-bar {
    position: relative;
    border-left: 3px solid var(--rc-blue) !important;
    /* Das rhythmische Leuchten */
    animation: edge-glow-pulse 4s ease-in-out infinite;
}

@keyframes edge-glow-pulse {
    0%, 100% { 
        border-left-color: var(--rc-blue); 
        filter: drop-shadow(-2px 0 5px rgba(0, 168, 255, 0.3)); 
    }
    50% { 
        border-left-color: #ffffff; 
        filter: drop-shadow(-4px 0 10px rgba(0, 168, 255, 0.6)); 
    }
}


/* ERZWUNGENES AUFBLINKEN DER LINKEN KANTE */
.glow-border, 
.gsi-breadcrumb-bar {
    position: relative !important;
    border-left: 4px solid var(--rc-blue) !important;
    /* Animation wird hier fest zugewiesen */
    animation: side-blink-final 4s ease-in-out infinite !important;
    transition: all 0.3s ease;
}

@keyframes side-blink-final {
    0%, 100% { 
        border-left-color: var(--rc-blue) !important; 
        box-shadow: -4px 0 10px rgba(0, 168, 255, 0.3);
    }
    50% { 
        border-left-color: #ffffff !important; 
        box-shadow: -6px 0 20px rgba(0, 168, 255, 0.6);
    }
}

/* Sicherstellen, dass keine Streifen mehr da sind */
.glow-border::after, 
.gsi-breadcrumb-bar::after {
    display: none !important;
    content: none !important;
}

/* 1. BROAD_CAMP & CONTENT FARBLICH ANGLEICHEN */
.gsi-breadcrumb-bar, 
.glow-border {
    border-left: 4px solid var(--rc-blue) !important; /* Exakt gleiches Blau */
    box-shadow: -3px 0 10px rgba(0, 168, 255, 0.4); /* Fester Glow ohne Blinken */
    position: relative;
}

/* 3. ALLE ANIMATIONS-RESTE RAUS */
.glow-border::after, 
.gsi-breadcrumb-bar::after, 
.footer-neon-line::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* --- RC HUBISCHRAUBER PRELOADER --- */
#rc-preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #050a0f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.heli-wrapper {
    position: relative;
    padding: 20px;
}

.heli-image {
    width: 180px; /* Größe anpassen */
    height: auto;
    filter: drop-shadow(0 0 15px var(--rc-blue));
    /* Sanftes Schweben wie im echten Flug */
    animation: heli-hover 2s ease-in-out infinite;
}

/* Der Scanner-Effekt, der über den Heli läuft */
.heli-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
    opacity: 0.7;
    animation: heli-scan 2.5s linear infinite;
}

@keyframes heli-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes heli-scan {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Ladebalken unten drunter */
.loader-bar-container {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin-top: 15px;
    overflow: hidden;
}

.loader-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--rc-blue);
    box-shadow: 0 0 10px var(--rc-blue);
    animation: bar-fill 3s ease-in-out forwards;
}

@keyframes bar-fill {
    0% { width: 0%; }
    100% { width: 100%; }
}

#rc-preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #050a0f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.heli-image {
    width: 280px;
    height: auto;
    filter: drop-shadow(0 0 15px var(--rc-blue));
    /* Sanftes Schweben */
    animation: heli-hover 2.5s ease-in-out infinite;
}

@keyframes heli-hover {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

.heli-scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--rc-blue);
    box-shadow: 0 0 15px var(--rc-blue);
    animation: heli-scan 2s linear infinite;
}

@keyframes heli-scan {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.loader-text {
    color: #fff;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    font-size: 12px;
    margin-top: 20px;
}

/* --- FORUM SYSTEM LOOK --- */

/* Tabellenköpfe (Themen, Beiträge, Letzter Beitrag) */
.forum-table thead th, 
.forum-index-thead {
    background: rgba(0, 168, 255, 0.1) !important;
    border-bottom: 2px solid var(--rc-blue) !important;
    color: var(--rc-blue) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

/* Foren-Zeilen (Die einzelnen Kategorien) */
.forum-table tbody tr {
    background: rgba(10, 15, 20, 0.6) !important;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1) !important;
    transition: all 0.3s ease;
}

/* Hover-Effekt: Die Zeile soll beim Drüberfahren blau "glimmen" */
.forum-table tbody tr:hover {
    background: rgba(0, 168, 255, 0.08) !important;
    box-shadow: inset 5px 0 0 var(--rc-blue);
}

/* Links im Forum (Thementitel) */
.forum-table a {
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
}

.forum-table a:hover {
    color: var(--rc-blue) !important;
}

/* Icons im Forum (Neu/Alt) */
.forum-icon {
    filter: drop-shadow(0 0 5px var(--rc-blue));
    color: var(--rc-blue) !important;
}
/* --- ARTIKEL BILDER RADIKALER FIX --- */

/* Wir sprechen gezielt die Bilder im Main-Content an */
.main-content img, 
article img, 
.article-index-img img,
[class*="article"] img {
    border: 1px solid rgba(0, 168, 255, 0.2) !important;
    padding: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Der Blau-Glüh-Effekt beim Hovern */
.main-content img:hover, 
article img:hover, 
.article-index-img img:hover,
[class*="article"] img:hover {
    border-color: var(--rc-blue) !important;
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.6) !important;
    filter: brightness(1.1) !important;
    transform: scale(1.03) translateY(-3px) !important; /* Bild hebt sich leicht ab */
    cursor: pointer !important;
}
/* --- GSI BILDER: DYNAMISCHER TECH-GLOW --- */

.gsi-dynamic-box-wrapper img, 
.ilch-content-body img {
    border-radius: 5px;
    /* Ein sehr dezenter Schatten als Basis */
    box-shadow: 0 2px 8px rgba(28, 181, 255, 0.2);
    border: 1px solid rgba(28, 181, 255, 0.1);
    transition: all 0.4s ease-in-out !important;
}

/* Der Effekt beim Drüberfahren */
.gsi-dynamic-box-wrapper img:hover, 
.ilch-content-body img:hover {
    /* Jetzt zündet der volle blaue Glow */
    box-shadow: 0 0 20px rgb(28, 181, 255), 0 0 40px rgba(28, 181, 255, 0.4);
    border-color: rgb(28, 181, 255);
    transform: translateY(-3px); /* Hebt das Bild leicht an */
    filter: brightness(1.05);
    cursor: pointer;
}
/* Nur wenn du willst, dass es NOCH technischer wirkt */
.ilch-content-body img:hover {
    filter: brightness(1.1) contrast(1.1) !important; /* Macht die Farben knackiger */
}

/* --- FOOTER COPYRIGHT STYLE --- */
.footer-copyright-section {
    margin-top: 30px;
    text-align: center;
    font-family: 'Courier New', monospace; /* Technischer Look */
    letter-spacing: 1px;
}

.footer-line-divider {
    height: 1px;
    width: 60px;
    background: var(--rc-blue);
    margin: 0 auto 15px auto;
    box-shadow: 0 0 8px var(--rc-blue);
    opacity: 0.5;
}

.copyright-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.brand-white { color: #fff; font-weight: bold; }
.brand-blue { color: var(--rc-blue); font-weight: bold; }

.system-status {
    color: var(--rc-blue);
    font-size: 0.65rem;
    margin-left: 10px;
    opacity: 0.8;
}

.design-credit {
    margin-top: 8px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.designer-name {
    color: rgba(255, 255, 255, 0.5);
}

/* --- FOOTER COPYRIGHT: POSITIONIERUNG & ABSTAND --- */

.footer-copyright-section {
    margin-top: 50px;       /* Mehr Abstand zum restlichen Footer-Inhalt */
    padding-bottom: 40px;    /* Schiebt den Text vom unteren Bildschirmrand weg */
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    border-top: 1px solid rgba(0, 168, 255, 0.1); /* Eine ganz feine Trennlinie */
    padding-top: 30px;
}

/* Der Divider-Strich: Machen wir ihn etwas breiter für mehr Balance */
.footer-line-divider {
    height: 1px;
    width: 100px;
    background: linear-gradient(90deg, transparent, var(--rc-blue), transparent);
    margin: 0 auto 20px auto;
    box-shadow: 0 0 10px var(--rc-blue);
}

.copyright-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}
/* Slider-Buttons wieder sichtbar machen */
.carousel-control-prev,
.carousel-control-next,
.slider-backramp, 
.slider-buttons {
    z-index: 100 !important; /* Sicherstellen, dass sie über dem Content liegen */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Falls die Buttons blau glühen sollen, passend zum Design: */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 5px var(--rc-blue)) sepia(100%) saturate(500%) hue-rotate(170deg);
}

#rc-preloader {
    /* ... dein bisheriges CSS ... */
    pointer-events: none; /* Das ist der Zauberbefehl: Klicks gehen einfach durch den Preloader durch! */
}

/* Slider-Buttons erzwingen */
.carousel-control-prev, 
.carousel-control-next, 
.slider-nav, 
.tp-rightarrow, 
.tp-leftarrow {
    z-index: 9999 !important; /* Über alles andere heben */
    pointer-events: auto !important; /* Sicherstellen, dass sie Klicks annehmen */
    cursor: pointer !important;
}

/* Falls die Buttons unsichtbar sind, machen wir sie hier wieder hell */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    display: block !important;
    width: 30px;
    height: 30px;
}
/* Slider-Ebene erzwingen */
#slider, .carousel, .slider-wrapper {
    position: relative !important;
    z-index: 10 !important; /* Über den Hintergrund heben */
    display: block !important;
}

/* Buttons absolut in den Vordergrund */
.carousel-control-prev, 
.carousel-control-next {
    z-index: 999 !important; 
    opacity: 1 !important;
    cursor: pointer !important;
    width: 10% !important; /* Bereich vergrößern, damit man ihn trifft */
}

/* Falls die Icons weiß auf weiß sind oder fehlen, hier erzwingen */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    filter: drop-shadow(0 0 5px var(--rc-blue)) !important;
    background-color: rgba(0, 168, 255, 0.3) !important; /* Leichter blauer Hintergrund */
    border-radius: 50%;
    padding: 20px;
}
/* --- ULTIMATIVER SLIDER FIX --- */

/* Wir sprechen alle gängigen Slider-Klassen an */
#slider, .carousel, .slider-wrapper, .carousel-inner {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important; /* Verhindert, dass AOS den Slider wegbeugt */
}

.carousel-item {
    display: none; /* Standard Bootstrap */
}

.carousel-item.active {
    display: block !important; /* Sicherstellen, dass das aktive Bild da ist */
}

/* Die Buttons MÜSSEN klickbar sein */
.carousel-control-prev, 
.carousel-control-next {
    pointer-events: auto !important;
    z-index: 1000 !important;
    background: none !important; /* Falls ein Overlay drüber liegt */
}
/* --- ADMIN-SLIDER BILDER FIX --- */

/* Wir sprechen die Items an, die deine PHP-Schleife ausgibt */
.gsi-slide-item, 
.carousel-item {
    /* WICHTIG: Damit das Bild aus dem Admin-Pfad den Raum füllt */
    background-size: cover !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Hier definierst du, wie hoch der Slider sein soll */
    height: 500px !important; 
    width: 100% !important;
    
    /* Ein leichter Glow-Effekt für den Übergang */
    border-bottom: 2px solid var(--rc-blue);
    box-shadow: inset 0 -20px 50px rgba(0, 0, 0, 0.8);
}

/* Falls du ein Overlay über den Bildern hast */
.gsi-overlay-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    z-index: 2;
}/* --- ADMIN-SLIDER BILDER FIX --- */

/* Wir sprechen die Items an, die deine PHP-Schleife ausgibt */
.gsi-slide-item, 
.carousel-item {
    /* WICHTIG: Damit das Bild aus dem Admin-Pfad den Raum füllt */
    background-size: cover !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Hier definierst du, wie hoch der Slider sein soll */
    height: 500px !important; 
    width: 100% !important;
    
    /* Ein leichter Glow-Effekt für den Übergang */
    border-bottom: 2px solid var(--rc-blue);
    box-shadow: inset 0 -20px 50px rgba(0, 0, 0, 0.8);
}

/* Falls du ein Overlay über den Bildern hast */
.gsi-overlay-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    z-index: 2;
}

/* --- GSI SLIDER FULL-WIDTH & RESOLUTION --- */

/* Der Haupt-Container des Sliders */
#gsiMainSlider {
    width: 100% !important;
    height: 450px; /* Hier kannst du die Höhe anpassen */
    overflow: hidden;
    position: relative;
}

/* Die einzelnen Slide-Items */
.gsi-slide-item, 
.carousel-item {
    height: 450px !important; /* Muss die gleiche Höhe wie oben sein */
    width: 100% !important;
    background-size: cover !important;      /* Das Bild füllt ALLES aus */
    background-position: center !important;  /* Bild bleibt zentriert */
    background-repeat: no-repeat !important;
    transition: transform 0.6s ease-in-out;  /* Sanfter Übergang */
}

/* Fix für die Bootstrap-Struktur */
.carousel-inner {
    height: 100% !important;
    width: 100% !important;
}

/* --- GSI SLIDER FULL-WIDTH FIX --- */

.gsi-hero-viewport {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#gsiMainSlider, 
.gsi-custom-slider {
    width: 100% !important;
    height: 450px !important; /* Hier die Höhe festlegen */
}

.carousel-inner, 
.gsi-slide-item, 
.carousel-item {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;      /* Bild füllt alles aus */
    background-position: center !important;  /* Bild bleibt mittig */
    background-repeat: no-repeat !important;
}
/* --- GSI SLIDER REPARATUR --- */

.gsi-hero-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

#gsiMainSlider {
    width: 100% !important;
    height: 450px !important; /* Festgelegte Höhe für die Stabilität */
    background: #000;
}

/* Der wichtigste Teil für die Bilder */
.carousel-item {
    height: 450px !important;
    width: 100% !important;
    background-size: cover !important;     /* Bild füllt den Raum */
    background-position: center !important; /* Bild bleibt mittig */
    background-repeat: no-repeat !important;
}

/* Die Pfeile wieder ordentlich positionieren */
.carousel-control-prev, 
.carousel-control-next {
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}

/* --- GSI BOTTOM BAR POSITIONIERUNG --- */

.gsi-hero-viewport {
    position: relative; /* Das ist der Anker für die Bar */
}

.gsi-bottom-bar {
    position: absolute; /* Die Bar schwebt jetzt */
    bottom: 0;          /* Direkt an die Unterkante des Sliders */
    left: 0;
    width: 100%;
    z-index: 20;        /* Höher als die Bilder (z-index 10) */
    background: rgba(5, 10, 15, 0.8); /* Leicht transparent für den Tech-Look */
    backdrop-filter: blur(5px);       /* Macht den Hintergrund unter der Bar leicht unscharf */
    border-top: 1px solid var(--rc-blue);
    height: 40px;
}

/* Der Text-Effekt in der Bar */
.tech-scan-line {
    font-family: 'Courier New', monospace;
    color: var(--rc-blue);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pulse-text 2s infinite ease-in-out;
}

@keyframes pulse-text {
    0% { opacity: 0.5; }
    50% { opacity: 1; text-shadow: 0 0 10px var(--rc-blue); }
    100% { opacity: 0.5; }
}

/* --- SLIDER FLÄCHEN-FIX (500px) --- */

.gsi-hero-viewport {
    height: 500px !important; /* Hier die 500px aus deinem Admin */
    width: 100%;
    position: relative;
    overflow: hidden;
}

#gsiMainSlider, 
.carousel-inner, 
.carousel-item {
    height: 100% !important; /* Nimmt die 500px der Section an */
    width: 100% !important;
}

.carousel-item {
    /* Das Bild wird auf die 500px Fläche skaliert */
    background-size: cover !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Die Scanning-Bar unten am Rand der 500px festtackern */
.gsi-bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

/* --- GSI SLIDER: FINAL AREA & RESOLUTION FIX --- */

/* 1. Die äußere Sektion auf die Admin-Höhe zwingen */
.gsi-hero-viewport {
    height: 500px !important; /* Entspricht deiner Admin-Einstellung */
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

/* 2. Den Slider-Container und die Items auf 100% der Sektion strecken */
#gsiMainSlider, 
.carousel-inner, 
.carousel-item {
    height: 100% !important;
    width: 100% !important;
}

/* 3. Das Hintergrundbild vollflächig ausrollen */
.carousel-item {
    background-size: cover !important;      /* Bild füllt die 500px komplett aus */
    background-position: center center !important; /* Fokus auf die Bildmitte */
    background-repeat: no-repeat !important;
}

/* 4. Die Scanning-Bar am unteren Rand der 500px fixieren */
.gsi-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: rgba(5, 10, 15, 0.85);
    border-top: 1px solid var(--rc-blue);
}


.gsi-hero-viewport, 
#gsiMainSlider, 
.carousel-item {
    height: var(--slider-h) !important; /* Nutzt den Wert aus dem Admin */
    width: 100%;
}

.carousel-item {
    background-size: cover !important;      /* Zwingt das Bild, die Fläche zu füllen */
    background-position: center !important;
    background-repeat: no-repeat !important;
}



/* --- GSI SYSTEM: DYNAMISCHER SLIDER-REACH --- */

.gsi-hero-viewport, 
#gsiMainSlider, 
.carousel-inner,
.carousel-item {
    /* Hier greift deine Variable aus der index.php */
    height: var(--slider-h, 500px) !important; 
    width: 100% !important;
    position: relative;
}

.carousel-item {
    /* Das Bild füllt die Fläche (500px/800px) komplett aus */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Optional: Ein leichter Zoom-Effekt beim Bildwechsel */
    transition: transform 0.6s ease-in-out;
}

/* Die Scanning-Bar am Boden der dynamischen Höhe */
.gsi-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 30; /* Über den Bildern und Inhalten */
    background: rgba(15, 20, 25, 0.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rc-blue);
    display: flex;
    align-items: center;
}

.slider-content-box {
    padding: 40px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    border-left: 5px solid var(--rc-blue);
    /* Vertikale Zentrierung innerhalb der 500px */
    margin-top: auto;
    margin-bottom: auto;
}

/* --- SLIDER TEXT BOX (TECH-GLASS) --- */
.slider-content-box {
    background: rgba(15, 20, 25, 0.7); /* Dunkel und transparent */
    backdrop-filter: blur(8px);        /* Macht das Bild dahinter unscharf - sehr edel! */
    padding: 30px;
    border-left: 5px solid var(--rc-blue);
    border-right: 1px solid rgba(0, 168, 255, 0.2);
    max-width: 600px;
    
    /* Der technische Ecken-Schnitt (passend zum Rest) */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 5% 100%, 0% 90%);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Erinnert Bootstrap daran, dass die Controls 100% hoch sein müssen, 
   damit 'align-items: center' die Icons in die Mitte schieben kann */
.gsi-custom-slider .carousel-control-prev,
.gsi-custom-slider .carousel-control-next {
    height: 100%;
    display: flex;
    align-items: center; /* Das drückt das Icon in die vertikale Mitte */
    top: 0;
}

/* Falls die Icons selbst verschoben wurden */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    margin-top: auto;
    margin-bottom: auto;
}