/**
 * Barrierefreie Formular-Styling-Komponenten
 * 
 * Diese Datei enthält alle grundlegenden Styling-Definitionen für
 * barrierefreie Formulare mit responsivem Design und Fokus auf
 * Zugänglichkeit nach WCAG 2.1-Richtlinien.
 * 
 * - Deutliche Fokus-Zustände für Tastaturbedienung
 * - Ausreichende Farbkontraste
 * - Größere Klickbereiche für Touch-Geräte
 * - Fehlermarkierungen und Hinweise
 * - Symmetrische Abstände für ein ausgewogenes Layout
 */

/* ---- Grundlegende Formular-Einstellungen mit Flexbox ---- */
form {
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 300px; /* Minimale Höhe für bessere Verteilung */
    box-sizing: border-box; /* Verhindert, dass Padding die Gesamtbreite beeinflusst */
}

/* Formulargruppen - Container für Label + Input mit Flexbox */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    margin: 0 0 1rem 0; /* Vereinheitlichter Abstand unten */
    box-sizing: border-box;
}

/* Beschriftungen - klar und deutlich */
label {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    transition: color 0.2s;
}

/* Für erforderliche Felder */
[aria-required="true"] + label::after,
label[for$="[required]"]::after,
label[for]:has(+ [required])::after {
    content: " *";
    color: #d32f2f;
}

/* ---- Eingabefelder ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 0.9rem 1rem; /* Gleichmäßiges Padding links und rechts */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Wichtig für konsistente Breiten */
}

/* Textarea spezifische Einstellungen */
textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Select-Element Styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center; /* Konsistenter Abstand rechts */
    background-size: 1em;
    padding-right: 2.5rem; /* Mehr Platz für das Icon */
    text-align: left; /* Text linksbündig für bessere Lesbarkeit */
}

/* ---- Fokus- und Hover-Zustände ---- */
input:hover:not([disabled]),
select:hover:not([disabled]),
textarea:hover:not([disabled]) {
    border-color: #4a86e8;
    background-color: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4a86e8;
    box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.2);
    background-color: #fff;
}

/* ---- Checkboxen und Radio-Buttons ---- */
.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem 0; /* Symmetrische Margins */
    width: 100%;
    box-sizing: border-box;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    margin: 0; /* Entfernt unerwünschte Margins */
}

.checkbox-label:hover,
.radio-label:hover {
    background-color: rgba(74, 134, 232, 0.05);
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 0.75rem;
    margin-top: 0.3rem; /* Ausrichtung mit Text-Baseline */
}

/* Große, klickbare Bereiche für Touch */
.checkbox-label span,
.radio-label span {
    flex: 1;
}

/* ---- Buttons ---- */
button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.75rem; /* Symmetrisches Padding */
    background-color: #4a86e8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0; /* Entfernt unerwünschte Margins */
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: #3a76d8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

button:focus,
.btn:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.4);
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sekundäre Buttons */
.btn-secondary {
    background-color: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background-color: #e0e0e0;
}

/* ---- Fehlermeldungen ---- */
.error-message {
    display: none;
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.4rem;
    padding-left: 0.2rem;
}

input:invalid + .error-message,
select:invalid + .error-message,
textarea:invalid + .error-message,
input[aria-invalid="true"] + .error-message,
select[aria-invalid="true"] + .error-message,
textarea[aria-invalid="true"] + .error-message {
    display: block;
}

/* Visuelles Feedback für ungültige Felder */
input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #d32f2f;
    background-color: rgba(211, 47, 47, 0.05);
}

/* ---- Barrierefreiheits-Erweiterungen ---- */
/* Skip-Link für Tastaturnutzer */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #4a86e8;
    color: white;
    padding: 0.5rem 1rem;
    z-index: 100;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: none;
}

/* Versteckte Elemente für Screenreader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ARIA Live-Regionen */
[aria-live="polite"],
[aria-live="assertive"] {
    margin-bottom: 1rem;
}

/* Erfolgsmeldungen */
.success-message {
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #2e7d32;
    border-radius: 6px;
}

/* Ladeanzeige */
.loading-indicator {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(74, 134, 232, 0.3);
    border-radius: 50%;
    border-top-color: #4a86e8;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Datei-Upload Styling ---- */
.file-upload-container {
    border: 2px dashed #4a86e8;
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 0 0 1rem 0; /* Symmetrischer Abstand unten */
    width: 100%;
    box-sizing: border-box;
}

.file-upload-container:hover {
    background-color: #e8f0fe;
    border-color: #3a76d8;
}

.file-upload-container:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.4);
    background-color: #e8f0fe;
}

input[type="file"] {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 1;
    overflow: visible;
    cursor: pointer;
    z-index: 2;
}

/* Verstecke den Standard-Button, aber behalte die Funktionalität */
input[type="file"]::file-selector-button {
    font-size: 0;
    padding: 0;
    margin-right: 1rem;
    border: none;
    visibility: hidden;
    position: absolute;
}

.file-upload-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #333;
}

.file-upload-icon {
    display: block;
    margin: 0 auto 1rem;
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%234a86e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.file-upload-hint {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.file-name-display {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    word-break: break-word;
}

.file-size-info {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

.selected-file {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #e8f0fe;
    border-radius: 4px;
    display: none; /* Wird per JavaScript angezeigt, wenn eine Datei ausgewählt ist */
}

.selected-file.active {
    display: block;
}

/* ---- Form Layout mit Flexbox ---- */
/* Hauptstruktur des Formulars - Eingabefelder nehmen den verfügbaren Platz ein */
form {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt Inhalt und platziert Submit-Button unten */
    align-items: center; /* Zentriert die Inhalte horizontal */
}

/* Form-Felder-Container - Alle Eingabefelder bis auf Submit-Button */
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    width: 100%; /* Volle Breite des Formulars */
    align-items: center; /* Zentriert die Elemente horizontal */
    box-sizing: border-box;
}

/* Container für Zeilen mit mehreren Elementen */
.form-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.form-row .form-group {
    flex: 1; /* Gleiche Größe für alle Elemente in einer Zeile */
    min-width: 0; /* Verhindert Überlauf */
}

/* Form Actions - Container für Submit-Button, immer am Ende */
.form-actions {
    margin-top: auto; /* Schiebt den Button ans untere Ende */
    padding-top: 2rem;
    display: flex;
    justify-content: center; /* Zentrierte Buttons */
    gap: 1rem;
    width: 100%; /* Volle Breite des Formulars */
    box-sizing: border-box;
}

/* ---- Responsive Anpassungen ---- */
@media screen and (max-width: 768px) {
    form {
        padding: 1.5rem; /* Weniger Padding auf kleineren Bildschirmen */
    }
    
    .form-row {
        flex-direction: column; /* Bei kleinen Bildschirmen untereinander */
        gap: 1rem;
    }
    
    .form-actions {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    button,
    .btn,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        width: 100%;
        max-width: 400px; /* Verhindert zu breite Buttons */
    }
}

/* ---- Utilities ---- */
.form-hint {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

.field-with-icon {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.field-icon {
    position: absolute;
    top: 50%;
    right: 1rem; /* Konsistenter Abstand rechts */
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}

.security-notice {
    background-color: #f8f9fa;
    border-left: 4px solid #4a86e8;
    padding: 1rem;
    margin: 0 0 1.5rem 0; /* Symmetrische Margins */
    font-size: 0.9rem;
    color: #333;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}