/*
 * ============================================
 * THE IRON - Theme Configuration
 * ============================================
 * Ändere hier die Farben für die gesamte Seite
 * ============================================
 */

:root {
    /* === AKTUELL: LOOK 0 "The Iron Classic" (Original) === */
    /* Thema: Das originale Orange/Schwarz Design */

    /* Akzentfarbe (Orange) */
    --brand-primary: #FF5500;
    --brand-primary-hover: #ff6b1a;

    /* Hintergrundfarben */
    --bg-black: #09090b;
    --bg-dark: #18181b;
    --bg-card: #1f1f23;

    /* Textfarben */
    --text-white: #f4f4f5;
    --text-gray: #a1a1aa;
    --text-muted: #71717a;

    /* Rahmen */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
}

/* === TAILWIND OVERRIDE STYLES === */
/* Diese überschreiben die Tailwind-Farben mit CSS-Variablen */

.text-brand-orange {
    color: var(--brand-primary) !important;
}

.bg-brand-orange {
    background-color: var(--brand-primary) !important;
}

.border-brand-orange {
    border-color: var(--brand-primary) !important;
}

.hover\:text-brand-orange:hover {
    color: var(--brand-primary) !important;
}

.hover\:bg-brand-orange:hover {
    background-color: var(--brand-primary) !important;
}

.hover\:border-brand-orange:hover {
    border-color: var(--brand-primary) !important;
}

.selection\:bg-brand-orange::selection {
    background-color: var(--brand-primary) !important;
}

/* Scrollbar mit Akzentfarbe */
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary) !important;
}

/* Focus States */
.focus\:border-brand-orange:focus {
    border-color: var(--brand-primary) !important;
}

/* === RESPONSIVE OPTIMIERUNGEN === */

/* Mobile Navigation Fix */
@media (max-width: 768px) {
    #navbar-sticky {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        padding: 20px;
        z-index: 40;
    }

    #navbar-sticky ul {
        flex-direction: column;
        gap: 15px;
    }

    #navbar-sticky.hidden {
        display: none !important;
    }

    /* Kontakt-Links Stack auf Mobile */
    .contact-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Galerie Responsive */
@media (max-width: 640px) {
    .columns-1.md\:columns-2.lg\:columns-3 {
        columns: 1 !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .columns-1.md\:columns-2.lg\:columns-3 {
        columns: 2 !important;
    }
}

/* Form Responsive */
@media (max-width: 768px) {
    form .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}