/*--------------------------------------------------------------
# Supplier Formular – Struktur & Layout
--------------------------------------------------------------*/
.supplier_form {
    padding: 4em 0 2em 0;
}

.supplier_form .supplier-dashboard {
    margin: 0 auto 2em auto;
    max-width: 880px;
    width: 80%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 28px rgba(53, 61, 146, 0.06);
    padding: 2.5em 2em 2em 2em;
}

@media (max-width: 900px) {
    .supplier_form .supplier-dashboard {
        padding: 1.5em 0.8em;
        box-shadow: unset;
    }
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
.supplier_form h1 {
    font-size: 2.1rem;
    color: #353D92;
    font-weight: 700;
    margin-bottom: 0.7em;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.supplier_form .subline {
    display: block;
    font-size: 1.05rem;
    font-weight: 400;
    color: #6971aa;
    margin-top: 0.2em;
}

.supplier_form h2 {
    font-size: 1.15rem;
    color: #353D92;
    font-weight: 700;
    margin-top: 2.2em;
    margin-bottom: 0.7em;
    letter-spacing: -0.4px;
}

.supplier_form h3 {
    font-size: 1.1rem;
    color: #222B53;
    margin: 1.7em 0 0.9em 0;
    font-weight: 700;
    border-bottom: 1px solid #E8EAF6;
    padding-bottom: 0.4em;
    letter-spacing: -0.3px;
}

.supplier_form h4 {
    font-size: 1rem;
    color: #353D92;
    margin-bottom: 0.2em;
    font-weight: 700;
}

.lieferantenselbstauskunft p,
.instructions.group-instructions {
    font-size: 16px;
}

/*--------------------------------------------------------------
# Formular-Gruppen & Input Styles
--------------------------------------------------------------*/
.supplier_form .form-group {
    margin-bottom: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.supplier_form label {
    font-size: 0.98rem;
    font-weight: 600;
    color: #29357d;
    margin-bottom: 0.2em;
    letter-spacing: 0.01em;
}

.supplier_form .form-input,
.supplier_form select,
.supplier_form input[type="date"],
.supplier_form input[type="number"] {
    width: 100%;
    padding: 0.7em 1em;
    border: 1.5px solid #E3E6F0;
    border-radius: 6px;
    font-size: 1rem;
    background: #fcfcff;
    transition: border-color 0.2s;
    color: #2a2e39;
}

.supplier_form .form-input:focus,
.supplier_form select:focus,
.supplier_form input[type="date"]:focus {
    outline: none;
    border-color: #353D92;
    box-shadow: 0 0 0 2px #353d9230;
}

.supplier_form .instructions {
    color: #7881c3;
    font-size: 0.89rem;
    margin-top: 0.05em;
}

.supplier_form .radio-group label {
    font-weight: 400;
    margin-bottom: 0.25em;
    color: #353D92;
}

/*--------------------------------------------------------------
# Radio Buttons Custom Styling
--------------------------------------------------------------*/
.supplier_form .radio-group {
    display: flex; /* Für horizontale oder vertikale Anordnung */
    flex-direction: column; /* Standardmäßig untereinander */
    gap: 0.6em; /* Abstand zwischen den Radio-Optionen */
    margin-top: 0.3em;
}

/* Optional: Wenn Radio-Buttons nebeneinander sollen */
/*
.supplier_form .radio-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}
*/

.supplier_form .radio-group label {
    display: inline-flex; /* Wichtig für Alignment von custom Radio und Text */
    align-items: center;
    cursor: pointer;
    font-weight: 400; /* Standard-Schriftgewicht für Optionen */
    color: #2a2e39; /* Farbe für den Label-Text */
    font-size: 0.98rem;
    position: relative; /* Für die Positionierung des custom Radios */
    padding-left: 28px; /* Platz für den custom Radio Button */
    min-height: 20px; /* Stellt sicher, dass das Label Höhe hat, auch wenn der Text kurz ist */
    margin-bottom: 0; /* Entferne den Standard-Margin von Label innerhalb der Gruppe */
}

/* Verstecke den originalen Radio-Button */
.supplier_form .radio-group input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Eigener Radio-Button - äußerer Kreis */
.supplier_form .radio-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd; /* Randfarbe des Kreises */
    border-radius: 50%;
    background-color: #fff; /* Hintergrundfarbe des Kreises */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Eigener Radio-Button - innerer Punkt (wenn ausgewählt) */
.supplier_form .radio-group input[type="radio"]:checked + label::after {
    content: '';
    position: absolute;
    left: 5px; /* Position des inneren Punktes */
    top: 50%;
    transform: translateY(-50%);
    width: 10px; /* Größe des inneren Punktes */
    height: 10px;
    border-radius: 50%;
    background-color: #353D92; /* Farbe des inneren Punktes */
}

/* Style für den äußeren Kreis, wenn ausgewählt */
.supplier_form .radio-group input[type="radio"]:checked + label::before {
    border-color: #353D92; /* Randfarbe, wenn ausgewählt */
}

/* Hover-Effekt */
.supplier_form .radio-group label:hover::before {
    border-color: #6c757d;
}
.supplier_form .radio-group input[type="radio"]:checked + label:hover::before {
    border-color: #232c51; /* Dunklerer Hover, wenn aktiv */
}

/* Fokus-Effekt für Barrierefreiheit */
.supplier_form .radio-group input[type="radio"]:focus + label::before {
    box-shadow: 0 0 0 0.2rem rgba(53, 61, 146, 0.25); /* Fokus-Indikator */
}

/* Disabled State für Radio Buttons */
.supplier_form .radio-group input[type="radio"]:disabled + label {
    color: #6c757d; /* Ausgegrauter Text */
    cursor: not-allowed;
}

.supplier_form .radio-group input[type="radio"]:disabled + label::before {
    background-color: #e9ecef; /* Ausgegrauter Hintergrund für den Kreis */
    border-color: #ced4da;
}

.supplier_form .radio-group input[type="radio"]:disabled:checked + label::after {
    background-color: #adb5bd; /* Ausgegrauter innerer Punkt */
}

/*--------------------------------------------------------------
# Sub-Groups
--------------------------------------------------------------*/
.supplier_form .sub-group {
    background: #f5f7fc;
    border-radius: 7px;
    padding: 1em 1.2em 0.7em 1.2em;
    margin-top: 0.8em;
    margin-bottom: 1.4em;
}

.supplier_form .sub-group h3 {
    margin-top: 0;
    border: none;
    padding-bottom: 0;
}

.supplier_form .sub-group .sub-group {
    background: none;
    padding: 0;
    margin: 0;
}

/*--------------------------------------------------------------
# Custom Switch (ACF Switch) - Horizontales Layout
--------------------------------------------------------------*/

/* Hauptcontainer für ein Switch-Feld im horizontalen Layout */
.supplier_form .form-group .switch-field-horizontal-layout { /* Spezifischer, um andere .form-group nicht zu beeinflussen */
    display: flex;
    align-items: center; /* Vertikal zentrieren: Switch und Textblock */
    gap: 1em; /* Abstand zwischen Switch und Textblock */
    margin-bottom: 0.5em; /* Reduzierter Abstand nach unten, wenn 'instructions' folgen */
}

/* Wrapper für den reinen Switch-Mechanismus */
.supplier_form .switch-control-wrapper {
    flex-shrink: 0; /* Verhindert, dass der Switch kleiner wird */
    position: relative; /* Für das .visually-hidden Label */
}

/* Wrapper für Label und Beschreibung rechts vom Switch */
.supplier_form .switch-text-content {
    flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */
}

.supplier_form .switch-main-label { /* Das ist die <h4> */
    font-size: 1rem; /* Oder deine bevorzugte Größe */
    color: #353D92;
    font-weight: 700;
    margin-bottom: 0.1em; /* Kleiner Abstand zur Sub-Beschreibung */
    cursor: pointer; /* Da es jetzt klickbar ist */
    display: block; /* Um sicherzustellen, dass es die volle Breite des text-content einnimmt, wenn gewünscht */
}

.supplier_form .switch-sub-description { /* Das ist die 'message', jetzt als <p> */
    font-size: 0.92rem;
    color: #5a6296; /* Etwas heller, um es vom Hauptlabel abzusetzen */
    line-height: 1.3;
    margin-bottom: 0; /* Kein Abstand nach unten, da es der letzte Text im Block ist */
}

/* Die eigentlichen Switch-Styles (Input, Slider, Handle, Texte im Slider) bleiben weitgehend gleich
   wie in der vorherigen Antwort, ggf. kleine Anpassungen für Positionierung oder Größe.
   Hier sind die wichtigsten Teile, die gleich bleiben oder nur minimal angepasst werden: */

.supplier_form .acf-switch-input { /* Bleibt gleich */
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.supplier_form .acf-switch-slider { /* Ggf. die display:inline-block entfernen, wenn .switch-control-wrapper das regelt */
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 70px; /* Etwas kleiner vielleicht? Oder deine Präferenz */
    height: 30px; /* Etwas kleiner vielleicht? */
    background-color: #e0e2f6;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.supplier_form .acf-switch-handle { /* Ggf. Größe anpassen, wenn Slider kleiner wird */
    position: absolute;
    height: 22px; /* Angepasst */
    width: 22px;  /* Angepasst */
    left: 4px;
    bottom: 4px;   /* Oder top: 50%; transform: translateY(-50%); */
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.supplier_form .acf-switch-input:checked + .acf-switch-slider { /* Bleibt gleich */
    background-color: #353D92;
}

.supplier_form .acf-switch-input:checked + .acf-switch-slider .acf-switch-handle {
    transform: translateX(40px); /* Ggf. Wert an neue Slider/Handle-Größe anpassen */
}

.supplier_form .acf-switch-text { /* Ggf. Schriftgröße/Position anpassen */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem; /* Angepasst */
    font-weight: 600;
    color: white;
    transition: opacity 0.3s ease, color 0.3s ease;
    user-select: none;
}

.supplier_form .acf-switch-on {
    left: 12px; /* Angepasst */
    opacity: 0;
}

.supplier_form .acf-switch-off {
    right: 10px; /* Angepasst */
    opacity: 1;
    color: #495057;
}

.supplier_form .acf-switch-input:checked + .acf-switch-slider .acf-switch-on { /* Bleibt gleich */
    opacity: 1;
}

.supplier_form .acf-switch-input:checked + .acf-switch-slider .acf-switch-off { /* Bleibt gleich */
    opacity: 0;
}

/* Disabled/Readonly States (bleiben konzeptionell gleich, ggf. Farben anpassen) */
.supplier_form .acf-switch-input:disabled + .acf-switch-slider {
    cursor: not-allowed;
    background-color: #e9ecef;
}
.supplier_form .acf-switch-input:disabled + .acf-switch-slider .acf-switch-handle {
    background-color: #ced4da;
}
.supplier_form .acf-switch-input:disabled:not(:checked) + .acf-switch-slider .acf-switch-off {
    color: #6c757d;
    opacity: 1;
}
.supplier_form .acf-switch-input:disabled:checked + .acf-switch-slider .acf-switch-on {
    color: #f8f9fa;
    opacity: 1;
}
.supplier_form .acf-switch-input:disabled:checked + .acf-switch-slider {
    background-color: #adb5bd;
}

/* Visually hidden class (bleibt gleich) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Wenn allgemeine Instructions unter dem horizontalen Switch sind */
.supplier_form .switch-field-horizontal-layout + .instructions {
    margin-top: 0.5em; /* Etwas Abstand nach oben */
    padding-left: calc(70px + 1em); /* Einrücken, um unter dem Text zu stehen, nicht unter dem Switch. (Switch-Breite + Gap) */
}
/* Media Query für kleinere Bildschirme: Switch und Text wieder untereinander */
@media (max-width: 500px) { /* Oder einen passenden Breakpoint wählen */
    .supplier_form .form-group .switch-field-horizontal-layout {
        flex-direction: column;
        align-items: flex-start; /* Links ausrichten */
        gap: 0.5em;
    }

    .supplier_form .switch-control-wrapper {
        margin-bottom: 0.3em; /* Kleiner Abstand zum Text darunter */
    }
    
    .supplier_form .switch-field-horizontal-layout + .instructions {
        padding-left: 0; /* Einrückung zurücksetzen */
    }
}

/*--------------------------------------------------------------
# Hinweis- & Kontaktblöcke
--------------------------------------------------------------*/
.supplier_form .hinweis-block {
    background: #ebedfa;
    border-left: 5px solid #353D92;
    padding: 15px 18px;
    border-radius: 6px;
    color: #232c51;
    margin: 1.2em 0 2em 0;
    font-size: 1rem;
    font-weight: 500;
}

.supplier_form .kontakt-block {
    background: #f1f3fa;
    border-left: 3px solid #6971aa;
    padding: 13px 16px;
    border-radius: 5px;
    color: #232c51;
    margin-bottom: 1.5em;
    font-size: 1rem;
}

/*--------------------------------------------------------------
# Form-Buttons
--------------------------------------------------------------*/
.supplier_form .form-actions {
    display: flex;
    gap: 1em;
    margin-top: 2em;
}

.supplier_form .login-button,
.supplier_form .logout-button,
.supplier_form button[type="submit"] {
    background: #353D92;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.75em 1.7em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(53, 61, 146, 0.11);
    transition: background 0.2s, filter 0.2s;
    letter-spacing: 0.04em;
}

.supplier_form .login-button.final-submit {
    background: #6971aa;
}

.supplier_form .login-button:hover,
.supplier_form .logout-button:hover {
    background: #232c51;
    filter: brightness(1.03);
}

.supplier_form .login-button.final-submit:hover {
    background: #4b5189;
}

.supplier_form .login-button:active,
.supplier_form .logout-button:active {
    background: #222B53;
}

/*--------------------------------------------------------------
# Tabellen & Listen
--------------------------------------------------------------*/
.supplier_form ul,
.supplier_form ol {
    padding-left: 1.3em;
    margin-bottom: 1.3em;
    color: #2a2e39;
}

.supplier_form li {
    margin-bottom: 0.55em;
}

.supplier_form a {
    color: #353D92;
    text-decoration: underline;
    word-break: break-word;
}

.supplier_form .danke {
    font-size: 1.13rem;
    font-weight: 700;
    margin-top: 2.1em;
    color: #353D92;
}

/*--------------------------------------------------------------
# Responsive Anpassungen
--------------------------------------------------------------*/
@media (max-width: 700px) {
    .supplier_form .supplier-dashboard {
        padding: 1em 0.4em;
        max-width: 99vw;
    }

    .supplier_form h1 {
        font-size: 1.33rem;
    }

    .supplier_form h2 {
        font-size: 1.04rem;
    }

    .supplier_form .form-actions {
        flex-direction: column;
        gap: 0.7em;
    }

    .supplier_form .sub-group {
        padding: 0.8em 0.6em;
    }
}

/*--------------------------------------------------------------
# Grid für Kopfbereich
--------------------------------------------------------------*/
.supplier_form .bd_grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.2em;
    align-items: start;
    margin-bottom: 1.2em;
}

@media (max-width: 700px) {
    .supplier_form .bd_grid {
        grid-template-columns: 1fr;
        gap: 0.7em;
    }
}

/*--------------------------------------------------------------
# ACF Group Layout Enhancements
--------------------------------------------------------------*/

/* Dies ist der Wrapper für die Felder *innerhalb* einer Gruppe, z.B. Ansprechpartner */
.supplier_form .acf-group-fields-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em; /* Zeilenabstand Spaltenabstand */
    /* margin-left: -0.5em; /* Um den Gap der ersten Spalte auszugleichen, wenn kein padding auf parent */
    /* margin-right: -0.5em; */
}

/* Die einzelnen .form-group Elemente innerhalb des .acf-group-fields-wrapper */
.supplier_form .acf-group-fields-wrapper > .form-group {
    /* Standardmäßig nehmen sie Platz ein, aber Flex-Basis wird von acf-w-* Klassen bestimmt */
    flex-grow: 1;
    flex-shrink: 1;
    /* margin-bottom: 0.5em; /* Reduziere den Standard-Margin, da Gap ihn teilweise übernimmt */
    /* padding-left: 0.5em; /* Für den Gap-Ausgleich */
    /* padding-right: 0.5em; */
    box-sizing: border-box; /* WICHTIG für korrekte Breitenberechnung mit Padding/Border */
}

/* Breitenklassen, die von PHP hinzugefügt werden */
/* Passen Sie diese Prozentsätze und die Anzahl der Klassen an Ihre Bedürfnisse an */
/* Die calc() Funktion hilft, den Gap zu berücksichtigen, wenn nötig.
   Für eine einfache Lösung mit `gap` ist `flex-basis` oft ausreichend.
   `flex: 0 0 X%` ist eine Kurzform für `flex-grow: 0; flex-shrink: 0; flex-basis: X%;`
   Dies verhindert, dass die Elemente wachsen oder schrumpfen. */

.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-20 {
    flex-basis: calc(20% - 0.8em); /* Für 5 Elemente in einer Reihe (1em Spaltenabstand) */
    min-width: calc(20% - 0.8em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-30 {
    flex-basis: calc(30% - 0.7em); /* Für ~3 Elemente (1em Spaltenabstand) */
    min-width: calc(30% - 0.7em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-33-33 {
    flex-basis: calc(33.333% - 0.67em); /* Für 3 Elemente (1em Spaltenabstand) */
    min-width: calc(33.333% - 0.67em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-35 {
    flex-basis: calc(35% - 0.65em); /* Für ~fast 3 Elemente */
    min-width: calc(35% - 0.65em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-40 {
    flex-basis: calc(40% - 0.6em); /* Für ~2.5 Elemente (1em Spaltenabstand) */
    min-width: calc(40% - 0.6em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-50 {
    flex-basis: calc(50% - 0.5em); /* Für 2 Elemente (1em Spaltenabstand) */
    min-width: calc(50% - 0.5em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-70 {
    flex-basis: calc(70% - 0.3em); /* Für ~1.x Elemente (1em Spaltenabstand) */
    min-width: calc(70% - 0.3em);
}
.supplier_form .acf-group-fields-wrapper > .form-group.acf-w-100 {
    flex-basis: 100%;
    min-width: 100%;
}

/* Wenn ein Feld innerhalb des Wrappers keine Breitenklasse hat, soll es volle Breite nehmen */
.supplier_form .acf-group-fields-wrapper > .form-group:not([class*="acf-w-"]) {
    flex-basis: 100%;
    min-width: 100%;
}


/* Styling für die äußere Hülle einer ACF-Gruppe (falls benötigt) */
.supplier_form .acf-group-container.sub-group {
    background: #f0f2f8; /* Etwas anderer Hintergrund zur Unterscheidung von einzelnen Feldern */
    padding: 1em 1.2em 1.2em 1.2em; /* Padding anpassen */
    border: 1px solid #dfe3f0;
    border-radius: 6px;
    margin-bottom: 1.5em; /* Etwas mehr Abstand nach unten */
}

/* Titel innerhalb der ACF-Gruppe anpassen */
.supplier_form .acf-group-container.sub-group .sub-group-title-wrapper h3 {
    margin-top: 0;
    margin-bottom: 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #d1d8e6;
    font-size: 1.05rem; /* Etwas kleiner als H3 außerhalb von Gruppen */
}

/* Korrektur für verschachtelte .sub-group (falls ein .sub-group direkt in einem anderen ist) */
/* .supplier_form .sub-group .sub-group { */
    /* Dies wird jetzt durch .acf-group-container .sub-group spezifischer gehandhabt */
/* } */

/* Responsive Anpassungen für die gruppierten Felder */
@media (max-width: 768px) { /* Tablet und darunter */
    .supplier_form .acf-group-fields-wrapper {
        flex-direction: column; /* Übereinander stapeln */
        gap: 0; /* Gap zurücksetzen, da margin-bottom der form-groups greift */
    }

    /* Alle Felder im Wrapper nehmen volle Breite ein */
    .supplier_form .acf-group-fields-wrapper > .form-group,
    .supplier_form .acf-group-fields-wrapper > .form-group[class*="acf-w-"] {
        flex-basis: 100% !important;
        min-width: 100% !important;
        margin-bottom: 1.4em; /* Standard-Abstand wiederherstellen */
    }
}

/* Spezifische Anpassung für Ansprechpartner-Blöcke, falls die generischen Regeln nicht reichen */
.supplier_form .form-group[data-field-name^="contacts_info_"][data-field-name$="_contact"] > .acf-group-fields-wrapper {
    /* Hier könnten Sie spezielle Gap-Werte oder andere Overrides für Ansprechpartner-Gruppen definieren */
    /* z.B. gap: 0.8em 1.2em; */
}

.supplier_form .form-group[data-field-name^="contacts_info_"][data-field-name$="_contact"] > .acf-group-fields-wrapper > .form-group.acf-w-20 {
    /* Spezifische Breite für Anrede (20%) */
    flex-basis: calc(20% - 0.8em); min-width: calc(20% - 0.8em);
}
.supplier_form .form-group[data-field-name^="contacts_info_"][data-field-name$="_contact"] > .acf-group-fields-wrapper > .form-group.acf-w-40 {
    /* Spezifische Breite für Vorname/Nachname (40%) */
    flex-basis: calc(40% - 0.6em); min-width: calc(40% - 0.6em);
}
/* usw. für die Felder Telefon, Mobil, E-Mail (33.33%) */
.supplier_form .form-group[data-field-name^="contacts_info_"][data-field-name$="_contact"] > .acf-group-fields-wrapper > .form-group.acf-w-33-33 {
    flex-basis: calc(33.333% - 0.67em); min-width: calc(33.333% - 0.67em);
}


/*--------------------------------------------------------------
# Language Switcher
--------------------------------------------------------------*/
.language-switcher-container {
    font-size: 0.9rem;
    padding-bottom: 0.5em; /* Etwas Abstand nach unten, bevor ein Trenner oder Inhalt kommt */
    margin-bottom: 1em;   /* Standard-Abstand zum folgenden Element */
    text-align: right;    /* Standardmäßig rechtsbündig */
}

/* Spezifisch für Dashboard-Platzierung (z.B. über dem Grid) */
.supplier-dashboard > .language-switcher-container {
    /* border-bottom: 1px solid #E8EAF6; */ /* Optional: Trennlinie, wenn direkt über Inhalt */
    /* margin-bottom: 1.5em; */ /* Kann hier spezifischer sein */
    /* padding-left: 0.5em; */ /* Etwas Einrücken vom Rand des Dashboards */
    /* padding-right: 0.5em; */
}

/* Spezifisch für Login-Platzierung */
.supplier-login .language-switcher-container.login-lang-switcher {
    margin-top: -1em; /* Ggf. leicht nach oben verschieben */
    margin-bottom: 1.5em; /* Abstand zum Login-Titel */
}

.language-switcher-container .language-option {
    color: #6971aa;
    text-decoration: none;
    padding: 0.4em 0.6em; /* Etwas mehr Klickfläche */
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 600;
    border: 1px solid transparent; /* Für Hover-Effekt ohne Layout-Sprung */
}

.language-switcher-container .language-option:hover,
.language-switcher-container .language-option:focus { /* Fokus-Style hinzufügen */
    color: #353D92;
    background-color: #f0f2f8;
    border-color: #d1d8e6;
    outline: none; /* Standard-Fokusring entfernen, da wir eigenen haben */
}

.language-switcher-container .language-option.active {
    color: #353D92;
    font-weight: 700;
    background-color: #e8eaf6; /* Deutlicherer Hintergrund für aktiv */
    border-color: #c5cbe6;
    pointer-events: none;
}

.language-switcher-container .language-separator {
    color: #adb5bd;
    margin: 0 0.4em;
    font-weight: 400; /* Weniger dominant als die Links */
}

/* Wenn der Sprachumschalter in einem Grid-Layout sein soll,
   kann man ihm eine Grid-Spaltenzuweisung geben. Beispiel:
.bd_grid .language-switcher-container {
    grid-column: 2 / 3; // Nimmt die zweite Spalte ein (wenn es 2 Spalten gibt)
    justify-self: end;  // Richtet sich am Ende der Grid-Zelle aus
    align-self: start; // Richtet sich am Anfang (oben) der Grid-Zelle aus
}
*/

/*--------------------------------------------------------------
# Supplier Login Form
--------------------------------------------------------------*/
.supplier_form .supplier-login {
    max-width: 480px; /* Schmaler als das Dashboard */
    margin: 2em auto; /* Zentriert mit etwas Abstand oben/unten */
    padding: 2.5em 2em 3em 2em;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 28px rgba(53, 61, 146, 0.08);
    text-align: center; /* Zentriert den Inhalt, wenn gewünscht */
}

.supplier_form .supplier-login h1 {
    font-size: 1.8rem;
    color: #353D92;
    font-weight: 800;
    margin-bottom: 1em;
}

.supplier_form .supplier-login .error-message {
    background-color: #ffebee;
    color: #c62828;
    padding: 0.8em 1em;
    border-radius: 6px;
    margin-bottom: 1.2em;
    font-size: 0.95rem;
    border: 1px solid #ef9a9a;
    text-align: left;
}

.supplier_form .supplier-login form {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    text-align: left; /* Labels und Inputs linksbündig */
}

.supplier_form .supplier-login label {
    font-size: 0.98rem;
    font-weight: 600;
    color: #29357d;
    margin-bottom: 0.1em;
}

.supplier_form .supplier-login input[type="password"] {
    width: 100%;
    padding: 0.7em 1em;
    border: 1.5px solid #E3E6F0;
    border-radius: 6px;
    font-size: 1rem;
    background: #fcfcff;
    transition: border-color 0.2s;
    color: #2a2e39;
    box-sizing: border-box;
}

.supplier_form .supplier-login input[type="password"]:focus {
    outline: none;
    border-color: #353D92;
    box-shadow: 0 0 0 2px #353d9230;
}

.supplier_form .supplier-login .login-button {
    /* Styles vom Dashboard-Button übernehmen oder anpassen */
    background: #353D92;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.75em 1.5em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(53, 61, 146, 0.11);
    transition: background 0.2s, filter 0.2s;
    letter-spacing: 0.04em;
    width: 100%; /* Button über volle Breite */
    margin-top: 0.5em;
}

.supplier_form .supplier-login .login-button:hover {
    background: #232c51;
    filter: brightness(1.03);
}

/* Spezifische Anpassung für Sprachumschalter auf Login-Seite */
.supplier_form .supplier-login .language-switcher-container.login-lang-switcher {
    margin-bottom: 1.5em; /* Mehr Abstand zum H1 */
    margin-top: -1em; /* Etwas höher, falls es zu weit unten ist */
    text-align: right; /* Sicherstellen, dass es rechts ist */
}

@media (max-width: 520px) {
    .supplier_form .supplier-login {
        margin: 1em auto;
        padding: 2em 1em 2.5em 1em;
    }
    .supplier_form .supplier-login h1 {
        font-size: 1.5rem;
    }
}


/* Fehlerzustand für Inputs */
.form-input.bd-input-error {
    border-color: #dc3545 !important;
    background-color: #fff8f8;
}
/* Styling für das HTML5 :invalid Pseudo-Element (Fallback) */
input:invalid {
    box-shadow: none; /* Browser-Defaults resetten */
}

/*--------------------------------------------------------------
# Allgemeine Status-Meldungen (Dashboard Save-Feedback)
--------------------------------------------------------------*/
.supplier_form .success-message,
.supplier_form .error-message {
    padding: 0.8em 1em;
    border-radius: 6px;
    margin: 1em 0 1.5em 0;
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.supplier_form .success-message {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.supplier_form .error-message {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
}

/*--------------------------------------------------------------
# Save-Toast (sticky Notification nach Speichern / Final-Absenden)
--------------------------------------------------------------*/
.bd-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 560px;
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s;
    pointer-events: auto;
}

.bd-toast--visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.bd-toast--leaving {
    transform: translate(-50%, -120%);
    opacity: 0;
}

.bd-toast--success {
    background: #1b5e20;
    color: #ffffff;
    border-left: 5px solid #66bb6a;
}

.bd-toast--error {
    background: #b71c1c;
    color: #ffffff;
    border-left: 5px solid #ef5350;
}

.bd-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bd-toast__msg {
    flex: 1;
}

.bd-toast__close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 4px;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.bd-toast__close:hover,
.bd-toast__close:focus {
    opacity: 1;
    outline: none;
}

@media (max-width: 600px) {
    .bd-toast {
        left: 12px;
        right: 12px;
        max-width: none;
        min-width: 0;
        transform: translateY(-120%);
    }
    .bd-toast--visible { transform: translateY(0); }
    .bd-toast--leaving { transform: translateY(-120%); }
}

/*--------------------------------------------------------------
# Multi-File-Upload-Block (Repeater-Stil) — ATEX / PED / Weitere Zertifikate
--------------------------------------------------------------*/
.supplier_form .bd-files-block {
    margin-bottom: 1.4em;
}

.supplier_form .bd-files-block__label {
    display: block;
    font-weight: 600;
    color: #29357d;
    margin-bottom: 0.5em;
}

.supplier_form .bd-existing-files {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.supplier_form .bd-existing-files li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #f6f7fc;
    border: 1px solid #e3e6f0;
    border-radius: 6px;
    margin-bottom: 6px;
}

.supplier_form .bd-existing-files a {
    color: #353D92;
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    word-break: break-all;
}

.supplier_form .bd-existing-files a:hover {
    text-decoration: underline;
}

.supplier_form .bd-file-remove-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #b32d2e;
    cursor: pointer;
    margin: 0;
}

.supplier_form .bd-file-remove-label input[type="checkbox"] {
    margin: 0;
}

.supplier_form .bd-files-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.supplier_form .bd-files-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.supplier_form .bd-file-input {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.supplier_form .bd-file-input__native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.supplier_form .bd-file-input__button {
    flex: 0 0 auto;
    padding: 0.55em 0.8em;
    background: #ffffff;
    border: 1.5px solid #E3E6F0;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #353D92;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.supplier_form .bd-file-input__button:hover,
.supplier_form .bd-file-input__button:focus {
    border-color: #353D92;
    background: #f6f7fc;
    outline: none;
}

.supplier_form .bd-file-input__name {
    flex: 1;
    min-width: 0;
    padding: 0.55em 0.8em;
    background: #fcfcff;
    border: 1.5px solid #E3E6F0;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #2a2e39;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier_form .bd-files-row__remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid #E3E6F0;
    border-radius: 6px;
    color: #b32d2e;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}

.supplier_form .bd-files-row__remove:hover,
.supplier_form .bd-files-row__remove:focus {
    background: #ffebee;
    border-color: #ef9a9a;
    outline: none;
}

.supplier_form .bd-files-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ffffff;
    color: #353D92;
    border: 1.5px dashed #353D92;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.supplier_form .bd-files-add:hover,
.supplier_form .bd-files-add:focus {
    background: #353D92;
    color: #ffffff;
    outline: none;
}

.supplier_form .bd-files-help {
    display: block;
    margin-top: 8px;
    color: #7881c3;
    font-size: 0.85em;
}

@media (max-width: 600px) {
    .supplier_form .bd-files-row {
        flex-wrap: wrap;
    }
    .supplier_form .bd-file-input {
        flex-basis: calc(100% - 40px);
    }
    .supplier_form .bd-file-input__button,
    .supplier_form .bd-file-input__name {
        min-width: 0;
    }
}

/*--------------------------------------------------------------
# Final-Absenden Gating
--------------------------------------------------------------*/
.supplier_form .login-button.final-submit:disabled,
.supplier_form .login-button.final-submit.is-disabled {
    background: #cdd0e3;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    pointer-events: auto; /* damit der Tooltip / Hint via :hover ansprechbar bleibt */
}

.supplier_form .login-button.final-submit:disabled:hover,
.supplier_form .login-button.final-submit.is-disabled:hover {
    background: #cdd0e3;
    color: #ffffff;
    transform: none;
}

.supplier_form .bd-final-submit-hint {
    flex-basis: 100%;
    margin: 0.6em 0 0 0;
    color: #6971aa;
    font-size: 0.85rem;
    line-height: 1.4;
}

/*--------------------------------------------------------------
# Finalized-Banner (Admin-Sicht nach Final-Submit)
--------------------------------------------------------------*/
.supplier_form .bd-finalized-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 0 1.4em 0;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-left: 5px solid #ffa000;
    border-radius: 8px;
    color: #5d4037;
}

.supplier_form .bd-finalized-banner__icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
}

.supplier_form .bd-finalized-banner__text {
    flex: 1;
    min-width: 0;
}

.supplier_form .bd-finalized-banner__text strong {
    color: #c66800;
    font-size: 1.05rem;
}

.supplier_form .bd-finalized-banner__when {
    color: #6d4c41;
    font-size: 0.95rem;
    margin-left: 6px;
}

.supplier_form .bd-finalized-banner__text p {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/*--------------------------------------------------------------
# Reopen-Button (Admin-only)
--------------------------------------------------------------*/
.supplier_form .bd-reopen-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.7em 1.4em;
    background: #ffffff;
    color: #c66800;
    border: 1.5px solid #ffa000;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.supplier_form .bd-reopen-button:hover,
.supplier_form .bd-reopen-button:focus {
    background: #ffa000;
    color: #ffffff;
    outline: none;
}