/* style.css */

/* --- GLOBAL STYLES & VARIABLES --- */
:root {
    --font-primary: 'Inter', 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --color-primary-blue: #0078D4; /* Main accent blue */
    --color-secondary-blue: #98adc3; /* Lighter blue for elements */
    --color-light-blue: #e0effe;   /* For previous/inactive states */
    --color-dark-blue: #005a9e;   /* For hover or darker elements */

    --color-text-primary: #1A202C; /* Dark gray for main text */
    --color-text-secondary: #4A5568; /* Medium gray for subtitles, less important text */
    --color-text-light: #718096;    /* Light gray for hints, table subtext */
    --color-text-on-dark: #FFFFFF; /* White text on dark/blue backgrounds */

    --color-background-page: #F7FAFC; /* Very light gray for page background */
    --color-background-card: #FFFFFF; /* White for cards */
    --color-border-light: #E2E8F0;  /* Light border for tables, inputs */
    --color-border-medium: #CBD5E0; /* Medium border */

    --color-status-green: #48BB78; /* Green for 'planmäßig' */
    --color-status-yellow: #ECC94B;
    --color-status-red: #F56565;
    --color-disabled-gray: #D1D5DB; /* For upcoming phases, disabled elements */

    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0,0,0,0.03);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.07), 0 3px 8px rgba(0,0,0,0.04);
    --border-radius-card: 12px;
    --border-radius-element: 8px;
    --padding-card: 28px;
    --margin-section-vertical: 32px;
    --max-width-content: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background-page);
    color: var(--color-text-primary);
    line-height: 1.6;
    padding: var(--margin-section-vertical) 0;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, p, span, div, td, th, button, input, label {
    font-family: var(--font-primary);
}

.project-title.editable-field {
    font-size: 1.25rem; /* 28px */
    font-weight: 700;
    color: var(--color-text-primary);
}

.section-title {
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

/* --- LAYOUT & CARD STYLING --- */
.card-style {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--padding-card);
    transition: box-shadow 0.3s ease;
}

.card-style:hover {
    box-shadow: var(--shadow-card-hover);
}

.dashboard-header {
    max-width: var(--max-width-content);
    margin: 0 auto var(--margin-section-vertical) auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px var(--padding-card); /* Slightly less vertical padding for header */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile-first */
    gap: 10px; /*var(--margin-section-vertical);*/
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0; /* Removed horizontal padding; cards inside will use their own padding and span full grid width */
}

/* --- LOGIN SECTION --- */
.login-container {
    max-width: 400px;
    margin: 80px auto;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-element);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

.button-primary {
    display: block;
    width: 100%;
    background-color: var(--color-primary-blue);
    color: var(--color-text-on-dark);
    border: none;
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-element);
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-primary:hover {
    background-color: var(--color-dark-blue);
}

#loginFeedback {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    min-height: 1.2em; /* Reserve space to prevent layout shift */
}

/* --- HEADER --- */
.button-logout {
    background-color: var(--color-secondary-blue);
    color: var(--color-text-on-dark);
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--border-radius-element);
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-logout:hover {
    background-color: var(--color-dark-blue);
}

/* --- SECTION 1: PROJEKTKOSTEN --- */
.costs-layout {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center;
    gap: 30px;
}

.chart-container {
    position: relative; /* For chart-center-text positioning */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center canvas and insights-row horizontally */
    /* margin: 0 auto; --- Removed --- */
    /* width and height will be determined by content (canvas + insights) */
}

#costsDonutChart { /* Style the canvas element directly */
    max-width: 220px;
    max-height: 220px;
    width: 100%; /* Ensure it's responsive within the max-width/height */
    height: 100%;
}

.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none; /* Allow clicks to pass through to chart if needed */
}

.chart-center-text #paidPercentage {
    display: block;
    font-size: 1.6rem; /* Adjusted for more lines */
    font-weight: 700;
    color: var(--color-primary-blue);
    line-height: 1.2;
}

.chart-center-text #paidAmount {
    display: block;
    font-size: 0.9rem; /* Adjusted */
    font-weight: 500;
    color: var(--color-text-primary);
    margin-top: 2px; /* Adjusted */
    line-height: 1.2;
}

.chart-center-text #paidStatusLabel {
    display: block;
    font-size: 0.75rem; /* Adjusted */
    color: var(--color-text-secondary);
    margin-top: 1px; /* Adjusted */
    line-height: 1.2;
}

.chart-center-text #totalVolumeDisplay {
    display: block;
    font-size: 0.8rem; /* New style */
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 4px; /* Space above total */
    line-height: 1.2;
}

.status-container {
    display: flex;
    flex-direction: column; /* Stack traffic light and text */
    align-items: center;
    gap: 15px;
}

.traffic-light {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #E2E8F0; /* Light gray background for the traffic light housing */
    padding: 12px;
    border-radius: 25px; /* Make it pill-shaped */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.traffic-light .light {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-disabled-gray); /* Default off state */
    border: 2px solid rgba(0,0,0,0.05);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.traffic-light .light.active.red    { background-color: var(--color-status-red); box-shadow: 0 0 10px var(--color-status-red); }
.traffic-light .light.active.yellow { background-color: var(--color-status-yellow); box-shadow: 0 0 10px var(--color-status-yellow); }
.traffic-light .light.active.green  { background-color: var(--color-status-green); box-shadow: 0 0 10px var(--color-status-green); }

.status-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Insight Boxes Styling */
.insights-row {
    box-sizing: border-box; /* Ensure padding/border are included in width/height */
    display: flex;
    flex-direction: column; /* Stack insight boxes vertically */
    align-items: center; /* Center boxes horizontally if they are narrower than the row itself */
    gap: 15px; /* Vertical gap between insight boxes */
    /* No margin-top, width:100%, or flex-wrap needed as it's now a direct flex child in costs-layout */
}

.insight-box {
    box-sizing: border-box; /* Ensure padding/border are included in width/height */
    background-color: #F9FAFB; /* Very light gray, slightly different from card */
    padding: 12px 18px;
    border-radius: var(--border-radius-element);
    border: 1px solid var(--color-border-light);
    width: 200px; /* Consistent width for insight boxes */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.insight-label {
    display: block;
    font-size: 0.8rem; /* Smaller label */
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.insight-value {
    display: block;
    font-size: 1.25rem; /* Prominent value */
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.insight-change {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.insight-change.positive-change {
    color: var(--color-status-red);
}

.insight-change.negative-change {
    color: var(--color-status-red);
}

.insight-change1 {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.insight-change1.positive-change {
    color: var(--color-status-green);
}

.insight-change1.negative-change {
    color: var(--color-status-green);
}

/* --- SECTION 2: PROJEKTFORTSCHRITT --- */
.progress-section-content {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make progress bar take full width available */
    gap: 12px;
}

.progress-bar-container {
    width: 100%;
    height: 28px;
    background-color: #E2E8F0; /* Light gray track */
    border-radius: 14px; /* Half of height for pill shape */
    position: relative; /* For potential inner shadow or gloss */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 25px; /* Increased space below for marker label */
}

.timeline-marker {
    position: absolute;
    top: 0; /* Align top with progress bar container */
    bottom: 0; /* Stretch to bottom of progress bar container */
    /* left: 55%; */ /* Position is now set by JavaScript from data.js */
    width: 2px;
    background-color: var(--color-text-primary); /* Black color for the marker line */
    z-index: 3; /* Ensure marker is above the progress bar fill */
    transition: left 0.3s ease-out; /* Smooth transition when position changes */
}

/* Zeitplanstrich-Prozentangabe */
#timelinePercentage {
    position: absolute;
    left: 50%;
    top: calc(100% + 5px); /* Position below the timeline marker */
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--color-background-light);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--color-border-light);
}

.timeline-marker-label {
    position: absolute;
    left: 50%; /* Start the label at the horizontal center of the marker */
    bottom: calc(100% + 3px); /* Position the bottom of the label 3px above the top of the marker */
    transform: translateX(-50%); /* Shift the label left by half its own width to center it over the marker */

    font-size: 0.7rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    z-index: 4; /* Ensure label is above marker and fill */
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-secondary-blue) 0%, var(--color-primary-blue) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Text to the right */
    padding-right: 15px;
    color: var(--color-text-on-dark);
    font-weight: 600;
    font-size: 0.9rem;
    transition: width 0.5s ease-out;
    box-shadow: 0 1px 2px rgba(255,255,255,0.2) inset, 0 -1px 1px rgba(0,0,0,0.1) inset;
}

.completion-date-text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: right;
}

.table-container {
    overflow-x: auto; /* Responsive table */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.data-table thead th {
    background-color: #F7FAFC; /* Very light gray for header */
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
    background-color: #EFF6FF; /* Light blue hover */
}

.data-table .text-right {
    text-align: right;
}

.data-table td:nth-child(3) { /* Nachtragssumme */
    font-weight: 600;
    color: var(--color-text-primary);
}

.data-table td:nth-child(4) { /* Begründung */
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* --- RESPONSIVE DESIGN --- */
@media (min-width: 768px) {
    /* .dashboard-grid {
        Example: Two columns for medium screens if desired for some sections
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
    } */

    .costs-layout {
        flex-direction: row; /* Side-by-side on larger screens */
        justify-content: space-between; /* Push status-container to the right, costs-main-content to left */
        align-items: flex-start; /* Align items to the top */
    }

    .costs-main-content {
        display: flex;
        align-items: flex-start; /* Aligns chart and insights-row to their top */
        gap: 20px; /* Space between chart-container and insights-row */
    }

    .chart-container {
        width: 250px;
        height: 250px;
    }

    .status-container {
        align-items: center; /* Center traffic light and its text horizontally */
    }

    .progress-section-content {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .progress-bar-container {
        flex-grow: 1; /* Allow progress bar to take available space */
    }

    .completion-date-text {
        text-align: left; /* Align to left when next to bar */
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    /* .dashboard-grid {
        Potentially more complex grid for large screens
        For now, keeping it simple, sections stack vertically 
    } */
    .project-title {
        font-size: 1.5rem; /* 32px */
    }
    .section-title {
        font-size: 1.5rem; /* 24px */
    }
}

/* Edit icons - placeholder styles, to be refined if implemented */
.edit-icon {
    cursor: pointer;
    color: var(--color-secondary-blue);
    margin-left: 8px;
    font-size: 0.9em;
}
.edit-icon:hover {
    color: var(--color-primary-blue);
}

/* --- EDIT MODE STYLES --- */
/* Edit button when active */
#editModeButton.active {
    background-color: #22c55e;
    border-color: #15803d;
    color: white;
}

/* Status textareas in edit mode */
#projektstatus textarea {
    transition: background-color 0.2s, border-color 0.2s;
}

#projektstatus textarea[readonly] {
    background-color: #f8fafc;
    border-color: #d1d5db;
    cursor: default;
}

#projektstatus textarea.edit-mode {
    background-color: white;
    border-color: #93c5fd;
    cursor: text;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Status lights styles for edit mode */
.status-light {
    transition: transform 0.2s, box-shadow 0.2s;
}

.status-light.clickable {
    cursor: pointer;
}

.status-light.clickable:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.status-light.clickable.active {
    transform: scale(1.1);
}

/* Allgemeine Styles für bearbeitbare Felder */
.editable-field {
    position: relative;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Edit-Modus Styles für bearbeitbare Felder */
.edit-mode .editable-field {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 3px;
}

.edit-mode .editable-field:hover {
    background-color: #f3f4f6;
    cursor: pointer;
}

.editable-field.active {
    background-color: white !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
}

/* Pie Chart Edit Table */
.pie-chart-edit-table {
    display: none;
    margin-top: 20px;
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 100;
}

.edit-mode .pie-chart-edit-table {
    display: block;
}

.edit-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pie-chart-edit-table h3 {
    margin: 0;
    font-size: 1rem;
    color: #374151;
}

.toggle-button {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    transition: transform 0.2s ease;
}

.toggle-button:hover {
    color: #3B82F6;
}

.toggle-button.collapsed {
    transform: rotate(-90deg);
}

.pie-chart-edit-table.collapsed table,
.pie-chart-edit-table.collapsed .edit-controls {
    display: none;
}

.pie-chart-edit-table table {
    width: 100%;
    border-collapse: collapse;
}

.pie-chart-edit-table th, 
.pie-chart-edit-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.pie-chart-edit-table th {
    font-weight: 600;
    color: #4b5563;
    background-color: #f3f4f6;
}

.pie-chart-edit-table input[type="color"] {
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: none;
}

/* Input für Inline-Bearbeitung */
.editable-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 80px;
    height: 100%;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    flex-grow: 1;
    margin: 0;
    width: 140px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px; 
    font: inherit;
    color: inherit;
    text-align: inherit;
    z-index: 10;
}

/* Bearbeitungskontrollen (Buttons, etc.) */
.edit-controls {
    display: none;
    margin-top: 10px;
}

.edit-mode .edit-controls {
    display: flex;
    justify-content: flex-end;
}

.edit-only-button {
    display: none;
    padding: 4px 12px;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #334155;
    font-size: 0.9em;
    cursor: pointer;
}

.edit-mode .edit-only-button {
    display: inline-block;
}

.edit-only-button:hover {
    background-color: #e2e8f0;
}

/* Verstecke Edit-Only-Spalte im normalen Modus */
.edit-only-column,
.edit-actions:not(.edit-mode .edit-actions) {
    display: none !important;
}

.edit-mode .edit-only-column,
.edit-mode .edit-actions {
    display: table-cell !important;
    width: 80px;
    text-align: center;
}

/* Bearbeitbare Tabellenzellen */
.edit-mode .data-table td.editable {
    position: relative;
    cursor: pointer;
}

.edit-mode .data-table td.editable:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Benachrichtigungsbox für Edit-Modus */
#edit-mode-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: rgba(34, 197, 94, 0.9);
    color: white;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Klasse für das Ein- und Ausblenden des Modals */
.show-modal {
    display: block !important;
}

.modal-content {
    background-color: var(--color-background-card);
    margin: 10% auto;
    padding: 25px;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    width: 90%;
    max-width: 500px;
    animation: modalFadeIn 0.3s;
}

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

.close-modal {
    color: var(--color-text-secondary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: var(--color-text-primary);
}

.modal h2 {
    margin-bottom: 20px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 10px;
}

.modal .form-group {
    margin-bottom: 15px;
}

.modal .form-info {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 5px;
}

.modal input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-element);
    font-size: 1rem;
}

/* Simple table styling for inputs inside the project costs modal */
.simple-input-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.simple-input-table th,
.simple-input-table td {
    padding: 8px 6px;
    vertical-align: middle;
}
.simple-input-table th {
    text-align: left;
    color: var(--color-text-secondary);
    font-weight: 500;
    width: 60%;
}
.simple-input-table td input[type="number"] {
    width: 100%;
}

#edit-mode-notification {
    background-color: rgba(34, 197, 94, 0.9);
    color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(-100px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

#edit-mode-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* Spezifische Styles für verschiedene bearbeitbare Feldtypen */
.edit-mode .data-table .edit-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.edit-mode .data-table .edit-action-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: #6b7280;
    padding: 2px;
}

.edit-mode .data-table .edit-action-button:hover {
    color: #3b82f6;
}

/* Projektphasen-Timeline und Boxen */
/* Projektphasen-Timeline und Boxen */
.phases-timeline {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 1rem; /* Platz für die Scrollbar */
  }

  .phase-box {
    width: 155px;
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Titel vertikal im verfügbaren Raum */
    align-items: center;
    padding: 10px 15px 30px; /* Oben, Seiten, Unten - schafft Platz für die Wochen */
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    text-align: center;
    flex-shrink: 0; /* Verhindert das Schrumpfen der Boxen */
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative; /* Notwendig für absolute Positionierung des Kind-Elements */
  }

  .phase-box.previous {
      background-color: #d0ddf2;
      border: 2px solid #a4a4a5;
      color: #000000;
  }

  .phase-box.current {
      background-color: #0b477e;
      color: white;
      border: 0px solid #a4a4a5;
  }

  .phase-box.next {
      background-color: #f0f2f5;
      border: 2px solid #a4a4a5;
      color: #6c757d;
  }

  .arrow {
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid #9da0a5; /* Standard-Pfeilfarbe für 'next' Phasen */
      margin: 0 5px;
      flex-shrink: 0;
  }

  .phase-box.previous + .arrow {
    border-left-color: #b7d1eb; /* Blaue Pfeilfarbe für 'previous' und 'current' Phasen */
}
  .phase-box.current + .arrow {
      border-left-color: #0e3f70; /* Blaue Pfeilfarbe für 'previous' und 'current' Phasen */
  }

  .phase-box.inactive {
    border: 2.5px solid var(--color-border-light);
    background: var(--color-light-blue);
    color: var(--color-text-secondary);
  }
  
  .phase-box .phase-title,
  .phase-box .phase-title.editable-field {
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.2em;
    line-height: 1.25;
    word-break: break-word;
    white-space: pre-line;
  }
  
  .phase-weeks {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-text-light);
    position: absolute;
    bottom: 10px; /* Positioniert am unteren Rand */
    left: 0;
    right: 0;
  }
  
  .phase-box.active .phase-title,
  .phase-box.active .phase-weeks {
    color: var(--color-text-on-dark);
  }
  
  .phase-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #D1D5DB;
    margin: 0 0.2rem;
    user-select: none;
    pointer-events: none;
  }
  
  @media (max-width: 600px) {
    .phase-box {
      min-width: 150px;
      max-width: 180px;
      height: 80px;
      font-size: 0.98rem;
      padding: 0.5rem 0.3rem;
    }
    .phase-arrow {
      font-size: 1.5rem;
    }
  }