/* /var/www/html/new/style.css */

/* Basis-Layout für One-Pager */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

.header-fixed {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(15, 23, 42, 0.95); /* Entspricht bg-slate-900 mit Transparenz */
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease;
}

.content-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.footer-wrapper {
    flex-shrink: 0;
}

/* ==========================================
   CSS FÜR DEN HELL/DUNKEL SWITCH (TOGGLE)
   ========================================== */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0 5px; 
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #475569; /* slate-600 */
    transition: .3s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
}
input:checked + .slider {
    background-color: #cbd5e1; /* Ein helleres Grau für den Light-Mode Zustand */
}
input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #ffffff;
}
.slider.round {
    border-radius: 24px;
}
.slider.round:before {
    border-radius: 50%;
}

/* ==========================================
   LIGHT THEME OVERRIDES
   Biegt die fest codierten Dark-Mode Tailwind-Klassen automatisch um
   ========================================== */
body.light-theme {
    background-color: #f8fafc !important; /* bg-slate-50 */
    color: #0f172a !important; /* text-slate-900 */
}
body.light-theme .header-fixed {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
}
body.light-theme .bg-slate-900 {
    background-color: #ffffff !important; /* Feature-Boxen */
}
body.light-theme .bg-slate-800,
body.light-theme .bg-slate-800\/50 {
    background-color: #f1f5f9 !important; /* Sektionen & Modal Hintergründe */
}
body.light-theme .border-slate-800,
body.light-theme .border-slate-700 {
    border-color: #cbd5e1 !important; /* Rahmen um Boxen */
}
body.light-theme .text-white {
    color: #0f172a !important; /* Macht weiße Überschriften dunkel */
}
body.light-theme .text-slate-400 {
    color: #475569 !important; /* Fließtexte dunkler */
}
body.light-theme .text-slate-300 {
    color: #334155 !important; /* Menüpunkte dunkler */
}
body.light-theme .text-slate-600 {
    color: #64748b !important; /* Footer Text */
}
body.light-theme input.bg-slate-800,
body.light-theme textarea.bg-slate-800 {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important; 
}