/*!
OMNI G.A.M.E. — System Interface (PROD)
Architecture: Henrik Gyarmati | GYARMATI COMBAT
Role: System Architect • Designer • Instructor
*/

/* --- SYSTEM VARIABLES --- */
:root {
    --color-bg: #121212;       
    --color-surface: #1E1E1E;  
    --color-border: #333333;   
    --color-text: #FFFFFF;     
    --color-dim: #A0A0A0;      
    --color-accent: #D4AF37;   /* Signal Gold */
    
    --font-head: 'Teko', sans-serif; 
    --font-body: 'Inter', sans-serif; 
    --font-mono: 'Roboto Mono', monospace;
    
    --spacing-unit: 20px;
}

/* --- GLOBAL RESET & WATERMARK --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } 

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; 
}

/* THE WATERMARK */
body::before {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; height: 80vh;
    background-image: url('assets/logo-gold.svg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.04; 
    z-index: -999;
    pointer-events: none;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3 { font-family: var(--font-head); text-transform: uppercase; font-weight: 500; letter-spacing: 0.05em; line-height: 1; }
h1 { font-size: clamp(3.5rem, 8vw, 8rem); margin-bottom: 15px; }
h2 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--color-text); margin-bottom: 25px; }
h3 { font-size: 2.2rem; color: var(--color-text); margin-bottom: 5px; }
p { color: var(--color-dim); margin-bottom: 1.5rem; max-width: 650px; font-weight: 300; font-size: 1.1rem; }

.label { 
    font-family: var(--font-body); font-size: 0.8rem; color: var(--color-accent); 
    text-transform: uppercase; letter-spacing: 0.2em; display: block; 
    margin-bottom: 15px; font-weight: 600; border-left: 2px solid var(--color-accent); padding-left: 12px;
}
.label-center { border:none; padding:0; color: var(--color-dim); }

/* TECH ROWS (System Specs) */
.tech-row {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #bbb;
    border-left: 2px solid rgba(255,255,255,0.15);
    padding-left: 15px;
    margin: 15px 0 20px 0;
    line-height: 1.5;
}

.tech-tag {
    display: inline-block;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 10px;
}

/* BRIDGE CARD (Main Page) */
.bridge-section { padding: 100px 0; background: rgba(18,18,18,0.8); }
.bridge-card {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border-left: 4px solid var(--color-accent);
    padding: 60px 40px; max-width: 900px; margin: 0 auto; border-radius: 2px; text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.bridge-headline { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--color-accent); margin-bottom: 30px; }
.bridge-text { font-family: var(--font-body); font-size: 1.25rem; color: #ccc; line-height: 1.7; font-weight: 300; }
.bridge-text strong { color: #fff; font-weight: 600; }

.anchor-line {
    display: block; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-dim);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 15px; border-left: 2px solid #444; padding-left: 10px;
}

/* --- SYSTEM SEQUENCE --- */
.system-sequence {
    font-family: monospace; color: var(--color-dim); font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.1em; margin-top: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 25px; border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4); backdrop-filter: blur(5px);
}
.sequence-arrow { color: var(--color-accent); margin: 0 12px; }

@media (max-width: 600px) {
    .system-sequence { 
        flex-direction: column; gap: 5px; padding: 15px; margin-top: 15px;
        width: 100%; max-width: 280px; font-size: 0.75rem; 
    }
    .sequence-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* --- UTILITIES --- */
.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-unit); }
.text-center { text-align: center; }
.full-width { margin-top:0; width:100%; text-align:center; }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-text); }
.bg-darker { background: rgba(25,25,25,0.9); }

/* MENU TOGGLE */
.mobile-menu-icon { display: none; font-size: 1.5rem; color: var(--color-accent); cursor: pointer; z-index: 2000; }

/* --- MOBILE OVERLAY FIX (Zwingend unsichtbar am Start) --- */
#mobile-nav-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: rgba(10,10,10,0.98); 
    z-index: 1500;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    
    /* HIER IST DER FIX: Unsichtbar per Default */
    opacity: 0; 
    pointer-events: none; 
    visibility: hidden; /* Sicherer als nur Opacity */
    
    transition: opacity 0.3s ease, visibility 0.3s;
}

/* Wenn Active-Klasse gesetzt ist (durch JS), wird es sichtbar */
#mobile-nav-overlay.active { 
    opacity: 1; 
    pointer-events: all; 
    visibility: visible;
}

/* Styling der Links im Mobile Menu */
#mobile-nav-overlay a.mnav-link {
    font-family: var(--font-head); 
    font-size: 2rem; 
    color: #fff; 
    text-decoration: none;
    margin: 15px 0; 
    text-transform: uppercase; 
    letter-spacing: 0.1em;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    line-height: 1.2;
}

#mobile-nav-overlay .mnav-sub {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 5px;
    letter-spacing: 0.05em;
    color: #888;
}

/* Aktiver Link im Mobile Menu (Gold) */
#mobile-nav-overlay a.mnav-link.active,
#mobile-nav-overlay a.mnav-link:hover {
    color: var(--color-accent);
}
#mobile-nav-overlay a.mnav-link.active .mnav-sub {
    color: var(--color-accent);
    opacity: 1;
}

/* --- ANIMATION --- */
.reveal { opacity: 1; transform: translateY(0); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
body.js-enabled .reveal { opacity: 0; transform: translateY(30px); }
body.js-enabled .reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; }

/* --- NAVIGATION (UPDATED FOR LOGO & BADGE) --- */
nav {
    padding: 10px var(--spacing-unit); 
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: fixed; width: 100%; top: 0; z-index: 1000;
    background: rgba(18, 18, 18, 0.95); backdrop-filter: blur(15px);
    display: flex; justify-content: space-between; align-items: center;
}
.nav-brand { 
    display: flex; align-items: center; gap: 15px; 
    text-decoration: none; white-space: nowrap; overflow: hidden; max-width: 80%;
    color: #ffffff; 
}

/* FIX: LOGO ICON (Nutzt logo-gold.svg und färbt es weiß) */
.nav-logo-icon { 
    width: 30px; height: 30px; 
    margin-right: 15px;
    
    /* Wir nutzen die Datei, die wir sicher haben: logo-gold.svg */
    background-image: url('assets/logo-gold.svg');
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    
    /* Trick: Gold zu Weiß konvertieren via Filter */
    filter: grayscale(100%) brightness(500%);
    
    border-radius: 0; /* Kein Kreis-Beschnitt mehr */
    flex-shrink: 0;
    display: inline-block;
}

.nav-logo-text { font-family: var(--font-head); font-size: 1.5rem; color: #fff; letter-spacing: 0.1em; line-height: 1; }

/* FIX: STATUS BADGE */
.status-badge {
    display: inline-block;
    margin-left: 15px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    text-transform: uppercase;
    background: rgba(212, 175, 55, 0.1);
}

/* New Dual-Label Links */
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-item {
    text-decoration: none;
    display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.3s;
    opacity: 0.7;
}
.nav-item:hover { opacity: 1; }
.nav-main {
    font-family: var(--font-head); font-size: 1.1rem; color: #fff; letter-spacing: 0.1em; line-height: 1;
}
.nav-sub {
    font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-dim); 
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}
.nav-item.active { opacity: 1; }
.nav-item.active .nav-main, .nav-item.active .nav-sub { color: var(--color-accent); }

@media (max-width: 1100px) { 
    .hidden-mobile { display: none !important; } 
    .nav-links { display: none !important; } 
    .mobile-menu-icon { display: block; } 
}

/* --- HERO --- */
#hero { height: 100vh; display: flex; align-items: center; padding-top: 60px; position: relative; overflow: hidden; }
.hero-bg { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; z-index: -2; background-image: url('assets/hero.jpg'); background-size: cover; background-position: center; opacity: 0.6; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at 70% 50%, rgba(40,40,40,0.1) 0%, rgba(18,18,18,0.9) 80%); }
.hero-content { border-left: 1px solid var(--color-border); padding-left: 40px; margin-left: 5%; z-index: 10; }
.hero-sub { font-size: 1.3rem; color: #fff; margin-top: 20px; font-weight:400; }
.hero-sub-small { color:var(--color-dim); font-size:1rem; margin-top:10px; display:block; }
@media (max-width: 768px) { .hero-content { padding-left: 20px; margin-left: 0; border-left: 2px solid var(--color-border); } }

/* --- BUTTONS --- */
.btn { display: inline-block; padding: 14px 35px; text-decoration: none; text-transform: uppercase; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.2em; transition: all 0.2s; cursor: pointer; margin-top: 25px; border: 1px solid var(--color-accent); background: transparent; color: var(--color-dim); }
.btn-primary { background-color: var(--color-accent); color: #000; font-weight: 700; }
.btn-primary:hover { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline { border-color: var(--color-border); color: var(--color-dim); }
.btn-outline:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #000; font-weight: 600; }

/* --- CARDS & GRID --- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 60px; }
.brand-card { background: var(--color-surface); background: radial-gradient(circle at center, #252525 0%, #151515 100%); border: 1px solid var(--color-border); padding: 40px; transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; min-height: 600px; }
.brand-card:hover { border-color: var(--color-accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.card-image-area { flex-grow: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; overflow: hidden; border-radius: 4px; background: #000; position: relative; }
.card-image-area img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.5s ease, transform 0.8s ease; }
.brand-card:hover .card-image-area img { opacity: 1; transform: scale(1.03); }
.card-footer h3 { font-size: 2.5rem; }

/* --- MANIFESTO --- */
.manifesto-section { padding: 120px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; background: radial-gradient(circle at center, #222 0%, #000 100%); }
.manifesto-title { margin-bottom: 40px; font-size: 4rem; }
.manifesto-text { margin: 0 auto; font-size: 1.25rem; max-width: 800px; color: #fff; }

/* --- DETAIL SECTIONS --- */
.detail-section { padding: 120px 0; border-bottom: 1px solid var(--color-border); background: rgba(18,18,18,0.9); overflow: hidden; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } .detail-section { padding: 80px 0; } }
.detail-image-container { height: 500px; background: #1a1a1a; border: 1px solid #333; overflow: hidden; }
.detail-image-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
@media (max-width: 900px) { .detail-image-container { height: 300px; order: -1; } }

/* --- LISTS & PROOF --- */
.specs-list { border-top: 1px solid var(--color-border); margin-top: 30px; }
.specs-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-body); font-size: 0.95rem; color: #ccc; }
.specs-label { color: var(--color-accent); font-family: var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }

.micro-proof { padding: 40px 0; border-top: 1px solid var(--color-border); text-align: center; background: rgba(8,8,8,0.95); }
.proof-list { font-family: var(--font-head); font-size: 1.1rem; color: var(--color-dim); display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: 0.15em; }
.proof-item::before { content: '//'; color: var(--color-accent); margin-right: 10px; }

/* --- SYSTEM HERO (System Page) --- */
.system-hero {
    padding: 160px 0 80px;
    background: linear-gradient(to bottom, #121212 0%, #1a1a1a 100%);
    border-bottom: 1px solid var(--color-border);
}

.system-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 100px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    align-items: center; 
}
.system-grid:nth-child(even) { direction: rtl; }
.system-grid:nth-child(even) > * { direction: ltr; }

.sys-content { padding: 20px; }
.sys-number {
    font-family: var(--font-head);
    font-size: 6rem;
    color: rgba(255,255,255,0.05);
    line-height: 0.8;
    margin-bottom: -20px;
    display: block;
}

.sys-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.5s ease;
}
.sys-image:hover { filter: grayscale(0%) contrast(1); }

@media (max-width: 900px) {
    .system-grid, .system-grid:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: 40px; padding: 60px 0; }
    .sys-image { height: 250px; order: -1; }
}

/* --- TARGET PROFILES GRID --- */
.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.target-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-border);
    padding: 25px;
    transition: 0.3s;
}
.target-card:hover { border-color: var(--color-accent); background: rgba(255,255,255,0.05); }
.target-title { color: #fff; font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 10px; display: block; }
.target-desc { font-size: 0.9rem; color: var(--color-dim); margin: 0; }

/* --- KNOWLEDGE BASE (Final Clean Version) --- */
.kb-section {
    background: radial-gradient(circle at center, #1c1c1c 0%, #0e0e0e 80%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 60px 0;
    position: relative;
}

/* Flexbox zwingt alles in die perfekte Mitte */
.kb-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- OMNI CORE (Rotating Artifact) --- */
.omni-core {
    width: 160px;
    height: 160px;
    margin: 0 0 50px 0;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

.omni-core__mark {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform-style: preserve-3d;
    will-change: transform, filter;
    
    /* Die Rotation Animation (Multi-Axis) */
    animation: omniSpin 18s linear infinite, omniBreath 4.5s ease-in-out infinite;
    
    /* Basis-Glow */
    filter: drop-shadow(0 0 18px rgba(212,175,55,0.18));
    opacity: 0.95;
}

/* Hover Effekt: Intensiverer Glow */
@media (hover: hover) {
    .omni-core:hover .omni-core__mark {
        filter: drop-shadow(0 0 34px rgba(212,175,55,0.5));
        cursor: help;
    }
}

/* Die komplexe 3-Achsen Rotation (Gyroskop-Effekt) */
@keyframes omniSpin {
    0%   { transform: rotateX(18deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(18deg) rotateY(360deg) rotateZ(360deg); }
}

/* Das Atmen des Glows */
@keyframes omniBreath {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(212,175,55,0.12)); }
    50%      { filter: drop-shadow(0 0 26px rgba(212,175,55,0.22)); }
}

/* LOCKED BUTTON STYLE (Red Alert) */
.btn-locked {
    opacity: 0.6;
    cursor: not-allowed;
    border: 1px solid #444;
    color: #666;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
    overflow: visible;
}
.btn-locked:hover {
    border-color: #ff3333; /* RED ALERT */
    color: #ff3333;
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.4);
    text-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
    opacity: 1;
}
.btn-locked:hover::after {
    content: "[ STATUS: INVITE ONLY ]";
    position: absolute;
    bottom: -40px; left: 50%; transform: translateX(-50%);
    color: #ff3333;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* --- INTEL / PERSONNEL FILES --- */
.bio-grid {
    /* REMOVED: Old simple grid */
}

/* NEW: PYRAMID LAYOUT STRUCTURE */
.operators-grid-top {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten für Tolga & Thomas */
    gap: 40px;
    margin-bottom: 60px; /* Abstand zu dir nach unten */
    margin-top: 40px;
}

.operators-grid-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
}

.operators-grid-bottom .bio-card {
    max-width: 800px; /* Breite für die zentrierte Karte */
    width: 100%;
}

.bio-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--color-border);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bio-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.bio-image {
    width: 200px;
    height: 260px;
    object-fit: cover;
    filter: grayscale(100%); 
    border: 1px solid #444;
    flex-shrink: 0;
}

.bio-meta h3 { font-size: 1.8rem; margin-bottom: 5px; color: #fff; }
.bio-rank { font-family: var(--font-mono); color: var(--color-accent); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

.bio-text { font-size: 0.95rem; color: #bbb; line-height: 1.6; }

/* --- FIELD OPS (VIDEO GRID) --- */
.ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.video-card {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--color-border);
    cursor: pointer;
    overflow: hidden;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.4s ease;
    opacity: 0.7;
}

.video-card:hover .video-thumb {
    filter: grayscale(0%) contrast(1);
    opacity: 1;
    transform: scale(1.02);
}

.play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5);
    transition: 0.3s;
}
.play-icon::after {
    content: '▶';
    color: #fff;
    font-size: 20px;
    margin-left: 4px;
}
.video-card:hover .play-icon {
    border-color: var(--color-accent);
    background: rgba(0,0,0,0.8);
}
.video-card:hover .play-icon::after { color: var(--color-accent); }

.video-label {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 15px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* REDACTED / CLASSIFIED VIDEO SLOTS */
.video-card.redacted {
    cursor: not-allowed;
    border-color: #333;
    position: relative;
}
.video-card.redacted .video-thumb {
    filter: blur(8px) grayscale(100%);
    opacity: 0.3;
    transform: scale(1) !important;
}
.video-card.redacted::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 10px, transparent 10px, transparent 20px);
    z-index: 1;
}
.video-card.redacted::after {
    content: "[ FILE CLASSIFIED ]";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    border: 2px solid #444;
    color: #666;
    padding: 10px 20px;
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    z-index: 2;
    background: rgba(0,0,0,0.8);
}
.video-card.redacted .play-icon { display: none; }

/* --- VIDEO MODAL (OVERLAY) --- */
#video-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#video-modal.active { opacity: 1; pointer-events: all; }

.modal-content {
    width: 80%; max-width: 1000px;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--color-border);
    position: relative;
}

/* Close Button (Fixed Viewport) */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4000;
    color: #fff;
    font-family: var(--font-head);
    font-size: 2rem;
    cursor: pointer;
}
@media (max-width: 600px) {
    .close-modal { font-size: 1.6rem; top: 12px; right: 12px; }
}

/* MARQUEE UPDATES */
.marquee-wrapper {
    overflow: hidden;
    background: #0e0e0e;
    padding: 40px 0;
    border-top: 1px solid var(--color-border);
    white-space: nowrap;
    position: relative;
}
.marquee-track {
    display: inline-block;
    animation: marquee 60s linear infinite;
}
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-logo {
    height: 80px;
    margin: 0 40px;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: 0.3s;
    vertical-align: middle;
}
.marquee-wrapper:hover .marquee-logo { opacity: 0.8; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 900px) {
    .bio-grid { grid-template-columns: 1fr; }
    .ops-grid { grid-template-columns: 1fr; }
    
    /* MOBILE FIX FOR PYRAMID LAYOUT */
    .operators-grid-top { grid-template-columns: 1fr; }
}

/* Mobile Anpassung für die großen Bio-Bilder */
@media (max-width: 600px) {
    .bio-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .bio-image {
        width: 100%;
        max-width: 300px;
        height: 350px;
        margin-bottom: 20px;
    }
    .bio-meta .tech-row {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: 15px;
        padding-left: 0;
    }
}

/* --- FOOTER --- */
footer { padding: 80px 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; color: #666; background: rgba(8,8,8,0.95); }
.footer-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-brand { color: #fff; display:block; margin-bottom:15px; font-family: var(--font-head); letter-spacing: 0.1em; font-size: 1.2rem; }
.footer-info { display:block; color:#888; margin-bottom:5px; }
.footer-head { color: #fff; display:block; margin-bottom:15px; font-family: var(--font-body); font-size: 0.9rem; }
.footer-link { display:block; color:#888; text-decoration:none; margin-bottom:5px; }
.footer-meta { color:#666; text-decoration:none; margin-right:20px; font-size: 0.8rem; text-transform: uppercase; }
.footer-credits { margin-top: 30px; font-size: 0.7rem; color: #444; letter-spacing: 0.05em; text-transform:uppercase; }

/* --- MISSION & INDEX UPGRADES --- */

/* Index Visual Hook */
.visual-hook {
    position: relative; padding: 120px 0; text-align: center;
    background-image: url('assets/thumb-witcher.jpg'); 
    background-size: cover; background-position: center;
    border-top: 1px solid #333; overflow: hidden;
}
.visual-hook::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.85); z-index: 1; }
.visual-hook .container { position: relative; z-index: 2; }

/* Mission Cards (Top Grid) */
.mission-top-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; margin-bottom: 60px;
}
.mission-card {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border-left: 3px solid var(--color-accent); padding: 30px;
    transition: transform 0.3s ease; position: relative;
}
.mission-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.m-date { font-family: var(--font-mono); color: var(--color-accent); font-size: 0.9rem; margin-bottom: 10px; display:block;}
.m-title { font-family: var(--font-head); font-size: 2rem; color: #fff; line-height: 1; margin-bottom: 10px; }
.m-loc { color: #888; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* Consulting Box */
.consulting-box {
    border: 1px solid var(--color-accent); background: rgba(212,175,55,0.05);
    padding: 40px; margin-top: 60px; text-align: center;
}
.consulting-title { font-family: var(--font-head); font-size: 2.5rem; color: #fff; margin-bottom: 10px; }

/* Schedule Table */
.schedule-table {
    width: 100%; border-collapse: collapse; margin-top: 40px;
    font-family: var(--font-mono); font-size: 0.9rem; color: #ccc;
}
.schedule-table th {
    text-align: left; border-bottom: 2px solid var(--color-accent); padding: 15px;
    color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em;
}
.schedule-table td { padding: 20px 15px; border-bottom: 1px solid #333; }
.schedule-table tr:hover td { background: rgba(255,255,255,0.03); color: #fff; }
.status-open { color: #4caf50; font-weight: bold; }
.status-full { color: #f44336; text-decoration: line-through; opacity: 0.6; }

@media (max-width: 768px) {
    .schedule-table thead { display: none; }
    .schedule-table tr { display: block; margin-bottom: 20px; border: 1px solid #333; padding: 10px; }
    .schedule-table td { display: block; text-align: right; padding: 5px 10px; border: none; }
    .schedule-table td::before { content: attr(data-label); float: left; color: var(--color-dim); font-size: 0.8rem; text-transform: uppercase; }
}
/* --- MAIN PAGE MISSION TEASER (DEZENT / HUD STYLE) --- */
.mission-teaser-bar {
    background: #080808; /* Fast Schwarz statt Gelb */
    border-top: 1px solid rgba(212,175,55,0.3); /* Feine Gold-Linie oben */
    border-bottom: 1px solid rgba(212,175,55,0.3); /* Feine Gold-Linie unten */
    color: #bbb; /* Text Grau */
    padding: 12px 0; /* Schlanker */
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mission-teaser-bar strong { color: var(--color-accent); font-weight: normal; } /* Datum in Gold */
.mission-teaser-bar a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
    border: 1px solid #333;
    padding: 2px 10px;
    font-size: 0.75rem;
    transition: all 0.3s;
}
.mission-teaser-bar a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* --- FLOATING COMMS (SECURE LINK) --- */
.float-comms {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #000; /* Hartes Schwarz */
    border: 1px solid #333;
    padding: 10px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.float-comms:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(212,175,55,0.2);
}
.float-comms svg {
    width: 20px; height: 20px;
    fill: #fff;
    transition: fill 0.3s;
}
.float-comms:hover svg { fill: var(--color-accent); }

.float-comms-text {
    font-family: var(--font-head);
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 1.1rem;
    line-height: 1;
    padding-top: 2px;
}
.float-comms:hover .float-comms-text { color: var(--color-accent); }

@media (max-width: 600px) {
    .float-comms { bottom: 20px; right: 20px; padding: 12px; border-radius: 50%; }
    .float-comms-text { display: none; } /* Nur Icon auf Handy */
}
/* --- ACCORDION SYSTEM (PROGRESSIVE DISCLOSURE) --- */
.accordion-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.accordion-trigger {
    background: none; 
    border: none;
    color: var(--color-accent); /* Nutzt deine zentrale Gold-Farbe */
    font-family: var(--font-mono);
    font-size: 0.85rem; 
    letter-spacing: 0.15em;
    cursor: pointer; 
    padding: 15px 0;
    display: inline-block; 
    margin-top: 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.accordion-trigger:hover { 
    color: #fff; 
    border-bottom-color: var(--color-accent); 
    letter-spacing: 0.2em; /* Micro-Animation */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    opacity: 0;
}

.accordion-content.open {
    opacity: 1;
}

.accordion-inner {
    padding-top: 25px; 
    padding-bottom: 10px;
    color: #ccc; 
    font-size: 1rem; 
    line-height: 1.6;
    text-align: left;
    border-left: 2px solid var(--color-accent);
    padding-left: 20px;
    margin-left: 10px;
}

.accordion-inner strong { color: #fff; }
.accordion-inner ul { margin-bottom: 0; padding-left: 15px; }
.accordion-inner li { margin-bottom: 5px; }

/* Override für zentrierte Sektionen damit Text lesbar bleibt */
.text-center .accordion-inner {
    text-align: left; 
}