/*
Theme Name: Nerdistan Custom Theme
Author: Nerdistan Team
Description: Custom Bootstrap Theme für Nerdistan.tv
Version: 1.0
*/

/* Hier später dein Custom CSS rein */
body {
    background-color: #000; /* Nerdistan Dark Mode default */
    color: #fff;
}

/* Team Card Styling */
.team-card {
    border: 1px solid #444; /* Dunkler Rahmen passend zum Darkmode */
    background-color: #000;
    height: 100%;
    padding: 15px;
    transition: transform 0.2s;
}

.team-card:hover {
    border-color: #fff; /* Rahmen wird weiß beim Drüberfahren */
}

/* Quadratisches Bild */
.team-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Erzwingt Quadrat */
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #333;
}

.team-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt das Quadrat, ohne zu verzerren */
    filter: grayscale(100%); /* Optional: Schwarz-Weiß wie oft im Style */
    transition: filter 0.3s;
}

.team-card:hover .team-image-wrapper img {
    filter: grayscale(0%); /* Farbe kommt zurück bei Hover */
}

/* Die Progress Bars */
.nerd-progress {
    height: 4px; /* Sehr dünne Linie wie im Screenshot */
    background-color: #333; /* Hintergrund der Leiste dunkelgrau */
    border-radius: 0;
    margin-top: 5px;
    margin-bottom: 15px;
}

.nerd-progress-bar {
    background-color: #fff; /* Füllung weiß */
    height: 100%;
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */
   body.light-mode {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Hintergrundfarben umkehren */
body.light-mode .bg-black,
body.light-mode .bg-dark {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Texte umkehren */
body.light-mode .text-white {
    color: #000000 !important;
}
body.light-mode .text-white-50 {
    color: #666666 !important;
}
body.light-mode .text-secondary {
    color: #555555 !important;
}

/* Buttons und Rahmen anpassen */
body.light-mode .btn-outline-light {
    color: #000;
    border-color: #000;
}
body.light-mode .btn-outline-light:hover {
    background-color: #000;
    color: #fff;
}
body.light-mode .border-secondary {
    border-color: #ddd !important;
}

/* Spezielles Styling für die Team Cards im Light Mode */
body.light-mode .team-card {
    background-color: #f8f9fa; /* Ganz helles Grau */
    border-color: #ccc;
    color: #000;
}
body.light-mode .team-card:hover {
    border-color: #000;
}
body.light-mode .nerd-progress {
    background-color: #e9ecef;
}
body.light-mode .nerd-progress-bar {
    background-color: #000; /* Schwarze Balken im Light Mode */
}

/* =========================================
   HERO DESIGN V7.1 (Larger GIFs, No Crop)
   ========================================= */

   .hero-section-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    /* Wichtig: Verhindert, dass die riesigen GIFs den Browser-Scrollbalken erzeugen */
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- LOGO ZENTRIERUNG --- */
.logo-center-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%; 
    max-width: 500px;
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg-logo-img {
    width: 100%;
    height: auto;
    opacity: 0.4;
    display: block;
}


/* --- SPALTEN LAYOUT --- */
.hero-columns-container {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 2vw; 
    padding: 0 5vw;
}

.hero-col-item {
    position: relative;
    width: 28%;
    height: 70vh;
    text-decoration: none;
    will-change: transform; 
    /* TRICK: Visible lässt das GIF über den Rand hinaus */
    overflow: visible; 
    transition: z-index 0s;
}

/* WICHTIG: Wenn Maus drauf, Spalte ganz nach vorne holen! */
.hero-col-item:hover {
    z-index: 100;
}


/* Bouncing Animation Wrapper */
.hero-floater {
    width: 100%;
    height: 100%;
    position: relative;
    animation: floatY 6s ease-in-out infinite;
}


/* --- BILDER STAPEL (STACKING) --- */
.hero-img-pack {
    position: relative;
    width: 100%;
    height: 100%;
}

.panel-img, .gif-overlay {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

/* Layer 1: Das Hintergrund GIF (Frei schwebend) */
.gif-overlay {
    object-fit: contain; 
    /* HIER GEÄNDERT: Von 140% auf 180% erhöht */
    width: 180%; 
    height: 180%;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
}

/* Layer 2: Standard Bild (Mitte) */
.img-standard {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    opacity: 1; 
}

/* Layer 3: Mouse-Over Bild (Ganz vorne) */
.img-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    opacity: 0; 
}


/* --- INTERAKTIONEN (HOVER) --- */

.hero-col-item:hover .img-hover {
    opacity: 1;
}

.hero-col-item:hover .gif-overlay {
    opacity: 1;
}


/* --- ANIMATIONEN --- */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.col-1 .hero-floater { animation-duration: 7s; animation-delay: 0s; }
.col-2 .hero-floater { animation-duration: 5s; animation-delay: 1s; }
.col-3 .hero-floater { animation-duration: 6s; animation-delay: 2s; }


/* --- MOBILE FIXES --- */
@media (max-width: 991px) {
    .hero-columns-container {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 120px; 
        gap: 0;
    }
    
    .logo-center-wrapper {
        width: 70%;
        top: 15%; 
        transform: translate(-50%, 0);
    }
    
    .hero-col-item {
        width: 100%;
        height: 33vh;
        border-bottom: 1px solid #222;
        /* Auf Mobile MÜSSEN wir abschneiden, sonst Layout-Chaos */
        overflow: hidden; 
    }
    
    .hero-floater { animation: none; } 
    .img-hover, .gif-overlay { display: none !important; }
    .img-standard { opacity: 1 !important; }
}

/* =========================================
   CASES FOLDER DESIGN (Akten-Look)
   ========================================= */

   .cases-section-wrapper {
    /* Sorgt für etwas Abstand, damit die Tabs Platz haben */
    padding-top: 30px; 
 }
 
 /* Der Wrapper für eine einzelne Akte */
 .case-folder-wrapper {
     position: relative;
     margin-top: 20px; /* Platz für den Tab oben */
     height: 100%; /* Damit alle gleich hoch sind */
     display: flex;
     flex-direction: column;
 }
 
 
 /* --- DER TAB (REITER) OBEN --- */
 .case-folder-tab {
     position: absolute;
     top: -28px; /* Schiebt den Tab nach oben raus */
     left: 0;
     background-color: #000;
     /* Dicker weißer Rahmen */
     border: 2px solid #fff;
     /* Unten offen, damit er mit dem Körper verschmilzt */
     border-bottom: none; 
     padding: 5px 15px;
     /* Nur so breit wie der Text */
     width: auto;
     max-width: 85%;
     z-index: 1; /* Liegt hinter dem Hauptkörper-Rahmen */
     
     /* Optional: Eine kleine Ecke oben links abrunden für den Akten-Look */
     border-top-left-radius: 8px;
 }
 
 .case-folder-tab h5 {
     margin: 0;
     font-weight: bold;
     letter-spacing: 1px;
     font-size: 1rem;
 }
 
 
 /* --- DER HAUPTKÖRPER --- */
 .case-folder-body {
     background-color: #000;
     /* Der dicke Hauptrahmen */
     border: 2px solid #fff;
     padding: 20px;
     position: relative;
     z-index: 2; /* Liegt vor dem unteren Teil des Tabs */
     flex-grow: 1; /* Füllt die Höhe */
     display: flex;
     flex-direction: column;
 }
 
 
 /* --- VIDEO BEREICH --- */
 .case-video-frame {
     border: 2px solid #333; /* Innerer Rahmen fürs Video */
     margin-bottom: 20px;
     background: #000;
 }
 
 
 /* --- BESCHREIBUNG & LINIEN (Team-Style) --- */
 .case-info-box {
     margin-top: auto; /* Schiebt diesen Bereich nach unten */
 }
 
 .case-divider-line {
     height: 2px;
     background-color: #fff;
     width: 50px; /* Kurze Linie wie beim Team */
     margin: 10px 0;
 }
 
 .case-desc-text {
     font-size: 0.9rem;
     color: #ccc;
     line-height: 1.4;
 }
 
 /* Button unten anpassen */
 .case-folder-body .btn {
     border-width: 2px;
     font-weight: bold;
     margin-top: 20px;
 }
 .case-folder-body .btn:hover {
     background: #fff;
     color: #000;
 }
 
 /* --- MOBILE ANPASSUNG --- */
 @media (max-width: 768px) {
     .case-folder-wrapper {
          /* Auf Mobile mehr Abstand zwischen den Akten */
         margin-bottom: 40px;
     }
 }