/* Inter Schriftart importieren */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg-primary: #111827; /* Dunkelgrau-Blau */
    --bg-secondary: #1F2937; /* Etwas helleres Grau-Blau */
    --bg-tertiary: #374151; /* Helleres Grau für Akzente */
    --border-color: #374151;
    --text-primary: #F9FAFB; /* Fast Weiß */
    --text-secondary: #9CA3AF; /* Helles Grau */
    --accent-primary: #38BDF8; /* Cyber-Blau */
    --accent-secondary: #60A5FA; /* Helleres Blau */
    --success-color: #4ADE80; /* Grün */
    --danger-color: #F87171; /* Rot */
    --warning-color: #FBBF24; /* Gelb */

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* --- FIX ---
     * Zentraler Fix für das Hell-Modus-Problem.
     * Setzt die Standard-Textfarbe für die gesamte Seite auf Hellgrau.
     */
    color: var(--text-secondary);
    scroll-behavior: smooth;
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    /* 'color' wird jetzt von 'html' geerbt */
    transition: background-color 0.3s, color 0.3s;
}

/* Scrollbar Design */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-secondary);
}

/* ==================================
 * SAISONALE DESIGNS (Unverändert)
 * ================================== */

/* --- FRÜHLING / OSTERN --- */
:root[data-theme="fruehling"],
:root[data-theme="ostern"] {
    --accent-primary: #38B2AC; /* Türkis */
    --accent-secondary: #4FD1C5; /* Helleres Türkis */
    --success-color: #48BB78; /* Grün */
    --danger-color: #F56565; /* Rot */
    --warning-color: #ECC94B; /* Gelb */
}
/* --- SOMMER --- */
:root[data-theme="sommer"] {
    --accent-primary: #F59E0B; /* Bernstein */
    --accent-secondary: #FBC36A; /* Helles Bernstein */
    --success-color: #48BB78;
    --danger-color: #F56565;
    --warning-color: #ECC94B;
}
/* --- HERBST / HALLOWEEN --- */
:root[data-theme="herbst"],
:root[data-theme="halloween"] {
    --bg-primary: #2D1D0F; /* Dunkelbraun */
    --bg-secondary: #422B18; /* Braun */
    --bg-tertiary: #5A3F2C; /* Hellbraun */
    --border-color: #745138;
    --text-primary: #FDE0C3; /* Helles Pfirsich */
    --text-secondary: #D6BBA5; /* Beige */
    --accent-primary: #DD6B20; /* Orange */
    --accent-secondary: #ED8936; /* Helleres Orange */
    --success-color: #48BB78;
    --danger-color: #F56565;
    --warning-color: #ECC94B;
}
/* --- WINTER / WEIHNACHTEN / SILVESTER --- */
:root[data-theme="winter"],
:root[data-theme="weihnachten"],
:root[data-theme="silvester"] {
    --accent-primary: #3182CE; /* Kräftiges Blau */
    --accent-secondary: #63B3ED; /* Helleres Blau */
    --success-color: #38A169;
    --danger-color: #E53E3E;
    --warning-color: #D69E2E;
}
/* --- PADDYS DAY --- */
:root[data-theme="paddysday"] {
    --accent-primary: #38A169; /* Grün */
    --accent-secondary: #48BB78; /* Helleres Grün */
}
/* --- VALENTINSTAG --- */
:root[data-theme="valentinstag"] {
    --accent-primary: #E53E3E; /* Rot */
    --accent-secondary: #F56565; /* Helleres Rot */
    --danger-color: #E53E3E;
}
/* --- APRILSCHERZ --- */
:root[data-theme="aprilscherz"] {
    --accent-primary: #9B2C2C; /* Dunkles Weinrot */
    --accent-secondary: #C53030; /* Weinrot */
}
/* --- JUBILÄUM --- */
:root[data-theme="jubilaeum"] {
    --accent-primary: #D69E2E; /* Gold */
    --accent-secondary: #ECC94B; /* Helles Gold */
    --warning-color: #D69E2E;
}

/* ==================================
 * CORE LAYOUT & KOMPONENTEN (ÜBERARBEITET)
 * ================================== */

/* Container für Hauptinhalte und Boxen */
.content-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem; /* 8px */
    padding: 1.5rem; /* 24px */
    
    /* --- FIX ---
     * Verhindert schwarzen Text auf dunklem Grund.
     */
    color: var(--text-secondary);
}

/* Container für Pop-up-Modals */
.modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* --- FIX ---
     * Stellt sicher, dass auch Modals die korrekte Textfarbe haben.
     */
    color: var(--text-secondary);
}

/* --- Formular-Elemente --- */
/* Alle Eingabefelder (Text, E-Mail, Zahl, etc.) */
.form-input,
.form-select,
.form-textarea {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem; /* 6px */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    font-size: 0.875rem; /* 14px */
    
    /* --- FIX ---
     * Stellt sicher, dass der eingegebene Text hell (lesbar) ist.
     */
    color: var(--text-primary);
}

.form-checkbox,
.form-radio {
    /* (Keine Textfarbe nötig, nur Akzentfarbe) */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    color: var(--accent-primary); /* Farbe des Häkchens/Punktes */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-checkbox:focus,
.form-radio:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-transparent); /* Akzentfarbe mit Transparenz */
    outline: none;
}

/* --- Buttons (Unverändert, hatten bereits Farben) --- */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: #000; /* Schwarzer Text für beste Lesbarkeit auf hellem Blau */
}
.btn-primary:hover {
    filter: brightness(1.1);
}
.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
.btn-secondary:hover {
    filter: brightness(1.2);
}
.btn-danger {
    background-color: var(--danger-color);
    color: var(--text-primary);
}
.btn-danger:hover {
    filter: brightness(1.1);
}
.btn-success {
    background-color: var(--success-color);
    color: #000; /* Schwarzer Text für beste Lesbarkeit auf hellem Grün */
}
.btn-success:hover {
    filter: brightness(1.1);
}
.btn-warning {
    background-color: var(--warning-color);
    color: #000; /* Schwarzer Text für beste Lesbarkeit auf hellem Gelb */
}
.btn-warning:hover {
    filter: brightness(1.1);
}

/* --- Navigation & Tabs (Unverändert, hatten bereits Farben) --- */
.haupt-nav-button {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.haupt-nav-button:hover {
    color: var(--text-primary);
}
.haupt-nav-button.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-button {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 0.375rem;
}
.tab-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}
.tab-button.active {
    color: var(--text-primary);
    background-color: var(--accent-primary);
    color: #000;
}

/* * --- Tabellen (ZENTRALER FIX für Auftragslogbuch) ---
 */
table {
    width: 100%;
    border-collapse: collapse;
    
    /* --- FIX ---
     * Setzt die Standard-Textfarbe für alle Tabelleninhalte.
     */
    color: var(--color-text-secondary);
}

th, td {
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem; 
    text-align: left;
    
    /* --- FIX ---
     * Erbt die Farbe von der 'table' (also --color-text-secondary).
     */
    color: inherit; 
}

th {
    /* --- FIX ---
     * Überschreibt den Browser-Standard (schwarzer Text)
     * und macht Header hell und fett.
     */
    color: var(--color-text-primary);
    font-weight: 600; /* semi-bold */
}

tbody tr:hover {
    background-color: var(--bg-tertiary);
}


/* ==================================
 * SPEZIFISCHE KOMPONENTEN (Unverändert)
 * ================================== */

/* Preisrechner Sektion */
.calculator-section {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--rechner-card-bg-color, var(--bg-secondary));
    color: var(--rechner-text-color, var(--text-primary));
    border: 1px solid var(--rechner-border-color, var(--border-color));
}
.calculator-section h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rechner-text-color, var(--text-primary));
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--rechner-border-color, var(--border-color));
}
.calculator-section label {
    color: var(--rechner-text-color, var(--text-secondary));
}
.calculator-section .form-input,
.calculator-section .form-select {
    background-color: var(--rechner-input-bg-color, var(--bg-primary));
    border-color: var(--rechner-border-color, var(--border-color));
    color: var(--rechner-text-color, var(--text-primary));
}
.calculator-section .form-input:focus,
.calculator-section .form-select:focus {
    border-color: var(--rechner-accent-color, var(--accent-primary));
}

/* Preisrechner Design-Overrides */
:root {
    --rechner-card-bg-color: var(--bg-secondary);
    --rechner-text-color: var(--text-primary);
    --rechner-accent-color: var(--accent-primary);
    --rechner-border-color: var(--border-color);
    --rechner-input-bg-color: var(--bg-primary);
}

/* Haupt-Container des Rechners wendet die Farben an */
#content-preisrechner .content-box {
    background-color: var(--rechner-card-bg-color);
    border: 1px solid var(--rechner-border-color);
    color: var(--rechner-text-color);
}

/* Überschriften im Rechner */
#content-preisrechner h3 {
    color: var(--rechner-text-color);
    border-bottom: 1px solid var(--rechner-border-color);
}

/* Alle Texte und Labels im Rechner */
#content-preisrechner,
#content-preisrechner p,
#content-preisrechner label,
#content-preisrechner span {
    color: var(--rechner-text-color);
}

/* Alle Formular-Elemente im Rechner */
#content-preisrechner .form-input, 
#content-preisrechner .form-select {
    background-color: var(--rechner-input-bg-color);
    border-color: var(--rechner-border-color);
    color: var(--rechner-text-color);
}
#content-preisrechner .form-input:focus, 
#content-preisrechner .form-select:focus {
    border-color: var(--rechner-accent-color);
    box-shadow: 0 0 0 2px var(--rechner-accent-color);
}
#content-preisrechner .form-checkbox {
    color: var(--rechner-accent-color);
}
#content-preisrechner #summary-final {
    color: var(--rechner-accent-color);
}
#content-preisrechner #calc-senden {
    background-color: var(--rechner-accent-color);
    color: #000; /* Fester schwarzer Text für Lesbarkeit */
}
#content-preisrechner #calc-reset {
    background-color: var(--danger-color);
    color: var(--text-primary);
}

/* ==================================
 * TOAST BENACHRICHTIGUNGEN
 * ================================== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* Ganz oben */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Damit man durchklicken kann, wenn kein Toast da ist */
}

.toast-notification {
    background-color: var(--bg-secondary); /* Dunkler Hintergrund */
    color: var(--text-primary);
    border-left: 4px solid var(--accent-primary); /* Farbiger Rand links */
    border-radius: 4px;
    padding: 15px 20px;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    pointer-events: auto; /* Toast selbst soll klickbar sein */
    
    /* Animation: Reinrutschen von rechts */
    animation: slideInRight 0.3s ease-out forwards;
    opacity: 0; 
    transform: translateX(100%);
}

.toast-notification.hide {
    /* Animation: Rausfaden nach oben */
    animation: fadeOutUp 0.3s ease-in forwards;
}

/* Keyframes für die Animationen */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* ==================================
 * GLOBALER FIX: RADIO PLAYER
 * ================================== */
/* Erzwingt, dass der Radio-Player IMMER unten links klebt, egal welches Design aktiv ist */
#lsc-radio-player {
    position: fixed !important;
    top: 1rem !important; /* Etwas Abstand vom unteren Rand */
    left: 1rem !important;   /* Etwas Abstand vom linken Rand */
    bottom: auto !important;    /* Verhindert, dass er nach oben rutscht */
    z-index: 9999 !important; /* Immer über allem anderen */
    background-color: var(--bg-secondary); /* Nutzt die Farbe des aktuellen Themes */
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Der Button zum Einblenden, falls der Player minimiert ist */
#radio-show-button {
    position: fixed !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 9999 !important;
    bottom: auto !important;
}

/* Stellt sicher, dass die "hidden"-Klasse immer funktioniert */
.hidden {
    display: none !important;
}

/* ==================================
 * GLOBALER FIX: TOAST NOTIFICATIONS
 * ================================== */
/* Erzwingt Position oben rechts, überlagert alles (auch Modals und Schnee) */
#toast-container {
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    position: fixed !important;
    z-index: 10000 !important; /* Höher als Radio (9999) und Modals */
}

/* =========================================
   PREISRECHNER: VOLLSTÄNDIGES FARB-STYLING
   (Zahlenfelder, Dropdowns & Checkboxen)
   ========================================= */

/* 1. Basis-Styling für ALLE Eingaben im Rechner */
#content-preisrechner input,
#content-preisrechner select,
#content-preisrechner textarea,
#content-preisrechner .form-input,
#content-preisrechner .form-select,
#content-preisrechner .form-checkbox {
    background-color: var(--rechner-input-bg-color, transparent) !important;
    border: 1px solid var(--rechner-border-color, #e2e8f0) !important;
    color: var(--rechner-text-color, #334155) !important;
    transition: all 0.2s ease;
}

/* Fokus-Effekt für alle Felder (leuchtender Rahmen in Akzentfarbe) */
#content-preisrechner input:focus,
#content-preisrechner select:focus {
    outline: none;
    border-color: var(--rechner-accent-color, #0ea5e9) !important;
    box-shadow: 0 0 0 1px var(--rechner-accent-color, #0ea5e9);
}

/* 2. Spezielles Styling für CHECKBOXEN */
#content-preisrechner input[type="checkbox"] {
    /* Standard-Browser-Style entfernen */
    appearance: none;
    -webkit-appearance: none;
    
    /* Größe und Form */
    width: 1.2em;
    height: 1.2em;
    border-radius: 0.25rem;
    
    /* Layout für den Haken zentrieren */
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    margin-right: 0.5rem; /* Abstand zum Text */
    vertical-align: middle;
}

/* Der Haken (Pseudoelement) */
#content-preisrechner input[type="checkbox"]::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    transform: scale(0); /* Standardmäßig unsichtbar */
    transition: 120ms transform ease-in-out;
    
    /* HIER PASSIERT DIE MAGIE: Der Haken nimmt die Akzentfarbe an */
    box-shadow: inset 1em 1em var(--rechner-accent-color, #0ea5e9);
    
    /* SVG-Form eines Hakens ausschneiden */
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Zustand: Angehakt */
#content-preisrechner input[type="checkbox"]:checked {
    /* Rahmen wird zur Akzentfarbe */
    border-color: var(--rechner-accent-color, #0ea5e9) !important;
}

#content-preisrechner input[type="checkbox"]:checked::before {
    /* Haken wird sichtbar */
    transform: scale(1);
}

/* 3. Platzhalter-Text in Eingabefeldern lesbar machen */
#content-preisrechner input::placeholder {
    color: var(--rechner-text-color);
    opacity: 0.6;
}