/* ==========================================
HINTERGRUND & LOGO STYLING (UPDATE)
========================================== */

:root {
/* --- COLOR PALETTE --- */
--bg-deep: #000000;
--bg-card: rgba(10, 15, 30, 0.6);
--bg-card-hover: rgba(20, 25, 40, 0.9);

--text-main: #e0e0e0;
--text-muted: #8899cc; /* Nav Links */
--text-dark: #444444;

--accent-primary: #6E7ACF; /* Aegis Indigo */
--accent-white: #ffffff; /* Weiß */
--accent-green: #00ff41;   /* Terminal Green */
--accent-green_muted: #058725;   /* Terminal Gree Muted */
--accent-alert: #ff5555;   /* Error/Alert */
--accent-background: #161d3099; /* Für Inner - Buttons  */

--whatsapp: #25D366;

/* --- FONTS --- */
--font-term: 'Consolas', 'Courier New', monospace;
--font-ui: 'Courier Prime', monospace;
/* NEU: Orbitron Variable */
--font-logo: 'Orbitron', sans-serif;
}

body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;

/* PLATZHALTER: Hintergrundbild mit sanftem Abdunkelungs-Filter */
background-image: 
linear-gradient(rgba(5, 8, 17, 0.75), rgba(5, 8, 17, 0.90)), 
url('../img/nbd_bg.webp'); /* Hier deinen Bildpfad eintragen */
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax-Effekt beim Scrollen */
}

.highlight-glow {
color: var(--accent-primary); /* Dein definiertes Indigo/Violett */
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Der zarte weiße Glow */
}

/* Header & Brand Logo Layout */
.nbw-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0 20px 0;
}

.brand-link {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}

.brand-logo-img {
height: 100px; /* Maximale Höhe des Logos im Header */
width: auto;
padding-right: 30px;
object-fit: contain;
filter: drop-shadow(0 0 12px rgba(110, 122, 207, 0.4)); /* Dezenter Glow-Effekt */
transition: transform 0.3s ease;
}

.brand-link:hover .brand-logo-img {
transform: scale(1.03);
}

.brand-title-text {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 3px;
color: #fff;
font-size: clamp(1.4rem, 4vw, 2.2rem);
margin: 0;
text-shadow: 0 0 10px rgba(110, 122, 207, 0.8);
text-align: center;
}

.nav-links {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}

.social-cluster {
margin-left: auto; /* Drückt die Social-Icons ganz nach rechts */
display: flex;
align-items: center;
padding-left: 20px;
border-left: 1px dashed rgba(110, 122, 207, 0.3);
}

.nav-item.highlight {
color: var(--accent-primary);
text-shadow: 0 0 5px rgba(110, 122, 207, 0.5);
}

/* ==========================================
NO BULLSHIT WEBDESIGN - CORE ARCHITEKTUR
========================================== */

:root {
--bg-dark: #050811;
--text-main: #a0aec0;
--text-light: #e2e8f0;
--accent-primary: #6e7acf; /* Das Aegis/NBW Blau-Lila */
--accent-alert: #ff3232;   /* Signal-Rot für Launch-Alerts */
--font-heading: 'Futura', sans-serif;
--font-mono: 'Courier Prime', monospace;
--font-consolas: 'Consolas', monospace;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
}

/* ==========================================
HEADER & NAVIGATION
========================================== */
.nbw-header {
flex-direction: column; 
height: auto; 
padding: 40px 0 20px 0;
margin-bottom: 40px; 
background: transparent;
}

.nbw-main-nav {
display: flex;
font-family: var(--font-mono);
justify-content: space-between;
align-items: center;
text-align: left;
flex-wrap: wrap;
gap: 20px;
padding: 15px;
margin-bottom: 40px;
background: rgba(110, 122, 207, 0.05);
border: 1px solid rgba(110, 122, 207, 0.2);
border-radius: 6px;
}

.nav-links {
display: flex;
gap: 40px; /* Abstand zwischen den Text-Links */
}

.nav-item {
font-family: var(--font-heading);
color: var(--text-light);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 2px;
transition: all 0.3s ease;
}

.nav-item:hover {
color: var(--accent-primary);
text-shadow: 0 0 8px rgba(110, 122, 207, 0.6);
}

.nav-item-accent {
font-family: var(--font-heading);
color: var(--accent-primary); /* Standard: Das Aegis Blau-Lila */
text-shadow: 0 0 5px rgba(110, 122, 207, 0.5); /* Permanenter Glow */
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 2px;
transition: all 0.3s ease;
}

.nav-item-accent:hover {
color: var(--text-light); /* Hover: Wechsel auf Weiß */
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Starker weißer Glow */
}
.social-item {
color: var(--text-light);
transition: color 0.3s ease;
display: flex;
align-items: right;
}

.social-item:hover {
color: var(--accent-primary);
}

/* ==========================================
TERMINAL & VIBE KARTEN (UI ELEMENTE)
========================================== */
.terminal-box {
background: rgba(10, 15, 25, 0.8);
border: 1px solid rgba(110, 122, 207, 0.2);
padding: 25px;
margin-bottom: 30px;
border-radius: 4px;
}

.terminal-box h2 {
font-family: var(--font-heading);
color: var(--text-light);
font-size: 1.3rem;
margin-bottom: 15px;
letter-spacing: 1.5px;
}

.terminal-box p {
margin-bottom: 15px;
}

.status-terminal {
background: rgba(30, 5, 5, 0.4);
border: 1px solid rgba(255, 50, 50, 0.2);
border-left: 4px solid var(--accent-alert);
padding: 20px;
margin-bottom: 40px;
border-radius: 4px;
}

.status-terminal-green {
background: rgba(0, 255, 65, 0.05);
backdrop-filter: blur(3px);
border: 1px solid rgba(0, 255, 65, 0.2);
border-left: 4px solid var(--accent-green);
padding: 20px;
margin-bottom: 40px;
border-radius: 4px;
}

.font-alert {
font-weight: 900;
color: var(--accent-alert)
}

.font-highlight {
font-weight: 900;
color: var(--accent-primary)
}

.vibe-card {
background:  rgba(0, 11, 23, 0.668); 
border: 1px solid rgba(110, 122, 207, 0.15);
backdrop-filter: blur(3px); 
padding: 25px;
border-radius: 6px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
height: 100%;
hyphens: auto; 
}

.vibe-title {
display: block;
font-family: var(--font-heading);
color: var(--accent-primary);
font-size: clamp(0.85rem, 1.5vw, 1.3rem); /* Skaliert sauber mit dem Viewport */
letter-spacing: 1px;
white-space: nowrap; /* Zwingt die Titel-Kopfzeile strikt in eine Zeile */
overflow: hidden;
text-overflow: ellipsis; /* Fängt extreme Ausreißer sauber ab */
border-bottom: 1px solid rgba(110, 122, 207, 0.2);
padding-bottom: 10px;
margin-bottom: 15px;
}

.price-tag {
font-family: var(--font-mono);
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 15px;
font-weight: 900;
}

.note-list {
list-style: none;
}

.note-list li {
position: relative;
padding-left: 15px;
margin-bottom: 8px;
font-size: 0.9rem;
}

.note-list li::before {
content: '>';
position: absolute;
left: 0;
color: var(--accent-primary);
font-family: var(--font-mono);
}

/* ==========================================
TYPOGRAFIE & EFFEKTE
========================================== */
.glow-text {
text-shadow: 0 0 10px rgba(110, 122, 207, 0.5);
}

.highlight-glow {
color: var(--accent-primary);
text-shadow: 0 0 8px rgba(110, 122, 207, 0.6);
}

.highlight-redglow {
color: var(--accent-alert);
text-shadow: 0 0 8px rgba(255, 50, 50, 0.6);
}

.blink-dot {
animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
50% { opacity: 0; }
}

/* ==========================================
FORMULARE & BUTTONS
========================================== */
.btn-mission-action {
display: inline-block;
background: rgba(110, 122, 207, 0.1);
color: var(--text-light);
border: 1px solid var(--accent-primary);
font-family: var(--font-heading);
padding: 12px 24px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
}

.btn-widerruf-action {
display: inline-block;
background: rgba(167, 11, 11, 0.786);
color: var(--accent-alert);
border: 1px solid var(--accent-alert);
font-family: var(--font-heading);
padding: 12px 24px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
}

.btn-mission-action:hover {
background: var(--accent-primary);
color: #fff;
box-shadow: 0 0 15px rgba(110, 122, 207, 0.5);
}

.btn-widerruf-action:hover {
background: var(--accent-alert);
color: #000000;
box-shadow: 0 0 15px rgba(255, 50, 50, 0.5);
}


.aegis-label {
font-family: var(--font-heading);
font-size: 0.85rem;
color: var(--accent-primary);
display: block;
margin-bottom: 5px;
letter-spacing: 1px;
}

.aegis-input, .aegis-textarea {
width: 100%;
background: rgba(10, 15, 25, 0.8);
border: 1px solid rgba(110, 122, 207, 0.3);
color: var(--text-light);
padding: 10px 15px;
font-family: var(--font-body);
border-radius: 4px;
margin-bottom: 15px;
}

.aegis-input:focus, .aegis-textarea:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 8px rgba(110, 122, 207, 0.3);
}

.aegis-checkbox-container {
display: flex;
align-items: center;
border: 1px solid rgba(110, 122, 207, 0.2);
border-left: 3px solid var(--accent-primary);
padding: 10px;
border-radius: 4px;
}

.aegis-checkbox-text {
margin-left: 10px;
font-size: 0.9rem;
color: var(--text-light);
font-family: var(--font-mono);
cursor: pointer;
}

/* ==========================================
FOOTER
========================================== */
.nbw-footer-container {
margin-top: 60px;
border-top: 1px solid rgba(110, 122, 207, 0.2);
font-size: 0.85rem;
color: #666;
}

.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
}

.legal-links a {
color: var(--text-main);
text-decoration: none;
transition: color 0.2s;
}

.legal-links a:hover {
color: var(--accent-primary);
}

.divider {
margin: 0 10px;
color: #444;
}

/* Verstecke den Hamburger auf Desktop-Displays */
.mobile-menu-toggle {
display: none;
}

@media (max-width: 768px) {
/* Header-Struktur straffen */
.nbw-header {
padding: 20px 0 10px 0;
margin-bottom: 10px;
}

.brand-logo-img {
width: 100%;             
max-width: 280px;        
height: auto;            
padding-right: 0;        
}

/* Desktop-Schriftzug ausblenden */
.brand-title-text {
display: none !important;
}

/* Hamburger Button aktivieren */
.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%; /* Nimmt volle Breite ein, zentriert unter dem Logo */
gap: 8px;
background: rgba(110, 122, 207, 0.15);
backdrop-filter: blur(3px);
border: 1px solid var(--accent-primary);
color: var(--text-light);
padding: 12px;
margin-top: 20px;
font-family: var(--font-heading);
font-size: 0.9rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 4px;
transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
background: var(--accent-primary);
box-shadow: 0 0 15px rgba(110, 122, 207, 0.4);
}

/* Main Nav zur Dropdown-Matrix umbauen */
.nbw-main-nav {
background: rgba(10, 15, 25, 0.5);
backdrop-filter: blur(3px);
display: none; /* Standardmäßig geschlossen */
flex-direction: column;
align-items: center;
width: 100%;
padding: 20px;
gap: 20px;
margin-bottom: 40px;
}

.nbw-main-nav.is-open {
display: flex; /* Öffnet bei Klick */
}

.nav-links-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 15px;
}

.nav-item, .nav-item-accent {
font-size: 1rem;
letter-spacing: 2px;
width: 100%;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(110, 122, 207, 0.15);
}

.nav-secondary-container {
flex-direction: column;
width: 100%;
gap: 15px;
}

.nav-secondary-container > a {
margin-right: 0 !important;
text-align: center;
}

/* Social Icon Cluster zentrieren */
.social-cluster {
margin-left: 0 !important;
border-left: none !important;
border-top: 1px dashed rgba(110, 122, 207, 0.3) !important;
padding-left: 0 !important;
padding-top: 15px !important;
justify-content: center;
width: 100%;
}
}

/* ==========================================
HERO UPGRADE: GLASSMORPHISM & RESIZING
========================================== */


.hero-box {
/* Fast komplett transparent mit minimalem Aegis-Blau-Stich */
background: rgba(110, 122, 207, 0.01); 
border: 1px solid rgba(110, 122, 207, 0.25);
border-radius: 6px;
padding: 60px 30px; /* Etwas mehr vertikaler Raum für die neue Breite */

/* Der Blur-Effekt greift jetzt, da der Hintergrund durchlässig ist */
backdrop-filter: blur(2px); 
-webkit-backdrop-filter: blur(2px); 

/* Kombinierter Schatten: Außen für Tiefe, Innen (inset) für Glas-Reflektion an den Kanten */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(110, 122, 207, 0.05); 

/* Nimmt jetzt exakt dieselbe Breite ein wie die Nav-Bar und Terminals */
width: 100%;
margin: 40px 0 60px 0; 
}

.hero-title {
background: linear-gradient(135deg, #ffffff 0%, #6e7acf 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(110, 122, 207, 0.2);
}

/* Verschlankter Button (50% weniger Masse) */
.btn-primary-glow {
display: inline-block;
background: var(--accent-primary);
color: #ffffff !important;
border: none;
font-family: var(--font-heading);
padding: 12px 28px; /* Deutlich reduziert */
font-size: 0.9rem; /* Runterskaliert */
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 0 15px rgba(110, 122, 207, 0.4);
transition: all 0.3s ease;
}

.btn-primary-glow:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(110, 122, 207, 0.7);
background: #7d8ae5;
}

.btn-primary-glow {
display: inline-block;
background: var(--accent-primary);
color: #ffffff !important;
border: none;
font-family: var(--font-heading);
padding: 16px 40px;
font-size: 1.1rem;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 0 20px rgba(110, 122, 207, 0.5);
transition: all 0.3s ease;
}

.btn-primary-glow:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(110, 122, 207, 0.8);
background: #7d8ae5;
}

/* Karten & Grid Upgrade */
.vibe-card {
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}

.vibe-card:hover {
transform: translateY(-5px);
border-color: rgba(110, 122, 207, 0.5);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(110, 122, 207, 0.1);
}

.vibe-icon {
color: var(--accent-primary);
margin-bottom: 15px;
opacity: 0.8;
}

/* Titel-Fix: Verhindert dumme Zeilenumbrüche */
.vibe-title {
display: block;
font-family: var(--font-heading);
color: var(--text-light);
font-size: clamp(0.75rem, 2vw, 0.9rem); /* Skaliert flüssig */
margin-bottom: 15px;
letter-spacing: 1px;
white-space: nowrap; /* Zwingt den Text in eine Zeile */
overflow: hidden;
text-overflow: ellipsis; /* Setzt "..." falls der Screen extrem schmal wird */
border-bottom: 1px solid rgba(110, 122, 207, 0.2);
padding-bottom: 10px;
}

/* Lokale Matrix-Erweiterungen für die Galerie */
.gallery-container { padding: 40px 20px; max-width: 1200px; margin: 0 auto; padding-bottom: 100px; }

/* Filter Control Panel */
.filter-panel { 
    background: rgba(10, 15, 25, 0.8); 
    border: 1px solid rgba(110, 122, 207, 0.2); 
    padding: 20px; 
    border-radius: 4px; 
    margin-bottom: 30px; 
    display: flex; 
    flex-direction: column; /* Zwingt die Elemente untereinander */
    gap: 20px; 
}

.filter-group { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    align-items: center; 
    width: 100%; /* Nimmt den vollen Raum des Panels ein */
}

/* Suchfeld - Maximale Ausdehnung */
.search-input { 
    background: rgba(0,0,0,0.5); 
    border: 1px solid rgba(110, 122, 207, 0.3); 
    color: #fff; 
    padding: 10px 15px; /* Minimal mehr Padding für eine massivere Optik */
    font-family: var(--font-mono); 
    width: 100%; 
    max-width: 100%; /* Eliminiert die alte 300px Limitierung */
    outline: none; 
}

.btn-filter { background: transparent; border: 1px solid rgba(110, 122, 207, 0.4); color: var(--text-light); font-family: var(--font-mono); padding: 5px 15px; cursor: pointer; transition: all 0.2s; border-radius: 2px; }
.btn-filter:hover, .btn-filter.active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); box-shadow: 0 0 10px rgba(110, 122, 207, 0.4); }

/* Grid System */
.ornament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }


/* Asset Cards */
.ornament-card { 
    background: rgba(5, 8, 17, 0.9); 
    border: 1px solid rgba(110, 122, 207, 0.2); 
    border-radius: 4px; 
    padding: 15px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    position: relative; 
    overflow: hidden; 

    /* === GPU-FIX === */
    transform: translateZ(0); 
    will-change: transform;
}

.ornament-card:hover { transform: translateY(-5px); border-color: rgba(110, 122, 207, 0.6); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }

/* Selektions-Status */
.ornament-card.selected { border-color: var(--accent-primary); box-shadow: 0 0 15px rgba(110, 122, 207, 0.5); background: rgba(110, 122, 207, 0.1); }
.ornament-card.selected::after { content: '✓ GEWÄHLT'; position: absolute; top: 10px; right: 10px; background: var(--accent-primary); color: #fff; font-family: var(--font-heading); font-size: 0.7rem; padding: 2px 6px; border-radius: 2px; letter-spacing: 1px; }

/* Asset Bild: Invertiert schwarze Grafiken zu Weiß und setzt einen weichen Aegis-Glow */
.ornament-img { 
    max-width: 100%; 
    height: 120px; 
    object-fit: contain; 
    margin-bottom: 15px; 
    filter: invert(1) drop-shadow(0 0 8px rgba(110, 122, 207, 0.4)); 
    transition: all 0.3s ease;
    
    /* === GPU-FIX FÜR DEN REPAINT BUG === */
    transform: translateZ(0); /* Zwingt die Grafik in eine eigene Rendering-Ebene */
    backface-visibility: hidden; /* Verhindert Artefakte beim Skalieren/Rendern */
    will-change: transform, filter; /* Warnt die Engine vor dem Hover-Effekt */
}

/* Wenn das Asset vom Kunden ausgewählt wird, verstärken wir den Glow massiv */
.ornament-card.selected .ornament-img {
filter: invert(1) drop-shadow(0 0 18px rgba(110, 122, 207, 0.9));
transform: scale(1.05);
}

/* Typografie in der Karte */
.ornament-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.ornament-name { font-family: var(--font-heading); color: var(--text-light); font-size: 0.9rem; margin: 10px 0 5px 0; word-break: break-all; }

/* HUD - Floating Action Bar */
.hud-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(5, 8, 17, 0.95); border-top: 1px solid var(--accent-primary); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; transform: translateY(100%); transition: transform 0.3s ease; z-index: 1000; backdrop-filter: blur(5px); }
.hud-bar.visible { transform: translateY(0); }
.hud-info { font-family: var(--font-mono); color: var(--text-light); font-size: 1rem; }
.hud-info span { color: var(--accent-primary); font-weight: bold; font-size: 1.2rem; }

/* Modal Overlay für Webhook Transmission */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(3px); display: none; justify-content: center; align-items: center; z-index: 2000; }
.modal-overlay.active { display: flex; }
.modal-box { background: rgba(10, 15, 25, 0.95); border: 1px solid var(--accent-primary); padding: 30px; border-radius: 4px; width: 100%; max-width: 500px; box-shadow: 0 0 30px rgba(110, 122, 207, 0.3); }
.modal-close { float: right; color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); }
.modal-close:hover { color: var(--accent-alert); }

.admin-list-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
border-bottom: 1px solid #333; /* Darkmode-freundlich */
}

.tag-input {
padding: 6px 12px;
width: 250px;
background: #1e1e1e;
color: #e0e0e0;
border: 1px solid #444;
border-radius: 3px;
font-family: monospace;
}

.save-btn {
padding: 6px 15px;
background: #005f99;
color: white;
border: none;
cursor: pointer;
border-radius: 3px;
font-weight: bold;
}

.save-btn:hover {
background: #007acc;
}

body { padding: 40px 20px; background-color: var(--bg-dark); }
.vault-stats { display: flex; gap: 20px; margin-bottom: 20px; }
.stat-box { flex: 1; background: rgba(110, 122, 207, 0.05); padding: 15px; border: 1px dashed rgba(110, 122, 207, 0.3); border-radius: 4px; text-align: center; }
.stat-value { font-size: 2rem; font-family: var(--font-heading); color: var(--accent-primary); }

.file-list { max-height: 600px; overflow-y: auto; background: rgba(0,0,0,0.5); padding: 15px; border: 1px solid rgba(110, 122, 207, 0.2); font-family: var(--font-mono); }

.file-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px dashed rgba(110, 122, 207, 0.2); }
.file-item.is-collision { border-left: 3px solid var(--accent-alert); padding-left: 10px; }

.thumbnail-wrapper { 
    flex: 0 0 120px; /* Gibt dem Divider Platz */
    background: #050811; /* Das Vakuum sitzt jetzt auf dem Container */
    border: 1px solid rgba(110, 122, 207, 0.4); 
    border-radius: 4px; 
    padding: 5px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.mini-thumbnail { 
    width: 100%; 
    height: 50px; 
    object-fit: contain; 
    background: transparent !important; /* Kein eigener Hintergrund mehr */
}

.mini-thumbnail.is-svg { 
    filter: invert(1) brightness(1.5) drop-shadow(0 0 3px rgba(110, 122, 207, 0.8)) !important; 
}

/* Sonderbehandlung für PNGs (High-Res / Premium) */
.mini-thumbnail.is-png { 
    background: #e2e8f0 !important; /* Heller Hintergrund schützt Farben und Schwarz */
    height: 70px; /* Etwas mehr vertikaler Raum für komplexe Artworks */
    padding: 4px;
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    /* Kein Invert-Filter, Originalfarben bleiben erhalten! */
}

.file-info { flex: 1; font-size: 0.85rem; }

.tag-form { display: flex; gap: 10px; align-items: center; margin: 0; }
.tag-input { padding: 8px 12px; width: 280px; background: rgba(10, 15, 25, 0.8); color: var(--text-light); border: 1px solid rgba(110, 122, 207, 0.4); border-radius: 3px; font-family: var(--font-mono); font-size: 0.8rem; }
.tag-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 8px rgba(110, 122, 207, 0.3); }

.save-btn { padding: 8px 15px; background: rgba(110, 122, 207, 0.1); color: var(--text-light); border: 1px solid var(--accent-primary); cursor: pointer; border-radius: 3px; font-weight: bold; font-family: var(--font-heading); transition: 0.3s; }
.save-btn:hover { background: var(--accent-primary); color: #fff; box-shadow: 0 0 10px rgba(110, 122, 207, 0.5); }

.delete-btn { background: none; border: 1px solid var(--accent-alert); color: var(--accent-alert); cursor: pointer; padding: 8px 12px; border-radius: 3px; transition: 0.3s; margin-left: auto; }
.delete-btn:hover { background: var(--accent-alert); color: #000; box-shadow: 0 0 10px rgba(255, 50, 50, 0.5); }

/* Tag Badges in der Karte */
.ornament-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px; font-size: 0.4rem; }
.tag-badge { background: rgba(110, 122, 207, 0.1); border: 1px solid rgba(110, 122, 207, 0.3); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.65rem; padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================
   PREMIUM ASSETS (GOLD-KLASSIFIZIERUNG)
========================================== */
.ornament-card.is-premium {
    border-color: #d4af37; /* Klassisches Gold */
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.05);
}

/* Der Gold-Glow beim Hover */
.ornament-card.is-premium:hover {
    border-color: #f1c40f;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Premium Badge oben links */
.ornament-card.is-premium::before {
    content: 'PREMIUM';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #d4af37 0%, #aa8529 100%);
    color: #000;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    padding: 4px 10px;
    border-bottom-right-radius: 4px;
    font-weight: 900;
    letter-spacing: 1.5px;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Lokaler Override: Zwingt das Grid exakt in 3 Spalten passend zum 1000px Container */
.ornament-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-flow: dense; /* Füllt Lücken intelligent auf */
}

/* Filter Button für Premium */
.btn-filter.premium-toggle {
    border-color: #d4af37;
    color: #d4af37;
}

.btn-filter.premium-toggle:hover, 
.btn-filter.premium-toggle.active {
    background: #d4af37;
    color: #000;
    border-color: #d4af37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}


/* Hardcode-CSS für den Button */
.back-to-top-btn {
    position: fixed;
    bottom: 90px; /* Zwingt den Button über die HUD-Bar */
    right: 150px;
    z-index: 9999;
    background: rgba(5, 8, 17, 0.95);
    color: var(--text-light, #e2e8f0);
    border: 1px solid var(--accent-primary, #6e7acf);
    padding: 10px 18px; /* Etwas mehr Raum für die Atmung */
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 90px; /* Verhindert das Quetschen des Inhalts */
    backdrop-filter: blur(5px);
    opacity: 0; /* Startet unsichtbar */
    pointer-events: none; 
    transform: translateY(20px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(110, 122, 207, 0.3);
}

.back-to-top-btn svg {
    flex-shrink: 0; /* Verhindert, dass das SVG zusammengestaucht wird */
}

.back-to-top-btn.visible {
    opacity: 1;
    pointer-events: auto; 
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: var(--accent-primary, #6e7acf);
    color: #fff;
    box-shadow: 0 0 20px rgba(110, 122, 207, 0.7);
}

/* ==========================================
   VERTIKALE STRIPES (DOPPEL-BOX)
========================================== */
.ornament-card.is-stripe {
    grid-row: span 2; /* Dehnt die Karte über zwei Zeilen aus */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Passt die Höhe des Bildes innerhalb der Doppel-Box an */
.ornament-card.is-stripe .ornament-img {
    height: 280px; /* Standard ist 120px. Doppel-Höhe + Gap = ca. 260-280px */
    max-height: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}

/* ==========================================
   NBW: BUCHSATZ SHOWROOM MATRIX (gallery.php)
============================================= */

.gallery-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- MASTER TOGGLE (Print vs. E-Reader) --- */
.gallery-master-toggle {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.gallery-master-toggle button {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(110, 122, 207, 0.3);
    color: var(--text-light, #e8ecef);
    padding: 12px 25px;
    font-family: var(--font-heading), monospace;
    font-size: 0.9rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.gallery-master-toggle button.active {
    background: rgba(110, 122, 207, 0.2);
    border-color: var(--accent-primary, #6e7acf);
    color: #fff;
    box-shadow: 0 0 15px rgba(110, 122, 207, 0.3);
}

/* --- GENRE TABS --- */
.gallery-genre-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.genre-tab {
    padding: 8px 15px;
    font-family: var(--font-mono), monospace;
    font-size: 0.85rem;
    color: rgba(232, 236, 239, 0.5);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.genre-tab.active {
    color: var(--accent-primary, #6e7acf);
    border-bottom-color: var(--accent-primary, #6e7acf);
}

.genre-tab.locked {
    cursor: not-allowed;
    opacity: 0.4;
    border-bottom: 2px dashed rgba(232, 236, 239, 0.2);
}

/* --- SUB-SLIDES NAVIGATION --- */
.gallery-slide-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.slide-btn {
    background: transparent;
    border: 1px solid rgba(232, 236, 239, 0.2);
    color: rgba(232, 236, 239, 0.6);
    padding: 5px 12px;
    font-size: 0.8rem;
    font-family: var(--font-mono), monospace;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slide-btn.active {
    background: var(--accent-primary, #6e7acf);
    color: #000;
    border-color: var(--accent-primary, #6e7acf);
}

/* --- BÜHNEN BEREICH (Stage) --- */
.gallery-stage {
    position: relative;
    width: 100%;
    /* Etwas Abstand nach unten für Tooltips, die nach unten aufklappen */
    padding-bottom: 40px; 
}

/* Versteckt inaktive Frames */
.gallery-frame {
    display: none;
    width: 100%;
    position: relative;
}

.gallery-frame.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- PRINT MODUS BILDER --- */
.gallery-print-img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 4px;
}

/* --- E-READER SANDWICH MODUS (NATIVE FIX) --- */
.ereader-container {
    position: relative;
    max-width: 410px; 
    margin: 0 auto;
}

/* Frame Struktur im eReader */
.ereader-container .gallery-frame {
    display: none;
    width: 100%;
    position: relative;
}

.ereader-container .gallery-frame.active {
    display: block;
}

/* Der physische Rahmen (SVG) */
.ereader-bezel {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 5;
    display: block;
    pointer-events: none; /* Tooltips ungestört klicken/hoovern lassen */
}

/* Das Display-Bild */
.ereader-screen {
    position: absolute;
    width: 85.5%; 
    height: 77.3%;
    top: 5%;   /* Kinn-Abstand */
    left: 7.2%; 
    object-fit: cover; 
    object-position: center top; 
    background: #fff;
    z-index: 1; /* Strikt UNTER dem Rahmen */
}

/* --- HOTSPOTS (Sensorknoten) --- */
.hotspot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--accent-primary, #6e7acf);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
    z-index: 10;
    box-shadow: 0 0 0 0 rgba(110, 122, 207, 0.7);
    animation: pulseNode 2s infinite;
}

/* Im E-Reader Modus zwingend über den SVG Rahmen legen */
.ereader-container .hotspot {
    z-index: 100 !important; 
}

.hotspot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes pulseNode {
    0% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(110, 122, 207, 0.7); }
    70% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 10px rgba(110, 122, 207, 0); }
    100% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(110, 122, 207, 0); }
}

.hotspot:hover {
    animation: none;
    transform: translate(-50%, -50%) scale(1.2);
}

/* --- TOOLTIP BOX --- */
.tooltip-box {
    position: absolute;
    bottom: 150%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(10, 12, 16, 0.95);
    border: 1px solid var(--accent-primary, #6e7acf);
    padding: 15px;
    width: max-content;
    max-width: 250px;
    color: var(--text-light, #e8ecef);
    font-family: var(--font-mono), monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 99999 !important;
}

.tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--accent-primary, #6e7acf) transparent transparent transparent;
}

.hotspot:hover .tooltip-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- AUGENSCHONENDER FILTER FÜR SHOWROOM BILDER --- */
.gallery-print-img,
.ereader-screen {
    filter: brightness(0.92) contrast(0.95) sepia(0.08);
}

.slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.slider-track::-webkit-scrollbar {
    display: none;
}
.slider-item {
    flex: 0 0 240px; 
    scroll-snap-align: start;
}
.zoomable-cover {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(110, 122, 207, 0.3);
    cursor: zoom-in;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.zoomable-cover:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(110, 122, 207, 0.3);
}
.slider-nav-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 15px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.2s;
}
.slider-nav-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #000;
}
#zoom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 12, 0.95);
    backdrop-filter: blur(5px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#zoom-modal.active {
    display: flex;
    opacity: 1;
}
#zoom-image {
    max-width: 90%;
    max-height: 85vh;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 30px rgba(110, 122, 207, 0.2);
    border-radius: 4px;
}
#zoom-caption {
    color: #fff;
    font-family: var(--font-heading);
    margin-top: 20px;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* =========================================================
    MOBILE OPTIMIERUNG (IOS KILLSWITCH)
    ========================================================= */
@media (max-width: 768px) {
    /* Zwingt die asymmetrischen Spalten in strikte 100% Reihen */
    .designer-profile, .designer-portfolio {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    /* Vaporisiert die Vor/Zurück Buttons (Swipe übernimmt) */
    .slider-controls {
        display: none !important;
    }
    
    /* Optimiert die Karten-Breite für den Touch-Screen (75% der Displaybreite) */
    .slider-item {
        flex: 0 0 75vw !important; 
    }
    
    /* Minimalistischere Abstände für Mobile */
    .designer-profile {
        margin-bottom: 20px !important;
    }
}