/* ============================================ */
/* SCHRITT 1: WARME FARBPALETTE                */
/* ============================================ */

:root {
    /* Warme Akzentfarben */
    --warm-orange: #ff9b50;
    --soft-orange: #ffb380;
    --warm-green: #7fb069;
    --soft-green: #a8c09a;
    --warm-blue: #5c9ead;
    --soft-blue: #7fb3c2;
    
    /* Warme Hintergrundfarben statt reines Weiß */
    --cream: #faf8f3;
    --warm-white: #fffef9;
    --warm-gray: #f7f5f0;
}

/* Dark Mode Farben */
.dark {
    --warm-orange: #ff9b50;
    --soft-orange: #d67b40;
    --warm-green: #7fb069;
    --soft-green: #6a9055;
    --warm-blue: #6aa8b8;
    --soft-blue: #5c8a9a;
    --cream: #2a2925;
    --warm-white: #1f1e1b;
    --warm-gray: #2d2b27;
}

/* Warme Hintergründe statt reines Weiß */
body {
    background: var(--warm-white) !important;
}

.dark body {
    background: #1a1918 !important;
}

/* Header mit warmem Hintergrund */
header, nav, .bg-header-bg {
    background: linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%) !important;
}

.dark header, .dark nav, .dark .bg-header-bg {
    background: linear-gradient(180deg, var(--warm-gray) 0%, var(--warm-white) 100%) !important;
}

/* Sections mit warmen Tönen */
section:nth-child(even) {
    background: var(--warm-gray) !important;
}

.dark section:nth-child(even) {
    background: var(--warm-gray) !important;
}

/* Primary Buttons mit warmen Farben */
.bg-blue-600, .bg-blue-700 {
    background: linear-gradient(135deg, var(--warm-blue), var(--soft-blue)) !important;
}

.bg-blue-600:hover, .bg-blue-700:hover {
    background: linear-gradient(135deg, var(--soft-blue), var(--warm-blue)) !important;
}

/* Success/Green Elements */
.bg-green-600, .bg-green-700 {
    background-color: var(--warm-green) !important;
}

/* Input-Felder mit warmem Hintergrund */
input, textarea, select {
    background: var(--warm-white) !important;
}

.dark input, .dark textarea, .dark select {
    background: var(--warm-gray) !important;
}

/* Karten mit warmem Hintergrund */
.bg-white {
    background-color: var(--warm-white) !important;
}

.dark .dark\:bg-gray-800 {
    background-color: var(--warm-gray) !important;
}

/* Logo-Fixes für Dark Mode */
/* Header Logo mit rundem hellem Hintergrund im Dark Mode */
.dark header img[src*="Logo"],
.dark nav img[src*="Logo"] {
    background-color: white;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Hero-Section Logo mit hellem Hintergrund - ohne Border */
.dark section img[src*="Logo"],
.dark .hero-section img[src*="Logo"],
.dark [class*="hero"] img[src*="Logo"] {
    background-color: white;
    border-radius: 50%;
    padding: 15px;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* Stelle sicher, dass das runde Logo auch rund bleibt und keine Border hat */
.dark img.rounded-full[src*="Logo"] {
    background-color: white;
    padding: 15px;
    border: none !important;
}