/* Dark Mode Support - Umfassende Anpassungen für alle Komponenten */

@media (prefers-color-scheme: dark) {
    :root {
        /* Grundfarben - Dark Mode */
        --bg-page: #1a1a1a;
        --bg-page-soft: #222222;
        --bg-page-gradient-start: #1a1a1a;
        --bg-page-gradient-mid: #1f1f1f;
        --bg-page-gradient-end: #252525;
        --bg-card: #2a2a2a;
        --bg-card-soft: #333333;
        --bg-card-alt: #2d2d2d;
        --bg-header: rgba(42, 42, 42, 0.96);
        --bg-nav-overlay: rgba(42, 42, 42, 0.95);
        
        --color-text: #e0e0e0;
        --color-muted: #a0a0a0;
        --color-light: #888888;
        --color-white: #ffffff;
        --color-text-on-green: #ffffff;
        
        /* Grüne Farben bleiben gleich (Markenfarbe) */
        --green: #6f8f4f;
        --green-dark: #8ba66f; /* Heller im Dark Mode für besseren Kontrast */
        --green-light: #9fba7f;
        --green-gradient-start: #6f8f4f;
        --green-gradient-end: #8ba66f;
        --green-hover-start: #7a9f57;
        --green-hover-end: #9fba7f;
        --green-shadow: rgba(111, 143, 79, 0.4);
        --green-shadow-hover: rgba(111, 143, 79, 0.5);
        
        /* Gold-Farben angepasst */
        --gold: #d4a574;
        --gold-soft: #e0b585;
        --gold-dark: #b8956a;
        --gold-text: #e0d4b0;
        --wood: #6b5d4a;
        --wood-light: #7a6b57;
        --wood-bg: #3a3429;
        
        --danger: #e06b5f;
        --success: #5fb370;
        
        --border-soft: #444444;
        --border-lighter: #3a3a3a;
        --border-wood: #5a4f42;
        --border-white: rgba(255, 255, 255, 0.2);
        
        --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.6);
        --shadow-green: 0 4px 12px rgba(111, 143, 79, 0.4);
    }
    
    /* Body & Grundlayout */
    body {
        background: radial-gradient(circle at top, var(--bg-page-gradient-start) 0, var(--bg-page-gradient-mid) 40%, var(--bg-page-gradient-end) 100%);
        color: var(--color-text);
    }
    
    /* Header & Navigation */
    .site-header {
        background: var(--bg-header);
        border-bottom-color: var(--border-soft);
    }
    
    .main-nav {
        background: var(--bg-card);
        border-bottom-color: var(--border-soft);
    }
    
    .nav-links a {
        color: var(--color-text);
    }
    
    .nav-links a:hover {
        color: var(--green-light);
        background: var(--bg-card-soft);
    }
    
    /* Logo */
    .logo-circle {
        border-color: var(--border-soft);
        background: radial-gradient(circle at 20% 20%, var(--bg-card-alt), var(--gold-soft) 45%, var(--gold) 80%);
        color: var(--gold-text);
    }
    
    .branding-text .site-title {
        color: var(--green-light);
    }
    
    .branding-text .site-subtitle {
        color: var(--color-muted);
    }
    
    /* Buttons */
    .btn-primary {
        background: linear-gradient(135deg, var(--green-gradient-start), var(--green-gradient-end));
        color: var(--color-text-on-green);
        box-shadow: var(--shadow-green);
    }
    
    .btn-primary:hover,
    .btn-primary:focus-visible {
        box-shadow: 0 10px 22px var(--green-shadow-hover);
    }
    
    .btn-outline {
        border-color: var(--border-soft);
        background: var(--bg-card);
        color: var(--color-text);
    }
    
    .btn-outline:hover,
    .btn-outline:focus-visible {
        background: var(--bg-card-soft);
        border-color: var(--green-light);
        color: var(--green-light);
    }
    
    .btn-hero.btn-outline {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--color-white);
    }
    
    .btn-hero.btn-outline:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    /* Hero Section */
    .hero-image-overlay {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.65) 100%
        );
    }
    
    .hero-content {
        color: var(--color-white);
    }
    
    .hero-eyebrow-new {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .hero-title-new {
        color: var(--color-white);
    }
    
    .hero-subtitle-new {
        color: rgba(255, 255, 255, 0.95);
    }
    
    /* Cards & Content */
    .content-card,
    .menu-card,
    .card,
    .usp-card {
        background: var(--bg-card);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    .content-card h1,
    .content-card h2,
    .content-card h3,
    .menu-card h1,
    .menu-card h2,
    .menu-card h3 {
        color: var(--green-light);
    }
    
    /* Speisekarte */
    .menu-hero {
        background: linear-gradient(135deg, rgba(111, 143, 79, 0.1) 0%, rgba(42, 42, 42, 0.9) 100%);
        border-bottom-color: var(--border-soft);
    }
    
    .menu-title {
        color: var(--green-light);
    }
    
    .menu-subtitle {
        color: var(--color-muted);
    }
    
    .menu-badge {
        background: var(--bg-card);
        border-color: var(--border-soft);
        color: var(--green-light);
    }
    
    .menu-badge:hover {
        background: var(--bg-card-soft);
        border-color: var(--green-light);
    }
    
    .menu-filters-wrapper {
        background: rgba(42, 42, 42, 0.98);
        border-bottom-color: var(--border-soft);
    }
    
    .menu-search-input {
        background: var(--bg-card);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    .menu-search-input:focus {
        border-color: var(--green-light);
    }
    
    .menu-pill {
        background: var(--bg-card);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    .menu-pill:hover {
        background: var(--bg-card-soft);
        border-color: var(--green-light);
    }
    
    .menu-pill.active {
        background: var(--green);
        color: var(--color-white);
        border-color: var(--green);
    }
    
    .menu-section-header {
        border-bottom-color: var(--green);
    }
    
    .menu-section-header::after {
        background: var(--green);
    }
    
    .menu-section-icon-wrapper {
        background: linear-gradient(135deg, var(--green), var(--green-dark));
        box-shadow: 0 4px 12px rgba(111, 143, 79, 0.3);
    }
    
    .menu-section-title {
        color: var(--green-light);
    }
    
    .menu-section-count {
        background: var(--bg-card-soft);
        color: var(--color-muted);
    }
    
    .menu-section-description {
        color: var(--color-muted);
    }
    
    .menu-item-card {
        background: var(--bg-card);
        border-color: var(--border-soft);
        box-shadow: var(--shadow-soft);
    }
    
    .menu-item-card::before {
        background: linear-gradient(90deg, var(--green), var(--green-dark));
    }
    
    .menu-item-card:hover {
        box-shadow: var(--shadow-medium);
        border-color: var(--green);
    }
    
    .menu-item-name {
        color: var(--color-text);
    }
    
    .menu-item-price {
        color: var(--green-light);
    }
    
    .menu-item-description {
        color: var(--color-muted);
        border-top-color: var(--border-soft);
    }
    
    .menu-item-card-accent {
        background: radial-gradient(circle, rgba(111, 143, 79, 0.1) 0%, transparent 70%);
    }
    
    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        background: var(--bg-card-soft);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--green-light);
        background: var(--bg-card);
    }
    
    /* Tables */
    .table {
        background: var(--bg-card);
        color: var(--color-text);
    }
    
    .table th,
    .table td {
        border-color: var(--border-soft);
    }
    
    .table th {
        background: var(--bg-card-soft);
        color: var(--color-text);
    }
    
    .table tbody tr:hover {
        background: var(--bg-card-soft);
    }
    
    /* Footer */
    .site-footer {
        background: var(--bg-card);
        border-top-color: var(--border-soft);
        color: var(--color-text);
    }
    
    .footer-section h3 {
        color: var(--green-light);
    }
    
    .footer-section a {
        color: var(--color-muted);
    }
    
    .footer-section a:hover {
        color: var(--green-light);
    }
    
    /* Status Indicators */
    .status-indicator {
        background: var(--bg-card-soft);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    .status-indicator.open {
        background: rgba(95, 179, 112, 0.2);
        border-color: var(--success);
        color: var(--success);
    }
    
    .status-indicator.closed {
        background: rgba(224, 107, 95, 0.2);
        border-color: var(--danger);
        color: var(--danger);
    }
    
    /* Sections */
    .section {
        color: var(--color-text);
    }
    
    .section-title {
        color: var(--green-light);
    }
    
    .section-description {
        color: var(--color-muted);
    }
    
    .section-kicker {
        color: var(--color-muted);
    }
    
    /* USP Section */
    .usp-section {
        background: var(--bg-card-soft);
    }
    
    /* Breadcrumbs */
    .breadcrumb-list {
        color: var(--color-muted);
    }
    
    .breadcrumb-item a {
        color: var(--green-light);
    }
    
    .breadcrumb-item a:hover {
        color: var(--green);
    }
    
    .breadcrumb-current {
        color: var(--color-text);
    }
    
    /* Cookie Banner */
    .cookie-banner {
        background: rgba(42, 42, 42, 0.98);
        border-top-color: var(--green);
    }
    
    .cookie-banner-text h3 {
        color: var(--green-light);
    }
    
    .cookie-banner-text p {
        color: var(--color-text);
    }
    
    .cookie-banner-links a {
        color: var(--green-light);
    }
    
    /* Admin (falls sichtbar) */
    .admin-body {
        background: radial-gradient(circle at top, var(--bg-page-gradient-start) 0, var(--bg-page-gradient-mid) 40%, var(--bg-page-gradient-end) 100%);
    }
    
    .admin-nav {
        background: var(--bg-header);
        border-bottom-color: var(--border-soft);
    }
    
    /* Links */
    a {
        color: var(--green-light);
    }
    
    a:hover,
    a:focus-visible {
        color: var(--green);
    }
    
    /* Spezielle Komponenten */
    .header-phone-mobile {
        background: linear-gradient(135deg, var(--green-gradient-start), var(--green-gradient-end));
        color: var(--color-text-on-green);
        box-shadow: var(--shadow-green);
    }
    
    .header-phone-mobile:hover {
        box-shadow: 0 6px 16px var(--green-shadow-hover);
    }
    
    /* Event Cards */
    .event-card {
        background: var(--bg-card);
        border-color: var(--border-soft);
    }
    
    .event-card h3 {
        color: var(--green-light);
    }
    
    /* Gallery */
    .gallery-item {
        border-color: var(--border-soft);
    }
    
    /* Trust Badges */
    .trust-badge {
        background: var(--bg-card-soft);
        border-color: var(--border-soft);
        color: var(--color-text);
    }
    
    /* Print Styles bleiben unverändert */
    @media print {
        body {
            background: white !important;
            color: black !important;
        }
    }
}