/* style.css */

/* Grundlegende Layout- und Schriftarten-Einstellungen */
body { 
    font-family: 'Inter', sans-serif; 
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #FFFFFF; /* Fester weißer Hintergrund */
}

.completed { 
    text-decoration: line-through; 
    color: #9ca3af; /* Ein neutrales Grau für durchgestrichenen Text */
}

/* --- THEMEN-VARIABLEN --- */
/* Hier kannst du die Farben deiner App zentral ändern */
:root {
    --primary-color: #5CB049;
    --primary-color-subtle: #eaf6e8; /* Eine hellere Variante für Hover-Effekte etc. */
    --text-on-primary: #FFFFFF;     /* Text auf primärem Hintergrund */
    --text-body: #1f2937;           /* Haupttextfarbe (dunkles Grau) */
    --text-secondary: #4b5563;      /* Sekundäre Textfarbe (mittleres Grau) */
    --border-color: #e5e7eb;         /* Standard-Randfarbe (helles Grau) */
    --bg-subtle: #f9fafb;            /* Sehr heller Hintergrund für Inputs etc. */
    --bg-footer: #f3f4f6;            /* NEU: Hintergrundfarbe für den Footer (entspricht gray-100) */
}

/* --- THEMEN-KLASSEN --- */
/* Diese Klassen werden im HTML verwendet und ziehen ihre Werte aus den Variablen oben */

/* Textfarben */
.text-primary { color: var(--primary-color); }
.text-body { color: var(--text-body); }
.text-secondary { color: var(--text-secondary); }

/* Hintergrundfarben */
.bg-primary { background-color: var(--primary-color); }
.bg-primary-subtle { background-color: var(--primary-color-subtle); }
.bg-subtle { background-color: var(--bg-subtle); }

/* Randfarben */
.border-default { border-color: var(--border-color); }
.focus\:border-primary:focus { border-color: var(--primary-color); }

/* Formularelemente */
.form-input {
    width: 100%;
    padding: 0.5rem;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-body);
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(92, 176, 73, 0.3); /* Ring-Effekt mit der Primärfarbe */
}
.form-checkbox {
    color: var(--primary-color); /* Setzt die Haken-Farbe */
}
.form-checkbox:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Navigations-Buttons (Sub-Navigation) */
.sub-nav-button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid var(--border-color);
}
.sub-nav-button.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
}
.sub-nav-button.inactive {
    background-color: white;
    color: var(--text-secondary);
}
.sub-nav-button.inactive:hover {
    background-color: var(--bg-subtle);
}

/* NEU: Eigene Klasse für den Footer */
.app-footer {
    background-color: var(--bg-footer);
    border-top: 1px solid var(--border-color);
}

/* NEU: Stellt sicher, dass der Hauptinhalt wächst und scrollbar ist */
main {
    flex: 1 1 auto;
    overflow-y: auto;
}

.completed { 
    text-decoration: line-through; 
    color: #9ca3af;
}

/* --- THEMEN-VARIABLEN --- */
:root {
    --primary-color: #5CB049;
    /* ... (Rest der CSS-Datei bleibt unverändert) ... */
}