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

/* =========================================
   GLOBAL TYPOGRAPHY
   ========================================= */

/* Custom Font: DekoDisplay für Headlines/Nav */
@font-face {
    font-family: 'DekoDisplay';
    src: url('assets/dekodisplay-serial-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Body/Text: Libre Franklin */
body {
    background-color: #131C02; /* Nerdistan Dark Mode default */
    color: #B9D49C;
    font-family: 'Libre Franklin', sans-serif;
}

/* Headlines: DekoDisplay */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DekoDisplay', sans-serif;
}

/* =========================================
   DARK MODE OVERRIDES (Bootstrap & Custom)
   ========================================= */

/* Bootstrap bg-black Override für Dark Mode */
.bg-black {
    background-color: #131C02 !important;
}

.bg-dark {
    background-color: #131C02 !important;
}

/* =========================================
   NERDISTAN HEADER (Nicht-Fix, Zentrierter Text)
   ========================================= */
.nerdistan-header {
    width: 100%;
    padding: 12px 0;
    background-color: #131C02;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nerdistan-header a,
.nerdistan-header a:link,
.nerdistan-header a:visited,
.nerdistan-header a:hover,
.nerdistan-header a:active,
.nerdistan-header .nerdistan-header-link,
.nerdistan-header .nerdistan-header-link:link,
.nerdistan-header .nerdistan-header-link:visited,
.nerdistan-header .nerdistan-header-link:hover,
.nerdistan-header .nerdistan-header-link:active,
a.nerdistan-header-link,
a.nerdistan-header-link:link,
a.nerdistan-header-link:visited,
a.nerdistan-header-link:hover,
a.nerdistan-header-link:active {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nerdistan-header-link h1 {
    color: #B9D49C;
}

body.light-mode .nerdistan-header-link h1 {
    color: #000;
}

.nerdistan-header-text {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #B9D49C;
    margin: 0;
    text-align: center;
    font-weight: normal;
}

/* Light Mode für Header */
body.light-mode .nerdistan-header {
    background-color: #f5f5f5;
}

body.light-mode .nerdistan-header-text {
    color: #000;
}

/* Bootstrap Text Utilities für Dark Mode */
.text-white {
    color: #B9D49C !important;
}

.text-white-50 {
    color: rgba(185,212,156,0.5) !important;
}

.text-secondary {
    color: #7a9a5c !important;
}

/* Bootstrap Button Override für Dark Mode */
.btn-outline-light {
    color: #B9D49C;
    border-color: #B9D49C;
}

.btn-outline-light:hover {
    background-color: #B9D49C;
    color: #131C02;
    border-color: #B9D49C;
}

/* Button Light (Contact Section) - Dark Mode */
.btn-light {
    background-color: #B9D49C;
    border-color: #B9D49C;
    color: #131C02;
}

.btn-light:hover {
    background-color: #9ab87e;
    border-color: #9ab87e;
    color: #131C02;
}

/* Button Light - Light Mode (Standard Bootstrap Farben) */
body.light-mode .btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #000;
}

body.light-mode .btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #000;
}

/* Bootstrap Border Override für Dark Mode */
.border-secondary {
    border-color: #4a5a3a !important;
}

/* Team Subtitle */
.team-subtitle {
    color: #7a9a5c !important;
}

/* Cases Subtitle */
.cases-subtitle {
    color: #7a9a5c !important;
}

/* Text muted für Dark Mode */
.text-muted {
    color: #6a8a4c !important;
}

/* =========================================
   TEAM SECTION - 7 Spalten Grid (kompakt)
   ========================================= */

/* Custom Grid für 7 Spalten - immer 7 ab 1200px */
.team-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 170px));
    gap: 12px;
    justify-content: center;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(7, minmax(0, 145px));
        gap: 10px;
    }
}

@media (max-width: 1050px) {
    .team-grid {
        grid-template-columns: repeat(4, minmax(0, 170px));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 540px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Team Card Styling - Kompakt */
.team-card {
    border: 2px solid #4a5a3a; /* Dickerer Rahmen wie beim Partner-Grid */
    background-color: #131C02;
    height: 100%;
    padding: 10px;
    transition: transform 0.2s;
}

.team-card:hover {
    border-color: #B9D49C;
}

/* Quadratisches Bild */
.team-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    overflow: hidden;
    border: 2px solid #4a5a3a; /* Dickerer Rahmen wie beim Partner-Grid */
}

.team-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.team-card:hover .team-image-wrapper img {
    filter: grayscale(0%);
}

/* Die Progress Bars - kompakter */
.nerd-progress {
    height: 2px;
    background-color: #2a3a1a;
    border-radius: 0;
    margin-top: 3px;
    margin-bottom: 6px;
}

.nerd-progress-bar {
    background-color: #B9D49C;
    height: 100%;
}

/* Kompakte Schriftgrößen */
.team-card h5 {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    padding-bottom: 0.3rem;
}

.team-card .small,
.team-card .text-uppercase.small {
    font-size: 0.6rem;
}

.team-card .text-secondary {
    font-size: 0.65rem;
    margin-bottom: 0.4rem !important;
}

/* Team Section Subtitle - passend zu "Our Cases" */
.team-subtitle {
    font-family: 'Libre Franklin', sans-serif;
    color: #888;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 400;
}

.team-card .skill-item span {
    font-size: 0.55rem;
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */
   body.light-mode {
    background-color: #f5f5f5 !important; /* Gleiches Grau wie Hero */
    color: #000000 !important;
}

/* Hintergrundfarben umkehren */
body.light-mode .bg-black,
body.light-mode .bg-dark {
    background-color: #f5f5f5 !important; /* Gleiches Grau wie Hero */
    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: #f5f5f5; /* Gleiches Grau wie Hintergrund */
    border: 2px solid #000;
    color: #000;
}
body.light-mode .team-card:hover {
    border-color: #000;
}
body.light-mode .team-image-wrapper {
    border: 2px solid #000; /* Schwarzer dicker Rahmen im Light Mode */
}
body.light-mode .team-subtitle {
    color: #666 !important;
}
body.light-mode .cases-subtitle {
    color: #666 !important;
}
body.light-mode .nerd-progress {
    background-color: #e9ecef;
}
body.light-mode .nerd-progress-bar {
    background-color: #000; /* Schwarze Balken im Light Mode */
}


/* =========================================
   HERO SECTION LIGHT MODE FIX
   ========================================= */
body.light-mode .hero-section-wrapper {
    background-color: #f5f5f5 !important; /* Helles Grau statt Schwarz */
}

/* Hero Logo: Dark/Light Mode Switching (wie bei Partner-Logos) */
.hero-bg-logo-img.logo-dark {
    display: block;
}
.hero-bg-logo-img.logo-light {
    display: none;
}

body.light-mode .hero-bg-logo-img.logo-dark {
    display: none;
}
body.light-mode .hero-bg-logo-img.logo-light {
    display: block;
}

/* =========================================
   CASES SECTION LIGHT MODE FIX
   ========================================= */
body.light-mode .case-folder-tab {
    background-color: #f5f5f5 !important;
    border-left-color: #000 !important;
    border-top-color: #000 !important;
}

body.light-mode .case-folder-tab::after {
    background-color: #f5f5f5 !important;
    border-top-color: #000 !important;
    border-right-color: #000 !important;
}

body.light-mode .case-folder-tab::before {
    background-color: #f5f5f5 !important;
}

body.light-mode .case-folder-tab h5 {
    color: #000 !important;
}

body.light-mode .case-folder-body {
    background-color: #f5f5f5 !important;
    border-color: #000 !important;
}


body.light-mode .case-video-frame {
    border-color: #000 !important;
}

body.light-mode .case-divider-line {
    background-color: #000 !important;
}

body.light-mode .case-info-box .text-white {
    color: #000 !important;
}

body.light-mode .case-desc-text {
    color: #555 !important;
}

body.light-mode .case-desc-text {
    color: #555 !important;
}

body.light-mode .case-info-box .text-white {
    color: #000 !important;
}

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

   .hero-section-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #131C02;
    /* 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: 1200px;
    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 (KARUSSELL) --- */
.hero-columns-container {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 0; 
    padding: 0;
    overflow: hidden; /* Äußere Elemente anschneiden */
}

.hero-col-item {
    position: absolute;
    width: 28%;
    height: 70vh;
    text-decoration: none;
    will-change: transform, opacity; 
    overflow: visible; 
    cursor: pointer;
    /* Transition wird per JS gesteuert für die Rotation */
}

/* Karussell Positionen */
.hero-col-item.carousel-left {
    transform: translateX(calc(-50vw + 10%)); /* Am linken Rand, 1/4 abgeschnitten */
    z-index: 10;
}

.hero-col-item.carousel-center {
    transform: translateX(0);
    z-index: 20;
}

.hero-col-item.carousel-right {
    transform: translateX(calc(50vw - 10%)); /* Am rechten Rand, 1/4 abgeschnitten */
    z-index: 10;
}

/* Ausgeblendete Position (für Rotation um die Seite) */
.hero-col-item.carousel-hidden-left {
    transform: translateX(-150vw);
    z-index: 5;
}

.hero-col-item.carousel-hidden-right {
    transform: translateX(150vw);
    z-index: 5;
}

/* Transition für smooth movement */
.hero-col-item.carousel-animate {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 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: 767px) {
    
    .hero-section-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height für mobile Browser */
        padding: 60px 0 30px 0;
    }
    
    /* Logo oben zentriert */
    .logo-center-wrapper {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 70%;
        max-width: 280px;
        margin: 0 auto 30px auto;
        flex-shrink: 0;
    }
    
    .hero-bg-logo-img {
        opacity: 1; /* Logo auf Mobile voll sichtbar */
    }
    
    /* Horizontaler Swipe-Slider */
    .hero-columns-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding: 0 20px 20px 20px;
        flex: 1;
        align-items: stretch;
    }
    
    /* Scrollbar verstecken aber Funktion behalten */
    .hero-columns-container::-webkit-scrollbar {
        display: none;
    }
    .hero-columns-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .hero-col-item {
        position: relative;
        flex: 0 0 85%;
        height: auto;
        min-height: 300px;
        max-height: 450px;
        scroll-snap-align: center;
        border-radius: 20px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(138, 155, 72, 0.3);
    }
    
    /* Karussell-Klassen auf Mobile zurücksetzen */
    .hero-col-item.carousel-left,
    .hero-col-item.carousel-center,
    .hero-col-item.carousel-right {
        transform: none;
        opacity: 1;
        z-index: 10;
    }
    
    .hero-floater {
        animation: none;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-img-pack {
        position: relative;
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Standard-Bild: relativ positioniert als Basis */
    .hero-img-pack .img-standard {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: opacity 0.2s ease;
    }
    
    /* Auf Mobile: Alle Bilder vorbereiten, aber nur Standard sichtbar */
    .img-standard { 
        opacity: 1;
        display: block !important;
        z-index: 2;
    }
    
    .img-hover {
        display: block !important;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 3;
        transition: opacity 0.2s ease;
    }
    
    .gif-overlay {
        display: block !important;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200%;
        height: auto;
        object-fit: cover;
        z-index: 1;
        transition: opacity 0.2s ease;
    }
    
    /* Touch-Active State: GIF und MO-Bild zeigen */
    .hero-col-item.touch-active .img-hover {
        opacity: 1;
    }
    
    .hero-col-item.touch-active .gif-overlay {
        opacity: 1;
    }
    
    .hero-col-item.touch-active .img-standard {
        opacity: 0;
    }
    
    /* Card Labels auf Mobile */
    .hero-card-label {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'VT323', monospace;
        font-size: 1.5rem;
        color: #8A9B48;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: rgba(19, 28, 2, 0.8);
        padding: 8px 20px;
        border-radius: 8px;
        border: 1px solid rgba(138, 155, 72, 0.5);
        z-index: 20;
    }
    
    /* Swipe-Hinweis */
    .hero-section-wrapper::after {
        content: 'swipe';
        display: block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'VT323', monospace;
        font-size: 0.9rem;
        color: rgba(138, 155, 72, 0.6);
        text-transform: uppercase;
        letter-spacing: 3px;
    }
}

/* Labels auf Desktop verstecken */
.hero-card-label {
    display: none;
}

/* =========================================
   ABOUT SECTION (Text-Block mit Grid-Reihen)
   ========================================= */

.about-section {
    position: relative;
    width: 100%;
    background-color: #131C02;
    padding: 0;
}

/* Unteres Grid (1 Zeile) */
.about-grid-bottom {
    position: relative;
    width: 100%;
    height: 60px;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* GIF Container - rechtsbündig positioniert */
.about-gifs {
    position: absolute;
    right: 60px; /* 1 Kästchen vom rechten Rand */
    bottom: 60px; /* 60px nach oben, sodass Figuren auf der oberen Kästchen-Linie stehen */
    display: flex;
    align-items: flex-end; /* Unten ausgerichtet (Füße auf der Linie) */
    gap: 20px;
    z-index: 10;
}

.about-gif {
    height: 100px;
    width: auto;
}

/* Individuelle Positionsanpassung */
.about-gif-left {
    margin-bottom: -12px; /* 12px nach unten */
}

.about-gif-right {
    margin-bottom: -6px; /* 6px nach unten */
}

/* Text Content Bereich */
.about-content {
    padding: 60px 0;
}

.about-headline {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #B9D49C;
    margin-bottom: 15px;
    line-height: 1.2;
}

.about-subline {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.9rem;
    color: #7a9a5c !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.about-text {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #9ab87e;
    line-height: 1.7;
    max-width: 900px;
}

.about-text p {
    margin-bottom: 1rem;
}

/* --- LIGHT MODE --- */
body.light-mode .about-section {
    background-color: #f5f5f5;
}

body.light-mode .about-grid-bottom {
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

body.light-mode .about-headline {
    color: #000;
}

body.light-mode .about-subline {
    color: #666 !important;
}

body.light-mode .about-text {
    color: #333;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .about-grid-bottom {
        height: 40px;
        background-size: 40px 40px;
    }
    
    .about-gifs {
        right: 20px;
        bottom: 40px;
        gap: 10px;
    }
    
    .about-gif {
        max-height: 60px;
    }
    
    .about-content {
        padding: 40px 0;
    }
    
    .about-headline {
        font-size: 1.8rem;
    }
    
    .about-text {
        font-size: 0.9rem;
    }
}

/* =========================================
   RULES SECTION
   ========================================= */

.rules-section {
    background-color: #131C02;
    padding: 80px 0;
    text-align: left;
}

.rules-headline {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.75rem; /* Gleiche Größe wie display-6 */
    font-weight: bold;
    color: #B9D49C;
    margin-bottom: 10px;
}

.rules-subline {
    font-size: 1rem;
    color: #7a9a5c;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 100%;
    margin: 0;
}

.rule-item {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    color: #B9D49C;
    line-height: 1.4;
}

/* Light Mode */
body.light-mode .rules-section {
    background-color: #f5f5f5;
}

body.light-mode .rules-headline,
body.light-mode .rule-item {
    color: #000;
}

body.light-mode .rules-subline {
    color: #555;
}

/* Mobile */
@media (max-width: 768px) {
    .rules-headline {
        font-size: 2rem;
    }
    
    .rule-item {
        font-size: 1.4rem;
    }
    
    .rules-section {
        padding: 50px 0;
    }
}

/* =========================================
   RULES GRID BOTTOM (Trennlinie 1 Zeile)
   ========================================= */

.rules-grid-bottom {
    width: 100%;
    height: 60px; /* 1 Zeile */
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Light Mode */
body.light-mode .rules-grid-bottom {
    background-color: #f5f5f5;
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

/* Mobile */
@media (max-width: 768px) {
    .rules-grid-bottom {
        height: 40px;
        background-size: 40px 40px;
    }
}

/* =========================================
   CONTACT SECTION (Whats up?)
   ========================================= */

.contact-section {
    background-color: #131C02;
    padding: 80px 0;
}

.contact-headline {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.75rem;
    font-weight: bold;
    color: #B9D49C;
    margin-bottom: 5px;
}

.contact-subline {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #7a9a5c !important;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.contact-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.contact-form-col {
    flex: 1;
    max-width: 600px;
}

.contact-social-col {
    flex: 0 0 300px;
}

.social-headline {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #B9D49C;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #B9D49C;
    text-decoration: none;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    padding: 10px 15px;
    border: 2px solid rgba(185,212,156,0.35);
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: rgba(185,212,156,0.1);
    color: #fff;
    border: 2px solid #B9D49C;
}

.social-link i {
    font-size: 1.4rem;
    width: 24px;
    text-align: center;
}

/* =========================================
   NERDIMAIL FORM OVERRIDES (Nerdistan Style)
   ========================================= */

/* Container - kein extra Hintergrund/Rahmen */
.contact-section .nerdimail-form-wrapper {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.contact-section .nerdimail-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Alle Felder auf eigene Zeile */
.contact-section .nerdimail-form-row {
    flex-direction: column;
    gap: 0;
}

.contact-section .nerdimail-form-field {
    margin-bottom: 15px;
}

/* Labels verstecken (werden als Placeholder angezeigt) */
.contact-section .nerdimail-form-field label {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Input Felder - Nerdistan Style */
.contact-section .nerdimail-input,
.contact-section .nerdimail-textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #B9D49C;
    border-radius: 0;
    background: transparent;
    color: #B9D49C;
    font-size: 1rem;
    font-family: 'Libre Franklin', sans-serif;
}

.contact-section .nerdimail-input::placeholder,
.contact-section .nerdimail-textarea::placeholder {
    color: rgba(185,212,156,0.6);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.contact-section .nerdimail-input:focus,
.contact-section .nerdimail-textarea:focus {
    outline: none;
    border: 2px solid #B9D49C;
    box-shadow: none;
    background: rgba(185,212,156,0.05);
}

/* Textarea */
.contact-section .nerdimail-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Submit Button - wie "View Case" Button */
.contact-section .nerdimail-submit-btn {
    width: 100% !important;
    background: transparent !important;
    color: #B9D49C !important;
    border: 2px solid #B9D49C !important;
    border-radius: 0 !important;
    padding: 14px 30px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    font-family: 'Libre Franklin', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.contact-section .nerdimail-submit-btn:hover {
    background: #B9D49C !important;
    color: #131C02 !important;
    border-color: #B9D49C !important;
}

.contact-section .nerdimail-submit-btn:disabled {
    background: transparent !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: rgba(255,255,255,0.3) !important;
    cursor: not-allowed !important;
}

/* Error Messages */
.contact-section .nerdimail-error {
    color: #ff6b6b;
    font-size: 0.8rem;
}

.contact-section .nerdimail-general-error {
    background: rgba(255,107,107,0.1);
    border-left: 3px solid #ff6b6b;
    padding: 12px;
    border-radius: 0;
    color: #ff6b6b;
}

/* Success Message */
.contact-section .nerdimail-success-message {
    background: rgba(185,212,156,0.1);
    border-left: 3px solid #B9D49C;
    padding: 12px;
    border-radius: 0;
    color: #B9D49C;
}

/* Footer Notes */
.contact-section .nerdimail-form-footer {
    margin-top: 10px;
    color: rgba(185,212,156,0.5);
    font-size: 0.75rem;
}

.contact-section .nerdimail-required {
    color: #ff6b6b;
}

/* Spinner */
.contact-section .nerdimail-spinner-icon .path {
    stroke: #131C02;
}

/* Light Mode */
body.light-mode .contact-section .nerdimail-input,
body.light-mode .contact-section .nerdimail-textarea {
    border: 2px solid #000;
    color: #333;
}

body.light-mode .contact-section .nerdimail-input::placeholder,
body.light-mode .contact-section .nerdimail-textarea::placeholder {
    color: #888;
}

body.light-mode .contact-section .nerdimail-input:focus,
body.light-mode .contact-section .nerdimail-textarea:focus {
    border: 2px solid #000;
    background: rgba(0,0,0,0.02);
}

body.light-mode .contact-section .nerdimail-submit-btn {
    color: #333 !important;
    border: 2px solid #333 !important;
}

body.light-mode .contact-section .nerdimail-submit-btn:hover {
    background: #333 !important;
    color: #fff !important;
}

body.light-mode .contact-section .nerdimail-form-footer {
    color: #888;
}

body.light-mode .contact-section .nerdimail-success-message {
    background: rgba(0,163,42,0.1);
    border-left-color: #00a32a;
    color: #00a32a;
}

/* Light Mode */
body.light-mode .contact-section {
    background-color: #f5f5f5;
}

body.light-mode .contact-headline,
body.light-mode .social-headline {
    color: #000;
}

body.light-mode .contact-subline {
    color: #666 !important;
}

body.light-mode .social-link {
    color: #333;
    border: 2px solid #000;
}

body.light-mode .social-link:hover {
    background-color: rgba(0,0,0,0.05);
    color: #000;
    border: 2px solid #000;
}

/* Mobile */
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .contact-form-col {
        max-width: 100%;
    }
    
    .contact-social-col {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 50px 0;
    }
    
    .contact-headline {
        font-size: 2rem;
    }
    
    /* Formular volle Breite auf Mobile */
    .contact-form-col,
    .contact-section .nerdimail-form-wrapper,
    .contact-section .nerdimail-form,
    .contact-section .nerdimail-form-row,
    .contact-section .nerdimail-form-field {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .contact-section .nerdimail-input,
    .contact-section .nerdimail-textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* =========================================
   SERVICES GRID (6 Zeilen mit Label)
   ========================================= */

.services-grid {
    width: 100%;
    margin-top: 120px;
    background-color: #131C02;
}

/* Obere 2 Zeilen - normale Kästchen */
.services-grid-top {
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
}

/* Mittlere 2 Zeilen - mit Label-Box */
.services-grid-middle {
    position: relative;
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
}

/* Untere 2 Zeilen - normale Kästchen */
.services-grid-bottom {
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Label-Box in der Mitte */
.services-label-box {
    position: absolute;
    top: 2px; /* 2px von oben wegnehmen */
    left: 62px; /* 1 Kästchen + 2px kürzer */
    right: 59px; /* 1 Kästchen - 1px länger */
    height: 118px; /* 2 Zeilen minus 2px oben */
    background-color: #131C02;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    z-index: 5;
}

.services-label-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-gif {
    height: 100px;
    width: auto;
}

/* Services Keywords Center */
.services-keywords-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.services-keyword-wrapper {
    position: relative;
    height: 30px;
    min-width: 355px;
    text-align: center;
}

.services-keyword {
    position: absolute;
    left: 0;
    right: 0;
    font-family: 'DekoDisplay', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #B9D49C;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.services-keyword.active {
    opacity: 1;
    transform: translateY(0);
}

.services-btn {
    font-size: 0.75rem;
    padding: 6px 16px;
}

/* Light Mode */
body.light-mode .services-keyword {
    color: #000;
}

.services-headline {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.75rem;
    font-weight: bold;
    color: #B9D49C;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.services-subline {
    font-size: 1rem;
    color: #7a9a5c;
    text-transform: uppercase;
    margin: 5px 0 0 0;
}

/* Light Mode */
body.light-mode .services-grid {
    background-color: #f5f5f5;
}

body.light-mode .services-grid-top,
body.light-mode .services-grid-middle,
body.light-mode .services-grid-bottom {
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
}

body.light-mode .services-grid-bottom {
    border-bottom-color: #000;
}

body.light-mode .services-label-box {
    background-color: #f5f5f5;
}

body.light-mode .services-headline {
    color: #000;
}

body.light-mode .services-subline {
    color: #555;
}

/* Mobile */
@media (max-width: 768px) {
    .services-grid-top,
    .services-grid-middle,
    .services-grid-bottom {
        height: 80px;
        background-size: 40px 40px;
    }
    
    .services-label-box {
        left: 40px;
        right: 40px;
        height: 80px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .services-headline {
        font-size: 1.8rem;
    }
    
    .services-subline {
        font-size: 0.85rem;
    }
    
    .services-gif {
        display: none; /* GIF auf Mobile verstecken */
    }
    
    .services-keywords-center {
        display: flex !important; /* Auf Mobile anzeigen für den Button */
        flex-direction: column;
        align-items: flex-end;
    }
    
    .services-keywords-center .services-keyword-wrapper {
        display: none; /* Keywords auf Mobile verstecken */
    }
    
    .services-keywords-center .services-btn {
        display: inline-block !important; /* Button anzeigen */
        font-size: 0.7rem;
        padding: 8px 16px;
    }
}

/* =========================================
   EVENTS SECTION
   ========================================= */

.events-section {
    background-color: #131C02;
    padding: 60px 0;
}

.events-subtitle {
    color: #7a9a5c;
}

/* Events Liste */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.event-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 2px solid rgba(185,212,156,0.35);
    gap: 30px;
}

.event-item:first-child {
    border-top: 2px solid rgba(185,212,156,0.35);
}

/* Datum Spalte */
.event-date-col {
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-date {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 1.1rem;
    color: #B9D49C;
    font-weight: bold;
}

.event-time {
    font-size: 0.85rem;
    color: #7a9a5c;
}

/* Info Spalte */
.event-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-title {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 1.2rem;
    color: #B9D49C;
    margin: 0;
    text-transform: uppercase;
}

.event-location {
    font-size: 0.9rem;
    color: #7a9a5c;
}

.event-location i {
    margin-right: 6px;
}

.event-desc {
    font-size: 0.85rem;
    color: #9ab87e;
    margin: 4px 0 0 0;
    max-width: 600px;
}

/* Action Spalte */
.event-action-col {
    min-width: 140px;
    text-align: right;
}

.event-action-col .btn {
    font-size: 0.8rem;
    padding: 8px 16px;
}

/* Empty State */
.events-empty {
    padding: 40px 0;
    text-align: center;
    color: #7a9a5c;
}

/* Light Mode */
body.light-mode .events-section {
    background-color: #f5f5f5;
}

body.light-mode .events-subtitle {
    color: #666;
}

body.light-mode .event-item {
    border-color: #000;
}

body.light-mode .event-date,
body.light-mode .event-title {
    color: #000;
}

body.light-mode .event-time,
body.light-mode .event-location {
    color: #555;
}

body.light-mode .event-desc {
    color: #666;
}

body.light-mode .events-empty {
    color: #666;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 0;
    }
    
    .event-date-col {
        flex-direction: row;
        gap: 15px;
        min-width: auto;
    }
    
    .event-action-col {
        width: 100%;
        text-align: left;
    }
    
    .event-action-col .btn {
        width: 100%;
    }
}

/* =========================================
   EVENTS GRID BOTTOM (1 Zeile nach Events)
   ========================================= */

.events-grid-bottom {
    position: relative;
    width: 100%;
    height: 60px; /* 1 Zeile */
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* GIF Container für Events Grid - Linksseitig */
.events-gifs {
    position: absolute;
    left: 60px;
    top: 0;
    transform: translateY(-100%); /* GIFs stehen auf der obersten Linie */
    display: flex;
    align-items: flex-end;
    gap: 80px; /* 20px + 60px mehr */
    z-index: 10;
}

.events-gif {
    height: 100px;
    width: auto;
}

/* Individuelle Größen- und Positionsanpassung */
.events-gif-1 {
    height: 65px; /* 65% von 100px */
    margin-bottom: -2px; /* 2px nach unten */
}

.events-gif-2 {
    height: 80px; /* 80% von 100px */
    margin-bottom: 0;
}

.events-gif-3 {
    margin-bottom: 0;
}

/* Light Mode */
body.light-mode .events-grid-bottom {
    background-color: #f5f5f5;
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

/* Mobile */
@media (max-width: 768px) {
    .events-grid-bottom {
        height: 40px;
        background-size: 40px 40px;
    }
    
    .events-gifs {
        left: 20px;
        gap: 10px;
    }
    
    .events-gif {
        height: 60px;
    }
}

/* =========================================
   CASES GRID BOTTOM (2 Zeilen nach Cases)
   ========================================= */

.cases-grid-bottom {
    position: relative;
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    margin-top: 70px; /* Abstand zu Cases */
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* GIF Container für Cases Grid */
.cases-gifs {
    position: absolute;
    right: 260px; /* 60px + 200px nach links */
    top: 0;
    transform: translateY(-100%); /* GIFs stehen auf der obersten Linie */
    display: flex;
    align-items: flex-end;
    gap: 20px;
    z-index: 10;
}

.cases-gif {
    height: 100px;
    width: auto;
}

/* Individuelle Positionsanpassung */
.cases-gif-left {
    margin-bottom: -8px; /* 8px nach unten (12-4=8) */
}

.cases-gif-right {
    transform: scaleX(-1); /* Horizontal gespiegelt */
    margin-bottom: -3px; /* 3px nach unten */
}

/* Light Mode */
body.light-mode .cases-grid-bottom {
    background-color: #f5f5f5;
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

/* Mobile */
@media (max-width: 768px) {
    .cases-grid-bottom {
        height: 80px;
        background-size: 40px 40px;
    }
    
    .cases-gifs {
        right: 20px;
        gap: 10px;
    }
    
    .cases-gif {
        height: 60px;
    }
}

/* =========================================
   CASES FOLDER DESIGN (Akten-Look wie nerdistan.tv)
   ========================================= */

.cases-section-wrapper {
    padding-top: 40px; /* Platz für die Tabs */
}

/* Der Wrapper für eine einzelne Akte */
.case-folder-wrapper {
    position: relative;
    margin-top: 30px; /* Platz für den Tab oben */
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* --- DER TAB (REITER) OBEN mit 45° Schräge --- */
.case-folder-tab {
    position: absolute;
    top: -30px;
    left: 0;
    height: 32px;
    background-color: #131C02;
    padding: 0 15px;
    z-index: 5; /* Über dem Body */
    display: flex;
    align-items: center;
    
    /* Linker und oberer Rahmen */
    border-left: 2px solid #B9D49C;
    border-top: 2px solid #B9D49C;
    border-right: none;
    border-bottom: none;
}

/* Die schräge rechte Seite des Tabs */
.case-folder-tab::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 100%;
    width: 32px;
    height: 32px;
    background-color: #131C02;
    border-top: 2px solid #B9D49C;
    border-right: 2px solid #B9D49C;
    transform: skewX(45deg);
    transform-origin: top left;
}

/* Überdeckt die Body-Border unter dem Tab */
.case-folder-tab::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: calc(100% + 32px); /* Tab-Breite + Schräge */
    height: 4px;
    background-color: #131C02;
    z-index: 10;
}

.case-folder-tab h5 {
    margin: 0;
    font-family: 'Libre Franklin', sans-serif; /* Standard Schrift für Case Tabs */
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.85rem;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}


/* --- DER HAUPTKÖRPER --- */
.case-folder-body {
    background-color: #131C02;
    border: 2px solid #B9D49C;
    padding: 20px;
    padding-top: 15px;
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* --- VIDEO/BILD BEREICH --- */
.case-video-frame {
    border: 2px solid #4a5a3a;
    margin-bottom: 10px;
    background: #1a2505;
    overflow: hidden;
}

.case-video-frame img,
.case-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- BESCHREIBUNG --- */
.case-info-box {
    margin-top: 0;
    padding-top: 0;
}

.case-desc-text {
    font-size: 0.8rem;
    color: #8fb873;
    line-height: 1.4;
    margin-bottom: 0;
}


/* --- BUTTON --- */
.case-folder-body .btn {
    border-width: 2px;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 10px 20px;
    margin-top: 20px;
    letter-spacing: 1px;
}

.case-folder-body .btn:hover {
    background: #B9D49C;
    color: #131C02;
}


/* --- MOBILE ANPASSUNG --- */
@media (max-width: 768px) {
    /* Mehr Abstand zwischen den Cases auf Mobile */
    .cases-section-wrapper.row {
        row-gap: 50px !important;
    }
    
    .case-folder-wrapper {
        margin-bottom: 20px;
    }
    
    .case-folder-tab {
        left: 15px;
        padding: 6px 15px;
    }
    
    .case-folder-tab h5 {
        font-size: 0.75rem;
    }
    
    .case-folder-body {
        padding: 20px;
    }
}


 /* Styling für die Footer Navigation */
.nav-hover {
    transition: color 0.2s ease;
}

/* Hover Effekt: Grün werden */
.nav-hover:hover {
    color: #B9D49C !important;
}

/* LIGHT MODE ANPASSUNGEN FÜR FOOTER */
body.light-mode footer {
    background-color: #fff !important;
    border-top-color: #000 !important;
    color: #000 !important;
}

/* Im Light Mode sind die Links dunkelgrau und werden schwarz bei Hover */
body.light-mode .nav-hover {
    color: #666 !important;
}
body.light-mode .nav-hover:hover {
    color: #000 !important;
}

/* Copyright im Light Mode */
body.light-mode footer span[style*="opacity"] {
    color: #000;
}

/* =========================================
   FLOATING BOTTOM NAV (Das "Cockpit")
   ========================================= */

/* Der Container selbst: Schwebend, zentriert, ECKIG mit 2px Rand */
.nerd-floating-nav {
    position: fixed;
    bottom: 30px; /* Abstand vom unteren Rand */
    left: 50%;
    transform: translateX(-50%); /* Exakte horizontale Zentrierung */
    
    width: 85%; /* 85% Seitenbreite wie gewünscht */
    max-width: 85%;
    
    background-color: rgba(19, 28, 2, 0.95); /* Dunkles Grün, leichte Transparenz */
    border: 2px solid #B9D49C; /* 2px grüner Rand - passend zum Partner-Grid */
    border-radius: 0; /* ECKIG - keine Rundung */
    padding: 0 25px;
    height: 60px; /* Gleiche Höhe wie Grid-Kästchen */
    
    z-index: 9999; /* Immer ganz oben */
    box-shadow: none; /* Kein Schatten für cleanen Look */
    
    /* Flexbox für Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    
    /* Schriftart: DekoDisplay für Nav */
    font-family: 'DekoDisplay', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Die Links (Menüpunkte) */
.nerd-nav-links {
    display: flex;
    gap: 25px;
    font-weight: bold;
    font-size: 1.1rem;
}

.nerd-nav-item {
    color: #7a9a5c;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.nerd-nav-item:hover {
    color: #B9D49C;
    transform: translateY(-2px); /* Leichtes Anheben bei Hover */
    text-shadow: 0 0 8px rgba(185,212,156,0.5); /* Glowing Effect */
}

/* Trennlinie vertikal */
.nerd-nav-divider {
    width: 2px;
    height: 20px;
    background-color: rgba(185,212,156,0.35);
}

/* Rechts: Meta Infos */
.nerd-nav-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #B9D49C; /* Standard Grün wie rest der Nav */
    font-size: 0.8rem;
}

/* Imprint, Privacy und Copyright - Libre Franklin */
.nerd-nav-meta-text {
    font-family: 'Libre Franklin', sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

/* Der Toggle Button im HUD */
.hud-toggle-btn {
    cursor: pointer;
    background: transparent;
    border: 2px solid rgba(185,212,156,0.35);
    padding: 6px 14px;
    border-radius: 0;
    color: #B9D49C;
    transition: 0.2s;
    font-size: 1rem;
    font-family: 'DekoDisplay', sans-serif;
}
.hud-toggle-btn:hover {
    border: 2px solid #B9D49C;
    color: #B9D49C;
}


/* --- MOBILE ANPASSUNG --- */
@media (max-width: 991px) {
    .nerd-floating-nav {
        bottom: 15px;
        width: 92%;
        max-width: 92%;
        flex-direction: column; /* Untereinander auf Mobile */
        padding: 15px;
        height: auto; /* Flexible Höhe auf Mobile */
        gap: 12px;
        font-size: 0.8rem;
    }
    
    .nerd-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        font-size: 0.9rem;
    }
    
    .nerd-nav-divider {
        display: none; /* Linie weg auf Mobile */
    }
    
    .nerd-nav-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hud-toggle-btn {
        font-size: 0.85rem;
    }
}


/* --- LIGHT MODE OVERRIDES --- */
body.light-mode .nerd-floating-nav {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: #000; /* Schwarzer 2px Rand im Light Mode */
    box-shadow: none;
}

body.light-mode .nerd-nav-item {
    color: #666;
}
body.light-mode .nerd-nav-item:hover {
    color: #000;
    text-shadow: none;
}

body.light-mode .nerd-nav-divider {
    background-color: #000;
}

body.light-mode .nerd-nav-meta {
    color: #666;
}

body.light-mode .hud-toggle-btn {
    background: transparent;
    border: 2px solid #000;
    color: #333;
}
body.light-mode .hud-toggle-btn:hover {
    border: 2px solid #000;
    color: #000;
}

/* =========================================
   PARTNER / CLIENTS SECTION (Grid Look)
   Original Layout: 2 Grid-Zeilen oben, 2 Zeilen Logos (ohne Grid), 1 Grid-Zeile unten
   ========================================= */

.partners-section {
    position: relative;
    width: 100%;
    /* 5 Zeilen: 2 oben (Grid) + 2 mitte (Logos) + 1 unten (Grid) = 5 x 60px */
    height: 300px;
    overflow: hidden;
    background-color: #131C02; /* Dark Mode Basis */
}

/* --- OBERES GRID (2 Zeilen) --- */
.partners-grid-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    pointer-events: none;
    z-index: 1;
    
    /* Dickere Linien: 2px */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    
    /* Untere Abschlusslinie der 2. Reihe */
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* --- UNTERES GRID (1 Zeile) --- */
.partners-grid-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 1 Zeile */
    pointer-events: none;
    z-index: 1;
    
    /* Dickere Linien: 2px */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    background-position: 0 0;
    
    /* Untere Abschlusslinie */
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* --- DAS LABEL ("Our clients...") --- */
.partners-label-box {
    position: absolute;
    /* 2px nach unten, damit die obere Grid-Linie sichtbar bleibt */
    top: 2px;
    /* Nach 1 Kästchen (60px) + 2px für die linke Linie */
    left: 62px;
    z-index: 10; /* Über dem Grid */
    background-color: #131C02;
    
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    color: #B9D49C;
    letter-spacing: 1px;
    
    /* Höhe = 1 Kästchen (60px) minus obere Linie (2px) = 58px */
    height: 58px;
    /* Breite = 5 Kästchen (5 x 60 = 300) minus linke Linie (2px) minus rechte Linie (2px) = 296px */
    width: 296px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Keine Borders - überdeckt die horizontalen Grid-Linien, vertikale bleiben sichtbar */
    border: none;
}

/* --- DER SLIDER (MARQUEE) - In der Mitte ohne Grid --- */
.marquee-wrapper {
    position: absolute;
    z-index: 2;
    width: 100%;
    /* Positioniert nach den oberen 2 Grid-Zeilen */
    top: 120px;
    /* Höhe = 2 Zeilen für Logos */
    height: 120px;
    display: flex;
    align-items: center;
    overflow: hidden;
    
    /* Kein Grid hier - nur der Hintergrund */
    background-color: #131C02;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 100px;
    padding-left: 50px;
    
    animation: scrollLogos 35s linear infinite;
    width: max-content;
}

/* Pause bei Hover */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* --- PARTNER LINKS --- */
.partner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    min-width: 120px;
}

/* Das Logo selbst */
.partner-logo {
    height: 45px; 
    width: auto;
    max-width: 160px;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- LOGIK FÜR DARK / LIGHT BILDER --- */

/* Standard (Dark Mode): */
.partner-logo.logo-dark {
    display: block;
    opacity: 0.7;
}
.partner-logo.logo-light {
    display: none;
    position: absolute;
}

/* --- HOVER EFFEKT --- */
.partner-link:hover .partner-logo {
    opacity: 1;
    transform: scale(1.08);
}

/* Animation Definition */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* --- LIGHT MODE ANPASSUNGEN --- */
body.light-mode .partners-section {
    background-color: #f5f5f5; /* Gleiches Grau wie Hintergrund */
}

body.light-mode .partners-grid-top,
body.light-mode .partners-grid-bottom {
    /* Dickere schwarze Linien im Light Mode */
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-color: #000;
    border-width: 2px;
}

body.light-mode .partners-label-box {
    background-color: #f5f5f5;
    color: #000;
}

body.light-mode .marquee-wrapper {
    background-color: #f5f5f5; /* Gleiches Grau wie Hintergrund */
}

/* --- MOBILE ANPASSUNG --- */
@media (max-width: 768px) {
    .partners-section {
        /* Mobile: 1 Zeile oben, 2 Logos, 1 Zeile unten = 4 x 50px */
        height: 200px;
    }
    
    .partners-grid-top {
        height: 50px; /* Nur 1 Zeile oben auf Mobile */
    }
    
    .partners-grid-bottom {
        height: 50px;
    }
    
    .partners-label-box {
        font-size: 0.65rem;
        padding: 0 15px;
        height: 50px;
    }
    
    .marquee-wrapper {
        top: 50px;
        height: 100px;
    }
    
    .partner-logo {
        height: 35px;
    }
    
    .marquee-track {
        gap: 60px;
    }
}

/* 2. Wenn Light Mode aktiv ist (body.light-mode): */
body.light-mode .logo-dark {
    display: none; /* Verstecke Dark Logo */
}
body.light-mode .logo-light {
    display: block; /* Zeige Light Logo */
    opacity: 1;
}

/* =========================================
   NERDISTAN PAGE TEMPLATE
   Für manuell erstellte Seiten im Nerdistan-Style
   ========================================= */

/* Grid oben (2 Zeilen) */
.page-grid-top {
    width: 100%;
    height: 120px; /* 2 Zeilen à 60px */
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Grid unten (1 Zeile) */
.page-grid-bottom {
    width: 100%;
    height: 60px; /* 1 Zeile */
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Haupt-Section */
.nerdistan-page-section {
    background-color: #131C02;
    padding: 60px 0 80px 0;
    min-height: 50vh;
}

/* Header Block (Headline + Subline) */
.page-header-block {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

.page-headline {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 2.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #B9D49C;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.page-subline {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #7a9a5c;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* Content Block */
.page-content-block {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1rem;
    color: #9ab87e;
    line-height: 1.8;
}

.page-content-block h2,
.page-content-block h3,
.page-content-block h4,
.page-content-block h5,
.page-content-block h6 {
    font-family: 'DekoDisplay', sans-serif;
    color: #B9D49C;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 15px;
}

.page-content-block h2 {
    font-size: 2rem;
}

.page-content-block h3 {
    font-size: 1.6rem;
}

.page-content-block h4 {
    font-size: 1.3rem;
}

.page-content-block p {
    margin-bottom: 1.2rem;
}

.page-content-block a {
    color: #B9D49C;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.page-content-block a:hover {
    color: #fff;
}

.page-content-block ul,
.page-content-block ol {
    margin-bottom: 1.5rem;
    padding-left: 25px;
}

.page-content-block li {
    margin-bottom: 0.5rem;
}

.page-content-block blockquote {
    border-left: 3px solid #B9D49C;
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #B9D49C;
}

.page-content-block img {
    max-width: 100%;
    height: auto;
    border: 2px solid rgba(185,212,156,0.35);
    margin: 20px 0;
}

.page-content-block hr {
    border: none;
    border-top: 2px solid rgba(185,212,156,0.35);
    margin: 40px 0;
}

/* WordPress Block Styles */
.page-content-block .wp-block-image {
    margin: 30px 0;
}

.page-content-block .wp-block-image img {
    border: 2px solid rgba(185,212,156,0.35);
}

.page-content-block .wp-block-image figcaption {
    color: #7a9a5c;
    font-size: 0.85rem;
    margin-top: 8px;
    text-align: center;
}

.page-content-block .wp-block-quote {
    border-left: 3px solid #B9D49C;
    padding-left: 20px;
    margin: 30px 0;
}

.page-content-block .wp-block-quote p {
    font-style: italic;
    color: #B9D49C;
    font-size: 1.1rem;
}

.page-content-block .wp-block-quote cite {
    color: #7a9a5c;
    font-size: 0.9rem;
}

/* Buttons im Content */
.page-content-block .wp-block-button__link {
    background: transparent;
    color: #B9D49C;
    border: 2px solid #B9D49C;
    border-radius: 0;
    padding: 12px 24px;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-content-block .wp-block-button__link:hover {
    background: #B9D49C;
    color: #131C02;
}

/* Tabellen */
.page-content-block table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.page-content-block th,
.page-content-block td {
    padding: 12px 15px;
    border: 2px solid rgba(185,212,156,0.35);
    text-align: left;
}

.page-content-block th {
    background-color: rgba(185,212,156,0.1);
    color: #B9D49C;
    font-family: 'DekoDisplay', sans-serif;
    text-transform: uppercase;
}

/* Code Blocks */
.page-content-block pre,
.page-content-block code {
    background-color: rgba(0,0,0,0.3);
    border: 1px solid rgba(185,212,156,0.35);
    font-family: 'Courier New', monospace;
}

.page-content-block code {
    padding: 2px 6px;
    font-size: 0.9rem;
    color: #B9D49C;
}

.page-content-block pre {
    padding: 15px 20px;
    overflow-x: auto;
    margin: 20px 0;
}

.page-content-block pre code {
    padding: 0;
    border: none;
    background: transparent;
}

/* --- LIGHT MODE --- */
body.light-mode .page-grid-top,
body.light-mode .page-grid-bottom {
    background-color: #f5f5f5;
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

body.light-mode .nerdistan-page-section {
    background-color: #f5f5f5;
}

body.light-mode .page-header-block {
    border-bottom-color: #000;
}

body.light-mode .page-headline {
    color: #000;
}

body.light-mode .page-subline {
    color: #555;
}

body.light-mode .page-content-block {
    color: #333;
}

body.light-mode .page-content-block h2,
body.light-mode .page-content-block h3,
body.light-mode .page-content-block h4,
body.light-mode .page-content-block h5,
body.light-mode .page-content-block h6 {
    color: #000;
}

body.light-mode .page-content-block a {
    color: #000;
}

body.light-mode .page-content-block a:hover {
    color: #333;
}

body.light-mode .page-content-block blockquote {
    border-left-color: #000;
    color: #333;
}

body.light-mode .page-content-block img {
    border-color: #000;
}

body.light-mode .page-content-block hr {
    border-top-color: #000;
}

body.light-mode .page-content-block .wp-block-image img {
    border-color: #000;
}

body.light-mode .page-content-block .wp-block-image figcaption {
    color: #666;
}

body.light-mode .page-content-block .wp-block-quote {
    border-left-color: #000;
}

body.light-mode .page-content-block .wp-block-quote p {
    color: #333;
}

body.light-mode .page-content-block .wp-block-quote cite {
    color: #666;
}

body.light-mode .page-content-block .wp-block-button__link {
    color: #000;
    border-color: #000;
}

body.light-mode .page-content-block .wp-block-button__link:hover {
    background: #000;
    color: #fff;
}

body.light-mode .page-content-block th,
body.light-mode .page-content-block td {
    border-color: #000;
}

body.light-mode .page-content-block th {
    background-color: rgba(0,0,0,0.05);
    color: #000;
}

body.light-mode .page-content-block pre,
body.light-mode .page-content-block code {
    background-color: rgba(0,0,0,0.05);
    border-color: #000;
    color: #333;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .page-grid-top {
        height: 80px;
        background-size: 40px 40px;
    }
    
    .page-grid-bottom {
        height: 40px;
        background-size: 40px 40px;
    }
    
    .nerdistan-page-section {
        padding: 40px 0 60px 0;
    }
    
    .page-headline {
        font-size: 2rem;
    }
    
    .page-subline {
        font-size: 0.9rem;
    }
    
    .page-content-block {
        font-size: 0.95rem;
    }
    
    .page-content-block h2 {
        font-size: 1.6rem;
    }
    
    .page-content-block h3 {
        font-size: 1.3rem;
    }
}

/* =========================================
   SINGLE CASE TEMPLATE
   Einzelansicht für Cases/Portfolio
   ========================================= */

/* Grid oben (2 Zeilen) */
.case-single-grid-top {
    width: 100%;
    height: 120px;
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Grid unten (1 Zeile) */
.case-single-grid-bottom {
    width: 100%;
    height: 60px;
    background-color: #131C02;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(185,212,156,0.35) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(185,212,156,0.35) 2px, transparent 2px);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

/* Haupt-Section */
.case-single-section {
    background-color: #131C02;
    padding: 60px 0 80px 0;
}

/* --- HEADER --- */
.case-single-header {
    margin-bottom: 40px;
    position: relative;
}

.case-single-tab {
    display: inline-block;
    background-color: #131C02;
    border: 2px solid #B9D49C;
    border-bottom: none;
    padding: 8px 20px;
    margin-bottom: -2px;
    position: relative;
}

.case-single-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #131C02;
}

.case-single-tab-label {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B9D49C;
}

.case-single-title {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #B9D49C;
    margin: 20px 0 15px 0;
    line-height: 1.1;
    padding-top: 20px;
    border-top: 2px solid #B9D49C;
}

.case-single-tagline {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.1rem;
    color: #7a9a5c;
    margin: 0;
}

/* --- HERO (VIDEO/IMAGE) --- */
.case-single-hero {
    margin-bottom: 50px;
}

.case-single-video-wrapper {
    border: 2px solid #B9D49C;
    background-color: #0a0f00;
}

.case-single-video-wrapper iframe {
    display: block;
}

.case-single-featured-image {
    border: 2px solid #B9D49C;
    overflow: hidden;
}

.case-single-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- META INFOS --- */
.case-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
    padding: 30px 0;
    border-top: 2px solid rgba(185,212,156,0.35);
    border-bottom: 2px solid rgba(185,212,156,0.35);
}

.case-meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.case-meta-label {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7a9a5c;
}

.case-meta-value {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 1.2rem;
    color: #B9D49C;
    text-transform: uppercase;
}

/* --- CONTENT --- */
.case-single-content {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.05rem;
    color: #9ab87e;
    line-height: 1.8;
    max-width: 900px;
}

.case-single-content h2,
.case-single-content h3,
.case-single-content h4 {
    font-family: 'DekoDisplay', sans-serif;
    color: #B9D49C;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 20px;
}

.case-single-content h2 {
    font-size: 2rem;
}

.case-single-content h3 {
    font-size: 1.5rem;
}

.case-single-content p {
    margin-bottom: 1.5rem;
}

.case-single-content a {
    color: #B9D49C;
    text-decoration: underline;
    transition: color 0.2s;
}

.case-single-content a:hover {
    color: #fff;
}

.case-single-content img {
    max-width: 100%;
    height: auto;
    border: 2px solid rgba(185,212,156,0.35);
    margin: 30px 0;
}

.case-single-content ul,
.case-single-content ol {
    margin-bottom: 1.5rem;
    padding-left: 25px;
}

.case-single-content li {
    margin-bottom: 0.5rem;
}

.case-single-content blockquote {
    border-left: 3px solid #B9D49C;
    padding-left: 25px;
    margin: 40px 0;
    font-size: 1.2rem;
    font-style: italic;
    color: #B9D49C;
}

/* --- GUTENBERG GALERIE im Case Template --- */
.case-single-content .wp-block-gallery {
    margin: 40px 0;
    gap: 15px !important;
}

.case-single-content .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    border: 2px solid rgba(185,212,156,0.35);
    overflow: hidden;
    transition: border-color 0.3s;
}

.case-single-content .wp-block-gallery .wp-block-image:hover {
    border-color: #B9D49C;
}

.case-single-content .wp-block-gallery .wp-block-image img {
    margin: 0;
    border: none;
    display: block;
    transition: transform 0.3s;
}

.case-single-content .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05);
}

.case-single-content .wp-block-gallery figcaption {
    background: rgba(19, 28, 2, 0.9);
    color: #B9D49C;
    font-size: 0.85rem;
    padding: 10px;
}

/* Gutenberg einzelne Bilder */
.case-single-content .wp-block-image {
    margin: 30px 0;
}

.case-single-content .wp-block-image img {
    border: 2px solid rgba(185,212,156,0.35);
}

.case-single-content .wp-block-image figcaption {
    color: #7a9a5c;
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: center;
}

/* Gutenberg Video Block */
.case-single-content .wp-block-video {
    margin: 40px 0;
}

.case-single-content .wp-block-video video {
    border: 2px solid rgba(185,212,156,0.35);
    width: 100%;
}

/* Gutenberg Embed (YouTube, etc.) */
.case-single-content .wp-block-embed {
    margin: 40px 0;
}

.case-single-content .wp-block-embed .wp-block-embed__wrapper {
    border: 2px solid #B9D49C;
}

/* Gutenberg Columns */
.case-single-content .wp-block-columns {
    margin: 40px 0;
    gap: 30px;
}

/* Gutenberg Separator */
.case-single-content .wp-block-separator {
    border: none;
    border-top: 2px solid rgba(185,212,156,0.35);
    margin: 50px 0;
}

/* Gutenberg Quote */
.case-single-content .wp-block-quote {
    border-left: 3px solid #B9D49C;
    padding: 20px 25px;
    margin: 40px 0;
    background: rgba(185,212,156,0.05);
}

.case-single-content .wp-block-quote p {
    font-size: 1.2rem;
    font-style: italic;
    color: #B9D49C;
    margin-bottom: 10px;
}

.case-single-content .wp-block-quote cite {
    color: #7a9a5c;
    font-size: 0.9rem;
    font-style: normal;
}

/* Gutenberg Buttons */
.case-single-content .wp-block-buttons {
    margin: 30px 0;
    gap: 15px;
}

.case-single-content .wp-block-button__link {
    background: transparent !important;
    color: #B9D49C !important;
    border: 2px solid #B9D49C !important;
    border-radius: 0 !important;
    padding: 12px 25px !important;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.case-single-content .wp-block-button__link:hover {
    background: #B9D49C !important;
    color: #131C02 !important;
}

/* --- NAVIGATION --- */
.case-single-navigation {
    background-color: #131C02;
    padding: 40px 0;
    border-top: 2px solid rgba(185,212,156,0.35);
}

.case-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.case-nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    padding: 15px 20px;
    border: 2px solid rgba(185,212,156,0.35);
    transition: all 0.3s;
    flex: 1;
    max-width: 300px;
}

.case-nav-link:hover {
    border-color: #B9D49C;
    background-color: rgba(185,212,156,0.05);
}

.case-nav-link.disabled {
    opacity: 0;
    pointer-events: none;
}

.case-nav-prev {
    text-align: left;
}

.case-nav-next {
    text-align: right;
    justify-content: flex-end;
}

.case-nav-arrow {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 1.5rem;
    color: #B9D49C;
    flex-shrink: 0;
}

.case-nav-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.case-nav-label {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7a9a5c;
}

.case-nav-title {
    font-family: 'DekoDisplay', sans-serif;
    font-size: 0.95rem;
    color: #B9D49C;
    text-transform: uppercase;
}

.case-nav-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 15px 25px;
    border: 2px solid #B9D49C;
    color: #B9D49C;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.case-nav-all:hover {
    background-color: #B9D49C;
    color: #131C02;
}

.case-nav-grid-icon {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    gap: 3px;
}

.case-nav-grid-icon span {
    width: 8px;
    height: 8px;
    background-color: currentColor;
}

/* --- LIGHT MODE --- */
body.light-mode .case-single-grid-top,
body.light-mode .case-single-grid-bottom {
    background-color: #f5f5f5;
    background-image:
        linear-gradient(to right, #000 2px, transparent 2px),
        linear-gradient(to bottom, #000 2px, transparent 2px);
    border-bottom-color: #000;
}

body.light-mode .case-single-section {
    background-color: #f5f5f5;
}

body.light-mode .case-single-tab {
    background-color: #f5f5f5;
    border-color: #000;
}

body.light-mode .case-single-tab::after {
    background-color: #f5f5f5;
}

body.light-mode .case-single-tab-label {
    color: #000;
}

body.light-mode .case-single-title {
    color: #000;
    border-top-color: #000;
}

body.light-mode .case-single-tagline {
    color: #555;
}

body.light-mode .case-single-video-wrapper,
body.light-mode .case-single-featured-image {
    border-color: #000;
}

body.light-mode .case-single-meta {
    border-color: #000;
}

body.light-mode .case-meta-label {
    color: #666;
}

body.light-mode .case-meta-value {
    color: #000;
}

body.light-mode .case-single-content {
    color: #333;
}

body.light-mode .case-single-content h2,
body.light-mode .case-single-content h3,
body.light-mode .case-single-content h4 {
    color: #000;
}

body.light-mode .case-single-content a {
    color: #000;
}

body.light-mode .case-single-content img {
    border-color: #000;
}

body.light-mode .case-single-content blockquote {
    border-left-color: #000;
    color: #333;
}

/* Light Mode: Gutenberg Galerie */
body.light-mode .case-single-content .wp-block-gallery .wp-block-image {
    border-color: #000;
}

body.light-mode .case-single-content .wp-block-gallery figcaption {
    background: rgba(255,255,255,0.9);
    color: #000;
}

body.light-mode .case-single-content .wp-block-image img {
    border-color: #000;
}

body.light-mode .case-single-content .wp-block-image figcaption {
    color: #666;
}

body.light-mode .case-single-content .wp-block-video video {
    border-color: #000;
}

body.light-mode .case-single-content .wp-block-embed .wp-block-embed__wrapper {
    border-color: #000;
}

body.light-mode .case-single-content .wp-block-separator {
    border-top-color: #000;
}

body.light-mode .case-single-content .wp-block-quote {
    border-left-color: #000;
    background: rgba(0,0,0,0.02);
}

body.light-mode .case-single-content .wp-block-quote p {
    color: #333;
}

body.light-mode .case-single-content .wp-block-quote cite {
    color: #666;
}

body.light-mode .case-single-content .wp-block-button__link {
    color: #000 !important;
    border-color: #000 !important;
}

body.light-mode .case-single-content .wp-block-button__link:hover {
    background: #000 !important;
    color: #fff !important;
}

body.light-mode .case-single-navigation {
    border-top-color: #000;
}

body.light-mode .case-nav-link {
    border-color: #ccc;
}

body.light-mode .case-nav-link:hover {
    border-color: #000;
    background-color: rgba(0,0,0,0.02);
}

body.light-mode .case-nav-arrow {
    color: #000;
}

body.light-mode .case-nav-label {
    color: #666;
}

body.light-mode .case-nav-title {
    color: #000;
}

body.light-mode .case-nav-all {
    border-color: #000;
    color: #000;
}

body.light-mode .case-nav-all:hover {
    background-color: #000;
    color: #fff;
}

/* --- MOBILE --- */
@media (max-width: 991px) {
    .case-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .case-nav-wrapper {
        flex-wrap: wrap;
    }
    
    .case-nav-link {
        max-width: none;
        flex: 1 1 45%;
    }
    
    .case-nav-all {
        order: -1;
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .case-single-grid-top {
        height: 80px;
        background-size: 40px 40px;
    }
    
    .case-single-grid-bottom {
        height: 40px;
        background-size: 40px 40px;
    }
    
    .case-single-section {
        padding: 40px 0 60px 0;
    }
    
    .case-single-title {
        font-size: 2rem;
    }
    
    .case-single-tagline {
        font-size: 1rem;
    }
    
    .case-single-meta {
        gap: 25px;
    }
    
    .case-meta-item {
        flex: 1 1 45%;
    }
    
    .case-single-content {
        font-size: 0.95rem;
    }
    
    .case-single-content h2 {
        font-size: 1.6rem;
    }
    
    .case-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .case-nav-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .case-nav-link {
        flex: 1 1 100%;
        max-width: none;
    }
    
    .case-nav-link.disabled {
        display: none;
    }
}