/* CSS Variablen und Basis-Stile */
:root {
    --main-bg-color: #defcd5;
    --primary-button-bg: #4A7C59;
    --primary-button-hover-bg: #3D6B4F;
    --secondary-button-bg: #A5D6A7;
    --secondary-button-hover-bg: #81C784;
    --secondary-button-text: #1E402D;
    --add-button-bg: #66BB6A;
    --add-button-hover-bg: #4CAF50;
    --danger-button-bg: #EF5350;
    --danger-button-hover-bg: #E53935;
    --text-color-dark: #1B2E22;
    --text-color-medium: #2A4A37;
    --text-color-light: #556B2F;
    --border-color: #7a9971;
    --focus-ring-color: #38761D;
    --progress-bar-fill-color: var(--primary-button-bg);
    --table-header-bg: #c0e2b8;
    --table-border-color: #a9c9a4;
    --message-success-bg: #E8F5E9;
    --message-success-text: #2E7D32;
    --message-success-border: #A5D6A7;
    --message-error-bg: #FFEBEE;
    --message-error-text: #C62828;
    --message-error-border: #EF9A9A;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--main-bg-color);
    color: var(--text-color-dark);
}

.step-content {
    display: none;
    min-height: 280px;
}

.step-content.active {
    display: block;
}

/* Benutzerdefinierte Stile für Klassen, die vorher @apply nutzten */
.form-label-custom { /* Tailwind Klassen: block text-sm font-medium mb-1 */
    color: var(--text-color-medium);
}

.form-section-title-custom { /* Tailwind Klassen: text-xl font-semibold border-b pb-2 mb-6 */
    color: var(--primary-button-bg);
    border-color: var(--border-color);
}

.form-subsection-title-custom { /* Tailwind Klassen: text-lg font-medium mb-4 */
    color: var(--text-color-dark);
}

.styled-input, .styled-select {
    background-color: var(--main-bg-color);
    color: var(--text-color-dark);
    border: 1px solid var(--border-color);
}

.styled-input:focus, .styled-select:focus {
    outline: none;
    border-color: var(--focus-ring-color);
    box-shadow: 0 0 0 2px var(--focus-ring-color);
}

.styled-input::placeholder {
    color: var(--text-color-light);
    opacity: 0.8;
}

.btn-colors-primary { background-color: var(--primary-button-bg); color: white; border: 1px solid var(--primary-button-bg); }
.btn-colors-primary:hover { background-color: var(--primary-button-hover-bg); border-color: var(--primary-button-hover-bg); }
.btn-colors-primary:focus { box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.4); }
.btn-colors-secondary { background-color: var(--secondary-button-bg); color: var(--secondary-button-text); border: 1px solid var(--secondary-button-bg); }
.btn-colors-secondary:hover { background-color: var(--secondary-button-hover-bg); border-color: var(--secondary-button-hover-bg); }
.btn-colors-secondary:focus { box-shadow: 0 0 0 3px rgba(165, 214, 167, 0.5); }
.btn-colors-danger { background-color: var(--danger-button-bg); color: white; border: 1px solid var(--danger-button-bg); }
.btn-colors-danger:hover { background-color: var(--danger-button-hover-bg); border-color: var(--danger-button-hover-bg); }
.btn-colors-danger:focus { box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.4); }
.btn-colors-add { background-color: var(--add-button-bg); color: white; border: 1px solid var(--add-button-bg); }
.btn-colors-add:hover { background-color: var(--add-button-hover-bg); border-color: var(--add-button-hover-bg); }
.btn-colors-add:focus { box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.5); }

.progress-bar-bg-custom { /* Tailwind Klassen: w-full rounded-full h-2.5 */
    background-color: var(--secondary-button-bg);
}

.progress-bar-fill-custom { /* Tailwind Klassen: h-2.5 rounded-full transition-all duration-500 ease-out */
    background-color: var(--progress-bar-fill-color);
}

.card-custom { /* Tailwind Klassen: p-6 sm:p-8 rounded-xl */
    background-color: var(--main-bg-color);
    /* border: 1px solid var(--table-border-color); Removed */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.05); Removed */
}

/* .input-group { @apply mb-5; } -> Wird durch direktes mb-5 in HTML ersetzt */

.data-table-custom { /* Tailwind Klassen: w-full text-sm text-left rounded-lg overflow-hidden */
    color: var(--text-color-dark);
    border: 1px solid var(--table-border-color);
}

.data-table-custom thead th { /* Tailwind Klassen für th: px-4 py-3 text-xs uppercase border-b */
    background-color: var(--table-header-bg);
    color: var(--primary-button-bg);
    border-color: var(--table-border-color);
}

.data-table-custom tbody td { /* Tailwind Klassen für td: px-4 py-3 border-b align-middle */
    background-color: var(--main-bg-color);
    border-color: var(--table-border-color);
}

.data-table-custom tbody tr:last-child td { /* Tailwind Klasse: border-b-0 */
    border-bottom-width: 0;
}

.message-area-custom { /* Tailwind Klassen: p-4 mb-4 rounded-md border text-sm */
    display: none;
}

.message-area-custom.success {
    background-color: var(--message-success-bg);
    color: var(--message-success-text);
    border-color: var(--message-success-border);
}

.message-area-custom.error {
    background-color: var(--message-error-bg);
    color: var(--message-error-text);
    border-color: var(--message-error-border);
}

.message-area-custom strong { /* Tailwind Klasse: font-semibold */
    font-weight: 600; 
}

/* Stile für Radio/Checkbox - Tailwind-Klassen (h-4 w-4 etc.) sollten direkt im HTML sein */
input[type="radio"] {
    /* Tailwind: h-4 w-4 focus:ring-offset-0 */
    accent-color: var(--primary-button-bg); /* Standard CSS für Farbe */
    border-color: var(--border-color);
}
input[type="radio"]:focus { /* Tailwind: ring-2 ring-offset-0 */
    /* Focus-Ring wird von Tailwind via Klassen gesteuert */
    /* Eigener Fokus-Ring, falls Tailwind nicht greift:
    box-shadow: 0 0 0 2px var(--focus-ring-color); 
    border-color: var(--focus-ring-color);
    */
}

input[type="checkbox"] {
    /* Tailwind: h-4 w-4 rounded focus:ring-offset-0 */
    accent-color: var(--primary-button-bg); /* Standard CSS für Farbe */
    border-color: var(--border-color);
}
input[type="checkbox"]:focus { /* Tailwind: ring-2 ring-offset-0 */
     /* Focus-Ring wird von Tailwind via Klassen gesteuert */
}

a { color: var(--primary-button-bg); }
a:hover { color: var(--primary-button-hover-bg); text-decoration: underline; }

#summaryContainer { /* Tailwind Klassen: p-4 rounded-md */
    background-color: var(--main-bg-color);
    border: 1px solid var(--table-border-color);
}
#summaryContainer h3 {
     color: var(--primary-button-bg) !important;
}
#summaryContainer ul {
    color: var(--text-color-dark) !important;
}
#summaryContainer ul span.font-medium { /* Tailwind Klasse: font-medium */
    color: var(--text-color-medium) !important;
}

/* === Sticky Footer Logik === */
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

main[role="main"] {
    flex-grow: 1;
}

/* Stile für die Icons im Footer (bleiben gleich) */
footer .social-icon img {
    transition: opacity 0.2s ease-in-out;
}

footer .social-icon:hover img {
    opacity: 0.75;
}

/* === Stil für den aktiven Navigationslink === */
nav a.active {
    color: var(--primary - button - bg);
    font-weight: 600; /* semi-bold */
}

/* === Stile für den "Über Mich"-Abschnitt auf der Startseite === */
.about-section {
    border-top: 1px solid var(--border-color);
    margin-top: 4rem; /* 64px */
    padding-top: 4rem; /* 64px */
}

.about-image {
    max-width: 200px;
    border-radius: 30px; /* Rundes Bild */
    border: 4px solid #2A4A37;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* === Stile für die Social Media Icons im Footer (im Theme-Design) === */
footer .social-icon {
    color: var(--text-color-light); /* Nutzt deine bestehende Variable für hellen Text */
    transition: color 0.2s ease-in-out;
}

footer .social-icon:hover {
    color: var(--primary-button-bg); /* Nutzt deine Haupt-Akzentfarbe für den Hover-Effekt */
}

/* Zusätzliche Klasse für ein größeres Bild im "Über Mich"-Stil */
.about-image-large {
    max-width: 260px; /* Du kannst diesen Wert anpassen (vorher 200px) */
}

/* === Stil für Bilder in den Info-Sektionen der Startseite === */
.feature-image {
    border-radius: 1rem; /* 16px, schöne abgerundete Ecken */
    border: 4px solid white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Etwas stärkerer Schatten für mehr Tiefe */
    width: 100%;
    height: auto;
    object-fit: cover; /* Stellt sicher, dass das Bild den Rahmen schön füllt */
}

/* === Optimierung für Blocksatz === */
.text-justify {
    /* 1. Behebt das Problem mit der gestreckten letzten Zeile */
    text-align-last: left;
    /* 2. Erlaubt automatische Silbentrennung für besseren Textfluss */
    -webkit-hyphens: auto; /* Für ältere Browser */
    -ms-hyphens: auto; /* Für Microsoft Browser */
    hyphens: auto; /* Standard */
}

/* === Neues Design für den sekundären Outline/Ghost-Button === */
.btn-colors-outline {
    background-color: transparent;
    border: 2px solid var(--primary-button-bg); /* Farbiger Rahmen */
    color: var(--primary-button-bg); /* Farbiger Text */
    transition: all 0.2s ease-in-out; /* Weicher Übergang für den Hover-Effekt */
}

/* Hover-Effekt: Füllt den Button mit Farbe */
.btn-colors-outline:hover {
    background-color: var(--primary-button-bg);
    color: white;
}