/* ==========================================================================
   1. BASIS-SETUP & LAYOUT
   ========================================================================== */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
    font-size: 0.9em;
}

.board-wrapper {
    max-width: 1800px;
    margin: 0 auto;
}

.board-container {
    width: 100%;
    overflow-x: auto;
    max-width: 1800px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.board-grid {
    display: grid;
    grid-template-columns: 200px repeat(var(--prio-cols), 1fr);
    gap: 10px;
    align-items: start;
}

.board-grid.hide-done {
    grid-template-columns: 200px repeat(3, minmax(0, 1fr));
}

/* ==========================================================================
   2. TOOLBAR & LOGO
   ========================================================================== */
.board-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
}

.toolbar-spacer {
    flex-grow: 1;
}

.siemens-logo {
    margin-right: 20px;
}

.toggle-done-label,
.fullscreen-label {
    margin-right: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.logout-button, .pw-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    transition: background-color 0.2s;
}

.logout-button {
    background-color: #dc3545;
    color: white;
}

.pw-btn:hover {
    background-color: #777;
}

.pw-btn {
    background-color: #555;
    color: white;
}

.logout-button:hover {
    background-color: #c82333;
}

/* ==========================================================================
   3. TABELLEN- / GRID-ELEMENTE
   ========================================================================== */
.header-cell {
    font-weight: bold;
    padding: 10px;
    background-color: #e0e0e0;
    border-bottom: 2px solid #ccc;
    text-align: center;
    grid-row: 1;
}

.project-header {
    text-align: left;
    grid-column: 1;
}

/*.project-name-cell {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
*/

.project-name-cell {
    font-weight: bold;
    padding: 10px;
    background-color: #f0f0f0;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 60px;
    grid-column: 1;
}

.project-title {
    font-weight: bold;
}

/* ==========================================================================
   4. TASK-LISTEN & ITEMS
   ========================================================================== */
.task-list {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color 0.2s ease;
    height: 100%;
    justify-content: flex-end;
}

.task-list.drag-over {
    background-color: #e6f7ff;
}

/* Prioritätsfarben */
.task-list[data-priority-name="Prio1"] { background-color: #ffe0e0; border-color: #ffcccc; }
.task-list[data-priority-name="Prio2"] { background-color: #fff8e0; border-color: #ffe8cc; }
.task-list[data-priority-name="Prio3"] { background-color: #e0f0ff; border-color: #cce0ff; }
.task-list[data-priority-name="Erledigt"] { 
    background-color: #e6ffe0; 
    border-color: #ccffcc;
    justify-content: flex-start;
}

/* Header-Farben anpassen */
.header-cell.priority-header:nth-of-type(2) { background-color: #ffcccc; }
.header-cell.priority-header:nth-of-type(3) { background-color: #ffe8cc; }
.header-cell.priority-header:nth-of-type(4) { background-color: #cce0ff; }
.header-cell.priority-header:nth-of-type(5) { background-color: #ccffcc; }

.task-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: grab;
}

.task-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.task-item.done-task {
    opacity: 0.6;
    text-decoration: line-through;
    background-color: #aaa;
}

.task-text {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.task-done-checkbox {
    margin-right: 4px;
    cursor: pointer;
}

/* Buttons in Tasks */
.edit-task-btn, .delete-task-btn {
    flex-shrink: 0;
    padding: 2px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    border-radius: 3px;
    transition: all 0.2s;
}

.edit-task-btn:hover { background-color: #e0e0e0; }
.delete-task-btn:hover { background-color: #ffe0e0; color: #cc0000; }

.add-task-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    font-size: 1.2em;
    width: 100%;
    margin-top: auto;
    transition: background-color 0.2s;
}

.add-task-btn:hover { background-color: #0056b3; }

/* User Badge & Info */
.user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ccc;
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: help;
}

.due-info {
    width: 100%;
    text-align: right;
    font-size: 11px;
    margin-top: 6px;
    border-top: 1px solid #eee;
    padding-top: 4px;
}
.due-ok { color: #2d8f2d; }
.due-today { color: #d98c00; font-weight: bold; }
.overdue { color: #c0392b; font-weight: bold; }

/* ==========================================================================
   5. PROGRESS BAR
   ========================================================================== */
.progress-container {
    height: 6px;
    background-color: #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
    width: 100%;
}

.progress-bar {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-label {
    font-size: 0.7em;
    color: #555;
    margin-top: 3px;
}

/* Progress Farben */
.progress-bar[data-progress^="0"], .progress-bar[data-progress^="1"], .progress-bar[data-progress^="2"] { background: linear-gradient(90deg, #e53935, #ef5350); }
.progress-bar[data-progress^="3"], .progress-bar[data-progress^="4"], .progress-bar[data-progress^="5"], .progress-bar[data-progress^="6"] { background: linear-gradient(90deg, #fbc02d, #fff176); }
.progress-bar[data-progress^="7"], .progress-bar[data-progress^="8"], .progress-bar[data-progress^="9"], .progress-bar[data-progress="100"] { background: linear-gradient(90deg, #43a047, #81c784); }

/* ==========================================================================
   6. MODAL & FORMULARE
   ========================================================================== */
#taskModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#taskModal:not(.hidden) { display: flex; }

#noteEditorModal .modal-content, #taskModal .modal-content, #userEditModal .modal-content {
    _background: #ffffff;
    _width: 600px;
    max-width: 90vw;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    animation: modalFadeIn 0.2s ease-out;
}

#taskInput {
    width: 100%;
    min-height: 300px;
    _max-height: 300px;
    resize: vertical;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    outline: none;
    line-height: 1.4;
    box-sizing: border-box;
    _overflow-y: hidden;
}

#taskInput:focus, #assignedToSelect:focus {
    border-color: #2b78ff;
    box-shadow: 0 0 0 3px rgba(43,120,255,0.2);
}

/* Allgemeine Regeln für modal-field */
.modal-field {
    margin-top: 0px;
    display: flex; /* Standardmäßig Flexbox */
    flex-direction: column; /* Standardmäßig untereinander */
    gap: 5px; /* Kleiner Abstand zwischen Elementen */
}

/* Spezifische Anpassung für modal-field, das eine Checkbox enthält (z.B. "Wiederkehrende Aufgabe") */
.modal-field:has(input[type="checkbox"]) {
    flex-direction: row; /* Checkbox und Label nebeneinander */
    align-items: left; /* Vertikal zentriert */
    gap: 8px; /* Abstand zwischen Checkbox und Label */
}

/* Für die Zeile mit "Wiederholen:", "Startdatum:", "Enddatum:" */
/* Für die Zeile mit "Wiederholen:", "Startdatum:", "Enddatum:" */
#recurrenceOptions {
    display: flex;
    flex-direction: column; /* Die Reihen sollen untereinander sein */
    gap: 10px; /* Abstand zwischen den einzelnen Reihen */
    margin-top: 10px; /* Etwas mehr Abstand nach oben */
}

.recurrence-row {
    display: flex; /* Elemente innerhalb einer Reihe nebeneinander */
    align-items: center; /* Vertikal zentriert */
    gap: 8px; /* Abstand zwischen den Elementen in einer Reihe */
    flex-wrap: wrap; /* Erlaubt Umbruch, wenn der Platz in der Reihe nicht reicht */
}

#recurrenceOptions label {
    font-weight: normal; /* Labels hier nicht fett */
    white-space: nowrap; /* Verhindert Zeilenumbruch bei Labels wie "Startdatum:" */
    flex-shrink: 0; /* Verhindert, dass Labels schrumpfen */
}

#regionEditorModal, #recurrenceOptions select,
#recurrenceOptions input[type="date"],
#recurrenceOptions input[type="number"] {
    flex-grow: 1; /* Erlaubt den Feldern, den verfügbaren Platz auszufüllen */
    min-width: 100px; /* Mindestbreite, damit sie nicht zu klein werden */
}

/* Anpassung für die Checkbox "Nie endend" innerhalb von recurrenceOptions */
#recurrenceOptions #noRecurrenceEnd {
    margin-left: 10px; /* Etwas Abstand zum vorherigen Element */
    flex-shrink: 0; /* Verhindert, dass die Checkbox schrumpft */
}

/* Spezielle Anpassung für das Label "Nie endend" */
#recurrenceOptions .recurrence-row label[for="noRecurrenceEnd"] {
    font-weight: normal; /* Auch dieses Label nicht fett */
    margin-left: -5px; /* Korrigiert den Abstand, da die Checkbox selbst auch Platz einnimmt */
}
#recurrenceOptions label {
    font-weight: normal; /* Labels hier nicht fett */
    white-space: nowrap; /* Verhindert Zeilenumbruch bei Labels wie "Startdatum:" */
}

#recurrenceOptions select,
#recurrenceOptions input[type="date"],
#recurrenceOptions input[type="number"] {
    flex-grow: 1; /* Erlaubt den Feldern, den verfügbaren Platz auszufüllen */
    min-width: 100px; /* Mindestbreite, damit sie nicht zu klein werden */
}

/* Anpassung für die Checkbox "Nie endend" innerhalb von recurrenceOptions */
#recurrenceOptions #noRecurrenceEnd {
    margin-left: 10px; /* Etwas Abstand zum vorherigen Element */
}

/* Labels für die Hauptfelder im Modal */
.modal-field > label { /* Nur direkte Labels im modal-field stylen */
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

#assignedToSelect, #taskDueDate, #taskStartDate,
#recurrencePatternSelect, #recurrenceStart, #recurrenceEnd, #monthlyDay,
#nthWeekday, #monthlyWeekday { /* Auch die neuen Wiederholungsfelder hier stylen */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    background-color: #f9f9f9;
}

#assignedToSelect {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.2-16.1%208.1-3.9%204.9-4.2%2011.5-1%2016.4l132.8%20140c3.6%203.8%208.6%205.9%2013.7%205.9s10.1-2.1%2013.7-5.9l132.8-140.1c3.2-4.9%202.9-11.6-1-16.4z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

.emoji-toolbar {
    display: flex;
    gap: 1px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

#noteEditorModal .emoji-toolbar button, #taskModal .emoji-toolbar button {
    all: unset !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 4px 6px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#userEditModal .modal-buttons, #taskModal .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

#userEditModal button, #taskModal button, .taskCancelBtn, .save-btn { _aus_padding: 8px 16px; font-size: 15px; border-radius: 6px; border: none; cursor: pointer; }
#taskSaveBtn { background: #2b78ff; color: #fff; }
.taskCancelBtn { color: #fff; background: #5a6268; }

/* Legende */
.legend-toggle { _aus_ margin: 10px 0; text-align: left; }
.legend-toggle button { background: none; border: none; color: #555; cursor: pointer; font-size: 0.85em; padding-left: 0; }
.emoji-legend { margin-top: 8px; background: #f6f6f6; padding: 8px; border-radius: 6px; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px 8px; font-size: 0.85em; }

@keyframes modalFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Gemeinsames Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal Box Design (Bild 1 Look) */
.modal-content {
    background: #fff;
    width: 600px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content h2, .modal-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #333;
}

/* Eingabefelder */
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-field label {
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
}

.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="password"],
.modal-content input[type="email"],
.modal-content input[type="color"],
.modal-content select,
.modal-content textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    width: 100%;
}

/* Datumszeile nebeneinander */
.date-row {
    flex-direction: row !important;
    gap: 20px;
}
.date-row > div {
    flex: 1;
}

/* Buttons unten */
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.modal-buttons button {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.save-btn {
    background-color: #007bff;
    color: white;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
}

/* Verstecken */
.hidden { display: none !important; }

/* ==========================================================================
   7. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 900px) {
    .header-cell.priority-header { display: none; }
    .task-list::before {
        content: attr(data-priority-name);
        display: block;
        font-weight: 600;
        font-size: 0.85rem;
        color: #555;
        margin: 6px 0 8px;
    }
    .board-wrapper, .board-container { padding-left: 0; padding-right: 0; }
}

@media (max-width: 768px) {
    .board-grid {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 10px;
    }
    .header-cell {
        grid-column: auto !important;
        grid-row: auto !important;
        text-align: left;
    }
    .project-header { display: none; }
    .project-name-cell {
        grid-column: 1 / -1;
        background-color: #e9e9e9;
        margin-top: 15px;
        font-size: 0.8em;
    }
    .task-list {
        grid-column: 1 / -1;
        display: block;
        margin-bottom: 10px;
    }
    .priority-header {
        grid-column: 1 / -1;
        background-color: #f5f5f5;
    }
    .priority-header:nth-of-type(1), .priority-header:nth-of-type(2), .priority-header:nth-of-type(3) {
        grid-column: auto;
    }
}

/* Icon für wiederkehrende Aufgaben */

/* Icon für wiederkehrende Aufgaben */
.recurring-icon {
    /* Styling für das Unicode-Symbol 🔄 */
    display: inline-flex; /* Macht es flexibel für Zentrierung */
    align-items: center; /* Vertikale Zentrierung des Symbols */
    justify-content: center; /* Horizontale Zentrierung des Symbols */
    width: 22px; /* Breite des Icons (für den Klickbereich/Abstand) */
    height: 22px; /* Höhe des Icons (für den Klickbereich/Abstand) */
    border-radius: 50%; /* Optional: Wenn Sie doch einen runden Hintergrund oder Rand hätten */
    /* background-color: #e0e0e0; */ /* DIESE ZEILE WIRD ENTFERNT ODER AUSKOMMENTIERT */
    color: #4CAF50; /* Die Farbe des Pfeil-Symbols */
    font-size: 0.9em; /* Größe des Symbols */
    line-height: 1; /* Wichtig für die vertikale Zentrierung des Symbols */
    margin-left: 8px; /* Abstand zum vorherigen Element (User Badge) */
    margin-right: 5px; /* Abstand zum nächsten Element (Edit Button) */
    cursor: help; /* Zeigt an, dass es eine Info gibt */
    vertical-align: middle; /* Vertikal mit anderen Elementen ausrichten */
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.1); */ /* DIESE ZEILE WIRD ENTFERNT ODER AUSKOMMENTIERT */
}

/* ==========================================================================
   8. DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    body { background-color: #1a1a1a; color: #e0e0e0; }
    .board-container { background-color: #2b2b2b; }
    .header-cell { background-color: #3a3a3a; border-bottom-color: #4a4a4a; color: #f0f0f0; }
    .project-name-cell { background-color: #333333; border-color: #444444; color: #f0f0f0; }
    .task-list { background-color: #383838; border-color: #4a4a4a; }
    .task-item { background-color: #444444; border-color: #555; }
    .task-item.done-task { background-color: #555; color: #aaa; }
    .task-text { color: #e0e0e0; }
    .edit-task-btn, .delete-task-btn { color: #bbb; }
    .delete-task-btn:hover { background-color: #663333; color: #ff9999; }
    
    /* Prioritäten Dark Mode */
    .task-list[data-priority-name="Prio1"] { background-color: #4a3a3a; border-color: #6a4a4a; }
    .task-list[data-priority-name="Prio2"] { background-color: #4a4a3a; border-color: #6a6a4a; }
    .task-list[data-priority-name="Prio3"] { background-color: #3a3a4a; border-color: #4a4a6a; }
    .task-list[data-priority-name="Erledigt"] { background-color: #3a4a3a; border-color: #4a6a4a; }
    
    /* Header Dark Mode */
    .header-cell.priority-header:nth-of-type(2) { background-color: #6a4a4a; }
    .header-cell.priority-header:nth-of-type(3) { background-color: #6a6a4a; }
    .header-cell.priority-header:nth-of-type(4) { background-color: #4a4a6a; }
    .header-cell.priority-header:nth-of-type(5) { background-color: #4a6a4a; }

    /* Progress & Modal Dark Mode */
    .progress-container { background-color: #555; }
    .progress-label { color: #ccc; }
    #userEditModal .modal-content, #taskModal .modal-content { background: #333; }
    #taskInput, #assignedToSelect, #taskDueDate, #taskStartDate,
    #recurrencePatternSelect, #recurrenceStart, #recurrenceEnd, #monthlyDay,
    #nthWeekday, #monthlyWeekday { /* Auch die neuen Wiederholungsfelder hier stylen */
        background-color: #444; color: #e0e0e0; border-color: #555;
    }
    #taskDueDate::-webkit-calendar-picker-indicator { filter: invert(1); }
    #taskCancelBtn { background: #555; color: #e0e0e0; }
    .modal-field label { color: #b0b0b0; }
    .emoji-legend { background: #2a2a2a; }
    .legend-toggle button { color: #bbb; }

    /* Dark Mode Anpassungen für den Login-Container */
                .login-container {
                    background-color: #3a3a3a;
                    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
                }
                .login-container h2 {
                    color: #f0f0f0;
                }
                .login-container input[type="text"],
                .login-container input[type="password"] {
                    background-color: #4a4a4a;
                    border-color: #5a5a5a;
                    color: #e0e0e0;
                }
                .login-container input[type="password"]:focus,
                .login-container input[type="text"]:focus {
                    border-color: #0056b3;
                    box-shadow: 0 0 0 2px rgba(0,86,179,0.25);
                }
                .login-container button {
                    background-color: #0056b3;
                }
                .login-container button:hover {
                    background-color: #004085;
                }
                .error-message {
                    color: #ff6666;
                    background-color: #5a3a3a;
                    border-color: #7a4a4a;
                }
                 .info-message {
                    color: #66ff66;
                    background-color: #3a5a3a;
                    border-color: #4a7a4a;
                }

                /* NEU: Dark Mode Anpassungen für die Top-Controls-Bar */
                .top-controls-bar {
                    background-color: #2a2a2a; /* Dunklerer Hintergrund */
                    border-bottom: 1px solid #4a4a4a; /* Dunklere Trennlinie */
                }

                .top-controls-bar .nav-btn {
                    background-color: #3a3a3a; /* Dunklerer Button-Hintergrund */
                    color: #e0e0e0; /* Helle Schriftfarbe */
                    border: 1px solid #5a5a5a; /* Dunklerer Rand */
                }

                .top-controls-bar .nav-btn:hover {
                    background-color: #4a4a4a; /* Noch dunkler beim Hover */
                    color: #ffffff; /* Weiße Schrift beim Hover */
                }

                .top-controls-bar .nav-btn.active {
                    background-color: #007bff; /* Aktiver Button bleibt blau */
                    color: #ffffff;
                    border-color: #007bff;
                }
                .top-controls-bar .nav-btn.active:hover {
                    background-color: #0056b3; /* Dunkleres Blau beim Hover des aktiven Buttons */
                }

                /* Logo-Anpassung, falls es im Dark Mode schlecht sichtbar wäre */
                .siemens-logo {
                    /* Eventuell ein invertiertes Logo oder Helligkeitsanpassung für Dark Mode */
                    /* filter: invert(0.9) hue-rotate(180deg); /* Beispiel: invertiert Farben */ */
                }
            }

/* Hilfsklassen */
.hidden {
    display: none !important; /* Wichtig, um andere Styles zu überschreiben */
}

.top-controls-bar {
    padding: 10px 20px;
    background-color: #ffffff; /* Heller Hintergrund */
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: center; /* <-- HIER GEÄNDERT: Zentriert die Elemente horizontal */
    align-items: center;
    margin-bottom: 20px; /* Abstand zu den Inhaltsbereichen */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Leichter Schatten für Tiefe */
}

/* Spezielle Klasse für erledigte Aufgaben in der Timeline */
.vis-item.task-done {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    opacity: 0.5;
}

.vis-item.task-done .vis-item-content {
    text-decoration: line-through !important;
    color: #6c757d !important;
}

/* Spezielle Klasse für Termine */
.vis-item.item-appointment {
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
    color: #856404 !important;
    border-left: 5px solid #ffc107 !important;
}

.appointment-btn {
    background: #fff;
    border: 1px solid #666;
    color: #666;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
    margin-right: 3px;
    flex-shrink: 0;
}

.appointment-btn:hover {
    background-color: #e2e6ea;
}

.project-group {
    margin-bottom: 30px;
}
.project-title {
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #333;
}
.appointment-cards, .notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px;
}
.appointment-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    _display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.app-info span {
    _font-size: 0.85em;
    _color: #666;
}
.app-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 5px;
    padding: 5px;
    transition: transform 0.1s;
}
.app-actions button:hover {
    transform: scale(1.1);
}

.view-navigation {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.nav-btn {
    padding: 8px 16px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: #e2e6ea;
}

.nav-btn.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hidden {
    display: none !important;
}

/* Das Hintergrund-Overlay für das Modal */
.modal {
    display: none; /* Wird über JS gesteuert */
    position: fixed;
    z-index: 9999; /* Sehr hoch, damit es über ALLEM liegt */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Verdunkelt den Hintergrund */
    align-items: center;
    justify-content: center;
}

/* Wenn die Klasse 'hidden' entfernt wird, wird Flex aktiv */
.modal:not(.hidden) {
    display: flex;
}

/* Das eigentliche Fenster in der Mitte */
.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
}

#projectEditorModal {
    display: none; /* Standardmäßig aus */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Dunkler Hintergrund */
    z-index: 9999; /* Höchster Wert im ganzen Projekt */
    display: flex; /* Für die Zentrierung */
    align-items: center;
    justify-content: center;
}

#projectEditorModal.hidden {
    display: none !important;
}

#projectEditorModal .modal-content {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    width: 450px;
    max-width: 95%;
    position: relative; /* Wichtig für Klick-Events */
}

/* Für Urlaubs-Items in der Timeline */
.vis-item.item-vacation {
    background-color: #ffe0e0; /* Helles Rot/Rosa */
    border-color: #ff4d4d;    /* Kräftiges Rot */
    color: #cc0000;           /* Dunkles Rot für den Text */
    border-radius: 4px;
    font-size: 0.9em;
    padding: 2px 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    /* Optional: Ein Icon hinzufügen */
    /* content: "🏖️ "; */
}

.vis-item.item-vacation.vis-selected {
    background-color: #ff4d4d; /* Kräftiges Rot bei Auswahl */
    border-color: #cc0000;    /* Dunkleres Rot für den Rand bei Auswahl */
    color: white;             /* Weißer Text bei Auswahl */
}

/* Optional: Für die Urlaubsgruppe selbst (falls du die separate Gruppe doch nutzen willst) */
.vis-group-content strong:contains("Urlaube & Abwesenheiten")::before {
    content: "🏖️ ";
    margin-right: 5px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 90vh; /* Maximale Höhe, um Scrollen zu ermöglichen */
    overflow-y: auto; /* Scrollbar, wenn Inhalt zu lang */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-field {
    display: flex;
    flex-direction: column;
}

.modal-field label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.modal-field input[type="text"],
.modal-field input[type="date"],
.modal-field input[type="password"],
.modal-field input[type="email"],
.modal-field select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box; /* Wichtig für korrekte Breite */
}

.modal-field.date-row {
    flex-direction: row;
    gap: 15px;
}

.modal-field.date-row > div {
    flex: 1;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.modal-buttons button.save-btn {
    background-color: #28a745; /* Grün */
    color: white;
}

.modal-buttons button.save-btn:hover {
    background-color: #218838;
}

.modal-buttons button.add-btn {
    background-color: #007bff; /* Blau */
    color: white;
}

.modal-buttons button.add-btn:hover {
    background-color: #0056b3;
}

.modal-buttons button.delete-btn {
    background-color: #dc3545; /* Rot */
    color: white;
}

.modal-buttons button.delete-btn:hover {
    background-color: #c82333;
}

.modal-buttons button:not(.save-btn):not(.add-btn):not(.delete-btn) {
    background-color: #6c757d; /* Grau für Abbrechen/Schließen */
    color: white;
}

.modal-buttons button:not(.save-btn):not(.add-btn):not(.delete-btn):hover {
    background-color: #5a6268;
}

.hidden {
    display: none !important;
}

/* Spezifisches Styling für die Urlaubsliste */
.vacation-list-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f9f9f9;
}

.vacation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.vacation-item:last-child {
    border-bottom: none;
}

.vacation-item-info {
    flex-grow: 1;
    color: #333;
}

.vacation-item-info strong {
    font-size: 1.1em;
    color: #007bff; /* Blau für den Titel */
}

.vacation-item-info span {
    display: block;
    font-size: 0.9em;
    color: #666;
}

.vacation-item-actions button {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #6c757d;
    margin-left: 10px;
    transition: color 0.2s ease;
}

.vacation-item-actions button:hover {
    color: #007bff;
}

.no-vacations-message {
    text-align: center;
    color: #888;
    padding: 20px;
}

@media (prefers-color-scheme: dark) {
    /* Anpassungen für die obere Leiste */
    .top-controls-bar {
        background-color: #2a2a2a; /* Dunklerer Hintergrund */
        border-bottom: 1px solid #4a4a4a; /* Dunklere Trennlinie */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Dunklerer Schatten */
    }
    }

@media (prefers-color-scheme: dark) {

    /* NEU: Dark Mode Anpassungen für .appointment-card */
    .appointment-card {
        background: #3a3a3a; /* Dunklerer Hintergrund für die Karte */
        border: 1px solid #5a5a5a; /* Dunklerer Rand */
        box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Dunklerer, aber dezenter Schatten */
        color: #e0e0e0; /* Helle Schriftfarbe für den Inhalt der Karte */
    }

}

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card) ... */

    /* NEU: Dark Mode Anpassungen für .modal-content */
    .modal-content {
        background-color: #2a2a2a; /* Dunklerer Hintergrund für das Modal */
        box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Dunklerer, prominenterer Schatten */
        color: #e0e0e0; /* Helle Schriftfarbe für den Inhalt des Modals */
    }

    /* Wenn das Modal spezifische Elemente wie Überschriften, Texte,
       Formularfelder oder Buttons enthält, müssen diese eventuell
       auch hier angepasst werden, damit sie im Dark Mode gut aussehen. */
    .modal-content h2 {
        color: #f0f0f0;
    }
    .modal-content p {
        color: #c0c0c0;
    }
    .modal-content input[type="text"],
    .modal-content input[type="email"],
    .modal-content input[type="color"],
    .modal-content input[type="password"],
    .modal-content textarea {
        background-color: #3a3a3a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
    .modal-content button {
        background-color: #007bff; /* Beispiel: Standard-Buttonfarbe */
        color: #ffffff;
    }
    .modal-content button:hover {
        background-color: #0056b3;
    }
    /* Wenn du einen "Schließen"-Button hast, der nur ein Icon oder Text ist */
    .modal-content .close-button { /* Annahme, dass es eine Klasse 'close-button' gibt */
        color: #e0e0e0; /* Helle Farbe für das Schließen-Kreuz/Icon */
    }
    .modal-content .close-button:hover {
        color: #ffffff;
    }

    /* ... (weitere Dark Mode Styles) ... */
}

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card, .modal-content) ... */

    /* NEU: Dark Mode Anpassungen für Input-Felder und Select-Boxen im Modal */
    .modal-field input[type="text"],
    .modal-field input[type="email"],
    .modal-field input[type="color"],
    .modal-field input[type="date"],
    .modal-field input[type="password"],
    .modal-field select {
        background-color: #3a3a3a; /* Dunklerer Hintergrund für die Felder */
        border: 1px solid #5a5a5a; /* Dunklerer Rand */
        color: #e0e0e0; /* Helle Schriftfarbe für den eingegebenen Text */
    }

    /* Optional: Anpassung für den Fokus-Zustand */
    .modal-field input[type="text"]:focus,
    .modal-field input[type="date"]:focus,
    .modal-field input[type="password"]:focus,
    .modal-field select:focus {
        border-color: #007bff; /* Blauer Fokus-Rand, passend zu Siemens-Farben */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Leichter blauer Schatten beim Fokus */
    }

    /* Optional: Anpassung für Placeholder-Text */
    .modal-field input::placeholder {
        color: #b0b0b0; /* Hellerer Placeholder-Text */
    }

    /* ... (weitere Dark Mode Styles) ... */
}

/* style.css */

/* ... (deine bestehenden Dark Mode Styles) ... */

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card, .modal-content) ... */

    /* NEU: Dark Mode Anpassungen für Input-Felder und Select-Boxen im Modal */
    .modal-field input[type="text"],
    .modal-field input[type="date"],
    .modal-field input[type="password"],
    .modal-field input[type="color"],
    .modal-field input[type="email"],
    .modal-field select {
        background-color: #3a3a3a; /* Dunklerer Hintergrund für die Felder */
        border: 1px solid #5a5a5a; /* Dunklerer Rand */
        color: #e0e0e0; /* Helle Schriftfarbe für den eingegebenen Text */
    }

    /* Optional: Anpassung für den Fokus-Zustand */
    .modal-field input[type="text"]:focus,
    .modal-field input[type="date"]:focus,
    .modal-field input[type="password"]:focus,
    .modal-field select:focus {
        border-color: #007bff; /* Blauer Fokus-Rand, passend zu Siemens-Farben */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Leichter blauer Schatten beim Fokus */
    }

    /* Optional: Anpassung für Placeholder-Text */
    .modal-field input::placeholder {
        color: #b0b0b0; /* Hellerer Placeholder-Text */
    }

    /* ... (weitere Dark Mode Styles) ... */
}

/* style.css */

/* ... (deine bestehenden Dark Mode Styles) ... */

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card, .modal-content) ... */

    /* NEU: Dark Mode Anpassungen für das spezifische Project Editor Modal */
    #projectEditorModal .modal-content {
        background: #2a2a2a; /* Dunklerer Hintergrund für das Modal */
        box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Dunklerer, prominenterer Schatten */
        color: #e0e0e0; /* Helle Schriftfarbe für den Inhalt des Modals */
        /* border: 1px solid #5a5a5a; /* Optional: Wenn du einen Rand möchtest */ */
    }

    /* WICHTIG: Wenn dieses Modal eigene spezifische Inputs, Buttons oder andere Elemente hat,
       die sich von den allgemeinen .modal-content Elementen unterscheiden,
       musst du diese hier ebenfalls spezifisch anpassen.
       Zum Beispiel: */
    #projectEditorModal .modal-content input[type="text"],
    #projectEditorModal .modal-content select {
        background-color: #3a3a3a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
    /* ... und so weiter für andere spezifische Elemente in diesem Modal ... */

    /* ... (weitere Dark Mode Styles) ... */
}

/* style.css */

/* ... (deine bestehenden Dark Mode Styles) ... */

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles) ... */

    /* NEU: Dark Mode Anpassungen für das unbenannte Element mit Hintergrund #eee */
    /* BITTE ERSETZE '.my-flex-container' DURCH DEN TATSÄCHLICHEN KLASSENNAMEN ODER DIE ID DES ELEMENTS */
    .my-flex-container { /* Oder z.B. #myElementId, wenn es eine ID hat */
        background: #3a3a3a; /* Dunklerer Hintergrund für das Element */
        /* Wenn das Element Text enthält, musst du auch die Textfarbe anpassen */
        color: #e0e0e0; /* Helle Schriftfarbe für den Inhalt */
        /* Wenn es einen Rand hatte, der nicht im Screenshot sichtbar ist,
           müsstest du diesen auch anpassen. */
    }

    /* ... (weitere Dark Mode Styles) ... */
}

/* style.css */

/* ... (deine bestehenden Dark Mode Styles) ... */

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card, allgemeines .modal-content) ... */

    /* Konsolidierte Dark Mode Anpassungen für das spezifische Project Editor Modal */
    #projectEditorModal .modal-content {
        background: #2a2a2a; /* Dunklerer Hintergrund für das Modal */
        box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Dunklerer, prominenterer Schatten */
        color: #e0e0e0; /* Helle Schriftfarbe für den Inhalt des Modals (wie im Screenshot) */
        /* border: 1px solid #5a5a5a; /* Optional: Wenn du einen Rand möchtest */ */
    }

    /* WICHTIG: Wenn dieses Modal eigene spezifische Inputs, Buttons oder andere Elemente hat,
       die sich von den allgemeinen .modal-content Elementen unterscheiden,
       musst du diese hier ebenfalls spezifisch anpassen.
       Zum Beispiel: */
    #projectEditorModal .modal-content input[type="text"],
    #projectEditorModal .modal-content select {
        background-color: #3a3a3a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
    /* ... und so weiter für andere spezifische Elemente in diesem Modal ... */

    /* ... (weitere Dark Mode Styles) ... */
    .modal-content h3 { color: #ccc; }
}

/* style.css */

/* ... (deine bestehenden Dark Mode Styles) ... */

@media (prefers-color-scheme: dark) {
    /* ... (andere Dark Mode Styles, z.B. für .top-controls-bar, .appointment-card, .modal-content) ... */

    /* NEU: Dark Mode Anpassungen für Input-Felder und Select-Boxen im Modal */
    .modal-field input[type="text"],
    .modal-field input[type="date"],
    .modal-field input[type="password"],
    .modal-field select {
        background-color: #3a3a3a; /* Dunklerer Hintergrund für die Felder */
        border: 1px solid #5a5a5a; /* Dunklerer Rand */
        color: #e0e0e0; /* Helle Schriftfarbe für den eingegebenen Text */
    }

    /* Optional: Anpassung für den Fokus-Zustand */
    .modal-field input[type="text"]:focus,
    .modal-field input[type="date"]:focus,
    .modal-field input[type="password"]:focus,
    .modal-field select:focus {
        border-color: #007bff; /* Blauer Fokus-Rand, passend zu Siemens-Farben */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Leichter blauer Schatten beim Fokus */
    }

    /* Optional: Anpassung für Placeholder-Text */
    .modal-field input::placeholder {
        color: #b0b0b0; /* Hellerer Placeholder-Text */
    }

    /* ... (weitere Dark Mode Styles) ... */
}

:root {
    --prio1-bg-color: #ffcccc;
    --prio2-bg-color: #ffe8cc;
    --prio3-bg-color: #cce0ff;
    --timeline-item-border-color: #ccc;
    --timeline-item-color: #333; /* Standard Textfarbe */
}

/* Dark Mode Farben */
@media (prefers-color-scheme: dark) {
    :root {
        --prio1-bg-color: #6a4a4a;
        --prio2-bg-color: #6a6a4a;
        --prio3-bg-color: #4a4a6a;
        --timeline-item-border-color: #5a5a5a;
        --timeline-item-color: #eee; /* Textfarbe im Dark Mode */
    }
}

.vis-item.vis-range.priority-prio1 {
    background-color: var(--prio1-bg-color) !important;
    border-color: var(--timeline-item-border-color) !important;
    color: var(--timeline-item-color) !important; /* Auch Textfarbe setzen */
}
.vis-item.vis-range.priority-prio2 {
    background-color: var(--prio2-bg-color) !important;
    border-color: var(--timeline-item-border-color) !important;
    color: var(--timeline-item-color) !important;
}
.vis-item.vis-range.priority-prio3 {
    background-color: var(--prio3-bg-color) !important;
    border-color: var(--timeline-item-border-color) !important;
    color: var(--timeline-item-color) !important;
}

/* Für erledigte Tasks im Zeitstrahl */
.vis-item.vis-range.task-done {
    background-color: #e0e0e0 !important;
    border-color: #bbb !important;
    opacity: 0.7;
    color: #666 !important; /* Textfarbe für erledigte Tasks */
}
@media (prefers-color-scheme: dark) {
    .vis-item.vis-range.task-done {
        background-color: #333 !important;
        border-color: #444 !important;
        color: #ccc !important;
    }
}

/* Optional: Für Termine und Urlaube, falls du hier auch Farben möchtest */
.vis-item.vis-range.item-appointment {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important; /* Dunkelgrün für Text */
}
@media (prefers-color-scheme: dark) {
    .vis-item.vis-range.item-appointment {
        background-color: #28a74555 !important;
        border-color: #28a745 !important;
        color: #90ee90 !important; /* Hellgrün für Text */
    }
}
.vis-item.vis-range.item-vacation {
    background-color: #cfe2ff !important;
    border-color: #007bff !important;
    color: #004085 !important; /* Dunkelblau für Text */
}
@media (prefers-color-scheme: dark) {
    .vis-item.vis-range.item-vacation {
        background-color: #007bff55 !important;
        border-color: #007bff !important;
        color: #add8e6 !important; /* Hellblau für Text */
    }
}

/* style.css */

/* ... (Deine bestehenden :root und @media (prefers-color-scheme: dark) Definitionen) ... */

/* Für Urlaube: Dicker roter Rahmen und leicht roter Hintergrund */
.vis-item.vis-range.item-vacation {
    background-color: #ffe0e0 !important; /* Sehr helles Rot für den Hintergrund (Light Mode) */
    border: 2px solid #dc3545 !important; /* Dicker roter Rahmen */
    color: #8b0000 !important; /* Dunkelroter Text für bessere Lesbarkeit */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Optional: leichter Schatten für mehr Tiefe */
    border-radius: 4px; /* Optional: abgerundete Ecken */
}

/* Dark Mode Anpassungen für Urlaube */
@media (prefers-color-scheme: dark) {
    .vis-item.vis-range.item-vacation {
        background-color: #4a2a2a !important; /* Dunkleres, leicht rötliches Grau für den Hintergrund im Dark Mode */
        border: 2px solid #ff6347 !important; /* Ein leuchtenderes Rot für den Rahmen im Dark Mode */
        color: #ffcccb !important; /* Hellerer Text im Dark Mode */
        box-shadow: 0 0 5px rgba(255, 99, 71, 0.5);
    }
}

.vis-item.vis-range {
    border: 1px solid #337ab7;
    min-width: 50px !important; /* Verhindert das "Verschwinden" beim Rauszoomen */
    height: 32px; /* Etwas dicker für bessere Sichtbarkeit */
    display: flex;
    align-items: center;
}

/* Stellt sicher, dass der Text im Balken nicht abgeschnitten wird */
.vis-item-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* style.css */

/* Keyframes für die Blink-Animation */
@keyframes blink-red-border {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: #ff0000; /* Leuchtendes Rot */
    }
}

/* Dark Mode Keyframes für die Blink-Animation */
@media (prefers-color-scheme: dark) {
    @keyframes blink-red-border {
        0%, 100% {
            border-color: transparent;
        }
        50% {
            border-color: #ff4500; /* Orange-Rot im Dark Mode */
        }
    }
}

/* Stil für überfällige Aufgaben-Karten im Board */
.task-item.overdue-task-card {
    border: 2px solid transparent; /* Start mit transparentem Rahmen */
    animation: blink-red-border 1.5s infinite alternate; /* Animation anwenden */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); /* Optional: Roter Schatten für mehr Aufmerksamkeit */
}

/* Optional: Anpassung der Hintergrundfarbe für überfällige Tasks */
.task-item.overdue-task-card:not(.done-task) { /* Nur wenn nicht erledigt */
    background-color: #fff0f0 !important; /* Sehr helles Rot für den Hintergrund */
}
@media (prefers-color-scheme: dark) {
    .task-item.overdue-task-card:not(.done-task) {
        background-color: #382020 !important; /* Dunkleres, rötliches Grau im Dark Mode */
    }
     .appointment-btn {
    background-color: #3a3a3a;
    border: 1px solid #444;
    color: #ccc;}

    .appointment-btn:hover {
    background-color: #4a4a4a;
    border: 1px solid #444;
    color: #ccc;
    }

    .project-title {
    color: #fff;
}

}





.hidden {
    display: none !important; /* Wichtig, um andere Styles zu überschreiben */
}

/* NEUER KONSOLIDIERTER BEREICH FÜR DIE CONTROLS-BAR */
.controls-bar {
    display: flex; /* Macht den Container zu einer Flexbox */
    flex-wrap: wrap; /* Erlaubt den Elementen, umzubrechen, wenn der Platz nicht reicht */
    gap: 15px; /* Abstand zwischen den Flex-Items (Button-Gruppe und Filter-Gruppen) */
    margin-bottom: 20px;
    align-items: flex-start; /* <-- WICHTIG: Richtet Items an der Oberkante aus */
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.button-group { /* NEUE KLASSE FÜR DIE BUTTONS */
    display: flex;
    flex-direction: column; /* Ordnet die Buttons untereinander an */
    gap: 5px; /* Kleinerer Abstand zwischen den Buttons */
    /* flex-shrink: 0; */ /* Verhindert, dass die Gruppe schrumpft */
}

.filter-group {
    display: inline-flex; /* Macht die span zu einem Flex-Container, um die Select-Box zu enthalten */
    align-items: center; /* Zentriert die Select-Box vertikal, falls nötig */
}

.filter-group select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #fff;
    font-size: 0.9em;
    min-width: 150px; /* Mindestbreite für die Select-Boxen */
    height: auto; /* Stellt sicher, dass die Höhe flexibel ist */
}

/* Anpassung für die appointment-btn */
.appointment-btn {
    background: #fff;
    border: 1px solid #666;
    color: #666;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
    /* flex-shrink: 0; */ /* Wird jetzt von der button-group gesteuert, kann hier raus */

    /* KEINE FESTE HÖHE MEHR, KEIN FLEX-LAYOUT IM BUTTON SELBST */
    height: auto; /* Buttons nehmen ihre natürliche Höhe an */
    display: block; /* Oder inline-block, je nachdem, wie du sie stylen möchtest */
    text-align: left; /* Text zentrieren, falls der Button breiter ist */
}

.appointment-btn:hover {
    background-color: #e2e6ea;
}

/* ... (Dein Code für .project-group, .project-title, .appointment-cards etc.) ... */

/* Dark Mode Anpassungen für die Filter-Controls */
@media (prefers-color-scheme: dark) {
    /* ... (Deine bestehenden Dark Mode Regeln für .top-controls-bar, .appointment-card, .modal-content etc.) ... */

    .controls-bar {
        background-color: #2a2a2a; /* Dunklerer Hintergrund */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Dunklerer Schatten */
    }
    .filter-group select {
        background-color: #3a3a3a; /* Dunklerer Hintergrund für Select-Boxen */
        border-color: #5a5a5a; /* Dunklerer Rand */
        color: #e0e0e0; /* Helle Schriftfarbe für den Text */
    }
    /* Dark Mode für appointment-btn */
    .appointment-btn {
        background-color: #3a3a3a;
        border: 1px solid #444;
        color: #ccc;
    }
    .appointment-btn:hover {
        background-color: #4a4a4a;
        border: 1px solid #444;
        color: #ccc;
    }
    /* ... (Rest deiner Dark Mode Regeln) ... */
}

/* Stile für das Passwort-Ändern-Modal */
.modal-message {
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.9em;
    text-align: center;
}

.modal-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.modal-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Dark Mode Anpassungen für Modal-Nachrichten */
@media (prefers-color-scheme: dark) {
    .modal-message.success {
        background-color: #1a472a;
        color: #a3c9a8;
        border-color: #2d663f;
    }

    .modal-message.error {
        background-color: #5c2c2c;
        color: #e8a0a0;
        border-color: #7a3d3d;
    }
}




.wide-modal { width: 90%; max-width: 1200px; max-height: 85vh; overflow-y: auto; }
.log-table-container { overflow-x: auto; margin-top: 15px; }
#logTable { width: 100%; border-collapse: collapse; font-size: 0.9em; }
#logTable th, #logTable td { border: 1px solid #ddd; padding: 8px; text-align: left; }
#logTable th { _background: #f4f4f4; position: sticky; top: 0; }
.delta-box { background: #f9f9f9; padding: 4px; border-radius: 3px; font-family: monospace; font-size: 0.85em; }
.delta-old { color: #d32f2f; text-decoration: line-through; }
.delta-new { color: #388e3c; font-weight: bold; }
.archive-item { border-bottom: 1px solid #eee; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.archive-meta { font-size: 0.8em; color: #666; }


.archive-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.85em;
}

.archive-table th {
    background: #f8f9fa;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #dee2e6;
}

.archive-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.badge-project {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.badge-prio {
    color: #fff;
    background: #6c757d;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.75em;
}

/* Grundlegende Grid-Definition */
.board-grid {
    display: grid;
    /* Die Spaltendefinition wird jetzt dynamisch über eine CSS-Variable gesteuert */
    grid-template-columns: var(--grid-template-columns-definition);
    padding: 10px;
}

/* Header-Zellen (Projekt, Prio 1, etc.) */
.board-grid .header-cell {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

/* Die erste Header-Zelle "Projekt" */
.board-grid .header-cell.project-header {
    grid-column: 1 / 2; /* Nimmt die erste Spalte ein */
}

/* Stil für die Regionen-Überschrift */
.region-header-cell {
    /* Spanne über alle Spalten des Boards (Projektspalte + Prioritätsspalten) */
    grid-column: 1 / span var(--prio-cols-plus-one); /* NEU: Variable für die Gesamtanzahl der Spalten */
    background-color: #e0e0e0; /* Heller Hintergrund für Regionen */
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.region-header-cell h2 {
    margin: 0; /* Entfernt Standard-Margins des h2-Elements */
    font-size: 1.2em;
    padding: 3px; /* Entfernt Standard-Paddings des h2-Elements */
}

.task-list {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
}

/* Weitere Stile für Tasks, Badges, etc. wie bereits definiert */











/* ==========================================================================
   NEUE STILE FÜR REGIONEN- & PROJEKT-EDITOREN (Angepasst an dein CSS)
   ========================================================================== */

/* --- Allgemeine Modal-Anpassungen --- */
/* Dein .modal-overlay und .modal-content sind schon gut definiert.
   Ich werde nur sicherstellen, dass die spezifischen Modals diese nutzen. */

/* Anpassung für das breitere Regionen-Editor Modal */
#regionEditorModal .modal-content.wide-modal {
    max-width: 90%; /* Breiteres Modal für Drag & Drop */
    width: 900px; /* Feste Breite oder flexibler */
    max-height: 90vh;
    overflow-y: auto;
    /* Nutzt deine bereits definierten .modal-content Stile */
    /* background-color, padding, border-radius, box-shadow, color werden von .modal-content geerbt */
}

/* --- Sektionen im Regionen-Editor Modal --- */
#regionEditorModal .modal-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd; /* Nutze deine Standard-Border-Farbe */
    border-radius: 8px; /* Nutze deinen Standard-Border-Radius */
    background-color: #f9f9f9; /* Hellerer Hintergrund für Sektionen */
}

/* Dark Mode Anpassung für Sektionen */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .modal-section {
        background-color: #3a3a3a; /* Dunklerer Hintergrund im Dark Mode */
        border-color: #4a4a4a; /* Dunklerer Rand im Dark Mode */
    }
}

#regionEditorModal .modal-section h4,
#regionEditorModal .modal-section h5 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333; /* Nutze deine Standard-Textfarbe */
}

/* Dark Mode Anpassung für Überschriften in Sektionen */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .modal-section h4,
    #regionEditorModal .modal-section h5 {
        color: #f0f0f0; /* Helle Textfarbe im Dark Mode */
    }
}

/* --- Regionen-Liste (Header mit Input und Button) --- */
#regionEditorModal .region-list {
    margin-bottom: 10px;
}

#regionEditorModal .region-header-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 5px;
    background-color: #e0e0e0; /* Heller Hintergrund für Regionen-Header */
    border-radius: 4px; /* Nutze deinen Standard-Border-Radius */
}

/* Dark Mode Anpassung für Regionen-Header */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .region-header-editor {
        background-color: #3a3a3a; /* Dunklerer Hintergrund im Dark Mode */
    }

}

#regionEditorModal .region-header-editor input[type="text"] {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ccc; /* Nutze deine Standard-Border-Farbe */
    border-radius: 4px;
    font-weight: bold;
    background-color: #fff; /* Heller Hintergrund für Input */
    color: #333; /* Standard-Textfarbe */
}

/* Dark Mode Anpassung für Input-Felder im Regionen-Header */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .region-header-editor input[type="text"] {
        background-color: #4a4a4a; /* Dunklerer Hintergrund im Dark Mode */
        border-color: #5a5a5a; /* Dunklerer Rand im Dark Mode */
        color: #e0e0e0; /* Helle Textfarbe im Dark Mode */
    }
}

#regionEditorModal .region-header-editor button {
    background-color: #dc3545; /* Nutze deine delete-button Farbe */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#regionEditorModal .region-header-editor button:hover {
    background-color: #c82333; /* Nutze deine delete-button-hover Farbe */
}

/* --- "Neue Region hinzufügen" Input und Button --- */
#regionEditorModal .add-new-item {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

#regionEditorModal .add-new-item input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc; /* Nutze deine Standard-Border-Farbe */
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

/* Dark Mode Anpassung für Input im "Neue Region hinzufügen" Bereich */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .add-new-item input {
        background-color: #4a4a4a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
}

#regionEditorModal .add-new-item button {
    background-color: #007bff; /* Nutze deine save-button Farbe (oder eine Add-Farbe) */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#regionEditorModal .add-new-item button:hover {
    background-color: #0056b3; /* Nutze deine save-button-hover Farbe */
}

/* --- Drag & Drop Bereiche --- */
#regionEditorModal .drag-drop-area {
    display: flex;
    gap: 20px;
}

#regionEditorModal .unassigned-projects-panel,
#regionEditorModal .assigned-projects-panel {
    flex: 1;
    border: 1px dashed #ccc; /* Gestrichelter Rand für Drop-Zonen */
    padding: 10px;
    min-height: 200px;
    background-color: #f0f0f0; /* Hellerer Hintergrund für Drop-Zonen */
    border-radius: 8px;
}

/* Dark Mode Anpassung für Drag & Drop Bereiche */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .unassigned-projects-panel,
    #regionEditorModal .assigned-projects-panel {
        background-color: #333333;
        border-color: #555555;
    }
}

#regionEditorModal .project-drag-list {
    min-height: 50px; /* Für unzugeordnete Projekte */
}

#regionEditorModal .assigned-projects-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#regionEditorModal .region-project-drop-zone {
    border: 1px solid #ddd; /* Solider Rand für Regionen-Drop-Zonen */
    padding: 10px;
    min-height: 80px;
    background-color: #fff; /* Weißer Hintergrund für Regionen-Drop-Zonen */
    border-radius: 8px;
    margin-bottom: 10px; /* Abstand zwischen den Drop-Zonen */
}

/* Dark Mode Anpassung für Regionen-Drop-Zonen */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .region-project-drop-zone {
        background-color: #2a2a2a;
        border-color: #4a4a4a;
    }
}

#regionEditorModal .region-project-drop-zone h5 {
    color: #666; /* Leichtere Textfarbe für Überschrift */
    font-size: 0.9em;
    border-bottom: 1px solid #eee; /* Leichte Trennlinie */
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Dark Mode Anpassung für Überschriften in Regionen-Drop-Zonen */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .region-project-drop-zone h5 {
        color: #bbb;
        border-bottom-color: #555;
    }
}

#regionEditorModal .project-item {
    background-color: #e9f7ef; /* Hellgrün für Projekte (wie in deinem Board) */
    border: 1px solid #c3e6cb;
    padding: 8px;
    margin-bottom: 5px;
    cursor: grab;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
}

/* Dark Mode Anpassung für Projekt-Items */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .project-item {
        background-color: #2e4a3a; /* Dunkleres Grün im Dark Mode */
        border-color: #4a6a5a;
        color: #e0e0e0;
    }
}

#regionEditorModal .project-item.dragging {
    opacity: 0.5;
    border: 1px dashed #007bff; /* Nutze deine primary-color */
}

#regionEditorModal .drag-over {
    background-color: #e6f7ff; /* Helles Blau beim Drag-Over */
    border-color: #007bff; /* Nutze deine primary-color */
}

/* Dark Mode Anpassung für Drag-Over */
@media (prefers-color-scheme: dark) {
    #regionEditorModal .drag-over {
        background-color: #3a4a5a;
        border-color: #6da5ed;
    }
}

/* --- Global Project Editor (projectEditorModal) Styling --- */
/* Dieses Modal nutzt deine Standard .modal-overlay und .modal-content Stile */

#projectEditorModal .project-item-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 5px;
    background-color: #f0f0f0; /* Heller Hintergrund für Projekt-Item im Editor */
    border-radius: 4px;
}

/* Dark Mode Anpassung für Projekt-Items im globalen Editor */
@media (prefers-color-scheme: dark) {
    #projectEditorModal .project-item-editor {
        background-color: #3a3a3a;
    }
}

#projectEditorModal .project-item-editor input[type="text"] {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
    background-color: #fff;
    color: #333;
}

/* Dark Mode Anpassung für Input-Felder im globalen Editor */
@media (prefers-color-scheme: dark) {
    #projectEditorModal .project-item-editor input[type="text"] {
        background-color: #4a4a4a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
}

#projectEditorModal .project-item-editor button {
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#projectEditorModal .project-item-editor button:hover {
    background-color: #c82333; /* Nutze deine delete-button-hover Farbe */
}

/* Optional: Anpassung für den projectListContainer, falls er scrollbar sein soll */
#projectEditorModal #projectListContainer {
    max-height: 300px; /* Beispielhöhe */
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 15px; /* Abstand zum "Neues Projekt" Input */
}

/* Dark Mode Anpassung für projectListContainer */
@media (prefers-color-scheme: dark) {
    #projectEditorModal #projectListContainer {
        background-color: #333333;
        border-color: #4a4a4a;
    }
}

/* Input für neues Projekt im globalen Editor */
#projectEditorModal #newProjectName {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

/* Dark Mode Anpassung für Input "Neues Projekt" */
@media (prefers-color-scheme: dark) {
    .project-header, .board-grid, .header-cell, .region-header-cell { background-color: #333333 !important; border-color: #444444; color: #f0f0f0; }

    #projectEditorModal #newProjectName {
        background-color: #4a4a4a;
        border-color: #5a5a5a;
        color: #e0e0e0;
    }
}

/* Button "Hinzufügen" im globalen Editor */
#projectEditorModal .save-btn { /* Nutzt deine save-btn Klasse */
    background-color: #28a745; /* Grün für Hinzufügen */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#projectEditorModal .save-btn:hover {
    background-color: #218838;
}

/* Button "Schließen" im globalen Editor */
#projectEditorModal .taskCancelBtn { /* Nutzt deine taskCancelBtn Klasse */
    background-color: #6c757d; /* Grau für Schließen */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#projectEditorModal .taskCancelBtn:hover {
    background-color: #5a6268;
}

.locked-private {
    background: #f4f4f4;
    opacity: 0.8;
    cursor: not-allowed;
}

/* ==========================================================================
   TASK VISIBILITY STYLES (public / group / privat)
   ========================================================================== */

/* Default = public → keine Änderung nötig */

/* 👥 Gruppen-Tasks */
.task-item.visibility-group {
    background-color: #eef4ff;
    border-left: 4px solid #4f7cff;
}

/* 🔒 Private Tasks */
.task-item.visibility-private {
    background-color: #fff0f0;
    border-left: 4px solid #d33;
}

/* Wenn erledigt → trotzdem sichtbar bleiben */
.task-item.done-task.visibility-group {
    background-color: #dde8ff;
}

.task-item.done-task.visibility-private {
    background-color: #f5dcdc;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    .task-item.visibility-group {
        background-color: #2f3c52;
        border-left-color: #6da5ed;
    }

    .task-item.visibility-private {
        background-color: #3a2424;
        border-left-color: #ff6b6b;
    }

    .task-item.done-task.visibility-group {
        background-color: #2a3446;
    }

    .task-item.done-task.visibility-private {
        background-color: #332020;
    }
}

/* ==========================================================================
   APPOINTMENT VISIBILITY STYLES (wie Tasks)
   ========================================================================== */

/* 👥 Gruppen-Termine */
.appointment-card.visibility-group {
    background-color: #eef4ff;
    border-left: 4px solid #4f7cff;
}

/* 🔒 Private Termine */
.appointment-card.visibility-private {
    background-color: #fff0f0;
    border-left: 4px solid #d33;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    .appointment-card.visibility-group {
        background-color: #2f3c52;
        border-left-color: #6da5ed;
    }

    .appointment-card.visibility-private {
        background-color: #3a2424;
        border-left-color: #ff6b6b;
    }
}


/* ==========================================================================
   TIMELINE – VISIBILITY INDICATORS
   ========================================================================== */

.vis-item.vis-range.item-appointment.visibility-group {
    background-color: #e7f1ff !important;
    border-color: #0d6efd !important;
    border-left: 4px solid #0d6efd !important;
}

.vis-item.vis-range.item-appointment.visibility-private {
    background-color: #fdeaea !important;
    border-color: #dc3545 !important;
    border-left: 4px solid #dc3545 !important;
}

@media (prefers-color-scheme: dark) {

    .vis-item.vis-range.item-appointment.visibility-group {
        background-color: #1e2f4f !important;
        border-color: #6ea8fe !important;
        border-left: 4px solid #6ea8fe !important;
        color: #cfe2ff !important;
    }

    .vis-item.vis-range.item-appointment.visibility-private {
        background-color: #3a1f22 !important;
        border-color: #ff6b6b !important;
        border-left: 4px solid #ff6b6b !important;
        color: #ffd6d6 !important;
    }

}

.vis-item.vis-range.visibility-private {
    border-left: 4px solid #dc3545 !important;
}

.vis-item.vis-range.visibility-group {
    border-left: 4px solid #0d6efd !important;
}

@media (prefers-color-scheme: dark) {

    .vis-item.vis-range.visibility-private {
        border-left-color: #ff6b6b !important;
    }

    .vis-item.vis-range.visibility-group {
        border-left-color: #6ea8fe !important;
    }

}

.modal-hint {
    font-size: 0.8em;
    margin-top: 4px;
    color: #c0392b;
}

@media (prefers-color-scheme: dark) {
    .modal-hint {
        color: #ff8c8c;
    }
}


.offer-card {
    cursor: pointer;
}

.offer-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e5e7eb;
    white-space: nowrap;
}

/* Statusfarben */

.status-anfrage-klaerung {
    font-size: 11px;
    padding: 2px 8px;
    margin: 4px;
    border-radius: 10px;
    background: #ffcccc;
    color: #1d4ed8 !important;
    white-space: nowrap;
}

.status-angebotsvorbereitung-abgabe {
    font-size: 11px;
    padding: 2px 8px;
    margin: 4px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e !important;
    white-space: nowrap;
}

.status-warten-auf-rueckmeldung {
    font-size: 11px;
    padding: 2px 8px;
    margin: 4px;
    border-radius: 10px;
    background: #666666;
    color: #ffffff !important;
    white-space: nowrap;
}

/* Angebots-Projekte */
.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 8px;
    margin-bottom: 6px;

    background: #f7f7f9;
    border-radius: 6px;
}

.project-row span {
    font-weight: 500;
}

.project-row button {
    border: none;
    background: transparent;
    cursor: pointer;

    font-size: 16px;
    line-height: 1;

    padding: 4px 8px;
    border-radius: 4px;
}

.project-row button:hover {
    background: #ffe5e5;
}


/* Darkmode Anpassung */
@media (prefers-color-scheme: dark) {

.project-row {
    background: #3a3a3a;
}

.project-row span {
   color: #f1f1f1;
}

.project-row button {
    color: #ddd;
}

.project-row button:hover {
    background: rgba(255,255,255,0.1);
}
}

/* OFFER CARDS */
/* Inhalt der Karte als Column */
.offer-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Beschreibung darf wachsen */
.offer-desc {
    flex-grow: 1;
}

/* Footer immer unten */
.offer-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Status volle Breite */
.offer-status {
    display: block;
    width: 100%;
    text-align: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
}

/* Actions rechts unten */
.offer-footer .app-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.offer-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;      /* 🔥 Anzahl Zeilen */
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    max-height: calc(1.4em * 4);
}

.offer-header strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 🔥 zwei Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3em;
    max-height: calc(1.3em * 2);
}


/* Zeitstatus */

.appointment-card.past {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.appointment-card.current {
    border-right: 6px solid #2ecc71;
}

.appointment-card.future {
    border-right: 6px solid #3498db;
}

/* Badge */

.time-badge {
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.time-badge.past {
    background: #ccc;
}

.time-badge.current {
    background: #2ecc71;
    color: white;
}

.time-badge.future {
    background: #3498db;
    color: white;
}



/* Standard-Styling für die Notiz-Beschreibung */
.note-desc {
    /* Diese Eigenschaften sind wichtig, damit die Klassen die Kontrolle übernehmen können */
    max-height: none !important; /* Wichtig: Überschreibt eventuelle andere max-heights */
    overflow: visible !important; /* Wichtig: Überschreibt eventuelle andere overflows */
    transition: max-height 0.3s ease-out; /* Für eine sanfte Animation beim Ausklappen */
    white-space: pre-wrap; /* pre-wrap; */
}

/* Styling für die gekürzte Beschreibung, wenn das Elternelement 'collapsed' ist */
.note-desc-container.collapsed .note-desc {
    max-height: 100px !important; /* Beispiel: Höhe, auf die gekürzt werden soll */
    overflow: hidden !important;
}

.note-desc-container.collapsed .note-desc .short-desc {
    display: block !important;
}

.note-desc-container.collapsed .note-desc .full-desc {
    display: none !important;
}

/* Styling für die ausgeklappte Beschreibung, wenn das Elternelement 'expanded' ist */
.note-desc-container.expanded .note-desc {
    max-height: none !important; /* Zeigt den gesamten Inhalt */
    overflow: visible !important;
}

.note-desc-container.expanded .note-desc .short-desc {
    display: none !important;
}

.note-desc-container.expanded .note-desc .full-desc {
    display: block !important;
}

/* Styling für den Toggle-Button */
.toggle-desc-btn {
    background: none;
    border: none;
    color: #007bff; /* Oder deine Akzentfarbe */
    cursor: pointer;
    padding: 5px 0;
    text-align: left;
    width: 100%;
    display: block;
    margin-top: 5px;
}

/* userverwaltung */
#userAdminTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
#userAdminTable th, #userAdminTable td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.small-modal {
    max-width: 400px;
}
.admin-toolbar {
    margin-bottom: 15px;
}

.notes-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.tab-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background-color: #e9ecef;
}

.tab-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}





/* Der Code-Container */
.code-collapse-wrapper {
    position: relative;
    max-height: none; /* Standardmäßig offen für kurze Snippets */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    _background: #2d2d2d;
    border-radius: 4px;
}

/* Wenn die Klasse .collapsed aktiv ist, schneiden wir ab */
.code-collapse-wrapper.collapsed {
    max-height: 30px; /* Höhe des sichtbaren Teils */
}

/* Der Schatten-Effekt: NUR im collapsed-Modus */
.code-collapse-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(transparent, rgba(45, 45, 45, 0.95));
    pointer-events: none; /* WICHTIG: Klicks gehen durch den Schatten zum Button/Code */
}

/* Styling für den Toggle-Bereich */
.snippet-toggle-area {
    text-align: center;
    margin: -10px 0 10px; /* Schiebt den Button etwas über den unteren Rand des Codes */
    position: relative;
    z-index: 10;
}

.toggle-snippet-btn {
    background: #444;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toggle-snippet-btn:hover {
    background: #555;
}


#noteSearchInput, #codeSearchInput {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f9f9f9;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

/* Blendet die Tab-Leiste auf Mobilgeräten aus */
@media screen and (max-width: 767px) {
    #notesTabs, #codeTabs {
        display: none !important;
    }
}