:root {
    /* --- Farbpalette (Red & Green) --- */
    --color-red: #b30000;         /* Primäres Rot (Dunkel) */
    --color-red-light: #d10000;     /* Helles Rot (Gradient, Table Header) */
    --color-red-hover: #ff2e2e;   /* Konsistentes Hover-Rot für alle roten Buttons */

    --color-green: #2e8b57;       /* Primäres Grün (Add Button) */
    --color-green-hover: #3faa6c;   /* Helles Grün (Add Button Hover) */

    --color-gold: #d4af37;
    --color-gold-hover: #ffdd80;
    --color-gold-text: #333333;

    /* --- Neutral- und Hintergrundfarben --- */
    --color-white: white;
    --color-text: #333;           /* Standard Textfarbe */
    --color-text-footer: #666;     /* Footer Textfarbe */

    --bg-light-start: #fff8f0;    /* Body Gradient Start */
    --bg-light-end: #ffe8e0;      /* Body Gradient End */
    --bg-main: rgba(255, 255, 255, 0.9); /* Hauptinhalt Hintergrund */
    --bg-footer: #eee;            /* Footer Hintergrund */
    --bg-table-stripe: #fdf5f5;   /* Tabellenstreifen */
    --color-border-light: #eee;    /* Helle Rahmenfarbe (Tabelle) */

    /* --- Schatten --- */
    --shadow-header: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-main: 0 4px 10px rgba(0,0,0,0.1);
    --shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* === Grundlayout === */
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(to bottom right, var(--bg-light-start), var(--bg-light-end));
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === Header === */
/* Basis-Stile für Header-Container (kann auch in style.css liegen) */
header {
    background-color: #b30000; /* Ihr weihnachtliches Rot */
    color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-container {
    display: flex; /* Aktiviert Flexbox für die Zeile */
    justify-content: space-between; /* Verteilt den Platz: Titel links, Nav rechts */
    align-items: flex-start; /* Stellt sicher, dass die Elemente oben beginnen */
    max-width: 1200px; /* Optional: Maximale Breite für größere Bildschirme */
    margin: 0 auto;
}

.header-title {
    /* Stellt sicher, dass der Titel nicht zu viel Platz einnimmt */
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.header-navigation-area {
    /* Dieser Container hält die beiden Navigationsleisten */
    display: flex;
    flex-direction: column; /* Stapelt die Nav-Elemente (main-nav und secondary-nav) untereinander */
    align-items: flex-end; /* Richtet die Navigationselemente rechtsbündig aus */
}

/* Stil für die Hauptnavigation (Dashboard, Admin, Logout) */
.main-nav .navigation-link {
    margin-left: 10px; /* Abstand zwischen den Links */
    padding: 5px 8px;
    display: inline-block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: background-color 0.2s;
}

/* Stil für die sekundäre Navigation (Jahreszahlen) */
.secondary-nav {
    margin-top: 5px; /* Abstand zwischen Haupt- und Sekundär-Nav */
}

.secondary-nav .navigation-link {
    margin-left: 10px;
    padding: 3px 6px;
    display: inline-block;
    text-decoration: none;
    color: #ffd700; /* Goldakzent für die Jahreszahlen */
    font-size: 0.9em;
    border-bottom: 2px solid transparent;
}

.secondary-nav .navigation-link:hover {
    border-bottom-color: #ffd700;
}

/* Allgemeine Link-Stile */
.navigation-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Stil für den Logout-Button, um ihn hervorzuheben */
.main-nav a[href="/logout"] {
    background-color: #8c0000; /* Dunkleres Rot */
    border-radius: 5px;
    padding: 5px 10px;
}
.main-nav a[href="/logout"]:hover {
    background-color: #6a0000;
}

/* === Hauptinhalt === */
main {
    flex: 1;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-main);
    border-radius: 12px;
    box-shadow: var(--shadow-main);
}

/* === Überschriften === */
h2, h3 {
    color: var(--color-red);
    /* font-family: 'Georgia', serif; */
}

h2 {
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 0.3rem;
}

/* === Tabellen === */
table {
    border-collapse: collapse;
    width: 100%;
    /* table-layout: fixed; */
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Spezieller, leichterer Schatten für Tabellen */
    background-color: var(--color-white);
    border: none;
}

th {
    background: var(--color-red-light);
    color: var(--color-white);
    text-align: center;
    padding: 0.6rem;
}

td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    text-align: center;
    word-break: break-word;
    max-width: 600px;
}

tr:nth-child(even) {
    background: var(--bg-table-stripe);
}

/* === Buttons === */
.add-button,
.disable-button,
.remove-button,
.action-button {
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    color: var(--color-white);
    display: inline-block;
}

/* Allgemeiner Button-Hover-Effekt mit Schatten */
.add-button:not([disabled]):hover,
.disable-button:not([disabled]):hover,
.remove-button:not([disabled]):hover,
.action-button:not([disabled]):hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-btn-hover);
}

/* --- GRÜNER BUTTON (ADD) --- */
.add-button {
    background-color: var(--color-green);
}

.add-button:not([disabled]):hover {
    background-color: var(--color-green-hover);
}

/* --- ROTER BUTTON (REMOVE) --- */
.remove-button {
    background-color: var(--color-red);
}

.remove-button:not([disabled]):hover {
    background-color: var(--color-red-hover);
}
/* --- GRAUER BUTTON (ACTION) --- */
.action-button,
.disable-button {
    background-color: var(--color-gold);
    color: var(--color-gold-text);
}

.action-button:not([disabled]):hover,
.disable-button:not([disabled]):hover {
    background-color: var(--color-gold-hover);
    color: var(--color-gold-text);
}

button:disabled {
    background-color: #ccc; /* Kann man lassen, oder neue Variable definieren */
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

/* === Formular & Textarea === */
form {
    margin-top: 1rem;
}

textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 0.6rem;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

/* Fokus-Stil für Eingabefelder */
input:focus, textarea:focus {
    outline: none;
    border-color: var(--color-red-light);
    box-shadow: 0 0 0 3px rgba(209, 0, 0, 0.2);
}

/* === Footer === */
footer {
    background: var(--bg-footer);
    color: var(--color-text-footer);
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    border-top: 2px solid var(--color-red-light);
    line-height: 1.5;
}

/* === Weihnachts-Extras & Normale Links === */
header::before {
    margin-right: 0.5rem;
    font-size: 1.5rem;
}


.link {
    color: var(--color-red);
}

.link:hover {
    color: var(--color-red-hover-btn);
}